curso de html

Colégio “São José”

2

Curso Técnico

3

Home Page, Página HTML ou Página WEBÉ um arquivo ou documento gravado como um arquivo de texto com a extensão

HTM ou HTML, cujo conteúdo é composto de textos e códigos especiais ( tags). Além detexto, este arquivo pode conter imagens, sons, animações e até mesmo vídeo. A páginapode conter links (ligações) para outras páginas armazenadas no seu micro ou em qualquerlugar da Web.

Para que o conteúdo de um documento HTML seja exibido na internet devemosusar um programa chamado Browser (navegador). Existem vários programas disponíveisno mercado, os mais populares são Internet Explorer e o Netscape Navigator.

Para criarmos o código-fonte podemos utilizar um editor de texto (Notepad dowindows). Contudo, a forma mais prática e produtiva de escrever uma página Web é usarum editor HTML.

Tags ou comandos HTMLOs comandos normalmente são especificados em pares, delimitando um texto que

sofrerá algum tipo de formação. São identificados pelo sinais “< >” e “ < / >”

Estrutura básica de um documento HTMLPara que um browser interprete corretamente o programa, ele deve possuir alguns

comandos básicos que sempre deverão estar presentes.(Alguns browser até dispensam ouso)

Um programa HTML possui 3 partes básicas:

Estrutura <html>

</html>

cabeçalho

corpo

<head></head>

<body>

</body>

4

Principais elementos de uma página.Título : texto que aparece na barra de título do browserImagem : são figuras, desenhos e fotos usados para ilustrar a páginaTexto : informação mais comum dentro da páginaLink : é um texto que aparece destacado do restante do texto, normalmente sublinhadoe com outra cor . Ao clicar sobre o link, o browser acessa outra região da página atual ouuma página localizada em qualquer lugar da internetCabeçalho : são linhas de texto com tamanhos especiais

COMANDO <P>Força o início de um novo parágrafo, ou seja, avança 1 linha em branco e inicia o

texto na segunda linha após o final do parágrafo. Este comando pode aparecerindividualmente ou em par <P> </P>.

COMANDO <BR>Avança para a linha imediatamente após àquela em que ele se encontra.

COMANDO <HR>Inseri uma linha divisória na posição em que foi especificado.

Aplicando estilo de textosAssim como o editor de textos, podemos criar uma série de efeitos no texto,

alterando a forma ou o tipo de texto. Todos os comando são do tipo liga-desliga, ou seja,precisam ser especificados em pares, marcando o início e fim do texto que sofrerá aformatação.

Os principais comandos são :

Negrito <B>texto</B> Aplica o estilo textoItálico <I>texto</I> Aplica o estilo itálicoSublinhado <U>texto</U> Aplica um sublinhadoStrong <strong>texto</strong> Similar ao negritoTypewriter <TT>texto</TT> Deixa o texto com espaçamento regularBig <big>texto</big> Aumenta a fonte e aplica negritoSmall <small>texto</small> Reduz e altera a fonteSobrescrito <sup>texto<sup> Eleva o texto e diminui seu corpoSubscrito <sub>texto<sub> Rebaixa o texto e diminui seu corpoPulsante <blink>texto<blink> Faz com que o texto pisque

COMANDO SINTAXE FUNÇÃO

5

CabeçalhosOutra forma muito usada para mudar o tamanho da letra e aplicar um efeito como

negrito em um texto é o uso dos comandos <H>. A linguagem possui 6 comandos, de <H1>até <H6>. Além do tamanho diferenciado, o comando <H> insere uma linha em brancoantes e depois da linha que contém o comando. (H1 possui o maior tamanho, H6 o menor)

<Hn> texto </Hn>

Centralização de textos e outros elementosComo padrão, os textos inseridos em uma página HTML são alinhados paela

margem esquerda. Para centralizar um cabeçalho, parágrafo ou figura dentro da largura dapágina, deve ser usado o comando:

<CENTER> texto </CENTER>

Alterando o tamanho da fonteUm dos recursos de tratamento de texto mais interessantes da linguagem HTML é a

possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado.

<FONTSIZE=nFACE=nomeCOLOR=cor> texto </FONT>

SIZE – especifica o tamanho da fonte utilizada. Os valores vão de 1, o menor, até 7, omaior. O padrão é o 3.

FACE – permite que seja escolhida uma fonte diferente para o texto. Podem serespecificadas várias fontes, de maneira que se o sistema não possuir a primeira opção, asegunda é carregada e assim por diante.

<FONT FACE=”verdana, arial” SIZE=1>

COLOR – especifica a cor do texto.

Aqua #70DB93 Blue #0000FFBlack #000000 Cyan #00FFFFFuchsia #FF00FF Gray #C0C0C0Green #00FF00 Lime #32CD32Brown #800000 Navy #23238E

Cor Código Cor Código

6

Olive #808000 Red #FF0000Silver #E6E8FA Teal #008080

White #FFFFFF Yellow #FFFF00

Exibição de textos pré-formatadosAtravés do comando <PRE> podemos incluir um texto que foi editado por um

editor de textos e preservar sua formatação original.

<PRE> textotextotexto....</PRE>

Cores e padrões de fundoA maioria dos browsers permite a utilização de cores no segundo plano da tela

(background), assim como a utilização de imagens para enfeitar o fundo da tela. Usaremoso comando <BODY> para colocar mais cor à página.

Os browsers oferecem até 256 cores para serem usadas como cor de fundo ou detexto. Cada cor é composta de um código RGB (Red/Green/Blue). O código RGB écomposto de 3 números, os dois primeiros números representam a intensidade do vermelho( R ), mais dois para o verde ( G ) e os últimos para o azul ( B ).

<BODYBGCOLOR=corTEXT=corLINK=corVLINK=cor>

BGCOLOR – cor de fundo

TEXT – cor do texto

LINK – cor do texto do link

VLINK – cor do link que já foi visitado

7

IMAGENSIncluir uma imagem em uma página HTML é bem simples, basta que esteja

disponível nos formatos GIF ou JPG. Se uma imagem não estiver nos formatos aceitospelos browsers, você pode utilizar programas de conversão e tratamento de imagens como oPaintShop Pro, o PhotoPaint ou outro para realizar a conversão.

COMANDO <IMG>Este comando define a posição de uma imagem que aparece no corpo do

documento.

<IMGSRC=”url”ALIGN = “top”/”middle”/”bottom”/”left”/”right”ALT= “texto”>

Atenção: o comando IMG contém mais parâmetros, que serão abordados no transcorrer do curso.

SRC =”url”- é o nome da figura, se estiver no mesmo diretório do programa ou o seucaminho completo.

ALT=”texto”- exibe o texto quando o browser não encontra a imagem, ou uma legendaquando o cursor passa sobre ela mostrando o texto especificado.

ALIGN=”top”/”middle”/ “bottom” – especifica o alinhamento da imagem relativamente àlinha de texto onde é exibida.

ALIGN=”left”/”right”- especifica o alinhamento da imagem relativamente às bordaslaterais da janela.

8

URLs e LINKsAté agora você aprendeu como criar documentos interessantes, mas que poderiam

ter sido criados diretamente com um processador de textos. A principal atração da Interneté a criação de documentos com o conceito de hipertexto, ou seja, um documento que se ligaa outros por meio de ligações especiais chamadas HYPERLINKS.

Criando um link com arquivos locaisFazer a ligação de um texto com uma página local é uma tarefa bem simples.

Precisamos apenas especificar o nome completo do arquivo que será chamado, utilizando ocomando <A> de âncora.

O comando pode marcar um texto ou uma imagem como hyperlink, assim comocriar um endereço para uma seção de um documento que será referida por um link.

<AHREF= “……” > caracteres </A>

HREF=”url” – especifica o endereço da URL (Universal Resource Locator – localizadoruniversal de recursos) ao qual o link está associado

Ex: <A HREF=”pagina.html”> Teste de link </A>

(ao clicar em Teste de link o arquivo pagina.html será aberto)

Criando um link para uma imagemVincular uma imagem exige o mesmo trabalho de vincular um arquivo. Basta

especificar o nome da imagem, incluindo sua extensão, no parâmetro HREF.

<A HREF=”imagem.gif/jpg”> texto </A>

(ao executar o programa, um texto aparecerá como link e um clique sobre ele chamará umanova página com a imagem referida)

Usando uma imagem como hyperlinkPodemos usar uma imagem como hyperlink envolvendo-a com o comando <A>

</A>. Em vez de especificar um texto, usaremos o comando <IMG> para colocar aimagem.

9

<A HREF=”pagina.html” ><IMG SRC=”imagem.gif/jpg” ></A>

(ao clicar na imagem o arquivo pagina.html será aberto)

