Home Page, Página HTML ou Página WEB

Transcrição

1 Colégio São José

2 Curso Técnico 2

3 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 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 cabeçalho <head> </head> corpo <body> </body>

4 4 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 SINTAXE FUNÇÃO Negrito <B>texto</B> Aplica o estilo texto Itálico <I>texto</I> Aplica o estilo itálico Sublinhado <U>texto</U> Aplica um sublinhado Strong <strong>texto</strong> Similar ao negrito Typewriter <TT>texto</TT> Deixa o texto com espaçamento regular Big <big>texto</big> Aumenta a fonte e aplica negrito Small <small>texto</small> Reduz e altera a fonte Sobrescrito <sup>texto<sup> Eleva o texto e diminui seu corpo Subscrito <sub>texto<sub> Rebaixa o texto e diminui seu corpo Pulsante <blink>texto<blink> Faz com que o texto pisque

5 5 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 Cor Código Aqua #70DB93 Blue #0000FF Black # Cyan #00FFFF Fuchsia #FF00FF Gray #C0C0C0 Green #00FF00 Lime #32CD32 Brown # Navy #23238E

6 6 Olive # Red #FF0000 Silver #E6E8FA Teal # White #FFFFFF Yellow #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

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

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

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

10 10 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) <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:

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

12 12 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> </UL> <LI> texto do item <LI> texto do item n... 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> </OL> <LI> texto do item <LI> texto do item n... Ex: (digite este exemplo para fixar o uso de Listas) <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>

13 13 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 <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> Ex: #2 (mude o comando <ul> e </ul> do exercício anterior para <ol> e </ol> e veja o que acontece) <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>

14 14 Ex: #3 (mude o terceiro comando <ol> e </ol> por <ul> e </ul> e veja o que acontece) <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> 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 - cria uma lista numérica normal Type = A - cria uma lista alfabética com letras maiúsculas começando pelo A Type = a - cria uma lista alfabética com letras minúsculas começando pelo a Type = 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 15 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) <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>

16 16 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) <head><title>tabelas</title></head> <body> <table border> <td>linha 1 - coluna 1</td> <td>linha 1 - coluna 2</td> <td>linha 1 - coluna 3</td> <td>linha 2 - coluna 1</td> <td>linha 2 - coluna 2</td> <td>linha 2 - coluna 3</td> </body> 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 uma linha <TH> </TH> Cria uma célula de título com o texto centralizado e em negrito <CAPTION> </CAPTION> Cria um título para a tabela acima dela COMANDO <TABLE>... </TABLE> Define a estrutura de uma tabela bidimensional. <TABLE BORDER=... CELLSPACING=

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

18 18 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) <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> <td> linha 1 - coluna 1 </td>

19 19 <td> linha 1 - coluna 2 </td> <td> linha 1 - coluna 3 </td> <td> linha 2 - coluna 1 </td> <td> linha 2 - coluna 2 </td> <td> linha 2 - coluna 3 </td> </table> <h4> Exemplo3 - uma tabela de 2 linhas e três colunas sem borda </h4> <hr> <table border=05> <td> linha 1 - coluna 1 </td> <td> linha 1 - coluna 2 </td> <td> linha 1 - coluna 3 </td> <td> linha 2 - coluna 1 </td> <td> linha 2 - coluna 2 </td> <td> linha 2 - coluna 3 </td> </table> <h4> Exemplo4 - uma tabela de 2 linhas e três colunas com borda </h4> <hr> </body> 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) <head><title>imagem com borda</title></head> <body> <table border=15> <td> <img src= "coloque aqui uma imagem.gif" > </td> </table><hr> <table border=5> <td> <img src= "coloque aqui uma imagem.gif"> </td> </table></body>

20 20 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: <head><title>expandindo uma célula pelas colunas e linhas</title></head> <body bgcolor=navy text=white> <table border> <td> Linha1 coluna1 </td> <td align=center colspan=2> linha1 coluna2 </td> <td> linha1 coluna4 </td> <td> Linha2 coluna1 </td> <td> linha2 coluna2 </td> <td> linha2 coluna3 </td> <td> linha2 coluna4 </td> <td> Linha3 coluna1 </td> <td> linha3 coluna2 </td> <td> linha3 coluna3 </td> <td> linha3 coluna4 </td> </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> <td> Linha1 coluna1 </td> <td align=center colspan=3> linha1 coluna2 e 3 </td> <td> linha1 coluna4 </td> <td> Linha2 coluna1 </td> <td> linha2 coluna2 </td> <td> linha2 coluna3 </td> <td> linha1 coluna4 </td> <td> Linha3 coluna1 </td> <td> linha3 coluna2 </td> <td> linha3 coluna3 </td> <td> linha3 coluna4 </td> </table></body>

