Apostila HTML

Conceitos
Internet
Internet uma interconexo de diversas
redes atravs de linhas de alta
capacidade.
Intranet uma internet interna.
O acesso a ela normalmente se
restringe a funcionrios.
As informaes disponveis na
intranet so informaes corpo-
rativas.
Extranet um grupo de intranets interco-
nectadas. As empresa que fazem
negcios entre si podem formar
extranets para compartilhar
determindos tipos de informao
Como Nasceu ?
Internet
Em 1969, a ARPA, do departamento de defesa dos
EUA, construiu uma rede experimental de computa-
dores chamada ARPAnet.
A ARPAnet uniu pesquisadores, militares e universi-
trios, permitindo que os recursos de seus computa-
dores sossem compartilhados.
A rede tambm permitiu que se fizesse pesquisa
militares nas universidades e que os militares se
comunicassem, tanto entre si como com outros,
via e-mail.
Vrias empresa contruiram redes semelhantes
a ARPAnet e se conectaram a ela.
Com o grande trfego ela foi dividida em militar e
civil.
cont.
Como Nasceu ?
Internet
Com a diviso em militar e civil ela se chamava
NSFnet, e em 1987 passou a se chamar Internet.
Perguntas :
O que uma Intranet ?
O que uma Extranet ?
O que Internet ?
Caso voc esteje trabalhando em uma intranet em
uma empresa poder ter acesso a Internet ?
Pginas para
Web
O que Web ?
A Web um conjunto de documentos acessveis por
meio da Internet.
Esse documento ( ou pginas Web ) contm uma
tecnologia chamada hipertexto. Onde voc poder
percorrer partes do documento e outros documentos
atravs de pontes chamadas de links.
Podemos descrever a Word Wide Web como um
sistema de informao em hipertexto, grficos,
distribudo, independente de plataforma, dinmico
interativo e global, utilizado na internet.
Pginas para
Web
O que Home Page , Pgina Web, Site e
Apresentao Web ?
Home Page a primeira pgina de uma apresentao.
Pgina Web um elemento especfico de uma apresen-
tao da Web que est contido em uma
estrutura.
Apresentao da Web um conjunto de pginas Web
estruturada sobre um determinado
contedo.
Site o local onde ficam armazenada estas apresenta-
es.
O Site hospedado por computadores conectados
permanentemente a Internet e recebem o nome de Host
Pginas para
Web
Quais os tipos de acesso ?
Acesso Indireto :
um acesso atravs de um servio on-line, como UOL
SBT On-line etc.
Acesso discado :
A conexo feita atravs de um modem.
Acesso Permanente :
Funciona por meio de uma rede de uma empresa. Neste
caso, a rede conectada diretamente Internete pelo
gateway.
Como criar uma
pgina Web ?
Como composta uma pgina Web ?
Ela composta de textos e comandos especiais (tags) de
HTML, um acrnimo de Hypertext Markup Language.
Essa linguagem bastante simples e tem como finalidade
bsica formatar o texto exibido e criar ligaes entre pgi-
nas de Web, criando assim documentos com o conceito
de hipertexto.
Para que serve o Browse ou Navegador ?
Ele l o contedo do arquivo, interpreta os comandos e
exibe sua pgina.
preciso estar conectado para visualizar a pgina que
criei ?
No, o browser funcionar independente de se estar
conectado a Internet.
A melhor forma de se trabalhar desenvolvendo uma
pgina HTML off-line
Como criar uma
pgina Web ?
O que Servidor Web ?
Para exibir na Web e navegar por elas, voc precisar
apenas de um navegador da Web. Para divulgar na
Web, voc precisar na maioria dos casos, de um
servidor Web.
Perguntas :
O que um browser ? E um editor HTML ?
O que Site ?
O que Home Page ?
O que Pgina Web ?
O que Servidor Web ?
Organizao e
Navegao?
O que pretende divulgar ?
Que tipo de contedo voc pode apresentar na Web ?
Informaes pessoais;
Hobbies ou interesses especiais;
Publicaes;
Lojas on-line;
Educao on-line;
etc.
Estabelea seus objetivos !
Voc deve ser perguntar o que seus leitores procuram ?
O que deseja realizar com sua apresentao ?
Eles lero a pgina inteira ou apenas uma parte dela ?
O que eu que colocar em minha pgina?
Como ser estruturada ?
Ela esta adequada ou no ao meu pblico alvo ?
Organizao e
Navegao?
Divida seu contedo em tpicos
Crie uma lista com os pricipais tpicos, a princpio no
importa a ordem. Esta uma forma de comear a se
organizar.
Organizao e Navegao
Aqui descreverei algumas das estruturas e navegao
e suas caractersticas e ainda consideraes importan-
tes como :
Os tipos de informaes que se adaptam a cada estrutura.
como os leitores conseguem se deslocar pelo contedo
como ter certeza de que os leitores conseguem se
localizar nos seus documentos e achar o caminho de
volta at uma posio conhecida.
Formas de
Hierarquias
Na estrutura hierarquicas, a home page fornece uma
viso geral do contedo que est subordinado a ela
e ainda define os principais vnculos s pginas dos
nveis inferiores da hierarquia
Estruturas Lineares so utilizadas para apresentar,
no ambiente on-line .
Exemplo : Intrues passo-passo
Treinamento baseado em computador
Linear
Formas de
Estrutura Linear com Alternativas
Na estrutura Linear e hierrquica cada pgina do roteiro
voc deve oferecer vnculos para o leitor anvaar, retro-
ceder, retornar ao incio e subir um nvel.
Exemplo :
Combinao das Estruturas Linear e Hierrquica
uma estrutura menos rgida permitindo que o leitor
se desvie do caminho principal
FAQ ( Frequently Asked Questions )
Formas de
O STORYBOARD
um conceito emprestado do cinema, em que cada cena e
cada tomada de cmera esboada na ordem em que
ocorre no filme.
O uso de storyboard, consiste no processo de criao de
um resumo com sketh (rascunho) de aparncia final do seu
trabalho antes de voc efetivamente pr em prtica
suas idias.
DICAS PARA SEU STORYBOARD
1. Defina bem a forma de navegao entre as pginas.
Se houver formas alternativas, torne a navegao para os
leitores a mais intuitiva possvel.
2. Tome cuidado com o que ser incluindo na home page,
lembre-se, ela ser a porta da sua apresentao.
3. Tenha sempre em mente seus objetivos. Procure no se
distanciar deles.
Formas de
DIAGRAMAO
Esta palavra vem do mundo dos impresso que a organizao
do seu contedo.
Exemplo: Imagem , textos e vdeo etc.
Deve ser observado o tamanho das fontes, disposio das
imagens, forma como o texto ser apresentado, etc.
Uma boa diagramao tambm garante o retorno do
internauta.
Formas de
EXERCCIOS
1. Por que to importante, antes de comear a construir
uma apresentao Web, definir objetivos e tpicos?
O que mais necessrio?
2. Descreva cada forma de organizao,
faa uma observao sobre o que voc compreendeu
de cada uma.
3. O que storyboard e qual a sua utilidade?
4. Em que casos aconselhvel usar o storyboard?
5. Vamos comear a planejar sua Home Page pessoal.
Pense no que gostaria de colocar em suas pginas, se
haver links para outras partes da mesma pgina e os links
para outras pginas, quais os tpicos abordados, etc.
Faa um storyboard da sua apresentao web.
Projeto de
WEB DESIGN E VISO DO PROJETO
A maioria das pessoas associam Design unicamente ao
projeto grfico de um WebSite, o que um erro.
O conceito de Web Design envolve todos os aspectos da
construo de um site, desde o desenho de sua estrutura
de navegao e forma de disponibilizao da informao
at o desenvolvimento do projeto grfico.
CONTEDO E FORMA
O que faz uma pessoa entrar em um site?
O faz a pessoa querer retornar?
Estas perguntas devem sempre estar na cabea das pessoas
de uma equipe de construo de sites.
A primeira muito relaciona-se ao pblico alvo.