Alterando a borda de uma imagem com linksUsar diferentes tamanhos de borda, ou não usa-las, é uma questão de gosto.

<A HREF= “pagina.html”><IMG SRC=”imagem.gif/jpg”></A><A HREF= “pagina.html”><IMG SRC=”imagem.gif/jpg” BORDER=0></A><A HREF= “pagina.html”><IMG SRC=”imagem.gif/jpg” BORDER=4></A><A HREF= “pagina.html”><IMG SRC=”imagem.gif/jpg” BORDER=10></A>

Criando links para seções de uma páginaPara dominar o uso do hipertexto, o programador em HTML deve conhecer bem o

funcionamento do comando <A> e dois de seus parâmetros da linguagem. Um é o<A HREF>, usado para criar o link em si, e outro é o <A NAME>, que cria âncoras ouendereços de seções de um documento, permitindo o seu endereçamento.

10

Criando uma ÂNCORAPara interligar partes de uma página, precisamos criar uma âncora no início de cada

seção que será referida por um link. Uma âncora é um ponto de referência ou endereço queserá acessado por um link. Uma âncora é usada dentro de um documento para marcar oinício de uma seção de documento. Essa âncora receberá um nome que será mencionadopelo link que o acessará.

< A NAME = “#nome da âncora”> texto opcional </A>

Criando o link para a âncoraPara criar um link para uma âncora devemos usar o comando <A HEF>

especificando o nome da âncora que deseja acessar e um texto que será convertido emhipertexto, indicando que ele conduz a algum objeto. O texto especificado mudará de cor eficará sublinhado para se destacar do resto do texto.

< A HREF = “#xxxxx”> texto usado com hipertexto</A>

O símbolo “#” avisa o browser para procurar o link no documento atual.

Ex: (digite este exemplo para fixar a criação e o uso de âncoras)

<html><head><title>Criando uma âncora e um link para acessá-la</title></head><body><center><font color=navy size=6>Âncoras e Links</font></center><p><hr><A HREF="#PowP">***Microsoft PowerPoint</A><br><A HREF="#Exce">***Microsoft Excel</A><br><A HREF="#Word">***Microsoft Word</A><br><p><hr><FONT COLOR=RED><A NAME="PowP">MS POWERPOINT</A></FONT><pre>

O PowerPoint é um pacote completo de ferramentas para criaçãode apresentações gráficas. Com ele, o usuário conseguirá produzir umaapresentação sofisticada em poucos minutos e sem a necessidade de serum "expert" no assunto.

Com o PowerPoint, você conseguirá agrupar gráficos, figuras,texto, organogramas e uma variedade de cores em seus trabalhos. Comgrande facilidade poderá criar:

11

** Apresentações eletrônicas** Slides** Folhetos** Anotações** Tópicos</pre><FONT COLOR=RED><A NAME="Exce">MS EXCEL</A></FONT><pre>

Planilha eletrônica é um programa de computador que consiste numacoleção de fileiras e colunas que são expostas na tela em uma janela. Ocruzamento de cada fileira e coluna é chamado de célula. Uma célula podeconter um número, um caracter de texto ou uma fórmula que executa um cálculousando uma ou mais células.</pre><FONT COLOR=RED><A NAME="word">MS WORD</A></FONT><pre>

Aqui você irá explicar curiosidades sobre o editor de texto<b>WORD</b>.

Editor muito conhecido entre os fanáticos em microinformática.</pre></body></html>

12

LISTASAssim como os cabeçalhos, que separam partes do texto, outra forma de estruturar

um documento HTML é a utilização de listas. As listas podem funcionar como um sumário,um menu ou um resumo de conteúdo do documento e são excelentes para serem usadascomo ponto de partida ao acesso de outras partes de um documento.

COMANDO < UL > ... </UL>Para criar uma lista não ordenada (Unordered List), você deve usar um conjunto de

comandos cuja sintaxe é mostrada a seguir. O comando deve envolver o primeiro e o últimoitem da lista. Cada item da lista deve ser precedido do comando < LI > (Line Item).

<UL><LI> texto do item<LI> texto do item n....

</UL>

COMANDO < OL > ... </OL>Para criar uma lista ordenada (Ordered List), você deve usar um conjunto de

comandos cuja sintaxe é mostrada a seguir. O comando deve envolver o primeiro e o últimoitem da lista. Cada item da lista deve ser precedido do comando < LI > (Line Item).

<OL><LI> texto do item<LI> texto do item n...

</OL>

Ex: (digite este exemplo para fixar o uso de Listas)

<html><head><title>Criando listas com os comandos UL e OL</title></head><body bgcolor=navy text = white><h2><b>Exemplo de listas não ordenadas</b></h2><ul><li>Primeiro item da lista<li>Segundo item da lista<li>Terceiro item da lista</ul><hr><h2><b>Exemplo de listas </b></h2><ol><li>Primeiro item da lista<li>Segundo item da lista<li>Terceiro item da lista</ol><hr></body></html>

13

Listas aninhadasPodemos aninhar diversas listas, ou seja, colocar uma lista dentro da outra , para

criar estruturas hierárquicas, podendo inclusive mesclar listas ordenadas e não ordenadas.

Ex: #1

<html><head><title>Listas não ordenadas aninhadas</title></head><body bgcolor="#00FFFF"><b> listas não ordenadas aninhadas</b><ul><li>Este é o primeiro item da lista principal<li>Este é o segundo item da lista principal

<ul><li>Este é o primeiro sub-item do segundo item da lista principal<li>Este é o segundo sub-item do segundo item da lista principal<li>Este é o terceiro sub-item do segundo item da lista principal

<ul><li>Este é o terceiro item, um sub-item de um sub-item<li>Continuamos no terceiro item</ul>

<li> Não se perca, este é o quarto subitem do segundo item da lista principal</ul>

<li>Este é o terceiro item</ul></body></html>

Ex: #2 (mude o comando <ul> e </ul> do exercício anterior para <ol> e </ol> e veja o queacontece)

<html><head><title>Listas ordenadas aninhadas</title></head><body bgcolor="#00FFFF"><b> listas ordenadas aninhadas</b><ol><li>Este é o primeiro item da lista principal<li>Este é o segundo item da lista principal

<ol><li>Este é o primeiro sub-item do segundo item da lista principal<li>Este é o segundo sub-item do segundo item da lista principal<li>Este é o terceiro sub-item do segundo item da lista principal

<ol><li>Este é o terceiro item, um sub-item de um sub-item<li>Continuamos no terceiro item</ol>

<li> Não se perca, este é o quarto subitem do segundo item da lista principal</ol>

<li>Este é o terceiro item</ol></body></html>

14

Ex: #3 (mude o terceiro comando <ol> e </ol> por <ul> e </ul> e veja o que acontece)

<html><head><title>Listas ordenadas aninhadas</title></head><body bgcolor="#00FFFF"><b> listas ordenadas aninhadas</b><ol><li>Este é o primeiro item da lista principal<li>Este é o segundo item da lista principal

<ol><li>Este é o primeiro sub-item do segundo item da lista principal<li>Este é o segundo sub-item do segundo item da lista principal<li>Este é o terceiro sub-item do segundo item da lista principal

<ul><li>Este é o terceiro item, um sub-item de um sub-item<li>Continuamos no terceiro item</ul>

<li> Não se perca, este é o quarto subitem do segundo item da lista principal</ol>

<li>Este é o terceiro item</ol></body></html>

Alterando numeração e marcadoresAté agora vimos como criar listas ordenadas e não ordenadas usando os marcadores

e numeração padrão dos comandos <OL> e <UL>. Agora veremos como alterar ascaracterísticas básicas das listas, como a numeração e os marcadores.

Trabalhando com listas não numeradasA opção TYPE= do comando <UL> permite que sejam especificadas variações para

o marcador utilizado na lista. Os valores possíveis de se atribuir a TYPE são: SQUARE,CIRCLE e DISC.

Trabalhando com listas numeradasAs listas numeradas possibilitam maiores oportunidades de modificações. Seu

padrão é sempre iniciar a lista pelo número 1. Podemos mudar o número inicial e o tipo denumeração da lista usando o parâmetro TYPE e o parâmetro START.

Os valores permitidos para TYPE são:

Type = 1 - cria uma lista numérica normalType = A - cria uma lista alfabética com letras maiúsculas começando pelo AType = a - cria uma lista alfabética com letras minúsculas começando pelo aType = I - cria uma lista numérica com números romanos (maiúsculos)Type = i - cria uma lista numérica com números romanos (minúsculos)

15

Além do parâmetro TYPE, podemos mudar o número inicial da lista utilizando oparâmetro START, que deve ser sucedido pelo sinal de igualdade e o número inicial dalista.

