Curso de HTML by Michel Santos

Colégio “São José”

Curso TĂŠcnico

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 de texto, este arquivo pode conter imagens, sons, animações e até mesmo vídeo. A página pode conter links (ligações) para outras páginas armazenadas no seu micro ou em qualquer lugar da Web. Para que o conteúdo de um documento HTML seja exibido na internet devemos usar um programa chamado Browser (navegador). Existem vários programas disponíveis no 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 do windows). Contudo, a forma mais prática e produtiva de escrever uma página Web é usar um editor HTML. Tags ou comandos HTML Os 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 HTML Para que um browser interprete corretamente o programa, ele deve possuir alguns comandos básicos que sempre deverão estar presentes.(Alguns browser até dispensam o uso) Um programa HTML possui 3 partes básicas: Estrutura

<html>

cabeçalho

corpo

<body>

</body> </html>

Principais elementos de uma página. Título : texto que aparece na barra de título do browser Imagem : são figuras, desenhos e fotos usados para ilustrar a página Texto : informação mais comum dentro da página Link : é um texto que aparece destacado do restante do texto, normalmente sublinhado e com outra cor . Ao clicar sobre o link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da internet Cabeç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 aparecer individualmente 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 textos Assim 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á a formatação. Os principais comandos são : COMANDO

Negrito Itálico Sublinhado Strong Typewriter Big Small Sobrescrito Subscrito Pulsante

SINTAXE

<B>texto</B> <I>texto</I> <U>texto</U> <strong>texto</strong> <TT>texto</TT> <big>texto</big> <small>texto</small> <sup>texto<sup> <sub>texto<sub> <blink>texto<blink>

FUNÇÃO

Aplica o estilo texto Aplica o estilo itálico Aplica um sublinhado Similar ao negrito Deixa o texto com espaçamento regular Aumenta a fonte e aplica negrito Reduz e altera a fonte Eleva o texto e diminui seu corpo Rebaixa o texto e diminui seu corpo Faz com que o texto pisque

Cabeçalhos Outra 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 branco antes 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 elementos Como 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 da página, deve ser usado o comando: <CENTER> texto </CENTER> Alterando o tamanho da fonte Um 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. <FONT SIZE=n FACE=nome COLOR=cor> texto </FONT> SIZE – especifica o tamanho da fonte utilizada. Os valores vão de 1, o menor, até 7, o maior. O padrão é o 3. FACE – permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas várias fontes, de maneira que se o sistema não possuir a primeira opção, a segunda é carregada e assim por diante. <FONT FACE=”verdana, arial” SIZE=1> COLOR – especifica a cor do texto. Cor

Código

Aqua Black Fuchsia Green Brown

#70DB93 #000000 #FF00FF #00FF00 #800000

Cor Blue Cyan Gray Lime Navy

Código #0000FF #00FFFF #C0C0C0 #32CD32 #23238E

Olive Silver White

#808000 #E6E8FA #FFFFFF

Red Teal Yellow

#FF0000 #008080 #FFFF00

Exibição de textos pré-formatados Através do comando <PRE> podemos incluir um texto que foi editado por um editor de textos e preservar sua formatação original. <PRE> texto texto texto....</PRE> Cores e padrões de fundo A 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. Usaremos o comando <BODY> para colocar mais cor à página. Os browsers oferecem até 256 cores para serem usadas como cor de fundo ou de texto. 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 ). <BODY BGCOLOR=cor TEXT=cor LINK=cor VLINK=cor> BGCOLOR – cor de fundo TEXT – cor do texto LINK – cor do texto do link VLINK – cor do link que já foi visitado

IMAGENS Incluir 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 aceitos pelos browsers, você pode utilizar programas de conversão e tratamento de imagens como o PaintShop 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. <IMG SRC=”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 seu caminho completo. ALT=”texto”- exibe o texto quando o browser não encontra a imagem, ou uma legenda quando 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 bordas laterais da janela.