A segunda pergunta certamente envolvem dois pontos:
O1 o contedo. o elemento central.
O 2 ponto o design do site (estrutura de navegao e
projeto grfico).
Projeto de
EQUIPE PARA CONSTRUO DE UM WEBSITE
a) Analistas de sistemas (com experincia em gerncia de
Informao), responsvel pela organizao da informao;
b) Design Grfico, responsvel pelo projeto grfico;
c) Programadores, que, dependendo do tipo de site,
podem ser programadores HTML, Java, JavaScript,
CGI, etc;
d) Assistentes, que auxiliam o trabalho do Analista de siste-
mas ou do Design Grfico (ilustradores, digitadores, etc.).
A equipe dever ter um coordenador, responsvel em
fazer o trabalho fluir de forma eficiente, dentro de um
cronograma aproveitando o mximo de cada profissional.
Depois do site construdo surgir uma outra pessoa:
o WebMaster, que ser responsvel pela administrao
do site.
muito haver o acmulo de funes por membros da equipe.
Mas importante definir o papel de cada na construo do
site.
Conceitos de
A HTML uma linguagem de marcao.
Criar um documento em uma linguagem de marcao
significa que voc comea com o texto da sua pgina e
inclui tags especiais no incio e no final de determinadas
palavras ou pargrafos.
As tags indicam as diversas partes da pgina e produzem
diferentes efeitos no navegador.
Os arquivos recebem a extenso .html

A primeira pgina a ser exibida geralmente recebe o nome de
index.htm ou .html, dependendo do provedor que hospeda a
pgina.
As tags normalmente so especificadas em pares,
delimitando um texto que sofrer algum tipo de formatao.
As tags so identificadas por estarem entre os sinais
< > e < / >.
Conceitos de
Entre os sinais < > so especificados os comandos
propriamente ditos. No caso de tags que necessitam envolver
um texto, sua finalizao deve ser feita usando-se 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>
Mas algumas tags no possuem finalizao.
Vejamos agora alguns comandos e o tipo de efeito que
estes causam ao texto quando interpretados pelo browser.
Assim como outras linguagens, a HTML possui uma estrutura
bsica para seus programas. Para que um browser interprete
corretamente o programa, ele deve possuir alguns comandos
bsicos que sempre devero estar presentes.
Conceitos de
Alguns browsers at dispensam seu uso, porm melhor
assumir como parte fundamental do programa tais comandos.
Um programa HTML possui trs partes bsicas, a estrutura
principal, o cabealho e o corpo do programa. Todo programa
deve iniciar com o comando, tag, <html> e ser encerrado com
o comando </html>. Esse par de comandos essencial.
A rea de cabealho opcional e delimitada pelo par de
comandos <head> e </head>. Estes comandos para cabea-
lho so usados para especificar alguns poucos comandos da
linguagem. Eles so opcionais, ou seja, um programa HTML
pode funcionar sem eles. Mas conveniente us-los, pois o
ttulo da pgina acrescentado atravs deles.E ainda temos
as tags <Title> e </Title>, estes comandos delimitam o texto
que ir aparecer na barra de ttulo do browser.

Conceitos de
A maioria dos comandos ser especificado no corpo do pro-
grama que delimitado pelas tags <body> e </body>. um
comando obrigatrio.

<HEAD>
</HEAD>
<BODY>
</BODY>

Esta tag marca incio/fim do programa HTML
Esta tag marca incio e fim de cabealho
Esta tag delimita o texto que ir ser visua-
lizado na barra de ttulo do browser.
Esta tag delimita o corpo do programa,
aonde a maior parte do comando sero
colocados
Principais Elementos
LINK
um trecho que aparece destacado do restante do texto,
normalmente sublinhado e com outra cor. Ao clicar no link,
o browser acessa outra regio da pgina atual ou uma p-
gina localizada em qualquer lugar da Internet. Uma figura
tambm pode ser usada como um link, ou seja, clicando
na figura saltamos para outro local.
CABEALHO
So linhas de texto com tamanhos especiais. Existem seis
tamanhos prefixados de cabealho.
TTULO
O ttulo de uma pgina web indica qual o assunto abordado
e ir aparecer na barra de ttulo do browser. Este ttulo
utilizado por programas de lista (hotlist) do seu navegador
e tambm por outros programas que catalogam pginas da
Internet. Para atribuir um ttulo a pgina voc dever utilizar
a tag: <Title> </Title>.
Esta tag sempre ser includa no cabealho (entre as tags
<Head> </Head> e descrevem a mesma).
CABEALHOS
Os cabealhos so usados para dividir sees do texto,
como captulos de um livro. A HTML divide seis tamanhos
de cabealhos, de H1 a H6, que aplicam um tamanho de
fonte diferenciado no texto que envolvem, uma linha antes e
depois e alm disso do um efeito de negrito. O maior tama-
nho o H1 e o menor o H6.
<H1> Texto </H1>
Experimente o seguinte cdigo:
<html>
<head><title>Cabealhos</title></head>
<body>
<h1>C</h1>
<h2>A</h2>
<h3>B</h3>
<h4>E</h4>
<h5></h5>
<h6>A</h6>
<h5>L</h5>
<h4>H</h4>
<h3>O</h3>
<h2>S</h2>
</body>
</html>
Vejamos um exemplo de outro cdigo em HTML:
<html>
<head><b> A FORMAO DE UM WEBMASTER
</b></HEAD>
<body>
<p>
A formao de um <i>Webmaster</i> envolve diversos tipos
de conhecimentos.<br>
Afinal, ele ser o responsvel pela administrao de um site.
</body>
</html>
Em nosso exemplo introduzi mais algumas tags. Os comandos:
<B> </B> Aplica o estilo negrito ao texto
<I> </I> Aplica o estilo itlico ao texto.
<P> </P> Inicia um novo pargrafo.
<BR> Faz uma quebra de linha.
PARGRAFOS
Para forar o incio de um novo pargrafo, ou seja, avanar
uma linha em branco e iniciar o texto na Segunda linha aps
o final do pargrafo anterior, deve ser usado o comando <p>.
Esse comando pode aparecer individualmente ou em par:
<p> </p>.
Quando um comando <p> inserido em um local do progra-
ma, o browser ir sempre avanar uma linha em branco, posi-
ciona-se na linha seguinte ao comando <p>.
QUEBRA DE LINHA
O comando <br> faz uma espcie de quebra de linha. Este
comando inseri uma linha em branco no seu local ou na linha
seguinte qual ele foi inserido, caso esteja no meio de uma
linha e no em seu final.
A funo deste comando avanar para a linha imediatamente
aps aquela em que ele ocorre.
EXERCCIOS
1. Qual a extenso de um arquivo de um programa em HTML?
2. A primeira pgina de um site geralmente recebe que nome?
3. Escreva a estrutura bsica de um programa HTML.
4. Quais os principais elementos exibidos em uma home page?
5. O que um link?
6. Qual as funo das tags abaixo:
a) <HTML> </HTML>
b) <HEAD> </HEAD>
c) <TITLE> </TITLE>
d) <H2> </H2>
e) <BODY> </BODY>
f) <B> </B>
g) <I> </I>
h) <P>
i) <BR>
EXERCCIOS
7. Utilize o que voc j aprendeu nesta seo e crie seu
primeira pgina HTML. Use a linguagem HTML e faa uma
pgina falando das suas expectativas para este curso, como
pretende usar o conhecimento que est adquirindo e quais
outros cursos que pretende fazer. Seu texto deve ter no
mximo 5 linhas. Salve na unidade A:
com o nome de projetos.html.
8. Faa um pgina utilizando os comandos que voc j conhe-
ce para falar sobre uma pessoa. Pode ser algum que voc
admire, do seu crculo de amigos, ou uma pessoa pblica
(ator, atriz, etc).
Seu texto deve ter no mximo 5 linhas. Salve na unidade A:
com o nome de Pessoa admirvel.html.
TAGS DE FORMATAO
Assim como em um editor de texto, em HTML voc poder
utilizar efeitos em seu texto. Como j percebeu os comandos,
tags, trabalham em continer.
STRONG <strong>texto</strong> Similar ao negrito
TYPERWRITER <tt>texto</tt> Deixa o texto com espaamento
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
SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui
seu corpo
BLINK <blink>texto</blink> Faz com que o texto pisque
NEGRITO <b>texto</b> Aplica o estilo negrito
ITLICO <I>texto</I> Aplica o estilo itlico
SUBLINHADO <u>texto</u> Aplica um sublinhado
(em alguns browsers esta tag no funciona)
ESTILO LGICO
As tags deste tipo indicam como o texto destacado deve ser
utilizado e no como ser apresentado. Este estilo no indica
como o texto ser formatado e sim como ser utilizado no
documento. No possvel garantir que um texto destacado
que utilize tags deste tipo sempre ser apresentado em
negrito ou itlico, por exemplo. Depender do browser.
Algumas tags de estilo lgico utilizadas em HTML padro:
<EM>
Indica que os caracteres devero ser enfatizados de alguma
forma. De forma diferente do restante do texto. Geralmente em
itlico
<STRONG>
Esta tag enfatiza ainda mais que a anterior. Em negrito.
<CODE>
Esta tag indica um cdigo de exemplo a ser exposto.
<SAMP>
Esta tag indica texto de exemplo. Quando voc quer dar um
exemplo de endereo para a Internet sem criar link.
ESTILOS FSICOS
Este estilo de tag realmente altera a formatao do texto, no
estilo anterior voc no possui garantia que o texto ir ser vi-
sualizado da forma que planejou. Neste estilo ele ser visuali-
zado da forma que atribuir as tags a ele.
Algumas tags de estilo fsico para HTML padro:
<B> </B> coloca o texto em negrito
<I> </I> coloca o texto em itlico
<TT> </TT> fonte de mquina de escrever com espaamento
uniforme.
<u> </u> coloca o texto sublinhado
<S> </S> coloca o texto tachado
<BIG> </BIG> o texto ir aparecer maior que o restante
ao redor
<SMALL> </SMALL> o texto ir aparecer menor que o restan-
te ao redor
<SUB> </SUB> coloca o texto subscrito
<SUP> </SUP> coloca o texto sobrescrito

