HTML

WWW.ELETRONICACOLEGIAL.KIT.NET


1

1

ÍNDICE CONCEITO ......................................................................................................................................... 3

COMO CRIAR UM PÁGINA WEB............................................................................................................ 3 O QUE É HTML TAG.......................................................................................................................... 3 A ESTRUTURA DE UMA PÁGINA HTML................................................................................................. 4 OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTML ............................................................................. 4 ACENTUAÇÃO ................................................................................................................................... 5

FORMATAÇÃO .................................................................................................................................. 6 PARÁGRAFOS E QUEBRAS DE LINHAS.................................................................................................. 6

O comando <p>........................................................................................................................... 6

O comando <BR>........................................................................................................................ 7 FORMATAÇÃO DO TEXTO.................................................................................................................... 8

LISTAS ............................................................................................................................................. 10 O comando <UL> ...................................................................................................................... 10 O comando <OL>..................................................................................................................... 10

Listas aninhadas........................................................................................................................ 12 Listas não ordenadas aninhadas ............................................................................................... 12

Listas ordenadas Aninhadas ..................................................................................................... 12 LINK ................................................................................................................................................. 15

LIGANDO SEÇÕES DE UMA PÁGINA.................................................................................................... 15 Saiba como usar uma âncora.................................................................................................... 15 Criando o link para âncora......................................................................................................... 15

INTERLIGANDO ARQUIVOS LOCAIS..................................................................................................... 17 CONECTANDO ARQUIVOS DE OUTROS SERVIDORES ........................................................................... 18

IMAGENS ......................................................................................................................................... 20 O comando <IMG>.................................................................................................................... 20

IMAGENS EXTERNAS ........................................................................................................................ 21 TABELAS ......................................................................................................................................... 23

<TABLE> </TABLE> ................................................................................................................. 23 <TR> </TR> .............................................................................................................................. 23

<TD> </TD> .............................................................................................................................. 23 <TH> </TH> .............................................................................................................................. 23

<CAPTION> </CAPTION> ........................................................................................................ 23 BORDER................................................................................................................................... 23

ALIGN ....................................................................................................................................... 23 VALIGN..................................................................................................................................... 23 NOWARP .................................................................................................................................. 24

COLSPAN ................................................................................................................................. 24 ROWSPAN................................................................................................................................ 24


2

2

CELLSPACING ......................................................................................................................... 24 CELLSPADDING....................................................................................................................... 24

CRIANDO UMA TABELA SIMPLES........................................................................................................ 24 UMA TABELA SIMPLES DE 3 LINHAS POR 3 COLUNAS .......................................................................... 24 AMPLIANDO UMA CÉLULA PARA MAIS DE UMA COLUNA........................................................................ 24 EXPANDINDO UMA CÉLULA PARA MAIS DE UMA LINHA ......................................................................... 25 TÍTULOS DE COLUNAS...................................................................................................................... 25

Bordas....................................................................................................................................... 26 ONDE PUBLICAR ............................................................................................................................ 27

COMO COLOCAR SEU SITE NO AR ..................................................................................................... 27


3

3

CONCEITO

A linguagem de formatação das páginas Web A criação de uma home page na Internet é prática cada vez mais freqüente entre empresas que precisam divulgar sua imagem e seus produtos e entre pessoas que desejam compartilhar seus interesses som outras. Elaborar uma página é uma tarefa bem mais simples do que se imagina. Esta apostila mostrará os passos e os comandos de linguagem HTML necessário para criar uma página completa, com imagens, tabelas e links para outras páginas de rede.

Como criar um página Web Uma página da Web é composta de textos e comandos especiais (tags) de uma linguagem de programação chamada HTML, abreviação de Hiper Text Markup Language. Ela é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas, gerando documentos com o conceito de hipertexto. Assim como e qualquer outra linguagem, o programador deve escrever o código-fonte seguindo as regras de sintaxe. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos ou as tags para formatar e acessar recursos da Web. O código-fonte pode ser escrito usando o mais simples dos editores de texto. Até o programa Bloco de Notas (NotePad) do Windows pode ser usado. Contudo, a forma mais prática e produtiva para escrever uma página Web é usar um editor HTML.

