MÓDULO 3

Construção de páginas web

CONCEPÇÃO DE
WEBSITES
•Fundamentos do planeamento de um website
•Editores de páginas web
•Construção de páginas web
•Introdução ao Javascript
•Introdução ao CSS
 3

Fundamentos do planeamento de um
website
• Um website pode ser composto por um conjunto mais ou
menos numeroso de páginas web
• Nas páginas podem existir diversos conteúdos como
texto, imagem, vídeo e som
• Estudo prévio em que são definidos os objectivos e os
utilizadores a que se destina o website
 4

Tecnologia
• Inicialmente: HTML (HyperText Markup Language) –
páginas com conteúdos estáticos
• Atualmente: conjunto de novas tecnologias que permitem
criar conteúdos dinâmicos e interativos
• Java Applet, ActiveX e os plug-ins

requerem browsers e plataformas próprias

 5

Tecnologia
• DHTML (Dynamic HTML) : é interpretado pelo browser
(tal como o HTML)
• Necessário utilizar HTML, uma linguagem de scripting (JavaScript)
e as folhas de estilo CSS (Cascade Style Sheets)

• XML (eXtensible Hypertext Markup Language): permite a

troca de dados entre aplicações de forma interactiva.
 6

Tecnologia
• XML
• Muito utilizado em websites de comércio electrónico
• Concebido para estruturar o conteúdo dos dados
(HTML – formato e apresentação)

• XHTML (eXtensible Hypertext Markup Language) :

combina o HTML e o XML
 7

Imagens
• Imagens : páginas mais atrativas e legíveis
Muitas imagens torna a página lenta levando à
diminuição do nº de utilizadores

• Utilização de formatos que originam ficheiros mais

pequenos: PNG, JPEG e GIF
 8

Cores
• Aspecto importante no desenvolvimento de páginas web
• Podem transmitir muita informação relacionada com o
assunto a tratar
• Podem cativar ou afastar os utilizadores
• O fundo da página deve contrastar com o texto e os
elementos gráficos
 9

Uso de frames ou molduras

• São elementos estruturais

e de navegação
• Cada espaço pode conter
um documento
• Exemplos:
• Título
• Menu
• Apresentação de conteúdos
 10

Modelos de páginas
• É um conjunto predefinido de formatos de texto e
gráficos, a partir do qual se criam as páginas do website.

• Existem programas editores de páginas web que têm um

conjunto de páginas modelo que podem ser
selecionadas, permitindo de uma forma mais fácil a sua
criação.
 11

Páginas de abertura
• 1ª página que é carregada
 12

Página inicial
• Página que é carregada
após a página de abertura
• Muitas vezes corresponde
à 1ª página
 13

FAQ (Frequently Asked Questions)

 14

Mapa do site
 15

Contactos
 16

Páginas de conteúdo
• Utilizadas para divulgar informação sob a forma de texto,
gráfico, vídeo e/ou som
 17

Como Planear um website

• Definir Objetivos
• Refletir sobre a audiência a que se destina
• Listar as características e os conteúdos pretendidos
• Organizar a estrutura do site (definir as ligações entre as
páginas)
• Desenhar o esquema de navegação
• Definir a estrutura(forma) das páginas
 18

Desenhar um esquema de navegação

(EN)

Serve para definir a sua estrutura de orientação, de forma

a facilitar a procura de informação.

• EN global: as hiperligações encontram-se em todas as

páginas do site e no topo destas.

• EN local: as hiperligações encontram-se do lado

esquerdo do site – completam o EN global permitindo a
acesso a locais mais específicos dentro dessa área.
 19

Desenhar um esquema de navegação

(EN)
• EN contextual: as hiperligações permitem acessos a
locais não abrangidos pelos EN global e local.

• Navegação
• Externa: quando as hiperligações permitem navegar para outras
páginas do mesmo site
• Interna: quando as hiperligações permitem navegar dentro da
mesma página
 20

Browsers
São desenvolvidos para funcionar em diferentes Sistemas
Operativos.

• Mozilla Firefox
• Mais rápido
• Bastante seguro
• Simples de utilizar
• Com suporte alargado para plugins disponibilizados por outras
empresas
 21

Browsers

• Opera

• Muito rápido
• Simples de utilizar
• Indicado para utilizadores profissionais da internet com
necessidades específicas
 22

Browsers

• Internet Explorer
• Um dos browsers mais divulgados entre os utilizadores de internet.

• Principais funções suportadas:

• Diversas ferramentas que garantem a privacidade na web, o manuseamento
de imagens, a localização e reprodução de ficheiros multimédia, …
• Tecnologias DHTML, XML, CSS e aplicações de Java
• Integração com o .NET facilitando a ligação servidor/cliente
 23

Browsers

