Formadora: Liliana Paiva Turma: EST3 - UFCD 792 Data: ___/___/____

SEBENTA - HTML

Nome da formanda:

Introdução ao HTML
Títulos
O HTML tem 6 níveis de títulos, numerados de 1 a 6, sendo H1 o maior, enquanto que o
H6 o mais pequeno. Os títulos são mostrados em fontes maiores e/ou mais escuras que o
texto normal. Estes elementos permitem criar uma hierarquia num documento.

Align – especifica o alinhamento horizontal do cabeçalho, recebendo os valores center (texto

centralizado), right (texto alinhado à direita) e left (texto alinhado à esquerda).
Ex: <h1 align=”center”> Título 1 </h1>

Linha horizontal (separador)

<hr> insere uma linha horizontal
Ex: <hr size= ”altura” width=”largura” align=”alinhamento horizontal” NOSHADE>

SIZE – define a altura da linha, o seu valor pode variar de 1 a 100

Ex: <hr size=20>

WIDHT – define a largura da linha horizontal. Sendo que não pode ser um número qualquer
(em pixels) ou uma percentagem da largura da página
Ex: <hr widht=200> ou <hr width=50%>

NOSHADE – desenha a linha horizontal com preenchimento.

Ex: <hr noshade>

ALIGN – modifica o alinhamento da linha horizontal, tendo os seguintes valores: LEFT

(esquerda), RIGHT (direita) ou CENTER (centrado).
Formatação de texto
O HTML tem vários níveis de formatação, algumas delas: texto a negrito, texto a itálico,
texto sublinhado, etc.
Ex: <b> O texto está a negrito </b>
Ex: <big> O texto fica maior </big>
Ex: <i> O texto está em itálico </i>
Ex: <u> O texto está sublinhado </u>
Ex: <small> O texto está mais pequeno </small>
Ex: Texto normal ^{O texto fica mais acima.}
Ex: Texto normal _{O texto fica mais abaixo.}

Inserção de imagens
Embora o uso de imagens e facilidades multimédia seja atrativo, também poderá afastar
o utilizador da página devido ao tamanho e consequente tempo de download, como tal, deve
ter-se em consideração não colocar imagens de grandes dimensões.
A tag utilizada para inserir imagens é: <IMG>
<IMG> - utiliza-se para colocar uma imagem, dentro das delimitações da tag BODY
SRC – é a abreviatura de source (origem). Aqui coloca-se o caminho para a imagem.
Exemplo: <img src=”carro.jpg”>

ALIGN – alinhamento entre a imagem e o texto da página. Opções de alinhamento: left; right;
top; textop; middle; bottom e center.
Exemplo: <img src=”mota.jpg” align=”center”>
<img src=”mota.jpg” align=”top”>

BORDER – determina a espessura do bordo da imagem (caso seja necessário)

Exemplo: <img src=”desporto.jpg” border=”10”>
<img src=”desporto.jpg” border=”0”>

WIDTH e HEIGHT – especificam a largura e altura da imagem respetivamente. Os valores

podem vir em pixéis ou em proporção ao tamanho da página, no entanto, deve utilizar-se os
valores em pixéis, para evitar distorção da imagem.
Exemplo: <img src=”filme.jpg” width=”400” height=”200”>
<img src=”filme.jpg” width=”100%” height=”20%”>
VSPACE e HSPACE – especificam o espaço vertical (VSPACE) e horizontal (HSPACE), que
pode aparecer entre a imagem e o texto/imagem mais próximos. Valor dado é em pixéis.
Exemplo: <img src=”moto.jpg” hspace=”0” vspace=”0”>
<img src=”moto.jpg” hspace=”50” vspace=”50”>

Inserção de vídeos
A tag utilizada para inserir vídeos era: <EMBED>
<EMBED> - serve para inserir um vídeo com aspeto de um player.
SRC – Origem do vídeo.
WIDTH e HEIGHT – especificam a largura e altura do player onde vai aparecer o vídeo.
Exemplo: <EMBED SRC=”video.wmv” WIDTH=”400” HEIGHT=”400”>

NOTA: No entanto esta tag caiu em desuso com o aparecimento do HTML5.

Para inserir um vídeo podemos usar <VIDEO>

Exemplo: <VIDEO WIDTH=”400” HEIGHT=”400” CONTROLS>
<source SRC=”video.mp4” type=”video/mp4”>
</VIDEO>
Os três tipos de arquivos de vídeo suportados são:
Mp4 / webm / ogg

Inserção de hiperligações
Este tag é um pouco diferente dos que já vimos. Pode parecer confuso, mas não é. O tag <A>
é aquele destinado à introdução de uma link, mas, no entanto, necessita de um parâmetro (o
HREF) para indicar aonde é feita essa ligação. Tudo aquilo que se segue irá estar ‘linkado’, até
o tag ser fechado com </A>.
Exemplo: <a href="pagina.html "> outra página</a>.

Para criar uma ligação a uma página, que está na nossa pasta de trabalho teríamos o seguinte
exemplo: <a href="informacao.html "> Informação Pessoal</a>.
O parâmetro HREF pode conter também o endereço para outro site, como em
<a href="http://www.site.com"> (neste caso é indispensável o prefixo http://) ou qualquer
outro ficheiro sem ser .HTM ou .HTML. Por exemplo, para fazer uma link para download usar-
se-ia <a href="ficheiro">.

Também podemos colocar uma hiperligação numa imagem

Exemplo: <a href="filmes.html "> <img src=”filme.jpg”></a>.

TARGET - Onde abrir a página pretendida. As seguintes palavras-chave têm significados

especiais para onde carregar a página:
_self: Abre a página no próprio separador. Valor assumido por defeito.
_blank: Abre a página num novo separador.

Exemplo: <a href="filmes.html " target= _blank> <img src=”filme.jpg”></a>.