TEXTO PR-FORMATADO
O texto de uma arquivo em HTML formatado atravs das
tags. Mas voc possui a opo da tag <PRE> </PRE> para
estabelecer uma formatao atravs de um editor de texto e
que esta formatao permanea na sua pgina html.
O texto pr-formatado excelente para apresentar cdigo-
fonte com seus espaamentos adequados. Este recurso pode
ser utilizado para criar tabelas mas no recomendvel.
Uma observao importante que, ao usar tags de estilo ou
vnculo, no tags de elemento, neste espao elas iro
funcionar normalmente.
SINTAXE:
<PRE>
TEXTO
TEXTO
TEXTO
</PRE>

CITAES E COMENTRIOS
A tag <BLOCKQUOTE> utilizada na criao de citaes
longas que no devem ser aninhadas em pargrafos.
A tag <CITE> destaca citaes curtas.
Um exemplo:
<BLOCKQUOTE>
"O mercado de webdesign um dos segmentos de design
com maior potencial de crescimento para os prximos anos.
Estima-se um crescimento de no mnimo 50% ao ano at
2005. E, na corrida rumo a esse novo eldorado, as agncias
de propaganda mais uma vez largaram na frente dos escrit-
rios de design, investindo primeiro em estruturas especializa-
das para atender demanda do mercado (...)".
</BLOCKQUOTE>
Caso queira fazer comentrios a respeito do seu cdigo
HTML apenas como referncia pessoal e no para ser exibido
em suas pginas voc dever fazer o comentrio da seguinte
forma:
<!- -comentrio- - >

ENDEREOS
Esta tag utilizada para identificar autorias de
sua pgina. Geralmente so apresentadas na parte inferior
de cada pgina. Mostra quem confeccionou aquela pgina,
com quem o leitor deve entrar em contato caso queira ter
alguma informao ou fazer alguma observao. Estes ende-
reos so precedidos de um fio <hr>, que ainda veremos, e
voc poder utilizar a tag <br> para separar linhas.
<ADDRESS> TEXTO</ADDRESS>
Vejamos um exemplo:
<HR>
<address>
Mario.Jose@bol.com.br<br>
A servio da JML Informtica Ltda - Me<br>
ltima atualizao: 12 de Janeiro de 2005<br>
Todos os direitos autorais so reservados<br>
</address>
Esta uma excelente forma de garantir que as pessoas
entrem em contato com voc caso necessitem e tambm
uma forma de estar melhorando a sua HP (Home Page)
atravs de sugestes.

A TAG <BLINK>
O texto que se encontrar
entre estas tags ir aparecer piscando. Dependendo da
verso do Netscape, esta tag somente ter efeito sobre o
texto se ele estiver sendo visualizado atravs do Netscape,
esse efeito ter uma dessas caractersticas:
1. texto ficar piscando em intervalos regulares
2. Um bloco cinza ou branco ficar piscando atrs do texto.
Este recurso geralmente utilizado para chamar a ateno
do leitor sobre uma determinada parte do texto.
O problema do efeito piscando que ele chama ateno ex-
cessivamente sobre aquela parte do texto tirando a ateno
do leitor do restante do texto. A maioria dos projetistas web
consideram este efeito feio, desagradvel e irritante. Em
HTML poderamos coloc-lo como se fosse passar a colher
com bastante fora no fundo de uma panela de alumnio.
J imaginou?

A TAG <BLINK>
O texto que se encontrar
entre estas tags ir aparecer pis cando. Dependendo da
verso do Netscape, esta tag somente ter efeito sobre o
texto se ele estiver sendo visualizado atravs do Netscape,
esse efeito ter uma dessas caractersticas:
1. texto ficar piscando em intervalos regulares
2. Um bloco cinza ou branco ficar piscando atrs do texto.
Este recurso geralmente utilizado para chamar a ateno
do leitor sobre uma determinada parte do texto.
O problema do efeito piscando que ele chama ateno ex-
cessivamente sobre aquela parte do texto tirando a ateno
do leitor do restante do texto. A maioria dos projetistas web
consideram este efeito feio, desagradvel e irritante. Em
HTML poderamos coloc-lo como se fosse passar a colher
com bastante fora no fundo de uma panela de alumnio.
J imaginou?

