Manual Html

Fev/2015
Formao: HTML
Operador de Informtica Nvel 2
Criao de Sites WEB

Criao de pginas web

INTRODUO
Neste mdulo, procura dar-se uma primeira ideia instrumental de como
criar, a partir de aplicativos prprios, a organizao dos contedos que
se desejam colocar na Web. Dos trs aplicativos propostos, dever
lecionar-se apenas um dos programas de criao de pginas Web
escolha. Importa, porm, perceber que, muitas vezes, mais complexo
decidir o que colocar numa pgina do que manusear a tcnica da sua
criao.
OBJETIVOS
Identificar as tcnicas de implantao de pginas na Web
Identificar linguagens de programao
Enumerar editores de pginas Web
Enumerar editores de imagens e efeitos especiais
Enumerar editores e programas de animao grfica de pginas Web
Enumerar ferramentas e utilitrios de construo de pginas Web
Explicar os conceitos de ergonomia e amigabilidade de uma pgina Web
Definir documentos HTML
Definir o conceito de hipertexto
Descrever as principais caractersticas do programa de construo de
pginas Web
Identificar os componentes da rea de trabalho
Reconhecer a importncia do planeamento na construo de um site
Criar, abrir, guardar, imprimir e publicar um Web site
Aplicar estilos
Manipular o aspeto de um site
Inserir imagens
Aplicar som a uma pgina
Inserir um formulrio
Aplicar frames
Criar e adicionar hiperligaes
Aplicar efeitos de animao
Efetuar a publicao do site num servidor Web
Explicar como se faz a manuteno e a atualizao de um Web site

BIBLIOGRAFIA

Planeta das TIC 2 volume, Maria Alves e Maria Barbot, Porto Editora, 2010

HTML 5, Lus Abreu, FCA, 2011

Dreamweaver 8 - Depressa e Bem, Helder Oliveira, FCA, 2006

CONTEDOS
1. Tcnicas de Implantao
a. Programao de pginas Web
O HTML a linguagem mais utilizada para criar pginas web
com hipertexto. Utilizando o HTML podemos criar pginas em
que certos itens contm uma ligao a outra zona da mesma
pgina ou a outros documentos.
b. Editores de pginas Web
Os editores atuais mais utilizados na criao de pginas web so o
Dreamweaver e o FrontPage.
O FrontPage um programa desenvolvido pela Microsoft que
permite criar sites com aspeto profissional sem necessitarmos
dominar alguma linguagem de programao.
O Dreamweaver um programa desenvolvido pela
Macromedia, utilizado por muitos profissionais na criao de
sites dinmicos. Permite implementar menus interativos, criar
elementos que respondam a aes diversas dos utilizadores,
inserir animaes, multimdia e arquivos Flash entre outros
elementos em pginas web. Esta ferramenta permite a criao
e pginas web utilizando o sistema WYSIWYG (what you se eis
what you get o que se v o que se obtm).
c. Editores de imagens e efeitos especiais
O Photoshop e o CorelDraw so dois dos editores de imagem mais
conhecidos e utilizados na criao de pginas web.
O Photoshop um software desenvolvido pela Adobe que
permite manipular as imagens de diversas formas e reconhece
vrias extenses de ficheiros grficos.
O CorelDraw um programa grfico, desenvolvido pela Corel,
que gera desenhos vetoriais. Este programa cria imagens
recorrendo utilizao de objetos armazenados internamente
como equaes matemticas (vetores).

d. Editores e programas de animao grfica

O Flash um software desenvolvido pela Macromedia que

oferece recursos para criar websites apelativos, abrangentes e
interativos. Esta ferramenta permite criar logtipos com
animao e com controlos direcionveis para navegao em
websites.
e. Ferramentas e utilitrios
O protocolo utilizado para transferir ficheiros entre dois
computadores o FTP. Existem vrios programas que
implementam este protocolo, nomeadamente o FileZilla e o
Cute FTP.
O FileZilla um cliente FTP de cdigo livre distribudos em licena GNU.

2. Criao de pginas Web

