Vous êtes sur la page 1sur 14

c

c
 
c
 
 c
<TITLE> Título da Página </TITLE>
 
 c <meta name="Description" CONTENT="Conteúdo da Página">
<meta name="KeyWords" CONTENT="palavra-chave da página">
<base href="endereço">
<isindex pront="mensagem">

  
  

<body bgcolor="cor">
<body background="url da imagem">
<body text="cor͞>
<body link="cor" vlink="cor" alink="cor">
<!--comentário -->
<p> texto </p>
<p align=͞alinhamento">
<br>
<font face="nome da fonte" size="tamanho da fonte" color="cor da fonte"></font>
<basefont face="nome da fonte" size="tamanho da fonte" color="cor dafonte">
c

<hr> linha horizontal


¦c width: define o comprimento da linha em
¦c Exemplo: pixels ou em percentagem relativamente à
<hr width="200" size="4"> largura do ecrã.
<hr width="50%" align="left"> ¦c size: define a espessura da linha em pixels.
<hr size="8" color="#00ff00" align="right" noshade> ¦c align: define o alinhamento da linha que pode
ser left, center e right.
c ¦c noshade: para que a linha não seja sombreada.
é acrescentado no final dos parâmetros da
etiqueta <hr>.
¦c color: define uma cor para a linha.

<H1> Aqui vai o título 1</H1>


Existem 6 níveis de títulos desde H1 (maior) até H6 (menor)

HIPERLIGAÇÕES Parâmetros etiqueta <a>


¦chref=͞URL͟ - onde se coloca o URL pretendido.
A etiqueta usada para criar links é <a> ͙ </a>.
Pode ser o nome de um ficheiro que se encontra
na mesma directoria, endereço na internet,
Existem 4 noções fundamentais no trabalho com
âncora na mesma página ou noutra, etc.
hiperligações:
¦cname=͞texto͟ ʹ tem como finalidade marcar um
¦cLink ʹ ligação de um ponto da página a um determinado
destino num lugar na página para o href -
recurso (página web, outro ficheiro, outro ponto na
âncora.
página, etc).
¦ctarget - define a janela destino onde se vai
¦clncora ʹ local da página, marcado com uma etiqueta, de
aceder ao link. Se omitido, o link é acedido na
onde é feito o link.
mesma janela onde se encontra a página. 2
¦cHiper-referência ʹ designação do endereço do recurso significa que abre numa nova janela do browser.
para onde é feito o link.
¦cURL ʹ localização uniforme de recurso, isto é, o endereço
completo do recurso para onde é feito o link. ¦c Exemplo:
<a href=͟exemplo.html͟>Exemplo</a><br>
<a href=http://www.google.pt
target=͞2͟>Google</a>

Hiperligação para outro ponto na


mesma página
¦c <a href=͟#ancora͟> texto a apresentar </a>
- Cria um link para outro ponto na própria
página.
¦c A âncora, informada no parâmetro href,
indica o nome do ponto para onde a página
será direccionada.
¦c O uso do #, no parâmetro href, indica ao
browser que se trata de um link para a
própria página.
¦c <a name=ancora> texto a apresentar</a> -
Cria um ponto de acesso para um link.
¦c A âncora, informada no parâmetro name,
indica a localização que dá acesso ao link.

¦c Exemplo:
<a name=inicio> Introdução </a> <!--cria uma
âncora no texto Introdução-->
͙
<a href=͞#inicio͟> Voltar ao inicio </a> <!--cria um
link para a âncora início no texto Introdução-->

Hiperligação a partir de uma imagem