URLs e LINKs Até 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 liga a outros por meio de ligações especiais chamadas HYPERLINKS. Criando um link com arquivos locais Fazer 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 o comando <A> de âncora. O comando pode marcar um texto ou uma imagem como hyperlink, assim como criar um endereço para uma seção de um documento que será referida por um link. <A

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

HREF=”url” – especifica o endereço da URL (Universal Resource Locator – localizador universal 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 imagem Vincular 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á uma nova página com a imagem referida) Usando uma imagem como hyperlink Podemos usar uma imagem como hyperlink envolvendo-a com o comando <A> </A>. Em vez de especificar um texto, usaremos o comando <IMG> para colocar a imagem.

<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 links Usar 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ágina Para 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 ou endereços de seções de um documento, permitindo o seu endereçamento.

Criando uma ÂNCORA Para 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 que será acessado por um link. Uma âncora é usada dentro de um documento para marcar o início de uma seção de documento. Essa âncora receberá um nome que será mencionado pelo link que o acessará. < A NAME = “#nome da âncora”> texto opcional </A> Criando o link para a âncora Para 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 em hipertexto, indicando que ele conduz a algum objeto. O texto especificado mudará de cor e ficará 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ção de apresentações gráficas. Com ele, o usuário conseguirá produzir uma apresentação sofisticada em poucos minutos e sem a necessidade de ser um "expert" no assunto. Com o PowerPoint, você conseguirá agrupar gráficos, figuras, texto, organogramas e uma variedade de cores em seus trabalhos. Com grande facilidade poderá criar:

** 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 numa coleção de fileiras e colunas que são expostas na tela em uma janela. O cruzamento de cada fileira e coluna é chamado de célula. Uma célula pode conter um número, um caracter de texto ou uma fórmula que executa um cálculo usando 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>

LISTAS Assim 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 usadas como 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 último item 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 último item 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>

Listas aninhadas Podemos 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 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 <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>

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 marcadores Até 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 as características básicas das listas, como a numeração e os marcadores. Trabalhando com listas não numeradas A 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 numeradas As 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 de numeração da lista usando o parâmetro TYPE e o parâmetro START. Os valores permitidos para TYPE são: Type = 1 Type = A Type = a Type = I Type = i

cria uma lista numérica normal cria uma lista alfabética com letras maiúsculas começando pelo A cria uma lista alfabética com letras minúsculas começando pelo a cria uma lista numérica com números romanos (maiúsculos) cria uma lista numérica com números romanos (minúsculos)

Além do parâmetro TYPE, podemos mudar o número inicial da lista utilizando o parâmetro START, que deve ser sucedido pelo sinal de igualdade e o número inicial da lista. 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>

TABELAS O 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 forma padronizada. Uma tabela é criada pelo comando <TABLE> </TABLE> e consiste em linhas e colunas. 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 uma linha são criadas pelo comando <TD></TD>. Uma tabela é criada sem exibir bordas ao redor das células. Para que apareçam as linhas 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

<TABLE>

</TABLE>

</TABLE>

</TR> </TD>

<TH>

</TH>

</CAPTION>

Finalidade Cria a estrutura básica da tabela sem linhas e colunas Cria a estrutura básica da tabela com bordas Cria uma linha dentro da tabela Define uma célula dentro de uma linha Cria uma célula de título com o texto centralizado e em negrito Cria um título para a tabela acima dela

COMANDO <TABLE>... </TABLE> Define a estrutura de uma tabela bidimensional. <TABLE BORDER=”.....” CELLSPACING=”……”

CELLPADDING=”…..” WIDTH=”…..” > BORDER= “número” – especifica a largura da linha das bordas que separam as células da tabela. 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 da célula. WIDTH=”número | número%”- especifica a largura da tabela em pixels ou em percentagem. 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 tabela devem ter as bordas visíveis. RULES – não é compatível com todos os browsers e especifica as bordas entre os grupos de 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> para criar as células de dados daquela linha. <TR ALIGN=”......” VALIGN=“......”>

</TR>

