0792 - Web PDF

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, I.P.
Delegação Regional do Centro

Centro de Emprego e Formação Profissional do Pinhal Interior Norte
Serviço de Emprego e Formação Profissional de Arganil
Tecnologias de Informação e Comunicação
UFCD 0792: Criação de páginas para a web em hipertexto

 Elaborar páginas para a web, com recurso a hipertexto.
 Conceitos gerais de HTML

 Ligações
 Formatação de texto com HTML
 Imagens
 Multimédia na web
 Animação na web
 Desenho de páginas web
 Tabelas
 Frames
 Mapas
Cursos de Aprendizagem O Formador: 2

TIC - UFCD 0792: Criação de páginas para a web em hipertexto Nuno Santos
 Uma página Web é uma “página” na World Wide Web, com

ligações de hipertexto que permitem a navegação de uma
página, ou secção, para outra. As páginas usam com frequência
ficheiros gráficos associados para fins de ilustração, e também
estes ficheiros podem ser ligações clicáveis.
 Uma página Web é apresentada com o recurso a um navegador,

ou browser, e pode ser construída de forma a recorrer a applets
(subprogramas que correm dentro da página), que muitas vezes
fornecem gráficos em movimento, interação com o utilizador e
som.

 Uma dificuldade no desenho e teste de

páginas Web é torná-las adequadas a muitos
navegadores e definições, e às diferentes
resoluções de ecrãs.

 Para criar um website/página são usados

editores de páginas 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).

 Os editores WYSIWYG (What You See Is What You Get) são programas
para a criação e edição de websites que permitem ver na sua janela, o
aspeto com que o site vai ser apresentado após a sua publicação.
 Estes editores permitem ao utilizador, de uma forma acessível e sem

dominar uma linguagem de programação, desenvolver websites com
aparência profissional. Todo o código necessário ao funcionamento do
website é automaticamente gerado.
 Editores WYSIWYG:
◦ FrontPage;
◦ Dreamweaver;
◦ Easy Website Pro;
◦ BlueVoda;
◦ CoffeeCup;
◦ Etc.

 Estes editores são, essencialmente, editores de texto, embora alguns

apresentem funcionalidades acrescidas, como a geração automática de
código, a inserção de códigos de outras linguagens de programação e
a pré-visualização da página.
 A utilização dos editores de HTML implica um conhecimento prévio da

sintaxe desta linguagem. Com este conhecimento, consegue-se um
maior controlo sobre a criação das páginas web.
 Editores HTML:
◦ Notepad++;
◦ Bloco de notas;
◦ Visual Workshop;
◦ Crimson Editor;
◦ Site Builder
◦ tsWebEditor;
◦ LightPad;
◦ Etc.

 O HTML é uma linguagem de programação, utilizada para construir

páginas web.
 A sigla HTML significa: HiperText Markup Language
 O HTML foi desenvolvido no início dos anos 90 e foi sofrendo

sucessivas evoluções.
 Em 1996 foi estandardizado pela W3C – World Wide Web Consortium.

 O HTML não é utilizado isoladamente na programação das páginas

Web. O HTML é a base das páginas, e a complementá-lo existem
outras linguagens tais como o CSS, o JavaScript, o PHP, entre outras.
 O HTML, ao contrário de outras linguagens de programação, não é

compilado nem é criado um executável.
 O HTML é uma linguagem que é interpretada.

O software que interpreta o HTML e mostra o resultado da conversão
do código chama-se navegador ou browser.
Exemplos de browsers:
Internet Explorer Mozilla Firefox Google Chrome

 A extensão 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 extensão .html ou .htm
 Depois, quando o mesmo é aberto por um browser, o browser

vai percorrer todas as linhas de código do ficheiro e vai
transformar as instruções do código em texto (de vários
tamanhos e cores), imagens, tabelas, hiperligações, animações,
etc…
 Por defeito, na maioria dos sistemas operativos, um ficheiro de

HTML é distinguido pela da extensão html ou htm, pelo que,
quando se tenta abrir um ficheiro deste tipo, imediatamente é
ativado o browser predefinido, de forma a poder visualiza-lo.


 Olhando para o esquema da página anterior, vejamos, de uma

forma muito resumida, como funciona o acesso as páginas da
Web através de um browser.
 Do lado do computador que acede ao sistema (que, com o seu

browser, atua como cliente), este começa por (1) enviar um
pedido de um documento HTML a um servidor, através do envio
para a rede de um endereço URL (Universal Resource Locator).
 O pedido é canalizado pela Internet (2) até ao servidor indicado

no endereço.
 O servidor, ao receber o pedido (3), procura a página indicada

(no caso de esta não ser indicada, e aberta a página principal ou
homepage do servidor). Em seguida, a página 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 página recebida.

 As instruções básicas do HTML chamam-se TAGS.
 Uma tag é uma instrução com uma determinada função, que vai ser