¦c <a href="outrapagina.html"><img
src="carro.jpg" border="0"></a>
¦c A imagem fica com uma borda azul, uma vez
que, quando se usa uma imagem como link, esta
recebe automaticamente uma borda na cor
padrão dos links, neste caso azul. Para tirar a
borda é só acrescentar o parâmetro border="0"
no marcador <img>
Hiperligação para download de um
ficheiro ou mail
¦c <a href="arquivo.zip">Clique para
baixar</a>
¦c <a href="mailto:seue-
mail@seuprovedor.com">Fale Connosco
</a>
Imagens ¦c Ex. <img src=͞imagem.bmp"
Parâmetros: alt=͞Escola">
¦c src ʹ parâmetro obrigatório e
fundamental que serve para
identificar a origem da imagem
(URL); Exemplo:
¦c Ex. <img src="casa.jpg"> ¦c <img src=͞imagem.bmp"
¦c alt ʹ permite fornecer uma align="center">
descrição da imagem, constituída ¦c <img src=͞imagem.bmp"
por um texto, que aparece quando aling="top">
o ponteiro do rato lhe passa por
cima ou quando não é logo aberta. Exemplo:
¦c align ʹ permite alinhar a imagem na ¦c <img src="casa.jpg"
página. As opções disponíveis são: border="10">
top (topo), middle (meio), bottom ¦c <img src="casa.jpg"
(em baixo), left (esquerda), rigth border="0">
(direita).
¦c border - determina a espessura da Exemplo:
borda da imagem. No caso de uma ¦c <img src="casa.jpg"
imagem sem bordas, este atributo width="333" height="200">
não precisa ser citado. ¦c <img src="casa.jpg"
¦c width e height ʹ especificam a width="100%" height="20%">
largura e altura da imagem. Os
valores podem ser dados em pixels
ou percentagem.
¦c vspace e hspace- especificam o
espaço vertical e horizontal que
pode aparecer entre a imagem e o
texto mais próximo ou até mesmo
para outra imagem na linha
corrente. O valor é dado em pixels.
¦c Exemplo:
¦c <img src="casa.jpg" hspace="0"
vspace="0">
¦c <img src="casa.jpg" hspace="30"
vspace="30">
¦c Os atributos vspace e hspace são a
solução quando se quer trabalhar
com espaços em branco entre os
objectos da página, criando um
layout limpo e equilibrado.
¦c Exemplo: <img dynsrc=͞video.mpeg">
Inserir Vídeo (IE)
¦c A etiqueta <img> permite inserir vídeo numa
página HTML acrescentando o parâmetro dynsrc
apenas para o Internet Explorer.

