Escolar Documentos
Profissional Documentos
Cultura Documentos
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
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
Linha
Divisria
Imagem
Link
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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 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:
WWW.ELETRONICACOLEGIAL.KIT.NET
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:
WWW.ELETRONICACOLEGIAL.KIT.NET
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
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
WWW.ELETRONICACOLEGIAL.KIT.NET
WWW.ELETRONICACOLEGIAL.KIT.NET
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>
WWW.ELETRONICACOLEGIAL.KIT.NET
10
11
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
12
13
WWW.ELETRONICACOLEGIAL.KIT.NET
13
14
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
16
17
WWW.ELETRONICACOLEGIAL.KIT.NET
17
18
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>
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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>
WWW.ELETRONICACOLEGIAL.KIT.NET
20
21
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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:
Ttulos de colunas
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
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.
WWW.ELETRONICACOLEGIAL.KIT.NET
27