EXERCCIOS
1. Os comandos de formatao podem ser combinados para
aplicar mais de um efeito ao mesmo tempo?
2. Coloque os comandos HTML abaixo para que o texto tenha
o seguinte efeito:
T utorial de HTML
3. Crie uma pgina HTML sobre algo que goste de fazer, e que
faa muito bem, e queira ensinar a outras pessoas. Um tuto-
rial usando todas as tags vistas at ento. Utilizando princi-
palmente todos os comandos de formatao.
4. Por que a tag Blink no bem aceita pela maioria dos pro-
jetistas de pginas Web?
5. Qual a utilidade da tag de pr-formatao e qual sua
sintaxe?
6. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual
sua finalidade?

FONTE
Para fazer alteraes no tamanho,
tipo e cor da fonte de seu texto voc utilizar a tag
<font> </font> que do tipo continer.
Sua sintaxe a seguinte:
<font
size=" "
face=" "
color=" ">
</font>
SIZE
O tamanho Size especifica o tamanho da fonte utilizada.
Os valores permitidos vo de 1, o menor, a 7, o maior. O pa-
dro 3. Se for especificado um nmero antecedido com o
sinal de adio ou subtrao o valor da fonte ser acrescido
ou subtrado nesse valor. Vamos a um exemplo: se eu estiver
trabalhando com uma fonte 5 e for especificado <font size=+2,
o texto passar a ser exibido em 7. Se no houver sinal a
fonte ser exibida naquele valor.

FACE
Esse parmetro permite que seja escolhida uma fonte
diferente para o texto. Podem ser especificadas vrias fontes,
de maneira que, se o sistema no possuir uma determinada
fonte ele ir utilizar outra.
Face="name [,name2[,name3]]
Se no forem encontradas as fontes especificadas, ento, o
texto ser apresentado na fonte padro.
<font face="Agaramond, Arial" size=1>

COLOR
Este parmetro especifica a cor do texto. Seu valor ser espe-
cificado no formato hexadecimal, RGB ou atravs de um nome
predefinido de cores.
Algumas cores:
COR CDIGO COR CDIGO
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan #00FFFF
Fuchsia #FF00FF Gray #C0C0C0
Green #00FF00 Lime #32CD32
Brown #800000 Navy #23238E
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow #FFFF00

Vamos a um exemplo de cdigo:
<html>
<head>
</title>Experincia com Fontes</title>
</head>
<body>
<h2>Primeiro exemplo com tipos de fontes</h2>
<font face="Agaramond"><p>
Este texto ser exibido em Agaramond</font><br>
<font face="Tahoma"><p>
Este texto ser exibido em Tahoma</font><br>
<font face="Arcane"><p>
Este texto ser exibido em Aracane</font><br>
<p>
<h2>Exemplos com tamanhos diferentes de fontes</h2>
<font face="Courier" Size=1>
Este texto ser exibido em Courier</font><br><p>
<p>
<h2>Agora iremos usar cores</h2>
<font Face="Verdana" size=5 color="#800000">
Este o primeiro texto a ser modificado</font>
</body>
</html>

Vejamos um exemplo:
<html>
<head>
<title>Alinhamento</title>
</head>
<body>
<h1>MACROMEDIA FLASH</H1>
<P ALIGN=JUSTIFY>
A tecnologia Shockwave Flash, da Macromedia, j est
presente na Web h alguns anos, e no ltimo no ganhou um
forte impulso com a incluso do plug-in necessrio nos nave-
gadores mais recentes (apartir do Internet Explorer 4 e
Netscape Navigator 4.6). Cada vez mais utilizado, este pro-
grama j est sendo empregado em sites de grandes em-
presas. Seu poder se deve a sua grande capacidade multi-
mdia e sua versatilidade. Sua finalidade a criao de
imagens vetoriais com animao, som e interatividade.</p>
<p align=center>
Depois veremos mais sobre o Flash</p>
</body>
</html>