ALIGN=left | center | right | justify – especifica o alinhamento horizontal do conteúdo da célula. VALIGN=top | middle | bottom | baseline – especifica o alinhamento vertical do conteúdo da célula. BGCOLOR=cor – especifica a cor de fundo de toda a tabela. BORDERCOLOR=cor – define a cor da borda da célula.

COMANDO <TD>... </TD> ( Table Data) Define o conteúdo de uma célula da linha de uma planilha. <TD ALIGN=”.....” VALIGN=”…..” NOWRAP COLSPAN=”…..” 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údo da 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 em percentagem relativa à largura da janela. BGCOLOR=cor – especifica a cor de fundo de toda a tabela. 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>

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

Usando bordas ao redor de imagens Exibir 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>

Expandindo uma célula pelas colunas e linhas Parâmetro COLSPAN Este 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> <td> Linha3 coluna1 </td> <td> linha3 coluna2 </td> <td> linha3 coluna3 </td> <td> linha3 coluna4 </td> </tr> </table><hr><pre> Se uma célula for expandida para uma largura maior do que o total de colunas, a última célula será 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> <td> Linha2 coluna1 </td> <td> linha2 coluna2 </td> <td> linha2 coluna3 </td> <td> linha1 coluna4 </td> </tr> <tr> <td> Linha3 coluna1 </td> <td> linha3 coluna2 </td> <td> linha3 coluna3 </td> <td> linha3 coluna4 </td> </tr> </table></body></html>

Parâmetro ROWSPAN Mas 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ê deve fazer a sua própria tabela, pois somente desta forma você conseguirá fixar o uso destes parâ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 os exemplos 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>

<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> </tr> </table> </body> </html>

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>

Espaçamento de células PARÂMETRO CELLPADDING e CELLSPACING Um efeito muito interessante é causado pelas opções CELLPADDING e CELLSPACING. São usados juntamente com a opção BORDER, pois eles afetam diretamente a aparência devido ao afastamento do texto ou das células entre si. (veja definiçã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=0 bgcolor=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 e cellspacing=20</caption> <tr> <td>Chocolate</td>

<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=05 align=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 legendas Podemos 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>

<td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> </tr> </table> </center> <p><p> <hr> <h4>Imagens separadas por cellppading=10</h4> <table cellpadding=10 > <tr> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> </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>

Usando imagens de fundo em tabelas Alé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ção BACKGROUND = “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>

Relação de Cores #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 Antiquewhite Aqua Aquamarine Azure Beige Bisque #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 Black Blanchedalmond Blue Blueviolet Brown Burlywood #5F9EA0 #7FFF00 #D2691E #FF7F50 #6495ED #FFF8DC Cadetblue Chatreuse Chocolate Coral Cornflowerblue Cornsilk #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 Crimson Cyan Darkblue Darkcyan Darkgoldenrod Darkgray #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC Darkgreen Darkkhaki Darkmagenta Darkolivegreen Darkorange Darkorchid #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 Darkred Darksalmon Darkseagreen Darklateblue Darklategray Darkturquoise #9400d3 #ff1493 #00bfff #696969 #1e90ff #b22222 Darkviolet Deeppink Deepskyblue Dimgray Dodgerblue Firebrick #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 Floralwhite Forestgreen Fuchsia Gainsboro Ghostwhite Gold #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 Goldenrod Gray Green Greenyellow Honeydew hotpink #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 Indianred Indigo Ivory Khaki Lavander Lavanderblush #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 Lawngreen Lemonchiffon Lightblue Lightcoral Lightcyan Lightgoldenrodyellow #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA Lightgreen Lightgray Lightpink Lightsalmon Lightseagreen Lightskyblue #BOC4DE #3FFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF Lightteelblue Lightyellow Lime Limegreen Linen Magenta #800000

#66CDAA

#0000CD

#BA55D3

#9370DB

#3CB371

Maroon Mediumaquamarine Mediumblue Mediumorchid Mediumpurple Mediumseagreen #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA Mediumslateblue Mediumspringreen Mediumturquoise Mediumvioletred Midnightblue Mintcream #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 #808000 Mistyrose Moccasin Navajowhite Navy Oldlace Olive #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 Olivedrab Orange Orangered Orchid Paleogoldenrod Palegreen #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB Paleturquoise Palevioletred Papayawhip Peachpuff Peru Pink #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 Plum Powderblue Purple Red Rsybrown Royalblue #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D Saddlebrown Salmon Sandybrown Seagreen Seashell Sienna #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F Silver Skyblue Slateblue Slategray Snow Springgreen #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 Steelblue Tan Teal Thistle Tomato Turquoise #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 Violet Wheat White Whitesmoke Yellow Yellowgreen

FORMULÁRIOS Um 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 servidor e 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 e processamento dos formulários. Os comandos relacionados com formulários são: <FORM> .... </FORM> <INPUT> <SELECT> …. </SELECT> <OPTION> <TEXTAREA> .... </TESTAREA> Definindo um formulário COMANDO <FORM>…</FORM> Usado para definir um formulário assim como o comando <TABLE></TABLE>. Definindo os campos de um formulário COMANDO <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 e tipo 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 do formulário. TYPE=”RESET” - cria um botão que, ao ser pressionado, apaga o conteúdo de todos os campos. NAME=”......” - nome da variável que receberá o conteúdo do campo.

VALUE=”......” - para os campos “TEXT” ou “PASSWORD”, representa o valor padrão do 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) que aparece no botão. SIZE=”tamanho”- “tamanho”é o número que representa a quantidade de caracteres exibidos em campos do tipo TEXT ou PASSWORD. MAXLENGTH= “comprimento” – “comprimento”é um valor que define o número de caracteres 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 e do 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>