Parâmetros:
¦c width e height ʹ Parâmetros que especificam
respectivamente a largura e a altura do vídeo. Para
que não ocorra um redimensionamento é preciso
que a imagem alternativa tenha as mesmas
dimensões que o vídeo.
¦c Exemplo: <img dynsrc=͞video.mpeg" width="321"
height="321">
¦c src ʹ Caso o vídeo não possa ser exibido pelo
browser, apresenta uma imagem alternativa.
¦c Exemplo: <img dynsrc=͞video.mpeg"
src="carro.jpg">
¦c start ʹ Permite definir quando é que o vídeo vai ser
exibido, se na abertura da página (start=͞fileopen͟)
ou quando o rato passar por cima do vídeo
(start="mouseover͟);
¦c Exemplo: <img dynsrc="video.mpeg"
start="mouseover">
¦c loop - Específica o n.º de vezes que o vídeo vai ser
exibido. Para exibir continuamente usa-se
loop=infinite.
¦c Exemplo: <img dynsrc=͞video.mpeg"
loop="infinite">

Inserir Vídeo (tds browsers)


¦c <embed> - etiqueta que permite ver vídeos num
player com os botões para executar, parar, etc.
Parâmetros:
¦c src - específica o endereço do vídeo.
¦c width e height - especificam respectivamente a
largura e altura do quadro onde o vídeo vai
aparecer.

¦c Exemplo: <embed src=͞video.mpeg" width="300"


height="300͞>

¦c autostart - especifica quando é que o vídeo vai ser


reproduzido, se no carregamento da página
(autostart=͟true͟) ou quando o botão executar for
clicado (autostart=͟false͟).
¦c Exemplo: <embed src=͞video.mpeg" width="300"
height="300" autostart="false͞>
¦c loop ʹ define se o vídeo se repete (loop=͞true͟) ou
não (loop=͞false͟)
¦c Exemplo: <embed src=͞video.mpeg" width="300"
height="300" autostart="true͞ loop="false">

¦c Exemplo: <marquee behavior="scroll">Bom


Painel Rolante dia mundo!</marquee>
<marquee
¦c <marquee> texto a servir de letreiro </marqee> behavior="slide">Bom dia mundo!</marquee>
¦c Permite que um texto ou fotos passem <marquee
continuamente de um lado para o outro do ecrã. behavior="alternate">Bom dia mundo!</marquee>
Parâmetros:
¦c behavior - especifica o tipo de movimento :
¦c scroll: o texto passa continuamente pelo
letreiro na direcção especificada, entrando
por um lado e saindo pelo outro.
¦c slide: o texto passa por um dos cantos do
letreiro, parando ao chegar ao canto oposto
e permanecendo no ecrã.
¦c alternate: o texto passa de um lado ao
outro das extremidades do letreiro,
permanecendo sempre no ecrã.
¦c bgcolor - específica a cor de fundo do letreiro. Exemplo: <marquee direction="left">
¦c direction - específica a direcção na qual o texto irá texto</marquee>
mover-se . As opções são: < marquee direction="right"> texto</marquee>
¦c left: o texto move-se do canto direito para o <marquee direction="down">
esquerdo. texto</marquee>
¦c right: o texto move-se do canto esquerdo <marquee direction="up">
par o direito. texto</marquee>
¦c down: o texto move-se de cima para baixo.
¦c up: o texto move-se de baixo para cima.
¦c height e width - especifica a altura e a largura do
letreiro. O valor pode ser dado em pixels ou em ¦c
relação a altura e largura da janela em que a página ¦c Exemplo: <marquee height="50͞
será exibida. width="100%"> este é o
¦c hspace e vspace- definem as margens do letreiro. letreiro</marquee>
¦c Exemplo: <marquee hspace="30">este é o letreiro
</marquee>
¦c loop - especifica quantas vezes o texto irá cruzar o
letreiro. Se não for mencionado ou se o n.º de vezes
for igual a infinite, o texto irá mover-se
constantemente pelo letreiro.
¦c Exemplo: <marquee loop="5">este é o letreiro
</marquee>
¦c scrollmount - define o n.º de pixels entre cada
redesenho do texto. Este valor representa a
quantia de pixels que separa cada redesenho -
quanto maior for o valor, mais rápido será o
movimento do texto.
¦c Exemplo: <marquee scrollmount="50">este é o
letreiro </marquee>
Utilização de som em páginas
¦c Formatos mais comuns de som usados na internet:
¦c Standard MIDI File ʹ música instrumental
codificada digitalmente;
¦c WAV ʹ som gravado e compactado
digitalmente;
¦c MPEG Layer 3 ou MP3 - som gravado e
compactado digitalmente;
¦c Real Áudio - som gravado e compactado
digitalmente, mas com mais proporção de
bits.
¦c O som será ouvido na página se o browser possuir
recursos necessários à execução do respectivo
formato de arquivo.
¦c MIDI e WAV geralmente são suportados pelos
browsers. Já o MP3 e o Real Audio requerem
instalação de plug-in, caso o browser não possua.
¦c As páginas que contêm ficheiros de som têm que
ser alojadas em servidores configurados para
aceitar som. Caso contrário, será exibida uma
página contendo uma série de caracteres estranhos.

Links para download músicas


c
¦c Y c c
c    c  c  c
 Y c
¦c Å 
cc  
c  cc cc cc
 cc 
c cc c
c  cc
  cc! 
c"
c# $ c
¦c à  %cY c  &' c  c
 Y c
c
¦c Exemplo:
Som de fundo na página <html>
¦c <bgsound src=͞ficheirode som.mp3" loop="número <head>
de repetições">c <title> Som de fundo </title>
¦c " 
c  
c  c  c c
c
c c <BGSOUND SRC="fundo.mp3" LOOP="-1">
  cc </head>
¦c Àcc 
c
c
c ( cY
c <body>
Parâmetros:c <p>Escute a música de fundo!!! </p>
¦c srcc)cc
 c cc  c
c  cc
c </body>
 c c c  cc </html>
¦c loopc)c  cc* c
c (+c
c c
,-.,-,/Ãcc)0c cc1 c
c
  c cc  
c  c
 c  cc
