HTML Avanado

Sobre
Essa apostila foi criada e desenvolvida por Alexandre Zannella Gorian (e-mail: azg@terra.com.br), utilizando como referncias bibliogrficas o livro HTML Avanado do autor Ramalho (editora Makron Books), a matria Cascading Style Sheets do autor Paulo Cndido (publicada no site do provedor Terra, no canal Estiloweb, pelo endereo www.terra.com.br/estiloweb/webdesign/ccs0.htm), a apostila Manual JavaScript do autor Lus Carlos de Andrade Rodrigues (e-mail: dricci@uninet.com.br) e no guia de referncia a Java Scripts da Netscape (www.netscape.com). Apostila criada para aula de HTML Avanado, introduo CSS e Java Script, de livre distribuio, reservando ao autor os direitos autorais.

Dedicatria
Os agradecimentos so direcionados para Eric Loque Xavier, para os webdesigners Jovani Aguiar Lage e Rodrigo Maral da Silva e Silva pela fora nas matrias, para minha namorada Giselle Shunck Vieira e meus pais, pela compreenso dos esforos desprendidos e para todos que acreditam que a Internet um meio onde a transferncia de informaes deva ser de forma gratuita.

A quem serve esta apostila

Esta apostila foi desenvolvida para pessoas leigas em codificao HTML, CSS e Java Script, tendo um linguajar simples e de fcil compreenso no incio, e aumentando o grau tcnico no decorrer dos captulos, uma vez que os tpicos compreendidos nos primeiros captulos no so repetidos ou explicados com tantos detalhes nos captulos seguintes. Pessoas com algum conhecimento de HTML, CSS e Java Script e/ou de ferramentas de desenvolvimento de pginas HTML podem usar esta apostila como um guia de referncia de objetos, tags, atributos, eventos, e outras caractersticas presentes nessas linguagens.

Estruturao
Esta apostila est dividida basicamente em trs partes e em trs apndices. A primeira parte reservada para o ensinamento do HTML avanado, como todas suas tags, os atributos mais usados e outros detalhes que so teis para construo de sites. A segunda parte dedicada folhas de estilo. Foi abordada a verso 1 desse recurso, por ser a mais utilizada. A terceira parte uma introduo linguagem Java Script, tendo em seu contedo instrues bsicas para entendimento dessa linguagem.

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado

Primeira Parte

HTML Tudo comea aqui

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado

1. Introduo
1.1. Breve histrico
A Internet surgiu em 1969, na Arpanet (advanced research projects agency). A idia inicial era criar uma rede de pacotes para conectar centros de pesquisas e processamentos geograficamente distantes. Pela sua arquitetura, os dados poderiam chegar a seu destino por vrios caminhos ou ns da rede. Dessa forma seria possvel os computadores do exrcito se comunicarem com os da universidade, por exemplo. Em 1970 foram implementados os switches de pacote, foi padronizado o TCP/IP e logo a seguir foram implementados os roteadores nos ns da rede. Com o surgimento do correio eletrnico e da WWW na dcada de 80, a Internet se populariza, tornando o acesso disponvel tanto para grandes corporaes quanto para usurios residenciais. O acesso Internet feito principalmente atravs de modems (o que a torna extremamente lenta) e de canais dedicados. Novas tecnologias (como o radio e TV cabo) comeam a aparecer, embora com preos ainda elevados. Com o desenvolvimento de novas tecnologias de programao Web, d-se incio uma nova febre: o e-commerce. Movimentando na base de bilhes de dlares por ano, as empresas chamadas de .COM conseguiram um rpido e lucrativo crescimento de vendas, uma vez que pessoas do mundo todo podem ter acesso a elas sem custo adicional. Devido ao sucesso da Internet e seu baixo custo, surgiram dois novos termos no mercado: a Intranet e a Extranet. A Intranet se caracteriza por um servidor Web e vrias estaes de trabalho, dentro de uma empresa. Com funcionamento parecido com a Internet comum, cada mquina cliente acessa o servidor em busca de dados, o servidor envia o cdigo mquina correspondente e esta o processa. A diferena para a Extranet que esta pode ser acessada tambm fora da rede da empresa, ou quando se tem duas Intranets se comunicando. como se fosse uma Internet limitada quem pode ter acesso, e sendo disponvel apenas as pginas da empresa.

1.2. Funcionamento
O funcionamento se divide basicamente em dois tipos de programas: o cliente e o servidor. O cliente quem interpreta as pginas. O servidor, por sua vez, fica S encarregado de hosped-la e, com as novas tecnologias (como o Cold Fusion e o ASP), do processamento da informao solicitada pelo cliente, entregando para esse o cdigo HTML pronto.

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado

Figura 1.1 Relacionamento cliente-servidor Web

A informao na Web gravada no formato de pginas, que podem conter textos, hipertextos, sons, imagens, vdeos e at programas. O cdigo dessa pgina chamado de HTML, o que, erroneamente chamado por alguns de linguagem de programao. Na verdade ela uma linguagem de marcao, ou em outras palavras, uma linguagem a nvel de interface. A linguagem de programao utilizada pode se dar atravs de Scripts (JavaScript, VBScript), de applets (Java), de ActiveX, ou outros tipos recentes de programao para Web. A transferncia de dados entre o servidor e o cliente se d atravs do protocolo TCP/IP. O tipo de transferncia feito principalmente atravs do protocolo HTTP embora seja muito utilizado tambm o FTP e, em menos escala, o Gopher, o telnet, o Wais, dentre outros.

