HTML

WWW.ELETRONICACOLEGIAL.KIT.
NET
NDICE
CONCEITO ......................................................................................................................................... 3
COMO CRIAR UM PGINA WEB............................................................................................................ 3
O QUE HTML TAG .......................................................................................................................... 3
A ESTRUTURA DE UMA PGINA HTML................................................................................................. 4
OS PRINCIPAIS ELEMENTOS DE UMA PGINA HTML ............................................................................. 4
ACENTUAO ................................................................................................................................... 5
FORMATAO .................................................................................................................................. 6
PARGRAFOS E QUEBRAS DE LINHAS .................................................................................................. 6
O comando <p>........................................................................................................................... 6
O comando <BR>........................................................................................................................ 7
FORMATAO DO TEXTO.................................................................................................................... 8
LISTAS ............................................................................................................................................. 10
O comando <UL> ...................................................................................................................... 10
O comando <OL> ..................................................................................................................... 10
Listas aninhadas........................................................................................................................ 12
Listas no ordenadas aninhadas ............................................................................................... 12
Listas ordenadas Aninhadas ..................................................................................................... 12
LINK ................................................................................................................................................. 15
LIGANDO SEES DE UMA PGINA .................................................................................................... 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
WWW.ELETRONICACOLEGIAL.KIT.NET
2
CELLSPACING ......................................................................................................................... 24
CELLSPADDING....................................................................................................................... 24
CRIANDO UMA TABELA SIMPLES ........................................................................................................ 24
UMA TABELA SIMPLES DE 3 LINHAS POR 3 COLUNAS .......................................................................... 24
AMPLIANDO UMA CLULA PARA MAIS DE UMA COLUNA ........................................................................ 24
EXPANDINDO UMA CLULA PARA MAIS DE UMA LINHA ......................................................................... 25
TTULOS DE COLUNAS ...................................................................................................................... 25
Bordas....................................................................................................................................... 26
ONDE PUBLICAR ............................................................................................................................ 27
COMO COLOCAR SEU SITE NO AR ..................................................................................................... 27
C ONCEITO
A linguagem de formatao das pginas Web
A criao de uma home page na Internet prtica cada vez mais freqente entre empresas que precisam divulgar sua
imagem e seus produtos e entre pessoas que desejam compartilhar seus interesses som outras. Elaborar uma pgina uma tarefa
bem mais simples do que se imagina. Esta apostila mostrar os passos e os comandos de linguagem HTML necessrio para
criar uma pgina completa, com imagens, tabelas e links para outras pginas de rede.
Como criar um pgina Web

Uma pgina da Web composta de textos e comandos especiais (tags) de uma linguagem de programao chamada
HTML, abreviao de Hiper Text Markup Language. Ela bastante simples e tem como finalidade bsica formatar o texto
exibido e criar ligaes entre as pginas, gerando documentos com o conceito de hipertexto.
Assim como e qualquer outra linguagem, o programador deve escrever o cdigo-fonte seguindo as regras de sintaxe.
Esse cdigo-fonte posteriormente interpretado pelo browser, que se encarregar de executar os comandos ou as tags para
formatar e acessar recursos da Web. O cdigo-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 prtica e produtiva para escrever uma
pgina Web usar um editor HTML.
O que HTML tag

Quando um browser exibe uma pgina Web, ele l o texto da pgina e procura smbolos especiais denominados tags,
que dizem como o texto ou a informao devem ser exibidos. Por exemplo: uma tag pode dizer que um texto deve ser mostrado
em negrito, em itlico, com certo tipo de fonte etc. Alm do aspecto fsico d texto, uma tag pode indicar que um determinado
trecho representa, na verdade, o endereo de outras pginas, que devem ser acessadas no caso de o texto ser clicado.
As tags normalmente so especificadas em pares, delimitando um texto que sofrer algum tipo de formatao.
Contudo, exibem vrias tags individuais.
As tags so identificadas por ser envolvidas pelos sinais "< >" ou "</>" Entre os sinais "< >" so especificados os
comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalizao deve ser feita usando a barra
de diviso "/, indicando que a tag est finalizando a marcao de um texto.
O formato genrico 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 itlico
<h3> este comando gera um ttulo de tamanho 3 </h3>.
Para quebrar uma linha, necessrio

