APOSTILA BSICA DE HTML

Professor Edgar Caldeira da Cruz

Araras/SP 2013

HTML

HTML

HTML

Introduo
1. Conhecendo a HTML: Os conceitos bsicos e estrutura da linguagem HTML so apresentados neste captulo. 2. Formatao de Textos: Aqui explicada a formatao de textos atravs de comandos (tags) html especficos para esse fim. Algumas das formataes possveis so: negrito, sublinhado, itlico, tipo tamanho e cor da fonte, tipo, fonte listas, listas entre outras. outras 3. Links: A funcionalidade mais importante na HTML a possibilidade de criar elos (links) entre documentos e neste captulo mostrado como usar este grande recurso. 4. Imagens: O objetivo deste captulo ensinar como usar imagens nos documentos HTML. visto os tipos de imagens mais usadas, os formatos GIF e JPEG, e um pouco de imagens mapeadas. Como criar imagens com boa qualidade para documentos HTML um assunto extenso e por isso no ser abordado. 5. Tabelas: Um grande recurso para se produzir documentos com uma boa diagramao e apresentao o uso de tabelas. Este um dos principais captulos e justamente aqui que est a transio entre o nvel bsico e o nvel intermedirio na HTML. 6. Formulrios: Recurso poderoso da HTML que permite gerar interao entre o usurio e o documento. Depois que este recurso foi criado a HTML se difundiu e a internet passou a ser usada tambm p para fins comerciais. Neste captulo, p , este recurso ser ensinado e exemplificado. p 7. Frames: Este recurso permite exibir mais de um documento por tela. Para isso, a tela dividida em partes chamadas frames. Este recurso apresentado em detalhes neste captulo. 8. Outros Comandos: Neste captulo so apresentados outros comandos interessantes da HTML, como exibir udio e vdeo, atualizao automtica de documento, etc. 9. Caracteres Especiais: Uma tabela de cdigos de caracteres para serem usados em documentos HTML. 10. Tabela de Cores: Tabela com o cdigo e nome de cores para usar nos documentos HTML. 11. Referncias: Fontes de informao e pesquisa utilizadas para apoio ao desenvolvimento desta apostila.

HTML

Sumrio
1. CONHECENDO A HTML .............................................................................................................................................. 6 1.1. COMANDOS HTML................................................................................................................................................ 6 1.2. ESTRUTURA BSICA DE UM DOCUMENTO ................................................................................................... 7 2 FORMATAO DE TEXTOS ........................................................................................................................................ 8 2. 2.1. TTULOS E SUBTTULOS ...................................................................................................................................... 8 2.2. PARGRAFOS E QUEBRA DE LINHA ................................................................................................................ 8 2.3. ESTILOS DE TEXTO............................................................................................................................................... 11 2.4. DEFININDO FONTES............................................................................................................................................. 11 2.5. LINHAS HORIZONTAIS E ALINHAMENTO DE ELEMENTOS ....................................................................... 12 2.6. LISTAS ...................................................................................................................................................................... 15 2.6.1. LISTAS NO ORDENADAS........................................................................................................................... 15 2 6 2 LISTAS ORDENADAS.................................................................................................................................... 2.6.2. ORDENADAS 16 2.6.3. LISTAS DESCRITIVAS .................................................................................................................................. 17 3. LINKS ................................................................................................................................................................................20 3.1. LINKS PARA ARQUIVOS LOCAIS ...................................................................................................................... 20 3.2. LINKS PARA ARQUIVOS EM OUTROS DIRETRIOS ..................................................................................... 21 3.3. LINKS PARA ARQUIVOS DE OUTROS SERVIDORES ..................................................................................... 23 3.4. LINKS PARA E-MAIL ............................................................................................................................................. 23 3.5. LINKS PARA A MESMA PGINA NCORA ................................................................................................... 23 4. IMAGENS ..........................................................................................................................................................................26 4.1. 4.2. 4.3. 4.4. 4.5. IMAGENS COMO LINK.................................................................................................................................. 27 IMAGENS COMO PADRO DE FUNDO...................................................................................................... 28 IMAGENS TRANSPARENTES ....................................................................................................................... 28 IMAGENS MAPEADAS .................................................................................................................................. 28 IMAGENS ANIMADAS................................................................................................................................... 29

5. TABELAS ..........................................................................................................................................................................31 5.1. 5.2. 5.3. 5.4. TABELA SIMPLES........................................................................................................................................... 31 MODIFICANDO A APARNCIA DA TABELA - ATRIBUTOS .................................................................. 32 ATRIBUTOS DE LINHAS E CLULAS......................................................................................................... 33 MESCLANDO CLULAS ............................................................................................................................... 35

6. FORMULRIOS................................................................................................................................................................37 6.1. 6.2. CRIANDO UM FORMULRIO....................................................................................................................... 37 TAGS DE FORMULRIO ............................................................................................................................... 38

7 FRAMES.............................................................................................................................................................................43 7. FRAMES 43 7.1. 7.2. CRIANDO FRAMES ........................................................................................................................................ 43 LINKS COM FRAMES ..................................................................................................................................... 46

8. OUTROS COMANDOS .....................................................................................................................................................48 8.1. 8.2. 8.3. REFRESH PAGE ............................................................................................................................................... 48 AUDIO E VDEO .............................................................................................................................................. 48 TEXTO ROLANTE ............................................................................................................................................ 49

9. CARACTERES ESPECIAIS ..............................................................................................................................................51 10. TABELA DE CORES ........................................................................................................................................................52 11. REFERNCIAS .................................................................................................................................................................54

HTML

1. CONHECENDO A HTML
HTML significa i ifi HyperText H T Markup M k Language L e a linguagem li de d descrio d i de d documentos d usada d na Web. W b Sua principal caracterstica est definida em seu nome. A Html atravs de tags, posiciona e coloca hipertexto no documento. Por sua vez, o hipertexto a base da informao que, alm da funo comum de texto, permite ligaes (links) para outros locais de um documento e tambm para documentos remotos (pginas, figuras, frames e tudo mais que um navegador pode ler ou suportar). Periodicamente a Html ganha uma nova verso com mais recursos recursos. Quem cria as novidades desta linguagem so as pessoas e empresas envolvidas, principalmente os desenvolvedores de softwares para navegao (Netscape, Microsoft, etc). Todo este processo sofre a colaborao e a administrao do W3C - World Wide Web Consortium.

1 1 COMANDOS HTML 1.1.

Os comandos HTML so representados no texto atravs de rtulos (ou tags). O visualizador (Browser) interpreta como rtulos todos os elementos HTML vlidos que estejam entre os sinais menor que (<) e maior que (>). A maioria das TAGs HTML possuem um rtulo inicial e um rtulo final, envolvendo o texto que marcado por eles. A sintaxe bsica <TAG> Texto marcado pela Tag </TAG> Observe que o rtulo de fechamento tem o mesmo nome que o rtulo inicial, mas precedido por uma barra ("/"). Algumas TAGs podem ter um ou mais atributos, que definem alguma caracterstica especial. Os atributos, quando presentes, aparecem no rtulo inicial separados por espaos, logo aps o nome da TAG. Exemplos de tags HTML com atributos: Define uma imagem de fundo para a pgina: o <body background="fundo.gif">... corpo do documento ...</body>

Define uma borda para a tabela: o <table border>

... contedo e rtulos de tabela ... </table>

Define uma linha horizontal sem sombra, com largura de 50% da pgina, 10 pixels de espessura e alinhada pela esquerda: o <hr noshadow width=50% size=10 align=left>

HTML

1.2. ESTRUTURA BSICA DE UM DOCUMENTO

A estrutura bsica de um documento HTML a seguinte: <HTML> <HEAD> <TITLE> Ttulo do documento </TITLE> </HEAD> <BODY> BODY Corpo da pgina. </BODY> </HTML>

Vamos as explicaes de cada um desses comandos: <HTML>...</HTML> / : Indicam di o incio i i e o fim fi do d documento, d todo d o resto deve d estar entre esses dois comandos. <HEAD> </HEAD> : Delimitam a seo de cabealho do documento e nelas esto contidas as informaes de configurao da pgina. <TITLE> </TITLE> : Indicam o ttulo do documento, que ser apresentado na barra superior do Browser. Estes comandos devem estar sempre entre o comando acima. <BODY>...</BODY> : Indicam o corpo do documento. Entre esses comandos estar a sua pgina em si. O texto, imagens e tudo que ser apresentado pelo browser.

Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo da pgina, bem como uma imagem de fundo (marca dgua). Sintaxe: <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0> Onde: BGCOLOR - cor de fundo (padro: cinza ou branco) TEXT - cor dos textos da p pgina g (p (padro: p preto) ) LINK - a cor dos links (padro: azul) ALINK - cor dos links, quando acionados (padro: vermelho) VLINK - cor dos links, depois de visitados (padro: azul escuro ou roxo) BACKGROUND - indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua.