Ex: START = 12

Ex: (digite este exemplo para fixar os comandos)

<html><head><title>Listas numeradas e não numeradas</title></head><body>Lista com type=1 e start=25<OL start=25><li>Primeiro item<li>Segundo item<li>Terceiro item<li>Quarto item</OL><p>Lista com type=A e start=5<OL type=A start=5><li>Primeiro item<li>Segundo item<li>Terceiro item<li>Quarto item</OL><p>Lista com type=a e start=13<OL type=a start=13><li>Primeiro item<li>Segundo item<li>Terceiro item<li>Quarto item</OL><p>Lista com type=I e start=9<OL type=I start=9><li>Primeiro item<li>Segundo item<li>Terceiro item<li>Quarto item</OL><p>Lista com type=i e start=10<OL type=i start=10><li>Primeiro item<li>Segundo item<li>Terceiro item<li>Quarto item</OL><p></body></html>

16

TABELASO uso de tabelas melhora muito a aparência de uma página, pois permite o

alinhamento de textos e imagens, além de ordenar as informações de uma formapadronizada.

Uma tabela é criada pelo comando <TABLE> </TABLE> e consiste em linhas ecolunas. A interseção de uma linha com uma coluna é chamada de células.

As linhas de uma tabela são criadas pelo comando <TR></TR>.As células de umalinha são criadas pelo comando <TD></TD>.

Uma tabela é criada sem exibir bordas ao redor das células. Para que apareçam aslinhas das bordas é necessário usar um parâmetro chamado BORDER.Veja o exemplo:

Ex1: (digite este exemplo para fixar os comandos)

<html><head><title>Tabelas</title></head><body><table border><tr><td>linha 1 - coluna 1</td><td>Linha 1 - coluna 2</td><td>Linha 1 - coluna 3</td></tr><tr><td>linha 2 - coluna 1</td><td>Linha 2 - coluna 2</td><td>Linha 2 - coluna 3</td></tr></body></html>

TAG TAG Finalidade<TABLE> </TABLE> Cria a estrutura básica da tabela

sem linhas e colunas<TABLE BORDER> </TABLE> Cria a estrutura básica da tabela

com bordas<TR> </TR> Cria uma linha dentro da tabela

<TD> </TD> Define uma célula dentro de umalinha

<TH> </TH> Cria uma célula de título com otexto centralizado e em negrito

<CAPTION> </CAPTION> Cria um título para a tabela acimadela

COMANDO <TABLE>... </TABLE>Define a estrutura de uma tabela bidimensional.

<TABLE BORDER=”.....”CELLSPACING=”……”

17

CELLPADDING=”…..”WIDTH=”…..” >

BORDER= “número” – especifica a largura da linha das bordas que separam as células databela.

CELLSPACING=”número” – especifica o espaçamento em pixels entre as células.

CELLPADDING=”número”- especifica o espaçamento entre o conteúdo e a borda dacélula.

WIDTH=”número | número%”- especifica a largura da tabela em pixels ou empercentagem.

ALIGN=left | center | right – define o alinhamento da tabela na página.

BGCOLOR=cor – especifica a cor de fundo de toda a tabela.

FRAME – Ainda não é compatível com todos os browsers e indica quais lados da tabeladevem ter as bordas visíveis.

RULES – não é compatível com todos os browsers e especifica as bordas entre os gruposde células.

COMANDO <TR>... </TR> (Table Row)Define uma linha da tabela. Para cada linha de uma tabela, deve ser especificado um

par deste comando, onde, dentro deles, devem ser especificados o comando <TD> paracriar as células de dados daquela linha.

<TR ALIGN=”......”VALIGN=“......”> </TR>

ALIGN=left | center | right | justify – especifica o alinhamento horizontal do conteúdo dacélula.

VALIGN=top | middle | bottom | baseline – especifica o alinhamento vertical do conteúdoda célula.


BORDERCOLOR=cor – define a cor da borda da célula.

18

COMANDO <TD>... </TD> ( Table Data)Define o conteúdo de uma célula da linha de uma planilha.

<TD ALIGN=”.....”VALIGN=”…..”NOWRAPCOLSPAN=”…..”ROWSPAN=”…..”WIDTH=”…..”> caracteres </TD>

ALIGN=left | center | right |– especifica o alinhamento horizontal do conteúdo da célula.

VALIGN=top | middle | bottom | baseline – especifica o alinhamento vertical do conteúdoda célula.

NOWRAP – indica para não quebrar a linha dentro da célula.

COLSPAN=”número” – indica o número de colunas que esta célula deverá ocupar.

ROWSPAN=”número” – indica o número de linhas que esta célula deverá ocupar.

WIDTH=”número”| “número%” – especifica a largura da tabela em pixels ou empercentagem relativa à largura da janela.


BORDERCOLOR=cor – define a cor da borda da célula.

Ex2: (digite este exemplo para fixar os comandos)

<html><head><title> Usando tabelas </title></head><body bgcolor=teal><center><table>

<td> linha 1 - coluna 1 </td></table><h4> Exemplo1 - uma tabela simples sem borda </h4><hr>

<table border=20><td> linha 1 - coluna 1 </td>

</table><h4> Exemplo2 - uma tabela simples com borda </h4><hr>

<table><tr>

<td> linha 1 - coluna 1 </td>

19

<td> linha 1 - coluna 2 </td><td> linha 1 - coluna 3 </td>

</tr><tr>

<td> linha 2 - coluna 1 </td><td> linha 2 - coluna 2 </td><td> linha 2 - coluna 3 </td>

</tr></table><h4> Exemplo3 - uma tabela de 2 linhas e três colunas sem borda </h4><hr>

<table border=05><tr>


</tr><tr>


</tr></table><h4> Exemplo4 - uma tabela de 2 linhas e três colunas com borda </h4><hr></body></html>

Usando bordas ao redor de imagensExibir uma imagem com borda causa um efeito interessante destacando-a do resto

da página.

Ex3: (digite este exemplo para fixar o comando)

<html><head><title>Imagem com borda</title></head><body><table border=15><tr><td>

<img src= "coloque aqui uma imagem.gif" ></td></tr></table><hr><table border=5><tr><td>

<img src= "coloque aqui uma imagem.gif"></td></tr></table></body></html>

20

Expandindo uma célula pelas colunas e linhas

Parâmetro COLSPANEste parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido

podemos ter um certo número de colunas.Digite o exemplo abaixo e observe.

Ex4:

<html><head><title>Expandindo uma célula pelas colunas e linhas</title></head><body bgcolor=navy text=white><table border><tr>

<td> Linha1 coluna1 </td><td align=center colspan=2> linha1 coluna2 </td><td> linha1 coluna4 </td>

</tr><tr>

<td> Linha2 coluna1 </td><td> linha2 coluna2 </td><td> linha2 coluna3 </td><td> linha2 coluna4 </td>

</tr><tr>


</tr></table><hr><pre>Se uma célula for expandida para uma largura maior do que o total de colunas, a última célulaserá deslocada.</pre><table border><tr>

<td> Linha1 coluna1 </td><td align=center colspan=3> linha1 coluna2 e 3 </td><td> linha1 coluna4 </td>

</tr><tr>


</tr><tr>


</tr></table></body></html>

21

Parâmetro ROWSPANMas se quisermos definir uma única célula ocupando uma coluna inteira, usaremos

o parâmetro ROWSPAN. Digite o exemplo abaixo e observe.

Ex5:

<html><head><title>Usando o parametro Rowspan</title></head><body><TABLE BORDER=2><TR><TD ROWSPAN=3>Exemplo do uso do ROWSPAN</TD><TD>CÉLULA 1</TD></TR><TR><TD>CÉLULA 2</TD></TR><TR><TD>CÉLULA 3</TD></TR></TABLE></body></html>

ATENÇÃO: Para melhor utilizar estes parâmetros e ver como eles funcionam você devefazer a sua própria tabela, pois somente desta forma você conseguirá fixar o uso destesparâmetros.

Usando Títulos de colunas

COMANDO <TH>...</TH>Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a

tag <TH> e a tag <TD> é que a <TH> exibe o conteúdo da célula em negrito. Digite osexemplos abaixo.

Ex6:

<html><head><title>Colocando Títulos de colunas</title></head><body bgcolor=red text=white><table border><tr>

<th>Título1</th><th>Título2</th><th>Título3</th>

</tr>

22

<tr><td> Linha1 coluna1 </td><td> linha1 coluna2 </td><td> linha1 coluna3 </td>

</tr><tr>

<td> Linha3 coluna1 </td><td> linha3 coluna2 </td><td> linha3 coluna3 </td>


Colocando Legendas

COMANDO <CAPTION>...</CAPTION>Esta tag exibe um texto centralizado em relação à tabela, como se fosse uma