c
¦c Exemplo:
Som de fundo com o marcador <html>
embed <head>
¦c <embed src="arquivo de som.mp3" width="0" <title>som </title>
height="0" autostart="true͞ loop="opção">c </head>
¦c # cc c c
c
c
c  c1 c  c <body>
c,cà ccc-  cc <p>escute a música de fundo!!!</p>
<embed src="fundo.mp3" width="0" heigth="0"
Parâmetros:c autostart="true" loop="true">
¦c c)cc  c  ccà c  cc </body>
* c
c (+c
c cc c </html>
c c c1 c  
c   c
 cc  
c c c  c c
c c

Tabelas
¦c ƒ  
c  c c c  cc $c c

c  c  2c
c  c
c cc
  c
¦c Êc  c3c   c
c  c
c
c c
3c 
c 2 c
c *
 c
¦c Jc *
c
c
c 2 c
cc c  c
c 2c  c c  c
¦c ƒ c  c2c
 
c  c c  c
<table>͙</table> Ãc c3c 
c c  c
c c  c
c  c
Parâmetros:c
¦c borderc4c
 c c( cc c 5 c
c
c
 c  c c  c c c c6c3c c

c3cc  cc 7  c
¦c à  %cY cborder="10"> c
¦c widthccheightc)c 
cc c
c  c6cc
 c   c   cc c  c c
 )
c c c
c 3c8099:; c
¦c à  %cY cwidth="50%" height="100%">cc
¦c alignc)c  c c (3c
c  cc
cc
c cc  c
¦c à  %c
Y c  c
Y c   c
Y c   c
¦c cellpaddingc)c  cc
 c
c *
c

c 2 c c (3c<c
c
c
c c
¦c à  %cY ccellpadding="0">c
¦c cellpacingc)cà  cc ( cc c
2 c
c  c
¦c à  %cY ccellpacing="0">cc
¦c bordercolorccbgcolorc)cà  c   c c
c
c
cc c c
c  cc
¦c à  %cY c
0c
 =&&&&&&c
 =>>>>>>cc
¦c backgroundc)cà  c c  c
c
c
c
  c
¦c à  %cY c 
  1cc
c

/ c
c  cc ( c
c
 c
¦c <caption> ͙</caption> - c
cc  cc c
c
  c
¦c à  %cY  c/  c
c
cY  cc
¦c <th> ͙</th> )c
 cc ( c
c
c  c
c
  c
 tosÑ
¦c P 
¦c P 
¦c  P
¦c row P
¦c b o or


Linh s
¦c <t> </t> - dfin d linh d t bl 
 tos:
¦c li n-Alinh ntohoi ont l s lospod

sL 

G ouC N  
¦c Ãxplo:<t li n="lft"></t>
¦c  li n-Alinh nton ti l s lospod
s:
¦c top-topod  lul 
¦c iddl- i odi n d  lul 
¦c b slin- linh  linh db sdotxtod 
 lul ootxtod linh 
¦c botto- linh oontúdod  lul o 
 i oinfiod  lul 
¦c Ãxplo:<t li n="b slin"></t>
¦c olsp no sp nʹituniolun slinh s
du t bl 
¦c Ãxplo:<tolsp n="3"o sp n="2"></t>




C lul s

¦c <td></td>-dfin d  lul du t bl 
¦c Coxp odosp tosbodllp in 
llp ddin qus oxlusiosd t bl  d 
 lul possuiossosp tosd t bl 
oo:b olob  oundidthhi htoutos 
Al disso d  lul podtosuontúdo
linh dohoi ont lntti lnt 
¦c Ãxplo:
<tdb olo=" lo"></td> 
<tdb  ound="i  jp "></td>
<tdidth="l  u "></td>
<tdhi ht=" ltu "></td>

Y c
Y
c
Y /ÊÃÊ6Y c
Y
c
Y
$c
Y c
?9:c
&c   c

 c  c
Y  cY0/  c
c  c0Y0Y  c
Y  c0YcY)) ( c
c
c  ))c
Y  c@Yc
Y  c&Yc
YcY))
  (3c
c   c  c
c  ))c
Y
c
&@:c  Y
cY))
2 c
c   c  ))c
Y
c
&&: Y
c
c Y
c
&A: Y
c
Yc
YcY))
  (3c
c
c  c
c  ))c
Y
c
&@:c cY
cY)) 2 c
c

  ))c