1.2.1.

Navegador

Navegador o programa que recebe o cdigo do servidor e o transforma em algo interpretvel pelo usurio. Geralmente gratuitos, existem em vrias tipos, dentre eles: Microsoft Internet Explorer: navegador que vem sendo muito utilizado, principalmente por j vir instalado no Windows 98 e no 2000. Tem como principal caracterstica uma interface amigvel e de fcil utilizao. Outra caracterstica a interpretao de estilos, o que permite se fazer um site mais elaborado sem precisar colocar muitas figuras, alm da interpretao de VBScripts. Como ponto fraco destaca-se a baixa segurana (principalmente na parte de e-mail). Programa gratuito. Netscape: presente na forma de Communicator e Navigator (este trs apenas o navegador), muito utilizado no exterior. Apresenta uma interface de fcil utilizao e um programa de e-mail tambm muito bom. Ponto forte no desenvolvimento de JavaScripts, e no gerenciamento de perfis de usurios. Deixa um pouco a desejar no desenvolvimento de estilos e na linguagem VBScript. Outra caracterstica que ele l a tabela completa para depois mostr-la na tela, o que acarreta um carregamento mais rpido que o Internet Explorer. NCSA Mosaic: navegador que foi base para os demais navegadores. No foi atualizado depois da verso 3.0, uma pena.

Existem outros tipos de navegadores, como o Opera, que geralmente so programas que devem ser pagos para a utilizao autorizada.

1.2.2.

URL (Uniform Resource Locator)

o endereo do servidor, o diretrio e o arquivo correspondente pgina ou site. Por exemplo:

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado http://www.terra.com.br/estiloweb/index.htm Onde: http:// o tipo de protocolo utilizado; www indica que um site (ou pgina) da World Wide Web. O uso vem caindo, uma vez que mais fcil a no utilizao desse nome. Por exemplo: http://av.com; terra.com.br o domnio do servidor, por trs dele existe o endereo IP; /estiloweb o diretrio dentro do servidor. Pode ser criado um domnio para esse diretrio, como por exemplo estiloweb.com.br; index.htm o nome da pgina que ser aberta.

Note que no necessrio digitar o http://, pois o navegador o trs automaticamente. No caso do Internet Explorer 5.0, ele detecta se ftp ou http tambm. A maioria dos servidores trs a pgina principal sem a necessidade da digitao da mesma, como por exemplo www.terra.com.br/estiloweb, onde o navegador adiciona o http:// na frente e o servidor j mostra a pgina index.htm automaticamente.

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado

2. Formato de uma pgina

Uma pgina Web no nada mais do que um simples documento texto, com marcaes de tipos de texto, figura, sons, etc. Sendo assim, de qualquer computador com um simples editor de texto pode sair uma pgina das mais belas possveis. Vai depender mais da criatividade e do domnio sobre um programa de edio grfica do que propriamente uma ferramenta de desenvolvimento (mas claro que ajuda, e muito). Uma pgina pode apresentar-se de formas diferentes dependendo do navegador, uma vez que fica a cargo deste complil-la. Por isso, cuidado com a formatao e com os recursos utilizados, normal uma pgina ficar boa no Explorer e um desastre no Netscape ou um recurso utilizado no Netscape no funcionar no Explorer. Exemplo de uma pgina:
<HTML> <HEAD> <TITLE> Minha primeira pgina </TITLE> </HEAD> <BODY> <H1> Titulo 1 </H1> <P>Aqui se localiza um texto <P><H2>Titulo 2 </H2> <P>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Essa &eacute; uma pequena demonstra&ccedil;&atilde;o de uma p&eacute simples. <br> Com certeza voc&ecirc; deve ter notado algo diferente nela... mas n&atilde;o se preocupe, voc&ecirc; saber&aacute; o que significam. Veremos agora:<P> <UL> <LI> o que s&atilde;o tags; <LI> formato b&aacute;sico de uma Home-Page. <LI> T&eacute;cnicas de programa&ccedil;&atilde;o &uacute;teis; </UL> <P><HR> <P align=Center> Abra&ccedil;os </BODY> </HTML>

O resultado apresentado por um navegador seria o seguinte:

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado

Figura 1.2 Pgina apresentada pelo navegador

Procure no utilizar acentuao no seu texto, uma vez que, dependendo da linguagem do navegador do usurio, pode no aparecer aquele caracter desejado, e sim outro interpretvel. Para evitar isso, utilize a tabela de cdigos (veja Apndice A).

