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 <sup> O texto fica mais acima. </sup>
Ex: Texto normal <sub> O texto fica mais abaixo. </sub>
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=”[Link]”>
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=”[Link]” align=”center”>
<img src=”[Link]” align=”top”>
BORDER – determina a espessura do bordo da imagem (caso seja necessário)
Exemplo: <img src=”[Link]” border=”10”>
<img src=”[Link]” 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=”[Link]” width=”400” height=”200”>
<img src=”[Link]” 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=”[Link]” hspace=”0” vspace=”0”>
<img src=”[Link]” 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=”[Link]” 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="[Link] "> 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="[Link] "> Informação Pessoal</a>.
O parâmetro HREF pode conter também o endereço para outro site, como em
<a href="[Link] (neste caso é indispensável o prefixo [Link] 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="[Link] "> <img src=”[Link]”></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="[Link] " target= _blank> <img src=”[Link]”></a>.