<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 por meio 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 a quantidade 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

<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á o conteúdo do campo ROWS=”num_lin” – “num_lin” é um número que especifica a altura, ou seja, a quantidade de linhas que a caixa deve ter. COLS=”num_col” - “num_col” é um número que especifica a largura, ou seja, a quantidade 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=coment rows=9 cols=40> </textarea> <p> Digite mais alguma coisa aqui: <br> <textarea name=algo_mais rows=6> </textarea> <p> Digite seu endereço: <textarea name=end rows=4 cols=15> Esta caixa possui conteúdo prévio </textarea> </form> </body> </html>

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 os dados 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 Tabelas Ex4: <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>

<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=caracter ALIGN=”…..”> texto </LEGEND> ACCESSKEY=caracter – letra que combinada com a tecla ALT, fará o cursor mover-se de uma moldura para a outra. ALIGN=top | bottom | left | right – responsável pelo posicionamento do título na moldura.

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=7 name=validade value="00/0000"> </p> </fieldset> <p> <input type="submit" value="Enviar"> <input type="reset" value="Limpa formulário"> </p> </form> </body> </html>

COMANDO <MARQUEE>…</MARQUEE> Exibe um texto rolando em uma determinada posição da tela. Este comando não é compatível com todos os browsers. <MARQUEE BEHAVIOR=tipo BGCOLOR=cor DIRECTION=direção HEIGHT=n WIDTH=n HSPACE=n VSPACE=n LOOP=n> BEHAVIOR=scroll – inicia a rolagem introduzindo o texto de um lado e rola-o até que ele saia completamente da janela, no lado oposto. Após a última letra ter saído da tela, o texto reaparece. slide – inicia a rolagem introduzindo o texto de um lado e rola-o até que ele atinja a borda oposta. Quando a primeira letra do texto encostar na borda, o texto pára de rola 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

direction=right height=20 width=50>Amarelo</marquee> <br><br> <marquee bgcolor=cyan direction=left height=40 width=100 align=bottom hspace=9>CYAN</marquee> usando o HSPACE <br><br> usando o VSPACE e o LOOP <marquee bgcolor=green direction=right vspace=20 loop=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>

E-MAIL Enviando um E-MAIL Você 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:..........@...........com.br">Tire sua dúvida</a> </body> </html>