2.1. Tags
So marcaes de identificao de algo que existe na pgina. So escritas entre os sinais de menor (<) e maior (>), e o fechamento dessas tags se do atravs da barra (/). Por exemplo, a tag que identifica o ttulo 1 no documento se escreve <H1> e, para identificar onde o ttulo termina colocada a tag </H1>. A tag pode ser escrita com letra maiscula ou minscula, e pode-se colocar tags dentro de campos que por sua vez esto em outra tag. Um exemplo prtico: dentro de uma tabela, coloca-se linhas e colunas, fecha-se as colunas e linhas e depois a tabela. Caso seja digitada uma tag inexistente, o navegador ir ignor-la, sem apresentar ao usurio. Nos prximos captulos sero apresentadas e explicadas as tags existentes.

2.2. Formato bsico de uma pgina HTML

Como dito anteriormente, as pginas da Web so arquivos textos com as marcaes prprias da linguagem, a nica diferena que ao invs de arquivo .TXT, as pginas so normalmente salvas como .HTML ou .HTM. Os novos navegadores permitem que a pgina seja salva com extenses diferentes, mas no recomenda a utilizao que no sejam as duas primeiras.

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado Toda pagina HTML comea com a tag <HTML> e termina com </HTML>, o que far com que o navegador saiba que se trata de um documento HTML e no de outro tipo de arquivo. Logo aps a tag <HTML>, coloca-se a tag <HEAD> (cabealho), onde conter informaes da pgina, como ttulo, descrio, contedo e outros assuntos. Essas informaes no sero apresentadas ao usurio (com exceo do ttulo). Terminado o cabealho, inicia-se o corpo da pgina, que conter o contedo apresentvel da pgina. O corpo aberto com <BODY> e fechado com </BODY>. A estrutura bsica de uma pgina seria:
<HTML> <HEAD> <TITLE>Aqui se insere o ttulo da pgina </TITLE> aqui so colocados estilos, scripts, contedo, etc. </HEAD> <BODY> Aqui se insere o contedo da pgina (textos, tags, etc.). </BODY> </HTML>

2.3. Tcnicas bsicas de programao

Para facilitar a confeco e manuteno de uma pgina, importante seguir algumas normas bsicas, que poderiam chamar at de bom senso, por exemplo: manter cada cdigo em sua linha respectiva. Por exemplo: o que ser exibido em vrias linhas ou clulas, coloque tambm em vrias linhas no cdigo. Assim, quando tiver que localizar algo no cdigo, essa localizao se dar de uma forma mais fcil; coloque as tags em incio ou final de frase, assim fica bem mais fcil de localiz-las; respeite a indentao do texto, ou seja, coloque as tags que tiverem dentro de outra em nveis mais a direita, assim fica mais fcil saber onde comea e onde termina essas tags (ou cdigos); coloque comentrios no texto, assim numa atualizao futura voc saber o que aquilo quer dizer.

Alexandre Zannella Gorian (azg@terra.com.br)

HTML Avanado

3. Pargrafos e Quebras de Linha

Uma pgina HTML nem sempre sai da forma que se digita em seu cdigo, para isso deve-se colocar tags especiais indicando onde comea um novo pargrafo ou uma nova linha.

3.1. Quebra de linha

Para iniciar uma nova linha, dentro de um mesmo pargrafo, usa-se a tag <BR>. Por ser uma tag de inicializao de nova linha, no existe fechamento.

3.2. Pargrafos
Para iniciar um novo pargrafo basta adicionar a tag <P> e digitar o texto. A maioria dos editores HTML colocam o fechamento dessa tag, mas o mesmo no necessrio (exceto quando se quer separar o pargrafo inferior). A diferena para a quebra de linha que um novo pargrafo possui um espaamento diferente. Ex.:
<HTML> <HEAD> <TITLE>Exemplo de Par&aacute;grafos</TITLE> </HEAD> <BODY> Primeiro par&aacute;grafo; <P> segundo par&aacute;grafo;<BR> segunda linha do segundo par&aacute;grafo;</P> <P> terceiro par&aacute;grafo. </BODY> <HTML>

Note que independentemente do nmero de tags <P> utilizadas antes de um novo pargrafo, ser um novo pargrafo apenas o que contiver caracteres. Para evitar-se isso, usa-se espaamento em branco. Ex.:
<HTML> <HEAD> <TITLE>Exemplo de Par&aacute;grafos</TITLE> </HEAD> <BODY> Primeiro par&aacute;grafo; <P><P><P><P> segundo par&aacute;grafo;<BR> segunda linha do segundo par&aacute;grafo;</P> <P>&nbsp;<P>&nbsp; <P> terceiro par&aacute;grafo. </BODY> <HTML>

3.2.1.

Atributos

Atributos de uma tag so propriedades que permitem a modificao de certas caractersticas. Esses atributos so colocados dentro da tag de abertura. Esto listadas abaixo alguns atributos comuns aos navegadores Internet Explorer e Netscape, mas alm dessas podem existir outras menos usadas.
Alexandre Zannella Gorian (azg@terra.com.br)

10

HTML Avanado Align: permite o alinhamento do pargrafo. Pode ser left para alinhamento esquerdo, center para central e right para direito. A partir dos navegadores de verso 4.0 comeou a ser usada tambm a justify, para alinhamento justificado. O padro de alinhamento esquerdo. Id: indica uma identificao para o pargrafo. Esse nome pode ser usado como referncia para futuras modificaes via scripts ou CSS, por exemplo.

<html>

