Agrupamento de Escolas de Vila Viosa

Ano letivo 2016/2017

Mdulo 3 - UFCD 151

Linguagem HTML e
Curso: Tcnico de Multimdia construo de Pginas para a
Disciplina: Sistemas de Informao Internet 1

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 2

Website
Um website, site ou stio eletrnico um
conjunto de pginas web relacionadas,
acessveis atravs de redes de computadores
cuja principal a internet.

O conjunto de todos os sites pblicos

existentes compe a World Wide Web.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 3

Website
Os sites tm endereos (URL) e visualizam-se com
browsers.

As pginas so organizadas dentro do site numa

hierarquia observvel no URL.

As hiperligaes fazem a ligao entre as pginas e

controlem o modo como o leitor se apercebe da
estrutura global.

Estrutura de hiperligaes diferente da estrutura

hierrquica dos arquivos do site.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 4

Website
Homepage Index.htm
l
Link Ligao de
hipertexto que
permite atribuir a
palavras ou
Pgina 1 Pgina 2
imagens uma
ligao para
outro local (na
mesma pgina,
Pgina 1.1 Pgina 1.2 Pgina 2.1 no mesmo site ou
noutro site).

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 5

Sites de 1, 2, 3 e 4 gerao
1 gerao
Inicialmente as entidades criavam simples brochuras ou
panfletos eletrnicos para divulgar os seus servios ou
produtos.

2 gerao
Grandes mudanas no design, surgem imagens de fundo
ao invs dos antigos fundos cinzas, grficos coloridos e
animados substituem as antigas figuras. Cria-se o conceito
de "home-page": uma pgina cheia de grficos, janelas e
botes, que servem de menu para aceder ao restante de
site.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 6

Sites de 1, 2, 3 e 4 gerao
3 gerao
Continuou o desenvolvimento do layout, as empresas
aperceberam-se do verdadeiro potencial da Internet para o
negcio business-to-business (empresa-a-empresa) e
business-to-consumer (empresa-a-consumidor), e
comearam a simplificar os sites , tornaram-nos mais
rpidos e focados nas necessidades de quem os visita.

4 gerao
Estes sites so fisicamente idnticos aos sites da 3
gerao, mas a diferena reside no que se passa por detrs
do que visvel. Os sites tm pginas dinmicas e acesso a
bases de dados.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 7

Planeamento de um site
Objetivo do site:
Educativo;
Comercial;
Poltico;
Etc..

Cada tipo de site tem uma estrutura prpria e

caratersticas visuais diferentes.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 8

Planeamento de um site
O layout do site muito importante, um site bem
desenhado (combinao de cores e imagens) atrai os
visitantes.

a qualidade e atualidade da informao que leva a

visitas posteriores.

Fcil localizao da informao (estrutura de

navegao simples e bem visvel.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 9

Conceitos de ergonomia e amigabilidade

de uma pgina Web

Uma pgina Web constituda por textos, imagens,

sons, animaes, vdeos e ligaes a outras pginas.
Quando todos estes elementos esto dispostos na
pgina de forma agradvel e tornam fcil a navegao
para as outras pginas do site diz-se que estamos
perante um site ergonomicamente bem desenhado
ou um site amigvel.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 10

Conceitos de ergonomia e amigabilidade

de uma pgina Web
Aspetos a ter em conta no desenvolvimento de um site:
Limitar os elementos a destacar:
Organizar a informao tendo em ateno a sua
importncia;
Evitar a repetio da informao;
Respeitar os termos utilizados nos menus, pois esto
padronizados;
Escolher cuidadosamente os smbolos a utilizar;
Escolher cuidadosamente cores e aspeto grfico dos
elementos a utilizar;
Escolher cuidadosamente as imagens e ter em ateno o
formato da imagem.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 11

Conceitos de ergonomia e amigabilidade

de uma pgina Web
Aspetos a ter em conta na preparao da navegao no
site:
Diminuir o n de escolhas por pgina;
Utilizar ttulos que permitam situar o visitante;
Disponibilizar o mapa do site.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 12

Conceitos de ergonomia e amigabilidade

de uma pgina Web
Smbolos

Exemplo Mapa do site

https://www.parlamento.pt/Paginas/MapaSite.aspx

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 13

Tcnicas de criao de pginas web

H 2 formas de criar sites:

Atravs de um editor de texto e de uma linguagem de

programao HTML ou outra.

Utilizando um editor WYSIWYG (What You See Is What You

Get o que se v que se obtm), que permite criar
pginas de forma grfica ficando a programao para o
editor.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 14

Editores de texto ou cdigo-fonte

Editor HTML ou editor Web um software para a
criao de pginas web utilizando a linguagem de
marcao HTML.

Notepad++
Editor de texto verstil e repleto de recursos teis, com
suporte a vrias linguagens de programao.

Sublime
Editor de texto e cdigo-fonte multiplataforma, oferece
recursos extraordinrios e um desempenho simplesmente
surpreendente.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 15

Editores WYSIWYG
Permitem criar pginas web em modo grfico, mas
mantm a possibilidade de editar cdigo diretamente.

FrontPage e Dreamweaver permitem criar menus

interativos, inserir animaes e elementos multimdia,
ficheiros flash, etc...

Flash permite criar animaes simples ou at sites completos

e interativos como sites de vendas online.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 16

Editores de imagens e efeitos especiais

A imagem o elemento fundamental de um site e a
sua edio deve ser feita em programas prprios para
tratamento de imagens, estes possuem ferramentas
sofisticadas que cortam, mudam cores, aplicam efeitos,
etc:

Paint.net;
Photoshop;
CorelDraw;
Etc...

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 17

Publicao do site
Consiste em colocar o site na internet para que possa
ser visto:

necessrio espao num servidor web (pago ou gratuito).

necessrio um programa de FTP para carregar os
ficheiros para o servidor.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 18

Conceitos de HTML e Hipertexto

HTML (HyperText Markup
Language)
Linguagem de Marcao de
Hipertexto;
uma linguagem de marcao
utilizada para produzir pginas para
a Web.;
Os documentos HTML podem ser
interpretados por navegadores,
permitindo ao utilizador ver textos,
imagens e outros elementos
deslocando-se sobre eles atravs de
links.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 19

Conceitos de HTML e Hipertexto

Hipertexto
Texto em formato digital ao qual se agregam outros blocos
de texto relacionados;
Estes documentos podem conter tambm imagens, sons e
vdeos;
O acesso aos componentes do documento faz-se atravs
de referncias especficas denominadas hiperlinks, ou
simplesmente links.
Os links ocorrem na forma de termos destacados no
corpo de texto principal, cones grficos ou imagens e
so eles que agregam os diversos blocos de texto.

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399

 20

O objetivo inicial do HTML

O HTML criou-se com o objetivo simples de divulgao
de informao. Hoje em dia evoluiu (HTML5) e permite
muito mais que isso, sozinho ou com a integrao de
outras linguagens permite interao com utilizador,
animaes, recolha de dados, compras online

Curso Profissional de Multimdia 2016/2017 Projeto n: POCH-01-5571-FSE-001399