um comando especial <br>, caso contrrio as
linhas so exibidas continuamente.
As tags, daqui para frente sero chamadas de

comandos.
A estrutura de uma pgina HTML

Assim como em outras linguagens, existem algumas estruturas bsicas que identificam partes de um programa HTML.
A prxima figura mostra os comandos bsicos de uma pgina:
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 expresso que aparece na linha de ttulo da janela do browser. O par de comandos <BODY>
</BODY> deve ser usado para envolver todos os comandos da pgina.
Os principais elementos de uma pgina HTML

Um pgina HTML composta basicamente de ttulos, textos, pargrafos, imagens e links - este ltimo responsvel
pela chamada de outras pginas para a tela. Todos esses elementos so posicionados na pgina por meio de comandos
especficos da linguagem.
Ttulo
Linha
Divisria
Imagem
Link
Acentuao
Se voc usa o Windows com as configuraes de idioma e de teclado adequadas para o portugus, a visualizao ser
normal. Contudo, a linguagem HTML possui cdigos especiais para que uma letra acentuada seja visualizada do texto, optamos
por usar a acentuao direta em favor da didtica.
F ORMATAO
Defina o layout do texto
A primeira etapa para fazer o layout do texto definir os cabealhos.
So linhas do documento que aparecem com um tamanho de letra diferenciado do restante do texto com a finalidade de
identificar o incio de uma seo ou de um tpico. Existem seis tamanhos ou modelos de cabealho. O comando H tem a
seguinte sintaxe:
<Hn> Texto do cabealho </Hn>
No caso "n" deve ser substitudo por um nmero de 1 a 6.
O maior cabealho especificado com o comando H1 e o menor, com o comando H6.
Observe o exemplo listado na prxima 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 cabealho so a forma mais rpida de conseguir este
efeito.
Pargrafos e quebras de linhas

De nada adianta voc ter cabealhos se no tiver
um contedo que os siga. Nas pginas HTML, voc pode digitar o texto exatamente no lugar onde deseja que ele aparea na
tela, da mesma forma que faz com um editor comum.
O comando <p>
A diferena principal entre a pgina HTML e o editor tradicional que a pgina no reconhece o fim de um pargrafo
quando se pressiona a tecla Enter. Voc precisa forar o fim do pargrafo e a quebra de linha usando comandos especiais. O
comando responsvel pela quebra de pargrafo o <p>. Sua sintaxe
: <p>
Veja o cdigo fonte mostrado a seguir:
Alm do comando <p>, que avana o texto para a prxima linha, voc pode criar uma separao de blocos de texto
usando o comando <HR> (horizontal rule), que insere uma linha divisria 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 aps sua especificao. Em muitas situaes, voc precisa
quebrar a linha e continuar o texto na linha seguinte. Nessa situao, o comando que deve ser utilizado <BR>
Sintaxe: <BR>
Note a diferena causada pelos dois no texto:
Muito bem voc j sabe como criar ttulos e inserir texto na pgina HTML. Com isso, j poderia escrever documentos
da mesma forma que faz com o seu editor de texto. Vejamos, agora, como melhorar a aparncia do texto.
Formatao do texto
Assim com editor de texto, voc pode criar uma srie d efeitos no documento, modificando o tamanho ou o tipo da
fonte.
Todos os comando que alteram o estilo do texto so do tipo liga-desliga, ou seja, precisam ser especificados em pares,
marcando o incio e o fim do trecho que sofrer a formatao
Os principais comandos de estilo de texto so:
Comando
Negrito
Itlico
Sublinhado
Sintaxe
<B> texto </B>
<I> texto </I>
<U> texto </U>
Typerwriter
Big
Small
Sobrescrito
Subscrito
Pulsante
<TT> texto </TT>