<head> <title>Formata&ccedil;&atilde;o de par&aacute;grafo</title> </head> <body> <p align="center">Centralizado <p align="right">Direito <p align="justify"> Justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado justificado </body> </html>

Resultado:

Alexandre Zannella Gorian (azg@terra.com.br)

11

HTML Avanado

Figura 3.1 Formatao de pargrafos

Alm de atributos existem eventos, como o OnClick, que so aes empregadas geralmente pelo usurio. Esse e outros eventos sero vistos no captulo de JavaScript.

3.3. Linha horizontal

Pode-se separar trecho dentro de uma mesma pgina atravs da tag <HR>.

3.3.1.

Atributos

Apesar de ser de redimensionamento automtico, pode-se usar atributos especiais para uma melhor adequao s necessidades do site. Width: define o comprimento da linha. Pode ser especificado em pixels ou atravs de porcentagem da tela. Size: define a altura. Especificado em pixels; Color: define a cor a ser usada; Align: define o alinhamento. Pode ser center (padro), right ou left.

Ex.:
<HTML> <HEAD> <TITLE>Exemplos de linhas horizontais</TITLE> </HEAD> <BODY> R&eacute;gua normal: <HR> Colorida, alinhamento direito: <HR align=right width=300 color=BLUE> Alexandre Zannella Gorian (azg@terra.com.br) Outra forma: <HR align=left width=50% size=10> </BODY> <HTML>

12

HTML Avanado

Apresentao no browser:

Figura 3.2 Linhas horizontais

3.4. Centralizao
Uma outra forma de centralizao de pargrafos a utilizao da tag <center> com seu devido fechamento. Ela usada na maioria dos casos, por ser mais simples e de fcil localizao.

Alexandre Zannella Gorian (azg@terra.com.br)

13

HTML Avanado

4. Tipos de Fonte
No existiria graa nas pginas se existisse apenas letras pretas de mesmo tamanho e tipo de fonte. Para evitar essa monotonia e melhorar a qualidade visual que existem recursos como cabealhos, tipos de fonte, textos pr formatados, etc.

4.1. Cabealhos
Os cabealhos (ou headings) so linhas com caracteres diferenciados do restante do texto, usados geralmente para separar tpicos, ttulos ou coisas afins, necessitando a especificao de onde termina. A tag utilizada <Hn> onde n um nmero inteiro que varia entre 1 e 6. Apesar dessa abrangncia, so geralmente utilizadas a <H1>, <H2> e poucas vezes <H3>, as demais so to pequenas que caram em desuso. Como atributos, podemos citar mais uma vez o align e o title, com as mesmas caractersticas do pargrafo.

4.2. Estilos de texto

So informaes de como o texto dever ser apresentado (negrito, itlico, etc.). Assim como o cabealho, do tipo liga-desliga, ou seja, deve-se utilizar o fechamento. Principais tipos: Tag <B> <I> <EM> <U> <STRONG> <TT> <BIG> <SMALL> <SUP> <SUB> Funo Negrito Itlico Efeito idntico ao itlico Sublinhado Efeito idntico ao negrito Espaamento regular do texto Aumenta a fonte e aplica negrito Diminui o tamanho da fonte Formata o texto como sobrescrito Formata o texto como subscrito

No recomendado o uso da tag de sublinhado, pois o usurio poder confundir com um link.

4.3. A tag <FONT>

O texto pode receber tambm uma configurao de tipo de fonte ou cor diferente da padro, bastando para isso adicionar a tag <FONT> e seus atributos. exigido o fechamento dessa tag. Como principais atributos podemos citar:
Alexandre Zannella Gorian (azg@terra.com.br)

14

HTML Avanado Color: informa a cor da fonte. Pode ser informada o nome da fonte em ingls ou sua cor no formato RGB hexadecimal; Face: informa o tipo de fonte a ser utilizada. O nome da fonte deve estar escrito igual ao seu nome, para isso, use como auxlio um editor de texto. Podem ser especificadas vrias fontes (ser selecionada por ordem, ou seja, se o cliente no tiver a primeira, o navegador procura a segunda, e assim por diante), desde que separadas por vrgulas, mas lembre-se: se o cliente no tiver nenhuma dessas fontes, ser apresentada a fonte padro do navegador; Size: especifica o tamanho da fonte em pixels (ex.: 12px) ou em relao ao resto do texto (ex.: -1 ou 2 o padro 3); Lang: apesar de pouco utilizada, esse atributo pode ser til quando se quer colocar caracteres de diferentes linguagens num texto (misturar brasileiro br- com japons ja).

4.4. Texto pr-formatado