O que é HTML tag Quando um browser exibe uma página Web, ele lê o texto da página e procura símbolos especiais denominados tags, que dizem como o texto ou a informação devem ser exibidos. Por exemplo: uma tag pode dizer que um texto deve ser mostrado em negrito, em itálico, com certo tipo de fonte etc. Além do aspecto físico d texto, uma tag pode indicar que um determinado trecho representa, na verdade, o endereço de outras páginas, que devem ser acessadas no caso de o texto ser clicado. As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. Contudo, exibem várias tags individuais. As tags são identificadas por ser envolvidas pelos sinais "< >" ou "</>" Entre os sinais "< >" são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando a barra de divisão "/”, indicando que a tag está finalizando a marcação de um texto. O formato genérico de uma tag é: <nome da tag> texto </nome da tag>. Veja, a seguir, alguns comandos e o efeito que eles causam no browser: <b> Este texto está em negrito</b> enquanto esta <i> palavra </i> está em itálico <h3> este comando gera um título de tamanho 3 </h3>.

Para quebrar uma linha, é necessário

um comando especial <br>, caso contrário as linhas são exibidas continuamente. As tags, daqui para frente serão chamadas de comandos.


4

4

A estrutura de uma página HTML

Assim como em outras linguagens, existem algumas estruturas básicas que identificam partes de um programa HTML. A próxima figura mostra os comandos básicos de uma página:

O comando <HTML> é usado em par com o comando </HTML>. Ele delimita a área dos comandos da linguagem

HTML. O par de comandos <HEAD> </HEAD> é usado para especificar algumas tags da linguagem. A mais importante delas serve para criar uma expressão que aparece na linha de título da janela do browser. O par de comandos <BODY> </BODY> deve ser usado para envolver todos os comandos da página.

Os principais elementos de uma página HTML Um página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links - este último responsável pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem.

Título

Imagem

LinhaDivisória

Link


5

5

Acentuação Se você usa o Windows com as configurações de idioma e de teclado adequadas para o português, a visualização será normal. Contudo, a linguagem HTML possui códigos especiais para que uma letra acentuada seja visualizada do texto, optamos por usar a acentuação direta em favor da didática.


6

6

FORMATAÇÃO

Defina o layout do texto A primeira etapa para fazer o layout do texto é definir os cabeçalhos. São linhas do documento que aparecem com um tamanho de letra diferenciado do restante do texto com a finalidade de identificar o início de uma seção ou de um tópico. Existem seis tamanhos ou modelos de cabeçalho. O comando H tem a seguinte sintaxe: <Hn> Texto do cabeçalho </Hn> No caso "n" deve ser substituído por um número de 1 a 6. O maior cabeçalho é especificado com o comando H1 e o menor, com o comando H6.

Observe o exemplo listado na próxima janela

O resultado dos comandos acima é visto nesta tela.

Existem outras formas de criar linhas de texto com tamanho e tipo de letra diferentes. Contudo, os comandos de cabeçalho são a forma mais rápida de conseguir este efeito.

Parágrafos e quebras de linhas De nada adianta você ter cabeçalhos se não tiver

um conteúdo que os siga. Nas páginas HTML, você pode digitar o texto exatamente no lugar onde deseja que ele apareça na tela, da mesma forma que faz com um editor comum.

O comando <p> A diferença principal entre a página HTML e o editor tradicional é que a página não reconhece o fim de um parágrafo quando se pressiona a tecla Enter. Você precisa forçar o fim do parágrafo e a quebra de linha usando comandos especiais. O comando responsável pela quebra de parágrafo é o <p>. Sua sintaxe é: <p> Veja o código fonte mostrado a seguir:


7

7

Além do comando <p>, que avança o texto para a próxima linha, você pode criar uma separação de blocos de texto usando o comando <HR> (horizontal rule), que insere uma linha divisória no local onde é especificado. Note que o comando <P> é obedecido e executado, independentemente de redimensionamento da janela