interpretada pelo browser, e vai ter efeitos sobre a estrutura da
página, sobre o texto, sobre uma imagem, uma hiperligação, etc…
 As tags colocam-se sempre entre os sinais de < (menor) e > (maior).
 Dependendo do facto de terem que ser fechadas ou não, as tags

dividem-se em dois grupos:
◦ Únicas - quando não 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>

 Dependendo das opções (argumentos) que as tags podem ter, elas

podem ainda ser classificadas como:
◦ Simples – quando são constituídas apenas pelo sinal de <, nome da tag, e
sinal de >
<TAG>
◦ Com argumentos – quando a seguir ao nome da tag têm uma ou mais

instruções com indicações complementares sobre a formatação do texto, do
fundo, dos limites, etc…
<TAG argumento1=“condição” argumento2=“condição” … >
Os argumentos são eles também instruções para o browser. Os argumentos

são constituídos pelo nome, seguidos do sinal de igual, e pela condição de
formatação entre aspas. Os vários argumentos separam-se por um espaço.
nome_do_argumento=“condição”

 Um documento em HTML começa e termina sempre com a tag

<HTML>
.
.
.
</HTML>
 Dentro destas tags, temos duas secções básicas:
◦ HEAD – controla as especificações do cabeçalho de uma página. Uma tag

muito utilizada no HEAD é a tag TITLE, que permite escrever o título da
página.
◦ BODY – controla as especificações da parte principal de uma página.

<HTML>
<HEAD>
<TITLE>Primeira página em HTML</TITLE>
</HEAD>
<BODY>
Esta é minha primeira página em HTML!
</BODY>
</HTML>
HEAD
BODY


0792 - Web PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

0792 - Web PDF

Enviado por

Direitos autorais:

Formatos disponíveis

INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, I.P.

Delegação Regional do Centro

Tecnologias de Informação e Comunicação

UFCD 0792: Criação de páginas para a web em hipertexto

 Elaborar páginas para a web, com recurso a hipertexto.

 Conceitos gerais de HTML

Cursos de Aprendizagem O Formador: 2

 Uma página Web é uma “página” na World Wide Web, com

 Uma página Web é apresentada com o recurso a um navegador,

Cursos de Aprendizagem O Formador: 3

 Uma dificuldade no desenho e teste de

Cursos de Aprendizagem O Formador: 4

 Para criar um website/página são usados

Estes podem ser de dois tipos:

◦ Editores WYSIWYG (já deves ter ouvido falar de um

◦ Editores HTML (vamos ver de seguida o que é o

Cursos de Aprendizagem O Formador: 5

 Estes editores permitem ao utilizador, de uma forma acessível e sem

Cursos de Aprendizagem O Formador: 6

 Estes editores são, essencialmente, editores de texto, embora alguns

 A utilização dos editores de HTML implica um conhecimento prévio da

Cursos de Aprendizagem O Formador: 7

 O HTML é uma linguagem de programação, utilizada para construir

 A sigla HTML significa: HiperText Markup Language

 O HTML foi desenvolvido no início dos anos 90 e foi sofrendo

 Em 1996 foi estandardizado pela W3C – World Wide Web Consortium.

Cursos de Aprendizagem O Formador: 8

 O HTML não é utilizado isoladamente na programação das páginas

 O HTML, ao contrário de outras linguagens de programação, não é

 O HTML é uma linguagem que é interpretada.

Internet Explorer Mozilla Firefox Google Chrome

Cursos de Aprendizagem O Formador: 9

 A extensão dos ficheiros de HTML é .html ou .htm

 Para criar ficheiros em HTML pode utilizar-se, por exemplo, o

 Depois, quando o mesmo é aberto por um browser, o browser

 Por defeito, na maioria dos sistemas operativos, um ficheiro de

Cursos de Aprendizagem O Formador: 10

Cursos de Aprendizagem O Formador: 11

 Olhando para o esquema da página anterior, vejamos, de uma

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

 O pedido é canalizado pela Internet (2) até ao servidor indicado

 O servidor, ao receber o pedido (3), procura a página indicada

Cursos de Aprendizagem O Formador: 12

 As instruções básicas do HTML chamam-se TAGS.

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

 Dependendo do facto de terem que ser fechadas ou não, as tags

◦ Únicas - quando não existe a tag de fecho.

◦ Duplas – quando existe uma tag de fecho, que é igual à de abertura,

Cursos de Aprendizagem O Formador: 13

 Dependendo das opções (argumentos) que as tags podem ter, elas

◦ Com argumentos – quando a seguir ao nome da tag têm uma ou mais

Os argumentos são eles também instruções para o browser. Os argumentos

Cursos de Aprendizagem O Formador: 14

 Um documento em HTML começa e termina sempre com a tag

 Dentro destas tags, temos duas secções básicas:

◦ HEAD – controla as especificações do cabeçalho de uma página. Uma tag

◦ BODY – controla as especificações da parte principal de uma página.

Cursos de Aprendizagem O Formador: 15

Cursos de Aprendizagem O Formador: 16

Você também pode gostar