Um texto pr-formatado apresentado na tela na forma que foi escrito em seu cdigo, sem a necessidade de colocar tags de pargrafos ou quebras de linha. A tag utilizada <PRE>, e obrigatrio o uso do fechamento da tag.
<html> <head> <title>Alterao de Fontes</title> </head> <body> <H1 align="center">Exemplo pr&aacute;tico de utiliza&ccedil;&atilde;o de fonte</H1> <p align="justify"><font size="26" color="red" face="Comic Sans MS, Arial, Times New Roman">A</font>gora iremos mostrar praticamente tudo o que vimos at&eacute; agora, como a utiliza&ccedil;&atilde;o de fontes, cabe&ccedil;alhos, par&aacute;grafos, etc.<BR> Ap&oacute;s tudo isso, ainda h&aacute; muita coisa a ser vista, principalmente porque esse &eacute; um mercado crescente de atualiza&ccedil;&atilde;o. <H2>Agora veremos o campo de pr&eacute;-formata&ccedil;&atilde;o</H2> <pre> Aqui voc deve tomar muito cuidado, principalmente com espaamentos e enters, para no ficar uma coisa muito separada da outra.</pre> Se ficar alguma <b>dvida</b> ou <i>questionamento</i>, entrem em <b><i><u>contato</b></i></u>. </body> </html>

A apresentao desse documento se daria dessa maneira:

Alexandre Zannella Gorian (azg@terra.com.br)

15

HTML Avanado

Figura 4.1 Formatao de fonte

Alexandre Zannella Gorian (azg@terra.com.br)

16

HTML Avanado

5. Listas de Marcadores
A criao de listas pode ser til para organizar o texto em tpicos, para enumerar itens, fazer um sumrio ou outras atividades onde h a necessidade de se estruturar o texto. De fcil visualizao ao internauta, pode ser usada para, por exemplo, demarcar textos que levam outras sees no documento ou outras pginas. Esse tipo de tag, apresenta uma estrutura bsica, onde se inicia a lista com uma tag me, coloca-se os itens atravs de tags <LI> e, finalmente, fecha-se a tag me. possvel tambm criar listas dentro de outras listas. Basicamente existem dois tipos de listas: as ordenadas e as no ordenadas.

5.1. Listas no ordenadas

Lista no ordenadas so aquelas em que os marcadores so simplesmente smbolos, ou seja, o marcador no numerado. A tag de abertura desse tipo de lista <UL> (unordered list). Ex.:
<HTML> <HEAD> <TITLE>Exemplo de listas n&atilde;o ordenadas</TITLE> </HEAD> <BODY> <Font size="+2"><b>Exemplo de listas n&atilde;o ordenadas</b></font> <p><font size="+1">Lista simples:</font> <ul> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <li>t&oacute;pico 3; </ul> <p><font size="+1">Lista aninhada:</font> <ul> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <ul> <li>t&oacute;pico 2.1; <li>t&oacute;pico 2.2; </ul> <li>t&oacute;pico 3; </ul> </body> </html>

A apresentao no browser se daria da seguinte forma:

Alexandre Zannella Gorian (azg@terra.com.br)

17

HTML Avanado

Figura 5.1 Listas no ordenadas

5.2. Listas ordenadas

Lista ordenadas so aquelas que apresentam numerao como marcadores. A nica diferena para a lista no ordenada que o marcador <OL> (ordered list). Ex.:

Alexandre Zannella Gorian (azg@terra.com.br)

18

HTML Avanado

<HTML> <HEAD> <TITLE>Exemplo de listas ordenadas</TITLE> </HEAD> <BODY> <Font size="+2"><b>Exemplo de listas ordenadas</b></font> <p><font size="+1">Lista simples:</font> <ol> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <li>t&oacute;pico 3; </ol> <p><font size="+1">Lista aninhada:</font> <ol> <li>t&oacute;pico 1; <li>t&oacute;pico 2; <ol> <li>t&oacute;pico 2.1; <li>t&oacute;pico 2.2; </ol> <li>t&oacute;pico 3; </ol> </body> </html>

Apresentao no browser:

Figura 5.2 listas ordenadas

Alexandre Zannella Gorian (azg@terra.com.br)

19

HTML Avanado

5.3. Atributos
Como principais atributos das listas, podemos citar: Type: especifica o tipo de marcador a ser usado. Pode ser disc (disco), circle (crculo) e square (quadrado) na lista no ordenada. No caso da lista ordenada, os numerais podem ser configurados da seguinte forma: 1 para nmeros comuns (padro, no precisa ser especificado), A para ordem alfabtica maiscula, a para ordem alfabtica minscula, I para algarismos romanos maisculos e i para algarismos romanos minsculos; Start: vlido apenas para listas ordenadas, especifica o padro inicial de contagem. Type: permite que se mude o tipo de marcador em qualquer ponto da lista. Note que todos os marcadores seguintes seguiro essa modificao. Os tipos que podem ser alterados dependem do tipo de lista; Value: vlido somente no caso de listas ordenadas, permite que se salte de um valor para outro (ex.: de 5 para 10 e depois para 7 e assim por diante). Note que os valores seguintes sero continuao dessa alterao.

No caso dos marcadores (<li>), os principais atributos seriam:

Alexandre Zannella Gorian (azg@terra.com.br)

20

HTML Avanado

