html - resumo

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"><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> …<a href=“#inicio”> Voltar ao inicio </a> 

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:[email protected]">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> <th>coluna 2</th><th>coluna 3</th><tr> <td width="32%" bgcolor="green">...</td> <td width="33%">...</td><td width="35%">...</td></tr><tr> <td width="32%"> ... </td> <td width="33%" bgcolor="red"><td width="35%"> ... </td></tr><tr> <td width="32%"> ... </td> <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> <th>coluna 2</th><th>coluna 3</th><tr> <td rowspan="3" width="32%" bgcolor="white"> Células unidas </td> <td width="33%"> 1ª linha </td><td width="35%"> 1ª linha </td></tr><tr> <td width="33%">2ª linha</td><td width="35%"> 2ª linha </td></tr><tr> <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> <li>Deixar o carro como novo</li> <ul> <li>Aspirar</li> <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>

html - resumo

Documents