HTML

Aprendendo HTML Programao em HTML - Lio 1 Introduo Linguagem
O que HTML ?
HyperText Markup Language ou Linguagem de Marcao HiperTexto, uma linguagem simples composta de marcaes de formatao e diagramao de hipertexto/hipermdia (informaes em texto, imagens, sons e aes ligadas umas s outras de uma forma complexa e no-sequencial atravs de chaves relacionadas). a linguagem da WWW (World Wide Web), justamente por essa capacidade de formatao e diagramao de hipertexto/hipermdia. 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) disponveis (Netscape, Internet Explorer, Mosaic, etc...). O documento em HTML um arquivo texto comum (ASCII) que pode ser escrito atravs de qualquer editor de textos comum (Edit, E , Norton Editor, Notepad, ...) e tem a terminao .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 padres da linguagem. Atualmente estamos na verso 3.0 do HTML, mas o HTML 2.0 a verso reconhecida por todos os navegadores(Esta apostila est um pouco desatualizada j estamos na verso 4, e hoje a 3 que reconhecida pela maior parte dos navegadores).
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.
Anatomia de um documento HTML

Dentro de um documento HTML temos elementos de marcao denominados TAGS . Uma TAG definida atravs de seu nome cercado pelos sinais de menor (<) e maior (>) e normalmente tem uma TAG correspondente para finalizao, com o mesmo nome e precedido por uma barra (/). Ex.: <BODY> .... corpo do documento ... </BODY> (define o incio e o fim do corpo do documento HTML) Algumas TAGS admitem de atributos (parmetros) que alteram a maneira como o navegador deve interpret-la e normalmente so colocados na TAG inicializadora. Ex.: <BODY BACKGROUND=fundo.gif> .... corpo do documento </BODY> (define que o documento HTML ter como fundo a figura fundo.gif )
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.
Pgina 1
Aprendendo HTML
Programao em HTML - Lio 2 Tags Iniciais

Tags <HTML> ... </HTML> Todo documento HTML fica contido entre as tags <HTML> e </HTML>. Dentro dessas tags temos duas sees : HEAD e BODY que indicam o cabealho do documento e o corpo, respectivamente. Dicas
-
Tags <HEAD> ... </HEAD>

Indicam o cabealho do documento e nelas esto contidas as informaes de configurao da pgina. Entre as tags <HEAD> e </HEAD> temos as seguintes opes : Tag <TITLE> Tag <ISINDEX> Tag <META> Tag <NEXTID>
Dessas tags, a mais normalmente usada a <TITLE>, que vista a seguir.
Tag <TITLE> ... </TITLE>

Essas tags devem ser utilizadas entre as tags de cabealho <HEAD>. Determinam o ttulo que ir ser apresentado na barra de ttulo da janela do navegador. Abaixo temos um exemplo que ilustra a utilizao das tags vistas at agora :
<HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> </HTML>
Exemplo 2.1 Um documento HTML mnimo.
Dicas
-
Pgina 2
Aprendendo HTML
E x e r c c i o 2 . 1 Dicas
-
Digite o Exemplo 2.1 utilizando o Notepad e salve-o com o nome de exer21.html . Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Quando estiver OK, faa as seguintes alteraes, testando uma a uma : - Mude o ttulo do seu documento - Retire as tags <HTML> e </HTML> - Retire a tag </HEAD> -
Pgina 3
Aprendendo HTML Programao em HTML - Lio 3 - Tags Bsicas do Corpo do Documento

Tags <BODY> ... </BODY>
Todo o contedo do documento HTML deve estar entre as tags <BODY> e </BODY> . Na verso 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 pgina, texto, links no visitados, link ativos e links visitados respectivamente e BACKGROUND, que define uma imagem de fundo para a pgina. Se no forem especificadas nem BGCOLOR e nem BACKGROUND, a cor de fundo da pgina ser a padro do navegador.
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 x e r c c i o 3 . 1
Digite o Exemplo 3.1 utilizando o Notepad e salve-o com o nome de exer31.html . Abra o seu navegador e utilize-o para verificar o resultado do exerccio. Quando estiver OK, faa as seguintes alteraes, testando uma a uma : - Mude a cor de fundo - Teste outras combinaes no formato RGB - Encontre um arquivo dos tipos GIF ou JPEG e coloque como fundo do seu documento -
Pgina 4
Aprendendo HTML Programao em HTML - Lio 4 Texto do Documento