6. Links
Links so canais de ligao entre duas coisas. No caso de uma pgina http, links servem de ligao outras pginas, arquivos ou ainda outros trechos dentro da mesma pgina. Essa capacidade do HTML facilita a vida do desenvolvedor no ponto em que pode-se dividir um documento muito extenso em outros menores, facilitando assim a leitura e agilizando o carregamento da pgina. Outro ponto interessante dessa propriedade permitir o acesso arquivos. Assim sendo, pode-se descrever o contedo ou ao do arquivo e disponibiliz-lo ao internauta, sem a necessidade de criar um FTP e solicitar que ele tenha que acessar outro endereo para obteno do arquivo. Porm, a propriedade mais interessante a de poder ligar vrias pginas de vrios sites em vrias partes diferentes do mundo, criando-se assim uma teia, onde corre todo tipo de informao, formando-se assim a World Wide Web (teia de alcance mundial). Uma caracterstica importante desse recurso que a tag <a> no tem fundamento nenhum se escrita em sua forma simples, pois no executar nenhuma funo. Para que se obtenha o desejado, necessrio usar alguns atributos, que iro torn-la to eficaz quanto o desejado. Devido haverem muitos atributos e serem um pouco complexo na aprendizagem, o contedo ser separado em tpicos.

6.1. Abertura de outras pginas

Para abertura de outras pginas, necessria a insero do atributo HREF=nome_da_pgina.html dentro da tag <a>. Por exemplo: vamos supor que voc gostaria de abrir uma pgina que se chama tutoriais.html; bastaria digitar o comando <a href=tutoriais.html> e o nome que se deseja que aparea como link. Vamos supor que seja a frase Tutoriais? Clique aqui!. O cdigo ficaria assim:
<HTML> <HEAD> <TITLE>Primeiro exemplo de linkagem</TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href=tutoriais.html>Tutoriais? Clique Aqui!</a> </BODY> </HTML>

Fcil no? Ao usurio clicar no link apresentado no navegador, a pgina tutoriais.html ser apresentada automaticamente, sem a necessidade de mais nada alm de um simples clique do mouse. Agora imagine um megasite, com cem ou mais pginas, cada pgina com umas 5 figuras, e tudo isso junto no mesmo diretrio... bagunado, no acha? Para se evitar esse problema, pode-se dividir o site em diretrios, organizando assim o seu contedo, facilitando a correo de erros e a manuteno do site. E como se faz para linkar arquivos em diretrios diferentes?
Alexandre Zannella Gorian (azg@terra.com.br)

21

HTML Avanado A linkagem de pginas em diferentes diretrios se faz especificando o diretrio que ele se encontra no servidor. Essa especificao pode ser feita de duas maneiras: Especificao do endereo completo. No campo href digita-se a URL completa da pgina do site, como por exemplo http://www.site.com.br/tutorias/tutoriais.html; Especificao do diretrio da pgina. Dessa forma, basta digitar no campo href o diretrio onde se encontra a pgina, uma barra comum e o arquivo correspondente. Ex.: tutoriais/tutoriais.html.

A forma utilizada pela maioria dos webdesigners para acesso outros diretrios atravs da especificao do diretrio, por ser mais prtico e direto. Note que o endereamento feito com barras comuns (/) e no com barras invertidas (\). Ex.:
<HTML> <HEAD> <TITLE>Exemplo de linkagem 1</TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href=tutoriais/tutoriais.html>Tutoriais? Clique Aqui!</a> <br><a href=tutoriais/html/html.html>Tutorial de HTML</a> <br><a href=tutoriais/asp/asp.html>Tutorial de ASP</a> </BODY> </HTML>

Caso o arquivo estiver em diretrios acima do atual, deve-se adicionar ../ at chegar ao diretrio desejado, e a digitar o arquivo desejado. Ex.:
<HTML> <HEAD> <TITLE>Tutorial de HTML</TITLE> </HEAD> <BODY> <h2> Tutorial de HTML</h2> <p> <a href=../tutoriais.html>Tutoriais? Clique Aqui!</a> <br><a href=../asp/asp.html>Tutorial de ASP</a> <br><a href=../../index.html>P&aacute;gina principal</a>

</BODY> </HTML>

6.2. Linkando arquivos

A linkagem de arquivos se procede da mesma maneira que a linkagem de pginas, s que dessa vez o arquivo de destino no interpretado pelo navegador. Muito cuidado sobre o tipo de arquivo a ser linkado, pois o navegador pode abrir (como arquivos do tipo texto, outros arquivos HTML, etc.) e o resultado no ser o desejado. Para evitar esse tipo de problema, coloque aviso na pgina do tipo clique com o boto direito do mouse e selecione salvar como ou ento compacte-os no mesmo arquivo.
Alexandre Zannella Gorian (azg@terra.com.br)

22

HTML Avanado A compactao pode ser til no s para reduo de arquivos grandes, mas tambm para a juno de vrios arquivos em um s. Os arquivos colocados para download podem estar no mesmo servidor ou em servidores diferentes, sendo a sintaxe semelhante da linkagem de pginas HTML. Ex.:
<HTML> <HEAD> <TITLE>Exemplo de linkagem de arquivos </TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <p> <a href=html.zip>Tutorial de HTML.</a> <br><a href=http://www.outrosite.com.br/apostilas/html.pdf>Tutorial de HTML de outro site.</a> <br><a href=../../index.html>P&aacute;gina principal</a> </BODY> </HTML>

6.3. Criao de ncoras