Y
c
&&:c 
c
Y
c
&A:c cY
c
Yc
YcY))
  (3c
c   c  c
c  ))c
Y
c
&@:c cY
cY)) 2 c
c   c
  ))c
Y
c
&&:c cY
c
Y
c
&A:c c cY
c
Yc
Y c
Y
$c
Y c
c
<html>
<head>
<title>TABELAS</title>
</head>
<body>
<table width="40%" border="3" align="center"
bordercolor="blue" bgcolor="pink">
<caption> <h1>Tabela de exemplo
2</h1></caption>
<th>coluna 1</th> <!--cabeçalho de cada coluna-->
<th>coluna 2</th>
<th>coluna 3</th>
<tr> <!--definição da primeira linha da tabela-->
<td rowspan="3" width="32%" bgcolor="white">
Células unidas </td> <!--células da primeira linha-->
<td width="33%"> 1ª linha </td>
<td width="35%"> 1ª linha </td>
</tr>
<tr> <!--definição da segunda linha da tabela-->
<td width="33%">2ª linha</td>
<td width="35%"> 2ª linha </td>
</tr>
<tr> <!--definição da terceira linha da tabela-->
<td colspan="2" bgcolor="white"> Células Unidas
</td>
</tr>
</table>
</body>
</html>

Frames
¦c As frames permitem dividir o ecrã de forma a ser
possível enquadrar mais do que uma página.
¦c m muito fácil colocar Frames em páginas, mas nem
todos os utilizadores gostam de usar frames,
preferindo o uso de tabelas.
¦c A página onde a frameset é codificada não leva o
marcador <body> e tem a finalidade de definir o
layout a ser apresentado pelas Frames.
¦c As frames são criadas da esquerda para a direita e
de cima para baixo.

¦c <frameset>͙</frameset> - especifica um conjunto


de frames a criar.
Parâmetros:
¦c rows - Especifica a disposição das frames
horizontais. Os valores são separados por virgulas e
podem ser dados em pixels ou percentagem.
¦c Exemplo: <frameset rows=͞50%,50%">
¦c cols - Especifica a disposição das frames verticais.
Os valores são separados por virgulas e podem ser
dados em pixels ou percentagem.
¦c Exemplo: <frameset cols=͞20%,80%">
¦c framespacing - Especifica o espaçamento entre
frames. O valor é dado em pixels e depende do
browser utilizado. O valor 0 possibilita que não haja
espaços entre as frames.
Exemplo: <frameset framespacing="valor">

¦c <frame> - etiqueta que permite definir cada uma


das frames definidas com frameset.
Parâmetros:
¦c src - Especifica a página a ser exibida pela frame.
¦c Exemplo: <frame src="topicos.html">
¦c name - Especifica o nome da frame onde a página
vai ser exibida.
¦c Exemplo: <frame src="topicos.html"
name="topicos">

¦c id ʹ parâmetro com a mesma função do name.


Geralmente mais usado para formatações via CSS.
¦c Exemplo: <frame src="topicos.html" id="topicos">
¦c noresize ʹ Se usado, não permite que a área da
frame seja redimensionada.
¦c Exemplo: <frame src="topicos.html" noresize>
¦c scrolling - Determina a presença ou ausência de
barras de rolamento. Os valores podem ser: auto
(apresenta as barras de necessário), yes (apresenta
sempre), no (nunca apresenta).
¦c Exemplo: <frame src="topicos.html"
scrolling="auto">
¦c frameborder - Desenha um separador entre as
frames. Os valores 0 ou no não desenham nenhum
separador entre as frame. 1 ou yes desenha um
separador.
¦c Exemplo: <frame src="topicos.html"
frameborder="0">
¦c marginwidth - Especifica o espaço a ser deixado
entre o conteúdo da frame e as suas margens
esquerda e direita.
¦c Exemplo: <frame src="topicos.html"
marginwidth="3">
¦c marginheight - Especifica o espaço a ser deixado
entre o conteúdo da frame e as suas margens
superior e inferior.
¦c Exemplo: <frame src="topicos.html"
marginheight="3">