O comando <BR> O comando <P> insere uma linha em branco imediatamente após sua especificação. Em muitas situações, você precisa quebrar a linha e continuar o texto na linha seguinte. Nessa situação, o comando que deve ser utilizado é <BR> Sintaxe: <BR> Note a diferença causada pelos dois no texto:


8

8

Muito bem você já sabe como criar títulos e inserir texto na página HTML. Com isso, já poderia escrever documentos

da mesma forma que faz com o seu editor de texto. Vejamos, agora, como melhorar a aparência do texto.

Formatação do texto Assim com editor de texto, você pode criar uma série d efeitos no documento, modificando o tamanho ou o tipo da fonte. Todos os comando que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o início e o fim do trecho que sofrerá a formatação Os principais comandos de estilo de texto são:

Comando Sintaxe Função Negrito <B> texto </B> Aplica o estilo negrito Itálico <I> texto </I> Aplica o estilo Itálico Sublinhado <U> texto </U> Aplica o estilo Sublinhado (não funciona em alguns

browsers) Typerwriter <TT> texto </TT> Deixa o texto com espaçamento regular Big <BIG> texto </BIG> Aumenta a fonte a 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

Veja o código-fonte mostrado a seguir:


9

9

Observe na tela ao lado o efeito produzido por esses comandos.


10

10

LISTAS

Como organizar em seqüência de itens Assim como os cabeçalhos, outra forma de estruturar um documento HTML é utilização de listas. Estas podem funcionar como sumário, menu ou resumo do conteúdo e são excelentes como ponto de partida para acessar outras partes de um documento. Existem basicamente dois tipos de listas: as não-ordenadas, que encadeiam uma série de itens sem numerá-los; as ordenadas, que atribuem um número a cada elemento.

O comando <UL> Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada (Unordered List) é <UL>, que deve envolver o primeiro item da lista. Cada item deve ser especificado precedido pelo comando <LI> (Line Item). <UL> <LI> texto do item <LI> Texto do item n... </UL>

O comando <OL> Para criar uma lista ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista ordenada (Odered List) é <OL>, que deve envolver o primeiro e o último item da lista. Cada item, nesse caso, também deve ser precedido do comando <LI> (Line item) <OL> <LI> texto do item <LI> texto do item n.... </OL>


11

11

Veja o efeito desses comandos.


12

12

Listas aninhadas Você pode aninhar listas para criar estruturas hierárquicas. Também é possível misturar listas ordenadas e não ordenadas. Primeiramente, você vai ser como funcionar o aninhamento de listas não ordenadas.

Listas não ordenadas aninhadas Note que, para cada nível de lista, o browser mostra um marcador (símbolo) diferente para facilitar a visualização das páginas. Você deve prestar bastante atenção ao casar todos os comandos. Ou seja, todo comando <OL> aberto deve ser fechado por um comando </OL>. Se você esquecer um deles, a estrutura das listas ficará incorreta. Veja como fica o arquivo-fonte e também como será o resultado da página.

Listas ordenadas Aninhadas


13

13

Veja o resultado na tela a baixo.

A combinação dos tipos de lista é fácil.


14

14

Verifique como ficou a página


15

15

LINK

Aprenda a interligar os documentos Uma das principais atrações da Internet é a apresentação de documentos com o conceito de hipertext - ou seja, uma página que se liga a outras por meio de conexões especiais chamadas hiperlinks. Com esse conceito, você pode criar documentos que façam referências, não importando se estão em outra página da Web, no seu micro ou em qualquer servidor da rede. O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados mediante os links. Imagine que você cria um página sobre um determinado assunto no qual vários tópicos são abordados. Assim como um livro, você cria todo o texto do documento e depois o insere no início. Se quiser acessar diretamente o texto de um tópico, basta dar um clique no item do tópico no sumário e ele será imediatamente exibido. O grande atrativo da Internet e da Web é a possibilidade de trazer o mundo para a sua mesa ao clique de um mouse. Imagine que você está criando uma página com informações sobre um pintor famoso. Você pode acrescentar imagens na página (no tópico imagens veremos como fazer isso) e também criar links para que o leitor possa acessar outras páginas da Web com informações sobre o pintor Velásques, poderia definir um link para o site do Museo del Prado, que exibe várias obras desse mestre. Para exemplificar o uso de hipertexto, vamos mostrar alguns modelos que começam com a criação de hiperlinks, para diferentes partes de um documento, para outras páginas no diretório e micro do usuário e, finalmente, para qualquer lugar da Web.

