Apostila HTML

Apostila
<HTML>
Aprendendo a Criar Pginas para Web
Apostila de HTML
Sobre a Apostila
Esta apostila foi desenvolvida para o ensino da criao de pginas web. Como a HTML a linguagem bsica de criao de pginas, esta apostila enfoca o ensino da HTML. Hoje em dia, h uma grande variedade de editores que facilitam a criao de pginas e que no exigem do usurio um grande conhecimento de HTML. No entanto, esta apostila no usar nenhum destes editores, pois o objetivo que a pessoa aprenda a criar pginas codificando os comandos HTML, usando para isso at mesmo um editor como o Bloco de Notas. Esta apostila foi planejada para servir como um material de estudo para autoditadas, como tambm para ministrar cursos em empresas ou escolas e at mesmo como um guia de referncia para desenvolvedores que j conhecem a HTML. Pblico Alvo Qualquer pessoa que deseja aprender HTML; Desenvolvedores que j trabalham com HTML; Professores ou instrutores que desejem usar esta apostila como material didtico.
Pr-requisitos No necessrio ter conhecimento prvio de HTML, mas importante conhecer o Browser (navegador) e um editor de texto de sua preferncia, como por exemplo, o Bloco de Notas. Nvel Esta apostila aborda tpicos que vo do nvel BSICO ao INTERMEDIRIO.
Disponibilizada pelo professor Renan Menna Barreto TI- CDJB e Cedida por Aleckssandro Tavares - 2003
Apostila de HTML
Introduo
Esta apostila foi criada para ser um recurso de aprendizado e consulta linguagem HTML, para qualquer usurio de informtica que deseja criar pginas para a internet. Para facilitar o estudo e pesquisa de informao, ela foi dividida em tpicos, os quais foram apresentados em forma de captulos. Os captulos foram estruturados da seguinte forma: 1. 2. Conhecendo a HTML: Os conceitos bsicos e estrutura da linguagem HTML so apresentados neste captulo. 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, listas, entre outras. Links: A funcionalidade mais importante na HTML a possibilidade de criar elos (links) entre documentos e neste captulo mostrado como usar este grande recurso. 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. 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. 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 para fins comerciais. Neste captulo, este recurso ser ensinado e exemplificado. 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. Outros Comandos: Neste captulo so apresentados outros comandos interessantes da HTML, como exibir udio e vdeo, atualizao automtica de documento, etc. Caracteres Especiais: Uma tabela de cdigos de caracteres para serem usados em documentos HTML.
3. 4.
5.
6.
7. 8. 9.
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.
Apostila de HTML
Apostila de 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.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...................................................................................................16 2.6.2. LISTAS ORDENADAS.........................................................................................................17 2.6.3. LISTAS DESCRITIVAS........................................................................................................ 18 3. LINKS....................................................................................................................................20 3.1. 3.2. 3.3. 3.4. 3.5. 4.1. 4.2. 4.3. 4.4. 4.5. 5.1. 5.2. 5.3. 5.4. LINKS LINKS LINKS LINKS LINKS PARA PARA PARA PARA PARA ARQUIVOS LOCAIS..................................................................................................20 ARQUIVOS EM OUTROS DIRETRIOS.............................................................................21 ARQUIVOS DE OUTROS SERVIDORES.............................................................................23 E-MAIL............................................................................................................... 23 A MESMA PGINA NCORA...................................................................................... 23
4. IMAGENS................................................................................................................................26 IMAGENS IMAGENS IMAGENS IMAGENS IMAGENS COMO LINK............................................................................................................. 27 COMO PADRO DE FUNDO........................................................................................... 28 TRANSPARENTES...................................................................................................... 28 MAPEADAS..............................................................................................................28 ANIMADAS.............................................................................................................. 29
5. TABELAS................................................................................................................................31 TABELA SIMPLES.................................................................................................................. 31 MODIFICANDO A APARNCIA DA TABELA - ATRIBUTOS...................................................................... 32 ATRIBUTOS DE LINHAS E CLULAS............................................................................................. 33 MESCLANDO CLULAS............................................................................................................ 35
6. FORMULRIOS......................................................................................................................... 37 6.1. CRIANDO UM FORMULRIO...................................................................................................... 37 6.2. TAGS DE FORMULRIO............................................................................................................38 7. FRAMES................................................................................................................................. 43 7.1. CRIANDO FRAMES................................................................................................................. 43 7.2. LINKS COM FRAMES...............................................................................................................46 8. OUTROS COMANDOS................................................................................................................. 48 8.1. REFRESH PAGE.................................................................................................................... 48 8.2. AUDIO E VDEO ................................................................................................................... 48 8.3. TEXTO ROLANTE.................................................................................................................. 49 9. CARACTERES ESPECIAIS............................................................................................................. 52 10. TABELA DE CORES.................................................................................................................. 53 11. REFERNCIAS........................................................................................................................ 54
Apostila de HTML
1. CONHECENDO A HTML
HTML significa HyperText Markup Language e a linguagem de descrio de documentos usada na Web. 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. 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

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>
Apostila de 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> Corpo da pgina. </BODY> </HTML>
Vamos as explicaes de cada um desses comandos:
<HTML>...</HTML> : Indicam o incio e o fim do documento, todo o resto deve 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. em si. O texto, imagens e tudo que ser apresentado pelo browser.
<BODY>...</BODY> : Indicam o corpo do documento. Entre esses comandos estar a sua pgina
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 pgina (padro: 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). MARGINWIDTH margem esquerda(Netscape).
Apostila de 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:
Apostila de 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:
Apostila de 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>
10
Apostila de HTML
<TITLE>Curso de HTML - Pargrafos</TITLE> </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 o estilo negrito. <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:
11
Apostila de HTML
n: o n varia de 1 a 7 e o valor 3 corresponde ao valor padro; nome: o nome da fonte a ser utilizada; 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
12
Apostila de HTML
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. 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:
13
Apostila de HTML
TAG <CENTER>
Ela permite a centralizao horizontal de qualquer elemento em uma pgina. Tem o mesmo efeito que a TAG <DIV ALIGN=Center>. 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: pode ser left, center e rigth;
14
Apostila de HTML
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). 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.
15
Apostila de HTML
2.6.1. LISTAS NO ORDENADAS
TAG <UL>
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:
16
Apostila de HTML
2.6.2. LISTAS ORDENADAS
TAG <OL>
Permite inserir na pgina uma lista numrica ou alfabtica, com valor predefinido ou no. Sintaxe: <OL TYPE=formato START=n> <LI>Tpico 1</LI> <LI>Tpico 2</LI> </OL> Onde: <OL>: Incio da Lista Ordenada. TYPE=formato: Indica o formato da numerao. Pode ser: o 1: lista numrica padro; o A: lista alfabtica com letras maisculas; o a: lista alfabtica com letras minsculas; o I: lista numrica com nmeros romanos maisculos; o i: lista 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:
17
Apostila de HTML
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.
TAG <DL>
Permite inserir na pgina uma lista descritiva. Sintaxe: <DL> <DT>Tpico 1 <DD>Descrio do Tpico 1 <DT>Tpico 2 <DD>Descrio do Tpico 2 </DL> Onde: <DL>: Incio da Lista Descritiva. <DT>: Tpico 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
Apostila de HTML
19
Apostila de 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

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
Apostila de 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> Como fica no Browser:
3.2. LINKS PARA ARQUIVOS EM OUTROS DIRETRIOS

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 (/); Para subir um nvel, voc deve utilizar os sinais ../.
Sintaxe: <A HREF=diretrio/arquivo.extenso>Texto ou Imagem</A> Ou <A HREF=../diretrio/arquivo.extenso>Texto ou Imagem</A>
Exemplo: Imagine a seguinte estrutura de diretrios: C:\HTML\Aulas\Links.htm