legenda.

Ex7:

<html><head><title>Colocando Legendas</title></head><body bgcolor=yellow text=navy><table border><caption align=top>

Legenda com alinhamento TOP</caption><tr>

<td> ITEM A </td><td> ITEM B </td><td> ITEM C </td><td> ITEM D </td>

</TR><tr>

<td> ITEM E </td><td> ITEM F </td><td> ITEM G </td><td> ITEM H </td>

</TR></TABLE><P><P><TABLE BORDER><caption align=bottom>

Legenda com alinhamento BOTTOM</caption><TR>

<td> ITEM A </td><td> ITEM B </td>

23

<td> ITEM C </td><td ALIGN=CENTER> ------ </td>

</tr><TR>

<td ALIGN=RIGHT> ------ </td><td> ITEM F </td><td> ITEM G </td><td> ITEM H </td>

</tr><TR>

<td> ITEM I </td><td> ------ </td><td> ITEM K </td><TD> ITEM L </TD>


Espaçamento de células

PARÂMETRO CELLPADDING e CELLSPACINGUm efeito muito interessante é causado pelas opções CELLPADDING e

CELLSPACING. São usados juntamente com a opção BORDER, pois eles afetamdiretamente a aparência devido ao afastamento do texto ou das células entre si. (vejadefinição na pág. 16).

Ex8: Digite o exemplo e observe.

<html><head><title>Utilizando CELLPADING e CELLSPACING</title></head><body><table border cellpadding=10 cellspacing=0bgcolor=yellow>

<caption align=top> cellpadding = 10,cellspacing=0 e cor na tabela</caption><tr>

<td>Bolo</td><td>Sorvete</td><td>Torta</td>

</tr><tr><td>Balas</td><td>Panqueca</td><td>Chiclete</td>

</tr></table><P><table border=05 cellpadding=0 cellspacing=20><caption align=bottom> cellpadding = 0 ecellspacing=20</caption>

<tr><td>Chocolate</td>

24

<td>.Napolitano</td><td>.Palmito</td>

</tr><tr><td>….Kids…</td><td>Morango</td><td>Menta</td>

</tr></table><P><table border cellpadding=15 cellspacing=05align=right>

<caption align=bottom> cellpadding = 15,cellspacing=05 e cor na célula</caption>

<tr><td bgcolor=green>verde</td><td>.branca</td><td bgcolor=cyan>cyan</td>

</tr><tr><td bgcolor=teal>teal</td><td bgcolor=yellow>amarelo</td><td bgcolor=orange>laranja</td>

</tr></table><P></body></html>

Alinhamento de imagens e incluindo legendasPodemos alinhar diversas imagens lado a lado em uma mesma linha. Há vários