21 21 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: <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> 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: <head> <title>colocando Títulos de colunas</title> </head> <body bgcolor=red text=white> <table border> <th>título1</th> <th>título2</th> <th>título3</th>

22 22 <td> Linha1 coluna1 </td> <td> linha1 coluna2 </td> <td> linha1 coluna3 </td> <td> Linha3 coluna1 </td> <td> linha3 coluna2 </td> <td> linha3 coluna3 </td> </table> </body> Colocando Legendas COMANDO <CAPTION>...</CAPTION> Esta tag exibe um texto centralizado em relação à tabela, como se fosse uma legenda. Ex7: <head><title>colocando Legendas</title> </head> <body bgcolor=yellow text=navy> <table border> <caption align=top> Legenda com alinhamento TOP </caption> <td> ITEM A </td> <td> ITEM B </td> <td> ITEM C </td> <td> ITEM D </td> </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 23 <td> ITEM C </td> <td ALIGN=CENTER> </td> <TR> <td ALIGN=RIGHT> </td> <td> ITEM F </td> <td> ITEM G </td> <td> ITEM H </td> <TR> <td> ITEM I </td> <td> </td> <td> ITEM K </td> <TD> ITEM L </TD> </table> </body> 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. <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> <td>bolo</td> <td>sorvete</td> <td>torta</td> <td>balas</td> <td>panqueca</td> <td>chiclete</td> </table> <P> <table border=05 cellpadding=0 cellspacing=20> <caption align=bottom> cellpadding = 0 e cellspacing=20</caption> <td>chocolate</td>

24 24 <td>.napolitano</td> <td>.palmito</td> <td>.kids </td> <td>morango</td> <td>menta</td> </table> <P> <table border cellpadding=15 cellspacing=05 align=right> <caption align=bottom> cellpadding = 15, cellspacing=05 e cor na célula</caption> <td bgcolor=green>verde</td> <td>.branca</td> <td bgcolor=cyan>cyan</td> <td bgcolor=teal>teal</td> <td bgcolor=yellow>amarelo</td> <td bgcolor=orange>laranja</td> </table> <P> </body> 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) <head><title>tabela com imagens </title></head> <body> <table border=4> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> </table><p><p> <center> <table>

25 <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> </table> </center> <p><p> <hr> <h4>imagens separadas por cellppading=10</h4> <table cellpadding=10 > <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> <td><img src="fish.jpg"></td> </table> <p><hr> <center> <h4>imagens separadas por cellppading=20 e com legenda para cada imagem</h4> <table cellpadding=10 > <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> </table></center> <p><hr> <center> <h4>imagens separadas por cellppading=10 e com legenda maior que a imagem</h4> <table cellpadding=10 > <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> </table> </center> </body> 25

26 26 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) <head> <title>tabelas com imagens de fundo</title></head> <body> <table background="fish.jpg" border=5 > <caption> a imagem no fundo</caption> <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> <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> <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> </table> </body>

27 27 Relação de Cores #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 Antiquewhite Aqua Aquamarine Azure Beige Bisque # #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 # #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 # #1e90ff #b22222 Darkviolet Deeppink Deepskyblue Dimgray Dodgerblue Firebrick #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 Floralwhite Forestgreen Fuchsia Gainsboro Ghostwhite Gold #DAA520 # # #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 # #66CDAA #0000CD #BA55D3 #9370DB #3CB371

28 28 Maroon Mediumaquamarine Mediumblue Mediumorchid Mediumpurple Mediumseagreen #7B68EE #00FA9A #48D1CC #C71585 # #F5FFFA Mediumslateblue Mediumspringreen Mediumturquoise Mediumvioletred Midnightblue Mintcream #FFE4E1 #FFE4B5 #FFDEAD # #FDF5E6 # 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 # #FF0000 #BC8F8F #4169E1 Plum Powderblue Purple Red Rsybrown Royalblue #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D Saddlebrown Salmon Sandybrown Seagreen Seashell Sienna #C0C0C0 #87CEEB #6A5ACD # #FFFAFA #00FF7F Silver Skyblue Slateblue Slategray Snow Springgreen #4682B4 #D2B48C # #D8BFD8 #FF6347 #40E0D0 Steelblue Tan Teal Thistle Tomato Turquoise #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 Violet Wheat White Whitesmoke Yellow Yellowgreen

Exibir mais