a. Conceitos de ergonomia e amigabilidade de uma pgina Web
A ergonomia o estudo tcnico das regras de adaptao entre
o trabalhador e o equipamento de trabalho.
b. Conceitos de HTML e hipertexto
A internet usa a linguagem HTML para formatar o contedo de
uma pgina web, sendo responsvel pelo posicionamento de
texto, imagem, vdeo, animaes e estabelecer hiperligaes.
Os ficheiros HTML podem apresentar diferentes tipos de
extenses, entre eles, htm ou html.
3. Apresentao do programa
a. O ambiente de trabalho do Dreamweaver e seus
componentes
b. Os painis de objetos
c. Propriedades dos objetos
4. Planeamento e criao de um Web site
a. Planeamento de um Web site
b. Criao e gesto de um Web site

1.
2.
3.
4.
5.

O planeamento de um site deve seguir os seguintes passos:

Escolher o contedo
Organizar o contedo
Quantidade de informao por pgina
Escolher a disposio
Incluir uma pgina principal

O planeamento no rgido, isto , ao longo da elaborao do site podes

efetuar ajustes que julgues que o vo valorizar e enriquecer.
5. Criao de documentos HTML
a. Criao, abertura e guarda de documentos HTML
b. Definio das propriedades

A seguir a estrutura bsica de uma pgina web.

Mudar a cor de fundo de uma pgina web uma das primeiras

mudanas que qualquer um gosta de fazer. Para o fazermos
usamos o atributo bgcolor da etiqueta body. Este atributo
aceita valores como palavras entre aspas (blue, red, green,
chocolate, etc.) ou valores hexadecimais #461B7E (prpura).

6.
7.

Desenho de pginas
Insero e formatao de
texto
a. Insero de texto e
objetos
b. Definio da fonte,
tamanho, cor e
alinhamentos

H uma srie de etiquetas para formatao bsica de texto.

O resultado destas formataes no navegador apresentado abaixo.

Os ttulos so as referncias do nosso texto. A etiqueta

responsvel pela insero de ttulos so as <h1> at <h6>.
Quanto menor o nmero maior o tamanho do ttulo.
Os pargrafos so representados pela etiqueta <p> que tem
um importante atributo para alinhamento, o align. Pode tomar

os valores seguintes: left ( esquerda), right ( direita), center

(ao centro>, justify (justificado).
A formatao avanada de texto possvel com a etiqueta font,
que conta com atributos como color, para mudar a cor, face,
para mudar o tipo de letra e size o tamanho.

Um exemplo de formatao avanada abaixo.

E o seu resultado.

8. Insero de imagens
a. Insero de imagens na pgina
b. Criao de imagens dinmicas
c. Utilizao de um editor de imagens externo

As imagens so dos componentes mais importantes de uma

pgina web. Para inserir uma imagem em HTML usa-se a
etiqueta <img src=caminho para a imagem>. Para alm do
atributo obrigatrio src existem outros opcionais como align,
para alinha a imagem, width, para alterar a largura da
imagem, height, a altura.

9. Multimdia
a. Insero de objetos multimdia
b. Importao de contedos do Flash
c. Insero de um filme Shockwave numa pgina Web
d. Adio de som
e. Insero de controlos ActiveX
Para inserir um vdeo pode usar a etiqueta embed com o atributo src.
10.

Camadas dinmicas
a. Criao e manipulao de camadas
b. Criao de animao nas camadas com a Linha do Tempo

11.

Formulrios
a. Criao de formulrios

12.

Hiperligaes
a. Criao e edio de links
A internet no faria sentido sem o conceito de hiperligao, ou
link. Os hyperlinks permitem-nos navegar na internet de
pgina em pgina, vdeo em vdeo e muito mais. Para links
externos usa-se a etiqueta a e o atributo href para a
referncia.

13.

Publicao
a. Publicao das pginas num servidor Web
b. Gesto e atualizao do contedo de um site
Um site apenas pode ser acedido atravs da internet se o
publicarmos. Para o fazer temos de possuir espao num
servidor web. H vrias solues de alojamento web gratuitas.
Finalmente para gerir o contedo do servidor web deve
introduzir os dados no programa de FTP, como o FileZilla e

fazer o upload do site que se encontra no nosso computador

para a web. conveniente que a pgina inicial tenha o
nome index.html.
EXEMPLOS DE FERRAMENTAS

Figura 1 Menu inicial do bloco de notas (notepad) do Windows 8

Figura 2 Menu inicial da criao de pginas web no Adobe Dreamweaver

CS3

Figura 3 Menu inicial da criao de pginas web no WIX