O texto que compe o documento HTML deve estar contido entre as tags <BODY> e </BODY> e isso pode ser facilmente testado. Existem ento algumas tags modificadoras para formatar esse texto, como a seguir.
Tag 
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 .
E x e r c c i o
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 nesse documento para que seja melhor visualizado. <HTML> <HEAD> <TITLE> Exemplo que mostra quebras de linhas </TITLE> </HEAD>
4 . <BODY> 1 O HTML precisa de tags especiais de quebra de linha . Os ENTERs colocados no texto no geram quebras de linhas . </BODY> Tags ... 
Essas tags criam pargrafos no texto do corpo do documento, gerando uma quebra de linha maior que a da tag . Admitem tambm atributo de alinhamento ALIGN=left ( esquerda), ALIGN=right ( direita) e ALIGN=center (ao centro).
Tags ... 

Coloca em negrito o texto envolvido.
Tags ... 

Coloca em itlico o texto envolvido.
Tags ... 

Sublinha o texto envolvido.
Tags ... e ... 

O texto envolvido fica Subscrito e Sobrescrito , respectivamente.
Dicas
-
Pgina 5
Aprendendo HTML
E x e r c c i o 4 . 2 Altere o exerccio anterior trocando as tags por e observe a diferena. Aumente o texto e deixe algumas linhas com 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 6
Aprendendo HTML Programao em HTML - Lio 5 - Tags de Ttulos e Sub-Ttulos

Tags <Hn> ... </Hn>
Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6), que podem ser de seis formas com tamanhos, identao e posicionamento diferentes. Juntamente podemos utilizar as opes de alinhamento ALIGN=left ( esquerda), ALIGN=right ( direita) e ALIGN=center (ao centro).
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
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> 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>
E x e r c c i o
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.
CRTSE - Centro Regional de Tecnologia Santa Escolstica

Curso de HTML
No curso tcnico de 5 Processamento de Dados do CRTSE, . os alunos desenvolvem a linguagem HTML*, 2 HyperText Markup Language
*
HTML a linguagem utilizada nas pginas da Internet
Pgina 7
Aprendendo HTML
Programao em HTML - Lio 6 - Tags de Formatao de Fontes

Tags ... 
As tags ... fazem a formatao de fonte no texto que envolvem no documento HTML. Juntamente a essas tags utilizam-se os atributos SIZE, FACE e COLOR para definir tamanho, tipo do fonte e cor, respectivamente.
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.
E x e r c c i o
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>
6 . <BODY> 1 Arial, tam. 1 Helvetica, tam. 3 Fonte de tamanho 5 Times o padro </BODY>
Tag <BASEFONT>
Tem a finalidade de definir um padro para a fonte que ser utilizada no documento todo. Ainda assim possvel utilizar as tags ... para alterar esse padro.
Pgina 8
Aprendendo HTML
E x e r c c i o 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>
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>
Pgina 9
Aprendendo HTML Programao em HTML - Lio 7 Linhas Horizontais

Tag <HR>
Desenha uma linha horizontal no documento. Pode ser modificada pelos seguinte atributos : SIZE : Define a espessura, em pixels, da linha. WIDTH : Define a largura da linha, o que pode ser feito em pixels (nmero absoluto) ou em percentual da tela (com o smbolo de %) ALIGN : Alinhamento, como o que tem sido usado, pode ser LEFT , RIGHT e CENTER ou seja, esquerda, direita e ao centro, respectivamente. NOSHADE : Linha sem sombra. O padro a linha sombreada, utilizando esse atributo temos uma linha sem sombra.
E x e r c c i o
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>
7 . <BODY> 1 Linha comum <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>
Dicas
A tag <HR> no precisa de terminador </HR>
Pgina 10
Aprendendo HTML Programao em HTML - Lio 8 Links

Uma das coisas mais interessantes em um documento HTML a ligao entre os documentos (links).
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
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>
8 <BODY> . <H1> Ser que possvel ligar dois documentos ?? </H1> 1 <A HREF="exer71.html"> Clique aqui para ir ao exerccio 7 </A> <A NAME="Final">Essa parte est no final do documento.</A> </BODY>
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!
Pgina 11
Aprendendo HTML
E x e r c c i o 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>
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> <A HREF="#Final"> Clique aqui para ir ao final desse exerccio </A> <A NAME="Final">Final desse documento.</A> </BODY> </HTML>
E x e r c c i o 8 . 3
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.
Pgina 12
Aprendendo HTML Programao em HTML - Lio 9 - Imagens