21
Apostila de 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>
22
Apostila de HTML
Esta pgina est um nvel abaixo do diretrio da pgina onde foi criado o link. <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 ou Imagem</A> 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

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. Para Criar ncora:
23
Apostila de HTML
<A NAME=Nome da Seo>Texto</A> Onde: 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> <HEAD> <TITLE>Curso de HTML - Links ncoras</TITLE> </HEAD> <BODY> <A NAME="Inicio"></A> <H2>Exemplo de links para sees de uma Pgina:</H2>  <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>  <A NAME="Seo1"></A> <H3>Seo:</H3> Seo uma parte de uma pgina.<BR> 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 so ligaes para outras pginas ou sees de uma mesma pgina.<BR> <A HREF="#Inicio">Clique aqui para voltar ao incio da pgina</A><BR> </BODY> </HTML>
24
Apostila de HTML
Como fica no Browser:
25
Apostila de 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 .gif. Ele muito utilizado para desenhos e grficos web. 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 <IMG>
Permite inserir na pgina uma imagem. Sintaxe: <IMG SRC=arquivo WIDTH=n HEIGHT=n BORDER=n ALIGN=posio ALT=texto> Onde: SRC=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
Apostila de 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, prejudicando a aparncia da pgina. 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="Imagens/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="Imagens/Botao.gif" BORDER="0"></A> </BODY> </HTML> Veja como fica no Browser:
27
Apostila de 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=Imagens/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
Apostila de 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" coords="49,55,17" href="Imagem_Mapeada.htm" 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 imagens GIF. 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
Apostila de 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
Apostila de 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. 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 HTML - Tabelas</TITLE> </HEAD> <BODY> <H3>Tabela Sem Borda:</H3> <TABLE> <TR> <TH>Clula 1</TH>
31
Apostila de 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: cor de fundo das clulas da tabela.
Exemplo: Tabelas.htm <HTML> <HEAD> <TITLE>Curso de HTML - Tabelas</TITLE>