Ligando seções de uma página Para dominar o uso do hipertexto, o programador HTML deve conhecer bem o funcionamento de dois comandos da linguagem: A NAME e AHREF.

Saiba como usar uma âncora Para interligar partes de uma página, você precisa criar um âncora no início de cada seção. Uma âncora é um ponto de referências ou endereço que será acessado por um link. É usada dentro de um documento para marcar o início de uma seção. A âncora recebe um nome que será mencionado pelo link que a acessará. O comando usado para criar uma âncora é: <a name =”#nome da ancora”> Texto para linkar </a> Como exemplo, poderíamos ter a linha mostrada a seguir: <a name=”#parte!”>Introdução</a>

Criando o link para âncora Para criar um link para uma âncora, você deve usar o comando A HREF, especificando o nome da âncora que deseja acessar a um texto que será convertido em hipertexto, indicando que ele remete a algum objeto. O texto especificado mudará de cor e ficará sublinhado para se destacar. Sintaxe: <a href=”# xxxx”> Texto usado como hipertexto </a> Em nosso caso, um exemplo poderia ser: <a href=”#parte1”>Introcução do produto</a> O símbolo “#” avisa o browser para procurar o link no documento atual.


16

16

Quando você clica no hipertexto, ele exibe a parte do documento que contém a âncora, colocando-a, sempre que

possível, no alto da tela. Veja o início do documento mostrado a seguir. Note que as três linhas do menu estão sublinhadas na cor azul. Se você clicar numa delas, a seção do documento linkada será exibida imediatamente. A próxima tela é mostrada se o item Introdução for clicado. Você perceberá que, após ser clicado, o hipertexto muda de cor. Normalmente, ele muda de azul para vermelho. Isso é um recurso automático da linguagem e serve para chamar a atenção para links que já foram acessados.


17

17

Interligando arquivos locais Fazer a ligação de um texto com uma página local é uma tarefa bastante simples. Você precisa apenas especificar o nome do arquivo que será chamado, com o comando A HREF. Veja no exemplo a seguir a linha do menu cujo título é Introdução ao hipertexto. Ela simplesmente indica o nome do arquivo “exemp06g.htm” como link. Você deve, obrigatoriamente, colocar a extensão do arquivo. <a href=”politequinho.htm”> Educação Infantil </a>

Aqui está a segunda linha desse menu: <a href=politequinho.htm”> Educação Infantil </a>


18

18

Conectando arquivos de outros servidores Agora a coisa fica um pouco mais séria. É aqui que está toda a graça da Internet. Com o uso de um esquema de endereçamento chamado URL, consegue-se acessar um arquivo localizado em qualquer servidor do planeta que esteja conectado adequadamente à Web. URL é a abreviação de Uniform Resource Locator e serve para especificar a localização de páginas e arquivos em diretórios de servidores da Web. Esse esquema é parecido com aquele que você usa para acessar um programa armazenado num diretório de sua máquina, ou seja, você tem de especificar o caminho (path) do arquivo para que ele seja encontrado. Na Web, você indica a URL do arquivo. Veja dois exemplos: Acessando um arquivo pelo DOS: C:\msoffice\word.exe Acessando uma página pela Web: http://www.xistipa.com/demo.html Uma URL é composta de duas partes principais. A primeira é o protocolo Internet do documento e a segunda é o endereçamento do servidor e da página. A sintaxe é: protocolo://servidor.arquivo Protocolo é o tipo de servidor que está sendo acessado, e servidor é o computador que contém a página. Arquivo pressupõe o caminho completo do arquivo. Por exemplo, para acessar a página do Ramalho, a URL da página é: http://www.ramalho.com.br/index.html Este endereço pode ser escrito na linha de URL do browser, para acessar diretamente a página:

Pode, também, ser indicado dentro de um documento HTML mediante o comando A HREF, que cria uma ligação ou link para a URL especificada. <A HREF+ “http://www.ramalho.com.br/index.htm” Home Page do Ramalho </a>


19

19

A seguir, mostraremos um exemplo no qual um hiperlink é criado para uma página que fornece informações mais detalhadas sobre a cidade de Toledo, na Espanha. A URL da página que será linkada é: http://www.docuweb.ca/sispain/politics/autonomo/mancha/capital.html Veja o código-fonte do arquivo em que a URL é especificada no comando A HREF.

Veja o resultado na página exibida pelo browser. Antes de carregar essa página, você deve estar conectado à Internet, pois o documento linkado está em outro servidor da rede.

Se você não estiver conectado, o browser exibirá uma mensagem de erro dizendo que não pode localizar o servidor especificado.

O domínio dos comandos A HREF e A NAME constitui a chave para criar documento Web. No próximo tópico, vamos abordar as técnicas básicas para a inserção de imagens em suas páginas.


20

20

IMAGENS

Como trabalhar com fotos e ilustrações Incluir uma imagem em sua página Web é tarefa bem fácil. Exige apenas que você tenha disponível a figura e que ela esteja num dos formatos aceitos pelo browser. O formato de arquivo gráfico padrão pela Web é o GIF. Outro formato que ainda não é considerado padrão mas que em breve deverá sê-lo, o JPEG (Joint Photographic Engineering Group), que reduz até dez vezes o tamanho de uma imagem. Os browsers Netscape e Internet Explorer trabalham com esses dois tipos de arquivo. Atenção: imagens em BMP do Windows não servem. Elas precisam ser convertidas para os formatos acima. Existem diversos programas que transformam arquivos gráficos BMP de vários outros formatos em GIF. Entre eles estão o shareware Paint Shop Pro, o Wingif e a maioria dos programas de edição de imagens, como Photoshop, Picture Publisher e Photostyle. Antes de inundar suas páginas de imagens, lembre-se de que, ao usar a rede, a velocidade de transmissão de ilustrações é muito reduzida, girando em torno de 1 KB por segundo. Dependendo do tráfego, ela cai para algumas dezenas de bytes por segundo. Portanto, uma imagem de 100 KB pode velar vários minutos para ser exibida, frustrando o internauta.

O comando <IMG> O comando HTML usado para inserir uma imagem na posição atual onde ele é especificado é: <IMG SRC=”NomeDoArquivo.gif”> ou <IMG SRC=”NomeDoArquivo.jpg”> Se você colocar uma imagem perto de um texto, poderá especificar seu alinhamento em relação ao texto que está a seu redor Como padrão, a imagem é alinhada colocando o seu fundo (parte inferior) na mesma linha do texto. Com a diretiva Align, você pode alinhar o texto pelo fundo (bottom), que é o padrão, pelo meio (middle) e por cima (top). <IMG ALIGN=”top” SRC=”image.gif”> <IMG ALIGN=”middle” SRC=”image.gif”> <IMG ALIGN=”bottom” SRC=”image.gif”> Analise o conteúdo do programa abaixo:

Veja o resultado que ele oferece:


21

21

Veja, também, a continuação da página:

Imagens externas Colocar figuras dentro da página (in-line) é muito interessante. Contudo, isso causa lentidão na carga da página, principalmente quando elas são muitas e de tamanho grande. Uma técnica muito útil é fazer um link para a página, usando o comando A HREF. Dessa forma, o leitor que desejar ver uma determinada foto clica na sua referência e não é onerado com o tempo da carga automática das figuras, como ocorre quando apenas o comando IMG é usado. Veja o programa exibido a seguir. Note que existe um comando novo na primeira linha. Trata-se de <center> </center>, que tem como objetivo centralizar na linha o texto envolvido. Esse comando também pode ser usado para um bloco de várias linhas. Todas serão centralizadas horizontalmente. Veja que o comando < A HREF> foi usado para especificar um link para uma imagem, Mundo.