CABEALHO
Quanto ao cabealho voc s poder alterar o alinhamento
para direita e centralizado, a esquerda alinhamento padro.
Exemplo:
<h2 align=center>Este um exemplo de cabealho com
alinhamento</h2>
Vamos ao cdigo-fonte para verificarmos a diferena:
<html>
<head>
<title>Alinhamento de cabealho</title>
</head>
<body>
<h2>Cabealho sem alinhamento especial</h2>
Este um exemplo do cabealho sem alinhamento especial.
<h2 align=center>Cabealho com alinhamento centralizado</h2>
Este um exemplo de cabealho alinhado ao centro.
<h2 align=right>Cabealho com alinhamento a direita</h2>
Este um exemplo de cabealho alinhado a direita.
</body>
</html>
ALINHAMENTO COM O
COMANDO <DIV>
A utilizao desta tag uma forma prtica e rpida de alinhar
bloco de texto. A abreviatura DIV significa diviso. Ao usar
esta tag num bloco de texto voc estar atingindo todas as
tags dentro daquele bloco. Suas vantagens sobre o Align
que:
1. Precisar ser utilizada apenas uma vez, ao contrrio do
atributo Align, que tem de ser includo em diversas tags.
2. A tag <DIV> pode ser usada para alinhar qualquer ele-
mento (cabealho, pargrafos, citaes, imagens, tabelas,
etc.). O atributo Align encontra-se disponvel apenas em
um nmero limitado de tags.
Voc dever colocar a tag <DIV> e acrescentar o atributo
align na tag de abertura. O atributo align poder ter os valo-
res left, right e center.
Sintaxe:
<DIV ALIGN=" ">
TEXTO e OUTRAS TAGS
TEXTO e OUTRAS TAGS
</DIV>
OBSERVAO:
Alm do atributo align=center temos a tag <center>
</center> que funciona igualmente ao atributo.
Vamos treinar um pouco com este cdigo-fonte:
<html>
<head>
<title>Utilizando a tag DIV para alinhar</title>
</head>
<body>
<h2>JavaScript na World Wide Web</h2>
<p align=justify>
A World Wide Web iniciou-se como
um simples repositrio de informaes, mas cresceu
muito alm disso. A medida que a Web desenvolveu-se,
as ferramentas tambm desenvolveram-se. Ferramentas
simples de marcao como HTML foram unidas por lingua-
gens de programao de verdade. Incluindo <b>JavaScript
</b>, que na verdade no uma linguagem de programao
mas uma <b>linguagem Script hospedeira</b> de pginas
em HTML.<br>
<p>
<div align=center>
<h2>Entendendo a utilidade do JavaScript</h2>
Como a HTML uma linguagem apenas de marcao
de texto simples, ela no pode responder para o usurio,
tomar decises, nem autorizar tarefas repetitivas. Tarefas
interativas como essas exigem uma linguagem mais com-
plexa.
<h3>Eu precisarei usar JavaScript em todas as minhas
pginas</h3>
Apenas se quiser aprimor-las e interagir com o usurio.
</div>
</body>
</html>
CARACTERES ESPECIAIS
H caracteres que no podem ser obtidos por meio do teclado.
Eles podem ser inseridos em sua pgina atravs da especifica-
o de um cdigo especial que o browser interpreta e substitui
por um caracter especfico. Esses cdigos podem ser obtidos
utilizando-se uma nomeclatura definida pela ISO -LATIN - 1 ou
a partir de uma entidade HTML.
A norma ISO utiliza um cdigo composto pelo caractere & segui-
do do smbolo # e, ento, de uma combinao numrica com
ponto-e-vrgula. J a entidade HTML usa o caractere & seguido
de uma palavra que identifica o smbolo com ponto-e-vrgula.
Caso voc queira escrever uma pgina HTML em outro idioma
ter que usar bastante esses caracteres especiais.
Imagine que voc queira fazer uma pgina HTML ensinando a
outras pessoas a linguagem HTML. Como faria para explicar uma
tag sem que o browser interpretasse como um comando. Ter de
utilizar estes smbolos especiais.
Vamos a um exemplo:
<html>
<head>
<title>Tutorial em HTML</title>
</head>
<body>
<h2>O comando &ltBR&gt</h2>
A finalidade deste comando HTML marcar uma seo do texto
como pargrafo inserindo uma quebra de linha.<br>
<p>
J o comando &ltP&gt para indicar incio de uma novo pargrafo.
</body>
</html>
Observe que para que o browser pudesse mostrar <br> e <p> sem
interpretar como comandos usei caracteres especiais &lt para indi-
car sinal de < e &gt para indicar o sinal de >.
Cont. Carecteres Especiais
Quando voc utiliza a acentuao
comum do teclado nas suas pginas podem
at parecer que tudo ir correr tudo bem. Mas algum
que visualizar suas pginas em um computador que no tenha as
mesmas configuraes de 'vdeo e teclado, alguns caracteres
podem no sair da forma desejada.
Por exemplo:
A palavra caf, se voc utilizar esta palavra com a acentuao do
seu teclado, com certeza na visualizao do seu browser ficar
perfeita, mas pode ser que em outros computadores com a confi-
gurao diferente no aparea da mesma forma. O ideal
coloc-la assim:
Café ou caé
E se desejasse colocar a palavra entre aspas:
"Café&quot
EXERCCIOS
1- Crie uma pgina HTML utilizando os recursos vistos acima. Use
esta pgina para falar da utilidade da Internet na vida de pessoas
que no trabalham com informtica, sugestes para aqueles que
querem abrir negcios novos envolvendo Internet, sem ser um
hacker.
LISTAS
Vamos colocar assim, h basicamente
dois tipos de listas: as ordenadas, que contm uma srie de itens
sem numer-los, e as listas ordenadas, que atribuem um nmero
para cada elemento da lista. Trabalhar com listas simples.
Trabalharemos com os comandos <ul> para listas no ordenadas
e <ol> para as listas ordenadas.
1. O COMANDO <UL>
Para criar uma lista n o ordenada, voc deve usar um conjun-
to de comandos cuja sintaxe bsica mostrada a seguir.
O comando que gera a lista no ordenada o comando <UL>
(unordered list), que deve envolver o primeiro e o ltimo item
da lista. Cada item da lista deve ser precedido do comando
<LI> (line list).
<UL>
<LI> Texto
<LI> Texto
</UL>
LISTAS Cont.
2. O COMANDO <OL>
Para criar uma lista bsica no ordenada, voc deve usar um
conjunto de comandos cuja sintaxe bsica mostrada a seguir.
O comando que gera a lista no ordenada (ordered list) o co-
mando <OL>, que deve envolver o primeiro e o ltimo item da lista.
Cada item da lista deve ser precedido do comando <LI> (Line item).
<OL>
<LI> Texto
<LI> Texto
</OL>
<UL>
<LI> Texto
<LI> Texto
</UL>
OBSERVAO:
Na lista no ordenada cada item receber um marcador ("bolinha")
e a numerada receber automaticamente nmeros.
LISTAS Cont.
Voc poder personalizar sua lista ordenada com
o atributo TYPE e START. O atributo Type pode assumir cinco
valores para definir o tipo de numerao a ser usado na lista.
"1" : Especifica que os algarismos arbicos padro devem ser usa-
dos para numerar a lista ( 1,2,3,4, ...).
"a" : Especifica que as letras minsculas devem ser usadas para
numerar a lista (a, b, c, d, etc.)
"A" : Especifica que as letras maisculas devem ser usadas para
numerar a lista (A, B, C, D, etc.)
"i" : Especifica que os algarismos romanos minsculos devem ser
usados para numerar a lista ( i, ii, iii, iv, etc.)
"I" : Especifica que os algarismos romanos maisculos devem ser
usados para numerar a lista ( I, II, III, IV, etc.).
LISTAS Cont.
Exemplo:
<p>Ingredientes para bolo</p>
<ol>
<li>Farinha de Trigo
<li>Aucar
<li>Manteiga
<li>Ovos
<li>Leite
<li>Fermento
</ol>
Agora um exemplo com o atributo Type:
<p>Ingredientes para bolo</p>
<ol type="I">
<li>Farinha de trigo
<li>Aucar
<li>Manteiga
<li>Ovos
<li>Leite
<li>Fermento
</ol>
Usando o atributo START voc poder determinar o nmero ou a
letra que inicia sua lista. O ponto inicial 1. Usando o Start, voc
pudar esse nmero. Um exemplo: <ol Type=a start=3>.
Usando o atributo VALUE em um item da lista poderemos alterar os
valores da lista apartir de qualquer ponto.
Ex.:
<UL>
<LI>
<LI value=10>
<LI>
</UL>
IMAGENS
Para inserir uma imagem em
uma pgina web utilizamos do
comando, tag, <img src> e seus atributos.
<img src="endereo da imagem no HD">
ex.: <img src="c:\site\imagem.gif">
Poderemos acrescentar a esta imagem os seguintes atributos:
Width="valor em pixel" largura da imagem
Height="valor em pixel" altura da imagem
Align=(left, right ou center) alinhamento da imagem
Alt="texto" texto que ir aparecer ao passar o mouse sobre a
imagem ou texto que surgir caso a imagem no possa ser visua-
lizada.
Border="valor em pixel" especificao da largura da borda da ima-
gem.
Vspace="valor em pixel" para especificar o espao que deve ser
deixado acima e abaixo da imagem.
Hspace="valor em pixel" especifica o espao que deve ser deixa-
do nas l aterais da imagem.
O nico obrigatrio o src.
Colocando Uma Imagem
Como Fundo Da Pgina
<body background="endereo da
imagem no HD">
ex.: <body background="c:\site\imagem.jpg">
Procure usar imagens simples, com poucas variaes de tons.
Para fixar a imagem de fundo
<body background="c:\site\imagem.jpg" bgproperties="fixed">
2- Colocando Uma Cor Como Fundo Da Pgina:
<body bgcolor="cor">
Procure no usar cores chamativas. Para que a cor do fundo da
sua pgina chame mais ateno que seu contedo.
Voc pode criar seus prprios fundos de pgina com programas
como o Photoshop e o Corelphoto-paint.
Colocando Uma Imagem Como Fundo Da Pgina
<body background="endereo da imagem no HD">
ex.: <body background="c:\site\imagem.jpg">
Procure usar imagens simples, com poucas variaes de tons.
Para fixar a imagem de fundo
<body background="c:\site\imagem.jpg" bgproperties="fixed">
2- Colocando Uma Cor Como Fundo Da Pgina:
<body bgcolor="cor">
LINKS E ANCORAS
1- LINKS
A principal atrao da Internet a criao de
documentos com o conceito de hipertexto ,ou seja ,um
documento que se vincula a outros documentos por meio de ligaes
especiais chamadas links ou hiperlinks.Com esse conceito ,voc pode
criar documentos que faam referncias e permitam ao usurio acessar
tais referncias no importando se elas esto em outra pgina Web ,no
seu micro ou em algum servidor de rede.
O uso de hipertexto tambm facilita a criao de documentos extensos
cujas sees ou tpicos podem ser rapidamente acessados por meio
dos links. Imagine que voc crie uma pgina sobre determinado assunto
em vrios tpicos abordados. Assim como em um livro voc cria todo o
texto do documento e depois cria , no incio ,um sumrio indicando os
tpicos do documento. Se quiser acessar diretamente o texto de um
tpico ,basta dar um clique sobre o item do tpico no sumrio e ele ser
imediatamente exibido.
Um link reconhecido em uma pgina por estar em cor normalmente
diferente do resto do texto e , ao passar com o mouse sobre esse texto
o cursor muda para uma mo apontando para o link.
Para criar uma link com uma pgina
<a href="endereo da pgina">texto que ser o link</a>
ex.: <a href="c:\site\casa.html">Minha casa</a>
Usando uma imagem como link:
Ex.: <a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a>
LINKS E ANCORAS
ncoras
Uma ncora um ponto de referncia ou endereo
que ser acessado por um link.
Uma ncora usada dentro do documento para marcar o incio de uma
seo do documento.
Suponha que seu texto seja muito grande , o que tornaria trabalhoso para
quem estiver vendo a pgina conseguir se movimentar entre um tpico e
outro. Ento faa o seguinte : Nomeie um pedao da sua pgina atravs
do tag :
<A NAME="NOME "> Texto </A>
( Lembre -se que "NOME" fictcio, voc escolhe o nome)
Depois disso escreva o pedao que voc quer associar a esse Nome.
Agora crie um link para chegar at esse pedao , usando o tag :
<A HREF="#NOME">Clique Aqui</A>
Pronto! Ao clicar na mensagem "Clique Aqui" de sua pgina , o usurio ir
at o pedao que voc nomeou.
ATENO : O sinal de cerquilha (#) necessrio para a ncora, pois avisa
ao browser para procurar o link no documento atual !!!
3- Linkando Arquivos de Outros Servidores
LINKS E ANCORAS
ncoras
Agora a coisa fica um pouco mais sria . aqui que
est toda graa de Internet . Atravs de um esquema de
endereamento , a URL , a Internet consegue acessar um arquivo que est
em qualquer micro deste planeta desde que esteja conectado adequada-
mente a Web.
Como j vimos , a URL serve para especificar a localizao de pginas e
arquivos em diretrios de servidores da Web . Vamos comparar com um es-
quema que voc usa ( as vezes at sem saber ) para acessar algum arquivo
em seu prprio computador .
Acessando um arquivo pelo DOS :
C: \WINDOWS \SYSTEM \ Lista.TXT
Acessando uma pgina pela Web :
HTTP : // WWW. ASPMASTERS.CJB.NET
Uma URL composta por duas partes principais . A primeira o protocolo
Internet do documento , a segunda parte o endereo do servidor e da
pgina.
LINKS E ANCORAS
ncoras
A sintaxe disso :
PROTOCOLO: //SERVIDOR . INSTITUIO / ARQUIVO
Onde :
Protocolo o tipo de servidor que est sendo acessado;
Servidor o computador que contm a pgina ;
Instituio o tipo de instituio a qual esse computador pertence
( Comercial , Internet Publica , Militar etc. ) ;
Arquivo o caminho do arquivo.
Exemplo :
HTTP : // WWW.TIMASTER.COM.BR
Esse endereo pode ser especificado diretamente na linha de URL do
Browser , para acessar diretamente a pgina INDEX. HTM , ou ento
dentro de um link de um documento HTML , atravs do A HREF que cria
uma ligao , um link para o URL .
<A HREF = "HTTP : // WWW. TIMASTER.COM.BR "> TIMASTER </A>
TABELAS
As tabelas so muito importantes
para o designer de uma home-page.
Com elas pode-se fazer alinhamentos que
dificilmente seriam possveis com simples comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um
aspecto mais profissional e o usurio possa navegar de forma mais
eficiente, pois os objetos podem estar melhor posicionados na home-page.
Vamos discutir, nesta parte, quais so os comandos para se criar uma
tabela e mostrar alguns exemplos. Claro que voc dever praticar e prin-
cipalmente planejar a sua tabela, pois sem isso, fica muito difcil de contro-
lar o cdigo HTML da sua home-page.
O comando para se inserir uma tabela <TABLE>; para iniciar uma linha
devemos introduzir a tag <TR> e para uma clula (alguns preferem dizer
coluna) <TD>. Todos estes comandos so encerrados como </TABLE> ,
</TR> e </TD> respectivamente.
Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2,
ou seja de 3 colunas por 2 linhas, o cdigo HTML para isso :
<HTML>
<HEAD>
<TITLE>Criando Tabelas</TITLE>
TABELAS Cont.
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>
TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura
igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
Salve este exemplo como TABELA.HTM e abra o arquivo num Browser
para ver como ficou.
Com isto voc j consegue Ter uma idia de como montar suas tabela.
O segredo para se conseguir fazer estas tabelas de forma eficiente
planejar e ter a idia exata do contedo desta tabela.
TABELAS Cont.
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>
TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura
igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
Salve este exemplo como TABELA.HTM e abra o arquivo num Browser
para ver como ficou.
Com isto voc j consegue Ter uma idia de como montar suas tabela.
O segredo para se conseguir fazer estas tabelas de forma eficiente
planejar e ter a idia exata do contedo desta tabela.
TABELAS Cont.
Nas clulas da tabela voc pode
inserir desde simples frases at figuras
inteiras.
Parmetros podem ser acrescidos s tabelas, tais
como : aumentar ou diminuir a largura de uma clula;
distanciar as clulas uma das outras; inserir cor de fundo dentro da
clula etc.
Vamos procurar trabalhar com vrios exemplos para visualizarmos melhor
o uso destes parmetros.
1-ALTERANDO A LARGURA DA CLULA
Para alterar o largura de uma clula da tabela basta acrescentar o par-
metro WIDTH dentro da tag <TD>. Exemplo1:
<TABLE BORDER=2>
<TR>
<TD WIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
O parmetro WIDTH pode receber dois tipos de valores, em pixels como no
exemplo acima ou em porcentagem, como mostrado no exemplo a seguir.
Tambm dentro da tag <TD> vemos um outro parmetro que
VALIGN=MIDDLE, este parmetro tem por funo alinhar o contedo da
clula no meio da mesma, ou seja, dentro da clula as frases so alinhadas
com relao ao seu centro.
TABELAS Cont.
Exemplo2:
<TABLE BORDER=2>
<TR>
<TD WIDTH=25%> WIDTH=25%</TD>
<TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD>
</TR>
2- INSERINDO COR DE FUNDO E SEPARAO DE CLULAS
Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo,
isto se torna particularmente til quando se quer dar destaque a uma clula
em especial.
Vejamos um exemplo:
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
TABELAS Cont.
Exemplo2:
Aqui, vimos que podemos acrescentar cores
ao fundo de uma clula, outra coisa que tambm
pode ser feita mudar a fonte com os comandos de
formatao que voc j conhece, como <FONT COLOR=>, por exemplo.
Repare que no exemplo anterior ns colocamos BORDER=0 e as clulas
apareceram coloridas, mas com um certo espaamento entre elas, para
tirarmos este espao devemos acrescentar dentro da tag <TABLE> o par-
metro CELLSPACING=0. Este parmetro elimina por completo os espaos
entre as clulas.
<TABLE BORDER=0 CELLSPACING=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
TABELAS Cont.
Outro parmetro que pode ser usado
para separar espaos em uma clula
CELLPADDING que inclui ou exclui espaos
dentro da clula, ou seja, se voc tiver um elemento
(frase, texto, figura etc.) dentro da clula voc pode acres-
centar espaos por igual nos quatros cantos da clula, fazendo com que
seu texto ou figura no fique "grudado" nas paredes da clula. Aproveite os
exemplos anteriores e experimente usar este atributo para ver como ele
funciona.
Isto j d uma idia do funcionamento geral das tabelas na WEB. Muitos
dos alinhamentos que encontramos na Internet so feito por intermdio
de tabelas.
Voc tambm pode usar todos os outros recursos j vistos de HTML para
otimizar o uso de tabelas.
3-UM POUCO MAIS DE TABELAS
Agora que voc j est um pouco mais familiarizado com o uso de tabelas e
com seus principais atributos, vamos ver como podemos aperfeioar o uso
de tabelas.
Em seguida descreveremos uma srie de outros atributos e comandos para
tabelas:
<TH> ... </TH>
Esta tag insere um cabealho dentro da clula. Na verdade a nica
diferena entre a tag <TH> e a tag <TD> que a <TH> exibe o contedo da
clula em negrito.
TABELAS Cont.
<CAPTION> ... </CAPTION>
Exibe um texto centralizado em relao tabela,
como se fosse uma legenda.
Exemplo:
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha
inicia a tabela com borda de espessura 1 (border), espao entre as
clulas 2 (Cellspacing) e espao dentro da clula 6 (Cellpadding)>
<CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela>
<TR>
<TH>Contedo em negrito</TH> <! Insere o texto na forma de cabealho
(negrito)>
</TR>
<TR>
<TH>Contedo em negrito</TH>
</TR>
</TABLE>
Repare neste exemplo, que a legenda j sai centralizada com relao a
tabela e repare no espao dentro da clula devido ao comando
CELLPADDING.
TABELAS Cont.
OS ATRIBUTOS COLSPAN E ROWSPAN
Estes atributos so muito importantes dentro da
tag <TABLE>. So eles que nos possibilitam remodelar a
disposio das clulas dentro da tabela. Vejamos um exemplo prtico:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>
<TR>
<TD>CLULA 1</TD> <TD>CLULA 2</TD>
</TR>
</TABLE>
Neste exemplo vemos que na tag <TD> foi introduzido o parmetro
COLSPAN. Este parmetro tem a finalidade de dizer que sob a clula onde
ele foi introduzido podemos ter um certo nmero de colunas.
Logo, se voc quiser que uma clula ocupe uma nica linha, como no
nosso exemplo, voc deve inserir o parmetro dentro da tag <TD> desta
clula. A quantidade de clulas que viro em baixo da clula que recebeu o
atributo COLSPAN deve ser de acordo com o nmero especificado no
parmetro.Mas se quisermos definir uma nica clula ocupando uma coluna
inteira ?
TABELAS Cont.
Neste caso usamos o atributo ROWSPAN.
Exemplo:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>
<TD>CLULA 1</TD></TR><TR> <TD>CLULA 2</TD>
</TR>
</TABLE>
Para melhor utilizar estes parmetros e ver como eles funcionam voc deve
fazer a sua prpria tabela, pois somente desta forma voc conseguir fixar
o uso destes parmetros.
USANDO TABELAS COMO MOLDURAS
Um outro uso bastante interessante de tabelas como moldura para
alguma figura. Para isto basta voc iniciar uma tabela e definir um valor
para BORDER.
Exemplo:
<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=NOME DA FIGURA> </TD>
</TR>
</TABLE>
TABELAS Cont.
Claro que voc deve usar com muito bom
senso este artifcio da tag <TABLE>, pois nem
sempre uma moldura em uma figura defini um bom
layout (aparncia) da sua home-page.
6-COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS
Um recurso parecido com a cor de fundo , colocar uma imagem como fundo
de uma tabela uma tcnica muito usada. Atravs do complemento
BACKGROUND dentro da tag TABLE , basta indicar qual o endereo e o
nome da figura.
<TABLE BACKGROUND="POOL.GIF" BORDER=5>
<TR>
<TD><H1>Que tal um mergulho agora ? </H1></TD>
</TR>
</TABLE>
O atributo RULES
Para escolher as linhas internas que sero mostradas dentro da tabela ,
usamos o atributo RULES , dentro da tag <TABLE> . Os complementos
desse atributo so :
none : nenhuma linha interna ;
rows : para as linhas horizontais entre cada linha da tabela ;
cols : para as linhas verticais entre cada coluna da tabela ;
TABELAS Cont.
groups : para linhas entre grupos
de colunas e sees horizontais ,
definidas por tags especiais como
COLGROUP e THEAD ;
all : para mostrar todas as linhas entre cada coluna e
linha na tabela ( default ) .
Veja uma tabela com todas as linhas internas ( default ) :
<TABLE BORDER RULES=all>
Outro exemplo sem as linhas internas :
<TABLE BORDER RULES=none>
Outro exemplo usando o complemento ROWS:
<TABLE BORDER RULES=rows>
O ltimo exemplo usar o complemento COLS :
<TABLE BORDER RULES=cols>
As tabelas so um forte recurso de modelagem das home-pages hoje em
dia e para que voc consiga utilizar bem este recuso no deve se limitar
somente aos exemplos desta apostila, procure em sites e at mesmos em
livros , como por exemplo: "Criando sites arrasadores na Web" (captulo 4)
ou "HTML Truques Espertos" (captulo 5). Nessas referncias voc poder
encontrar vrios outros exemplos de pginas usando tabelas mais comple-
xas (como por exemplo, uma tabela peridica dos elementos) e claro em
laboratrio desenvolvendo sua prpria home-page.
TABELAS Cont.
H uma observao importantssima que devemos fazer aqui. Como j
vimos antes, alguns comandos HTML no funcionam em um dado
navegador, se voc reparou para falarmos de tabelas rodamos os exemplos
nos dois navegadores mais conhecidos : Internet Explore 4.0 e no Netscape
Communicator 4.0. Voc no reparou nenhuma diferena no uso destes
navegadores para nossos exemplos, a questo que para tabelas mais
complexas, com alinhamentos mais precisos cada navegador interpreta
estes comandos HTML de tabelas de forma diferenciada. Um exemplo
tpico uso de CELLSPACING e CELLPADDING.
Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em
um acordo quanto a padronizao de seus navegadores. Sendo assim,
quando voc construir tabelas deve sempre levar em conta em qual nave-
gador voc dar preferncia para rodar a sua pgina. Por isso nunca de-
mais deixar claro sua home-page em qual navegador ela roda melhor a
sua formatao.
FRAMES
Frames (quadros) so relativamente usadas na
Web. H os que adoram o uso de frames e no
admitem que suas home-pages fiquem sem elas, por outro
lado h os que abominam o uso de frames, porque julgam que eles
"estragam" o layout da home-page.
Fazer frames tem o mesmo procedimento que confeco de home-pages
simples, a diferena que se deve trocar a tag <BODY> pela
tag <FRAMSET>
Para termos uma home-page com frames devemos ter trs pginas, uma
com o cdigo que contm a tag <FRAMESET> e duas outras com os
cdigos onde sero inseridas as pginas de cada frame.
Vamos procurar entender melhor.
Uma documento HTML simples seria assim :
<HTML>
<HEAD>
<TITLE>Pgina simples </TITLE>
</HEAD>
<BODY>
Neste campo entram os comandos em geral
</BODY>
</HTML>
FRAMES
J um documento HTML que teria frames
ficaria assim:
<HTML>
<HEAD>
<TITLE>Pgina com Frame </TITLE>
</HEAD>
<FRAMESET>
NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS
DOS FRAMES
</FRAMESET>
</HTML>
Ento o que devemos fazer ? Devemos criar um documento HTML normal
e um documento HTML de frames.

Vejamos um exemplo:
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET COLS=20% , 80%> <! Este comando inicia o frame e divide a
tela do navegador em 2 partes, uma com 20% da tela e outra com 80%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as pginas HTML
que devem ocupar as colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET>
</HTML>
FRAMES
Este o cdigo para gerar os frames
(veja a figura) .
Agora vamos crias os cdigos para serem inseridos nas duas colunas que
criamos.
<HTML>
<HEAD>
</HEAD>
<BODY>
AQUI ENTRA A PRIMEIRA PGINA NORMAL
</BODY>
</HTML>
Salve este exemplo como FRAME1.HTM. Por que ? Porque no cdigo que
geramos no exemplo de frames chamamos a pgina com o comando
<FRAME SRC=FRAME1.HTM>, se voc salvar o nome do cdigo de forma
diferente dever alterar tambm o cdigo da pgina de frame.
<HTML>
<HEAD>
</HEAD>
<BODY>
AQUI ENTRA A SEGUNDA PGINA NORMAL
</BODY>
</HTML>
FRAMES
Este cdigo deve ser salvo como
FRAME2.HTM, pelo mesmo motivo do
cdigo anterior.
Sempre lembrando que estas pginas devem estar no
mesmo DIRETRIO.
Pronto, voc conseguiu fazer a sua primeira pgina com frame.
Alem de poder dividir o navegador em colunas com o parmetro COLS
dentro da tag <FRAMSET> , voc tambm pode dividir em linhas usando
o parmetro ROWS, ou ainda dividindo em colunas e linhas ao mesmo
tempo.
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide
a tela do navegador em 2 partes, uma com 50% da tela e outra com 50%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as pginas HTML
que devem ocupar as colunas divididas pelo frame>
</FRAMESET></HTML>
FRAMES
Uma tag <FRAMESET> pode ser
inserida dentro da outra gerando assim
frames dentro de frames, como no cdigo
abaixo:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=50%,50%>
<FRAMESET ROWS=50%,50%>
</FRAMESET>
<FRAMESET ROWS=50%,50%>
</FRAMESET>
</FRAMESET>
</HTML>
Este cdigo gera a seguinte pgina :
J deu para perceber que toda a estrutura de frames depende na verdade
da tag <FRAME>. Vejamos alguns dos atributos que podem ser inserido
dentro desta tag.
1-PARMETROS DE FRAMES
Parmetro SRC da tag <FRAME>
FRAMES
Este parmetro o responsvel por chamar a
pgina HTML que deve ser aberta (inserida) dentro
de um frame. Em todos os exemplos at agora s usamos
arquivos locais para abrir estas pginas em um frame, mas nada impede
voc de colocar no lugar uma URL completa. Por exemplo:
<FRAME SRC=http://www.yahoo.com>
Com este comando voc ser capaz, devidamente conectado, de chamar
esta pgina para a seu frame, onde quer que ela esteja na Internet.
Parmetro NAME
Este um dos principais parmetros da tag <FRAME>. Ele serve, como era
de se esperar, para definir o nome do frame. Ele deve ser usado em
conjunto com outro parmetro que o TARGET.
Parmetro MARGINWIDTH
Define a margem entre as laterais do frame e seu contedo. Exemplo:
<FRAME SRC=FRAME1.HTM MARGINWIDTH=100>
Este comando cria uma margem de 100 pixels de cada lado do frame.
Parmetro MARGINHEIGHT
FRAMES
Este parmetro o responsvel por chamar a
pgina HTML que deve ser aberta (inserida) dentro
de um frame. Em todos os exemplos at agora s usamos
arquivos locais para abrir estas pginas em um frame, mas nada impede
voc de colocar no lugar uma URL completa. Por exemplo:
<FRAME SRC=http://www.yahoo.com>
Com este comando voc ser capaz, devidamente conectado, de chamar
esta pgina para a seu frame, onde quer que ela esteja na Internet.
Parmetro NAME
Este um dos principais parmetros da tag <FRAME>. Ele serve, como era
de se esperar, para definir o nome do frame. Ele deve ser usado em
conjunto com outro parmetro que o TARGET.
Parmetro MARGINWIDTH
Define a margem entre as laterais do frame e seu contedo. Exemplo:
<FRAME SRC=FRAME1.HTM MARGINWIDTH=100>
Este comando cria uma margem de 100 pixels de cada lado do frame.
FRAMES
Parmetro MARGINHEIGHT
Da mesma forma que MARGINWIDTH, este
parmetro define uma distncia de margem, que
neste caso a margem superior e inferior do frame.
Exemplo:
<FRAME SRC=FRAME1.HTM MARGINHEIGHT=100>
D um espao de 100 pixels entre as margens superior e inferior do frame.
Parmetro SCROLLING
Define se o frame ter ou no barras de rolagem. Por default quando o
contedo de uma pgina excede o tamanho do frame as barras de rolagem
so acrescentadas automaticamente. Os valores vlidos para SCROLLING
so YES, NO e AUTO.
Exemplo:
<FRAME SRC=FRAME1.HTM SCROLLING=YES>
Parmetro TARGET
Este o mais importante de todos os parmetros. Ele trabalha em conjunto
com NAME e permite que coloquemos um link em um frame e o resultado,
ou seja, a pgina linkada, aparece em outro frame.
FRAMES
<A HREF=http:\\www.amazon.com
TARGET=TESTE>Livraria Amazon</A>
<BR>
< A HREF=http:\\www.yahoo.com TARGET=TESTE>
Pesquisador YAHOO</A>
<BR>
<A HREF=FRAME2.HTM TARGET=TESTE>Volta para Frame2.htm</A>
</BODY>
</HTML>
FRAME2.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Os links ao lado devero aparecer neste lado do Navega-
dor</H2></CENTER>
<BR>
<CENTER>
<FONT SIZE=4>Este frame o que foi nomeado como TESTE com o par-
metro NAME em Frame.HTM</FONT>
</CENTER>
</BODY>
</HTML>
FRAMES
Se tudo funcionar convenientemente
voc dever visualizar sua pgina como
abaixo, mas claro que os links que no so
locais funcionaro somente se voc estiver conectado.
2-Criando um frame Inline
Se voc quiser misturar texto , figuras e um frame em uma mesma pgina
voc precisa criar um frame inline. Para isso , utilize a tag <IFRAME
SRC=" nome do frame "> .
Voc pode usar os complementos NAME - para especificar um nome que
identifica qual frame est em uso ; WIDTH e HEIGTH para definir o espao
na pgina utilizado pelo Frame ; ALIGN ( LEFT ou RIGHT ) - para alinhar o
frame na pgina. Lembre-se de fechar a tag </IFRAME>.
Voc tambm pode usar os atributos normais da tag frame , como o
FRAMEBORDER , SCROLLING etc.
<html>
<body>
<center><h1>Exemplo do comando IFRAME </h1></center>
<hr>
<iframe width=90% height=70% src="pag2.htm">
</iframe>
</center>
Aqui continua a pgina normal !
</body>
</html>

Apostila HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Conceitos

Você também pode gostar