Escolar Documentos
Profissional Documentos
Cultura Documentos
net
Aprendendo HTML
HyperText Markup Language ou Linguagem de Marcação HiperTexto, uma linguagem simples composta de
marcações de formatação e diagramação de hipertexto/hipermídia (informações em texto, imagens, sons e
ações ligadas umas às outras de uma forma complexa e não-sequencial através de chaves relacionadas).
É a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatação e diagramação de
hipertexto/hipermídia. Atualmente existem muitas outras linguagens utilizadas concorrentemente com o HTML
(Java, ActiveX, etc...) mas a base da WWW ainda é , de longe, o HTML, que é interpretada por todos os
navegadores (browsers) disponíveis (Netscape, Internet Explorer, Mosaic, etc...).
O documento em HTML é um arquivo texto comum (ASCII) que pode ser escrito através de qualquer editor de
textos comum (Edit, E , Norton Editor, notepad, ...) e tem a terminação .htm ou .html .
Como é uma linguagem interpretada, a partir do momento em que se salvou o arquivo HTML o mesmo já pode
ser aberto por qualquer navegador, que é o único software que pode determinar se o documento foi escrito
dentro dos padrões da linguagem. Atualmente estamos na versão 3.0 do HTML, mas o HTML 2.0 é a versão
reconhecida por todos os navegadores.
Dicas
Os softwares básicos para a programação em HTML são apenas dois : um Editor de Textos e um
Navegador .
Se você está pensando em utilizar um Processador de Textos tipo Word, WordPad, etc... esteja seguro
de sempre gravar os arquivos no modo somente texto.
Existem softwares específicos para a criação de documentos HTML, que facilitam bastante o trabalho,
mas é muito importante conhecer a linguagem para que seja possível criar boas páginas.
Ex.: <BODY> .... corpo do documento ... </BODY> (define o início e o fim do corpo do
documento HTML)
Algumas TAGS admitem de atributos (parâmetros) que alteram a maneira como o navegador
deve interpretá-la e normalmente são colocados na TAG inicializadora.
Dicas
Nem todos os navegadores suportam todas as TAGS. É interessante sempre criar o documento com o
conjunto mais básico de TAGS para que seja garantida a sua execução perfeita em qualquer
navegador.
Os navegadores também não interpretam todas as TAGS de maneira idêntica. É conveniente testar o
funcionamento de seu documento em mais de um navegador para conferir o comportamento.
O HTML não faz diferença entre letras maiúsculas e minúsculas. Mantenha um padrão em sua
programação apenas para seu controle (é importante!).
Todo documento HTML fica contido entre as tags <HTML> e </HTML>. Dentro dessas tags
temos duas seções : HEAD e BODY que indicam o cabeçalho do documento e o corpo,
respectivamente.
1
www.businessmail.kit.net
Aprendendo HTML
Dicas
Alguns navegadores não exigem a presença das tags <HTML> e </HTML> mas por motivo de
compatibilidade, começe seu documento HTML sempre utilizando essas tags .
9 Tag <TITLE>
9 Tag <ISINDEX>
9 Tag <META>
9 Tag <NEXTID>
Essas tags devem ser utilizadas entre as tags de cabeçalho <HEAD>. Determinam o título
que irá ser apresentado na barra de título da janela do navegador.
Abaixo temos um exemplo que ilustra a utilização das tags vistas até agora :
<HTML>
<HEAD>
<TITLE>Meu primeiro documento HTML</TITLE>
</HEAD>
</HTML>
Exemplo 2.1 – Um documento HTML mínimo.
Dicas
Utilize sempre um título condizente com o conteúdo de sua página HTML. Ajuda o leitor e pode ser
utilizado como nome para seus endereços favoritos (bookmarks).
2
.
1
Dicas
Crie sempre um diretório especial para seu projeto em HTML. Isso irá ajudá-lo a encontrar seus
arquivos posteriormente.
2
www.businessmail.kit.net
Aprendendo HTML
Todo o conteúdo do documento HTML deve estar entre as tags <BODY> e </BODY> .
Na versão 3.0 do HTML a tag <BODY> passou a admitir os atributos BGCOLOR, TEXT,
LINK, ALINK e VLINK, que definem as cores de preenchimento da página, texto, links não
visitados, link ativos e links visitados respectivamente e BACKGROUND, que define uma
imagem de fundo para a página. Se não forem especificadas nem BGCOLOR e nem
BACKGROUND, a cor de fundo da página será a padrão do navegador.
Dicas
As imagens mostradas pelos navegadores normalmente devem estar nos formatos GIF (.gif) e JPEG
(.jpg) . Outros formatos não são aceitos por todos os navegadores.
As cores devem ser especificadas no formato RGB (Red, Green, Blue) e em hexadecimal . Na forma
geral “#RRGGBB”.
Alguns exemplos :
#FFFFFF (Branco) #00FF00 (Verde) #00FFFF (Cian) #C0C0C0 (Cinza)
#000000 (Preto) #0000FF (Azul) #FFFF00 (Amarelo) #BC8F8F (Pink)
#FF0000 (Vermelho) #FF00FF (Magenta) #A8A8A8 (Cinza claro) #4F2F4F (Violeta)
<HTML>
<HEAD>
<TITLE>Esse documento tem o fundo amarelo !! </TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFF00”>
</BODY>
</HTML>
Exemplo 3.1 – Um documento HTML com mudança da cor de fundo.
3
.
1
3
www.businessmail.kit.net
Aprendendo HTML
9 Tag <BR>
Faz uma quebra de linha no texto. O texto em um documento HTML não faz quebras de linha
automáticas. Essas devem ser inseridas utilizando-se tags <BR>.
Essas tags criam parágrafos no texto do corpo do documento, gerando uma quebra de linha
maior que a da tag <BR>. Admitem também atributo de alinhamento ALIGN=”left” (à
esquerda), ALIGN=”right” (à direita) e ALIGN=”center” (ao centro).
4
www.businessmail.kit.net
Aprendendo HTML
E Altere o exercício anterior trocando as tags <BR> por <P> e observe a diferença.
x Aumente o texto e deixe algumas linhas com <BR> para facilitar a visualização.
e Utilize variações de alinhamento nos parágrafos.
r Coloque algumas tags de formatação de fontes para criar textos enfatizados (negrito,
c itálico, sublinhado, subscrito e sobrescrito)
í
c
i
o
4
.
2
5
www.businessmail.kit.net
Aprendendo HTML
Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), que podem ser de
seis formas com tamanhos, identação e posicionamento diferentes. Juntamente
podemos utilizar as opções de alinhamento ALIGN=”left” (à esquerda), ALIGN=”right” (à
direita) e ALIGN=”center” (ao centro).
Dicas
Sua utilização dos tags H1.. H6 é livre, embora o comando H1 deva salientar tópicos principais e assim
sucessivamente para tópicos e menor importância.
*
HTML é a linguagem utilizada nas páginas da Internet
Dicas
Os tamanhos de fontes podem variar entre 1 e 7 apenas.
Cuidado com a utilização excessiva de fontes, não é garantido que exista a fonte especificada no
computador que está acessando a sua página na Internet.
Se forem colocados vários tipos de fontes separados por vírgulas, o navegador utilizará a primeira fonte
da lista que estiver disponível na máquina.
9 Tag <BASEFONT>
Tem a finalidade de definir um padrão para a fonte que será utilizada no documento todo.
Ainda assim é possível utilizar as tags <FONT> ...</FONT> para alterar esse padrão.
7
www.businessmail.kit.net
Aprendendo HTML
Desenha uma linha horizontal no documento. Pode ser modificada pelos seguinte atributos :
</BODY>
</HTML>
Dicas
A tag <HR> não precisa de terminador </HR>.
8
www.businessmail.kit.net
Aprendendo HTML
9 Tags <A>...</A>
Faz a âncora entre documentos ou partes de um mesmo documento. Deve sempre ser
utilizada acompanhada de um atributo que fará a especificação do tipo de âncora que se
deseja. O texto que está incluído entre as tags <A> e </A> será apresentado como link no
documento (sublinhado e em cor destacada).
Abaixo alguns dos atributos mais comuns que podem ser utilizados com a tag <A> :
HREF : Marca a âncora como um link para outro documento, recurso ou parte do mesmo documento.
NAME : Marca a âncora para um possível local do documento com um nome para que possa ser referido
como alvo de um link . O nome especificado deve ser único no documento (não podem haver duas âncoras
com o mesmo nome no mesmo documento).
Dicas
Existem ainda os atributos REL, VER, URN, TITLE e TARGET, menos utilizados atualmente na
programação HTML.
8 <BODY>
. <H1> Será que é possível ligar dois documentos ?? </H1>
1 <A HREF="exer71.html"> Clique aqui para ir ao exercício 7 </A>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="Final">Essa parte está no final do documento.</A>
</BODY>
</HTML>
Dicas
Coloque textos curtos e significativos para seus links.
Na tag <BODY> é possível especificar a cor dos links não visitados, links visitados e link ativo, utilizando
os atributos LINK, VLINK e ALINK, respectivamente.
Quando referindo páginas que estão fora do diretório onde seu documento está armazenado não se
esqueça de colocar o caminho completo para o link, por exemplo, http://www.facens.br para fazer um
link para o site da FACENS.
9
www.businessmail.kit.net
Aprendendo HTML
E Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer82.html.
x Abra o seu navegador e utilize-o para verificar o resultado do exercício.
e
r <HTML>
c <HEAD>
í <TITLE>
c Link para o exercício 8.1.
i </TITLE>
o </HEAD>
8 <BODY>
. <H1> Vamos ligar esse documento à parte inferior do exercício 8.1 </H1>
2 <A HREF="exer81.html#Final"> Clique aqui para ir ao final do exercício 8.1 </A>
<BR>
<A HREF="#Final"> Clique aqui para ir ao final desse exercício </A>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="Final">Final desse documento.</A>
</BODY>
</HTML>
E Crie um documento HTML que faça um espécie de menu com os exercícios feitos até
x agora, utilizando um link para cada um deles.
e Gaste o que você aprendeu, utilize a variação de cores, fontes e efeitos em fontes.
r Tudo o que for escrito entre as tags <A> e </A> será considerado parte do link.
c
í
c
i
o
8
.
3
10
www.businessmail.kit.net
Aprendendo HTML
Insere uma imagem dentro de um documento HTML. As imagens, assim como em <BODY
BACKGROUND >, devem estar nos formatos GIF ou JPEG.
Os atributos normalmente utilizados são :
SRC : Especifica o nome do arquivo de imagem. Sem esse atributo a tag <IMG> não tem
finalidade.
ALT : Texto alternativo para a imagem (muito útil quando o usuário não está exibindo as
figuras. O texto auxilia no entendimento do significado daquela imagem).
ALIGN : Alinhamento do texto em relação à imagem.
HEIGHT : Altura da figura em pixels (se não utilizada, a figura será mostrada em sua
altura original).
WIDTH : Largura, semelhante a HEIGHT.
Dicas
Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponíveis para
a tag <IMG>.
<BODY>
<BR>
<IMG SRC="figura1.gif"> Veja uma figura no documento...
<BR><BR><BR>
<IMG SRC="figura2.gif" ALIGN="top"> Essa figura tem o texto alinhado acima
<BR><BR><BR>
<IMG SRC="figura3.gif" ALT="Texto alternativo"> Passe o mouse sobre a figura
<BR><BR><BR>
<IMG SRC="figura4.gif" HEIGHT="100"> Essa figura esta com a altura modificada
</BODY>
</HTML>
Dicas
É possível colocar imagens como links. Basta incluí-la entre as tags <A> e </A>.
11
www.businessmail.kit.net
Aprendendo HTML
Uma LISTA não ordenada é primeiro marcada com tag de início e fim <UL>, então cada item
da lista é indicado com uma tag <LI>.
A lista dos itens, a qual pode aparecer em uma ordem particular é usualmente mostrada
como uma lista de bullets.
Exemplo Resultado
<UL> • Apples
<LI>Maçãs • Oranges
<LI>Laranjas
</UL>
Dicas
É possível escolher o tipo dos bullets que serão apresentados através do atributo <UL TYPE=”X”> ,
onde X pode ser SQUARE, CIRCLE e DISC. Isso funciona apenas com o NETSCAPE.
Os itens da lista tem tags de fim </LI> , mas elas são opcionais desde que uma nova tag implique no
final da anterior.
As listas podem estar aninhadas e nesse caso, são apresentadas internamente aos itens da lista
anterior
Uma LISTA ordenada é primeiro marcada com tag de início e fim <OL>, então cada item da
lista é indicado com uma tag <LI>.
Uma lista de itens em uma ordem particular. Estas são normalmente numeradas quando
mostradas.
Exemplo Resultado
<OL> 1 Apples
<LI>Apples 2 Oranges
<LI>Oranges
</OL>
Dicas
Junto com a tag <OL> podemos utilizar dois atributos : TYPE=”X” (que permite que se especifique o
tipo de sistema de numeração A ⇒ maiúsculas, a ⇒ minúsculas, I ⇒ numerais romanos grandes e i ⇒
numerais romanos pequenos) e START=”X” (que permite especificar quaisquer valores para iniciar a
lista).
12
www.businessmail.kit.net
Aprendendo HTML
Tags <DL> ... </DL>
9 Tag <DT>
9 Tag <DD>
Uma lista definição <DL> é uma lista de termos <DT> e suas definições <DD>. Cada
definição é usualmente mostrada identada em relação ao termo correspondente.
Exemplo Resultado
<DL> HTML
<DT>HTML HyperText Markup Language
<DD>HyperText Markup Language SGML
<DT>SGML Standard Generalized Markup Language
<DD>Standard Generalized Markup Language
</DL>
E Utilizando as tags desse capítulo você deve criar a seguinte página. De acordo com
x suas preferências.
e
r Utilizando lista definição:
c
í As coisas que eu mais gosto de fazer :
c
i Sábado
o Pela manhã
XXXXXXX
1 YYYYYYYY
0 À tarde
. XXXXXXX
1 YYYYYYYY
À noite
XXXXXXX
YYYYYYYY
Domingo
XXXXXXXXXXX
YYYYYYYYYYYY
AAAAAAAAA
BBBBBBBBB
CCCCCCCC
13
www.businessmail.kit.net
Aprendendo HTML
Delimita um texto a ser exibido com fonte de largura fixa, da maneira como foi previamente
formatado. Com a utilização desse elemento, todos os espaços e saltos de linha são
considerados de acordo com o que é inserido no documento.
Os GIF’s animados, imagens que se alteram com o tempo nas páginas HTML não são um
recurso específico da linguagem. Na verdade, essas figuras são montadas a partir de uma
seqüência de imagens (GIF’s) estáticas, que, colocados em ordem e com um tempo entre as
mudanças causam a impressão de animação.
Isso pode ser feito facilmente com ferramentas específicas para essa finalidade. Muitas
podem ser encontradas na própria Internet, mas uma ferramenta bastante utilizada e
conhecida é o GIF Construction Set, que possui inclusive um assistente (Wizard) de criação
de GIF’s animados.
14
www.businessmail.kit.net
Aprendendo HTML
ANOTAÇÕES:
15