Preenchendo o campo Assunto ou Subject Você pode preencher automaticamente o campo Assunto ou Subject acrescentando a variável “?SUBJECT=” seguida do texto que deseja exibir. <A href= “MAILTO:.........@.....com.br?SUBJECT=coloque aqui o assunto”> texto </A> Enviando a mensagem para mais de um destinatário Simplesmente coloque todos os endereços de e-mail separados por vírgula. <A href= “MAILTO:.........@.....com.br , .........@.....com.br?SUBJECT=coloque aqui o assunto”> texto </A> Enviando uma cópia da mensagem Preencha o campo CC adicionando “&CC=” e o endereço do destinatário. Note que o sinal de ? é substituído por &. <A href= “MAILTO:........@.....com.br , .........@.....com.br?SUBJECT=coloque aqui o assunto” &CC=..........@.....com.br> texto </A>

Criando um texto padrão É possível colocar um texto padrão automático acrescentando “&BODY=” seguido do texto. <A href= “MAILTO:........@.....com.br , .........@.....com.br?SUBJECT=coloque aqui o assunto” &CC= ..........@.....com.br&BODY= Texto padrão> texto </A> Agora ponha em prática o que você aprendeu e mande um e-mail para um colega seu.

FRAMES O 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 de uma 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 da estrutura das janelas, onde você irá especificar a quantidade de frames, a disposição que elas 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ê cria o layout dos frames, na segunda, define o conteúdo que eles terão. O frame DOCUMENT O 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. Este documento 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ão criados. O FRAMESET define as características gerais dos frames, como sua quantidade e disposição horizontal e vertical. Cada frame especificado precisará de um outro comando chamado <FRAME> para definir suas características individuais e, principalmente, o seu conteúdo. COMANDO <FRAMESET>…</FRAMESET> <FRAMESET COLS=tamanho FRAMEBORDER=1/0 FRAMESPACING=spacing ROWS=tamanho </FRAMESET>

COLS=tamanho – usado para criar um documento com frames dispostos em colunas. Nele deverá ser especificada a largura de cada coluna do documento. Pode ser especificado um valor padrão para todas as colunas ou tamanhos individuais. Os valores podem ser especificados 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%>

Ex1: (digite o exercício abaixo para fixação dos comandos) 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.

ROWS =tamanho – funciona da mesma forma que o atributo COLS, só que cria os frames horizontalmente. Ex2: (digite o exercício abaixo para fixação dos comandos) 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 COLS Pode-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 duas colunas. Para que isso seja possível, basta aninhar conjuntos de comandos <FRAMESET>. Ex3: (digite o exercício abaixo para fixação dos comandos) 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>

FRAMESPACING=valor – tem como finalidade alterar o espaço entre os frames, dando a impressão de que a borda foi aumentada. Contudo, ele apenas distancia um frame do outro pela quantidade de pixel especificada. Ex4: (digite o exercício abaixo para fixação dos comandos) Frame4.htm <html> <head><title>Frames - framespacing</title></head> <frameset rows= 50% , 50% framespacing=15> <frameset cols= 50%, 50% > <frame src=”Pri.htm”> <frame src=”Seg.htm”> </frameset> <frame src=”Ter.htm”> </frameset> </html>

FRAMEBORDER=1/0 – tem como finalidade eliminar as bordas dos frames. Como padrão, ele está com o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas serão omitidas. Ex5: (digite o exercício abaixo para fixação dos comandos) Frame5.htm <html> <head><title>Frames - frameborder</title></head> <frameset rows= 50% , 50% frameborder = 0> <frameset cols= 50%, 50% > <frame src=”Pri.htm”> <frame src=”Seg.htm”> </frameset> <frame src=”Ter.htm”> </frameset> </html>

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ísticas individuais de cada um deles. COMANDO <FRAME SRC> <FRAME ALIGN=posição FRAMEBORDER=1| 0 MARGINHEIGHT=altura MARGINWIDTH=largura NAME=nome SCROLLING=yes/no SRC=endereço> ALIGN= posição – Ajusta o alinhamento do frame ou do texto. Os valores permitidos para posição são os seguintes TOP - texto ao redor do frame é alinhado pela parte superior do frame MIDDLE - texto ao redor do frame é alinhado pela meio do frame BOTTOM - texto ao redor do frame é alinhado pela parte inferior do frame LEFT - frame é alinhado à esquerda, deixando o texto posicionado no seu lado direito RIGHT - 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 em pixels MARGINWIDTH= largura – especifica a largura das margens esquerda e direita do frame em pixels NAME= nome – atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos SCROLLING=yes | no – este atributo quando ajustado para o valor “no”, não permite que o frame 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

