WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 1

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.

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. 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.

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 normalmente tem uma TAG correspondente para finalizao, com o mesmo nome e precedido por uma barra (/).

Ex.: .... corpo do documento ... (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.: .... corpo do documento (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.

O HTML no faz diferena entre letras maisculas e minsculas. Mantenha um padro em sua programao apenas para seu controle ( importante!).

Programao em HTML - Lio 2 Tags Iniciais

Tags ...

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

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 2

Dicas Alguns navegadores no exigem a presena das tags e mas por motivo de

compatibilidade, comee seu documento HTML sempre utilizando essas tags .

Tags ...

Indicam o cabealho do documento e nelas esto contidas as informaes de configurao da pgina. Entre as tags e temos as seguintes opes :

Tag Tag Tag Tag

Dessas tags, a mais normalmente usada a , que vista a seguir.

Tag ...

Essas tags devem ser utilizadas entre as tags de cabealho . 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 :

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).

Exerccio

2.

1

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 e Retire a tag Retire as tags

Dicas Crie sempre um diretrio especial para seu projeto em HTML. Isso ir ajud-lo a encontrar seus

arquivos posteriormente.

Meu primeiro documento HTML

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 3

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

Tags ...

Todo o contedo do documento HTML deve estar entre as tags e . Na verso 3.0 do HTML a tag 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)

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

Exerccio

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 Retire a tag

Esse documento tem o fundo amarelo !!

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 4

Programao em HTML - Lio 4 Texto do Documento

O texto que compe o documento HTML deve estar contido entre as tags e 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 .

Exerccio

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 nesse documento para que seja melhor visualizado.

Exemplo que mostra quebras de linhas

O HTML precisa de tags especiais de quebra de linha . Os ENTERs colocados no texto no geram quebras de linhas .

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.

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 5

Exerccio

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)

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 6

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

Tags ...

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.

Exerccio

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.

Exemplo que mostra os cabecalhos da sees.

Cabealho principal Este texto est sobre a seo principal Cabealho nvel 2 Cabealho nvel 3 Cabealho nvel 4 Cabealho nvel 5 Cabealho nvel 6 Este texto est sobre a seo cabealho nvel 6

Exerccio

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 para variar a cor do texto.

CRTSE - Centro Regional de Tecnologia Santa Escolstica

Curso de HTML

No curso tcnico de Processamento de Dados do CRTSE, os alunos desenvolvem a linguagem HTML*, HyperText Markup Language

* HTML a linguagem utilizada nas pginas da Internet

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

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 7

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. 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.

Exerccio

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.

Exemplo que mostra os possveis variaes com fontes.

Arial, tam. 1 Helvetica, tam. 3 Fonte de tamanho 5 Times o padro

Tag

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.

Exerccio

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.

Exemplo que mostra os possveis variaes com fontes.

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.

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 8

Programao em HTML - Lio 7 Linhas Horizontais

Tag

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.

Exerccio

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.

Exemplo que mostra a utilizao de linhas horizontais

Linha comum Linha com a espessura modificada Linha com largura especificada em percentual Linha com largura absoluta e sem sombra

Dicas A tag no precisa de terminador .

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 9

Programao em HTML - Lio 8 Links

Uma das coisas mais interessantes em um documento HTML a ligao entre os documentos (links).

Tags ...

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 e ser apresentado como link no documento (sublinhado e em cor destacada). Abaixo alguns dos atributos mais comuns que podem ser utilizados com a tag : 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.

Exerccio

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.

Link para o exerccio 7.

Ser que possvel ligar dois documentos ?? Clique aqui para ir ao exerccio 7 Essa parte est no final do documento.

Dicas Coloque textos curtos e significativos para seus links. Na tag 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

Aprendendo HTML

WWW.LIGG3.COM.BR 10

Exerccio

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.

Link para o exerccio 8.1.

Vamos ligar esse documento parte inferior do exerccio 8.1 Clique aqui para ir ao final do exerccio 8.1 Clique aqui para ir ao final desse exerccio Final desse documento.

Exerccio

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 e ser considerado parte do link.

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 11

Programao em HTML - Lio 9 - Imagens

Tag

Insere uma imagem dentro de um documento HTML. As imagens, assim como em , 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 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 Existem ainda os atributos HSPACE, VSPACE, BORDER, ISMAP, USEMAP e UNITS disponveis para

a tag .

Exerccio

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 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..

Mostrando figuras no documento HTML.

Veja uma figura no documento... Essa figura tem o texto alinhado acima Passe o mouse sobre a figura Essa figura esta com a altura modificada

Dicas possvel colocar imagens como links. Basta inclu-la entre as tags e .

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 12

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 ... Tags ...

Uma LISTA no ordenada primeiro marcada com tag de incio e fim , ento cada item da lista indicado com uma tag .

A lista dos itens, a qual pode aparecer em uma ordem particular usualmente mostrada como uma lista de bullets.

Exemplo Resultado Mas Laranjas

Apples Oranges

Dicas possvel escolher o tipo dos bullets que sero apresentados atravs do atributo ,

onde X pode ser SQUARE, CIRCLE e DISC. Isso funciona apenas com o NETSCAPE. Os itens da lista tem tags de fim , 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

Tags ... Tags ...

Uma LISTA ordenada primeiro marcada com tag de incio e fim , ento cada item da lista indicado com uma tag .

Uma lista de itens em uma ordem particular. Estas so normalmente numeradas quando mostradas.

Exemplo Resultado Apples Oranges

1 Apples 2 Oranges

Dicas Junto com a tag 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

Aprendendo HTML

WWW.LIGG3.COM.BR 13

Tags ... Tag Tag

Uma lista definio uma lista de termos e suas definies . Cada definio usualmente mostrada identada em relao ao termo correspondente.

Exemplo Resultado HTML HyperText Markup Language SGML Standard Generalized Markup Language

HTML HyperText Markup Language SGML Standard Generalized Markup Language

Exerccio

10.

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

WWW.LIGG3.COM.BR

Aprendendo HTML

WWW.LIGG3.COM.BR 14

Programao em HTML - Lio 11 Texto Pr-formatado

Tags ...

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.

Exerccio

11.

1

Escreva um documento em HTML que apresente uma pequena tabela conforme mostrada abaixo :

+----------------------------------------+

| Tabela de Preos | +--------------------------+-------------+

| Maa argentina | R$ 10,00 | | Laranja Pera | R$ 5,00 | | Banana Nanica | R$ 2,50 | +--------------------------+-------------+

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.