ncoras so pontos de apoio dentro de uma pgina HTML para servir de referncia sobre algum assunto dentro de alguma pgina. Supondo que numa pgina que 4 vezes maior do que a tela, que um assunto desejado (por exemplo Teste) se encontra na sua metade. Ao invs de fazer com que o usurio saia procurando o assunto pela pgina, pode-se criar uma ncora para o acesso direto. Nesse caso, o cdigo ficaria algo assim:
<HTML> <HEAD> <TITLE>Exemplo de ncoras</TITLE> </HEAD> <BODY> <h2> Guia de tutoriais online</h2> <P>Aqui se localiza o texto normalmente, com seus par&aacute;grafos, itens, links, etc. <P><A href="#teste">link</a> que aponta para teste. <P>Aqui cont&eacute;m mais textos</P> <P><a name="teste">Teste</a> <p>Finalizando a p&aacute;gina. <br><A href="../../index.html">P&aacute;gina principal</a> </P> </BODY> </HTML>

Caso quisesse fazer uma ligao da pgina inicial at essa ncora, ou de um outro site at essa ncora, s colocar o endereo do arquivo e depois a ncora. Ex.:

Alexandre Zannella Gorian (azg@terra.com.br)

23

HTML Avanado

<HTML> <HEAD> <TITLE>Segundo Exemplo de ncoras</TITLE> </HEAD> <BODY> <h2> Guia de Refer&ecirc;ncias on-Line</h2> <P>Veja esse site sobre <A href="www.meuservidor.com.br/tutoriais/html/html.html#teste">HTML </a>. </BODY> </HTML>

6.4. Outras ligaes

Para se fazer ligaes em ttulos, rodaps, enfim, em qualquer objeto presente na pgina, basta coloc-lo entre as tags de abertura e fechamento do link. Essa tag aceita outras tags em seu interior, como negrito, itlico, ttulos, pargrafos, formatao de fontes, enfim, pode-se linkar praticamente tudo! Outra linkagem muito interessante a de e-mail. Basta colocar no campo href o valor mailto:fulano@procedor.com e, quando o cliente clicar no endereo, ser aberta uma nova mensagem no programa de e-mail dele com o campo para preenchido com o e-mail especificado.

Alexandre Zannella Gorian (azg@terra.com.br)

24

HTML Avanado

7. Figuras
A incluso de figuras nas pginas HTML trouxe uma revoluo em seu contedo, permitindo a disseminao de contedos cada vez mais atrativos pela Web. Contudo, com a insero de arquivos demasiadamente grandes de imagens, houve um congestionamento maior no meio, alm de uma demora maior no carregamento da pgina. Com a evoluo da tecnologia de acesso e tambm no tratamento de imagens, esse problema foi muito diminudo, levando o tempo de carregamento de figuras de uma pgina a se tornar algo suportvel, embora somente quem tem uma conexo de alta velocidade pode desfrutar do carregamento quase instantneo de figuras. Apesar de tudo isso, ainda importante o cuidado na confeco de imagens, deve-se lembrar que, cada 1kb economizado em cada figura, pode influenciar no tempo final de carregamento de um site. Por exemplo: supondo que possa-se economizar 2Kb em uma figura e 1Kb em mais 4 figuras, ao final de carregamento, esses 6Kb significam 2 ou mais segundos. Outras dicas dizem respeito imagens grandes ou de excelente qualidade, onde acaba gerando arquivos grandes. Caso tenha que colocar uma imagem grande, ou de boa qualidade, coloque um preview antes, assim o usurio poder escolher qual imagem poder ser aberta.

7.1. Formatos de figuras 7.1.1. GIF

Popularizado pela CompuServe, o Graphics Interchange Format o formato mais usado pelos webdesigners, uma vez que compacto e leve, e ainda permite a forma intercalada, onde a imagem aparece toda de uma vez e aos poucos vai melhorando a qualidade, ao contrrio dos outros formatos onde a imagem vai carregando aos poucos e com a qualidade final. O nico problema desse formato o fato de salvar apenas em 256 cores, o que a torna deficiente em imagens que exigem altos nmeros de cores.

7.1.2.

JPGE

O Joint Point Photographic Engineering Group o formato preferido para armazenamento de fotografias, uma vez que permite que se salve em mais cores do que o Gif e no to pesado quanto um BMP. Suporta at 16 bit colors (65.536 cores).

7.1.3.

BMP

O bitmap o arquivo padro do Windows, embora seja aberto tambm em outras plataformas. Caracterizado pelo seu enorme tamanho, permite um nmero muito maior de cores, embora, por causa do seu tamanho, seja muito raramente utilizado. Para se ter uma idia de tamanho, uma imagem BMP como fundo de tela (no caso do Windows) ocupa geralmente 1,4Mb de tamanho (cerca de 7 min de download), sendo que em jpg, com boa qualidade grfica ocuparia cerca de 250Kb (cerca de 1 minuto e 20 segundos de download) e em gif pode chegar a 180Kb (algo em torno de 50 segundos de download), quando em baixa qualidade.
Alexandre Zannella Gorian (azg@terra.com.br)

25

HTML Avanado

7.2. Obteno de imagens