Ajustando as margens internas do frame O desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar o conteúdo da janela da sua borda. Ex6: (digite o exercício abaixo para fixação dos comandos) 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 rolagem Como 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 o comando SCROLLING para alterar esta característica. Ex7: (digite o exercício abaixo para fixação dos comandos) 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.

Interligação de frames Até 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ônico usando frames para mostrar um índice permanente na tela enquanto outra janela exibiria o conteúdo do capítulo selecionado. Para executar este projeto, é necessário que você aprenda mais dois itens. O primeiro é a atribuição de um nome para o frame e o segundo é o como direcionar 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>

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

IMAGENS MAPEADAS Mapas 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 de um clique em uma região específica da imagem. Quando você usa uma imagem como um hyperlink por meio do comando <A HREF>, apenas um documento pode ser acessado quando se clica na imagem. Usando o conceito de mapa de imagem, podemos mapear a figura e instruir o browser para que acesse diferentes documentos, dependendo da região da imagem que foi clicada. Existem dois tipos de mapas de imagens. O primeiro é o server-side (lado do servidor) e, o segundo, o client-side (lado do cliente). O funcionamento de um mapa de imagem do tipo server-side ocorre da seguinte forma: 1. Quando o usuário clica na imagem, o browser envia uma solicitação ao servidor perguntando 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 as informações para obtenção de endereços ocorre dentro do browser. Com isso temos a vantagem de reduzir o tráfego entre o browser e o servidor. Além disso, o tipo client-side permite que documentos de outros protocolos que não o http possam ser acessados. A criação de um mapa de imagem do tipo client-side (tipo de estudaremos neste tópico) pode ser 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 do endereço http://www.xoom.com/xoom/helpcenter/mapthis/mainmenu. Criando o mapa de imagem com o MAP THIS Depois 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 OK e carregue a imagem ............... .gif.

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 de diversos lados. Um polígono é criado posicionando-se o cursor em um 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 o botão esquerdo clicado novamente e assim sucessivamente até ser clicado 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 serem trabalhadas. Associando uma URL à área Depois 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 da URL que está associada à imagem. Você deve informar o endereço completo da URL quando o documento estiver em outro servidor ou diretório.

Repetiremos esta operação para todas as imagens selecionadas, informando os respectivos endereços. Testando a imagem Antes 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 cursor sobre as diversas áreas da imagem e perceba que, ao passar pelas áreas mapeadas, a URL que 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 dos gerenciadores 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 na linha 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 o ponto 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 do mouse 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 de botões.

Salvando o mapa do client-side Ative 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óxima figura.

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

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

<BODY> <MAP NAME="mapa">         <AREA SHAPE=RECT COORDS="66,19,157,170" HREF="peixe.htm" ALT="Abre o 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 o programa funcione corretamente, é necessário completa-lo com alguns comandos, que serã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="Abre o documento peixe.htm"> <AREA SHAPE=default HREF="fora.htm"> </MAP></BODY> </body> </html>

Além dos comandos <HTML></HTML>, o <IMG> é o mais importante. Ele indica a imagem de fundo e, através do parâmetro USEMAP, indica o nome do mapa de imagem 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 nosso exemplo peixe.htm) e o programa que é executado quando se clica fora dela (fora.htm). Crie seus mapas e bom trabalho.