32
Apostila de 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> </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
Apostila de 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 utilizando o atributo NOWRAP</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
Apostila de 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
Apostila de 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 BORDER="2" WIDTH="50%" CELLPADDING="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
Apostila de 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 de informaes. No caso da internet, so os servidores http que do suporte aos 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
Apostila de 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; ACTION: especifica o programa ou pgina do servidor que processar os dados do formulrio; NAME: define o nome do formulrio. o
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. 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, name, value, 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, name, 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>
38
Apostila de HTML
<TH ALIGN="left" VALIGN="top">Caixa de texto comum:</TH> <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> 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 File:</TH> <TD><INPUT TYPE="FILE" NAME="filArquivo"></TD> </TR> </TABLE> </FORM> </BODY> </HTML> Como fica no Browser:
39
Apostila de 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: define cada opo da lista, as opes da lista devem ser definidas entre as tags <OPTION></OPTION>; SELECTED: indica que a opo estar selecionada 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">Hobbie:</TH> <TD> <SELECT NAME="Hobbie" SIZE="3" MULTIPLE> <OPTION>Carro</OPTION> <OPTION SELECTED>Futebol</OPTION>
40
Apostila de 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> <TD> </TD> <TD> <INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar"> <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
Apostila de 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> </TD> <TD> <INPUT TYPE="Reset" NAME="cmdLimpar" VALUE="Limpar"> <INPUT TYPE="Submit" NAME="cmdEnvio" VALUE="Enviar"> </TD> </TR> </TABLE> </FORM> </BODY> </HTML> Como fica no Browser:
42
Apostila de 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> utilizada para criar um conjunto de frames e seus elementos. a tag principal 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=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
Apostila de 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 em pixels; 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="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
Apostila de 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
Apostila de 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
Apostila de 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> Exemplo: Pagina1.htm <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
Apostila de HTML
8. OUTROS COMANDOS
Neste tpico vamos abordar alguns outros comandos 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 pode ser para a prpria pgina. 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
Apostila de 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 2</H2></CENTER> <BGSOUND 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: Usado para alinhar a faixa, pode ser LEFT, RIGHT, 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.
49
Apostila de HTML
HSPACE/VSPACE: Define o tamanho das margens onde a faixa deve ser posicionada. 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 DIRECTION=right HEIGHT=5% WIDTH=80% HSPACE=10 VSPACE=10 LOOP=infinite SCROLLAMOUNT=2 SCROLLDELAY=15> Curso de HTML </MARQUEE> </BODY> </HTML> Teste no Browser.
50
Apostila de HTML
51
Apostila de HTML
9. CARACTERES ESPECIAIS
> Á â Å ã Æ &eacute È ë Í î Ï ó Ò ø Ö ú Ù ü Ñ > ® ý ß ¹ « · ¾ ÷ & á À å Ä æ Ê è Ð &iacute Ì ï Ô ò Õ ö Û ù Ç ñ & © Þ º ² ¢ ± ¼ ¿ ¡ < " &Acirc à Ã ä É ê Ë ð Î ì Ó &ocirc Ø õ Ú û Ü ç < " Ý þ &170; ³ £ » ½ × ¤
52
Apostila de HTML
10. TABELA DE CORES

