|
Fazer um Home Page não é
complicado, aliás é bastante simples. Primeiro você deve escolher um
programa para fazer sua Home Page, isso vai fazer a diferença, você pode
utilizar até mesmo o Note Pad (Bloco de Notas) do Windows, onde é necessário
a utilização do HTML, são exemplos mais simples, mais para você começar,
já vai ajudar um monte, portanto leia atentamente as instruções, elas são
explicativas, básicas e bem fácil.
HTML
significa Hypertext Markup Language e é a linguagem de descrição de
documentos usada na World Wide Web, ou Internet. Ela é orientada por
marcadores ou TAGs.
Cada TAG
informa ao programa visualizador, ou Browser (Navegador), como ele deverá
ver o texto.
Os TAGs podem ser únicos ou
duplos, com início e fim.
Exemplos:
TAG único: <BR>
TAG duplo: <P>....</P>
Bem
para quem está começando aconselhamos um editor simples, o editor do
Netscape, o Composer, nele você já visualiza o que vai ver na Internet, não
precisa usar HTML; para quem já sabe um pouco mais de HTML aconselhamos o
Microsoft Front Page, ele é um excelente programa, que possui vários
recursos.
|
Aprendendo noções
de HTML:
|
Para você que resolveu fazer
sua HP em um programa que use tags de HTML ai vai as noções... Todo o
documento HTML fica contido entre os TAGS: <HTML> e </HTML>.
Quer dizer que para iniciar a página você começa com <HTML> e
termina com ele</HTML> para o browser saber onde começa e termina a página
ou o HTML.
Em um documento em HTML temos duas
partes, o cabeçalho e o corpo ou conteúdo:
HEAD Contém parâmetros de
configuração do documento.
BODY Contém o documento em si.
|
A
estrutura de um documento HTML é:
|
<HTML>
<HEAD>
<TITLE>Título da Home
Page</TITLE>
</HEAD>
<BODY
BACKGROUND="imagem.gif"> ou só <BODY>
*** Conteúdo da Home Page ***
</BODY>
</HTML>
|
Tags
usados no início do documento:
|
<HTML>...</HTML>
Envolvem todo o documento.
<HEAD>...</HEAD>
Envolvem a seção de cabeçalho do documento.
<TITLE>...</TITLE>
Indica o título do documento para o Browser.
<BODY>...</BODY>
Envolvem o conteúdo principal da Home Page.
Títulos e subtítulos: Para
demarcar títulos e subtítulos, use os TAGs de HEADER <H1></H1>
a <H6></H6> o H6 é o menor e o H1 é o maior, juntamente com as
opções <CENTER> centralizar </CENTER> ou <BLINK>para as
palavras ficarem piscando</BLINK>.
Parágrafos e frases: Os parágrafos
de texto devem estar inseridos entre os TAGs: <P> , </P>
Para dar destaque a algumas frases e palavras, existem os
TAGs:
<B> negrito </B>
; <I> itálico </I>.
Só o que está dentro dos tags
é que se modifica.
<U> sublinhado </U>
E caso você queira negrito itálico por exemplo é só por
<I><B> e ficará como você quer, em negrito e
itálico</B></I>
Imagens: Podemos inserir
imagens dentro de um documento HTML, mas devemos ter o máximo de cuidado,
para não exagerar, pois muitas imagens só deixa a páginas mais lenta para
o usuário. Os formatos mais usados são o GIF e o JPG, ambos com compactação
de pixels.
Para inserir uma imagem, uso o
TAG: <IMG SRC>, que é único, não exigindo um TAG finalizador.
Exemplo: <IMG
SRC="figura1.ext">
Os arquivos com as imagens
deverão estar armazenados onde você vai colocar sua página juntamente com
o documento HTML.
OBS.: É esse também o comando
para quem quer mandar imagens em salas de imagens, IMG
SRC="http://www.dataplace.com.br/images/dpnetpeq.jpg".jpg>
Links: Os Links servem para
criar Palavras Chaves, que permitem a interligação entre documentos HTML e
outros documentos ou até arquivos FTP.
Veja o seguinte exemplo: <A
HREF="http://www.dataplace.com.br"> DataPlace Internet Service
Provider </A> Tudo que estiver no meio do comando de link ficará
com um link, então se quiser por uma imagem para linkar algo é só por no
meio.
Apenas o Explorer 2.0 e o
Netscape 3.0 (Ou Superiores) aceitam este recurso, e os dois aceitem apenas
arquivos MID e WAV, mas com parâmetros diferentes.
No Explorer: Abaixo do rótulo
<BODY> acrescente: <BGSOUND SRC="nome do arquivo.mid"
LOOP=Número de execuções>
Obs.: Para repetir o som
infinitamente basta colocar LOOP=INFINITE
No Netscape:
Em qualquer parte do documento
HTML, acrescente: <EMBED SRC="nome do arquivo.mid"
AUTOSTART="true" VOLUME="100" WIDTH="0"
HEIGHT="100" CONTROLS="none">
Música de fundo é bom
recurso, mas que pode deixar sua página muito mas lenta, por isso se for
utiliza-lo é melhor escolher um arquivo MID.
O que são Frames ?
Frame é apenas uma arquivo
html que permite a apresentação de mais de uma página na mesma tela. Para
usar frames o browser usado deve ser um Nestcape Navigator 2.0 ou superior,
ou o Internet Explorer 3.0 .
A utilização de frames é um
recurso muito útil, mas que deve ser usado concientemente, pois: muitas
pessoas não gostam de frames, alguns browsers não as
aceitam e também porque muitas vezes não há necessidade.
O mais recomendado é colocar
sua página em duas versões, uma com frame e outras sem. Como fazer...
Estrutura
Assim como o corpo do HTML, as
frames tem sua estrutura. Eles entram no lugar do corpo, substituindo o
<BODY></BODY> por
<FRAMESET></FRAMESET>
Ex:
<HTML>
<HEAD>
<TITLE> Título da Página</TITLE>
</HEAD>
<FRAMESET>
Sintaxe dos Frames
</FRAMESET>
</HEAD>
Primeiramente devemos fazer um
documento HTML para ele ser especificado pela sintaxe de frames, no caso
chamado de Frame1.htm.
<HTML>
<HEAD>
<TITLE>Frame 1</TITLE>
</HEAD>
<BODY>
<FONT SIZE=+2>Frame
n1</FONT>
</BODY>
</HEAD>
1. A primeira especificação
é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.
ROWS
Especifica o numero de frames e
a altura de cada um.
Ex:
<FRAMESET
ROWS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM">
</FRAMESET>
Neste exemplo de cima, ele
chama 3 frames, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50%
da tela (ambos em
altura).
COLS
Especifica o numero de frames e
a largura de cada um.
Ex:
<FRAMESET
COLS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
</FRAMESET>
Neste exemplo de cima, ele
chama 3 frames, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50%
da tela (ambos em largura).
2. A segunda especificação é
o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING,
NORESIZE, TARGET.
SRC
Especifica o documento de
formato HTML chamado para o frame. Indispensável, por que sem ele só o
documento aparecerá vazio, só com as divisões.
Ex:
<FRAMESET
COLS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
</FRAMESET>
NAME
Especifica o nome do documento
de formato HTML chamado para o frame. É extremamente necessário para o uso
do Target, que será visto a seguir.
Ex:
<FRAMESET
COLS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM" NAME="Principal>
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
</FRAMESET>
SCROLLING
Define se o Frame terá barra
de rolagem, o default é Auto. Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem
independente do tamanho do documento.
No - Não exibe a barra de
rolagem, mesmo que o documento seja maior que o tamanho especificado.
Auto - Só exibe a barra de
rolagem se o documento for maior que a área especificada.
Ex:
<FRAMESET
COLS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM" NAME="Principal"
SCROLLING="AUTO">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
</FRAMESET>
NORESIZE
Impossibilita o usuário de
mudar o tamanho da área especificada do Frame. Por default o usuário pode
mudar esta área.
<FRAMESET
COLS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM" NAME="Principal" NORESIZE>
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
</FRAMESET>
TARGET
Define qual a área (Frame) que
aparecerá o documento especificado pelo link. Mais útil na utilização de
Menus e índices. Necessita do NAME.
Ex:
<FRAMESET
COLS="20%,30%,50%">
<FRAME
SRC="FRAME1.HTM" NAME="Principal">
<FRAME
SRC="FRAME1.HTM">
<FRAME
SRC="FRAME1.HTM">
</FRAMESET>
O Link:
<A
HREF="http://www.intel.com" TARGET="Principal">
Intel< /A>
BORDER
Define qual a borda que o frame
terá. Mais útil na utilização de de backgrounds iguais.
Ex:
<FRAMESET
COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0>
<FRAME
SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>
<FRAME
SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>
<FRAME
SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0>
</FRAMESET>
Uma âncora desvia com um link
a uma parte do documento.
Para fazer uma âncora use o
parâmetro NAME
<A NAME="AQUI">
Para fazer um link para a âncora
<A
HREF="#AQUI">
LISTAS:
Podemos criar vários tipos de
listas.
Listas Ordenadas:
Use:<OL><LI>Manhã</LI>
<LI>Tarde</LI>
<LI>Tarde</LI></OL>
Exemplo:
#Manhã
#Tarde
#Noite
Listas não ordenadas:
Use:<UL><LI>Manhã</LI>
<LI>Tarde</LI>
<LI>Noite</LI></UL>
Exemplo:
Manhã
Tarde
Noite
Obtenha o programa MAPEDIT.
Crie um arquivo de imagem
(GIF,JPG) e abra-o com o MAPEDIT.
Indique, usando as opções de
SQUARE, CIRCLE ou POLYGON, as área acessíveis da imagem. Para cada área
marcada, indique a Home Page a ser acessada. Envie o arquivo MAP gerado
(*.ma) e a sua imagem GIF para onde irá colocar sua home-page no ar.
Em sua Home Page, coloque os
TAGS:
<A HREF="http://endereço
da sua página/nome do mapa.map">
<IMG SRC="http://endereço
da sua página/nome da imagem.gif" ismap border=0></A>
Para colocar o fundo:
Format - Page Colors and
properties - escolha uma imagem em Choose File.
Se quizer ver e editar em HTML:
Edit - HTML source - escolha seu
editor, pode ser o bloco de notas, depois se quizer fazer algo em HTML é só
ir ai.
Imagem:
Image - Choose File - você
escolhe a imagem
Solid border - aqui você escolhe
se quer por borda no desenho ou não.
Alt. Text - em alternat text você
escreve o que quer que apareça escrito na imagem quando alguém passar o
mouse por cima.
Link to a page - aqui você se
quizer por um link na imagem é só coloca-lo.
Em mais é só escrever e você já
verá o produto final, o que aparecerá na Web.
| 