LEFTMARGIN margem esquerda da pgina(MS Internet Explorer). TOPMARGIN margem superior da pgina(MS Internet Explorer). MARGINHEIGHT margem superior(Netscape) superior(Netscape). MARGINWIDTH margem esquerda(Netscape).

HTML

2. FORMATAO DE TEXTOS
2.1. TTULOS E SUBTTULOS
Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6). Exemplo: Titulos.htm <HTML> <HEAD> <TITLE>Curso de HTML - Ttulos</TITLE> </HEAD> <BODY> <H1>Ttulo com H1</H1> <H2>Ttulo com H2</H2> <H3>Ttulo com H3</H3> <H4>Ttulo com H4</H4> <H5>Ttulo com H5</H5> <H6>Ttulo com H6</H6> </BODY> </HTML> Como fica no Browser:

2.2. PARGRAFOS E QUEBRA DE LINHA

Uma pgina HTML usa comandos especiais para definir a quebra de um pargrafo ou de uma linha. Vejamos alguns:

HTML

TAG <P>
responsvel pela quebra de pargrafos, inserindo automaticamente uma linha em branco. O uso da tag </P> opcional. Tambm possvel alinhar os pargrafos atravs desta tag. Sintaxe: <P ALIGN=posio>Texto do pargrafo</P> Onde: posio pode ser: o left: alinhamento esquerda; o center: centralizado; o right: alinhamento direita.

o justify: justificado.
Exemplo: Paragrafos.htm <HTML> <HEAD> <TITLE>Curso de HTML - Pargrafos</TITLE> </HEAD> <BODY> <P>Este pargrafo utiliza a TAG P e alinhamento padro (esquerdo) <P ALIGN="Right">Este pargrafo utiliza a TAG P e alinhamento direita <P ALIGN="Center">Este pargrafo utiliza a TAG P e alinhamento centralizado <P ALIGN="Justify">Este pargrafo utiliza a TAG P e alinhamento justificado. Para ver o resultado digite um texto grande o suficiente. Este pargrafo utiliza a TAG P e alinhamento justificado. Este pargrafo utiliza a TAG P e alinhamento justificado. Este pargrafo utiliza a TAG P e alinhamento justificado. </BODY> </HTML> Como fica no Browser:

HTML

TAG <BR>
responsvel pela quebra de linha. Ela finaliza a linha atual e passa para a prxima. Esta TAG no necessita da TAG </BR>. Sintaxe: Texto da linha<BR> Exemplo: Quebra_de_Linha.htm <HTML> <HEAD> <TITLE>Curso de HTML - Quebra de Linha</TITLE> </HEAD> <BODY> Este texto est usando a TAG BR no final de cada linha.<BR><BR> Voc pode utilizar<BR> a TAG BR<BR> toda vez<BR> que quiser passar o texto<BR> para a prxima linha.<BR><BR> O resultado simples. </BODY> </HTML> Como fica no Browser:

TAG <PRE>
Permite que se insira em uma pgina um pargrafo pr-formatado, isto , conforme foi digitado no editor. Sintaxe: <PRE>Texto do pargrafo</PRE> Exemplo: Paragrafos2.htm <HTML> <HEAD> <TITLE>Curso de HTML - Pargrafos</TITLE>

10

HTML

</HEAD> <BODY> <PRE> Este pargrafo esta utilizando a TAG PRE, foi definido no editor de uma forma especial, no final de cada linha, foi pressionada a tecla enter, para o texto continuar na linha seguinte. </PRE> </BODY> </HTML> Como fica no Browser:

2.3. ESTILOS DE TEXTO

Como em editores de texto, o HTML tambm permite alterar o estilo do texto. Vejamos alguns estilos: <B>...</B> - Aplica p o estilo negrito. g <I>...</I> - Aplica o estilo itlico. <U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem). <SUP>...</SUP> - Faz com que o texto fique sobrescrito. <SUB>...</SUB> - Faz com que o texto fique subscrito. <BIG>...</BIG> - Aumenta a fonte e atribui negrito <SMALL>...</SMALL> - Reduz e altera a fonte <TT>...</TT> - Aplica um espaamento regular ao texto.

2.4. DEFININDO FONTES TAG <FONT>

Permite alterar o tipo de fonte, o tamanho e a cor. Sintaxe: <FONT SIZE=n FACE=nome COLOR=cor>Texto</FONT> Onde:

n: o n varia de 1 a 7 e o valor 3 corresponde ao valor padro; nome: o nome da fonte a ser utilizada;

11

HTML

cor: a cor da fonte, definida em hexadecimal, ou atravs de um nome predefinido de

cores. Exemplo: Fontes.htm <HTML> <HEAD> <TITLE>Curso de HTML - Fontes</TITLE> </HEAD> <BODY> <FONT SIZE="7" FACE="Times New Roman" COLOR="#FF0000"> Fonte Times New Roman com tamanho 7 e cor Vermelha.</FONT><BR> <FONT SIZE="6" FACE="Arial" COLOR="#BC8F8F"> Fonte Arial com tamanho 6 e cor Pink.</FONT><BR> <FONT SIZE="5" FACE="Tahoma" COLOR="Blue"> Fonte Tahoma com tamanho 5 e cor Azul.</FONT><BR> <FONT SIZE="4" FACE="Verdana" COLOR="Gold"> Fonte Verdana com tamanho 4 e cor Gold</FONT><BR> <FONT SIZE="3" FACE="Helvetica" COLOR="DarkGreen"> Fonte Helvetica com tamanho 3 e cor Verde Escuro</FONT><BR> <FONT SIZE="2" FACE="Courier New" COLOR="Gray"> Fonte Courier New com tamanho 2 e cor Cinza</FONT><BR> <FONT SIZE="1" FACE="Impact" COLOR="#000000"> Fonte Impact com tamanho 1 e cor Preta</FONT><BR> </BODY> </HTML> Como fica no Browser:

2.5. LINHAS HORIZONTAIS E ALINHAMENTO DE ELEMENTOS TAG <DIV>

Ela permite o alinhamento horizontal de qualquer elemento em uma pgina. Esta TAG muito utilizada em DHTML pela propriedade de agrupar elementos de pgina.

12

HTML

Sintaxe: <DIV ALIGN=posio>Elementos a serem alinhados</DIV> Onde: posio pode ser: o left: alinhamento esquerda; o center: centralizado; o right: alinhamento direita. o justify: justificado. Somente para textos. Exemplo: Alinhamento_div.htm <HTML> <HEAD> <TITLE>Curso de HTML - Alinhamento</TITLE> </HEAD> <BODY> <DIV ALIGN="Center">Usando a TAG DIV:</DIV> <BR> <DIV ALIGN="Right"> <P>Usando a TAG DIV voc pode alinhar seu texto sem problemas. <P>Pode utilizar o alinhamento direita, que alinha seu texto na margem direita da tela. Como um texto criado em editor de textos para ser impresso em uma pgina. <P>Com a TAG DIV voc pode aproveitar o mesmo alinhamento para vrios pargrafos. </DIV> </BODY> </HTML> Como fica no Browser:

TAG <CENTER>
Ela permite a centralizao horizontal de qualquer elemento em uma pgina. Tem o mesmo efeito que a TAG <DIV ALIGN=Center>.
Disponibilizada pelo professor Renan Menna Barreto TI- CDJB e Cedida por Aleckssandro Tavares - 2003

13

HTML

Sintaxe: <CENTER>Elementos a serem centralizados</CENTER>

Exemplo: Alinhamento_center.htm <HTML> <HEAD> <TITLE>Curso de HTML - Alinhamento</TITLE> </HEAD> <BODY> <CENTER> <FONT FACE="Arial" COLOR="Blue"><H4>Aqui esta sendo utilizado a TAG CENTER</H4></FONT> </CENTER> Neste pargrafo no esta sendo utilizado a tag center, veja como o texto fica alinhado esquerda quando nenhum tipo de alinhamento especificado. </BODY> </HTML>

Como fica no Browser:

TAG <HR>
Insere uma linha horizontal no Browser. Sintaxe: <HR WIDTH=n% ALIGN=posio SIZE=n NOSHADE COLOR=#RRGGBB> Onde:

ALIGN=posio: p pode p ser left, , center e rigth; g ; WIDTH=n%: define a largura da linha, pode ser definida em pixels ou em percentagem do
tamanho horizontal da tela;

SIZE=n: define a espessura da barra, em pixels; NOSHADE: define que a barra no deve ser com efeito 3D; COLOR=#RRGGBB: define a cor da barra. (MS Internet Explorer).

14

HTML

Exemplo: Linhas.htm <HTML> <HEAD> <TITLE>Curso de HTML - Linhas Horizontais</TITLE> </HEAD> <BODY> Espessura 5<HR SIZE="05"> <BR> Largura 80% da pgina:<HR SIZE="05" WIDTH="80%"> <BR> Alinhamento direita:<HR SIZE="05" ALIGN="Right" WIDTH="30%"> <BR> Linha sem nenhum atributo:<HR> Linha com COR Vermelha:<HR NOSHADE COLOR="Red"> </BODY> </HTML> / Como fica no Browser:

2.6. LISTAS
Utilizar listas uma boa forma de organizar as pginas Web. As listas podem servir como resumos ou ndices de todo o site, contendo links para outras pginas. Basicamente existem trs tipos de listas: - Listas No Ordenadas; - Listas Ordenadas ou Numeradas; - Listas Descritivas.

2.6.1. LISTAS NO ORDENADAS

TAG <UL>

15

HTML

Permite inserir na pgina um texto de tpicos com marcadores de tipos diferentes. Sintaxe: <UL TYPE=formato> <LI>Tpico 1</LI> <LI>Tpico 2</LI> </UL> Onde:

<UL>: Inicio da Lista No Ordenada. TYPE=formato: Indica o formato do marcador. Pode ser:
o disc: O marcador um ponto. Este o padro; o square: O marcador um quadrado; o circle: O marcador um crculo.

<LI>: Tpicos da lista. No h limites e no necessrio a TAG </LI>. </UL>: Fim da Lista No Ordenada.
Exemplo: Listas_n_ordenada.htm <HTML> <HEAD> <TITLE>Curso de HTML - Listas</TITLE> </HEAD> <BODY> <H3>Lista No Ordenada - Tipo Square</H3> <UL TYPE="square"> <LI>Tpico 1</LI> <LI>Tpico 2</LI> <LI>Tpico 3</LI> </UL> </BODY> </HTML> Como fica no Browser:

2.6.2. LISTAS ORDENADAS

TAG <OL>
Permite inserir na pgina uma lista numrica ou alfabtica, com valor predefinido ou no.

16

HTML

Sintaxe: <OL TYPE=formato START=n> <LI>Tpico 1</LI> <LI>Tpico 2</LI> </OL> Onde: d

<OL>: Incio da Lista Ordenada. TYPE=formato: Indica o formato da numerao. Pode ser:
o o o o o 1: A: a: I: i: lista lista lista lista lista numrica padro; alfabtica com letras maisculas; alfabtica com letras minsculas; numrica com nmeros romanos maisculos; numrica com nmeros romanos minsculos.

START=n: O valor inicial da lista numerada. <LI>: Tpicos da lista. No h limites e no necessrio a TAG </LI>. </OL>: Fim da Lista Ordenada.
Exemplo: Listas_ordenadas.htm <HTML> <HEAD> <TITLE>Curso de HTML - Listas</TITLE> </HEAD> <BODY> <H3>Lista Ordenada - TYPE="A" e START="3"</H3> <OL TYPE="A" START="3"> <LI>Tpico 1</LI> <LI>Tpico 2</LI> <LI>Tpico 3</LI> </OL> </BODY> </HTML> Como fica no Browser:

2.6.3. LISTAS DESCRITIVAS

As listas descritivas so diferentes das outras listas. Cada item de uma lista descritiva possui dois componentes: um tpico e uma descrio do tpico.

17

HTML

TAG <DL>
Permite inserir na pgina uma lista descritiva. Sintaxe: <DL> <DT>Tpico p 1 <DD>Descrio do Tpico 1 <DT>Tpico 2 <DD>Descrio do Tpico 2 </DL> Onde: <DL>: Incio da Lista Descritiva. <DT>: Tpico p da Lista Descritiva. No h limite e no necessrio a TAG </DT>. <DD>: Descrio da lista. Para cada TAG <DT> existe uma TAG <DD>. </DL>: Fim da Lista Descritiva.

Exemplo: Listas_descitivas.htm <HTML> <HEAD> <TITLE>Curso de HTML - Listas</TITLE> </HEAD> <BODY> <H3>Lista Descritiva</H3> <DL> <DT><B>Listas No Ordenadas</B> <DD>As listas no ordenadas inserem <I>marcadores</I> na frente de cada item. <DT><B>Listas Ordenadas</B> <DD>As listas ordenadas inserem <I>nmeros</I> ou <I>letras</I> na frente de cada item. <DT><B>Listas Descritivas</B> <DD>As listas descritivas so diferentes das outras listas. Cada item de uma lista descritiva possui dois componentes: um <I>tpico</I> e uma <I>descrio</I>. <DL> </BODY> </HTML> Como fica no Browser:

18

HTML

19

HTML

3 . LINKS
A principal atrao da Internet sem dvida a utilizao de hipertexto. Uma pgina com ligao com outras pginas ou arquivos localizados em qualquer parte do mundo. A aplicao de hipertexto no se restringe somente a ligaes com outras pginas. possvel fazer ligaes com trechos dentro da prpria pgina. Isto muito utilizado em pginas com textos longos.

3 1 LINKS PARA ARQUIVOS LOCAIS 3.1.

Um link para uma pgina local quando o arquivo que ser linkado est no mesmo diretrio da pgina que esta linkando. Neste caso preciso informar somente o nome do arquivo. Sintaxe: <A HREF=arquivo.extenso>Texto ou Imagem</A> Onde:

arquivo.extenso: Deve ser definido o nome do arquivo que ser acessado e sua extenso. Texto ou Imagem: o texto ou imagem que servir como link.
Exemplo: Links.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="Link_Local.htm">Clique aqui</A> para ver a pgina Link_Local.htm </BODY> </HTML> Como fica no Browser:

20

HTML

Exemplo: Link_Local.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="Links.htm">Clique aqui</A> voltar pgina Links.htm </BODY> </HTML> C Como fica fi no Browser: B

3 2 LINKS PARA ARQUIVOS EM OUTROS DIRETRIOS 3.2.

Para criar um link para um arquivo localizado em outro diretrio (pasta) necessrio indicar o caminho completo para o arquivo Regras de diretrios na Web: O Ponto de partida para localizar um arquivo o diretrio atual; A barra utilizada para separar diretrios a barra convencional (/); , voc deve utilizar os sinais ../. Para subir um nvel, Sintaxe: <A HREF=diretrio/arquivo.extenso>Texto ou Imagem</A> Ou <A HREF=../diretrio/arquivo.extenso>Texto q ou Imagem</A> g

Exemplo: Imagine a seguinte estrutura de diretrios: C:\HTML\Aulas\Links.htm

21

HTML

C:\HTML\Link_Home.htm C:\HTML\Aulas\Distante\Link_Distante.htm

De dentro da pgina Links.htm para acessar a pgina Link_Home.htm o comando correto : <A HREF=../Link_Home.htm>Texto ou Imagem</A> Para acessar a pgina Link_Distante.htm o comando correto : <A HREF=Distante/Link_Distante.htm>Texto ou Imagem</A>

Exemplo: Links.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="Link_Local.htm">Clique aqui</A> para ver a pgina Link_Local.htm <BR> <H3>Link Para Pgina Que est um nvel acima</H3> <A HREF="../Link_Home.htm">Clique aqui</A> para ver a pgina ../Link_Home.htm <BR> <H3>Link Para Pgina Que est um nvel abaixo</H3> <A HREF="Distante/Link_Distante.htm">Clique aqui</A> para ver a pgina Distante/Link_Distante.htm </BODY> </HTML>

Exemplo: Pagina_Home.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Pgina em Home</H3> Esta pgina est um nvel de diretrio acima que a pgina onde foi criado o link. <BR> <A HREF="Aulas/Links.htm">Clique aqui</A> para voltar a pgina Links.htm </BODY> </HTML> Exemplo: Pagina_Distante.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Pgina Distante</H3> Esta pgina est um nvel abaixo do diretrio da pgina onde foi criado o link.

22

HTML