COMO HOSPEDAR UM SITE NA INTERNET Nesse 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 de hospedagem 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ção especialmente porque é de graça! Para isso, você deve escolher um serviço de hospedagem grátis, como http://www.geocities.com e http://www.xoom.com, só para citar os dois mais famosos. A desvantagem do serviço grátis é que o seu site pode acabar tendo um endereço gigantesco e difícil de decorar e terá janelas abrindo exibindo anúncios inseridos pelo serviço de hospedagem (aliás, é através destes anúncios que eles conseguem manter o serviço grátis). A solução para o nome gigantesco pode ser o uso do serviço de redirecionamento de endereços oferecido em http://www.cjb.net. Neste site você registra gratuitamente um nome seunome.cjb.net e configura esse nome para carregar páginas que estejam hospedadas em um serviço de hospedagem grátis. Muitos provedores de acesso pago oferecem espaço (tipicamente de 1 MB) para os seus clientes hospedarem o seu site pessoal. Essa é uma outra alternativa para hospedagem grátis, mas a desvantagem é que, se você deixar de ser cliente do provedor (cancelar a assinatura, 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 é a hospedagem paga. Os serviços de hospedagem paga oferecem muito mais recursos do que qualquer empresa de hospedagem grátis pode oferecer. Que confiaria em uma empresa cujo site 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 nenhum serviço de hospedagem grátis oferece. A maioria dos serviços de hospedagem atrai seus potenciais clientes mostrando as características e vantagens de seus planos de hospedagem, como o espaço disponível em disco, o número de contas de e-mail (chamadas contas POP) e outros termos que não nos interessa por enquanto. Acontece que, infelizmente, a maioria dos serviços de hospedagem omite a característica mais importante de se saber, que é a largura de banda disponível em seus planos de hospedagem. A maioria dos serviços oferece um limite de 2 GB por mês de transferências. Isto é, somando-se o tamanho de todos os arquivos que foram carregados de seu site em um mês, não pode dar mais do que 2 GB, ou você terá de pagar pelo excesso do uso 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 HTML e 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 o seu limite mensal será atingido, e o seu custo de hospedagem irá lá nas nuvens. Neste caso você deve escolher um plano que dê uma franquia maior que 2 GB por mês.

Por isso a recomendação de, ao criar um site, ter todos os arquivos os menores possíveis e evitar colocar arquivos para download. Registrando domínio Se você está pensando em registrar um domínio para o seu site (www.seunome.com.br ou 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ínios terminados em .br) e em http://www.networksolutions.com (no caso de domínios .com, .net e .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 por um serviço de hospedagem de páginas (pago). Como a Internet é mundial, esse serviço não precisa ser contratado no Brasil. Diversas pessoas 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 em http://www.hostindex.com). Nesse caso, o pagamento do serviço pode ser feito através de débito em cartão de crédito internacional ou através de uma ordem de pagamento internacional. Essa segunda modalidade de pagamento só deve ser usada no caso de pagamento de grandes valores, pois os bancos cobram, em média, uma taxa de US$ 50 pelo serviço.

Contrate o plano de hospedagem que você julgar mais conveniente para o seu site e informe o nome do site que você pretende registrar, pois eles precisarão configurar a má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 de DNS primário, o endereço IP deste servidor, o nome do servidor de DNS secundário e o endereç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 sem a terminação .br) e registre o seu domínio. O procedimento é mais ou menos autoexplicativo e você não encontrará muitas dificuldades. O sistema irá lhe perguntar dados como nome, endereço, etc, e as informações de configuração do servidor, que são aquelas dadas pelo serviço de hospedagem. É importante notar que em geral as configurações feitas pelo serviço de hospedagem normalmente demoram 24 horas para serem replicadas pela Internet. Então, se ao tentar fazer o registro o sistema der um erro de "servidor desconhecido", 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 Network Solutions (pago através de cartão de crédito internacional). Esses valores são pagos anualmente, sendo que a renovação do registro do domínio custa mais barato. Um detalhe

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á pode subir as suas páginas HTML (as páginas de seu site) para o servidor, mesmo antes do registro do domínio. Esse procedimento facilita, pois o seu site estará no ar assim que o endereç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 um programa 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ço de hospedagem no mesmo e-mail que ele envia informando a configuração dos servidores.