Вы находитесь на странице: 1из 16

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.

Delegao Regional do Centro


Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Tecnologias de Informao e Comunicao


UFCD 0792: Criao de pginas para a web em hipertexto

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Elaborar pginas para a web, com recurso a hipertexto.

Conceitos gerais de HTML


Ligaes
Formatao de texto com HTML
Imagens
Multimdia na web
Animao na web
Desenho de pginas web
Tabelas
Frames
Mapas
Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Uma pgina Web uma pgina na World Wide Web, com


ligaes de hipertexto que permitem a navegao de uma
pgina, ou seco, para outra. As pginas usam com frequncia
ficheiros grficos associados para fins de ilustrao, e tambm
estes ficheiros podem ser ligaes clicveis.
Uma pgina Web apresentada com o recurso a um navegador,
ou browser, e pode ser construda de forma a recorrer a applets
(subprogramas que correm dentro da pgina), que muitas vezes
fornecem grficos em movimento, interao com o utilizador e
som.

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Uma dificuldade no desenho e teste de


pginas Web torn-las adequadas a muitos
navegadores e definies, e s diferentes
resolues de ecrs.

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Para criar um website/pgina so usados


editores de pginas web.
Estes podem ser de dois tipos:
Editores WYSIWYG (j deves ter ouvido falar de um
exemplo Microsoft FrontPage).
Editores HTML (vamos ver de seguida o que o
HTML).

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Os editores WYSIWYG (What You See Is What You Get) so programas


para a criao e edio de websites que permitem ver na sua janela, o
aspeto com que o site vai ser apresentado aps a sua publicao.

Estes editores permitem ao utilizador, de uma forma acessvel e sem


dominar uma linguagem de programao, desenvolver websites com
aparncia profissional. Todo o cdigo necessrio ao funcionamento do
website automaticamente gerado.
Editores WYSIWYG:
FrontPage;
Dreamweaver;
Easy Website Pro;
BlueVoda;
CoffeeCup;
Etc.

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Estes editores so, essencialmente, editores de texto, embora alguns


apresentem funcionalidades acrescidas, como a gerao automtica de
cdigo, a insero de cdigos de outras linguagens de programao e
a pr-visualizao da pgina.
A utilizao dos editores de HTML implica um conhecimento prvio da
sintaxe desta linguagem. Com este conhecimento, consegue-se um
maior controlo sobre a criao das pginas web.
Editores HTML:
Notepad++;
Bloco de notas;
Visual Workshop;
Crimson Editor;
Site Builder
tsWebEditor;
LightPad;
Etc.

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

O HTML uma linguagem de programao, utilizada para construir


pginas web.

A sigla HTML significa:

HiperText Markup Language

O HTML foi desenvolvido no incio dos anos 90 e foi sofrendo


sucessivas evolues.

Em 1996 foi estandardizado pela W3C World Wide Web Consortium.

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

O HTML no utilizado isoladamente na programao das pginas


Web. O HTML a base das pginas, e a complement-lo existem
outras linguagens tais como o CSS, o JavaScript, o PHP, entre outras.

O HTML, ao contrrio de outras linguagens de programao, no


compilado nem criado um executvel.
O HTML uma linguagem que interpretada.
O software que interpreta o HTML e mostra o resultado da converso
do cdigo chama-se navegador ou browser.
Exemplos de browsers:

Internet Explorer

Mozilla Firefox

Google Chrome

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

A extenso dos ficheiros de HTML .html ou .htm


Para criar ficheiros em HTML pode utilizar-se, por exemplo, o
Notepad ++ ou o Bloco de Notas, e depois s guardar os
ficheiros com a extenso .html ou .htm
Depois, quando o mesmo aberto por um browser, o browser
vai percorrer todas as linhas de cdigo do ficheiro e vai
transformar as instrues do cdigo em texto (de vrios
tamanhos e cores), imagens, tabelas, hiperligaes, animaes,
etc
Por defeito, na maioria dos sistemas operativos, um ficheiro de
HTML distinguido pela da extenso html ou htm, pelo que,
quando se tenta abrir um ficheiro deste tipo, imediatamente
ativado o browser predefinido, de forma a poder visualiza-lo.
Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

10

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

11

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Olhando para o esquema da pgina anterior, vejamos, de uma


forma muito resumida, como funciona o acesso as pginas da
Web atravs de um browser.

Do lado do computador que acede ao sistema (que, com o seu


browser, atua como cliente), este comea por (1) enviar um
pedido de um documento HTML a um servidor, atravs do envio
para a rede de um endereo URL (Universal Resource Locator).
O pedido canalizado pela Internet (2) at ao servidor indicado
no endereo.
O servidor, ao receber o pedido (3), procura a pgina indicada
(no caso de esta no ser indicada, e aberta a pgina principal ou
homepage do servidor). Em seguida, a pgina correspondente
resposta (4) enviada para a Internet e, da, (5) conduzida at
ao computador que fez o pedido. Por fim, (6) o browser
apresenta a pgina recebida.
Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

12

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

As instrues bsicas do HTML chamam-se TAGS.


Uma tag uma instruo com uma determinada funo, que vai ser
interpretada pelo browser, e vai ter efeitos sobre a estrutura da
pgina, sobre o texto, sobre uma imagem, uma hiperligao, etc

As tags colocam-se sempre entre os sinais de < (menor) e > (maior).

Dependendo do facto de terem que ser fechadas ou no, as tags


dividem-se em dois grupos:
nicas - quando no existe a tag de fecho.
<TAG>

Duplas quando existe uma tag de fecho, que igual de abertura,


mas tem uma barra / a seguir ao sinal de menor.
<TAG> </TAG>

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

13

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Dependendo das opes (argumentos) que as tags podem ter, elas


podem ainda ser classificadas como:
Simples quando so constitudas apenas pelo sinal de <, nome da tag, e
sinal de >
<TAG>
Com argumentos quando a seguir ao nome da tag tm uma ou mais
instrues com indicaes complementares sobre a formatao do texto, do
fundo, dos limites, etc
<TAG argumento1=condio argumento2=condio >
Os argumentos so eles tambm instrues para o browser. Os argumentos
so constitudos pelo nome, seguidos do sinal de igual, e pela condio de
formatao entre aspas. Os vrios argumentos separam-se por um espao.
nome_do_argumento=condio

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

14

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

Um documento em HTML comea e termina sempre com a tag


<HTML>
.
.
.
</HTML>
Dentro destas tags, temos duas seces bsicas:
HEAD controla as especificaes do cabealho de uma pgina. Uma tag
muito utilizada no HEAD a tag TITLE, que permite escrever o ttulo da
pgina.
BODY controla as especificaes da parte principal de uma pgina.

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

15

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL, I.P.


Delegao Regional do Centro
Centro de Emprego e Formao Profissional do Pinhal Interior Norte
Servio de Emprego e Formao Profissional de Arganil

<HTML>
<HEAD>
<TITLE>Primeira pgina em HTML</TITLE>
</HEAD>
<BODY>
Esta minha primeira pgina em HTML!
</BODY>
</HTML>

HEAD

BODY

Cursos de Aprendizagem
TIC - UFCD 0792: Criao de pginas para a web em hipertexto

O Formador:
Nuno Santos

16