<BR> <A HREF="../Links.htm">Clique aqui</A> para voltar a pgina ../Links.htm </BODY> </HTML> Teste estes exemplos no Browser, navegando entre as pginas atravs dos links.

3.3. LINKS PARA ARQUIVOS DE OUTROS SERVIDORES

Para criar um link para arquivos localizados em qualquer parte do mundo necessrio indicar o URL do arquivo. Sintaxe: <A HREF=protocolo://servidor/arquivo>Texto p q ou Imagem</A> g Onde:

protocolo: o tipo de servidor que est sendo acessado. HTTP, FTP, etc; servidor: o computador que contm o arquivo; arquivo: o diretrio e o nome do arquivo.
Exemplos: <A HREF=ftp://www.empresa.com.br/docs/curriculo.doc>Curriculo</A> <A HREF=http://www.empresa.com.br/index.htm>Empresa X</A>

3.4. LINKS PARA E-MAIL

Para criar um link para um e-mail preciso informar o endereo eletrnico na tag de link. Exemplo: <A HREF=mailto:aleckssandro@hotmail.com>aleckssandro@hotmail.com</A>

3 5 LINKS PARA A MESMA PGINA NCORA 3.5.

Para criar um link para a mesma pgina preciso definir sees na pgina. Cada seo ter um nome que servir de referncia para o link. Para isso, preciso criar uma ncora no incio de cada seo que ser acessada. Uma ncora um ponto de referncia ou endereo. Ela utilizada para marcar o incio de cada seo. O nome da ncora ser utilizado pelo link que a acessar acessar. Para Criar ncora: <A NAME=Nome da Seo>Texto</A> Onde:

23

HTML

NAME=Nome da Seo: Cria o nome da seo, marcando o incio da mesma. Texto: No necessrio definir nada.

Para Linkar ncora: <A HREF=#Nome da Seo>Texto</A> Onde:

#Nome da Seo: Indica o nome da seo que deve ser acessada. Texto: o texto que servir como link.

Exemplo: Links_Ancoras.htm <HTML> HTML <HEAD> <TITLE>Curso de HTML - Links ncoras</TITLE> </HEAD> <BODY> <A NAME="Inicio"></A> <H2>Exemplo de links para sees de uma Pgina:</H2> <!-- Aqui esto os links --> <A HREF="#Seo1">Seo</A><BR> <A HREF="#Seo2">ncoras</A><BR> <A HREF="#Seo3">Links</A><BR> <BR><BR> Este espao foi criado para separar as sees da pgina. <BR><BR> <!-- Aqui esto as sees --> <A NAME="Seo1"></A> <H3>Seo:</H3> Seo uma parte de uma pgina.<BR> i As sees normalmente so utilizadas como captulos de um livro.<BR> <A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR> <BR><BR> Este espao foi criado para separar as sees da pgina. <BR><BR> <A NAME="Seo2"></A> <H3>ncoras:</H3> As ncoras so criadas para definir o incio de cada seo que servem como referncia para os links.<BR> <A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR> <BR><BR> Este espao foi criado para separar as sees da pgina. <BR><BR> <A NAME="Seo3"></A> <H3>Links:</H3> Os links s so ligaes gaes pa para a out outras as pg pginas as ou sees de u uma a mesma es a pg pgina.<BR> a. <A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR> </BODY> </HTML>

24

HTML

Como fica no Browser:

25

HTML

4. IMAGENS
Um timo recurso para tornar uma pgina web mais atraente a utilizao de imagens. Os formatos de arquivos utilizados para web so o GIF e o JPG ou JPEG. Para editar imagens para web voc pode usar o editor de sua preferncia. Os mais poderosos e utilizados por Designers Web so o Corel Draw e o Photo Shop, porm o mais utilizado por programadores em geral o Paint Shop Pro, que o que vamos utilizar no curso para criarmos imagens, porm o propsito no ensinar a utilizao do mesmo e sim us-lo como uma ferramenta. O formato GIF (Graphics Interchange Format) suporta at 256 cores e gera arquivos em geral bem menores, com extenso t .gif. if Ele El muito it utilizado tili d para desenhos d h e grficos fi web. b O formato JPEG (Joint Photographic Engineering Group) suporta at 16 milhes de cores, podendo reduzir o tamanho de uma imagem em at 10 vezes. Ele gera arquivos com extenso .jpg ou .jpeg, sendo muito utilizado para fotos por ter melhor resoluo de cores.

TAG G <IMG> G
Permite inserir na pgina uma imagem. Sintaxe: <IMG SRC=arquivo WIDTH=n HEIGHT=n BORDER=n ALIGN=posio ALT=texto> Onde:

SRC SRC=arquivo: arquivo : Indica a URL(caminho) do arquivo de imagem. Digite o nome do arquivo e a
extenso.

WIDTH=n: Define a largura da imagem em pixels. Se no for informado o padro o tamanho

original da imagem.

HEIGHT=n: Indica a altura da imagem. Se no for informado o padro o original da imagem. BORDER=n: a espessura da borda em pixels. ALIGN=posio: Indica a posio da imagem em relao ao texto. Posio pode ser:
o top: alinha o texto pelo topo da imagem; o bottom: alinha o texto pela base da imagem(padro); o middle: alinha o texto pelo centro da imagem.

ALT=texto: um texto alternativo para a imagem. Quando o Browser no exibe a imagem, a

mensagem exibida no lugar.

Exemplo: Imagens.htm <HTML> <HEAD> <TITLE>Curso de HTML - Imagems</TITLE> </HEAD> <BODY BGCOLOR="White">

26

HTML

<IMG SRC="Imagens/Estrela.gif" WIDTH="200" HEIGHT="200" BORDER="5" ALT="Estrela" ALIGN="Middle"> Teste o alinhamento deste texto alterando o atributo ALIGN para Top, depois Bottom e depois Middle. </BODY> </HTML> Teste no Browser.

4.1. IMAGENS COMO LINK

Para utilizar uma imagem como link acrescente a tag IMG entre as tag <A></A>. Quando se usa uma imagem como link, preciso definir o atributo BORDER=0, pois alguns browsers exibem uma borda azul ao redor da imagem, g , prejudicando p j a aparncia p da pgina. p g Sintaxe: <A HREF=URL><IMG SRC=Botao.gif></A> Exemplo: Imagens.htm <HTML> <HEAD> <TITLE>Curso de HTML - Imagens</TITLE> </HEAD> <BODY BGCOLOR="White"> <IMG SRC=estrela.gif" WIDTH="200" HEIGHT="200" BORDER="5" ALT="Estrela" ALIGN="Middle"> Teste o alinhamento deste texto alterando o atributo ALIGN para Top, Bottom e depois Middle. <H3>Imagem como Link</H3> <A HREF="Imagens.htm"><IMG SRC=botao.gif" BORDER="0"></A> </BODY> </HTML> Veja como fica no Browser:

27

HTML

4.2. IMAGENS COMO PADRO DE FUNDO

possvel utilizar uma imagem como padro de fundo em uma pgina. Para isso basta acrescentar o atributo BACKGROUND dentro da tag BODY. Tome cuidado para no utilizar arquivos muito grandes como padro de fundo, pois tornariam a pgina mais lenta para carregar. Sintaxe: <BODY BACKGROUND=imagem></BODY> Exemplo: Imagens.htm <HTML> <HEAD> <TITLE>Curso de HTML - Imagens</TITLE> </HEAD> <BODY BGCOLOR="White" BACKGROUND=estrela.gif"> <br><br><br> Veja como a imagem da estrela fica como fundo na pgina. </BODY> </HTML> Teste no Browser.

4.3. IMAGENS TRANSPARENTES

possvel tornar o fundo de uma imagem transparente, de forma que, ao ser carregada, a cor de fundo da imagem desaparece. Este recurso muito til para utilizar a mesma imagem em vrias pginas de cores de fundo diferentes, sem que precise criar uma imagem para cada pgina. Transparncia em imagens s suportada pelo formato GIF.

4.4. IMAGENS MAPEADAS

Uma imagem mapeada nada mais do que uma imagem dividida em vrias regies, onde cada regio um link para uma pgina. Existem dois tipos de imagens mapeadas:

Server/Side: As informaes ficam em um arquivo residente no servidor onde est hospedada

a pgina. Quando o usurio d um clique na imagem, enviado ao servidor as coordenadas da imagem que recebeu o clique e o nome do arquivo com as informaes que deve ser utilizado.

Cliente/Side: As informaes necessrias so armazenadas na prpria pgina onde est a

