Centro de Form.

Profissional de
Alverca

9-06-2011

HTML

Sesso 1

HTML

HTML

A INTERNET

Baseada no modelo Cliente-Servidor

Cliente: programa que pede informao
Servidor: programa que envia a
informao
No caso da WWW:
Cliente: browser (IE, por exemplo)
Servidor: IIS (Internet Information Server),
Apache, WebSphere,...

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

MODELO Cliente - Servidor

IIS: Servidor Web

Meu computador
INTERNET

ejds.no.sapo.pt

Internet Explorer: Cliente

HTML

MODELO Cliente - Servidor

No browser do meu computador, digito o endereo...

Ejds.no.sapo.pt: endereo do computador na Internet

t6si: pasta
t6si.html: o ficheiro que desejo ver

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

MODELO Cliente - Servidor

O Browser pede (cliente)...

Quero o ficheiro t6si.html,
que est na pasta t6si no
computador no endereo
ejds.no.sapo.pt
INTERNET

ejds.no.sapo.pt/t6si/t6si.html

HTML

MODELO Cliente - Servidor

O Servidor Web (Servidor) ouve o pedido

e responde, enviando para o Browser o ficheiro solicitado

T6si..htmt

INTERNET

ejds.no.sapo.pt/t6si/t6si.html

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

MODELO Cliente - Servidor

O browser recebe o ficheiro

t6si.html

INTERNET

ejds.no.sapo.pt/t6si/t6si.html

HTML

MODELO Cliente - Servidor

O browser recebe
o ficheiro
t6si.htm

um simples
ficheiro contendo texto e
cdigos de marcao
que ele interpreta segundo
as regras da linguagem
de marcao HTML,
resultando

ejds.no.sapo.pt/t6si/t6si.html

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

MODELO Cliente - Servidor

NISTO!!!

HTML

Endereos na Internet (URL Uniform Resource Locator)

http://www.sergeicartoons.com/Cartoons/imagens/portugal-holanda.jpg
http protocolo entre o Browser (cliente) e o Servidor Web
www.sergeicartoons.com - endereo DNS do computador
- Domnio ( = a um endereo IP 8.8.246.138)
Cartoons,imagens pastas
portugal-holanda.jpg ficheiro que ser enviado pelo Servidor

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

Endereos na Internet (URL Uniform Resource Locator)

http://www.sp-astronomia.pt/portugal/internacional/esa.html

Qual o endereo do
Servidor Web?
Qual o nome do
ficheiro que est sendo
visto no browser e que
foi enviado pelo
servidor?

HTML

Endereos na Internet (URL Uniform Resource Locator)

http://www.nasa.gov/mission_pages/exploration/main/index.html

Qual o endereo do
Servidor Web?
Qual o nome do
ficheiro que est sendo
visto no browser e que
foi enviado pelo
servidor?
Qual o protocolo
utilizado entre o
Browser e o Servidor
Web?

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML

HTML

A Linguagem HTML

As pginas Web so ficheiros com a extenso

(na grande maioria) HTM ou HTML.
So ficheiros de TEXTO (plain text) que,
juntamente com o contedo do documento
propriamente dito, possuem instrues
especiais que o BROWSER sabe interpretar e
que d forma/vida ao texto

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML

O conjunto dessas instrues especiais constitui

a LINGUAGEM HTML
(HiperText Markup Language)
Essas instrues especiais so chamadas de
elementos HTML
A linguagem HTML tem vindo a evoluir: 2, 3.2,
4.0 e 4.01 (www.w3.org)
novos elementos
HTML

HTML

A Linguagem HTML Elementos HTML

Existem cerca de 110 de elementos

HTML. Cada um deles com um propsito
especfico: formatar texto, criar tabelas,
criar links, inserir imagens, etc.
Um elemento HTML possui a seguinte
estrutura:

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML Estrutura de um Elemento HTML

Tag de Abertura e, na esmagadora

maioria, Tag de Fecho:
Entre < e >
A Tag de Abertura poder possuir 1 ou
mais atributos.
Um atributo tem a forma
Nome_do_Atributo =
Valor_do_Atributo
A Tag de Fecho (caso exista) igual a
Tag de Abertura (sem os atributos)
excepto pela presena do smbolo /

O contedo entre as tags, isto , o

contedo que afectado pelas tags

HTML

A Linguagem HTML Exemplo de elementos HTML

<h1>O maremoto</h1>
<!-- J agora maremto ou maremto? -->
<b>Este texto ficar em negrito</b>
<img src=foto.jpg width=512 height=212>
<p>Clique <a href=index.htm>aqui</a></p>
<p>Vai ocorrer <br>uma mudana</p>

Formador: Cosmin Constantinescu

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML As TAGS -

So o que caracterizam
os elementos HTML.
P. ex.:
Ao invs de se dizer o
elemento h1 diz-se a
tag h1

HTML

A Linguagem HTML - Regras -

Na verdade so mais sugestes do que regras o HTML

bastante liberal!

HTML no sensvel a
maisculas/minsculas.
(XHTML obriga minsculas)

<B>Ol</B>
<B>Ol</b>
<b>Ol</B>
<b>Ol</b>