<BIG> texto </BIG>
<SMALL> texto SMALL>
<SUP> texto </SUP>
<SUB> texto </SUB>
<BLINK> texto</BLINK>
Funo
Aplica o estilo negrito
Aplica o estilo Itlico
Aplica o estilo Sublinhado (no funciona em alguns
browsers)
Deixa o texto com espaamento regular
Aumenta a fonte a 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
Veja o cdigo-fonte mostrado a seguir:
Observe na tela ao lado o efeito produzido por esses comandos.
10
L ISTAS
Como organizar em seqncia de itens
Assim como os cabealhos, outra forma de estruturar um documento HTML utilizao de listas. Estas podem
funcionar como sumrio, menu ou resumo do contedo e so excelentes como ponto de partida para acessar outras partes de um
documento. Existem basicamente dois tipos de listas: as no-ordenadas, que encadeiam uma srie de itens sem numer-los; as
ordenadas, que atribuem um nmero a cada elemento.
O comando <UL>
Para criar uma lista no ordenada, voc deve usar um conjunto de comandos cuja sintaxe bsica mostrada a seguir. O
comando que gera a lista no 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 bsica 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, tambm deve ser precedido do comando <LI> (Line item)
<OL>
<LI> texto do item
<LI> texto do item n....
</OL>
10
11
Veja o efeito desses comandos.
11
12
Listas aninhadas
Voc pode aninhar listas para criar estruturas hierrquicas. Tambm possvel misturar listas ordenadas e no
ordenadas. Primeiramente, voc vai ser como funcionar o aninhamento de listas no ordenadas.
Listas no ordenadas aninhadas

Note que, para cada nvel de lista, o browser mostra um marcador (smbolo) diferente para facilitar a visualizao das
pginas. Voc deve prestar bastante ateno 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
tambm como ser o resultado da pgina.
Listas ordenadas Aninhadas
12
13
Veja o resultado na tela a baixo.
A combinao dos tipos de lista fcil.
13
14
Verifique como ficou a pgina
14
15
L INK
Aprenda a interligar os documentos
Uma das principais atraes da Internet a apresentao de documentos com o conceito de hipertext - ou seja, uma
pgina que se liga a outras por meio de conexes especiais chamadas hiperlinks. Com esse conceito, voc pode criar
documentos que faam referncias, no importando se esto em outra pgina da Web, no seu micro ou em qualquer servidor da
rede.
O uso de hipertexto tambm facilita a criao de documentos extensos cujas sees ou tpicos podem ser rapidamente
acessados mediante os links. Imagine que voc cria um pgina sobre um determinado assunto no qual vrios tpicos so
abordados.
Assim como um livro, voc cria todo o texto do documento e depois o insere no incio. Se quiser acessar diretamente o
texto de um tpico, basta dar um clique no item do tpico no sumrio 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 pgina com informaes sobre um pintor famoso. Voc pode acrescentar imagens na pgina
(no tpico imagens veremos como fazer isso) e tambm criar links para que o leitor possa acessar outras pginas da Web com
informaes sobre o pintor Velsques, poderia definir um link para o site do Museo del Prado, que exibe vrias obras desse
mestre.
Para exemplificar o uso de hipertexto, vamos mostrar alguns modelos que comeam com a criao de hiperlinks, para
diferentes partes de um documento, para outras pginas no diretrio e micro do usurio e, finalmente, para qualquer lugar da
Web.
Ligando sees de uma pgina

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 pgina, voc precisa criar um ncora no incio de cada seo.
Uma ncora um ponto de referncias ou endereo que ser acessado por um link. usada dentro de um documento
para marcar o incio de uma seo. 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, poderamos ter a linha mostrada a seguir:
<a name=#parte!>Introduo</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>Introcuo do produto</a>
O smbolo # avisa o browser para procurar o link no documento atual.
15
16
Quando voc clica no hipertexto, ele exibe a parte do documento que contm a ncora, colocando-a, sempre que
possvel, no alto da tela. Veja o incio do documento mostrado a seguir. Note que as trs linhas do menu esto sublinhadas na
cor azul. Se voc clicar numa delas, a seo do documento linkada ser exibida imediatamente.
A prxima tela mostrada se o item Introduo for clicado. Voc perceber que, aps ser clicado, o hipertexto muda de cor.
Normalmente, ele muda de azul para vermelho. Isso um recurso automtico da linguagem e serve para chamar a ateno para
links que j foram acessados.
16
17
Interligando arquivos locais

Fazer a ligao de um texto com uma pgina 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 ttulo
Introduo ao hipertexto. Ela simplesmente indica o nome do arquivo exemp06g.htm como link. Voc deve,
obrigatoriamente, colocar a extenso do arquivo.
<a href=politequinho.htm> Educao Infantil </a>
Aqui est a segunda linha desse menu:

<a href=politequinho.htm> Educao Infantil </a>
17
18
Conectando arquivos de outros servidores

Agora a coisa fica um pouco mais sria. aqui que est toda a graa da Internet. Com o uso de um esquema de
endereamento chamado URL, consegue-se acessar um arquivo localizado em qualquer servidor do planeta que esteja
conectado adequadamente Web.
URL a abreviao de Uniform Resource Locator e serve para especificar a localizao de pginas e arquivos em
diretrios de servidores da Web. Esse esquema parecido com aquele que voc usa para acessar um programa armazenado num
diretrio de sua mquina, 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 pgina 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
endereamento do servidor e da pgina. A sintaxe :
protocolo://servidor.arquivo
Protocolo o tipo de servidor que est sendo acessado, e servidor o computador que contm a pgina.
Arquivo pressupe o caminho completo do arquivo.
Por exemplo, para acessar a pgina do Ramalho, a URL da pgina :
http://www.ramalho.com.br/index.html
Este endereo pode ser escrito na linha de URL do browser, para acessar diretamente a pgina:
Pode, tambm, ser indicado dentro de um documento HTML mediante o comando A HREF, que cria uma ligao ou
link para a URL especificada.
<A HREF+ http://www.ramalho.com.br/index.htm Home Page do Ramalho </a>
18
19
A seguir, mostraremos um exemplo no qual um hiperlink criado para uma pgina que fornece informaes mais
detalhadas sobre a cidade de Toledo, na Espanha. A URL da pgina que ser linkada :
http://www.docuweb.ca/sispain/politics/autonomo/mancha/capital.html
Veja o cdigo-fonte do arquivo em que a URL especificada no comando A HREF.
Veja o resultado na pgina exibida pelo browser. Antes de carregar essa pgina, voc deve estar conectado Internet,
pois o documento linkado est em outro servidor da rede.
Se voc no estiver conectado, o browser exibir uma mensagem de erro dizendo que no pode localizar o servidor
especificado.
O domnio dos comandos A HREF e A NAME constitui a chave para criar documento Web. No prximo tpico,
vamos abordar as tcnicas bsicas para a insero de imagens em suas pginas.
19
20
I MAGENS
Como trabalhar com fotos e ilustraes
Incluir uma imagem em sua pgina Web tarefa bem fcil. Exige apenas que voc tenha disponvel a figura e que ela
esteja num dos formatos aceitos pelo browser. O formato de arquivo grfico padro pela Web o GIF. Outro formato que ainda
no considerado padro 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.
Ateno: imagens em BMP do Windows no servem. Elas precisam ser convertidas para os formatos acima. Existem diversos
programas que transformam arquivos grficos BMP de vrios outros formatos em GIF. Entre eles esto o shareware Paint Shop
Pro, o Wingif e a maioria dos programas de edio de imagens, como Photoshop, Picture Publisher e Photostyle. Antes de
inundar suas pginas de imagens, lembre-se de que, ao usar a rede, a velocidade de transmisso de ilustraes muito reduzida,
girando em torno de 1 KB por segundo. Dependendo do trfego, ela cai para algumas dezenas de bytes por segundo. Portanto,
uma imagem de 100 KB pode velar vrios minutos para ser exibida, frustrando o internauta.
O comando <IMG>
O comando HTML usado para inserir uma imagem na posio 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 relao ao texto que est a seu
redor
Como padro, 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 padro, 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 contedo do programa abaixo:
Veja o resultado que ele oferece:
20
21
Veja, tambm, a continuao da pgina:
Imagens externas
Colocar figuras dentro da pgina (in-line) muito interessante.
Contudo, isso causa lentido na carga da pgina, principalmente quando elas so muitas e de tamanho grande. Uma
tcnica muito til fazer um link para a pgina, usando o comando A HREF. Dessa forma, o leitor que desejar ver uma
determinada foto clica na sua referncia e no onerado com o tempo da carga automtica 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. Tratase de <center> </center>, que tem como objetivo centralizar na linha o texto envolvido. Esse comando tambm pode ser usado
para um bloco de vrias linhas. Todas sero centralizadas horizontalmente.
Veja que o comando < A HREF> foi usado para especificar um link para uma imagem, Mundo.
21
22
Ao clicar na palavra MUndo, a imagem associada exibida em seu tamanho natural numa janela do browser. Para
voltar janela anterior, clique no boto Back. Note que esta no uma pgina HTML, mas apenas a figura em si. claro que
voc poderia criar uma pgina colocando esta figura e um texto explicativo sobre ela.
22
23
T ABELAS
Como mostrar informaes em linhas e colunas
O trabalho com tabelas parece difcil a princpio. Todavia, depois de conhecidos os comandos de formatao, a tarefa
se torna bastante rpida e fcil.
As tabelas tm uma estrutura parecida com a de uma planilha eletrnica: compem-se de linhas e de colunas cujas
intersees formas o que se chama de clulas. Uma clula 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 responsveis pela criao das linhas e clulas, ttulos, bordas, ou seja, no
aparecem as linhas horizontais e as verticais que separam as clulas. Para visualizar:
<TR> </TR>
Abreviao de Table Row. Essas tags so usadas para criar uma linha da tabela. Se uma tabela tiver cinco linhas,
devero ser indicados cinco pares desses comandos.
<TD> </TD>
Abreviao de Table Data. As tags TD so usadas para especificar o contedo de uma clula. Esses comandos so
usados em pares para cada clula da linha. Devem ser usados entre os comandos <TR> </TR>. Ao contrrio das planilhas, uma
tabela no precisa ter todas as linhas com o mesmo nmero de clulas. A largura de uma coluna definida pela largura da
maior clula que faz parte da coluna.
O contedo de uma clula alinhado pela opo Align. Como padro, o alinhamento horizontal do texto feito
esquerda (align=left) e o alinhamento vertical, no meio da clula (Valign=middle).
<TH> </TH>
Abreviao de Table Header. Esse par de comandos usado para criar clulas da mesma forma que os comandos
<TD> </TD> , s que o texto exibido em negrito e centralizado.
<CAPTION> </CAPTION>
Permite a criao de uma legenda para a tabela. A legenda um texto externo que aparece antes ou depois da tabela.
Esses comandos devem ser especificados aps o comando Table, antes das tags TR. Uma legenda pode ser exibida no topo ou
no p da tabela dependendo do valor atribudo opo Align, que pode ser Top ou Bottom. O padro Top. A Legenda sempre
centralizada horizontalmente.
A seguir encontram-se as opes que podem ser usadas com os comandos descritos:
BORDER
Esta opo pertence ao comando Table. Se for especificado sem nenhum valor, uma linha fina criada em volta de
todas as clulas. O valor ) equivalente a no ter borda. Quanto maior o valor especificado, mais grossa a borda.
BORDER=<value>
ALIGN
Esta opo aparece em diversos comandos HTML, no s os relativos a tabelas. Serve para centralizar o texto dentro
da clula 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 clula. Os valores
possveis so Top, Middle, Bottom e Baseline. Middle o padro.
23
24
NOWARP
Esta opo pode aparecer em qualquer clula da tabela e indica que o texto da clula no pode ser quebrado para se
ajustar ao seu tamanho.
COLSPAN
Esta opo pode aparecer em qualquer clula da tabela e especifica quantas colunas da tabela a clula deve ocupar. O
valor padro 1.
ROWSPAN
Esta opo funciona como a anterior, s que especifica quantas linhas para baixo, a clula deve ocupar. O valor padro
1.
CELLSPACING
Esta opo exclusiva do Netscape e define o espaamento, em entre as clulas da tabela.
CELLSPADDING
Esta opo exclusiva do Netscape e define o espaamento, em pixels entre as colunas e as linhas da tabela.
Agora que voc tem uma idia dos comandos usados para criar tabelas, vamos ver alguns exemplos prticos.
Criando uma tabela simples
A lgica de criao 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 clula de uma linha.
use o comando </TABLE> para encerrar a tabela.
use opes para mudar a aparncia da tabela
Uma tabela simples de 3 linhas por 3

