View
729
Download
2
Category
Preview:
Citation preview
TAGS<html></html> <head></head>
<TITLE> Título da Página </TITLE><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></body>
<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">
<hr> linha horizontal
Exemplo:<hr width="200" size="4"><hr width="50%" align="left"><hr size="8" color="#00ff00" align="right" noshade>
width: define o comprimento da linha em pixels ou em percentagem relativamente à largura do ecrã.
size: define a espessura da linha em pixels. align: define o alinhamento da linha que
pode ser left, center e right. noshade: para que a linha não seja
sombreada. é acrescentado no final dos parâmetros da etiqueta <hr>.
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ÇÕESA etiqueta usada para criar links é <a> … </a>.
Existem 4 noções fundamentais no trabalho com hiperligações: Link – ligação de um ponto da página a
um determinado recurso (página web, outro ficheiro, outro ponto na página, etc).
Âncora – local da página, marcado com
Parâmetros etiqueta <a> href=“URL” - onde se coloca o URL
pretendido. Pode ser o nome de um ficheiro que se encontra na mesma directoria, endereço na internet, âncora na mesma página ou noutra, etc.
name=“texto” – tem como finalidade marcar um destino num lugar na página para o href - âncora.
uma etiqueta, de onde é feito o link. Hiper-referência – designação do
endereço do recurso para onde é feito o link. URL – localização uniforme de recurso,
isto é, o endereço completo do recurso para onde é feito o link.
target - define a janela destino onde se vai aceder ao link. Se omitido, o link é acedido na mesma janela onde se encontra a página. 2 significa que abre numa nova janela do browser.
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
<a href=”#ancora”> texto a apresentar </a> - Cria um link para outro ponto na própria página.
A âncora, informada no parâmetro href, indica o nome do ponto para onde a página será direccionada.
O uso do #, no parâmetro href, indica ao browser que se trata de um link para a própria página.
<a name=ancora> texto a apresentar</a> - Cria um ponto de acesso para um link.
A âncora, informada no parâmetro name, indica a localização que dá acesso ao link.
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
<a href="outrapagina.html"><img src="carro.jpg" border="0"></a>
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
<a href="arquivo.zip">Clique para baixar</a>
<a href="mailto:seue-mail@seuprovedor.com">Fale Connosco
</a>
ImagensParâmetros: src – parâmetro obrigatório e
fundamental que serve para identificar a origem da imagem (URL);
Ex. <img src="casa.jpg">alt – permite fornecer uma
descrição da imagem, constituída por um texto, que aparece quando o ponteiro do rato lhe passa por cima ou quando não é logo aberta.
align – permite alinhar a imagem na página. As opções disponíveis são: top (topo), middle (meio), bottom (em baixo), left (esquerda), rigth (direita).
border - determina a espessura da borda da imagem. No caso de uma imagem sem bordas, este atributo não precisa ser citado.
width e height – especificam a largura e altura da imagem. Os valores podem ser dados em pixels ou percentagem.
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
Ex. <img src=“imagem.bmp" alt=“Escola">
Exemplo:<img src=“imagem.bmp"
align="center"><img src=“imagem.bmp"
aling="top">
Exemplo:<img src="casa.jpg"
border="10"><img src="casa.jpg"
border="0">
Exemplo:<img src="casa.jpg"
width="333" height="200"><img src="casa.jpg"
width="100%" height="20%">
pixels.Exemplo:<img src="casa.jpg" hspace="0"
vspace="0"><img src="casa.jpg" hspace="30"
vspace="30">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.
Inserir Vídeo (IE) A etiqueta <img> permite inserir vídeo numa
página HTML acrescentando o parâmetro dynsrc apenas para o Internet Explorer.
Parâmetros: 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.
Exemplo: <img dynsrc=“video.mpeg" width="321" height="321">
src – Caso o vídeo não possa ser exibido pelo browser, apresenta uma imagem alternativa.
Exemplo: <img dynsrc=“video.mpeg" src="carro.jpg">
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”);
Exemplo: <img dynsrc="video.mpeg" start="mouseover">
loop - Específica o n.º de vezes que o vídeo vai ser exibido. Para exibir continuamente usa-se loop=infinite.
Exemplo: <img dynsrc=“video.mpeg" loop="infinite">
Inserir Vídeo (tds browsers) <embed> - etiqueta que permite ver vídeos num
player com os botões para executar, parar, etc.Parâmetros:
src - específica o endereço do vídeo. width e height - especificam respectivamente a
largura e altura do quadro onde o vídeo vai aparecer.
Exemplo: <img dynsrc=“video.mpeg">
Exemplo: <embed src=“video.mpeg" width="300" height="300“>
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”).
Exemplo: <embed src=“video.mpeg" width="300" height="300" autostart="false“>
loop – define se o vídeo se repete (loop=“true”) ou não (loop=“false”)
Exemplo: <embed src=“video.mpeg" width="300" height="300" autostart="true“ loop="false">
Painel Rolante <marquee> texto a servir de letreiro </marqee> Permite que um texto ou fotos passem
continuamente de um lado para o outro do ecrã.Parâmetros:
behavior - especifica o tipo de movimento : scroll: o texto passa continuamente pelo
letreiro na direcção especificada, entrando por um lado e saindo pelo outro.
slide: o texto passa por um dos cantos do letreiro, parando ao chegar ao canto oposto e permanecendo no ecrã.
alternate: o texto passa de um lado ao outro das extremidades do letreiro, permanecendo sempre no ecrã.
bgcolor - específica a cor de fundo do letreiro. direction - específica a direcção na qual o texto
irá mover-se . As opções são: left: o texto move-se do canto direito
para o esquerdo. right: o texto move-se do canto esquerdo
par o direito. down: o texto move-se de cima para
baixo. up: o texto move-se de baixo para cima.
height e width - especifica a altura e a largura do letreiro. O valor pode ser dado em pixels ou em relação a altura e largura da janela em que a página será exibida.
hspace e vspace- definem as margens do letreiro. Exemplo: <marquee hspace="30">este é o
letreiro </marquee> 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.
Exemplo: <marquee loop="5">este é o letreiro </marquee>
Exemplo: <marquee behavior="scroll">Bom dia mundo!</marquee>
<marquee behavior="slide">Bom dia mundo!</marquee>
<marquee behavior="alternate">Bom dia mundo!</marquee>
Exemplo: <marquee direction="left"> texto</marquee>< marquee direction="right"> texto</marquee>
<marquee direction="down"> texto</marquee>
<marquee direction="up"> texto</marquee>
Exemplo: <marquee height="50“
width="100%"> este é o letreiro</marquee>
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.
Exemplo: <marquee scrollmount="50">este é o letreiro </marquee>
Utilização de som em páginas Formatos mais comuns de som usados na
internet: Standard MIDI File – música instrumental
codificada digitalmente; WAV – som gravado e compactado
digitalmente; MPEG Layer 3 ou MP3 - som gravado e
compactado digitalmente; Real Áudio - som gravado e compactado
digitalmente, mas com mais proporção de bits.
O som será ouvido na página se o browser possuir recursos necessários à execução do respectivo formato de arquivo.
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.
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
<a href=“nome do ficheiro.wav"> clique para ouvir!</a>
Quando o utilizador clicar no link será aberto o programa associado a este tipo de ficheiro, por exemplo, o Windows Media Player.
Exemplo: <a href="music.mp3">Clique para ouvir</a>
Som de fundo na página <bgsound src=“ficheirode som.mp3"
loop="número de repetições"> Marcador utilizado para colocar som de fundo na
página. Deve ser colocado dentro do cabeçalho <head>
Parâmetros: src - define qual o ficheiro de origem, que pode
estar em vários formatos. loop - controla o número de repetições do som.
INFINITE ou -1 permite que seja tocado constantemente enquanto o utilizador
Exemplo:<html><head><title> Som de fundo </title><BGSOUND SRC="fundo.mp3" LOOP="-1"></head><body><p>Escute a música de fundo!!! </p></body></html>
permanecer na página.
Som de fundo com o marcador embed
<embed src="arquivo de som.mp3" width="0" height="0" autostart="true“ loop="opção">
Permite que um som de fundo da página seja aceite pelo Internet Explorer e pelo Netscape.
Parâmetros: loop - aceite apenas pelo Explorer, controla o
número de repetições do som. loop="true" permite que um som seja executado constantemente enquanto o utilizador estiver na página.
Exemplo:<html><head><title>som </title></head><body><p>escute a música de fundo!!!</p><embed src="fundo.mp3" width="0" heigth="0" autostart="true" loop="true"></body></html>
Tabelas Utilizadas como recurso essencial para o layout
geral da página através do posicionamento de imagens e texto.
As tabelas são compostas de linhas dentro das quais são colocadas células de conteúdo.
O conteúdo de cada célula pode ser texto, imagem ou até mesmo outra tabela.
Uma tabela é delimitada com as etiquetas <table>…</table>. Entre elas são colocadas as linhas e as colunas da tabela.
Parâmetros: border – define a presença ou a ausência de borda
na tabela bem como a sua espessura. Se não tiver borda não se coloca o parâmetro.
Exemplo: <table border="10"> width e height - indica o tamanho da tabela. Se se
usar percentagem, significa que a tabela irá adaptar-se ao tamanho do ecrã (100%).
Exemplo: <table width="50%" height="100%"> align - especifica a posição da tabela, que pode ser
left, right ou center. Exemplos:
<table align="left"><table align="right"><table align="center">
cellpadding - especifica o deslocamento do conteúdo da célula em relação às bordas de cada uma.
Exemplo: <table cellpadding="0"> cellpacing - Especifica o espaçamento entre as
células da tabela. Exemplo: <table cellpacing="0"> bordercolor e bgcolor - Especifica respectivamente
a cor da borda e a cor da tabela. Exemplo: <table border="1"
bordercolor="#333333" bgcolor="#999999"> background - Especifica a imagem de fundo da
tabela.
Exemplo: <table background="casa.jpg">
Titulo da tabela e cabeçalho das colunas
<caption> …</caption> - onde se coloca o titulo da tabela.
Exemplo: <caption> Tabela de vendas </caption> <th> …</th> - define o cabeçalho de cada coluna
da tabela.Parâmetros:
align valign colspan rowspan bgcolor
Linhas <tr>…</tr> - define cada linha da tabela
Parâmetros: align - Alinhamento horizontal. Os valores podem
ser LEFT, RIGHT ou CENTER. Exemplo: <tr align="left"></tr> valign - Alinhamento na vertical. Os valores
podem ser : top - topo da célula middle - região mediana da célula baseline - alinha a linha de base do texto
da célula com o texto da linha bottom - alinha o conteúdo da célula com
a região inferior da célula Exemplo: <tr valign="baseline"></tr> colspan e rowspan – Permite unir colunas e linhas
de uma tabela. Exemplo: <tr colspan="3" rowspan="2"></tr>
Células <td>…</td> - define cada célula de uma tabela. Com excepção dos parâmetros border, cellpacing
e cellpadding que são exclusivos da tabela, cada célula possui os mesmos parâmetros da tabela como: bgcolor, background, width, height, e outros. Além disso, cada célula pode ter o seu conteúdo alinhado horizontalmente e verticalmente.
Exemplo:<td bgcolor="valor"></td><td background="imagem.jpg"></td><td width="largura"></td><td height="altura"></td>
<html><head><title>TABELAS</title></head><body><table width="60%" border="3" align="center" bordercolor="blue" bgcolor="pink"><caption> <h1>Tabela de exemplo 1</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 width="32%" bgcolor="green">...</td> <!--células da primeira linha--><td width="33%">...</td><td width="35%">...</td></tr><tr> <!--definição da segunda linha da tabela--><td width="32%"> ... </td> <!--células da segundalinha--><td width="33%" bgcolor="red"><td width="35%"> ... </td></tr><tr> <!--definição da terceira linha da tabela--><td width="32%"> ... </td> <!--células da terceira linha--><td width="33%"> ... </td><td width="35%" bgcolor="blue"> ... </td></tr></table></body></html>
A construção da tabela é feita linha a linha, logo, a soma do tamanho horizontal das células: É igual a 100% caso o tamanho da tabela seja relativo (usos de percentagem); É igual ao tamanho horizontal da tabela, caso esta seja definida em termos absolutos(pixels)
<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 As frames permitem dividir o ecrã de forma a ser
possível enquadrar mais do que uma página. É muito fácil colocar Frames em páginas, mas
nem todos os utilizadores gostam de usar frames, preferindo o uso de tabelas.
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.
As frames são criadas da esquerda para a direita e de cima para baixo.
<frameset>…</frameset> - especifica um conjunto de frames a criar.
Parâmetros: rows - Especifica a disposição das frames
horizontais. Os valores são separados por virgulas e podem ser dados em pixels ou percentagem.
Exemplo: <frameset rows=“50%,50%"> cols - Especifica a disposição das frames verticais.
Os valores são separados por virgulas e podem ser dados em pixels ou percentagem.
Exemplo: <frameset cols=“20%,80%"> 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">
<frame> - etiqueta que permite definir cada uma das frames definidas com frameset.
Parâmetros: src - Especifica a página a ser exibida pela frame. Exemplo: <frame src="topicos.html"> name - Especifica o nome da frame onde a página
vai ser exibida. Exemplo: <frame src="topicos.html"
name="topicos">
id – parâmetro com a mesma função do name. Geralmente mais usado para formatações via CSS.
Exemplo: <frame src="topicos.html" id="topicos">
noresize – Se usado, não permite que a área da frame seja redimensionada.
Exemplo: <frame src="topicos.html" noresize> 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).
Exemplo: <frame src="topicos.html" scrolling="auto">
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.
Exemplo: <frame src="topicos.html" frameborder="0">
marginwidth - Especifica o espaço a ser deixado entre o conteúdo da frame e as suas margens esquerda e direita.
Exemplo: <frame src="topicos.html" marginwidth="3">
marginheight - Especifica o espaço a ser deixado entre o conteúdo da frame e as suas margens superior e inferior.
Exemplo: <frame src="topicos.html" marginheight="3">
noframes – Define o que será exibido caso o browser não suporte o uso de frames. É utilizado dentro das delimitações do <FRAMESET>.
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 documentoque 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 <b> ... </b> aplica negrito ao texto. <i> ... </i> aplica itálico ao texto. <tt> ... </tt> aplica espaçamento fixo
entre os caracteres do texto, simulando uma máquina de escrever.
<u> ... </u> aplica sublinhado ao texto. <strike> ... </strike> ou <s> ... </s> aplica
o efeito riscado no texto. <big> ... </big> aumenta o tamanho da
letra. <small> ... </small> reduz o tamanho da
letra. <sub> ... </sub> aplica o efeito subscrito
no texto. <sup> ... </sup> aplica o efeito
sobrescrito no texto.
Listas não ordenadas <UL> … </UL> determinam o início e o fim da
lista. <LI> Lista cada um dos subitens da lista. Não é
necessário fechar a etiqueta com </LI> Esta etiqueta pode levar o parâmetro TYPE que
indica qual o símbolo que vai ser usado para demarcar cada elemento da lista. Pode ser "DISC" (bola preta), "CIRCLE“ (bola preta sem preenchimento) ou "SQUARE“ (quadrado).
<ul type="disc"><li> Curitiba </li><li> São Paulo </li><li> Rio de Janeiro </li></ul><ul type="circle"><li> Curitiba </li><li> São Paulo </li><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> ... </ol> determinam o início e o fim da lista. <li> determina um item da lista, e não necessita
do </li>. O parâmetro TYPE, da etiqueta <ol> permite
escolher o tipo de numeração que será aplicada à lista. As opções disponíveis são:
1 – Numeração iniciada pelo número 1. A – Letras do alfabeto em maiúsculas. a – Letras do alfabeto em minúsculas. I – Numeração romana, com maiúsculas. i – Numeração romana, com minúsculas. O parâmetro START especifica o número do
primeiro elemento da lista.
<ol type=1> <li> Primeiro item <li> Segundo item</ol><ol type=A><li> Primeiro item<li> Segundo item</ol><ol type=a><li> Primeiro item<li> Segundo item</ol><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>
Recommended