Você está na página 1de 53

Tcnico de Multimdia

0151 - Linguagem HTML e Construo de Pginas


para a Internet
Antnio Jos Arajo
07 de Novembro de 2011

Governo
da Repblica
Portuguesa

Introduo ao HTML
HTML (HyperText Markup Language) um
conjunto estruturado de instrues,
conhecidas por etiquetas ou tags (em
ingls), que dizem a um browser como
publicar uma pgina web, ou seja, o browser
interpreta essas etiquetas e desenha a
pgina no ecr. Estes conjuntos de
instrues esto agrupados em ficheiros de
tipo texto, i.e., sem qualquer tipo especial de
formatao.
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
A linguagem HTML marca texto como
sendo:
Links (hiperligaes);
Cabealhos;
Pargrafos;
Listas;
Entre outros.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
A linguagem HTML tambm suplementa
as pginas web com:
Formulrios;
Imagens;
Vdeos;
Outros objectos (Flash, Java, etc)

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
A linguagem HTML escrita usando
ELEMENTOS. Estes definem estruturas
no documento.
Os elementos so escritos usando TAGS
rodeadas pelos sinais < e >
Normalmente os elementos tem uma TAG
de incio e uma TAG de fim:
Exemplo: <b> texto </b>
Outros tem apenas uma TAG: <br/> (Mudar de linha)
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Que editor utilizar?
A forma mais simples de editar programas em
HTML ser a utilizao de simples editores de
texto como o caso, por exemplo, do
Notepad.
Os utilizadores menos experientes devem
evitar a utilizao de processadores de texto
para criarem programas em HTML.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Existe vrios editores HTML, e alguns
deles online.
o caso do HTML Editor:

http://htmledit.squarefree.com/

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Um elemento pode ser composto por
atributos e contedos:
<elemento atributo=valor do atributo>contedo</elemento>

Exemplo:
<p align=left>texto</p>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Um elemento de HTML pode conter
outros elementos designados por
elementos aninhados:
Exemplo:
<b>texto em negrito e <i>itlico</i></b>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Estrutura bsica de um programa em HTML
O documento mais simples em HTML, tambm
conhecido como documento mnimo, ter a seguinte
estrutura:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- informao extra sobre este documento que no ir aparecer na pgina
mas no cabealho -->
</head>
<body>
O body contm todo o texto e todas as imagens que constituem a pgina
</body>
</html>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Estrutura bsica de uma pgina
em HTML:
Elemento <head> - cabealho que
especifica informaes acerca do
prprio documento.
Elemento <body> - corpo do
documento que contm o texto
imagens, outros elementos, etc.
Ambos elementos esto dentro das
tags <html> e </html> que
especificam que se trata de um
documento HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Dentro do elemento <head> apenas podem ser
colocados alguns elementos especficos como
por exemplo:
Base define o URL do documento actual:
<base href=http://www.bussola.pt>

Meta define propriedades no visveis da pgina:


<meta name=author content=Antnio Jos Arajo>

Title define o ttulo da pgina, este mostrado na


barra de ttulo do browser:
<title>Ttulo da pgina</title>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Cabealhos:
O HTML tem seis nveis de cabealhos identificados
pelas tags <h1></h1>, <h2></h2>, <h3></h3>,
O atributo destas tags align permitindo alinhar o
texto dentro do cabealho.
Pode tomar como valores left, right, center, justify.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Pargrafos:
Os pargrafos so usados em HTML com as tags
<p> e </p>.
O atributo destas tags align, tal como para os
cabealhos.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Quebras de linha
As quebras de linha so criadas com a tag
<br/>
No tem atributos nem tag de fecho.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Comentrios
Podem colocar-se comentrios num
documento HTML sem que este aparea.
As tags deste elemento so <!-- e -->

Exemplo:
<!- comentrio pgina -->

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Listas
Em HTML podem ser criadas listas de 3 tipos:
Numeradas ordenadas
Com marcadores (no ordenadas)
De definies.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Listas ordenadas
Estas listas so delimitadas pelas tags <ol> e
</ol>.
Cada um dos itens delimitado pelas tags
<li> e </li>.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Listas ordenadas
A numerao das listas ordenadas surge por
defeito com os valores de 1 a n, atravs do
atributo type:

<ol type=a>
<ol type=A>
<ol type=i>
<ol type=I>
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Listas no ordenadas
As listas no ordenadas so delimitadas
pelas tags <ul> e </ul>
Cada item por <li> e </li>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Listas no ordenadas
possvel alterar o smbolo dos itens da lista
usando o atributo type:

<ul type=square>
<ul type=disc>
<ul type=circle>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Listas de definies
As listas de definies so delimitadas pelas
tags <dl> e </dl>
Cada item definido pelas tags <dt> e </dt>
Cada definio pelas tags <dd> e </dd>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Texto nas pginas HTML
Para podermos formatar texto em HTML
usamos o elementos <font> </font>
Este pode conter os atributos opcionais size,
color e face.
Este controlam o tamanho, cor e tipo de letra
respectivamente.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Para definimos o tamanho fazemos uso
do atributo size:
Exemplo:
<fonte size=1>Linguagem HTML</font>

Podemos tambm usar como valores para o


tamanho nmeros positivos e negativos.
Um valor positivo aumenta o tamanho em
relao ao tamanho base e um valor negativo
diminui.
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Para definirmos a cor fazemos uso do
atributo color.
A cor pode ser definida usando o
respectivo cdigo hexadecimal ou o nome
da cor.
Por exemplo, a cor vermelha pode ser
definida por #FF0000 ou red.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Existe um conjunto de 216 cores designado por
websafe seguras para a web.
Definindo na altura em que os computadores apenas
representavam 8 bits de cor.
Das 256 que podiam representar algumas eram
reservadas sobrando 216.
As boas prticas dizem que no desenvolvimento de
pginas web apenas se devem usar essas cores, uma
vez que a garantia de que sero correctamente
representadas em todos os browsers maior.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Para definirmos o tipo de letra fazemos uso do
atributo face.
Exemplo:
<font face=arial>ol</font>

Tambm podem ser especificados vrios tipos de


letra.
Isto acontece porque o computador onde a pgina vai
ser vista pode no conter o tipo de letra pretendido.
<font face=arial, verdana, heveltica>ol</font>

O browser mostrar o tipo disponvel de acordo com a


nossa ordem de preferncia.
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Como boas prticas no uso de fontes para pginas
web:
Devem ser usados tipos comuns de letra;
Deve ser sempre dada uma ou mais fontes
alternativas;
Devem ser fontes legveis.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Utilizao de imagens
possvel colocar vrios formatos de
imagens em documentos HTML.
Por questes de eficincia e tamanho, os
formatos mais comuns so JPEG, GIF e
PNG.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Insero de imagens
Se a imagem se encontrar no mesmo
computador em que pgina se encontra basta
indicar o caminho local.
<img src=gato.jpg> ou
<img src=fotos/gato.jpg>
se a imagem estiver dentro da pasta fotos.
Se a imagem se encontrar noutra localizao como p.
ex. noutro site deve ser indicado o caminho completo:
<img src=http://www.site.com/gato.jpg>
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Insero de imagens
Outro atributo alt. Este define o texto
alternativo para uma imagem.
Num browser que no pode, ou no
consegue mostrar imagens, esse o texto
que mostrado.
Aumenta a usabilidade da pgina e facilita a
leitura em browsers sem suporte de imagem
<img src=gato.jpg alt=foto do gato Tareco>
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Altura e largura das imagens
As dimenses da imagem so definidas por:
Height Altura;
Width Largura;

Os valores destes atributos podem ser em


pxeis ou em percentagem do tamanho da
pgina.
<img src=gato.jpg width=197 height=200>
As dimenses devem corresponder imagem
inserida para evitar distores.
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Insero de um contorno na imagem
Para inserirmos um contorno na imagem
usamos o atributo border.
O valor define a largura do contorno:
<img src=gato.jpg border=4>

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Alinhamento de imagens
O alinhamento de imagens num
documento HTML em relao aos
elementos circundantes.
Isto definido utilizando o atributo align.
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Alinhamento de imagens
Este pode assumir um dos seguintes
valores:
right ou left : para alinhar as imagens
esquerda ou direita da pgina com o texto
moldado volta;
top, middle, bottom corresponde ao
alinhamento vertical da imagem em relao aos
elementos da mesma linha, respectivamente por
cima, a meio e por baixo.
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Definio do fundo da pgina.
Para fundo de uma pgina HTML
podemos usar uma cor ou uma imagem.
Estas propriedades so definidas no
elemento body pelos atributos bgcolor e
background, respectivamente:
<body bgcolor=#220000>
<body background=gato.jpg>
<body bgcolor=#220000 background=gato.jpg
Antnio Jos Arajo | 07-11-2011

Introduo ao HTML
Definio do fundo da pgina.
Se definirmos uma imagem como fundo
esta ser repetida na horizontal e vertical
em mosaico.
Enquanto a imagem carrega apenas
visvel a cor de fundo.

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011

Introduo ao HTML

Antnio Jos Arajo | 07-11-2011