aliceblue antiquewhite aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkturquoise darkviolet deeppink deepskyblue dimgray
#f0f8ff faebd7 7fffd4 f0ffff f5f5dc ffe4c4 000000 ffebcd 0000ff 8a2be2 a52a2a deb887 5f9ea0 7fff00 d2691e ff7f50 6495ed fff8dc 00ffff 00008b 008b8b b8860b a9a9a9 006400 bdb76b 8b008b 556b2f ff8c00 9932cc 8b0000 e9967a 8fbc8f 483d8b 2f4f4f 00ced1 9400d3 ff1493 00bfff 696969
dodgerblue firebrick floralwhite forestgreen gainsboro ghostwhite gold goldenrod gray green greenyellow honeydew hotpink indianred ivory khaki lavender lavenderblush lightseagreen lightskyblue lightslateblue lightslategray lightsteelblue lightyellow limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream
1e90ff b22222 fffaf0 228b22 dcdcdc f8f8ff ffd700 daa520 7f7f7f 008000 adff2f f0fff0 ff69b4 cd5c5c fffff0 f0e68c e6e6fa fff0f5 #20b2aa 87cefa 778899 888888 b0c4de ffffe0 00ff00 faf0e6 ff00ff 800000 66cdaa 0000cd ba55d3 9370db 3cb371 7b68ee 00fa9a 48d1cc c71585 191970 f5fffa
mistyrose moccasin navajowhite navy oldlace olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna skyblue slateblue slategray snow springgreen steelblue tan
ffe4e1 ffe4b5 ffdead 000080 fdf5e6 6b8e23 ffa500 ff4500 da70d6 eee8aa 98fb98 afeeee db7093 ffefd5 ffdab9 cd853f ffc0cb dda0dd b0e0e6 800080 ff0000 bc8f8f 4169e1 8b4513 fa8072 f4a460 2e8b57 fff5ee a0522d 87ceeb 6a5acd 708090 fffafa 00ff7f 4682b4 d2b48c
53
Apostila de 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

Apostila HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Apostila HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Apostila

1.1. COMANDOS HTML

o <body background="fundo.gif">... corpo do documento ...</body>

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

o <hr noshadow width=50% size=10 align=left>

1.2. ESTRUTURA BSICA DE UM DOCUMENTO

Vamos as explicaes de cada um desses comandos:

<HEAD> </HEAD> : Delimitam a seo de cabealho do documento e nelas esto contidas as

2.2. PARGRAFOS E QUEBRA DE LINHA

2.3. ESTILOS DE TEXTO

2.4. DEFININDO FONTES TAG <FONT>

2.5. LINHAS HORIZONTAIS E ALINHAMENTO DE ELEMENTOS

2.6.1. LISTAS NO ORDENADAS

2.6.2. LISTAS ORDENADAS

2.6.3. LISTAS DESCRITIVAS

3.1. LINKS PARA ARQUIVOS LOCAIS

3.2. LINKS PARA ARQUIVOS EM OUTROS DIRETRIOS

Sintaxe: <A HREF=diretrio/arquivo.extenso>Texto ou Imagem</A> Ou <A HREF=../diretrio/arquivo.extenso>Texto ou Imagem</A>

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

3.3. LINKS PARA ARQUIVOS DE OUTROS SERVIDORES

3.4. LINKS PARA E-MAIL

3.5. LINKS PARA A MESMA PGINA NCORA

Como fica no Browser:

4.1. IMAGENS COMO LINK

4.2. IMAGENS COMO PADRO DE FUNDO

4.3. IMAGENS TRANSPARENTES

4.4. IMAGENS MAPEADAS

4.5. IMAGENS ANIMADAS

5.1. TABELA SIMPLES

5.2. MODIFICANDO A APARNCIA DA TABELA - ATRIBUTOS

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

5.3. ATRIBUTOS DE LINHAS E CLULAS

5.4. MESCLANDO CLULAS

6.1. CRIANDO UM FORMULRIO

6.2. TAGs DE FORMULRIO TAG <INPUT>

7.1. CRIANDO FRAMES

Como fica no Browser:

7.2. LINKS COM FRAMES

8.1. REFRESH PAGE

8.2. AUDIO E VDEO

8.3. TEXTO ROLANTE

10. TABELA DE CORES

Anda mungkin juga menyukai