22

22

Ao clicar na palavra MUndo, a imagem associada é exibida em seu tamanho natural numa janela do browser. Para voltar à janela anterior, clique no botão Back. Note que esta não é uma página HTML, mas apenas a figura em si. É claro que você poderia criar uma página colocando esta figura e um texto explicativo sobre ela.


23

23

TABELAS

Como mostrar informações em linhas e colunas O trabalho com tabelas parece difícil a princípio. Todavia, depois de conhecidos os comandos de formatação, a tarefa se torna bastante rápida e fácil. As tabelas têm uma estrutura parecida com a de uma planilha eletrônica: compõem-se de linhas e de colunas cujas interseções formas o que se chama de células. Uma célula pode conter um texto simples, um hipertexto ou até mesmo uma imagem. A seguir, vamos ver os comandos relativos a tabelas.

<TABLE> </TABLE> Uma tabela é criada com o par de comandos <TABLE> e </TABLE>. Entre eles, devem ser especificadas as tags responsáveis pela criação das linhas e células, títulos, bordas, ou seja, não aparecem as linhas horizontais e as verticais que separam as células. Para visualizar:

<TR> </TR> Abreviação de Table Row. Essas tags são usadas para criar uma linha da tabela. Se uma tabela tiver cinco linhas, deverão ser indicados cinco pares desses comandos.

<TD> </TD> Abreviação de Table Data. As tags TD são usadas para especificar o conteúdo de uma célula. Esses comandos são usados em pares para cada célula da linha. Devem ser usados entre os comandos <TR> </TR>. Ao contrário das planilhas, uma tabela não precisa ter todas as linhas com o mesmo número de células. A largura de uma coluna é definida pela largura da maior célula que faz parte da coluna. O conteúdo de uma célula é alinhado pela opção Align. Como padrão, o alinhamento horizontal do texto é feito à esquerda (align=left) e o alinhamento vertical, no meio da célula (Valign=middle).

<TH> </TH> Abreviação de Table Header. Esse par de comandos é usado para criar células da mesma forma que os comandos <TD> </TD> , só que o texto é exibido em negrito e centralizado.

<CAPTION> </CAPTION> Permite a criação de uma legenda para a tabela. A legenda é um texto externo que aparece antes ou depois da tabela. Esses comandos devem ser especificados após o comando Table, antes das tags TR. Uma legenda pode ser exibida no topo ou no pé da tabela dependendo do valor atribuído à opção Align, que pode ser Top ou Bottom. O padrão é Top. A Legenda sempre é centralizada horizontalmente. A seguir encontram-se as opções que podem ser usadas com os comandos descritos:

BORDER Esta opção pertence ao comando Table. Se for especificado sem nenhum valor, uma linha fina é criada em volta de todas as células. O valor ) é equivalente a não ter borda. Quanto maior o valor especificado, mais grossa é a borda. BORDER=<value>

ALIGN Esta opção aparece em diversos comandos HTML, não só os relativos a tabelas. Serve para centralizar o texto dentro da célula ou da linha. Dentro do comando Caption, pode assumir os valores Top e Bottom. Nos comandos TR, TH ou TD, pode assumir os valores Left, Center e Right.

VALIGN É equivalente ao comando Align só que funciona para alinhar o texto verticalmente na linha ou na célula. Os valores possíveis são Top, Middle, Bottom e Baseline. Middle é o padrão.


24

24

NOWARP Esta opção pode aparecer em qualquer célula da tabela e indica que o texto da célula não pode ser quebrado para se ajustar ao seu tamanho.

COLSPAN Esta opção pode aparecer em qualquer célula da tabela e especifica quantas colunas da tabela a célula deve ocupar. O valor padrão é 1.

ROWSPAN Esta opção funciona como a anterior, só que especifica quantas linhas para baixo, a célula deve ocupar. O valor padrão é 1.

CELLSPACING Esta opção é exclusiva do Netscape e define o espaçamento, em entre as células da tabela.