As imagens podem ser obtidas de vrias formas, seja atravs de outros sites, revistas, fotos, ou seja atravs de desenho prprio. Na construo de sites pessoais, a colocao de figuras copiadas de outros locais pode ser interessante, o que no recomendado em sites profissionais. A criao do layout (apresentao) do site recomendada que se faa de forma pessoal, sem uma cpia exagerada de outro site. Uma navegao pelo universo da Internet pode ser til para auxiliar na idealizao do seu site, mas nunca exagere na influncia. Lembre-se tambm que uma coisa que ficou legal num site no necessariamente ficar bom no seu. O domnio sobre uma ferramenta de editorao grfica importante, assim ser possvel trabalhar imagens para que fiquem mais leves e de melhor atendimento s necessidades. claro que no necessrio ser um designer grfico, mas o bsico importante conhecer. Dentre os principais programas de editorao grfica podemos citar o Adobe Photoshop (o mais utilizado), o Corel Photo Draw! e o Paint Shop Pro. A diferena entre cada um somente ser notada somente quando comparado a fundo um com o outro. Escolha o seu e mos obra!

7.3. Aplicao
A insero da imagem se d de forma bastante simples, bastando-se adicionar a tag <img> e seu atributo scr=imagem.jpg (ou scr=imagem.gif), onde imagem.jpg (ou imagem.gif) dever ser substitudo pelo nome da imagem a ser apresentada no browser, escrito de forma idntica ao nome do arquivo e a extenso certa. Assim como no links, imagens de outros diretrios ou sites podem ser especificados colocando a URL ou caminho. Ex.: O resultado apresentado no browser seria como mostrado abaixo:
<html> <head> <title>Exemplo de Imagens 1</title> </head> <body> <img src="IMG/windows9598.gif"> </body> </html>

Alexandre Zannella Gorian (azg@terra.com.br)

26

HTML Avanado

Figura 7.1 apresentao da figura no browser

7.4. Outros atributos

Por ter vrios atributos importantes, vamos separar por tpicos para facilitar o aprendizado.

7.4.1.

Align

Mais uma vez, ele determina o alinhamento, s que, dessa vez, no em relao ao pargrafo, e sim em relao disposio do texto ao redor da imagem. Os principais valores so: Botton: alinha o texto abaixo da figura; Middle: dispe a primeira linha do texto a partir do centro da figura e o restante abaixo dela; Top: dispe a primeira linha do texto a partir do topo da figura e o restante abaixo dela; Left: coloca a figura no lado esquerdo do texto; Rigth: coloca a figura no lado direito do texto;

Ex.:

Alexandre Zannella Gorian (azg@terra.com.br)

27

HTML Avanado
<html> <head> <title>Exemplo de Imagens 1</title> </head> <body> <p align="center"> <IMG src="img/windows9598.gif"> Imagem com alinhamento padr&atilde;o (botton),<br>repare no alinhamento do texto. <p> <IMG align=top src="img/anim1.jpg"> alinhamento superior agora (top) veja s&oacute; como ficou ru&iacute;m esse texto assim desse jeito...&nbsp; texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <p> <IMG align=right src="img/anim1.jpg"> agora uma imagem com alinhamento direito (right), veja como &eacute; mais apresent&aacute;vel assim...&nbsp; texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p> </body> </html>

A apresentao no browser:

Alexandre Zannella Gorian (azg@terra.com.br)

28

HTML Avanado

Figura 7.2 Apresentao no browser dos alinhamentos de figuras

7.4.2.

Alt

Esse atributo muito interessante (e til). Sua funcionalidade colocar um texto no lugar onde ela ser apresentada at ser completamente aberta. Uma vez carregada, quando o mouse for posicionado em cima da figura, uma legenda aparecer com o que est escrito nesse atributo. Outro ponto importantssimo o fato dele ajudar os deficiente visuais a navegarem, uma vez que o que est escrito lido pelo programa prprio. Caso o menu seja atravs de figuras, o deficiente poder navegar sem problemas (caso contrrio o programa menciona somente grfico, e ele fica sem saber o que representa). A utilizao bastante simples, bastando-se digitar alt= e o que deseja que aparea. (ex.: alt=Figura dos Animaniacs).

7.4.3.

Tamanho

Outras coisas importantes a serem mencionadas no cdigo, so as dimenses da imagem, atravs dos atributos width (largura) e height (altura). A vantagem da utilizao do cdigo o fato de que o navegador l antes o texto e depois as figuras, assim, o desenho do layout no ser modificado ao serem carregadas as figuras. H quem diga que o carregamento da figura se d de forma mais rpida, ou pelo menos aparenta ser.

Alexandre Zannella Gorian (azg@terra.com.br)

29

HTML Avanado

7.4.4.

Border

Pode-se inserir bordas nas figuras, afim de modific-las, deixa-las mais bonitas, ou outras coisas. Quando no se especifica o valor, a imagem fica sem bordas, exceto quando um link.

7.5. Imagens mapeadas

O que acontece quando se quer colocar links diferentes dentro de uma mesma imagem? Divide-se a imagem em pedaos? No necessariamente. O mapeamento de imagem serve para criao de links em vrias posies diferentes dentro de uma mesma imagem. Uma vez que seria muito desgastante a confeco manual de um mapa de uma figura, a utilizao de um editor de mapas de fundamental importncia.

Alexandre Zannella Gorian (azg@terra.com.br)

30