colunas
Este cdigo gera a seguinte tabela:
Note que no comando Table existe a opo Border. Ela cria a

borda que envolve as clulas da tabela. Se voc no a especificar, a
tabela montada normalmente, s que sem a borda.
Ampliando uma clula para mais de uma

coluna
24
25
O exemplo acima mostra o uso da opo Colspan para aumentar o tamanho de uma clula e fazer com que ela ocupe
colunas adjacentes. Note que o contedo desta clula est centralizado pelo comando Align=Center. Lembre-se de que esse
no um recurso exclusivo do Netscape.
Veja o resultado:
Expandindo uma clula para mais de uma linha

A opo Rowspan serve para aumentar o tamanho de uma clula e
fazer com que ela ocupe colunas adjacentes. Note que o contedo desta clula
est centralizado pelo comando Valign=Top.
Veja o efeito desses comandos:
Ttulos de colunas
25
26
Com o par de comandos <TH> (Title Heading), voc pode especificar ttulos para as colunas. Esses comandos
funcionam da mesma forma que os <TD>, s que deixam o
contedo da clula centralizado e em negrito. Veja o prximo exemplo.
Bordas
A criao de bordas pode ser til em vrias tabelas, mas
em muitos casos as bordas no so necessrias. Voc viu at
agora tabelas que usavam uma borda gerada pela adio da opo
Border ao comando Table.
O exemplo abaixo mostra duas tabelas nas quais so
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 opes no fiquem
unicamente na vertical, como ocorre quando se usa os comandos
para a criao de listas.
26
27
O NDE P UBLICAR
Como colocar seu site no ar
So vrios os caminhos para colocar no ar um site da Word Wide Web. O mais direto montar um servidor e conectlo com a Internet. uma opo atraente para corporaes que possuem ou pretenden ter uma intranet ou que planejam publicar
um grande volume de informaes na grande rede. Para pequenas empresas, pessoas fsicas ou corporaes que preferem
terceirizar essa atividade, a opo alugar espao servidor de algum prestador de servios. Algumas organizaes possibilitam
a publicao gratuita de pginas na Web. Brasil On Line, o servio on-line do Grupo Abril, por exemplo, oferece gratuitamente
uma rea de 50 Kb para cada um de seus assinantes. Informaes podem ser obtidas no endereo
http://www.uol.com.br/servios/hp.html. A empresa Tecepe matm um espao no qual cada companhia ou associao pode
colocar um nica pgina HTML. O endereo : http://www.tecepe.com.br/cgi-win/homepage.exe/coloca.html.
O mais conecido servio que possibilita a montagem gratuita de sites na Web o Geocities. A empresa americana no
cobra nada para manter sites pessoais em seus servidores. O servio d direito a 1Mb de espao em disco para as pginas. No
h muitas restries quanto ao contedo, mas se o usurio ficar muito tempo sem atualizar sua pginas pode ser convidado a se
retirar. Para montar seu site gratuito no GeoCities, lei as instrues no endereo http://www.geocities.com/BHI/freehp.html.
O geocities tambm abriga sites comerciais cobrando uma taxa a partir de 50 dlares por ms. As informaes correspondentes
esto na pgina htt://www.geocities.com/BHI/comm_info.html. A maioria dos provedores de acesso ofrece servios pagos de
armazenagem de sites.
27

HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

WWW.ELETRONICACOLEGIAL.KIT.

Como criar um pgina Web

O que HTML tag

Para quebrar uma linha, necessrio

As tags, daqui para frente sero chamadas de

A estrutura de uma pgina HTML

Os principais elementos de uma pgina HTML

O resultado dos comandos acima visto nesta tela.

Existem outras formas de criar linhas de texto com

Pargrafos e quebras de linhas

<TT> texto </TT>

Veja o cdigo-fonte mostrado a seguir:

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

Veja o efeito desses comandos.

Listas no ordenadas aninhadas

Listas ordenadas Aninhadas

Veja o resultado na tela a baixo.

A combinao dos tipos de lista fcil.

Verifique como ficou a pgina

Ligando sees de uma pgina

Saiba como usar uma ncora

Criando o link para ncora

Interligando arquivos locais

Aqui est a segunda linha desse menu:

Conectando arquivos de outros servidores

Analise o contedo do programa abaixo:

Veja o resultado que ele oferece:

Veja, tambm, a continuao da pgina:

Criando uma tabela simples

A lgica de criao de uma tabela a seguinte:

Uma tabela simples de 3 linhas por 3

Note que no comando Table existe a opo Border. Ela cria a

Ampliando uma clula para mais de uma

Expandindo uma clula para mais de uma linha

Veja o efeito desses comandos:

Potrebbero piacerti anche