Introducao HTML

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.
Introduo ao HTML
A linguagem HTML tambm suplementa
as pginas web com:
Formulrios;
Imagens;
Vdeos;
Outros objectos (Flash, Java, etc)
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)
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.
Introduo ao HTML
Existe vrios editores HTML, e alguns
deles online.
o caso do HTML Editor:
http://htmledit.squarefree.com/
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>
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>
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>

</head>
<body>
O body contm todo o texto e todas as imagens que constituem a pgina
</body>
</html>
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
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>
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.
Introduo ao HTML
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.
Introduo ao HTML
Introduo ao HTML
Quebras de linha
As quebras de linha so criadas com a tag
<br/>
No tem atributos nem tag de fecho.
Introduo ao HTML
Introduo ao HTML
Comentrios
Podem colocar-se comentrios num
documento HTML sem que este aparea.
As tags deste elemento so 
Exemplo:
<!- comentrio pgina -->
Introduo ao HTML
Listas
Em HTML podem ser criadas listas de 3 tipos:
Numeradas ordenadas
Com marcadores (no ordenadas)
De definies.
Introduo ao HTML
Listas ordenadas
Estas listas so delimitadas pelas tags <ol> e
</ol>.
Cada um dos itens delimitado pelas tags
<li> e </li>.
Introduo ao HTML
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>
Introduo ao HTML
Introduo ao HTML
Listas no ordenadas
As listas no ordenadas so delimitadas
pelas tags <ul> e </ul>
Cada item por <li> e </li>
Introduo ao HTML
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>
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>
Introduo ao HTML
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.
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.
Introduo ao HTML
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.
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.
Introduo ao HTML
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.
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.
Introduo ao HTML
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.
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>
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>
Introduo ao HTML
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.
Introduo ao HTML
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>
Introduo ao HTML
Introduo ao HTML
Alinhamento de imagens
O alinhamento de imagens num
documento HTML em relao aos
elementos circundantes.
Isto definido utilizando o atributo align.
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.
Introduo ao HTML
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
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.
Introduo ao HTML
Introduo ao HTML

Introducao HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducao HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Tcnico de Multimdia

0151 - Linguagem HTML e Construo de Pginas

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Meta define propriedades no visveis da pgina:

Title define o ttulo da pgina, este mostrado na

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Podemos tambm usar como valores para o

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Tambm podem ser especificados vrios tipos de

O browser mostrar o tipo disponvel de acordo com a

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Os valores destes atributos podem ser em

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

Antnio Jos Arajo | 07-11-2011

S-ar putea să vă placă și