imagem mapeada. Por isso mais rpido. Neste curso vamos criar um mapa do tipo Client/Side. Para isso existem diversos programas que podem ser usados para mapear a imagem. Vamos utilizar o MapEdit. Para criar uma imagem mapeada preciso:

28

HTML

Criar uma imagem em seu editor preferido. Vamos utilizar a imagem Estrela_Transparente.gif; Criar uma pgina HTML com a imagem. Vamos criar a pgina Imagem_Mapeada.htm; Criar o mapa: definir as regies e associar as URLs.

Veja o arquivo salvo por um editor de imagem mapeada: <HTML> <HEAD> <TITLE>Curso de HTML - Imagem Mapeada</TITLE> </HEAD> <BODY BGCOLOR="White"> <IMG SRC="Imagens/Estrela_Transparente.gif" usemap="#Estrela_Transparente" border="0"> <map name="Estrela_Transparente"> <area shape="circle" p coords="49,55,17" , , href="Imagem_Mapeada.htm" g _ p title=""> <area shape="poly" coords="37,33,47,2,59,36,37,34" href="Imagem_Mapeada.htm" title=""> <area shape="default" nohref> </map> </BODY> </HTML> Sintaxe: <IMG SRC=arquivo USEMAP=mapa> <MAP NAME=nome> <AREA SHAPE=formato COORDS=coordenadas HREF=pagina> </MAP> Estrutura de um Mapa:

<MAP></MAP>: Indica o incio de uma descrio de mapa processado no cliente. Atributo:

o NAME="nome": indica o nome do mapa;

<AREA>: Indica as regies sensveis que o mapa apresentar. Atributos:

o SHAPE="formato": indica o formato da regio. Pode ser Circle, Poly, Rect, Default; o COORDS="coordenadas": indica as coordenadas que formam a regio; o HREF="pagina": indica a pgina associada regio;

<IMG>: Indica a imagem mapeada. Atributo:

o SRC="arquivo": indica o nome do arquivo de imagem;

o USEMAP="mapa": indica o mapa que ser utilizado;

4.5. IMAGENS ANIMADAS

Este um dos recursos mais utilizados para atrair a ateno dos usurios. possvel criar animaes complexas com Applets Java, objetos ActiveX e Flash. Porm a forma mais simples de criar animaes utilizar ili imagens i GIF. G Para criar um gif animado preciso utilizar um programa prprio para criao de gifs animados. Um dos programas mais utilizados e completos o Animation Shop que vem com o Paint Shop Pro (www.jasc.com).

29

HTML

Nesta apostila no chegaremos a aprender como se faz uma imagem animada, mas para testar, baixe alguma da internet e teste. A tag img para uma imagem animada no muda em relao a uma imagem esttica.

30

HTML

5. TABELAS
As tabelas so perfeitas para organizar e apresentar dados de forma prtica. possvel inserir texto, imagens ou links em tabelas, distribuindo melhor as informaes em uma pgina. Este um dos tpicos mais importantes, porque imprescindvel dominar bem o uso de tabelas para criar um bom layout html. Praticamente todas as pginas web utilizam recursos de tabela para diagramar seus elementos. Porm a utilizao de estilos (CSS) para posicionamento de elementos na pgina est crescendo cada vez mais, e j existem pginas com layout muito bom sem o uso de tabelas, usando apenas CSS.

5.1. TABELA SIMPLES

Como padro uma tabela no possui bordas. Cada linha da tabela definida separadamente e possvel modificar a aparncia da tabela, utilizando alguns atributos que veremos mais adiante. O nmero de TR define o nmero de linhas na tabela e o nmero de TD (dentro da TAG TR) define o nmero de colunas da tabela. Sintaxe: <TABLE> <TR> <TH>Cabealho da Tabela</TH> <TD>Dados da Tabela</TD> </TR> </TABLE>

Onde: <TABLE></TABLE>: TAGs de incio e fim de tabela. <TR></TR>: define cada linha da tabela; <TH></TH>: define o cabealho da tabela. uma clula da tabela; <TD></TD>: define os dados da tabela. tabela uma clula na tabela; Dados da Tabela: podem ser texto, imagens e links; Cabealhos da Tabela: cabealhos com texto, imagens ou links.

Exemplo: Tabelas.htm <HTML> <HEAD> <TITLE>Curso de d HTML - Tabelas</TITLE> b l </HEAD> <BODY> <H3>Tabela Sem Borda:</H3> <TABLE> <TR> <TH>Clula 1</TH>

31

31

HTML

<TH>Clula 2</TH> </TR> <TR> <TD>Clula 3</TD> <TD>Clula 4</TD> </TR> </TABLE> </BODY> </HTML>

Como fica no Browser:

5.2. MODIFICANDO A APARNCIA DA TABELA - ATRIBUTOS

possvel definir alguns atributos para tabelas, como bordas, alinhamento do contedo, espaamento entre as clulas, espaamento entre os dados e a prxima clula, largura da tabela, etc... Vejamos alguns desses atributos:

Sintaxe: <TABLE BORDER=n WIDTH=n% HEIGHT=n% CELLSPACING=n CELLPADING=n BGCOLOR=#RRGGBB> </TABLE> Onde: BORDER=n: espessura da borda em pixels. WIDTH=n%: largura da tabela em relao ao browser, em pixels ou %; HEIGHT=n%: altura da tabela em relao ao browser, em pixels ou %; CELLSPACING=n: espao entre uma clula e outra, em pixels; CELLADDING=n: espao entre os dados e a borda da tabela, em pixels; BGCOLOR=#RRGGBB: BGCOLOR= #RRGGBB : cor de fundo das clulas da tabela. tabela

Exemplo: Tabelas.htm <HTML> <HEAD> <TITLE>Curso de HTML - Tabelas</TITLE>

32

HTML

</HEAD> <BODY> <H2>Tabela com :</H2> <H4>border="3" width="80%" height="30%" cellpadding="6" cellspacing="6" bgcolor="Gold"</H4> <TABLE border="3" width="80%" height="30%" cellspacing="6" cellpadding="0" bgcolor="Gold"> <TR> <TH>Clula 1</TH> <TH>Clula 2</TH> </TR> <TR> <TD>Clula 3</TD> <TD>Clula 4</TD> </TR> </TABLE> </BODY> /BODY </HTML> Como fica no Browser:

5.3. ATRIBUTOS DE LINHAS E CLULAS

Tambm possvel definir algumas propriedades de linhas e clulas individuais da tabela. Sintaxe: <TR ALIGN=posio BGCOLOR=#RRGGBB VALIGN=posio> <TD ALIGN=posio VALIGN=posio BGCOLOR=#RRGGBB WIDTH=n% NOWRAP></TD> </TR> Onde:

ALIGN=posio: alinhamento horizontal do contedo da clula ou das clulas da linha. Pode ser
left, right e center;

BGCOLOR=#RRGGBB: define a cor de fundo das clulas da linha ou de uma clula individual; VALIGN=posio: alinhamento vertical de uma clula ou de clulas de uma linha;

33

HTML

WIDTH=n%: largura de uma clula em pixels ou %; NOWRAP: indica ao browser que o texto da clula no pode ser dividido em mais de uma linha. A
coluna inteirar ter o tamanho do texto escrito naquela clula; Exemplo: Tabelas.htm <HTML> <HEAD> <TITLE>Curso de HTML - Tabelas</TITLE> </HEAD> <BODY> <H2>Tabela</H2> <TABLE BORDER="0" BGCOLOR="Gold" WIDTH="600" CELLPADING="3"> <TR BGCOLOR="Silver"> <TH>Clula 1</TH> <TH>Clula 2</TH> </TR> <TR> <TD BGCOLOR="LightBlue" ALIGN="Center" VALIGN="top"> Clula 3 - ALIGN="center" VALIGN="top"<BR><BR> </TD> <TD BGCOLOR="Red">Clula 4</TD> </TR> </TABLE> <H2>Tabela H2 T b l utilizando tili d o atributo t ib t NOWRAP NOWRAP</H2> /H2 <TABLE BORDER="2" WIDTH="80%" CELLPADDING="6"> <TR ALIGN="Center"> <TD NOWRAP>Com o atributo NOWRAP o texto no pode ser dividido em mais de uma linha</TD> <TD>Este texto no est utilizando o atributo NOWRAP na tag TD. O texto distribudo em mais de uma linha dentro da mesma clula. </TD> </TR> </TABLE> </BODY> </HTML> Como fica no browser:

34

HTML

5.4. MESCLANDO CLULAS