métodos, mas no nosso caso:- criaremos uma tabela- colocaremos as imagens dentro de cada célula- utilizaremos os parâmetros CELLPADDING e CELLSPACING- incluiremos legendas nas imagens (nesta última opção use o comando <BR>

antecedendo o texto da legenda.

Veja o exemplo.

Ex 9: (substitua a imagem “fish.jpg” por uma outra imagem)

<html><head><title>Tabela com imagens </title></head><body><table border=4><tr>

<td><img src="fish.jpg"></td><td><img src="fish.jpg"></td><td><img src="fish.jpg"></td>

</tr></table><p><p><center><table><tr>

25


</tr></table></center><p><p><hr><h4>Imagens separadas por cellppading=10</h4><table cellpadding=10 ><tr>


</tr></table><p><hr><center><h4>Imagens separadas por cellppading=20 e com legenda para cada imagem</h4><table cellpadding=10 ><tr>

<td><img src="fish.jpg"><br>peixe 1</td><td><img src="fish.jpg"><br>peixe 2</td><td><img src="fish.jpg"><br>peixe 3</td>

</tr></table></center><p><hr><center><h4>Imagens separadas por cellppading=10 e com legenda maior que a imagem</h4><table cellpadding=10 ><tr>

<td><img src="fish.jpg"><br>peixe 1</td><td><img src="fish.jpg"><br>Veja o que ocorre quando a legenda é maior que a imagem </td><td><img src="fish.jpg"><br>peixe 3</td>

</tr></table></center></body></html>

26

Usando imagens de fundo em tabelasAlém de aplicar uma cor de fundo na tabela, o Internet Explorer permite o uso de

imagens de fundo, da mesma forma que é usado em uma página inteira. Utilize a opçãoBACKGROUND = “código da cor” ao comando TABLE

Ex 10: (substitua a imagem “fish.jpg” por uma outra imagem)

<html><head><title>Tabelas com imagens de fundo</title></head><body>

<table background="fish.jpg" border=5 ><caption> a imagem no fundo</caption><tr><td><font size=6 color=white>linha1</td><td><font size=6 color=white>linha1</td><td><font size=6 color=white>linha1</td><td><font size=6 color=white>linha1</td></tr><tr><td><font size=6 color=white>linha2</td><td><font size=6 color=white>linha2</td><td><font size=6 color=white>linha2</td><td><font size=6 color=white>linha2</td></tr><tr><td><font size=6 color=white>linha3</td><td><font size=6 color=white>linha3</td><td><font size=6 color=white>linha3</td><td><font size=6 color=white>linha3</td></tr></table></body></html>

27

Relação de Cores#FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4

Antiquewhite Aqua Aquamarine Azure Beige Bisque

#000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887Black Blanchedalmond Blue Blueviolet Brown Burlywood

#5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DCCadetblue Chatreuse Chocolate Coral Cornflowerblue Cornsilk

#DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9Crimson Cyan Darkblue Darkcyan Darkgoldenrod Darkgray

#006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CCDarkgreen Darkkhaki Darkmagenta Darkolivegreen Darkorange Darkorchid

#8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1Darkred Darksalmon Darkseagreen Darklateblue Darklategray Darkturquoise

#9400d3 #ff1493 #00bfff #696969 #1e90ff #b22222Darkviolet Deeppink Deepskyblue Dimgray Dodgerblue Firebrick

#FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700Floralwhite Forestgreen Fuchsia Gainsboro Ghostwhite Gold

#DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4Goldenrod Gray Green Greenyellow Honeydew hotpink

#CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5Indianred Indigo Ivory Khaki Lavander Lavanderblush

#7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2Lawngreen Lemonchiffon Lightblue Lightcoral Lightcyan Lightgoldenrodyellow

#90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFALightgreen Lightgray Lightpink Lightsalmon Lightseagreen Lightskyblue

#BOC4DE #3FFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FFLightteelblue Lightyellow Lime Limegreen Linen Magenta

#800000 #66CDAA #0000CD #BA55D3 #9370DB #3CB371

28

Maroon Mediumaquamarine Mediumblue Mediumorchid Mediumpurple Mediumseagreen

#7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFAMediumslateblue Mediumspringreen Mediumturquoise Mediumvioletred Midnightblue Mintcream

#FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000Mistyrose Moccasin Navajowhite Navy Oldlace Olive

#6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98Olivedrab Orange Orangered Orchid Paleogoldenrod Palegreen

#AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CBPaleturquoise Palevioletred Papayawhip Peachpuff Peru Pink

#DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1Plum Powderblue Purple Red Rsybrown Royalblue

#8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522DSaddlebrown Salmon Sandybrown Seagreen Seashell Sienna

#C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7FSilver Skyblue Slateblue Slategray Snow Springgreen

#4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0Steelblue Tan Teal Thistle Tomato Turquoise

#EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32Violet Wheat White Whitesmoke Yellow Yellowgreen

29

FORMULÁRIOSUm recurso muito interessante é a criação de formulários eletrônicos, onde o

usuário poderá interagir com o servidor enviando dados que serão processados no servidore posteriormente devolvidos ao cliente.

Nesta etapa apenas criaremos um formulário usando recursos do HTML. Porém,para que o formulário funcione é necessário que no lado do servidor exista um programa,escrito em uma linguagem de programação que será o responsável pelo recebimento eprocessamento dos formulários.

Os comandos relacionados com formulários são:

<FORM> .... </FORM><INPUT><SELECT> …. </SELECT><OPTION><TEXTAREA> .... </TESTAREA>

Definindo um formulárioCOMANDO <FORM>…</FORM>

Usado para definir um formulário assim como o comando <TABLE></TABLE>.

Definindo os campos de um formulárioCOMANDO <INPUT>

Define um campo de entrada onde o usuário digita as informações do formulário.Cada campo de um formulário atribui o seu conteúdo para uma variável que possui nome etipo específico.

Os parâmetros do comando <INPUT> são:

TYPE=”TEXT” - aceita dados do tipo caractere.TYPE=”PASSWORD” - aceita dados do tipo caractere.TYPE=”CHECKBOX” - aceita campos do tipo sim/não.TYPE=”RADIO” - Mostra várias opções e aceita uma delas.TYPE=”SUBMIT” - cria um botão que envia, ao ser pressionado, o conteúdo doformulário.TYPE=”RESET” - cria um botão que, ao ser pressionado, apaga o conteúdo de todos oscampos.

NAME=”......” - nome da variável que receberá o conteúdo do campo.

30

VALUE=”......” - para os campos “TEXT” ou “PASSWORD”, representa o valor padrãodo campo.

para campos CHECKBOX ou RADIO, representa o valor que seráenviado se não for especificado outro.

para campos do tipo SUBMIT ou RESET, indica a etiqueta (label) queaparece no botão.

SIZE=”tamanho”- “tamanho”é o número que representa a quantidade de caracteresexibidos em campos do tipo TEXT ou PASSWORD.

MAXLENGTH= “comprimento” – “comprimento”é um valor que define o número decaracteres permitidos para variáveis do tipo TEXT ou PASSWORD.

Ex1: (digite o exercício abaixo para fixação dos comandos)

<html><head><title>Formulários</title></head><body><h2> O comando TEXT </h2><form>Código.....: <input type="text" name="cod"> Usando tamanho "default" de janela - 20 caracteres<p>Nome do aluno....: <input type="text" name="nom_alu" size=10 maxlength=25> Tamanho da janela = 10 edo texto = 25<p>Estado civil.....: <input type="text" name="est_civ" value="S" maxlength=1> Conteúdo predefinido<p><p><H2>O comando INPUT PASSWORD</h2><p>Digite a senha: <input type="password" name="senha" size=5 maxlenght=5><p><p><H2>O comando INPUT RADIO</h2><p>Estado civil:

<input type="radio" name="botao" value="solteiro" checked> Solteiro<input type="radio" name="botao" value="casado"> Casado<input type="radio" name="botao" value="divorciado"> Divorciado<input type="radio" name="botao" value="viúvo"> Viúvo

<p><p><H2>O comando INPUT CHECKBOX</h2><p><STRONG>Documentos apresentados:</strong><br><ol><li> <input type="checkbox" name="teste" value="1">Carteira de trabalho<li> <input type="checkbox" name="teste" value="2">CIC<li> <input type="checkbox" name="teste" value="3">RG</ol><p><p><H2>O comando INPUT SUBMIT</h2><p><input type="submit" value="OK"> ou<input type="submit" value="Enviar"><p><p>

31

<H2>O comando INPUT RESET</h2><p><input type="reset" value="Limpar campos"></form></body></html>

COMANDO <SELECT>…</SELECT>Este comando define e exibe uma lista de itens que podem ser selecionados pelo

usuário. Um ou mais itens podem ser selecionados, cada item deve ser especificado pormeio do parâmetro <OPTION>

NAME=”textstring” – “textstring” deve ser substituído pelo nome da variável que receberáo conteúdo do campo

SIZE=”tamanho” – neste parâmetro opcional, “tamanho” é um número que representa aquantidade de itens que será exibida de uma vez pela lista.

MULTIPLE – permite que diversos itens sejam selecionados, com o auxílio da tecla CTRL

Ex2:

<html><head><title>formulários : comando SELECT</title></head><body><form>Doce predileto:<select name="doce"><option> Brigadeiro<option selected> Cocada<option> Sorvete<option> Suspiro<option> Bala</select><p>Viagem dos sonhos:<select name="viag" mutiple size= 7><option> MIAMI<option> EUROPA<option> HAWAI<option> CANCUN<option> ILHAS FUJI<option selected> ALASCA<option> CUBA</select><p>Grupo musical:<select name="grupo" size=3><option> N'Sync<option> BackStreetBoys<option> GreenDay

32

<option> ACDC<option> Jon Bon Jovi<option> Nirvana<option> Metálica</select></form></body></html>

COMANDO <TEXTAREA>…</TEXTAREA>Define uma caixa de digitação onde o usuário pode digitar livremente um texto.

NAME=”nome” – “nome” deve ser substituído pelo nome da variável que receberá oconteúdo do campo

ROWS=”num_lin” – “num_lin” é um número que especifica a altura, ou seja, a quantidadede linhas que a caixa deve ter.

COLS=”num_col” - “num_col” é um número que especifica a largura, ou seja, aquantidade de caracteres ou colunas que a caixa deve ter.

Ex3:

<html><head><title>formulário - comando TEXTAREA( caixa de livre digitação)</title></head><body bgcolor=yellow><form>Digite seus comentários: <br><textarea

name=comentrows=9cols=40>

</textarea><p>Digite mais alguma coisa aqui: <br><textarea

name=algo_maisrows=6>

</textarea><p>Digite seu endereço:<textarea

name=endrows=4cols=15>

Esta caixa possui conteúdo prévio</textarea></form></body></html>

33

Agora você já conhece todos os comandos para criar um formulário. Mas énecessário associar-se um programa como: ASP, PERL etc... responsáveis em interpretar osdados e executar ações.

Alinhando os campos de um formulário.Um problema que você pode enfrentar na criação de formulários é o fato de os

campos não ficarem alinhados naturalmente. Caso queira deixá-los alinhados, você deveráusar algumas técnicas simples.

Usando: Comando <PRE> e TabelasEx4:

<html><head><title>alinhando os campos de um formulário - comando PRE</title></head><body bgcolr=teal><FORM>Endereço:<input type="text" name="end" value="" size=30><br>Cidade:<input type="text" name="cid" value="" size=30><br><hr><PRE>Endereço:<input type="text" name="end" value="" size=30><br>Cidade :<input type="text" name="cid" value="" size=30></PRE><p><hr>

<B>Formulário alinhado em tabela com borda</b><table border=2><tr><td>Nome:</td><td><input type="text" name="nome" value="" size=30></td><td>Cargo:</td><td><input type="text" name="cargo" value="" size=25></td></tr><tr><td>Endereço:</td><td><input type="text" name="end" value="" size=40></td><td>Cidade:</td><td><input type="text" name="cid" value="" size=20></td></tr></table><p>

<B>Formulário alinhado em tabela sem borda</b><table border=0><tr><td>Nome:</td>

34

<td><input type="text" name="nome" value="" size=30></td><td>Cargo:</td><td><input type="text" name="cargo" value="" size=25></td></tr><tr><td>Endereço:</td><td><input type="text" name="end" value="" size=40></td><td>Cidade:</td><td><input type="text" name="cid" value="" size=20></td></tr></table><p>

<B>Formulário alinhado em tabela com borda e cor de fundo</b><table border=2 bgcolor=cyan><tr><td>Nome:</td><td><input type="text" name="nome" value="" size=30></td><td>Cargo:</td><td><input type="text" name="cargo" value="" size=25></td></tr><tr><td>Endereço:</td><td><input type="text" name="end" value="" size=40></td><td>Cidade:</td><td><input type="text" name="cid" value="" size=20></td></tr></table></FORM></body></html>

COMANDO <FIELDSET>…</FIELDSET>Este comando deixar os formulários mais atraentes. Ele envolve os campos com

uma moldura que pode receber um título e cria teclas de atalho para os campos.

COMANDO <LEGEND>…</LEGEND>É responsável pelo título das molduras. Deve estar no início do comando

FIELDSET e antes de outros comandos.

<LEGEND ACCESSKEY=caracterALIGN=”…..”> texto </LEGEND>

ACCESSKEY=caracter – letra que combinada com a tecla ALT, fará o cursor mover-se deuma moldura para a outra.

ALIGN=top | bottom | left | right – responsável pelo posicionamento do título na moldura.

35

Ex5:

<html><head><title>o uso de FIELDSET</title></head><body><form><fieldset>

<legend accesskey=I>Informações para contato</legend>

<table><tr><td>Nome : </td><td><input type="text" name=name ></td></tr><tr><td>E-mail : </td><td><input type="text" name=e-mail ></td></tr><tr><td>Endereço Postal : </td><td><textarea name=address rows=4 cols=40></textarea></td></tr></table></fieldset>

<fieldset><legend accesskey=C align=right>Cartão de Crédito </legend>

<p><input type="radio" name=card value=visa>Visa

<input type="radio" name=card value=mc>MasterCard<br>Número : <input type="text" name=number>

<br>Data de validade : <input type="text" size=7name=validade value="00/0000"></p></fieldset><p><input type="submit" value="Enviar"><input type="reset" value="Limpa formulário"></p></form></body></html>

36

COMANDO <MARQUEE>…</MARQUEE>Exibe um texto rolando em uma determinada posição da tela. Este comando não é

compatível com todos os browsers.

<MARQUEEBEHAVIOR=tipoBGCOLOR=corDIRECTION=direçãoHEIGHT=nWIDTH=nHSPACE=nVSPACE=nLOOP=n>

BEHAVIOR=scroll – inicia a rolagem introduzindo o texto de um lado e rola-o até que elesaia completamente da janela, no lado oposto. Após a última letra ter saído da tela, o textoreaparece.

slide – inicia a rolagem introduzindo o texto de um lado e rola-o até que eleatinja a borda oposta. Quando a primeira letra do texto encostar na borda, o texto pára derola e permenece naquela posição.

Alternate – cria um efeito de bate-e-volta para o texto.

BGCOLOR=cor – especifica a cor do marquee

DIRECTION=left | right – especifica a direção que o texto vai usar para o deslocamento.

HEIGHT=n – especifica a largura em pixels do painel, ou área do marquee.

WIDTH=n – especifica a altura em pixels do painel, ou área do marquee.

HSPACE=n – especifica a largura em pixels das margens esquerda e direita do marquee,para afastá-lo do texto ou outros objetos que o cercam

VSPACE=n – especifica, em pixels, as margens superior e inferior do marquee.

LOOP=n – especifica quantas vezes o marquee será executado.

Ex:

<html><head><title>Usando comando MARQUEE</title></head><body bgcolor=silver>

<marquee bgcolor=yellow

37

direction=rightheight=20width=50>Amarelo</marquee>

<br><br><marquee bgcolor=cyan

direction=leftheight=40width=100align=bottomhspace=9>CYAN</marquee>

usando o HSPACE<br><br>usando o VSPACE e o LOOP<marquee bgcolor=green

direction=rightvspace=20loop=2>VERDE </marquee>

<br><br><font size=10><marquee direction=left>PRETO</marquee></font><br><br><font color=red><marquee direction=right

behavior=slide><h1>VERMELHO</h1></marquee></font><br><br><font color=blue><marquee direction=right

behavior=alternate><h2>AZUL</h2></marquee></body></html>

38

E-MAIL

Enviando um E-MAILVocê pode acionar o programa padrão de e-mail diretamante de uma página HTML

usando uma variação do comando <A>, que usa a opção MAILTO no lugar da URL.

<A href= “MAILTO: ...........@……….com.br”> texto </A>

Ex1:

<html><head><title>Enviando e-mail</title></head><body><a href="mailto:[email protected]">Tire sua dúvida</a></body></html>

Preenchendo o campo Assunto ou SubjectVocê pode preencher automaticamente o campo Assunto ou Subject acrescentando

a variável “?SUBJECT=” seguida do texto que deseja exibir.

<A href= “MAILTO:[email protected]?SUBJECT=coloque aqui o assunto”> texto </A>

Enviando a mensagem para mais de um destinatárioSimplesmente coloque todos os endereços de e-mail separados por vírgula.

<A href= “MAILTO:[email protected] ,[email protected]?SUBJECT=coloque aqui o assunto”> texto </A>

Enviando uma cópia da mensagemPreencha o campo CC adicionando “&CC=” e o endereço do destinatário. Note que

o sinal de ? é substituído por &.

<A href= “MAILTO:[email protected] ,[email protected]?SUBJECT=coloque aqui o assunto”

&[email protected]> texto </A>

39

Criando um texto padrãoÉ possível colocar um texto padrão automático acrescentando “&BODY=” seguido

do texto.

<A href= “MAILTO:[email protected] ,[email protected]?SUBJECT=coloque aqui o assunto”

&CC= [email protected]&BODY= Texto padrão> texto </A>

Agora ponha em prática o que você aprendeu e mande um e-mail para um colegaseu.

40

FRAMESO recurso de frames (janelas) permite desenvolver páginas que podem ser

visualizadas simultaneamente na janela do browser.Sem o recurso de frames, para visualizar três páginas diferentes chamadas

A.HTML, B.HTML e C.HTML, o usuário precisa acessá-las individualmente por meio deuma página inicial que contivesse um menu ou através da especificação de sua URL.

O uso de frames requer um planejamento prévio, que consiste na criação daestrutura das janelas, onde você irá especificar a quantidade de frames, a disposição queelas terão na tela, a largura e a altura de cada frame, assim como o conteúdo que seráexibido em cada um deles. Trabalhar com frames exige duas etapas. Na primeira você criao layout dos frames, na segunda, define o conteúdo que eles terão.

O frame DOCUMENTO uso de frames exige a criação de um documento HTML especial que contém

todas as definições dos frames. Você pode considerá-lo como um documento mestre. Estedocumento diferencia dos demais documentos HTML, pois ele não usa os comandos<BODY> e </BODY>. Em seu lugar é usado o comando <FRAMESET></FRAMESET>.Dentro deste par de comandos são especificados todos os atributos dos frames que serãocriados. O FRAMESET define as características gerais dos frames, como sua quantidade edisposição horizontal e vertical. Cada frame especificado precisará de um outro comandochamado <FRAME> para definir suas características individuais e, principalmente, o seuconteúdo.

COMANDO <FRAMESET>…</FRAMESET><FRAMESET

COLS=tamanhoFRAMEBORDER=1/0FRAMESPACING=spacingROWS=tamanho

</FRAMESET>

COLS=tamanho – usado para criar um documento com frames dispostos em colunas. Neledeverá ser especificada a largura de cada coluna do documento. Pode ser especificado umvalor padrão para todas as colunas ou tamanhos individuais. Os valores podem serespecificados em pixels, percentagem ou tamanho relativo.

Usando valores em pixels - <frameset cols = 100,300,200>Usando valores relativos - <frameset cols = *,*,* >Usando valores percentuais - <frameset cols = 25%,50%,25%>

41


Frame1.htm<html><head><title>Frames - cols</title></head><frameset cols=100,300,200>

<frame src=”Pri.htm”><frame src=”Seg.htm”><frame src=”Ter.htm”>

</frameset></html>

Pri.htm<html><head><title></title></head><body bgcolor=blue><h1> Este é o documento pri.html</h1><h2> Capítulo 1 </h2></body></html>

Seg.htm

<html><head><title></title></head><body bgcolor=yellow><h1> Este é o documento seg.html</h1><h2> Capítulo 2 </h2></body></html>

Ter.htm

<html><head><title></title></head><body bgcolor=green><h1> Este é o documento ter.html</h1><h2> Capítulo 3 </h2></body></html>

Altere a linha de comando da página frame.htm pelas opções :<frameset cols = *,*,*> e <frameset cols = 25% , 50% , 25%>e depois execute cada uma delas.

42

ROWS =tamanho – funciona da mesma forma que o atributo COLS, só que cria os frameshorizontalmente.


Frame2.htm<html><head><title>Frames - rows</title></head><frameset rows= * , * , *>

<frame src=”Pri.htm”><frame src=”Seg.htm”><frame src=”Ter.htm”>

</frameset></html>

Combinando ROWS e COLSPode-se combinar a criação de frames usando os dois atributos. Você pode criar

uma janela dividida em dois frames horizontais, onde o primeiro deles é dividido em duascolunas. Para que isso seja possível, basta aninhar conjuntos de comandos <FRAMESET>.


Frame3.htm<html><head><title>Frames - rows e cols</title></head><frameset rows= 50% , 50%>

<frameset cols= 50%, 50% ><frame src=”Pri.htm”><frame src=”Seg.htm”>

</frameset><frame src=”Ter.htm”>

</frameset></html>

43

FRAMESPACING=valor – tem como finalidade alterar o espaço entre os frames, dando aimpressão de que a borda foi aumentada. Contudo, ele apenas distancia um frame do outropela quantidade de pixel especificada.


Frame4.htm<html><head><title>Frames - framespacing</title></head><frameset rows= 50% , 50% framespacing=15>



</frameset></html>

FRAMEBORDER=1/0 – tem como finalidade eliminar as bordas dos frames. Comopadrão, ele está com o valor 1, que exibe a borda. Se for especificado o valor 0, as bordasserão omitidas.


Frame5.htm<html><head><title>Frames - frameborder</title></head><frameset rows= 50% , 50% frameborder = 0>



</frameset></html>

44

Personalizando os FRAMES

Enquanto o comando <FRAMESET> cria o layout geral dos frames, o comando<FRAME> é o responsável pela atribuição do conteúdo de cada frame e das característicasindividuais de cada um deles.

COMANDO <FRAME SRC><FRAME ALIGN=posição

FRAMEBORDER=1| 0MARGINHEIGHT=alturaMARGINWIDTH=larguraNAME=nomeSCROLLING=yes/noSRC=endereço>

ALIGN= posição – Ajusta o alinhamento do frame ou do texto. Os valores permitidos paraposição são os seguintes

TOP - texto ao redor do frame é alinhado pela parte superior do frameMIDDLE - texto ao redor do frame é alinhado pela meio do frameBOTTOM - texto ao redor do frame é alinhado pela parte inferior do frameLEFT - frame é alinhado à esquerda, deixando o texto posicionado no seu lado direitoRIGHT - frame é alinhado à direita, deixando o texto posicionado no seu lado esquerdo

FRAMEBORDER= 1| 0 – ativa ou desativa a exibição de borda para o frame atual

MARGINHEIGHT= altura – especifica a altura da margem superior e inferior do frame empixels

MARGINWIDTH= largura – especifica a largura das margens esquerda e direita do frameem pixels

NAME= nome – atribui um nome para o frame, de maneira que possa ser identificado elocalizado para carregar documentos

SCROLLING=yes | no – este atributo quando ajustado para o valor “no”, não permite que oframe tenha barra de rolagem quando a janela for redimensionada

NORESIZE – este atributo evita que o frame seja redimensionado pelo usuário.

SRC= endereço – endereço deve ser substituído pelo nome ou URL do documento que seráexibido no frame

45

Ajustando as margens internas do frameO desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar

o conteúdo da janela da sua borda.


Frame6.htm<html><head><title>Frames - ajustando margens</title></head><frameset rows= 50% , 50% >

<frameset cols= 50% , 50% ><frame src=”Pri.htm”><frame marginwidth=50 marginheight=50 src=”Seg.htm”>

</frameset><frame noresize src=”Ter.htm”>

</frameset></html>

Barras de rolagemComo padrão, os frames possuem a inclusão automática de barras de rolagem

quando suas dimensões ficam menores do que o conteúdo a ser exibido. Usamos ocomando SCROLLING para alterar esta característica.


Frame7.htm<html><head><title>Frames - barras de rolagem</title></head><frameset rows= 50% , 50% frameborder=0 >

<frameset cols= 20% , * ><frame scrolling=no src=”Pri.htm”><frame src=”Seg.htm”>

</frameset><frame noresize src=”Ter.htm”>

</frameset></html>

Note que você poderá redimensionar o frame arrastando sua borda. Quando o cursor éposicionado sobre a borda, ele muda de formato, faça um teste.

46

Interligação de framesAté agora você viu como criar um conjunto de frames para exibir documentos

independentes um do outro. Nosso projeto agora visa a criação de um manual eletrônicousando frames para mostrar um índice permanente na tela enquanto outra janela exibiria oconteúdo do capítulo selecionado. Para executar este projeto, é necessário que você aprendamais dois itens. O primeiro é a atribuição de um nome para o frame e o segundo é o comodirecionar o carregamento de um documento em uma janela específica.

Vamos fazer o exercício abaixo para melhor assimilação:

Frame8.htm<html><head><title>Frames - menu</title></head><frameset cols= 30% , * >

<frame name=”menu” src=”itens.htm”><frame name=”textos” src=”vazio.htm”>

</frameset></html>

itens.htm<html><head><title>Menu Principal</title><BASE TARGET=”textos”></head>

47

<body bgcolor=white><center><h1>menu Principal</h1><ul>

<li> <a href=pri.htm> Primeiro</a><li> <a href=seg.htm> Segundo</a><li> <a href=ter.htm> Terceiro</a>

</ul></center></body></html>

vazio.htm<html><head></head><body bgcolor=gray></body></html>

48

IMAGENS MAPEADASMapas de imagens (ou image maps) são imagens gráficas (figuras, desenhos ou

fotografias) colocadas na página e que permitem acessar outros documentos por meio deum clique em uma região específica da imagem. Quando você usa uma imagem como umhyperlink por meio do comando <A HREF>, apenas um documento pode ser acessadoquando se clica na imagem. Usando o conceito de mapa de imagem, podemos mapear afigura e instruir o browser para que acesse diferentes documentos, dependendo da região daimagem que foi clicada.

Existem dois tipos de mapas de imagens. O primeiro é o server-side (lado doservidor) e, o segundo, o client-side (lado do cliente). O funcionamento de um mapa deimagem do tipo server-side ocorre da seguinte forma:

1. Quando o usuário clica na imagem, o browser envia uma solicitação ao servidorperguntando o endereço (URL) do documento que deve ser acessado e que estáassociado à área clicada.

2. O servidor envia o endereço de volta ao browser.3. O browser envia uma solicitação para o servidor abrir aquele documento.

Com mapas de imagens do tipo client-side , todo processo de mapeamento e todas asinformações para obtenção de endereços ocorre dentro do browser. Com isso temos avantagem de reduzir o tráfego entre o browser e o servidor. Além disso, o tipo client-sidepermite que documentos de outros protocolos que não o http possam ser acessados. Acriação de um mapa de imagem do tipo client-side (tipo de estudaremos neste tópico) podeser feita totalmente à mão ou utilizando um programa que faz boa parte do trabalho.Usaremos o programa MAP THIS que é do tipo FREEWARE e pode ser obtido através doendereço http://www.xoom.com/xoom/helpcenter/mapthis/mainmenu.

Criando o mapa de imagem com o MAP THISDepois de abrir o programa MAP THIS, ative a opção File/New. O programa exibe

uma mensagem informando que é necessário carregar uma imagem. Pressione o botão OKe carregue a imagem ............... .gif.

http://www.xoom.com/xoom/helpcenter/mapthis/mainmenu

49

Vejamos agora alguns dos botões da barra de botões

Botão Finalidade

O botão Rectangle é usado para criar áreas retangulares.

O botão Circle ou Oval é usado para criar áreas circulares.

O botão Polygon é usado para criar áreas poligonais compostas dediversos lados. Um polígono é criado posicionando-se o cursor emum dos pontos ou vértices da figura e clicando no botão esquerdo.Em seguida, o mouse deve ser movido para o próximo ponto e obotão esquerdo clicado novamente e assim sucessivamente até serclicado o último ponto, quando deve ser dado o clique duplo.

O botão Arrow ou Seta é usado para mover, editar e excluir áreas.O botão Edit Área (lápis) edita a URL da área .O botão Delete Área (X) apaga a área selecionada.

Com a figura de sua escolha, utilize os botões acima para marcar as áreas a seremtrabalhadas.

Associando uma URL à áreaDepois de ter criado as áreas, é necessário associar o endereço da página ou o

objeto que será acessado quando ela for clicada.A forma mais rápida de criar esta associação é clicar sobre a área desejada com o

botão direito do mouse depois de selecionar a ferramenta Arrow (seta) da barra de botões.Isso abrirá um menu instantâneo onde a primeira que deve ser selecionada é Edit Área Info.

Ela exibe uma caixa de diálogo onde deve ser informado o endereço completo daURL que está associada à imagem. Você deve informar o endereço completo da URLquando o documento estiver em outro servidor ou diretório.

50

Repetiremos esta operação para todas as imagens selecionadas, informando osrespectivos endereços.

Testando a imagemAntes de gravar o arquivo de mapa, é conveniente fazer um teste com ele.

Utilizando o último botão da barra de ferramentas, você aciona o teste da imagem.Ao clicar sobre ele, uma nova janela é exibida com a imagem mapeada. Posicione o cursorsobre as diversas áreas da imagem e perceba que, ao passar pelas áreas mapeadas, a URLque foi associada aparece na barra de status, no rodapé da página.

Outras operações

Para mudar o tamanho de um círculo ou retângulo, posicione o cursor sobre um dosgerenciadores de dimensão. O cursor muda de formato. Clique e arraste o cursor atéatingir o tamanho desejado e solte o botão do mouse.

Pra adicionar um ponto a um polígono, d6e um clique com o botão direito do mouse nalinha onde você deseja inserir um novo ponto. No menu instantâneo que aparece,selecione Add a Point.

Para eliminar um ponto de um polígono, clique com o botão direito do mouse sobre oponto e escolha Delete Point no menu instantâneo.

Para alterar a URL da área, use a ferramenta de seta e dê um clique duplo sobre a área.Na caixa de diálogo que aparecerá, altere a URL.

Para mover uma área, posicione o cursor sobre ela. Clique com o botão esquerdo domouse e arraste a área para a nova localização, liberando o botão do mouse em seguida.

Para eliminar uma área, aelecione-a e clique sobre o botão Delete Área, na barra debotões.

51

Salvando o mapa do client-sideAtive o menu File -> Save ou pressione o botão que possui a imagem de um

disquete. Aparecerá a caixa de diálogo para informar os dados mostrados na próximafigura.

Note que informamos o nome fora.htm como URL padrão e que o formato CSIMestá selecionado. Após pressionar o botão OK, o programa pedirá o nome do arquivoHTML que será criado.

52

Informamos o nome do arquivo HTML e marcamos o item em HTML na seção FileFormat .

<BODY><MAP NAME="mapa"><AREA SHAPE=RECT COORDS="66,19,157,170" HREF="peixe.htm" ALT="Abreo documento peixe.htm"><AREA SHAPE=default HREF="fora.htm"></MAP></BODY>

É gerado um programa HTML apenas com a área de definição do mapa. Para que oprograma funcione corretamente, é necessário completa-lo com alguns comandos, queserão exibidos em negrito na próxima listagem.

<html><head><title>fish22.htm</title></head><body bgcolor=”#FFFFFF”><BODY>

<IMG SRC=”fish.gif” USEMAP=”#mapa” BORDER=0><MAP NAME="mapa"><AREA SHAPE=RECT COORDS="66,19,157,170" HREF="peixe.htm" ALT="Abreo documento peixe.htm"><AREA SHAPE=default HREF="fora.htm"></MAP></BODY>

</body></html>

53

Além dos comandos <HTML></HTML>, o <IMG> é o mais importante. Ele indicaa imagem de fundo e, através do parâmetro USEMAP, indica o nome do mapa deimagem que será utilizado para aquela figura. Antes de testar efetivamente o programa,não podemos esquecer de criar os códigos que serão chamados pela figura (no nossoexemplo peixe.htm) e o programa que é executado quando se clica fora dela (fora.htm).

Crie seus mapas e bom trabalho.

54

COMO HOSPEDAR UM SITE NA INTERNETNesse tópico será mostrado em linhas gerais como é esse procedimento. O site já deverá

estar projetado e seus arquivos prontos no disco rígido do seu computador.

Você tem duas opções. Ou escolhe um serviço de hospedagem grátis ou um serviço dehospedagem pago. Os dois tem vantagens, desvantagens e limitações.

Se o seu site é pessoal, então a escolha da hospedagem grátis pode ser uma boa opçãoespecialmente porque é de graça! Para isso, você deve escolher um serviço de hospedagemgrátis, como http://www.geocities.com e http://www.xoom.com, só para citar os dois maisfamosos. A desvantagem do serviço grátis é que o seu site pode acabar tendo um endereçogigantesco e difícil de decorar e terá janelas abrindo exibindo anúncios inseridos peloserviço de hospedagem (aliás, é através destes anúncios que eles conseguem manter oserviço grátis). A solução para o nome gigantesco pode ser o uso do serviço deredirecionamento de endereços oferecido em http://www.cjb.net. Neste site você registragratuitamente um nome seunome.cjb.net e configura esse nome para carregar páginas queestejam hospedadas em um serviço de hospedagem grátis.

Muitos provedores de acesso pago oferecem espaço (tipicamente de 1 MB) para os seusclientes hospedarem o seu site pessoal. Essa é uma outra alternativa para hospedagemgrátis, mas a desvantagem é que, se você deixar de ser cliente do provedor (cancelar aassinatura, por exemplo), o seu site sai do ar.

Se você está pensando em ter um site comercial, então não tem jeito, a saída é ahospedagem paga. Os serviços de hospedagem paga oferecem muito mais recursos do quequalquer empresa de hospedagem grátis pode oferecer. Que confiaria em uma empresa cujosite está hospedado em um serviço de hospedagem grátis?

A principal vantagem do serviço de hospedagem pago é o registro de domínio, isto é,você pode ter um site com o nome do tipo www.seunome.com.br, coisa que nenhumserviço de hospedagem grátis oferece.

A maioria dos serviços de hospedagem atrai seus potenciais clientes mostrando ascaracterísticas e vantagens de seus planos de hospedagem, como o espaço disponível emdisco, o número de contas de e-mail (chamadas contas POP) e outros termos que não nosinteressa por enquanto.

Acontece que, infelizmente, a maioria dos serviços de hospedagem omite acaracterística mais importante de se saber, que é a largura de banda disponível em seusplanos de hospedagem. A maioria dos serviços oferece um limite de 2 GB por mês detransferências. Isto é, somando-se o tamanho de todos os arquivos que foram carregados deseu site em um mês, não pode dar mais do que 2 GB, ou você terá de pagar pelo excesso douso da largura de banda.

Esse limite de 2 GB é de bom tamanho para qualquer site pequeno, mas o seu "estouro"depende muito do tamanho dos arquivos de seu site. Se o seu site só contém páginas HTMLe arquivos GIF e JPG pequenos, então você não terá problemas. Mas imagine se vocêresolve colocar um arquivo grande para download – um MP3 de 6 MB, por exemplo(bastam 333 downloads desse arquivo para o limite de 2 GB ser atingido). Rapidamente oseu limite mensal será atingido, e o seu custo de hospedagem irá lá nas nuvens. Neste casovocê deve escolher um plano que dê uma franquia maior que 2 GB por mês.

http://www.geocities.com

http://www.xoom.com

http://www.cjb.net

http://www.seunome.com.br,

55

Por isso a recomendação de, ao criar um site, ter todos os arquivos os menores possíveise evitar colocar arquivos para download.

Registrando domínio

Se você está pensando em registrar um domínio para o seu site (www.seunome.com.brou www.seunome.com), o primeiro passo é saber se o nome que você quer usar já estáregistrado. Isso pode ser conferido rapidamente em http://registro.br (no caso de domíniosterminados em .br) e em http://www.networksolutions.com (no caso de domínios .com, .nete .org, sem a terminação .br).

Se o nome que você quer usar já existe, isto é, já está registrado para outra pessoa, émelhor que você pense em um outro endereço para o seu site.

Depois de escolher um nome que ainda não esteja registrado, você deve procurar porum serviço de hospedagem de páginas (pago).

Como a Internet é mundial, esse serviço não precisa ser contratado no Brasil. Diversaspessoas e empresas hospedam seus sites no exterior por causa do preço mais em conta(você pode obter uma lista completa de serviços de hospedagem no exterior emhttp://www.hostindex.com). Nesse caso, o pagamento do serviço pode ser feito através dedébito em cartão de crédito internacional ou através de uma ordem de pagamentointernacional. Essa segunda modalidade de pagamento só deve ser usada no caso depagamento de grandes valores, pois os bancos cobram, em média, uma taxa de US$ 50 peloserviço.

Contrate o plano de hospedagem que você julgar mais conveniente para o seu site einforme o nome do site que você pretende registrar, pois eles precisarão configurar amáquina onde o seu site estará hospedado para receber o domínio que você vai registrar.Após esta etapa, o serviço de hospedagem irá te dar quatro dados: nome do servidor deDNS primário, o endereço IP deste servidor, o nome do servidor de DNS secundário e oendereço IP deste servidor. Somente com essas informações em mãos é que vocêconseguirá registrar o seu domínio.

Em seguida, vá até http://registro.br (caso você queira um domínio com a extensão .br)ou http://www.networksolutions.com (caso você queira um endereço .com, .net ou .org sema terminação .br) e registre o seu domínio. O procedimento é mais ou menos auto-explicativo e você não encontrará muitas dificuldades. O sistema irá lhe perguntar dadoscomo nome, endereço, etc, e as informações de configuração do servidor, que são aquelasdadas pelo serviço de hospedagem. É importante notar que em geral as configurações feitaspelo serviço de hospedagem normalmente demoram 24 horas para serem replicadas pelaInternet. Então, se ao tentar fazer o registro o sistema der um erro de "servidordesconhecido", tente registrar o seu domínio novamente no dia seguinte.

O registro de domínio tem um custo de R$ 70, para domínios registrados na Fapesp(pago através de boleto bancário), ou de US$ 70, para domínios registrados na NetworkSolutions (pago através de cartão de crédito internacional). Esses valores são pagosanualmente, sendo que a renovação do registro do domínio custa mais barato. Um detalhe

http://www.seunome.com),

http://registro.br

http://www.networksolutions.com

http://www.hostindex.com

http://registro.br

http://www.networksolutions.com

56

importante: domínios do tipo .com.br só podem ser registrados em nome de empresas(pessoas jurídicas).

A partir do momento em que você contratar o serviço de hospedagem, você já podesubir as suas páginas HTML (as páginas de seu site) para o servidor, mesmo antes doregistro do domínio. Esse procedimento facilita, pois o seu site estará no ar assim que oendereço for validado pela entidade responsável (Fapesp ou Network Solutions).

Para enviar os arquivos do seu site para o servidor de hospedagem, você deve usar umprograma de FTP, como o Cute FTP (pode ser baixado em www.shareware.com). Vocêdeve entrar o nome do servidor, o login e a senha. Esses dados são fornecidos pelo serviçode hospedagem no mesmo e-mail que ele envia informando a configuração dos servidores.

http://www.shareware.com).

curso de html

Documents