Formador: Cosmin Constantinescu

10

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML - Regras -

HTML ignora todos os caracteres de espao

(espaos em branco, tabulaes, quebras
de linha) para alm do primeiro.
<b>T e s t e</b>
T e s t e
<b>T e
s
t
e</b>
T e s t e
<b>T
e
s
t e</b>
T e s t e

HTML

A Linguagem HTML - Regras -

Os elementos HTML podem ser

incorporados em outros elementos HTML.
<b><i>Correcto</i></b>
<b><i>Errado mas pode
funcionar!</b></i>
<!-- Em XHTML no permitido -->

Formador: Cosmin Constantinescu

11

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML - Regras -

Os elementos HTML devero ser fechados,

isto , apresentar a tag de fecho (excepto os
elementos HTML vazios).
<p>Tag no fechada, mas funciona!
<!-- Em XHTML no permitido -->
<p>Assim que est correcto</p>

HTML

A Linguagem HTML - Regras -

Os valores dos atributos devero estar entre

aspas ou entre apstrofos. No entanto
aconselhvel sermos consistentes no seu uso.
<img src=bozo.jpg height=10 width=25>
<!-- funcionar na maior parte dos browsers -->
<!-- obrigatrio aspas/apstrofos em XHTML -->
<img src=bozo.jpg height=10 width=25>
<img src=bozo.jpg height=10 width=25>

Formador: Cosmin Constantinescu

12

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML - e os Browsers -

Alguns elementos HTML podero ser interpretados

de maneira diferente por diferentes browsers

Visualizar o site em diferentes browsers (IE, Opera,
Firefox, Mozilla, Netscape,)

Opera 7.6

Opera 7.6

IE 6.01

IE 6.01

HTML

A Linguagem HTML - e os Browsers -

Alguns elementos/atributos HTML so exclusivos

de certos browser/verses o que implica que no
funcionaro nos restantes browsers/verses

evit-los!
<blink>Ol mundo!</blink>
<!-- texto piscante no Netscape -->
<!-- ignorado pelos restantes browsers -->

Formador: Cosmin Constantinescu

13

Centro de Form. Profissional de

Alverca

9-06-2011

HTML

A Linguagem HTML - e os Browsers -

O visitante pode configurar o browser de modo que o site fique

praticamente irreconhecvel.
desenvolver sites em Flash
(trabalhoso e tempo de carregamento) ou totalmente em
modo grfico (tempo de carregamento)

HTML

Criao de Pginas Web

( The Hard Way )

Formador: Cosmin Constantinescu

14

Centro de Form. Profissional de

Alverca

9-06-2011

HTML
Criao de Pginas WEB
Material Necessrio

Para criarmos um site para WWW

precisamos dos seguintes elementos:
Computador com o Windows 95 ou superior
Bloco de Notas
Internet Explorer (BROWSER) ou outro

Para que o mundo veja o site que criamos

precisamos:
ISP e espao de armazenamento para as pginas criadas
(Servidor Web)

HTML
Criao de Pginas WEB
A pasta com as pginas do site

J sabemos que um site Web um conjunto

de ficheiros e pastas que esto armazenados
numa pasta num computador (servidor).
Vamos criar a nossa pasta
Criar a pasta Site-Vosso nome no teu Suporte
de Armazenamento (por exemplo Site-Cosmin
Constantinescu)
Entrar dentro da pasta do Site.

Formador: Cosmin Constantinescu

15

Centro de Form. Profissional de

Alverca

9-06-2011

HTML
Criao de Pginas WEB
As Principais Tags

<html> e </html>
Identifica uma pgina HTML, ou seja, fazem com que
a pgina no seja considerada um documento de
texto comum.

<head> e </head>
Especifica o cabealho da pgina. No aparece no
ecr

<body> e </body>
Define o corpo da pgina HTML, ou seja, entre elas
so colocados os textos, imagens e links.

HTML
Criao de Pginas WEB
A Estrutura de uma pgina WEB

Por mais complicada que

seja uma pgina Web, ele
ter a seguinte estrutura
que iremos criar com a
ajuda do Bloco de Notas.
- Executar o Bloco de Notas
- Digitar o cdigo HTML que
se encontra ao lado
- Guardar num ficheiro com
o nome modelo2.txt na
pasta Modelos

Formador: Cosmin Constantinescu

<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

16

Centro de Form. Profissional de

Alverca

9-06-2011

HTML
Criao de Pginas WEB
A minha primeira pgina WEB

Vamos utilizar a pgina

modelo para criar a nossa
primeira pgina (perdoemme a repetio)
- Com o Bloco de Notas
abrir o ficheiro
modelo2.txt
<html>
- Digitar o cdigo HTML
<head>
que se encontra ao lado
<title>Teste de Leitura</title>
- Guardar o ficheiro com o
</head>
nome
<body>Criao de Pginas Web!
CriacaoPaginasWeb.html
</body>
- Verificar a obra produzida
</html>
utilizando o IE.

HTML
Criao de Pginas WEB
A minha primeira pgina WEB

<html>
<head>
<title>Ol Mundo</title>
</head>
<body>Ol mundo!
</body>
</html>

Formador: Cosmin Constantinescu

17