Escolar Documentos
Profissional Documentos
Cultura Documentos
BR
Aprendendo HTML
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 especficos para a criao de documentos HTML, que facilitam bastante o trabalho,
mas muito importante conhecer a linguagem para que seja possvel criar boas pginas.
Nem todos os navegadores suportam todas as TAGS. interessante sempre criar o documento com o
conjunto mais bsico de TAGS para que seja garantida a sua execuo perfeita em qualquer
navegador.
O HTML no faz diferena entre letras maisculas e minsculas. Mantenha um padro em sua
programao apenas para seu controle ( importante!).
WWW.LIGG3.COM.BR
Aprendendo HTML
Dicas
Alguns navegadores no exigem a presena das tags <HTML> e </HTML> mas por motivo de
compatibilidade, comee seu documento HTML sempre utilizando essas tags .
Tag <TITLE>
Tag <ISINDEX>
Tag <META>
Tag <NEXTID>
Dicas
Utilize sempre um ttulo condizente com o contedo de sua pgina HTML. Ajuda o leitor e pode ser
utilizado como nome para seus endereos favoritos (bookmarks).
E
x
e
r
c
c
i
o
2
.
1
Dicas
Crie sempre um diretrio especial para seu projeto em HTML. Isso ir ajud-lo a encontrar seus
arquivos posteriormente.
WWW.LIGG3.COM.BR
2
WWW.LIGG3.COM.BR
Aprendendo HTML
As imagens mostradas pelos navegadores normalmente devem estar nos formatos GIF (.gif) e JPEG
(.jpg) . Outros formatos no so 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 mudana da cor de fundo.
E
x
e
r
c
c
i
o
Encontre um arquivo dos tipos GIF ou JPEG e coloque como fundo do seu
documento
3
.
1
WWW.LIGG3.COM.BR
3
WWW.LIGG3.COM.BR
Aprendendo HTML
c
i
o
4
. <BODY>
1
O HTML precisa de tags especiais de quebra de linha .
Os ENTERs colocados no
texto
no geram quebras de linhas .
</BODY>
</HTML>
Tags <P> ... </P>
Essas tags criam pargrafos no texto do corpo do documento, gerando uma quebra de linha
maior que a da tag <BR>. Admitem tambm atributo de alinhamento ALIGN=left (
esquerda), ALIGN=right ( direita) e ALIGN=center (ao centro).
Tags <B> ... </B>
Coloca em negrito o texto envolvido.
Tags <I> ... </I>
Coloca em itlico o texto envolvido.
Tags <U> ... </U>
Sublinha o texto envolvido.
Tags <SUB> ... </SUB> e <SUP> ... </SUP>
O texto envolvido fica Subscrito e Sobrescrito , respectivamente.
WWW.LIGG3.COM.BR
4
WWW.LIGG3.COM.BR
Aprendendo HTML
E
x
e
r
c
c
i
o
Altere o exerccio anterior trocando as tags <BR> por <P> e observe a diferena.
Aumente o texto e deixe algumas linhas com <BR> para facilitar a visualizao.
Utilize variaes de alinhamento nos pargrafos.
Coloque algumas tags de formatao de fontes para criar textos enfatizados (negrito,
itlico, sublinhado, subscrito e sobrescrito)
4
.
2
WWW.LIGG3.COM.BR
5
WWW.LIGG3.COM.BR
Aprendendo HTML
Sua utilizao dos tags H1.. H6 livre, embora o comando H1 deva salientar tpicos principais e assim
sucessivamente para tpicos e menor importncia.
E
x
e
r
c
c
i
o
E
x
e
r
c
c
i
o
<HTML>
<HEAD>
<TITLE>
Exemplo que mostra os cabecalhos da sees.
</TITLE>
5 </HEAD>
.
1 <BODY>
<H1> Cabealho principal </H1>
Este texto est sobre a seo principal
<H2> Cabealho nvel 2 </H2>
<H3> Cabealho nvel 3 </H2>
<H4> Cabealho nvel 4 </H2>
<H5> Cabealho nvel 5 </H2>
<H6> Cabealho nvel 6 </H2>
Este texto est sobre a seo cabealho nvel 6
</BODY>
</HTML>
No curso tcnico de
5 Processamento de Dados do CRTSE,
. os alunos desenvolvem a linguagem HTML*,
2 HyperText Markup Language
*
WWW.LIGG3.COM.BR
Aprendendo HTML
Cuidado com a utilizao excessiva de fontes, no garantido que exista a fonte especificada no
computador que est acessando a sua pgina na Internet.
Se forem colocados vrios tipos de fontes separados por vrgulas, o navegador utilizar a primeira fonte
da lista que estiver disponvel na mquina.
E
x
e
r
c
c
i
o
6
. <BODY>
1 <FONT SIZE=1 FACE=arial COLOR=#FF0000> Arial, tam. 1 </FONT>
<FONT SIZE=3 FACE=helvetica COLOR=#00FF00> Helvetica, tam. 3 </FONT>
<FONT SIZE=5 FACE=times COLOR=#0000FF> Fonte de tamanho 5 </FONT>
<FONT SIZE=7 COLOR=#FF00FF> Times o padro</FONT>
</BODY>
</HTML>
Tag <BASEFONT>
Tem a finalidade de definir um padro para a fonte que ser utilizada no documento todo.
Ainda assim possvel utilizar as tags <FONT> ...</FONT> para alterar esse padro.
E
x
e
r
c
c
i
o
6
. <BASEFONT SIZE=4 COLOR=#00FFFF FACE=arial, helvetica, times>
2 Todo esse texto deve estar em fonte Arial de tamanho 4 e cor azul claro. Se na
mquina no tiver o fonte Arial, ser utilizado o Helvetica e em ltimo caso, Times.
</BODY>
</HTML>
WWW.LIGG3.COM.BR
7
WWW.LIGG3.COM.BR
Aprendendo HTML
E
x
e
r
c
c
i
o
7
. <BODY>
1 Linha comum<BR>
<HR>
Linha com a espessura modificada
<HR SIZE=5>
Linha com largura especificada em percentual
<HR WIDTH=50%>
Linha com largura absoluta e sem sombra
<HR WIDTH=400 NOSHADE>
</BODY>
</HTML>
Dicas
A tag <HR> no precisa de terminador </HR>.
WWW.LIGG3.COM.BR
8
WWW.LIGG3.COM.BR
Aprendendo HTML
HREF : Marca a ncora como um link para outro documento, recurso ou parte do mesmo documento.
NAME : Marca a ncora para um possvel local do documento com um nome para que possa ser referido
como alvo de um link . O nome especificado deve ser nico no documento (no 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
programao HTML.
E
x
e
r
c
c
i
o
8 <BODY>
. <H1> Ser que possvel ligar dois documentos ?? </H1>
1
<A HREF="exer71.html"> Clique aqui para ir ao exerccio 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
Na tag <BODY> possvel especificar a cor dos links no visitados, links visitados e link ativo, utilizando
os atributos LINK, VLINK e ALINK, respectivamente.
Quando referindo pginas que esto fora do diretrio onde seu documento est armazenado no se
esquea de colocar o caminho completo para o link, por exemplo, http://www.facens.br para fazer um
link para o site da FACENS.
WWW.LIGG3.COM.BR
9
WWW.LIGG3.COM.BR
Aprendendo HTML
E
x
e
r
c
c
i
o
8 <BODY>
. <H1> Vamos ligar esse documento parte inferior do exerccio 8.1 </H1>
2
<A HREF="exer81.html#Final"> Clique aqui para ir ao final do exerccio 8.1 </A>
<BR>
<A HREF="#Final"> Clique aqui para ir ao final desse exerccio </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
x
e
r
c
c
i
o
Crie um documento HTML que faa um espcie de menu com os exerccios feitos at
agora, utilizando um link para cada um deles.
Gaste o que voc aprendeu, utilize a variao de cores, fontes e efeitos em fontes.
Tudo o que for escrito entre as tags <A> e </A> ser considerado parte do link.
8
.
3
WWW.LIGG3.COM.BR
10
WWW.LIGG3.COM.BR
Aprendendo HTML
SRC : Especifica o nome do arquivo de imagem. Sem esse atributo a tag <IMG> no tem
finalidade.
ALT : Texto alternativo para a imagem (muito til quando o usurio no est exibindo as
figuras. O texto auxilia no entendimento do significado daquela imagem).
HEIGHT : Altura da figura em pixels (se no utilizada, a figura ser mostrada em sua
altura original).
Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponveis para
a tag <IMG>.
E
x
e
r
c
c
i
o
<HTML>
<HEAD>
<TITLE>
9
Mostrando figuras no documento HTML.
.
</TITLE>
1 </HEAD>
<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
possvel colocar imagens como links. Basta inclu-la entre as tags <A> e </A>.
WWW.LIGG3.COM.BR
11
WWW.LIGG3.COM.BR
Aprendendo HTML
Resultado
<UL>
<LI>Mas
<LI>Laranjas
</UL>
Apples
Oranges
Dicas
possvel escolher o tipo dos bullets que sero apresentados atravs 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 so opcionais desde que uma nova tag implique no
final da anterior.
As listas podem estar aninhadas e nesse caso, so apresentadas internamente aos itens da lista
anterior
Resultado
<OL>
<LI>Apples
<LI>Oranges
</OL>
1
2
Apples
Oranges
Dicas
Junto com a tag <OL> podemos utilizar dois atributos : TYPE=X (que permite que se especifique o
tipo de sistema de numerao A maisculas, a minsculas, I numerais romanos grandes e i
numerais romanos pequenos) e START=X (que permite especificar quaisquer valores para iniciar a
lista).
WWW.LIGG3.COM.BR
12
WWW.LIGG3.COM.BR
Aprendendo HTML
E
x
e
r
c
c
i
o
1
0
.
1
Resultado
HTML
HyperText Markup Language
SGML
Standard Generalized Markup Language
Utilizando as tags desse captulo voc deve criar a seguinte pgina. De acordo com
suas preferncias.
Utilizando lista definio:
WWW.LIGG3.COM.BR
13
WWW.LIGG3.COM.BR
Aprendendo HTML
+--------------------------+-------------+
c
| Maa argentina
|
R$ 10,00 |
i
| Laranja Pera
|
R$ 5,00 |
o
| Banana Nanica
|
R$ 2,50 |
+--------------------------+-------------+
1
1
.
1
WWW.LIGG3.COM.BR
14