Apostila HTML Basico Coteca

O que HTML?
HTML (Hypertext Markup Language) Linguagem de Marcao de Hipertexto

Hipertexto
o conceito que possibilita a navegao entre segmentos de texto independentemente de
sua seqncia ou de sua localizao.
Essa linguagem tem como finalidade bsica formatar o texto exibido e criar ligaes entre as
pginas da Web, criando assim documentos com o conceito de hipertexto.
As Tags do HTML
As pginas HTML so documentos textos que podem ser editados em qualquer editor de
texto simples. Os arquivos HTML possuem extenso .html e seus comandos so
chamados de TAGS.
As tags aparecem sempre entre sinais de menor que < e maior que > .
As tags so geralmente usadas aos pares, sendo que a tag de finalizao precedida de
uma /.
Estrutura bsica em html
<html> <html> envolvem todas as seces de uma pgina
<head> <head> contem parmetros de configurao da pgina
<title> <title> ttulo da home page
<bod!> <bod!> cotem o corpo da home page
Exemplo:
<html>
<head>
<title>AQU EU ESCREVO O TTULO DA PAGNA</title>
</head>
<body>
TEXTOS
MAGENS
LNKS
</body>
</html>
"abe#alhos
H seis nveis de cabealhos em html, de <h1> a <h6>
Exemplo:
<h1>CABEALHO1</h1>
<h2>CABEALHO2</h2>
<h3>CABEALHO3</h3>
<h4>CABEALHO4</h4>
<h5>CABEALHO5</h5>
<h6>CABEALHO6</h6>
Prof. Gallo
COTECA Aparecida APOSTILA DE HTML BSICO
Atributos de alinhamento do cabealho align=atributo
Center= alinha ao centro
Right = alinha a direira
Left= alinha a esquerda
Exemplos:
<h2 align=center>CABEALHO ALNHADO AO CENTRO</h2>
<h2 align=right>CABEALHO ALNHADO A DRETA</h2>
<h2 align=left >CABEALHO ALNHADO A ESQUERDA(default)</h2>
$%&'"&$A&( TA)(
Qebra de linha
<P></P> (alta uma li*ha
<P>li*ha um</P> <P>Li*ha dois</P>
li*ha um
Li*ha dois
<BR> (alta para a pr+xima li*ha
li*ha um<BR>Li*ha dois
li*ha um
Li*ha dois
,ormata*do texto
<B> </B> -ua*do dispo*./el *o bro0ser1 mostrado em negrito 2em algu*s bro0sers pode
aparecer subli*hado3
<I> </I> Itlico
<TT> </TT> Tipo tele!pe 4 5o*te de espa#ame*to 5ixo
<STRIKE> ou <S> </STRIKE> </S> Texto com a pala/ra riscada
<BIG> </BIG> ,o*te um pouco maior e em *egrito 2ser/e para destacar3
<SMALL> </SMALL> ,o*te um pouco me*or
<SUB> </SUB> Texto
subscrito
como H
6
O
<SUP> </SUP> Texto
sobrescrito
como 7m
6
<U> </U> undeline ublinhado
Te!to Pr"#$or%atado
O texto de um arqui/o HTML 5ormatado atra/s das tags8 Mas /oc9 possui a op#:o da tag
<PRE> </PRE> para estabelecer uma 5ormata#:o atra/s de um editor de texto e que esta
5ormata#:o perma*e#a *a sua pgi*a html8
E;8<
<PRE>
A i*5ormtica uma tec*ologia
que /em de e*co*tro com as *o/as me*tes
de *osso pla*eta8
</PRE>
Pg. 2 de 23
A tab <BL&'K&TE> utili=ada *a cria#:o de cita#>es lo*gas que *:o de/em ser
a*i*hadas em pargra5os8
E;8<
<BL&'K&TE>
Os dirios virtuais da poeta tibetana Woeser, cuja obra est censurada na
China, foram fechados, de acordo com a organizao Reprteres sem Fronteiras (RSF).
"Estamos indignados com o fechamento, na sexta-feira passada, dos blogs de Woeser, e
solicitamos sua reabertura. Sua poesia proibida na China, e suas pginas pessoais so o
seu nico meio de se expressar", diz o grupo em comunicado.
</BLC!"#>
Para comentar o seu cdigo HTML apenas como referncia e no para ser exibido em suas
pginas, voc dever fazer o comentrio da seguinte forma:
<$ Aqui voc escreve o comentrio... >
#ndere%o&
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.
<'((R#))>
Marta.martelo@bol.com.br <BR >
A servio de ACME Ltda<BR>
ltima atualizao: 04 de Agosto de 2006<BR>
Todos os direitos reservados<BR>
</'((R#))>
Trabalhando com FONTES
Para fazer alteraes no tamanho, tipo e cor da fonte de seu texto voc utilizar a tag
<*+"></*+"> , sua sintaxe a seguinte:
<*+">
),-#=. /
*'C#=. /
CLR=. /
</*+">
),-# Especifica o tamanho da fonte utilizada. Os valores permitidos vo de 1 (o menor
valor) at 7(o maior valor). O padro 3. Se um nmero for especificado antecedido com o
sinal de adio ou subtrao o valor da fonte ser acrescido ou subtrado nesse valor. Ex.
Se eu estiver trabalhando com uma fonte 3 e for especificado <*+" ),-#=02>, o texto
passar a ser exibido em fonte 5 . Se no houver sinal a fonte ser exibida naquele valor.
*'C# 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 outraface=fonte[,fonte2[,fonte3]] Se no forem, encontradas as fontes
especificadas, ento o texto ser apresentado na fonte padro.
Pg. 3 de 23
CLR Especifica a cor do texto. Seu valor especificado no formato hexadecimal, RGB
ou atravs de um nome predefinido de cores.
Algumas cores:
#70DB93 AGUA #00FFFF AZUL CLARO
#000000 PRETO #C0C0C0 CNZA
#00FF00 VERDE #32CD32 LMA
#800000 MARROM #23238E AZUL MARNHO
#FFFFFF BRANCO #FF0000 VERMELHO
#0000FF AZUL #FFFF00 AMARELO
#1em2lo&3
<4"5L>
<4#'(>
<","L#>teste com as fontes</","L#>
</4#'(>
<B(6>
<42>Primeiro exemplo com tipos de fontes</42>
<*+" *'C#=.'7'R'5+(.><8>
Este texto ser exibido em AGARAMOND</*+"><BR>
<*+" *'C#=."'45'.><8>
Este texto ser exibido em TAHOMA</*+"><BR>
<*+" *'C#=.'RC'+#.><8>
Este texto ser exibido em ARCANE</*+"><BR>
<8>
<42> Exemplo com tipos de fontes e tamanho</42>
<*+" *'C#=.C9R,#R. ),-#=1>
Teste de Fonte courier e Tamanho 1 </*+"><BR>
<*+" *'C#=.'R,'L. ),-#=2>
Teste de Fonte arial e Tamanho 2 </*+"><BR>
<*+" *'C#=.:#R('+'. ),-#=3>
Teste de Fonte verdana e Tamanho 3 </*+"><BR>
<*+" *'C#=.",5#) +#; R5'+. ),-#=4>
Teste de Fonte times new roman e Tamanho 4 </*+"><BR>
<*+" *'C#=.L9C,(' C+)L#. ),-#=5>
Teste de Fonte lcida console e Tamanho 5 </*+"><BR>
<*+" *'C#=.8#R8#"9'. ),-#=6>
Teste de Fonte perpetua e Tamanho 6 </*+"><BR>
<*+" *'C#=.:#R('+'. ),-#=<>
Teste de Fonte verdana e Tamanho 7 </*+"><BR>
<8>
<42> Agora vamos usar cores</42>
<*+" *'C#=.:#R('+'. ),-#=4 CLR=.=>?????.>MARROM<BR>
<*+" *'C#=.:#R('+'. ),-#=4 CLR=.=<?(B@3.>AGUA<BR>
<*+" *'C#=.:#R('+'. ),-#=4 CLR=.=??????.>PRETO<BR>
<*+" *'C#=.:#R('+'. ),-#=4 CLR=.=??****.>AZUL CLARO<BR>
<*+" *'C#=.:#R('+'. ),-#=4 CLR=.=**????.>VERMELHO <BR>
<*+" *'C#=.:#R('+'. ),-#=4 CLR=5'7#+"'>MAGENTA <BR>
</B(6>
</4"5L>
Obs. : Para saber as cores em hexadecimal utilize o software CLR5'+,' para
baixar o software entre no site ;;;ABL'C!)9+)*";'R#AC5
Pg. 4 de 23
ALNHAMENTO
Para alinhar um texto voc utilizar o atributo 'L,7+ com valores :L#*"(ESQUERDA),
R,74"(DRETA), C#+"#R(CENTRO) e B9)",*6(JUSTFCADO)
8'RC7R'*)
O comando <8> inicia um novo pargrafo onde o texto automaticamente alinhado pela
margem esquerda da tela. Caso voc deseje que seu novo pargrafo seja iniciado com um
alinhamento diferente voc dever especificar na hora que incluir nesta tag o atributo align.
Ex.:
<4"5L>
<4#'(>
<","L#>ALNHAMENTO</","L#>
</4#'(>
<B(6>
<42>RB ,(#+",*,C' :,+4) </42>
<8 'L,7+=B9)",*6>
Engenheiros da NEC System Technologies do Japo e da Mie University desenvolveram um rob capaz
de identificar vinhos falsificados. O aparelho detecta at 30 diferentes tipos de uva e deve ser usado para
automatizar o atualmente demorado, custoso e incerto processo de degustao de vinho ao qual boa
parte das revendedoras da iguaria tem de se sujeitar para garantir qualidade.
O aparelho em si do tamanho de cerca de duas garrafas normais de trs litros de vinho e conta com um
microcomputador com sistema tico para analisar o vinho. So necessrios 5 ml de vinho para fazer o
teste, que analisa a deflexo das ondas de luz de diferentes tamanhos que emanam do lquido quando
ele iluminado. Todo processo leva 30 segundos.</8>
<8 'L,7+=C#+"#R>NOVAS NOVDADES EM BREVE.</8>
</B(6>
</4"5L>
'L,+4'5#+" C5 C5'+( <(,:>
A utilizao desta tag uma forma prtica e rpida de alinhar bloco de texto. A abreviatura
DV significa diviso. Ao usar esta tag num bloco de texto voc estar atingindo todas as
tags dentro daquele bloco.
Sintaxe:
<(,: 'L,7+=. />
TEXTO E OUTRAS TAGS
TEXTO E OUTRAS TAGS </(,:>
Ex.:
<4"5L>
<4#'(>
<","L#>Utilizando a tag DV para alinhar</","L#>
</4#'(>
<B(6>
<42>RB ,(#+",*,C' :,+4) </42><8 'L,7+=B9)",*6>
Engenheiros da NEC System Technologies do Japo e da Mie University desenvolveram
um rob capaz de identificar vinhos falsificados. O aparelho detecta at <B>30D</B>
diferentes tipos de uva e deve ser usado para automatizar o atualmente demorado, custoso
e incerto processo de degustao de vinho ao qual boa parte das revendedoras da iguaria
tem de se sujeitar para garantir qualidade.<BR><8>
<(,: 'L,7+=C#+"#R>
O aparelho em si do tamanho de cerca de duas garrafas normais de trs litros de vinho e
conta com um microcomputador com sistema tico para analisar o vinho. So necessrios 5
Pg. 5 de 23
ml de vinho para fazer o teste, que analisa a deflexo das ondas de luz de diferentes
tamanhos que emanam do lquido quando ele iluminado. Todo processo leva 30
segundos.</8>
</(,:>
</B(6>
</4"5L>
CARACTERES ESPECAS
H caracteres que no podem ser obtidos por meio do teclado. Eles podem ser inseridos em
sua pgina atravs da especificao de um cdigo especial que o browser interpreta e
substitui por um caracter especfico. Esses cdigos podem ser obtidos utilizando-se uma
nomenclatura definida pela SO.
A norma SO utiliza um cdigo composto pelo caracter & seguido do smbolo # e, ento de
uma combinao numrica com ponto-e-virgula.
'L79+) C'R'C"#R#) #)8#C,',)
),5BL C'R'CA #)8#C,'L ),5BL C'R'CA #)8#C,'L
< &lt E à
> &gt F â
G { H ã
I } J ü
3 : K &
L ; M ®
= = / "
N @
a
ª
O $ P &ordm
Q % R ?
FAXAS DECORATVAS
<5'RS9##>
Atributos :
'L,7+ = alinha a faixa (left/right/middle)
B#4':,R = define a animao do texto (scroll/slide/alternate)
B7CLR = cor de fundo do texto
(,R#C",+ = direo do texto (right ou left)
4#,74" e ;,("4 = tamanho da faixa em pixels
4)8'C# e :)8'C# = define o tamanho das margens onde a faixa dever ser
posicionada.
L8 = n de vezes que o texto vai passar (para que o texto passe continuamente,
usa-se o valor inifinite)
)CRLL'59+" = define a velocidade do texto (2 a 5)
)CRLL(#L'6 = define a velocidade entre os intervalos (em torno de 20,
normalmente)
* No funciona no Netscape
Exemplo:
<MARQUEE ALGN="middle" BEHAVOR="scroll" BGCOLOR=YELLOW
DRECTON="right" HEGHT="50%" WDTH="80%" HSPACE=10 VSPACE=10
LOOP="infinite" SCROLLAMOUNT="2" SCROLLDELAY ="20" > Comando
MARQUEE</MARQUEE>
Pg. 6 de 23
Linha Horizontal
<HR> insere uma linha horizontal:
Essa linha tem diversos atributos, oferecendo resultados diversos.
<HR ),-#=7> insere uma linha de largura 7 (pixels):
<HR ;,("4=50%> insere uma linha que ocupa 50% do espao disponvel:
<HR ;,("4=30% 'L,7+=RIGHT +)4'(#> insere uma linha de comprimento 30% (do
espao disponvel), alinhada direita, sem efeito tridimensional:
<HR ),-#=30 ;,("4=2 'L,7+=LEFT COLOR=BLUE> insere uma linha de largura 30,
comprimento 2, alinhada esquerda na cor azul:
LSTAS
H basicamente dois tipos de listas:
As ordenadas, que contm uma srie de itens sem numera-los;
As no ordenadas, que atribuem um nmero para cada elemento da lista.
C5'+( <9L>
Este comando cria listas no ordenadas (9nordened List) que dever envolver o primeiro e o
ltimo item da lista. Cada item da lista deve ser precedido do comando <L,> (Line list).
Exemplo:
<9L>
<L,> ANA
<L,> BARTOLOMEU
<L,> AROVALDO
<L,> LAURA
</9L>
ANA
BARTOLOMEU
ARIOVALDO
LAURA
C5'+( <L>
Este comando cria listas ordenadas (rdened List) que dever envolver o primeiro e o ltimo
item da lista. Cada item da lista deve ser precedido do comando <L,> (Line list).
Voc poder personalizar sua lista ordenada com os atributos "68# e )"'R":
"68# pode assumir cinco valores para definir o tipo de numerao a ser usado na lista.
1 Especifica que os algarismos arbicos devem ser usados 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, ...).
' Especifica que as letras maisculas devem ser usadas para numerar a lista
(A, B, C, D, ...).
i Especifica que os algarismos romanos minsculos devem ser usados para numerar a
lista (i, ii, iii, iv, ...).
Pg. 7 de 23
, Especifica que os algarismos romanos maisculos devem ser usados para numerar a
lista (, , , V, ...).
Exemplo:
<8>Lista de Produtos</8>
<L>
<L,>Placa de rede 3Com
<L,>Conector RJ45
<L,>Cabo UTP CAT5
<L,>SWTCH 12 PORTAS
<L,>Roteador CSCO Srie 2500
</L>
Lista de Produtos
1 P!a"a de rede 3#o$
2 #o%e"tor R&45
3 #a'o UTP #AT5
4 ()IT#* 12 PORTA(
5 Roteador #I(#O (+rie 25,,
Agora usando o atributo "68#
<8>Lista de Produtos</8>
<L "68#=,>
<L,>Placa de rede 3Com
<L,>Conector RJ45
<L,>Cabo UTP CAT5
<L,>SWTCH 12 PORTAS
<L,>Roteador CSCO Srie 2500
</L>
Lista de Produtos
I P!a"a de rede 3#o$
II #o%e"tor R&45
III #a'o UTP #AT5
IV ()IT#* 12 PORTA(
V Roteador #I(#O (+rie 25,,
MAGENS
Para inserir uma imagem em uma pgina web utilizamos a tag
<,57 )RC=.endereo da imagem no HD>
Podemos acrescentar a esta imagem os seguintes atributos:
ATRIBUTO DESCRIO
;,("4=.valor em pixels. LARGURA DA MAGEM
4#,74"=.valor em pixels. ALTURA DA MAGEM
'L,7+=(left, right ou center) ALNHAMENTO DA MAGEM
'L"=.texto. TEXTO QUE R APARECER AO PASSAR O MOUSE
SOBRE A MAGEM OU TEXTO QUE SURGR CASO A
MAGEM NO POSSA SER VSUALZADA.
BR(#R=.valor em pixels. LARGURA DA BORDA DA MAGEM
:)8'C#=.valor em pixels. ESPECFCA O ESPAO A SER DEXADO ACMA E
ABAXO DA MAGEM
4)8'C#=.valor em pixels. ESPECFCA O ESPAO A SER DEXADO NAS LATERAS
DA MAGEM
Exemplo:
<,57 ;,("4=2?? 4#,74"=1?? 'L,7+=C#+"#R 'L"=.foto da ca&a. BR(#R=5?
:)8'C#=1? 4)8'C#=2? )RC=.C3T*"AB87.>
CLC'+( 95' ,57#5 C5 *9+(' (' 8C7,+'
<B(6 B'C!7R9+(=.endereo da imagem no HD.>
Pg. - de 23
'"R,B9") (' "'7 <B(6>
'"R,B9" (#)CR,UV
B7CLR=. / COR DO FUNDO DA PGNA
"#W"=. / COR DO TEXTO DA PGNA
L,+!=. / COR DOS LNKS
'L,+!=. / COR DOS LNKS QUANDO ACONADOS
:L,+!=. / COR DOS LNKS, DEPOS DE VSTADOS
Exemplo:
<B(6 B7CLR=X=??***'X "#W"=XBL9#X L,+!=X6#LL;X 'L,+!=X5'7#+"'X
:L,+!=XBL'C!X>
Pg. . de 23
LNKS E ANCORAS
C'5,+4) R#L'",:)
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, podemos 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.
Para criar um link com uma pgina
<' 4R#*=.endreo da pgina.>te1to YZe &er[ o lin\</a>
Ex.: <' 4R#*=.C3T),"#TC')'A4"5L.>5,+4' C')'</'>
Ou
<' 4R#*=.C3T),"#TC')'A4"5L.>
5,+4' C')'
</'>
Usando uma imagem como link
<' 4R#*=.C3T),"#TC')'A4"5L.><,57 )RC=.C3T),"#T5,+4'C')'AB87.></'>
Ou
<' 4R#*=.C3T),"#TC')'A4"5L.>
<,57 )RC=.C3T),"#T5,+4'C')'AB87.>
</'>
C'5,+4 'B)L9"
Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em
outro servidor.
EX.: <' 4R#*=.http://www.terra.com.br>&ite do "#RR'</'>
Pg. 1, de 23
TA?ELA(
As tabelas s:o muito importantes para o desig*er de uma home-page.
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 supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o
c+digo HTML para isso :
<4"5L>
<4#'(>
<","L#>Criando Tabelas</","L#>
</4#'(>
<B(6>
<C#+"#R><*+" CLR=BL9# ),-#=6>TABELA</*+"></C#+"#R>
<BR>
<"'BL# BR(#R=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
<"R> <! Cria a primeira linha da tabela>
<"(>PRMERA COLUNA </"(> <! Aui foi criada uma clula>
<"(>SEGUNDA COLUNA </"(>
<"(>TERCERA COLUNA </"(>
</"R> <! !echa a primeira linha da tabela>
<"R> <! Abre a segunda linha da tabela>
<"(> PRMERA COLUNA</"(>
</"R> <! "ncerra a #egunda linha da tabela>
</"'BL#> <! "ncerra a tabela>
</B(6>
</4"5L>
1-ALTERANDO A LARGURA DA CLULA
Para alterar a largura de uma clula da tabela basta acrescentar o par@metro ;,("4 dentro
da tag <"(>A
Exemplo1:
<"'BL# BR(#R=2>
<"R>
<"( ;,("4=1??> ;,("4=1??</"(>
<"( 'L,7+=5,((L# ;,("4=2??>;,("4=2?? ]8,W#L)^</"(>
</"R>
</"'BL#>
Pg. 11 de 23
O par@metro ;,("4 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 par@metro que :'L,7+=5,((L#, este par@metro tem a fun#:o de definir
o alinhamento do texto em relao s bordas SUPEROR e NFEROR. Ele aceita os valores
"8=TOPO, 5,((L#=MEO e B""5=BAXO.
Exemplo2:
<"'BL# BR(#R=2>
<"R>
<"( ;,("4=25Q> WDTH=25%</"(>
<"( 'L,7+=5,((L# ;,("4=<5Q>WDTH=75%</"(>
</"R>
</"'BL#>
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 Atil quando se quer dar destaque a uma clula em especial.
Exemplo:
<"'BL# BR(#R=?>
<"R>
<"( ;,("4=15? B7CLR=R#(>VERMELHO </"(>
<"( ;,("4=15? B7CLR=BL9#>AZUL </"(>
<"( ;,("4=15? B7CLR=R#(>VEMELHO</"(>
</"R>
<"R>
<"( ;,("4=15? B7CLR=BL9#>AZUL</"(>
<"( ;,("4=15? B7CLR=R#(>VEMELHO</"(>
<"( ;,("4=15? B7CLR=BL9#> AZUL</"(>
</"R>
</"'BL#>
Outra coisa que tambm pode ser feita mudar a fonte com os comandos de formata#:o
que voc9 j conhece, como <*+" CLR=>_ por exemplo.
Repare que no exemplo anterior n+s colocamos BORDER=0 e as clulas apareceram
coloridas, mas com um certo espa#amento entre elas, para tirarmos este espa#o devemos
acrescentar dentro da tag <"'BL#> o par@metro CELLSPACNG=0. Este par@metro elimina
por completo os espa#os entre as clulas.
Exemplo:
<"'BL# BR(#R=? C#LL)8'C,+7=?>
<"R>
<"( ;,("4=15? B7CLR=R#(>VERMELHO </"(>
<"( ;,("4=15? B7CLR=BL9#>AZUL </"(>
<"( ;,("4=15? B7CLR=R#(>VEMELHO</"(>
</"R>
<"R>
<"( ;,("4=15? B7CLR=BL9#>AZUL</"(>
<"( ;,("4=15? B7CLR=R#(>VEMELHO</"(>
<"( ;,("4=15? B7CLR=BL9#> AZUL</TD>
</"R>
</"'BL#>
Pg. 12 de 23
Outro par@metro que pode ser usado para separar espa#os em uma clula
C#LL8'((,+7 que inclui ou exclui espa#os de*tro da clula, ou seja, se voc9 tiver um
elemento (frase, texto, figura etc.) dentro da clula voc9 pode acrescentar espa#os por igual
nos quatros cantos da clula, fazendo com que seu texto ou figura n:o fique "grudado" nas
paredes da clula. Aproveite os exemplos anteriores e experimente usar este atributo para
ver como ele funciona.
sto j d uma idia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos
que encontramos na nternet s:o feito por intermdio de tabelas.
Voc9 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 voc9 j est um pouco mais familiarizado com o uso de tabelas e com seus
principais atributos, vamos ver como podemos aperfei#oar o uso de tabelas.
Em seguida descreveremos uma srie de outros atributos e comandos para tabelas:
<T(> ))) </T(>
Esta tag insere um cabe#alho dentro da clula. Na verdade a Anica diferen#a entre a tag
<TH> e a tag <TD> que a <TH> exibe o conteAdo da clula em negrito.
<'APTI&*> ))) </'APTI&*>
Exibe um texto centralizado em rela#:o B tabela, como se fosse uma legenda.
Exemplo:
<"'BL# BR(#R=1 C#LL)8'C,+7=2 C#LL8'((,+7=6> <! "sta linha inicia a tabela
com borda de espessura 1 $border%& espao entre as clulas ' $Cellspacing% e espao dentro
da clula ( $Cellpadding%>
<C'8",+>LEGENDA</C'8",+> <! Introdu) uma legenda na tabela>
<"R>
<"4>ConteAdo em negrito</"4> <! Insere o te*to na forma de cabealho
$negrito%>
</"R>
<"R>
<"4>ConteAdo em negrito</"4>
</"R>
</"'BL#>
Repare neste exemplo, que a legenda j sai centralizada com rela#:o a tabela e repare no
espa#o dentro da clula devido ao comando CELLPADDNG.
4-OS ATRIBUTOS COLSPAN E ROWSPAN
Estes atributos s:o muito importantes dentro da tag <"'BL#>A S:o eles que nos
possibilitam remodelar a disposi#:o das clulas dentro da tabela (MESCLAR CLULAS).
Exemplo:
<"'BL# BR(#R=2 C#LL8'((,+7=2>
<"R>
<"( CL)8'+=2>Exemplo do uso do COLSPAN</"(> <! O 2 mescla 2
clulas>
</"R>
<"R>
<"(>CCLULA 1</"(>
<"(>CCLULA 2</"(>
</"R>
</"'BL#>
Pg. 13 de 23
Neste exemplo vemos que na tag <"(> foi introduzido o par@metro COLSPAN. Este
par@metro tem a finalidade de dizer que sob a clula onde ele foi introduzido podemos ter
um certo nAmero de colunas. Logo, se voc9 quiser que uma clula ocupe uma Anica linha,
como no nosso exemplo, voc9 deve inserir o par@metro dentro da tag <"(> desta clula. A
quantidade de clulas que vir:o em baixo da clula que recebeu o atributo COLSPAN deve
ser de acordo com o nAmero especificado no par@metro.
Mas se quisermos definir uma Anica clula ocupando uma coluna inteira? Neste caso
usamos o atributo R;)8'+.

Exemplo:
<"'BL# BR(#R=2 C#LL8'((,+7=2>
<"R>
<"( R;)8'+=2>Exemplo do uso do ROWSPAN</"(>
<"(>CCLULA 1</"(>
</"R>
<"R>
<"(>CL9L' 2</"(>
</"R>
</"'BL#>
5-USANDO TABELAS COMO MOLDURAS
Um outro uso bastante interessante de tabelas como moldura para alguma figura.
Para isto basta voc9 iniciar uma tabela e definir um valor para BORDER.
Exemplo:
<"'BL# BR(#R=5>
<"R>
<"(> <,57 )RC=*&ME +A ,IGURA> </"(>
</"R>
</"'BL#>
Claro que voc9 deve usar com muito bom senso este artif.cio da tag <"'BL#>_ pois nem
sempre uma moldura em uma figura defini um bom layout (apar9ncia) 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 endere#o e o nome da figura.
Exemplo:
<"'BL# B'C!7R9+(=XfigZraA`2egX BR(#R=5>
<"R>
<"(><41>Que tal um mergulho agora ? </41></"(>
</"R>
</"'BL#>
Pg. 14 de 23
7- O a!"#$% RULES
Para escolher as linhas internas que ser:o mostradas dentro da tabela , usamos o atributo
R9L#) , dentro da tag <"'BL#> . Os complementos desse atributo s:o :
none : nenhuma linha interna ;
roa& : para as linhas horizontais entre cada linha da tabela ;
col& : para as linhas verticais entre cada coluna da tabela ;
all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) .
Veja uma tabela com todas as linhas internas ( default ) :
<"'BL# BR(#R R9L#)=all>
Outro exemplo sem as linhas internas :
<"'BL# BR(#R R9L#)=none>
Outro exemplo usando o complemento ROWS:
<"'BL# BR(#R R9L#)=roa&>
O Altimo exemplo usar o complemento COLS :
<"'BL# BR(#R R9L#)=col&>
&- D'(")")*% % Ta+a),% *a a#'-a ' C%-%!")*% .$a #%!*a./
aidth=XbalorX : Define a largura da tabela em pixels ou em porcentagem.
height=XbalorX : Define a altura da tabela em pixels ou em porcentagem.
bordercolor=.=cor. : Define a cor da borda.
Exemplo:
<"'BL# BR(#R=3 BR(#RCLR=#aaff33 WIDTH=400 HEIHT=400>
<"R>
<"(>PRMERA COLUNA </"(>
</"R>
<"R>
<"(> PRMERA COLUNA</"(>
<"R>
</"'BL#>

#feito 5'RS9## Movimentao do texto
BEHAVOR=SCROOL (Rola o texto constantemente)
BEHAVOR=SLDE (Rola o texto at o final da tela)
DRECTON=RGHT (Movimenta o texto para a direita)
DRECTON=LEFT (Movimenta o texto para a esquerda)
WDTH=100% (Tamanho da tela para movimentao)
EX:
<MARQUEE BEHAVOR=SCROLL DRECTON=RGHT WDTH=100%> direita
</MARQUEE>
<MARQUEE BEHAVOR=SCROLL DRECTON=LEFTT WDTH=90%> esquerda
</MARQUEE>
<MARQUEE BEHAVOR=SLDE DRECTON=LEFTT WDTH=60%>slide esquerda
</MARQUEE>
<MARQUEE BEHAVOR=SLDE DRECTON=RGHT WDTH=40%> slide direita
</MARQUEE>
Pg. 15 de 23
FRAMES
Frames (quadros) a funo do frame dividir sua tela em partes.
Fazer frames tem o mesmo procedimento que confec#:o de home-pages simples, a
diferen#a que se deve trocar a tag <B(6> pela tag <*R'5)#">
Para termos uma home-page com frames devemos ter tr9s pginas, uma com o c+digo
que contm a tag <*R'5#)#"> e duas outras com os c+digos onde ser:o inseridas
as pginas de cada frame.
Uma documento HTML simples seria assim :
<4"5L>
<4#'(>
<","L#>Pgina simples </","L#>
</4#'(>
<B(6> 'este campo e*tram os coma*dos em geral
</B(6>
</4"5L>
J um documento HTML que teria frames ficaria assim:
<4"5L>
<4#'(>
<","L#>Pgina com Frame </","L#>
</4#'(>
<*R'5#)#"> 'E(TE "AM$O E'T%AM A( "HAMADA( $A%A O(
DO"EME'TO( DO( ,%AME(
</*R'5#)#">
</4"5L>
Pg. 16 de 23
Exemplo:
0 " CRIA#DO O $RA%E
<4"5L>
<4#'(>
<","L#> ESTE O FRAME</","L#>
</4#'(>
<*R'5#)#" CL)=2?Q _ >?Q> <! Este comando inicia o frame e divide a tela do
navegador em 2 partes, uma com 20% da tela e outra com 80%>
<*R'5# )RC=*R'5#1A4"5L> <! Este comando chama as pginas HTML
que devem ocupar a coluna de 20%>
<*R'5# )RC=*R'5#2A4"5L><! Este comando chama as pginas HTML
que devem ocupar a coluna de 80%>
</*R'5#)#">
</4"5L>
Pg. 17 de 23
2,/
-,/
0& " CRIA#DO AS '()I#AS DO $RA%E
Agora vamos crias os c+digos para serem inseridos nas duas colunas que criamos.
<4"5L>
<4#'(>
</4#'(>
<B(6>
<f+" ),-#=5 CLR=R#(>#)"# # *R'5#?1</*+"#>
</B(6>
</4"5L>
Salve este exemplo como FRAME1.HTML. Por que ? Porque no c+digo que geramos no
exemplo de frames chamamos a pgina com o comando <*R'5# )RC=*R'5#1A4"5>, se
voc9 salvar o nome do c+digo de forma diferente dever alterar tambm o c+digo da pgina
de frame.
<4"5L>
<4#'(>
</4#'(>
<B(6>
<*+" ),-#=< CLR=7R##+><B>#)"# # *R'5#?2</B></*+">
</B(6>
</4"5L>
Este c+digo deve ser salvo como FRAME2.HTML, pelo mesmo motivo do c+digo anterior.
Sempre lembrando que estas pginas devem estar no mesmo D&%ETF%&O.
Pronto, voc9 conseguiu fazer a sua primeira pgina com frame.
Pg. 1- de 23
Alem de poder dividir o navegador em colunas com o par@metro COLS dentro da tag
<*R'5)#"> , voc9 tambm pode dividir em linhas usando o par@metro ROWS, ou
ainda dividindo em colunas e linhas ao mesmo tempo.
<4"5L>
<4#'(>
<","L#> Exemplo de frame</","L#>
</4#'(>
<*R'5#)#" R;)=5?Q _ 5?Q> <! Este comando inicia o frame e divide a tela do
navegador em 2 partes, uma com 50% da tela e
outra com 50%>
<*R'5# )RC=*R'5#1A4"5L> <! Este comando chama as pginas
HTML que devem ocupar as colunas divididas
pelo frame>
<*R'5# )RC=*R'5#2A4"5L>
</*R'5#)#">
</4"5L>
Pg. 1. de 23
CRIA#DO $RA%E DE#TRO DE $RA%E
Uma tag <*R'5#)#"> pode ser inserida dentro da outra gerando assim frames dentro
de frames, como no c+digo abaixo:
<4"5L>
<4#'(>
<","L#> FRAME DENTRO DE FRAME</","L#>
</4#'(>
<*R'5#)#" CL)=5?Q_5?Q>
<*R'5#)#" R;)=5?Q_5?Q>
<*R'5# )RC=*R'5#1A4"5L>
<*R'5# )RC=*R'5#2A4"5L>
</*R'5#)#">
<*R'5#)#" R;)=5?Q_5?Q>
<*R'5# )RC=*R'5#3A4"5L>
<*R'5# )RC=*R'5#4A4"5L>
</*R'5#)#">
</*R'5#)#">
</4"5L>
Este c+digo gera a seguinte pgina :
Pg. 2, de 23
PARMETROS DE FRAMES
8arFmetro )RC da tag <*R'5#>
Este par@metro 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 voc9 de colocar no
lugar uma URL completa. Por exemplo:
<*R'5# )RC=htt23//aaaAyahooAcom>
Com este comando voc9 ser capaz, devidamente conectado, de chamar esta pgina
para a seu frame, onde quer que ela esteja na nternet.
$ar@metro 'AME
Este um dos principais par@metros da tag <*R'5#>A Ele serve, como era de se
esperar, para definir o nome do frame. Ele deve ser usado em conjunto com outro
par@metro que o TARGET.
8arFmetro 5'R7,+;,("4
Define a margem entre as laterais do frame e seu conteAdo. Exemplo:
<*R'5# )RC=*R'5#1A4"5 5'R7,+;,("4=1??>
Este comando cria uma margem de 100 pixels de cada lado do frame.
Par-%etro MARGI*(EIG(T
Da mesma forma que MARGNWDTH, este par@metro define uma dist@ncia de
margem, que neste caso a margem superior e inferior do frame. Exemplo:
<*R'5# )RC=*R'5#1A4"5 5'R7,+4#,74"=1??>
D um espa#o de 100 pixels entre as margens superior e inferior do frame.
8arFmetro )CRLL,+7
Define se o frame ter ou n:o barras de rolagem. Por default quando o conteAdo de
uma pgina excede o tamanho do frame as barras de rolagem s:o acrescentadas
automaticamente. Os valores vlidos para )CRLL,+7 s:o 6#), + e '9".
Exemplo:
<*R'5# )RC=*R'5#1A4"5 )CRLL,+7=6#)>
8arFmetro "'R7#"
Este o mais importante de todos os par@metros. Ele trabalha em conjunto com
+'5# e permite que coloquemos um link em um frame e o resultado, ou seja, a
pgina linkada, aparece em outro frame.
Vejamos um exemplo de como podemos LGAR um frame com outro. Vamos construir uma
pgina que possua um menu de op#>es do lado esquerdo, para isso podemos aproveitar os
c+digos de exemplo abordados anteriormente.
Os c+digos s:o:
,%AME8HTM
<4"5L>
<4#'(>
<","L#>FRAME</","L#>
</4#'(>
<*R'5#)#" CL)=25Q_<5Q>
<*R'5# )RC=*R'5#1A4"5L )CRLL,+7=+>
<*R'5# )RC=*R'5#2A4"5L +'5#="#)"#>
</*R'5#)#">
Pg. 21 de 23
</4"5L>
,%AMEG8HTM
<4"5L>
<4#'(>
<","L#>FRAME1</","L#>
</4#'(>
<B(6 B7CLR=6#LL;>
<C#+"#R><42>Escolha um Link</42></C#+"#R>
<BR>
<' 4R#*=htt23TTaaaAterraAcom "'R7#"="#)"#>Site Terra</'>
<BR>
< ' 4R#*=htt23TTaaaAZolAcom "'R7#"="#)"#>Site Uol</'>
<BR>
<' 4R#*=*R'5#2A4"5 "'R7#"="#)"#>Volta para Frame2.htm</'>
</B(6>
</4"5L>
,%AME68HTM
<4"5L>
<4#'(>
<","L#>FRAME2</","L#>
</4#'(>
<B(6>
<C#+"#R><42>Os links ao lado dever:o aparecer neste lado do
Navegador</42></C#+"#R>
<BR>
<C#+"#R>
<*+" ),-#=4>Este frame o que foi nomeado como TESTE com o
par@metro NAME em Frame.HTM</*+">
</C#+"#R>
</B(6>
</4"5L>
Se tudo funcionar convenientemente voc9 dever visualizar sua pgina como abaixo,
Pg. 22 de 23

Pg. 23 de 23

Apostila HTML Basico Coteca

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

Apostila HTML Basico Coteca

Caricato da

Copyright:

Formati disponibili

O que HTML?

HTML (Hypertext Markup Language) Linguagem de Marcao de Hipertexto

Potrebbero piacerti anche