CELLSPADDING Esta opção é exclusiva do Netscape e define o espaçamento, em pixels entre as colunas e as linhas da tabela. Agora que você tem uma idéia dos comandos usados para criar tabelas, vamos ver alguns exemplos práticos.

Criando uma tabela simples A lógica de criação de uma tabela é a seguinte:

• use o comando <TABLE> para especificar que uma tabela está sendo criada. • use os comandos <TR>...</TR> para criar um alinha da tabela. • use os comandos <TD> .. </TD> para criar cada célula de uma linha. • use o comando </TABLE> para encerrar a tabela. • use opções para mudar a aparência da tabela

Uma tabela simples de 3 linhas por 3 colunas Este código gera a seguinte tabela:

Note que no comando Table existe a opção Border. Ela cria a

borda que envolve as células da tabela. Se você não a especificar, a tabela é montada normalmente, só que sem a borda.

Ampliando uma célula para mais de uma coluna


25

25

O exemplo acima mostra o uso da opção Colspan para aumentar o tamanho de uma célula e fazer com que ela ocupe colunas adjacentes. Note que o conteúdo desta célula está centralizado pelo comando Align=Center. Lembre-se de que esse não é um recurso exclusivo do Netscape. Veja o resultado:

Expandindo uma célula para mais de uma linha A opção Rowspan serve para aumentar o tamanho de uma célula e fazer com que ela ocupe colunas adjacentes. Note que o conteúdo desta célula está centralizado pelo comando Valign=Top. Veja o efeito desses comandos:

Títulos de colunas


26

26

Com o par de comandos <TH> (Title Heading), você pode especificar títulos para as colunas. Esses comandos funcionam da mesma forma que os <TD>, só que deixam o conteúdo da célula centralizado e em negrito. Veja o próximo exemplo.

Bordas A criação de bordas pode ser útil em várias tabelas, mas em muitos casos as bordas não são necessárias. Você viu até agora tabelas que usavam uma borda gerada pela adição da opção Border ao comando Table. O exemplo abaixo mostra duas tabelas nas quais são especificados os valores 10 4 15 para a borda, e outra na qual nenhuma borda foi especificada. Você pode criar uma tabela sem bordas para montar um menu em que as opções não fiquem unicamente na vertical, como ocorre quando se usa os comandos para a criação de listas.


27

27

ONDE PUBLICAR

Como colocar seu site no ar São vários os caminhos para colocar no ar um site da Word Wide Web. O mais direto é montar um servidor e conectá-lo com a Internet. É uma opção atraente para corporações que possuem ou pretenden ter uma intranet ou que planejam publicar um grande volume de informações na grande rede. Para pequenas empresas, pessoas físicas ou corporações que preferem terceirizar essa atividade, a opção é alugar espaço servidor de algum prestador de serviços. Algumas organizações possibilitam a publicação gratuita de páginas na Web. Brasil On Line, o serviço on-line do Grupo Abril, por exemplo, oferece gratuitamente uma área de 50 Kb para cada um de seus assinantes. Informações podem ser obtidas no endereço http://www.uol.com.br/serviços/hp.html. A empresa Tecepe matém um espaço no qual cada companhia ou associação pode colocar um única p’gina HTML. O endereço é: http://www.tecepe.com.br/cgi-win/homepage.exe/coloca.html. O mais conecido serviço que possibilita a montagem gratuita de sites na Web é o Geocities. A empresa americana não cobra nada para manter sites pessoais em seus servidores. O serviço dá direito a 1Mb de espaço em disco para as páginas. Não há muitas restrições quanto ao conteúdo, mas se o usuário ficar muito tempo sem atualizar sua páginas pode ser convidado a se retirar. Para montar seu site gratuito no GeoCities, lei as instruções no endereço http://www.geocities.com/BHI/freehp.html. O geocities também abriga sites comerciais cobrando uma taxa a partir de 50 dólares por mês. As informações correspondentes estão na página htt://www.geocities.com/BHI/comm_info.html. A maioria dos provedores de acesso ofrece serviços pagos de armazenagem de sites.

HTML

Documents

Transcript of HTML