possvel atravs de atributos na tag TD mesclar clulas em uma mesma linha ou em uma mesma coluna. Para mesclar clulas em uma mesma linha usar o atributo COLSPAN na tag TD e para mesclar clulas em uma mesma coluna usar o atributo ROWSPAN na tag TD. Sintaxe: <TD COLSPAN=n>Dados da Tabela</TD> <TD ROWSPAN=n>Dados da Tabela</TD> Onde:

COLSPAN=n: o nmero de colunas que a clula ocupar; ROWSPAN=n: o nmero de linhas que a clula ocupar;

Exemplo: Tabelas_Mescladas.gif

35

HTML

<HTML> <HEAD> <TITLE>Curso de HTML - Tabelas</TITLE> </HEAD> <BODY> <H2>Tabela utilizando o atributo COLSPAN</H2> <TABLE BORDER="2" WIDTH="50%" CELLPADDING="6"> <TR BGCOLOR="Silver"> <TD COLSPAN="2">Clula 1</TD> </TR> <TR ALIGN="Right"> <TD>Clula 2</TD> <TD>Clula 3</TD> </TR> </TABLE> <H2>Tabela utilizando o atributo ROWSPAN</H2> <TABLE TABLE BORDER="2" BORDER "2" WIDTH WIDTH="50%" "50%" CELLPADDING CELLPADDING="6"> "6" <TR BGCOLOR="Silver"> <TD ROWSPAN="2">Clula 1</TD> <TD>Clula 2</TD> </TR> <TR ALIGN="Right"> <TD>Clula 3</TD> </TR> </TABLE> </BODY> </HTML>

Como fica no Browser:

36

HTML

6. FORMULRIOS
Atravs de um formulrio o usurio pode interagir com o servidor, enviando dados que sero processados no servidor e devolvidos ao usurio. Os formulrios enviam os dados para um servidor http onde um programa CGI, geralmente em PERL ou C, processa os dados. O script CGI pode retornar, por exemplo, uma pgina ao usurio agradecendo o uso do formulrio e/ou enviar um email para o criador da pgina. Um script CGI (Common Gateway Interface), uma interface que executa programas externos suportados por servidores id d de i informaes. f N No caso d da i internet, t t so os servidores id htt http que d do suporte t aos CGI CGI. Alguns exemplos de uso de scripts CGI: tratar as requisies e dados enviados pelo usurio atravs de formulrios; servir de interface entre HTML e banco de dados SQL, fazendo a converso da transao HTML para SQL e vice-versa; converter dados do sistema em HTML gerando respostas para o cliente; Os scripts so escritos em linguagens compatveis com a plataforma sob a qual o servidor est rodando e devem produzir arquivos executveis. As linguagens mais utilizadas so: PERL TCL C Shell Bourne Shell C/C++

Um formulrio tambm pode ser processado por Servidores de Pginas Ativas como ASP, JSP e PHP que esto muito difundidos na internet.

6.1. CRIANDO UM FORMULRIO

Cada elemento de um formulrio definido separadamente. Na definio do formulrio, voc informa o local do programa (CGI, ASP, PHP) que controlar o formulrio e a forma ou mtodo como os dados sero enviados para o servidor. Sintaxe: <FORM NAME=nome METHOD=mtodo ACTION=URL> Elementos de Formulrio </FORM>

Onde:

METHOD: Define o mtodo utilizado pelo servidor para receber os dados do formulrio. O mtodo
pode ser:

37

HTML

POST: mtodo mais utilizado, transmite toda a informao do formulrio imediatamente aps a URL; o GET: anexa o contedo do formulrio ao endereo da URL, por isso tem limitao de tamanho das informaes; o

ACTION: especifica o programa ou pgina do servidor que processar os dados do formulrio; NAME: define o nome do formulrio.

6.2. TAGs DE FORMULRIO TAG <INPUT>

Define um campo de entrada de dados. Cada campo de um formulrio atribui o seu contedo a uma varivel que possui nome e tipo especfico. Si t Sintaxe: <INPUT TYPE=tipo SRC=imagem NAME=nome VALUE=valor SIZE=tamanho MAXLENGTH=comprimento CHECKED>

Onde:

TYPE:=tipo Define o tipo de varivel que pode ser:

o TEXT: rea de texto (usa os atributos: type, type name name, value value, size size, maxlength); o PASSWORD: Texto protegido por senha (usa os atributos: type, name, value, size e maxlength); o HIDDEN: Entrada oculta (atributos: type, name, value); o RADIO: Boto com uma opo (atributos: type; name, value, checked); o CHECKBOX: Boto com mais opes (type, name, value, checked); o RESET: Limpa os campos (type, name, value); o SUBMIT: Envia os dados do formulrio (type, name, value); o IMAGE: Envia os dados do formulrio (type (type, name name, value value, src); o BUTTON: Boto (atributos: type, name, value); o FILE: Abre uma janela para selecionar arquivo (type, name, value);

NAME=nome": nome do campo ou varivel; SRC=imagem: define a imagem que ser usada no input do tipo image; VALUE=valor: define o valor do campo; CHECKED: indica que o campo deve estar marcado ( o padro); SIZE=tamanho: define o tamanho do campo, ou seja, a quantidade de caracteres que ser
exibido em campos do tipo Text e Password;

MAXLENGTH=comprimento: define a quantidade de caracteres que o campo pode receber em

campos do tipo Text e Password. Exemplo: Formulario.htm <HTML> <HEAD> <TITLE>Curso de HTML - Formulrio</TITLE> </HEAD> <BODY> <FORM ACTION="processa.asp" METHOD="POST"> <TABLE> <TR> <TH ALIGN="left" VALIGN="top">Caixa de texto comum:</TH>

38

HTML

<TD><INPUT TYPE="Text" NAME="txtTexto" SIZE="20" MAXLENGTH="25"></TD> </TR> <TR> <TH>Texto protegido por senha:</TH> <TD><INPUT TYPE="Password" NAME="txtTexto" SIZE="6" MAXLENGTH="6"></TD> </TR> <TR> <TH>Botes de Radio:</TH> <TD> Qual o seu time? <INPUT TYPE="Radio" NAME="radOpcao" VALUE="share" CHECKED> <INPUT TYPE="RAdio" NAME="radOpcao" VALUE="free"> </TD> </TR> <TR> <TH>Checkboxes:</TH> <TD> TD Que softwares voc cohece? <INPUT TYPE="Checkbox" NAME="book" VALUE="Sim"> <INPUT TYPE="Checkbox" NAME="share" VALUE="Sim"> <INPUT TYPE="Checkbox" NAME="soft" VALUE="Sim"> </TD> </TR> <TR> <TH>Boto de Envio:</TH> <TD><INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar"></TD> </TR> <TR> <TH>Boto de Limpeza:</TH> <TD><INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar"></TD> </TR> <TR> <TH>Tipo p File:</TH> <TD><INPUT TYPE="FILE" NAME="filArquivo"></TD> </TR> </TABLE> </FORM> </BODY> </HTML>

Como fica no Browser:

39

HTML

TAG <SELECT>
Define uma lista de itens que podem ser selecionados pelo usurio. Sintaxe: <SELECT NAME=nome SIZE=tamanho MULTIPLE LISTBOX> <OPTION SELECTED>Opo</OPTION> <OPTION>Opo</OPTION> </SELECT> Onde: NAME=nome: define o nome do campo; SIZE=tamanho": define a quantidade de linhas da lista; MULTIPLE: define que vrios itens da lista podem ser selecionados; LISTBOX: define uma caixa drop-down para lista (deve ser utilizado sem os atributos SIZE e MULTIPLE); <OPTION></OPTION>;

OPTION: define cada opo da lista, as opes da lista devem ser definidas entre as tags SELECTED: indica que a opo estar selecionada como default;
Exemplo: Formulario.htm <HTML> <HEAD> <TITLE>Curso de HTML - Formulrio</TITLE> </HEAD> <BODY> p p METHOD="POST"> <FORM ACTION="processa.asp" <TABLE BORDER="0" CELLPADDING="2"> <TR> <TH ALIGN="Right">Hobbie:</TH> <TD> <SELECT NAME="Hobbie" SIZE="3" MULTIPLE> <OPTION>Carro</OPTION> <OPTION SELECTED>Futebol</OPTION>

40

HTML

<OPTION>Msica</OPTION> <OPTION>Livros</OPTION> <OPTION>Outros</OPTION> </SELECT> </TD> </TR> <TR> <TH ALIGN="Right">Estado Civil:</TH> <TD> <SELECT NAME="ListBox" LISTBOX> <OPTION>Casado</OPTION> <OPTION SELECTED>Solteiro</OPTION> <OPTION>Disquitado</OPTION> <OPTION>Vivo</OPTION> </SELECT> </TD> </TR> /TR <TR> <TD>&nbsp;</TD> <TD> <INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar">&nbsp;&nbsp;&nbsp; <INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar"> </TD> </TR> </TABLE> </FORM> </BODY> </HTML>

Como fica no Browser:

TAG <TEXTAREA>
Define uma caixa de texto onde o usurio pode digitar um texto com varias linhas. Sintaxe: <TEXTAREA NAME=nome ROWS=n COLS=n>Texto</TEXTAREA>

41

HTML

Onde: NAME=nome: define o nome do campo; ROWS=n": o nmero de linhas da caixa de texto; COLS=n: define o nmero de colunas da caixa de texto; Texto: define o texto que aparecer como default;

Exemplo: Formulario.htm <HTML> <HEAD> <TITLE>Curso de HTML - Formulrio</TITLE> </HEAD> <BODY> <FORM ACTION="processa.asp" METHOD="POST"> <TABLE BORDER="0" CELLPADDING="2"> <TR> <TH ALIGN="Right" VALIGN="top">Deixe sua sugesto:</TH> <TD><TEXTAREA NAME="Sugestao:" COLS="30" ROWS="5">Digite sua sugesto aqui.</TEXTAREA></TD> </TR> <TR> <TD>&nbsp;</TD> <TD> <INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar">&nbsp;&nbsp;&nbsp; <INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar"> </TD> </TR> </TABLE> </FORM> </BODY> </HTML> Como fica no Browser:

42

HTML

7. FRAMES
Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvel apresentar mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, e os textos relacionados ao ndice em outra parte.processados no servidor e devolvidos ao usurio. O corpo de uma pgina Frame diferente de uma pgina comum, e nesse arquivo s tem as dimenses das divises e as pginas que iram aparecer em cada diviso. A estrutura bsica do corpo de uma pgina com frame: <HTML> <HEAD> <TITLE>Titulo da pgina</TITLE> </HEAD> <FRAMESET COLS="15%,85%"> <FRAME SRC="pagina1.html"> <FRAME SRC="pagina2.html"> </FRAMESET> </HTML>

7.1. CRIANDO FRAMES

Para utilizar o recurso de frames, preciso utilizar um conjunto de tags. Cada uma com sua funo:

<FRAMESET> S utilizada ut ada pa para ac criar a u um co conjunto ju to de frames a es e seus elementos. e e e tos. a tag principal p c pa
para a criao de frames e precisa ser encerrada com </FRAMESET>;

<FRAME> utilizada para definir um frame (quadro) dentro de um conjunto de frames. No

necessita de tag de encerramento; Sintaxe: <FRAMESET COLS=colunas,largura ROWS=linhas,altura FRAMEBORDER=1/0 FRAMESPACING=n BORDER=n> <FRAME NAME=nome SRC=URL ALIGN=posio FRAMEBORDER=1/0 MARGINHEIGHT=altura MARGINWIDTH=largura SCROLLING=yes/no NORESIZE> </FRAMESET>

Onde:

FRAMESET: tag de abertura de um conjunto de frames; COLS COLS=colunas,largura: colunas,largura : define o nmero de colunas, o valor pode ser em pixels ou
percentagem. utilizado para definir o nmero de quadros (frames) que ter o conjunto de frames;

ROWS=linhas,altura: define o nmero de linhas, o valor pode ser em pixels ou em

percentagem. utilizado para definir o nmero de quadros (frames) que ter o conjunto de frames;

FRAMEBORDER=1/0: o valor 1 exibe uma borda 3D no frame, o valor 0 no exibe a borda;

43

HTML

BORDER=n: define o tamanho da borda; FRAMESPACING=n: define um espao em pixels entre os frames, nem todos os browsers
reconhecem este atributo;

FRAME: define cada quadro (frame) separadamente; NAME=nome: define o nome do frame; SRC=URL: define a pgina que ser exibida no frame; ALIGN=posio: define o alinhamento do contedo do frame. Posio pode ser: o top: o contedo alinhado no topo do frame; o middle: o contedo alinhado nomeio do frame; o bottom: o contedo alinhado na base do frame; o left: o contedo alinhado esquerda do frame; o right: o contedo alinhado direita do frame; FRAMEBORDER=1/0: o valor 1 exibe uma borda 3D, o valor 0 no exibe borda; MARGINHEIGHT=altura: define a altura da margem g em pixels; p ; MARGINWIDTH=largura: define a largura da margem em pixels; SCROLLING=yes/no/Auto: define se o frame ter ou no barra de rolagem; NORESIZE: evita o redimensionamento do frame;

Exemplo: Frames.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <FRAMESET COLS="40%,*" FRAMEBORDER="1" BORDER="5"> <FRAME NAME="Frame_1" SCROLLING="No" NORESIZE SRC="Pagina1.htm"> <FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm"> </FRAMESET> </HTML> Exemplo: Pagina1.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <BODY BGCOLOR= BGCOLOR="Gold"> Gold > <CENTER><H2>Pgina 1</H2></CENTER> </BODY> </HTML> Exemplo: Pagina2.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <BODY BGCOLOR="LigthBlue"> <CENTER><H2>Pgina 2</H2></CENTER> </BODY> </HTML>

44

HTML

Como fica no Browser:

Exemplo: Frames_2.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <FRAMESET COLS="40%,*" FRAMEBORDER="1" BORDER="5"> <FRAME NAME="Frame_1" SCROLLING="No" NORESIZE SRC="Pagina1.htm"> <FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm"> </FRAMESET> </HTML> Como fica no Browser:

45

HTML

Exemplo: Frames_3.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <FRAMESET ROWS="10%,*" FRAMEBORDER="0" BORDER="0"> <FRAME NAME="Frame_1" SCROLLING="no" NORESIZE SRC="Pagina1.htm"> <FRAMESET COLS="10%,*" FRAMEBORDER="0"> <FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm"> <FRAME NAME="Frame_3" SCROLLING="Auto" NORESIZE SRC="Pagina3.htm"> </FRAMESET> </FRAMESET> </HTML> Exemplo: Pagina3.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <BODY BGCOLOR="Red"> <CENTER><H2><FONT COLOR="White">Pgina 3</FONT></H2></CENTER> </BODY> </HTML>

Como fica no Browser:

7.2. LINKS COM FRAMES

Sempre que se aciona um link dentro de uma pgina, o default que a pgina referente a esse link seja carregada na mesma janela da pgina anterior, porm possvel fazer com que um link abra uma pgina em qualquer frame, para isso usamos o atributo TARGET na tag <A></A>

46

HTML

Sintaxe: <A HREF= TARGET=frame>Link</a> Onde:

TARGET=janela:indica em qual a janela ou frame que a pgina do link deve ser carregada.
Janela pode ser; o _top: limpa a tela e abre a pgina ocupando toda a tela; o _blank: abre uma nova janela do browser para exibir a pgina; o _self: carrega a pgina no frame atual. o default; o nome do frame: carrega a pgina no frame especificado; Exemplo: Frames.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <FRAMESET COLS="20%,*" FRAMEBORDER="0" BORDER="0"> <FRAME NAME="Frame_1" SCROLLING="no" NORESIZE SRC="Pagina1.htm"> <FRAME NAME="Frame_2" SCROLLING="Auto" NORESIZE SRC="Pagina2.htm"> </FRAMESET> </HTML> E Exemplo: l Pagina1.htm P i 1h <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <BODY BGCOLOR="Gold"> <H2>Pgina 1</H2> <A HREF="Pagina3.htm" TARGET="_top">Pgina 3 em _top</A><BR> <A HREF="Pagina3.htm" TARGET="_blank">Pgina 3 em _blank</A><BR> <A HREF="Pagina3.htm" TARGET="Frame_2">Pgina 3 em Frame_2</A><BR> </BODY> </HTML> Teste no Browser.

47

HTML

8. COMANDOS
Neste tpico vamos abordar alguns outros comandos interessantes, interessantes porm sem aprofundar em nenhum deles.

8.1. REFRESH PAGE

So pginas normalmente sem links, que chamam outras depois de um determinado tempo, sem nenhuma interferncia do usurio. Este refresh p pode ser p para a prpria p p pgina. p g Para fazer uma pgina com refresh basta colocar no documento a seguinte linha de comando: Sintaxe: <META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=pagina"> Onde:

segundos: nmero de segundos para ocorrer o refresh. pagina: pgina que deve ser carregada aps transcorrer o nmero de segundos especificados.

Exemplo: Refresh.htm <HTML> <HEAD> <META HTTP-EQUIV="REFRESH" CONTENT="5; URL=Pagina2.htm"> <TITLE>Curso de HTML - Refresh</TITLE> </HEAD> <BODY> <H1>Aguarde...<H1> <H2>Aps 5 segundos ser carregada a Pagina2.htm</H2> </BODY> </HTML> / Teste no Browser.

8.2. AUDIO E VDEO

Vamos ver duas maneiras de colocar msicas em sua home page. A primeira com o TAG <BGSOUND> que s reconhecida pelo Internet Explorer. Para utilizar este TAG siga o exemplo : <BGSOUND SRC="arquivo.mid"> Onde arquivo.mid o arquivo de msica. Caso voc queira que a msica repita-se, adicione o atributo loop="infinite".

48

HTML

A segunda maneira com o TAG <EMBED> que, por ser reconhecido pelo Internet Explorer e Netscape, recomendado. Para utiliz-lo, siga o exemplo : <EMBED SRC="arquivo.mid"> recomendado usar arquivos midi por serem bem menores que os wavs. Com o comando EMBED tambm possvel rodar vdeos, a sintaxe a mesma que para msicas. Exemplo: Multimidia.htm <HTML> <HEAD> <TITLE>Curso de HTML - Frames</TITLE> </HEAD> <BODY BGCOLOR="LightBlue"> <CENTER><H2>Pgina g 2</H2></CENTER> / / <BGSOUND SRC="laser.wav"> <!-- <EMBED SRC="testsnd.mid"> --> <!-- <EMBED SRC="laser.wav"> --> </BODY> </HTML> Teste no Browser.

8.3. TEXTO ROLANTE

Com esta tag voc pode colocar uma faixa decorativa com um texto animado em sua pgina. Para entende-lo melhor d uma olhada no exemplo abaixo: Sintaxe: <MARQUEE ALIGN=posio BEHAVIOR=animao BGCOLOR=#RRGGBB DIRECTION=direo HEIGHT=n% WIDTH=n% HSPACE=n VSPACE=n LOOP=quantide SCROLLAMOUNT=n SCROLLDELAY=n>Texto</MARQUEE> Onde:

ALIGN: ALIGN U Usado d para alinhar li h a f faixa, i pode d ser LEFT LEFT, RIGHT, RIGHT MIDDLE. MIDDLE BEHAVIOR: Define animao do texto, pode ser SCROLL, SLIDE ou ALTERNATE, eu poderia falar o
que cada um desses tributos faz mas acho melhor voc mesmo testa-los um a um.

BGCOLOR: Como voc j deve saber define o fundo da faixa. DIRECTION: Direo do texto, pode ser LEFT ou RIGHT HEIGHT/WIDTH: Define o tamanho da faixa em pixels LOOP: Define o nmero de vezes que o texto passar pela faixa, o valor atribudo no exemplo foi
INFINITE que anima o texto um nmero infinito de vezes.

HSPACE/VSPACE: Define o tamanho das margens onde a faixa deve ser posicionada.

49

HTML

SCROLLAMOUNT/SCROLLDELAY: Definem a velocidade do texto, o SCROLLAMOUNT define a

quantidade de informao que ser movimentada, prefira os valores entre 2 e 5. O SCROLLDELAY define a velocidade entre os intervalos entre cada desenho, um valor aconselhvel seria em torno de 20.

Exemplo: Texto_Rolante.htm <HTML> <HEAD> <TITLE>Curso de HTML - Texto Rolante</TITLE> </HEAD> <BODY BGCOLOR="LightBlue"> <CENTER><H2>Usando a tag MARQUEE</H2></CENTER> <MARQUEE ALIGN=middle BEHAVIOR=scroll BGCOLOR=Gold DIRECTION=right HEIGHT=5% WIDTH=80% HSPACE=10 VSPACE=10 LOOP=infinite SCROLLAMOUNT=2 SCROLLDELAY=20> Apostila de HTML </MARQUEE> <BR> <MARQUEE ALIGN=middle BEHAVIOR=alternate BGCOLOR #FFFFFF BGCOLOR=#FFFFFF DIRECTION=right HEIGHT=5% WIDTH=80% HSPACE=10 VSPACE=10 LOOP=infinite SCROLLAMOUNT=2 SCROLLDELAY 15> SCROLLDELAY=15> Curso de HTML </MARQUEE> </BODY> </HTML> Teste no Browser.

50

HTML

9. CARACTERES ESPECIAIS
> &Aacute; & i &acirc; &Aring; &atilde; &AElig; &eacute &Egrave; &euml; &Iacute; &icirc; &Iuml; &oacute; &Ograve; &oslash; &Ouml; &uacute; &Ugrave; &uuml; &Ntilde; &gt; g; &reg; &yacute; &szlig; &#185; &#131 &#131; &#137; &#171; &#183; &#190; &#247; & &aacute; &A &Agrave; &aring; &Auml; &aelig; &Ecirc; &egrave; &ETH; &iacute &Igrave; &iuml; &Ocirc; &ograve; &Otilde; &ouml; &Ucirc; &ugrave; &Ccedil; &ntilde; &amp; p; &copy; &THORN; &#186; &#178; &#134 &#134; &#162; &#177; &#188; &#191; &#161;
51

< "

&Acirc & &agrave; &Atilde; &auml; &Eacute; &ecirc; &Euml; &eth; &Icirc; &igrave; &Oacute; &ocirc &Oslash; &otilde; &Uacute; &ucirc; &Uuml; &ccedil; &lt; &quot; q ; &Yacute; &thorn; &170; &#179; &#135 &#135; &#163; &#187; &#189; &#215; &#164;

51

HTML

10. TABELA DE CORES

aliceblue antiquewhite aquamarine azure b i beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki

#f0f8ff faebd7 7fffd4 f0ffff f5f5d f5f5dc ffe4c4 000000 ffebcd 0000ff 8a2be2 a52a2a deb887 5f9ea0 7fff00 d2691e ff7f50 6495ed fff8dc 00ffff 00008b 008b8b b8860b a9a9a9 006400 bdb76b

dodgerblue firebrick floralwhite forestgreen gainsboro i b ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred ivory khaki lavender lavenderblush lightseagreen lightskyblue lightslateblue lightslategray lightsteelblue lightyellow limegreen

1e90ff b22222 fffaf0 228b22 d d d dcdcdc f8f8ff ffd700 daa520 7f7f7f 008000 adff2f f0fff0 ff69b4 cd5c5c fffff0 f0e68c e6e6fa fff0f5 #20b2aa 87cefa 778899 888888 b0c4de ffffe0 00ff00

mistyrose moccasin navajowhite navy oldlace ldl olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon

ffe4e1 ffe4b5 ffdead 000080 fdf5 6 fdf5e6 6b8e23 ffa500 ff4500 da70d6 eee8aa 98fb98 afeeee db7093 ffefd5 ffdab9 cd853f ffc0cb dda0dd b0e0e6 800080 ff0000 bc8f8f 4169e1 8b4513 fa8072

52

HTML

darkkhaki darkmagenta darkolivegreen darkorange d k hid darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink

bdb76b 8b008b 556b2f ff8c00 9932 9932cc 8b0000 e9967a 8fbc8f 483d8b 2f4f4f 00ced1 9400d3 ff1493 00bfff 696969

limegreen linen magenta maroon mediumaquamarine di i mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred

00ff00 faf0e6 ff00ff 800000 66 d 66cdaa 0000cd ba55d3 9370db 3cb371 7b68ee 00fa9a 48d1cc c71585 191970 f5fffa

salmon sandybrown seagreen seashell sienna i skyblue slateblue slategray snow springgreen steelblue tan

fa8072 f4a460 2e8b57 fff5ee a0522d 0522d 87ceeb 6a5acd 708090 fffafa 00ff7f 4682b4 d2b48c

deepskyblue

midnightblue

dimgray

mintcream

53

HTML

11. REFERNCIAS
HTML Dinmico. Ramalho, Jos Antnio Alves. Berkeley Brasil, 1999. A Arte Web. Site Sobre HTML, HTML Dinmico e Design. (www.aarte-web.com.br). Tutorial HTML. Tutorial mantido pela USP desde 1995. (www.icmc.usp.br/manuals/HTML).

54