Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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 Digite o Exemplo 2.1 utilizando o Notepad e salve-o com o nome de exer21.html . x Abra o seu navegador e utilize-o para verificar o resultado do exerccio. e Quando estiver OK, faa as seguintes alteraes, testando uma a uma : r Mude o ttulo do seu documento c Retire as tags <HTML> e </HTML> Retire a tag </HEAD> c Retire as tags <TITLE> i o 2 . 1 Dicas
Crie sempre um diretrio especial para seu projeto em HTML. Isso ir ajud-lo a encontrar seus arquivos posteriormente.
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.
E Digite o Exemplo 3.1 utilizando o Notepad e salve-o com o nome de exer31.html . x Abra o seu navegador e utilize-o para verificar o resultado do exerccio. e Quando estiver OK, faa as seguintes alteraes, testando uma a uma : r Mude a cor de fundo c Teste outras combinaes no formato RGB 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
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer41.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Insira tags <BR> nesse documento para que seja melhor visualizado. <HTML> <HEAD> <TITLE> Exemplo que mostra quebras de linhas </TITLE> </HEAD> <BODY> 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).
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
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer51.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa alteraes, mudando o alinhamento dos cabealhos esquerda, direita e ao centro. <HTML> <HEAD> <TITLE> Exemplo que mostra os cabecalhos da sees. </TITLE> </HEAD> <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>
E x e r c c i o 5 . 2
Utilize o Notepad para criar um documento em HTML, que d um resultado semelhante ao que temos a seguir, note que ser necessrio misturar o uso de diversas tags. Faa alteraes no atributo TEXT da tag <BODY> para variar a cor do texto.
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
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer61.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa alteraes nos atributos e coloque quebras de linhas onde for necessrio. <HTML> <HEAD> <TITLE> Exemplo que mostra os possveis variaes com fontes. </TITLE> </HEAD> <BODY> <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 . 2
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer62.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa alteraes nos atributos e coloque quebras de linhas onde for necessrio. <HTML> <HEAD> <TITLE> Exemplo que mostra os possveis variaes com fontes. </TITLE> </HEAD> <BASEFONT SIZE=4 COLOR=#00FFFF FACE=arial, helvetica, times> 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>
Pgina
Aprendendo HTML
E x e r c c i o 7 . 1
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer71.html. Faa alteraes nos atributos para desenvolver mais sobre essa tag, experimente combinar os atributos. <HTML> <HEAD> <TITLE> Exemplo que mostra a utilizao de linhas horizontais </TITLE> </HEAD> <BODY> 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>.
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
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer81.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. <HTML> <HEAD> <TITLE> Link para o exerccio 7. </TITLE> </HEAD> <BODY> <H1> Ser que possvel ligar dois documentos ?? </H1> <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
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
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer82.html. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. <HTML> <HEAD> <TITLE> Link para o exerccio 8.1. </TITLE> </HEAD> <BODY> <H1> Vamos ligar esse documento parte inferior do exerccio 8.1 </H1> <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> Pgina 9 <A NAME="Final">Final desse documento.</A> </BODY> </HTML>
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
Digite o documento abaixo utilizando o Notepad e salve-o com o nome de exer91.html. Encontre algumas figuras em seu disco e substitu-a os nomes figura colocados nas tags <IMG> do documento. Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Faa experincias com a combinao de atributos e crie links utilizando as imagens para os exerccios anteriores.. <HTML> <HEAD> <TITLE> Mostrando figuras no documento HTML. </TITLE> </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>.
Pgina
11
Aprendendo HTML
Exemplo
<UL> <LI>Mas <LI>Laranjas </UL>
Resultado
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
<OL> <LI>Apples <LI>Oranges </OL>
Resultado
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
<DL> <DT>HTML <DD>HyperText Markup Language <DT>SGML <DD>Standard Generalized Markup Language </DL>
Resultado
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
E Escreva um documento em HTML que apresente uma pequena tabela conforme x mostrada abaixo : e r +----------------------------------------+ c | Tabela de Preos | +--------------------------+-------------+ c | Maa argentina | R$ 10,00 | i | Laranja Pera | R$ 5,00 | o | Banana Nanica | R$ 2,50 | 1 +--------------------------+-------------+ 1 . 1
Pgina
14