Tag <IMG>
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 so : - 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). - ALIGN : Alinhamento do texto em relao imagem. - HEIGHT : Altura da figura em pixels (se no utilizada, a figura ser mostrada em sua altura original). - WIDTH : Largura, semelhante a HEIGHT.
Dicas
-
E x e r c c i o
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> 9 Mostrando figuras no documento HTML. . </TITLE> 1 </HEAD> <BODY> <IMG SRC="figura1.gif"> Veja uma figura no documento... <IMG SRC="figura2.gif" ALIGN="top"> Essa figura tem o texto alinhado acima <IMG SRC="figura3.gif" ALT="Texto alternativo"> Passe o mouse sobre a figura <IMG SRC="figura4.gif" HEIGHT="100"> Essa figura esta com a altura modificada </BODY>
Dicas
-
Pgina 13
Aprendendo HTML Programao em HTML - Lio 10 - Listas

HTML suporta cinco tipos de listas. UL - Listas no ordenadas OL - Listas ordenadas DL - Listas de definies (ou listas glossrio) DIR - Listas diretrio (obsoleta HTML 3.0) MENU - Listas diretrio (obsoleta HTML 3.0) Para ns no momento, interessa apenas as trs primeiras.
Tags <UL> ... </UL> Tags <LI> ... </LI>

Uma LISTA no ordenada primeiro marcada com tag de incio e fim <UL>, ento 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
<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.
Tags <OL> ... </OL> Tags <LI> ... </LI>

Uma LISTA ordenada primeiro marcada com tag de incio e fim <OL>, ento cada item da lista indicado com uma tag <LI>. Uma lista de itens em uma ordem particular. Estas so normalmente numeradas quando mostradas.
Exemplo
<OL> <LI>Apples <LI>Oranges </OL>
Resultado
1. Apples 2. 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
Pgina 14
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
Pgina 15
Aprendendo HTML Programao em HTML - Lio 11 Texto Pr-formatado

Tags <PRE> ... </PRE>
Delimita um texto a ser exibido com fonte de largura fixa, da maneira como foi previamente formatado. Com a utilizao desse elemento, todos os espaos e saltos de linha so considerados de acordo com o que inserido no documento.
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
Programao em HTML - Lio 12 GIFs Animados

Os GIFs animados, imagens que se alteram com o tempo nas pginas HTML no so um recurso especfico da linguagem. Na verdade, essas figuras so montadas a partir de uma seqncia de imagens (GIFs) estticas, que, colocados em ordem e com um tempo entre as mudanas causam a impresso de animao. Isso pode ser feito facilmente com ferramentas especficas para essa finalidade. Muitas podem ser encontradas na prpria Internet, mas uma ferramenta bastante utilizada e conhecida o GIF Construction Set, que possui inclusive um assistente (Wizard) de criao de GIFs animados.
Pgina 16

HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Aprendendo HTML Programao em HTML - Lio 1 Introduo Linguagem

Anatomia de um documento HTML

Programao em HTML - Lio 2 Tags Iniciais

Tags <HEAD> ... </HEAD>

Dessas tags, a mais normalmente usada a <TITLE>, que vista a seguir.

Tag <TITLE> ... </TITLE>

<HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> </HTML>

Exemplo 2.1 Um documento HTML mnimo.

Aprendendo HTML Programao em HTML - Lio 3 - Tags Bsicas do Corpo do Documento

Exemplo 3.1 Um documento HTML com mudana da cor de fundo.

Aprendendo HTML Programao em HTML - Lio 4 Texto do Documento

Tags <B> ... </B>

Tags <I> ... </I>

Tags <U> ... </U>

Tags <SUB> ... </SUB> e <SUP> ... </SUP>

Aprendendo HTML Programao em HTML - Lio 5 - Tags de Ttulos e Sub-Ttulos

CRTSE - Centro Regional de Tecnologia Santa Escolstica

HTML a linguagem utilizada nas pginas da Internet

Programao em HTML - Lio 6 - Tags de Formatao de Fontes

Aprendendo HTML Programao em HTML - Lio 7 Linhas Horizontais

Aprendendo HTML Programao em HTML - Lio 8 Links

Aprendendo HTML Programao em HTML - Lio 9 - Imagens

Aprendendo HTML Programao em HTML - Lio 10 - Listas

Tags <UL> ... </UL> Tags <LI> ... </LI>

Tags <OL> ... </OL> Tags <LI> ... </LI>

Aprendendo HTML Programao em HTML - Lio 11 Texto Pr-formatado

Programao em HTML - Lio 12 GIFs Animados

Você também pode gostar