• Google Chrome
• Um dos browsers mais utilizados entre os utilizadores de internet.

• Principais funções suportadas:

• Tecnologias HTML, CSS e aplicações de Java
• Aplicações web podem ser executados em uma janela própria, sem a barra
de endereços e ferramentas, usando a máquina virtual JavaScript V8.
• Ferramentas para programadores de sites;
• Integra o Gears para ser compatível com HTML5.
• Segurança no acesso dos sites
• Estabilidade.
 24

Tipos de Editores de páginas Web

• WISIWIG (what you see is what you get):
• Frontpage
• Dreamweaver
• …

• Editores HTML
• Essencialmente editores de texto
• Funcionalidades acrescidas como a geração automática de código,
inserção de códigos de outras linguagens de programação e pré-
visualização da página
CONSTRUÇÃO DE
PÁGINAS WEB
HTML - Hyper Text Markup Language
 26

HTML - Introdução
• Linguagem utilizada para produzir páginas WEB
• Um ficheiro html é um ficheiro de texto contendo
“etiquetas de marcação” (“markup tags”)
• As etiquetas indicam ao navegador (“browser”)
como mostrar a página
• O nome do ficheiro deve ter a extensão htm ou
html
• O ficheiro pode ser criado usando um simples
editor de texto.
 27

HTML - exemplo
<html> <body> Esta é a minha
<head> primeira página. <b>Este
<title>Título da Página texto está a negrito</b>
</title> </body>
</head> </html>
 28

Etiquetas HTML
• São utilizadas para marcar os elementos html
• Iniciam-se com < e terminam com >
• Normalmente aparecem aos pares (ex <b> e </b>)
• É indiferente usar minúsculas ou maiúsculas (em XHTML
deve-se usar minúsculas)
 29

Elementos html
• Iniciam-se com uma etiqueta de começo e terminam com
uma etiqueta de fim
• Ex:
<b> Este texto está a negrito </b>
<title> Título da página </title>
ETIQUETAS BÁSICAS
EM HTML
 2

Estrutura básica
• <html>: página escrita em linguagem html
• <head>: cabeçalho
• Onde se encontra o título da página que aparece na barra de título
do browser
• <title>: título da página
• <body>: zona do conteúdo da página
 3

Comentários
• Adicionado através da etiqueta <! …. !>
<html>
<body> <h1>Isto é um cabeçalho</h1> <!comentário!>
<h2>Isto é um cabeçalho</h2>
<h3>Isto é um cabeçalho</h3>
</body>
</html>
 4

Cabeçalhos

<h1>Isto é um cabeçalho</h1>
<h2>Isto é um cabeçalho</h2>
<h3>Isto é um cabeçalho</h3>
<h4>Isto é um cabeçalho</h4>
<h5>Isto é um cabeçalho</h5>
<h6>Isto é um cabeçalho</h6>
 5

Parágrafos e Quebra de linha

<p>Isto é um
parágrafo</p>
<p>Isto é outro
parágrafo</p>
<p>Isto <br> é um
pará<br>grafo com
quebras de linha</p>
 6

Etiqueta center
• <center>
• Permite centrar qualquer objeto ou texto numa página
html
• Tem que ser sempre fechada.
 7

Texto pré-formatado
• <pre>
• Permite que a formatação do texto apareça tal e qual
como está no código HTML
• Precede-se o texto pretendido pela etiqueta <pre>
• Tem que ser fechada.
 8

Atributos em HTML
• Permitem dar informação adicional a um elemento
• São sempre especificados na etiqueta de início de um
elemento
• Têm o formato nome = “valor”

• Exemplo - <h1> este define o cabeçalho

<h1 align = “center”> define que o cabeçalho deve ser

centrado
<body bgcolor="yellow"> define a cor do fundo
 9

Divisão de página
• Utiliza-se a tag <hr>

Atributo Valor Descrição

Align Center Especifica a posição da linha horizontal
Left
Right
color
Size Pixels Espessura da linha
%
Width Pixels Comprimento da linha
%
 10

Divisão de página
• Exemplo
 11

Caracteres Especiais
• Alguns caracteres têm um significado especial em html,
exemplo: <

• Se queremos que o navegador escreva mesmo o

caracter < temos que usar uma “entidade de caracter”
constituída por três partes :
• &
• Nome ou # seguido de um nº
• ;
 12

Caracteres Especiais - Exemplos

 13

Caracteres Especiais - Exemplos

 14

Definição do fundo da página

• Pode ser feita através da atribuição de uma cor ou de uma
imagem.

• Quando é feita através de uma imagem esta repete-se até

preencher a totalidade da área de fundo da página.

• Faz-se através da utilização dos atributos bgcolor e

background da tag <body>

<body bgcolor=“#000000”
background=“http://www.imagens/imagem.jpg”>
 15