¦c noframes ʹ Define o que será exibido caso o


browser não suporte o uso de frames. m utilizado
dentro das delimitações do <FRAMESET>.
¦c Exemplo:
<frameset rows="30%,40%,30%">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
<noframes>
<p>
<a href="noframes.html">clique aqui</a> para ver uma
versão do documento
que não utiliza frames.
</p>
</noframes>
</frameset>

<html>
<head>
<title>Frames</title>
</head>
<frameset cols="20%,80%">
<frame name="pagina1" src="pag1_frame.html"
marginheight="10" marginwidth="10"
scrolling="auto" noresize>
<frame name="pagina2" src="pag2_frame.html"
marginheight="10" marginwidth="10"
scrolling="auto" noresize>
</frameset>
</html>
ESTILOS Físico
¦c <b> ... </b> aplica negrito ao texto.
¦c <i> ... </i> aplica itálico ao texto.
¦c <tt> ... </tt> aplica espaçamento fixo entre os caracteres
do texto, simulando uma máquina de escrever.
¦c <u> ... </u> aplica sublinhado ao texto.
¦c <strike> ... </strike> ou <s> ... </s> aplica o efeito riscado
no texto.
¦c <big> ... </big> aumenta o tamanho da letra.
¦c <small> ... </small> reduz o tamanho da letra.
¦c <sub> ... </sub> aplica o efeito subscrito no texto.
¦c <sup> ... </sup> aplica o efeito sobrescrito no texto.

Listas não ordenadas <ul type="disc">


¦c<UL> ͙ </UL> determinam o início e o fim da lista. <li> Curitiba </li>
¦c<LI> Lista cada um dos subitens da lista. Não é necessário <li> São Paulo </li>
fechar a etiqueta com </LI> <li> Rio de Janeiro </li>
¦cEsta etiqueta pode levar o parâmetro TYPE que indica </ul>
qual o símbolo que vai ser usado para demarcar cada <ul type="circle">
elemento da lista. Pode ser "DISC" (bola preta), "CIRCLE͞ <li> Curitiba </li>
(bola preta sem preenchimento) ou "SQUARE͞ <li> São Paulo </li>
(quadrado). <li> Rio de Janeiro </li>
</ul>
<ul type="square">
<li> Curitiba </li>
<li> São Paulo </li>
<li> Rio de Janeiro </li>
</ul>
Listas ordenadas <ol type=1>
¦c<ol> ... </ol> determinam o início e o fim da lista. <li> Primeiro item
¦c<li> determina um item da lista, e não necessita do </li>. <li> Segundo item
¦cO parâmetro TYPE, da etiqueta <ol> permite escolher o </ol>
tipo de numeração que será aplicada à lista. As opções <ol type=A>
disponíveis são: <li> Primeiro item
¦c1 ʹ Numeração iniciada pelo número 1. <li> Segundo item
¦cA ʹ Letras do alfabeto em maiúsculas. </ol>
¦ca ʹ Letras do alfabeto em minúsculas. <ol type=a>
¦cI ʹ Numeração romana, com maiúsculas. <li> Primeiro item
¦ci ʹ Numeração romana, com minúsculas. <li> Segundo item
¦cO parâmetro START especifica o número do primeiro </ol>
elemento da lista. <ol type=I>
<li> Primeiro item
<li> Segundo item
</ol>
LISTAS MISTAS
<h1>Coisas para fazer hoje</h1>
<ol> <!--lista ordenada-->
<li>Deixar o carro como novo</li> <!--1º item da lista
ordenada-->
<ul> <!--lista não ordenada-->
<li>Aspirar</li> <!--1º item da lista não ordenada-->
<li>lavar</li>
<li>limpar o pó</li>
</ul>
<li>Abastecer a casa de alimentos</li>
<ul>
<li>Ir ao super-mercado</li>
<li>Ir à padaria</li>
<li>Ir à peixaria</li>
</ul>
</ol>

Vous aimerez peut-être aussi