Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML PDF
HTML PDF
Dicas
Os softwares bsicos para a programao em HTML so 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, mas recomendo utilizar o Bloco de
Notas(Notepad) do Windows.
Existem softwares especficos para a criao de documentos HTML(tipo o Front Page), que facilitam
bastante o trabalho, mas muito importante conhecer a linguagem para que seja possvel criar boas
pginas.
Dicas
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.
Os navegadores tambm no interpretam todas as TAGS de maneira idntica. conveniente testar o
funcionamento de seu documento em mais de um navegador para conferir o comportamento.
O HTML no faz diferena entre letras maisculas e minsculas. Mantenha um padro em sua
programao apenas para seu controle ( importante!).
Pgina
Aprendendo HTML
Tag <TITLE>
Tag <ISINDEX>
Tag <META>
Tag <NEXTID>
Dessas tags, a mais normalmente usada a <TITLE>, que vista a seguir.
<HTML>
<HEAD>
<TITLE>Meu primeiro documento HTML</TITLE>
</HEAD>
</HTML>
Exemplo 2.1 Um documento HTML mnimo.
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).
Pgina
Aprendendo HTML
Dicas
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.
Encontre um arquivo dos tipos GIF ou JPEG e coloque como fundo do seu
c
documento
i
Retire a tag </BODY>
o
3
.
1
Pgina
Aprendendo HTML
Tag <BR>
Faz uma quebra de linha no texto. O texto em um documento HTML no faz quebras de linha automticas.
Essas devem ser inseridas utilizando-se tags <BR>.
E
x
e
r
c
c
i
o
4
.
1
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).
Dicas
Evite usar o Sublinhado em palavras que no so links, pois isto confunde os visitantes de suas
pginas, caso voc precise realar alguma palavra utilize os recursos de Itlico ou Negrito.
Pgina
Aprendendo HTML
E
x
e
r
c
c
i
o
4
.
2
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)
Pgina
Aprendendo HTML
Dicas
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
5
.
1
E
x
e
r
c
c
i
o
5
.
2
Pgina
Aprendendo HTML
Dicas
Os tamanhos de fontes podem variar entre 1 e 7 apenas(No HTML verso 4 no existe limite para o
tamanho da fonte).
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
.
1
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
.
2
Pgina
Aprendendo HTML
E
x
e
r
c
c
i
o
7
.
1
Dicas
A tag <HR> no precisa de terminador </HR>.
Pgina
Aprendendo HTML
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 especificao do tipo de ncora que se deseja. O texto que est includo 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 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
.
1
Dicas
Coloque textos curtos e significativos para seus links.
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.
Evite usar sublinhado em palavras que no so links, pois isto confunde os visitantes de sua pgina!
E
x
e
r
c
c
i
o
8
.
2
Aprendendo HTML
Crie um documento HTML que faa um espcie de menu com os exerccios feitos at
E agora, utilizando um link para cada um deles.
x Gaste o que voc aprendeu, utilize a variao de cores, fontes e efeitos em fontes.
e Tudo o que for escrito entre as tags <A> e </A> ser considerado parte do link.
r
c
c
i
o
8
.
3
Pgina
10
Aprendendo HTML
Dicas
Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponveis para
a tag <IMG>.
E
x
e
r
c
c
i
o
9
.
1
Dicas
possvel colocar imagens como links. Basta inclu-la entre as tags <A> e </A>.
Pgina
11
Aprendendo HTML
Exemplo
Resultado
<UL>
<LI>Mas
<LI>Laranjas
</UL>
Mas
Laranjas
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
Exemplo
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).
Pgina
12
Aprendendo HTML
Tags <DL> ... </DL>
Tag <DT>
Tag <DD>
Uma lista definio <DL> uma lista de termos <DT> e suas definies <DD>. Cada definio usualmente
mostrada identada em relao ao termo correspondente.
Exemplo
Resultado
<DL>
<DT>HTML
<DD>HyperText Markup Language
<DT>SGML
<DD>Standard Generalized Markup Language
</DL>
HTML
HyperText Markup Language
SGML
Standard Generalized Markup Language
E
x
e
r
c
c
i
o
1
0
.
1
Utilizando as tags desse captulo voc deve criar a seguinte pgina. De acordo com
suas preferncias.
Utilizando lista definio:
As coisas que eu mais gosto de fazer :
Sbado
Pela manh
XXXXXXX
YYYYYYYY
tarde
XXXXXXX
YYYYYYYY
noite
XXXXXXX
YYYYYYYY
Domingo
XXXXXXXXXXX
YYYYYYYYYYYY
Utilizando lista no ordenada:
Minhas bebidas preferidas
AAAAAAA
BBBBBBB
CCCCCCC
Utilizando lista ordenada:
Quando eu acordo de manh, essa a sequncia das coisas que fao :
AAAAAAAAA
BBBBBBBBB
CCCCCCCC
Pgina
13
Aprendendo HTML
+--------------------------+-------------+
c
| Maa argentina
|
R$ 10,00 |
i
| Laranja Pera
|
R$ 5,00 |
o
| Banana Nanica
|
R$ 2,50 |
1
+--------------------------+-------------+
1
.
1
Pgina
14