Cor de fundo
• Atributo bgcolor da tag <body>

• Aceita valores que podem ser referenciadas de 3

maneiras distintas
• Nome da cor em inglês (ex: black, blue, red, yellow, etc) entre
aspas
• Sistema de numeração hexadecimal (ex: #FFFF00) usa o
sistema RGB, isto é, cada grupo de 2 dígitos indica o valor para
Red, Green e Blue.
• Sistema de numeração decimal (ex: rgb(2,255,0)

• Podes ver códigos de cores em

www.computerhope.com/htmcolor.htm ou
http://www.w3schools.com/html/html_colors.asp
 16

Texto - Formatação
• Há inúmeras tags para a formatação de texto

• Para alterar a cor, o tipo de letra e o seu tamanho utiliza-

se a tag <font> que pode conter os atributos
• Size : mudar o tamanho da letra, color e face
• Face: mudar o tipo de letra
• Color: mudar a cor da letra
 17

Texto - Formatação
Lista de Fontes HTML (exemplos) :
• Arial
• Times New Roman
• Helvética
• Courier New
• Verdana
• Calibri
• Cambria
• Garamond
 18

Texto - Formatação
• Exemplos:
 19

Texto - formatação
Tag Resultado
<b> Texto a negrito
<big> Texto grande
<em> Texto itálico sombreado
<i> Texto itálico
<small> Texto pequeno
<strong> Texto grande negrito
<sub> Texto inferior à linha
Texto superior à linha
<sup>
<ins> Texto sublinhado

<del> Texto rasurado

 20

Fazer Ficha de trabalho 1

Exercício 1.1 e exercício 1.2
 21

Listas
• Lista ordenada: <ol>
• Lista não ordenada: <ul>
• <li>: precede cada um dos items
• Atributos
• Type: tipo de numeração (1, a, A, i)
• Start: valor onde começa a numeração (numérico)
• Type: tipo de bullets (circle, square, disc)
• Imgsrc
 22

HTML - listas
• Listas não ordenadas Lista não ordenada
<html>
<body> • Café
<h4>Lista não ordenada:</h4> • Leite
<ul> • Chá
<li>Café</li>
<li>Leite</li>
<li>Chá</li>
</ul>

</body>
</html>
 23

HTML - listas
• <html> Lista ordenada
• <body>
1. Café
• <h4> Lista ordenada</h4> 2. Leite
• <ol> 3. Chá
• <li>Café</li>
• <li>Chá</li>
• <li>Leite</li>
• </ol>

• </body>
• </html>
 24

HTML – Listas de definição

<html> Lista de definição:
<body> • Cafe
• Bebida quente de côr
escura
<h4>Lista de definição:</h4>
• Leite
<dl>
• Bebida de côr banca
<dt>Café</dt>
<dd>Bebida quente de côr escura</dd>
<dt>Leite</dt>
<dd>Bebida de côr branca</dd>
</dl>

</body>
</html>
 25

Ficha de trabalho 1 Ex 1.3

 26

Imagens
• Dos componentes mais importantes
• Maiores responsáveis pelos atrasos no carregamento das
páginas
• É possivel colocar vários formatos de imagens
• Eficiência e tamanho, os formatos mais comuns são JPEG, GIF e
PNG
 27

Imagens
• São definidas usando a etiqueta <img> e o atributo src
• Src (source) espifica a localização da imagem
• <img src="url"> (url refere a localização da imagem a
inserir
• A imagem é colocada no sítio onde a etiqueta <img> se
encontra
 28

Imagens- atributos
• Align – alinha a imagem
• Border – altera a espessura da borda à volta da imagem
• Width – altera a largura da imagem
• Height – altera a altura da imagem
• Alt – texto que aparece quando o rato passa sobre a
imagem
 29

Imagens - alinhamento
Atributo descrição
Top Alinha o topo da imagem pelo elemento mais acima da linha
Middle Alinha o centro vertical da imagem com a linha de texto
Bottom Alinha a parte de baixo da imagem com a parte de baixo dos
outros elementos
Absmiddle Centra a imagem no centro do texto
Texttop o topo da imagem com o topo do texto
Baseline Alinha a imagem pela base dos outros elementos
Absbottom Alinha a parte inferior da imagem pelo elemento mais baixo da
linha
Right Alinha à direita
Left Alinha á esquerda
 30

Imagens – altura e largura

• Utilizam-se os atributos height (altura) e width (largura)
com os valores expressos em % ou pixeis

Exemplo:
<img src=“folhas.png” height=165 width=130 align=“left”>
 31

Imagens – colocação de um contorno

• Atributo border da tag <img>

• O valor do atributo border é igual ao nº de pixeis que o

contorno terá de largura

• Se for = 0 equivale a não existir contorno

 32

Imagens
• Exemplo:

<img
src=http://www.ventopolar.com/canada/albums/icedream02
/Vancouver_por_do_sol.jpg“ width="144" height="50">
 33

Ficha de trabalho 1 Ex 1.4 e Ex 1.5

 34

Links – etiqueta <a>

• <a href="url">Texto </a>
• Pode apontar para qualquer recurso na web: uma página html, um
imagem, um ficheiro de som, um video, etc

Exemplo:
<a href=" http://www.aefc.pt/ "> Visite a página da ES do
Forte da Casa!</a>
 35

Links: exemplos
<body>
<a href=“outra_pagina.html”> Outra página </a>
<a href=“dir/imagem.jpg”> imagem num directório
diferente </a>
</body>
 36

Links internos
• Link para diferentes partes no mesmo documento
<body>
<a href=“#texto”> clicar </a>
…
<a name=“texto”> zona pretendida </a>
</body>
 37

Links – atributo target

• Para abrir o documento noutra janela

<a href=" http://www.aefc.pt/ “ target=“_blank”> Visite a

página da ES do Forte da Casa!</a>
 38

Links – atributo name (marcador)

• Permite saltar directamente para um local específico de

uma página
<a name="label">Texto</a>
• Exemplo:
<a name="tips">Seção tips</a>

<a href="#tips">Saltar para a seção tips</a>

 39

Links
• Também podemos definir uma hiperligação numa imagem

<a href=“nome do documento”><img src=“nome da

imagem”> <\a>
 40

Links
• Para documentos internos ao website
<a href=“nome do documento”> o documento situa-se na
mesma pasta<\a>

<a href=“../nome do documento”>o documento situa-se na

pasta imediatamente anterior <\a>
 41

Ficha de trabalho 1 ex2

 1

Tabelas
• São, muitas vezes a base de uma página web
• São definidas com a etiqueta <table>
• <tr> (table row), para dividir em linhas
• <th>, para o cabeçalho de uma coluna
• <td> para criar as células em cada linha
 2

Tabelas - Exemplo
<table border="1">
<tr>
<td>linha 1, cel 1</td> linha1,cel1 linha1,cel2
<td>linha 1, cel 2</td>
</tr> linha2,cel1 linha2,cel2
<tr>
<td>linha 2, cel 1</td>
<td>linha 2, cel 2</td>
</tr>
</table>
 3

Tabelas – Exemplo com cabeçalhos

<table border="1">
<tr>
<th>Cabeçalho 1 </th>
<th>Cabeçalho 2 </th>
Cabeçalho 1 Cabeçalho 2
</tr>
<tr>
<td>linha 1, cel 1</td>
linha1, cel 1 linha 1, cel 2
<td>linha 1, cel 2</td>
</tr> linha 2, cel1 linha 2, cel2
<tr>
<td>linha 2, cel 1</td>
<td>linha 2, cel 2</td>
</tr>
</table>
 4

Atributos
Bordercolor Cor dos limites da tabela
Bgcolor Cor de fundo de uma célula ou da tabela
Background Imagem de fundo de uma célula ou da tabela
Align Alinhar horizontalmente o conteúdo de uma célula ou
alinhar toda a tabela
Valign Alinhar verticalmente o conteúdo de uma célula
Width Alterar a largura de uma célula ou de toda a tabela
Height Alterar a altura de uma célula ou de toda a tabela
Rowspan Juntar duas ou mais linhas numa célula
Colspan Juntar duas ou mais colunas numa célula
 5

Tabelas - Espaçamentos
• Atributo cellspacing da tag <table>:
✓espaçamento entre o texto e os limites das células
• Atributo cellpadding:
✓espaço entre o conteúdo da celula e a “parede” da
célula
 6

Tabelas - Espaçamentos
• Exemplo:
 7

Tabelas - dimensões
• Atributo width e height
- podem dimensionar
as células e as tabelas
de forma:
• Absoluta : em pixéis
• Relativa: em
percentagem
 8

Tabelas – Tabelas aninhadas

• Tabelas aninhadas são tabelas dentro de outras tabelas.
 9

Tabelas – alinhamentos e fundo

• Atributo align
• Valores que pode ter: left,
center, right

• Atributo valign
• Valores que pode ter: top,
middle e bottom
 10

Tabelas – alinhamentos e fundo

• Atributo bgcolor – cor à tabela/células
 11

Tabelas – fusão de células

• Atributo colspan : fusão de células na horizontal

• Atributo rowspan: fusão de células na vertical

• Por exemplo, se:

Colspan = 2 (funde 2 células na horizontal)
Rowspan = 4 (funde 4 células na vertical)
 12

Tabelas – fusão de células

• Exemplo:
 13

Fazer Ficha de trabalho 2

Ex 1.1 e 1.2
 1

Etiqueta <div>
• Define uma divisão ou seção num documento HTML

• É muito usada para agrupar elementos para os quais

queremos definir um determinado estilo.

• É um facilitador para organizar informações dentro de um

layout.
 2

Etiqueta <div>
• <div> ... </div>

• Vamos utilizar algumas

divisões para poder
separar os parágrafos no
exemplo ao lado.

• Podemos incluir qualquer

outros elementos HTML,
ou seja, outras tags,
dentro de uma div HTML.
 3

Atributos da Etiqueta <div>

• id – Define uma ID;
• class – Define uma classe;
• title – Define um título;

Alterando a cor de fundo/background da HTML Div

• para poder alterar a cor de fundo de uma div, devemos usar o
CSS.
• Para modificar a cor de fundo, basta utilizar a propriedade
background ou background-color do CSS.
• Podemos utilizar o estilo inline, através do atributo style=”…”,
através do CSS dentro das tags <style> ou ainda através de
um folha de estilo externa.
 4

Atributos da Etiqueta <div>

• vejamos então as diversas formas de declarar uma cor de
fundo:

• Independente de qual dos códigos acima for utilizado, o

resultado será o mesmo, uma div contendo um fundo na cor
vermelha.
 5

Etiqueta <div>

Para saberem mais sobre a etiqueta DIV podem consultar o seguinte sitio:
https://www.homehost.com.br/blog/tutoriais/html-div/
 6

Ficha de trabalho 2
Ex 1.3 e 1.4 e 1.5 e 1.6
 1

Inserção de elementos multimédia – Gifs

animados
• <img src=“nome do ficheiro do gif animado>

• A imagem não deve ser redimensionada através dos atributos height

e width pois o ficheiro é carregado na totalidade
 2

Inserção de elementos multimédia –

Áudio
• Formatos que os browsers suportam: MIDI, wav e mp3 (mais
populares)

• Utiliza-se a tag <embed>

<embed src=”nome do ficheiro de musica”><\embed>

 3

Inserção de elementos multimédia –

Áudio
• Atributos
• Src: url do ficheiro a embeber
• Autostart: indica se o ficheiro de som deve ser iniciado
imediatamente após ter sido carregado (true ou false)
• Hidden: define se o ficheiro de som deve ser visível na página web
(true ou false)
• Loop: reproduz continuamente o ficheiro de som (se tiver o valor
true)
 4

Inserção de elementos multimédia –

Áudio
• O Internet Explorer aceita também a tag <bgsound> que
coloca a execução do ficheiro como som de fundo de
uma página web

• Atributos: src e loop (define o nº de vezes que o som deve tocar)

 5

Inserção de elementos multimédia –

Vídeo
• Formatos de ficheiro de vídeo:
• avi, mov e mpeg
• Tag <embed> : semelhante aos ficheiros de som
 6

Molduras (frames)
• São áreas onde é possível apresentar várias páginas web
distintas na mesma janela do browser
• Vantagem:
• permite trabalhar com vários documentos independentes dentro da
mesma janela
• Podemos destinar um dos documentos para menu de navegação e
o outro para expôr o conteúdo
 7

Molduras (frames)
• Desvantagens

• desenvolvimento da página mais complicado

• Dificulta a impressão da totalidade do documento
• Pode tornar a navegação incómoda, devido à necessidade de ter
que se utilizar as barras de deslocamento vertical e horizontal
 8

Molduras - criação
• Etiquetas <frameset>, </frameset> e <frame>
• <frameset> : responsável pela inserção de frames
• Deve ser inserida após a tag </head> e antes da tag <body>
• Define-se o nº de frames que serão adicionados à página
 9

Molduras
• <frame>: indica quais os documentos que deverão ser
abertos dentro de cada uma das subjanelas (através do
atributo src)
• Precede cada frame
 10

Molduras – atributos da etiqueta

<frameset>
• Atributo rows : permite fazer a divisão horizontal

• Atributo cols: permite fazer a divisão vertical

 11

Molduras – rows e cols

• São criadas tantas divisões quantos os valores a que se
iguale, separando-os por vírgulas
Ex: <frameset rows =“100,*”>
<frameset cols =“20%, 80%”>
• Os valores podem dimensionar as frames de forma
absoluta (pixeis) ou relativa (%)
 12

Molduras – atributos da <frame>

• name
• Permite atribuir um nome à frame
• Frameborder
• Permite retirar o limite da frame quando se iguala a 0
• Bordercolor
• Permite alterar a cor dos limites
 13

Molduras – atributos da <frame>

• noresize
• Permite alterar ou não o tamanho
<frame noresize=“noresize”>
• scrolling : permite que a subjanela apresente (yes) ou
não (no) as barras de deslocamento
• valor auto: as barras são mostradas por decisão do browser,
sempre que necessário (valor por defeito)
 14

Molduras – atributos da <frame>

• Marginwidth: permite definir o valor, em pixeis, da
margem lateral
• Marginheight: permite definir o valor, em pixeis, da
margem superior
 15

Molduras - <noframes>
• Para o caso de o browser não suportar frames deve-se
utilizar a tag <noframes>, a qual só é visível nos
browsers que não suportam frames
Ex:
<noframes>
<body> O seu browser não suporta
frames </body>
</noframes>
 16

Molduras - <iframe>
• Criar uma subjanela embutida num documento principal
HTML
• São declaradas inline podendo ocupar apenas uma
porção da página principal
• Atributos
• Width: largura
• Height: altura
• frameborder
 17

iFrames
<html>
<body bgcolor ="green">
<iframe src="Frame1.html" width=250 height=300
frameborder=0>
</iframe>
</body>
</html>
 18

Molduras - hiperligações
• As hiperligações são processadas dentro da janela em
que são chamadas
• Se queremos abrir o novo documento numa subjanela
diferente da de origem, é necessário atribuir um nome à
frame de destino através do atributo name da tag
<frame>
 19

Molduras - hiperligações
• Atribuir um nome à frame onde os documentos vão ser
visualizados

<frame name=“documento” scrolling=“auto” src =

“Outono.html”>
 20

Molduras - hiperligações
• No documento da frame de origem, utilizam-se a tag <a> e
os atributos href e target

<a href =“exemplo.html” target=“documento”>

página principal </a>
 21

Molduras - hiperligações
• Para uma secção de uma moldura : tem que se indicar a
frame onde o novo documento deve ser aberto e a
secção para a qual se deseja ir

<a href=“exemplo.html” target=“documento”> Exemplo</a>

 22

Ficha de trabalho 3
 1

Inserção de elementos multimédia – Gifs

animados
• <img src=“nome do ficheiro do gif animado>

• A imagem não deve ser redimensionada através dos atributos height

e width pois o ficheiro é carregado na totalidade
 2

Inserção de elementos multimédia –

Áudio
• Formatos que os browsers suportam: MIDI, wav e mp3,

• Utiliza-se a tag <embed>

<embed src=”nome do ficheiro de musica”><\embed>

 3

Inserção de elementos multimédia –

Áudio
• Atributos
• Src: url do ficheiro a embeber
• Autostart: indica se o ficheiro de som deve ser iniciado
imediatamente após ter sido carregado (true ou false)
• Hidden: define se o ficheiro de som deve ser visível na página web
(true ou false)
• Loop: reproduz continuamente o ficheiro de som (se tiver o valor
true)
 4

Inserção de elementos multimédia –

Áudio
• O Internet Explorer aceita também a tag <bgsound> que
coloca a execução do ficheiro como som de fundo de
uma página web

• Atributos: src e loop (define o nº de vezes que o som deve tocar)

 5

Inserção de elementos multimédia –

Vídeo
• Formatos de ficheiro de vídeo:
• avi, mov e mpg, mp4
 6

Inserção de elementos multimédia –

Vídeo
• Formatos de ficheiro de vídeo:
• avi, mov e mpg, mp4

VER ESTE SITE

https://pt.slideshare.net/camilahamdan_education/d
esign-grfico-para-web-html-5-multimdia

https://pt.slideshare.net/joseberardo/html5-aula-5
 7

Molduras (frames)
• São áreas onde é possível apresentar várias páginas web
distintas na mesma janela do browser
• Vantagem:
• permite trabalhar com vários documentos independentes dentro da
mesma janela
• Podemos destinar um dos documentos para menu de navegação e
o outro para expôr o conteúdo
 8

Molduras (frames)
• Desvantagens

• desenvolvimento da página mais complicado

• Dificulta a impressão da totalidade do documento
• Pode tornar a navegação incómoda, devido à necessidade de ter
que se utilizar as barras de deslocamento vertical e horizontal
 9

Molduras - criação
• Etiquetas <frameset>, </frameset> e <frame>
• <frameset> : responsável pela inserção de frames
• Deve ser inserida após a tag </head> e antes da tag <body>
• Define-se o nº de frames que serão adicionados à página
 10

Molduras
• <frame>: indica quais os documentos que deverão ser
abertos dentro de cada uma das subjanelas (através do
atributo src)
• Precede cada frame
 11

Molduras – atributos da etiqueta

<frameset>
• Atributo rows : permite fazer a divisão horizontal

• Atributo cols: permite fazer a divisão vertical

 12

Molduras – rows e cols

• São criadas tantas divisões quantos os valores a que se
iguale, separando-os por vírgulas
Ex: <frameset rows =“100,*”>
<frameset cols =“20%, 80%”>
• Os valores podem dimensionar as frames de forma
absoluta (pixeis) ou relativa (%)
 13

Molduras – atributos da <frame>

• name
• Permite atribuir um nome à frame
• Frameborder
• Permite retirar o limite da frame quando se iguala a 0
• Bordercolor
• Permite alterar a cor dos limites
 14

Molduras – atributos da <frame>

• noresize
• Permite alterar ou não o tamanho
<frame noresize=“noresize”>
• scrolling : permite que a subjanela apresente (yes) ou
não (no) as barras de deslocamento
• valor auto: as barras são mostradas por decisão do browser,
sempre que necessário (valor por defeito)
 15

Molduras – atributos da <frame>

• Marginwidth: permite definir o valor, em pixeis, da
margem lateral
• Marginheight: permite definir o valor, em pixeis, da
margem superior
 16

Molduras - <noframes>
• Para o caso de o browser não suportar frames deve-se
utilizar a tag <noframes>, a qual só é visível nos
browsers que não suportam frames
Ex:
<noframes>
<body> O seu browser não suporta
frames </body>
</noframes>
 17

Molduras - <iframe>
• Criar uma subjanela embutida num documento principal
HTML
• São declaradas inline podendo ocupar apenas uma
porção da página principal
• Atributos
• Width: largura
• Height: altura
• frameborder
 18

iFrames
<html>
<body bgcolor ="green">
<iframe src="Frame1.html" width=250 height=300
frameborder=0>
</iframe>
</body>
</html>
 19

Molduras - hiperligações
• As hiperligações são processadas dentro da janela em
que são chamadas
• Se queremos abrir o novo documento numa subjanela
diferente da de origem, é necessário atribuir um nome à
frame de destino através do atributo name da tag
<frame>
 20

Molduras - hiperligações
• Atribuir um nome à frame onde os documentos vão ser
visualizados

<frame name=“documento” scrolling=“auto” src =

“Outono.html”>
 21

Molduras - hiperligações
• No documento da frame de origem, utilizam-se a tag <a> e
os atributos href e target

<a href =“exemplo.html” target=“documento”>

página principal </a>
 22

Molduras - hiperligações
• Para uma secção de uma moldura : tem que se indicar a
frame onde o novo documento deve ser aberto e a
secção para a qual se deseja ir

<a href=“exemplo.html” target=“documento”> Exemplo</a>

 23

Ficha de trabalho 3
 1

Formulários
• Meio de interacção mais importante entre o utilizador e
uma página web
• Servem apenas para construir a parte visual
• Após o preenchimento dos campos deve-se clicar no
botão de submissão
• Só funciona com a utilização de outras linguagens (php, asp, etc)
 2

Formulários
• Tag <form> … </form>

• Atributos
• action: indica o URL para onde os dados serão enviados
• method: especifica a forma como os dados serão enviados ( pode
tomar o valor get ou post)
• Name: nome atribuído a cada elemento do formulário
• Enctype: tipo de conteúdo para codificar os dados a enviar ao
servidor. (pode ser application/x-www-form-urlencoded ou
multipart/form-data)
 3

Formulários – atributo method

• get (valor por defeito):

• adiciona a informação, como argumento, ao URL, após um sinal de ?

• a seguir ao sinal ? surgem os campos do formulário, separados pelo
caracter & e formados pelo conjunto nome_campo = valor
• todos os espaços são substituídos pelo sinal +
 4

Formulários – atributo method

• post:

• envia a informação no corpo de uma mensagem através de uma

transacção HTTP

• Deve ser o método a utilizar já que assim os dados não serão

visíveis no URL
 5

Formulários - campos
• Para se enviar informação esta tem que ser inserida em
campos de um formulário.

• São criados através da tag

• <input>: indica o tipo de elemento
• <select> : criar uma dropbox
• <textarea>: criar uma textbox com medidas mais alargadas
• <button>: inserção de um botão
 6

Formulários - <input>
• Mais importante devido à variedade de elementos que
permite inserir
• Atributo type: define o tipo de elemento a inserir

• Outros atributos
• Name: nome atribuído a cada elemento
• Value: valor por defeito e valor introduzido
• Size: define o tamanho
• Maxlength: numero máximo de caracteres no campo de texto.
 7

Formulários - <input>
Atributo Valor
Type button checkbox file hidden image password radio reset
submit text

Atributo Descrição
Value Quando usado em botões normais, de reset e de submit,
define o texto que aparece escrito no botão.

Quando usado em caixas de validação, checkbox e botões

rádio, ao ficar activo define o valor do campo de input. Este
valor é enviado para processamento, juntamente com os
valores dos restantes campos do formulário.

Quando os campos são do tipo oculto (type=“hidden”),

password (type = “password”) e texto (type=“text”), define o
valor que o campo possui por omissão.
Obrigatório para campos checkbox (type= “checkbox”) e
radio button (type=radio).
 8

Formulários
 9

Tag <select>
• Insere uma dropbox

• Para inserir as diversas opções na dropbox usa-se a

subtag <option>, que tem que ser fechada no final de
cada opção
 10

Tag <select> - atributos

• Name: nome atribuído à dropbox
• Size: define o tamanho da dropbox na vertical
• Value: valor das opções que serão captadas pelo botão
submit
• Selected: colocar na opção que se pretende que esteja
seleccionada por defeito
 11

Atributo name
• Nas checkbox, o atributo name tem nomes diferentes,
porque o utilizador pode seleccionar mais do que uma
opção
• Nos radio buttons, os nomes têm de ser iguais, já que
quando se selecciona uma opção a(s) outra(s) deixam de
estar seleccionadas
 12

Atributo name
 13

Tag <textarea>
• Serve para criar uma área de texto com dimensões mais
alargadas

• Atributos
• Cols: largura, em caracteres, da caixa de texto
• Rows: altura, em linhas
• Name: nome
• Readonly: não permite alterar o conteúdo
 14

Tag button
• Tem o mesmo efeito que a tag <input type=“button”>, mas
o botão pode ser incluido sem fazer parte do formulário
• Por exemplo para uma hiperligação

• Atributos
• Type: define o tipo de botão (button, submit ou reset)
• Name: nome
• Disabled: desactiva
 15

Tag <fieldset>
• Permite agrupar elementos de um formulário em caixas,
que podem ser legendadas através da subtag <legend>.

• Ambas têm que ser fechadas

• </fieldset>
• </legend>
 16

Tag <fieldset>
 17

Promoção do website
• Inscrevê-lo num motor de busca

• Convém colocar alguma meta-informação no documento

• Meta-informação: pode conter informação sobre o

documento que não é visualizada no browser
Exemplos: descrições, palavras-chave
 18

Promoção do website
• Dentro da tag <head> é possível colocar a tag <meta>

• Atributos da tag <meta>

• http-equiv
• name
• content
 19

Atributos da tag <meta>

Atributo Valor Descrição
content Algum texto Define a meta informação associada ao atributo
http-equiv ou name
http-equiv content-type
expires Liga o atributo content a um cabeçalho de
refresh HTTP
set-cookie
name author
description
keywords Liga o atributo content a um nome
generator
revised
outros
 20

Promoção do website
• Para promover o website utiliza-se na tag <meta> o
atributo name com os valores associados, description e
keywords

• Description: breve descrição do documento

• Keywords: palavras-chave relevantes

 21

Promoção do website
Ex:
<meta name=“description” content=“informação
escola secundária forte da casa”>

<meta name=“keywords” content=“ escola,

secundária, Forte da Casa>
 22

Ficha de trabalho 4
 1

FINALIZAÇÃO DO
WEBSITE
 2

Teste do website
• Convém testar o website em vários browsers
• Pontos principais:
• Compatibilidade com os browsers
• Organização do conteúdo e das páginas
• Layout das páginas
• Tempo de carregamento das páginas
• Ligações quebradas entre páginas
• Erros ortográficos e frases mal construídas
 3

Publicação do website
• Num servidor pessoal
• É necessário ter instalado software que seja responsável por
fornecer dados em tempo real aos computadores clientes
• Protocolo HTTP (transmissão de hipertexto)

• É necessário copiar os ficheiros do site para um directório próprio

de publicação da web e atribuir um nome ao ficheiro que
corresponde à página inicial do site (ex: index.htm)
 4

Publicação do website
• Para que os utilizadores de uma intranet possam aceder ao site é
necessário que este esteja num servidor web interno identificado
pelo nome do computador ou por um endereço IP na rede interna.

• Para que se possa aceder ao site através da Internet é necessário

que o servidor esteja registado num domínio com um endereço IP
único que o identifique na rede
 5

Publicação do website
• Por FTP (File Transfer Protocol) – usando software cliente
de FTP
• Utilizar um software que permita a transferência de ficheiros entre
computadores
• Obter dados do servidor para configurar a ligação por FTP:
• Endereço de FTP do servidor web remoto
• Nome e password do utilizador para ter permissão de acesso ao
servidor e efectuar o upload dos ficheiros

• Por FTP – através de um programa de edição de páginas:

• Ex: FrontPage – Publicar Site no menu Ficheiro
 6

Promoção do website
• Optimização das páginas para motores de pesquisa:
• Títulos das páginas
• Tags meta e alt
• Palavras chave
• Desenho e ergonomia das páginas
• Conteúdo legível

• Submissão do website com recurso a software

adequado:
• Software que ajuda a registar o site de forma rápida e automática
• Registo nos motores de pesquisa é a maneira mais eficaz de
promover o website