Aprender HTML (UFCD0152 e UFCD0153) v2

0152 Estrutura de um sítio para Internet
0153 Finalização de um sítio para Internet
PROFISSIONAL EM WEBDESIGN
b Estrutura e finalização de um website
Dúvidas?
Pergunte. Agora! 2
Qualquer coisa:
eu@afonsogomes.com

Objectivos para hoje
Introdução
Apresentações
Primeira abordagem a conteúdos: HTML, CSS, PHP, mySQL e javascript
História e evolução da Internet
Esquemas de navegação. Conceitos modelo cliente-servidor. Protocolos
Diferentes Browsers e plataformas disponiveis
Noções de Layouts (e wireframing), tipografia, conteúdos e simplicidade.
Análise de um website completo
Software necessário
Introdução ao HTML
O primeiro site
*
* Você está aqui!
Dúvidas?
Pergunte. Agora! 3
Qualquer coisa:
eu@afonsogomes.com

INTERNETo que é?
Dúvidas?
Pergunte. Agora! 4
Qualquer coisa:
eu@afonsogomes.com

O nosso PC/telemóvel está na e faz parte da internet.
A nossa rede caseira está na e faz parta da internet.
Até as televisões já estão na Internet!
Dúvidas?
Pergunte. Agora! 5
Qualquer coisa:
eu@afonsogomes.com

Internet
- Rede global de aparelhos interligados.
- Permite um Mundo ligado.. e cada vez mais em tempo real.
- Começou pela simples necessidade de ler documentos de forma mais fácil.
- A sua invenção é atribuida a Tim Berners-Lee (investigador do CERN)
- Tim Berners-Lee... e não de Eletrotécnica ou de Informática
- Nasceu no CERN, em Geneva na Suiça, e não nos Estados Unidos.
- Nunca desista de um sonho! A primeira proposta de WWW foi !
CURIOSIDADES!
Eng. Físico
(como seria de assumir!)
(como seria de assumir!)
RECUSADA
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com 6

Internet
Tim Berners-Lee Primeiro servidor de web
O pai da internet
7
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
7

Topologias (Esquemas de Navegação)
Fila Árvore Bus
Anel Rede (Mesh) Estrela
Totalmente
Ligada
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
8

Modelo de computção: CLIENTE-SERVIDOR
ClienteCliente
Cliente
Cliente
Cliente
SERVIDOR
Internet
O pede, o serve!cliente servidor
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
9

Modelo de computção: CLIENTE-SERVIDOR
Server Farm (Quinta de servidores) da Google
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
10

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
11

Protocolos
O que são e para que servem?
Quando navegamos na net, estamos conscientes que (sequer) existem?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
12

Protocolos
- Conjunto de regras establecidas entre máquinas para que possam
«falar» entre si;
- Podem definir:
- que tipo de comunicação é establecida;
- ordem da troca de mensagens;
- mensagens de estado (OK, ACK, NACK, etc...)
- tipo do pedido (PUT, POST, DELETE, GET, HEAD, entre outros)
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
13

Protocolos
Algumas vez os vimos?
Não estarão bem à frente dos nossos olhos?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
14

Protocolos
Algumas vez os vimos?
Não estarão bem à frente dos nossos olhos?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
15

Protocolos
HTTP
FTP
SMTP
HyperText Transfer Protocol
File Transfer Protocol
Simple Mail Transfer Protocol
POP Post Office Protocol
Usado pelo cliente (o browser) para pedir paginas HTML ao servidor
Usado pelo webdesigner para gerir ficheiros no servidor
Utilizado no envio de email (envio)
Também usado no envio de emails (recepção)
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
16

HTTP
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
17

Protocolos
- Conjunto de regras establecidas entre máquinas para que possam
«falar» entre si;
- Podem definir tudo sobre a comunicação que vai ser efectuada.
- Em páginas web os mais importantes são o HTTP e o FTP ... e também o SMTP
- HTTP para pedirmos e sermos servidos páginas web.
- FTP para podermos colocar as nossas páginas num servidor
- SMTP para podermos receber emails através do nosso site.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
18

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
19

Browsers
Apple Safari
Opera
Mozilla Firefox
Google Chrome
MS Internet Explorer
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
20

Quando chega a hora de escolher um browser ...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
21

Plataformas
PC Desktop? Telemóvel? Tablet? Consola?
E se for telemóvel?? iPhone? Android?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
22

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
23

LAYOUT
É o design do nosso site só visto pela perspectiva da estrutura e design
Sem considerar conteúdos nem funcionalidades
Quando falamos do LAYOUT falamos de estrutura do site, de como os diferentes blocos
estão distribuídos na página, cores, tipos de letra, etc...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
24

WIREFRAMING
Significado lato em português: a armação de arames.
É uma coisa que fazemos num papel, ou bloco de notas... conforme a preferência de cada um.
É um dos primeiros e mais essenciais passos na preparação e planeamento de um futuro site.
É TERRIVELMENTE fácil de fazer ... e para o sabermos fazer... basta ver muitos sites e
reparar na estrutura de cada um
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
25

WIREFRAMING: Exemplos
Esboço inicial em papel
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
26

Esboço mais avançado (e polido) em PC
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
27

Um que eu fiz
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
28

WIREFRAMING: Como fazer
Título da página
afonsogomes.com/
Rodapé (footer)
Cabeçalho (Header)
Corpo do siteBarra Lateral
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
29

Título da página
afonsogomes.com/
FACEBOOK
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
30

Título da página
afonsogomes.com/
Rodapé (footer)
Cabeçalho (Header)
Corpo
Logo
Menu
Facebook
Copyright
Noticia 1
Notícia 2
Publicidade
BarraLateral
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
31

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
32

Qual o porquê da sua importância em Webdesign?
Como classificar as «fonts» (tipos de letra)?
Que famílias de tipos de letra são consideradas «Web Safe»?
Tipografia e Famílias de Tipos de Letra
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
33

Tipografia e Familias de Tipos de letra
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
French Script
Edwardian Script
Futura
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
34

Tipografia: Classificar uma família de fontes
ABCDúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
35

ABCSERIF
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
36

ABCSANS-SERIF
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
37

AbcdeScript
também conhecidas como Handwritting
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
38

AbcMonospace
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
39

Classificação: Resumo
Abc Monospace
ABC
ABC
Abc
Sans-Serif
Serif
Script
Frequentemente usadas em cabeçalhos
Usadas em todo o lado!
Usadas quando é preciso exibir blocos de código
(normalmente sites de programação)
Raramente utilizadas na Internet
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
40

ACTIVIDADE: Classifiquemos as fonts!
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
French Script
Edwardian Script
Futura
Calibri
Cambria
Constantia
Freehand
Garamond
Gotham
Century Gothic
Serif Sans-Serif Script Monospace
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
41

ACTIVIDADE: Classifiquemos as fonts!
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
French Script
Edwardian Script
Futura
Calibri
Cambria
Constantia
Freehand
Garamond
Gotham
Century Gothic
Serif Sans-Serif Script Monospace
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
42

Websafe font?
O conceito de websafe, «segura para a internet» em português,
refere-se ao facto da font
estar ou não presente,
,
em
os Sistemas Operativos.
(Consideram-se apenas os principais SO’s ... Windows, Linux e Mac)
DE RAIZ
TODOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
43

Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
French Script
Edwardian Script
Futura
Calibri
Cambria
Constantia
Freehand
Garamond
Gotham
Century Gothic
ACTIVIDADE: Quais serão as Websafe fonts?
*
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
44

Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
French Script
Edwardian Script
Futura
Calibri
Cambria
Constantia
Freehand
Garamond
Gotham
Century Gothic
ACTIVIDADE: Quais serão as Websafe fonts?
*
*
*Quando usadas em conjunto
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
45

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
46

Design e conteúdos
DESIGN
vs.
CONTEÚDOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
47

SIMPLICIDADE
“A perfeição não é alcançada
quando não há mais nada a ser incluído,
mas sim quando não há mais nada a ser retirado.”
Antoine de Saint-Exupéry
Bem vindos à famosa !Web2.0
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
48

O que vimos até agora
Introdução
Apresentações
Primeira abordagem a conteúdos: HTML, CSS, PHP, mySQL e javascript
Esquemas de navegação. Conceitos modelo cliente-servidor. Protocolos
Diferentes Browsers e plataformas disponiveis
Noções de Layouts (e wireframing), tipografia, conteúdos e simplicidade.
Análise de um website completo
Software necessário
O primeiro site
*
* Você está aqui!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
49

Actividade
http://publico.pt http://jn.pt http://dn.pt http://expresso.pt
http://maisfutebol.pt http://ojogo.pt http://abola.pt http://record.pt
http://sapo.pt http://tmn.pt http://vodafone.pt http://optimus.pt
Tempo a carregar a página.
Design:
Conteúdos:
Plataformas:
Funcionalidades:
No geral:
Lento? Rápido? Ficou aborrecido entretanto?
Estrutura. Cores. Tipo de letras. Achou simples e agradável navegar?
Sendo você da área. São uteis? Sendo potencial visitante? Quer lá ir?
Existe site móvel ou o site adapta-se a dispositivos?
Muitas e boas ou poucas e rascas?
Parecem pessoas simpáticas? É fácil falar com eles se quiser?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
50

Olhar crítico
Vamos analisar:
Jardim Botânico da UTAD
http://jb.utad.pt
Tempo a carregar a página.
Design:
Conteúdos:
Plataformas:
Funcionalidades:
Público-alvo:
Lento, ou Rápido.
Estrutura. Cores. Tipo de letras.
Muitos e bem organizados? Úteis?
Site móvel? Dá para todos os ecrãs?
Experts de design ou pessoas da área que não ligam ao design?
Ficou aborrecido entretanto?
Simples?
Encontrou o que queria?
Foi exibido correctamente?
Acrescentam mais-valias?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
51

Concluindo: Fazer sítios web
Velocidade do carregamento
Estrutura
Cores
Tipos de Letra
Funcionalidades do site
Organização Conteúdos
Dispositivo do utilizador
Ecrã do utilizador
Sistema operativo
Público-alvo
Considerações a ter sempre presentes
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
52

Concluindo: Fazer sítios web... TECNOLOGIAS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
53

Concluindo: Fazer sítios web
Considerações a ter sempre
Cores e Tipo de letra:
Estruturação e organização:
Funcionalidades:
Influencia o tipo de sentimento que cria no visitante
Influencia a interactividade do visitante com o site
Combinação de Browsers, Sistema Operativo e resolução do ecrã.
Dispositivo que o visitante está a usar para visualizar o website
A quem se destina o site. Público exigente, misto ou nada exigente?
Menus bem organizados e bem posicionados.
Interface simples, intuitiva e simples
Que funcionalidade são úteis. Quais podem ser acrescentadas
e quais devem ser removidas
Plataformas:
Público-alvo:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
54

Software necessário para criação de websites
Notepad++
http://notepad-plus-plus.org/
XAMPP
http://www.apachefriends.org/pt_br/
FILEZILLA
https://filezilla-project.org/
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
55

- Criar um novo ficheiro .html
- Abrir no Notepad++ para edição
- Escrever «Olá Mundo»
- Guardar
- Executar o ficheiro para abrir no browser
ACTIVIDADE: O PRIMEIRO SITE
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
56

Título da página
Ol Mundo!Ã¡
afonsogomes.com/
Um simples ficheiro!
O PRIMEIRO SITE
PORQUE?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
57

O PRIMEIRO SITE
O caracter «á» aparece de uma forma esquisita.
Isto acontece porque não definimos um CHARSET para o documento.
Para resolver este problema por agora: usamos HTML Entities.
á = á à = &aagrave; ã = ã
Á = Á À = &Aagrave; Ã = Ã
ç = ç Ç = Ç õ = õ
í = í ì = &iagrave; Í = Í
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
58

ACTIVIDADE: A nossa segunda página
- Editar o ficheiro .html que criamos antes
- Mudar «Olá Mundo» para «Olá Mundo»
- Dar um «Enter» e escrever outro «Olá Mundo»
- Guardar
- Executar o ficheiro para abrir no browser
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
59

Título da página
Olá Mundo!Olá Mundo!
afonsogomes.com/
Com as alterações...
O PRIMEIRO SITE
O browser não interpretou o nosso «Enter»
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
60

HTML
HTMLAqui vamos nós
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
61

A primeira página do Mundo
http://info.cern.ch/hypertext/WWW/TheProject.html
Por: Tim Berners-Lee
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
62

CONTEÚDOS
• Conceito de tags
Cabeçalho
Corpo
– Elementos simples
– Elementos (Imagens, Tabelas, Listas, etc..)
– Formulários
– Frames
•
•
•
(Parágrafos, cabeçalhos, listas, etc...)
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
63

O QUE É O HTML
- Hyper-Text Markup Language
- Linguagem de marcação utilizada para produzir páginas Internet
- Estes códigos são interpretados pelos browsers para exibir as páginas da World Wide Web
- Devem ter a extensão .htm ou .html
- Podem ser criados com qualquer editor de texto (incluindo o Notepad)
- e os conteúdos.Estruturam contextualizam
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
64

Principais editores de HTML
- Macromedia Dreamweaver ... agora conhecido como ... ADOBE DreamWeaver.
- Microsoft Frontpage
- Notepad (o do Windows)
- Notepad++
- Adobe GoLive (deixou de existir em 2008)
- NVU
- BlueFish
- Quanta
(Em 2005, a ADOBE adquiriu a Macromédia pela módica quantia de US $ 3 400 000 000)
d
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
65

Tags de HTML
- Etiquetas de marcação
- Etiquetas com uma marca de ínicio e outra de final que contextualizam e delimitam um
elemento.
- As tags usam os símbolos e< > /
<body> </body>São abertas assim: . E fechadas assim:
- Existem alguns elementos que não necessitam ter a tag de fim. <img>
- Ao conjunto chamamos: elemento
EX:
<tag> </tag>...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
66

Anatomia de uma TAG HTML
<nometag > </nometag>=’’ ‘’ conteúdo do elementoatributo valor
<nometag > </nometag>=’’ ‘’ conteúdo do elementoatributo1 valor valoratributo2=’’ ‘’
<nometag >=’’ ‘’atributo1 valor valoratributo2=’’ ‘’
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
67

QUIZ
1) Qual o programa que vamos usar para criar as primeiras páginas Web?
Qual a extensão dos ficheiros com o código?
A tag <html> tem de ser finalizada mas a tag <head> não. Concorda
2)
3)
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
68

QUIZ
1) Qual o programa que vamos usar para criar as primeiras páginas Web?
Qual a extensão dos ficheiros com o código?
A tag <html> tem de ser finalizada mas a tag <head> não. Concorda
2)
3)
Notepad++
.html ou .htm
Discordo. Ambas as tags referidas têm de ser finalizadas
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
69

Anatomia de uma página HTML
<html>
</html>
<head>
</head>
</body>
....
....
<body>
<!DOCTYPE html>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
70

Resumindo
<html>
</html>
<head>
</head>
</body>
<body>
<!DOCTYPE html>
Esta será a estrutura que veremos vezes e vezes sem conta!
...
...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
71

HTML
As tags básicas de HTML de presença :
Indica que o ficheiro é ficheiro HTML
Define o início de um documento HTML e indica ao browser que todo o conteúdo posterior deve
ser tratado como uma série de marcações HTML.
Define o cabeçalho de um documento HTML. Este cabeçalho traz informações sobre o documento.
O que está dentro do <head> não é visivel para o visitante. Serve principalmente para: incluir informações
para motores de busca, incluir de ficheiros auxiliares para o website, informações extra para redes sociais, etc
Define o conteúdo principal, o corpo do documento. Tudo dentro do <body> será visivel para o
visitante
obrigatória
<!DOCTYPE html>
<html>
<head>
<body>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
72

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
73

ACTIVIDADE
Refazer o nosso «Olá Mundo» recorrendo a HTML...
Guarde o ficheiro como ex2.html e execute o ficheiro no broser.
Se der: Fazer upload do ficheiro e visualizar na «Internet».
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
74

ACTIVIDADE
Refazer o nosso «Olá Mundo» recorrendo a HTML...
<html>
</html>
<head>
</head>
</body>
<body>
<!DOCTYPE html>
Olá Mundo!
Executar o ficheiro no broser.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
75

ACTIVIDADE
Título da página
afonsogomes.com/
Olá Mundo!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
76

Tags à cabeça! (<head>)
Serve para especificar o título da página. Só uma por página
Define várias informações úteis sobre a página.
Para definir estilos. Pode haver várias desta por ficheiro HTML
Para fazer «linkagem» de ficheiros externos à página.
Para blocos de códio (ou ficheiros externos) de javascript da página.
Para os visitantes que tiverem javascripts desactivados no browser.
Serve para indicar um endereço base para a página.
<title>
<meta>
<style>
<link>
<script>
<noscript>
<base>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
77

<title>
Define o título da página em questão. É exibido na barra do browser (ou na tab)
a HTML d
<!DOCTYPE html>
<html>
<head>
A minha primeira página
</head>
. . .
<title> </title>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
78

?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
81

Importancia dos elementos no <HEAD>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
82

Importancia dos elementos do <HEAD>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
83

ACTIVIDADE
Refazer o nosso «Olá Mundo» inserindo os novos elementos:
- Title
- Meta Description
- Meta Keywords
- Meta Author
- Meta Charset
- Substituir «Olá Mundo» por «Olá Mundo»
Guarde o ficheiro como ex3.html e execute o ficheiro no browser.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
84

ACTIVIDADE
a HTML
d<!DOCTYPE html>
<html>
<head>
<title>A minha primeira página</title>
="keywords" ="HTML, CESAE, página pessoal, portfolio"
="author" ="O seu nome"
="UTF-8"
</head>
<body>
Olá Mundo!
</body>
</html>
<meta >
<meta
<meta
<meta
name content
name content
name content
charset

>
>
>
a HTML
d<!DOCTYPE html>
<html>
<head>
="UTF-8"
</head>
<body>
Olá Mundo!
</body>
</html>
<meta >
<meta
<meta
<meta
name content
name content
name content
charset
>
>
>
a HTML
d<!DOCTYPE html>
<html>
<head>
="UTF-8"
</head>
<body>
Olá Mundo!
</body>
</html>
<meta >
<meta
<meta
<meta
name content
name content
name content
charset
>
>
>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
85

Mais detalhes sobre ATRIBUTOS
ATRIBUTOS Globais
Atribui um identificador único a uma determinada tag
Atribui uma class a uma tag
Podemos definir CSS para essa tag específica (esta é uma má pratica!!)
Informação extra para essa tag. É mostrado no browser como tooltip.
Especifica uma tecla de atalho. (OPERA não suporta!!)
Existem mais atributos globais definidos para o HTML5 mas o suporte dos browsers ainda é
muito pobre a este ponto. Para referência esses atributos são: , , , ,
, , , .
id
class
style
title
acesskey
hidden draggable dropzone data-*
spellcheck translate contextmenu contenteditable
Analisemos mais calmamente
no slide seguinte!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
86

Slide em branco para explicações
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
87

Tags para formatação de texto
a HTML
<p> </p>Sou um parágrafo
Parágrafos
a HTML
<p>
<br>
</p>
Texto na primeira linha
Texto na segunda linha depois da tag «break»
a HTML
<p> <br> </p>Texto na primeira linha Texto na segunda linha depois da tag «break»
Indentação diferente
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
88

Palavras a negrito/bold
<p> <strong> </strong> </p>Palavra forte .
<p> <b> </b> </p>Palavra a negrito .
Título da página
afonsogomes.com/
Palavra forte.
Palavra a negrito.
Ambas as tags são válidas. Ambas existem em HTML5. Ambas veêm-se igual
Qual a diferença?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
89

Palavras a bold/strong
Poderemos ver coisas do género:
Título da página
afonsogomes.com/
Filme: The Shawshank Redemption
Ano: 1994 Géneros: Drama, Crime
Actores: Tim Robbins, Morgan Freeman, Bob Gunton
Usa-se <b>
Título da página
afonsogomes.com/
Usa-se <strong>
É expressamente proibido copiar no Exame.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
90

Palavras em itálico/emfatizadas
<p> <i> </i> </p>Palavra a itálico .
<p> <em> </em> </p>Uma palavra enfatizada .
Também acontece o mesmo que com o e o<b> </strong>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
91

Palavras sublinhadas??
ACTIVIDADE: Vamos ver se funciona!
( Se alguém souber o porquê de eu estar a pedir para fazer isto... )não diga nada!
a HTML
<p>
<u> </u><br>
</p>
Frase sublinhada.
Hum.....
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
92

Palavras sublinhadas??
a HTML
d<p>
<u> </u><br>
</p>
Frase sublinhada.
Hum.....
FUNCIONA...
MAS NÃO DEVEMOS USAR.
PORQUÊ?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
93

HEADINGS (Cabeçalhos) (... em texto!)
a HTML
d
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Cabeçalho tipo H1
Cabeçalho tipo H2
Cabeçalho tipo H3
Cabeçalho tipo H4
Cabeçalho tipo H5
Cabeçalho tipo H6
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
94

HEADINGS (Cabeçalhos ... do texto!)
Título da página
afonsogomes.com/
Cabeçalho tipo H1
Cabeçalho tipo H2
Cabeçalho tipo H3
Cabeçalho tipo H4
Cabeçalho tipo H5
Cabeçalho tipo H6
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
95

Tags menores mas muito usadas
<br>
<hr>
Introduz uma quebra de linha ou «break».
- Encontramos esta tag sempre dentro de um parágrago.
- Esta tag não necessita de ser encerrada.
Exibe uma linha horizontal (Horizontal Rule)
- Muito usada para separação de conteúdos.
- Frequentemente vista entre parágrafos ou outros blocos HTML.
- Esta tag não necessita de ser encerrada.
Comentários no código

O visitante do site só «vê» os comentários se fizer «Ver código fonte».
Normalmente usados para nos orientarmos no código.
E no caso, de no futuro, outro programador (que não nós) ter de usar o nosso código.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
96

Tudo Junto
a HTML
d
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
="description" ="A minha brilhante página"
="keywords" ="HTML, CESAE, página pessoal"
="UTF-8"
<meta >
<meta
<meta
<meta
name content
name content
name content
charset
>
>
>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
97

Tudo Junto
a HTML
d
<body>
<h1> </h1>
<p> </p>
<h2> </h2>
Isto é um parágrafo!
Primeira secção
<p> <br>
<b> </b> <i> </i> </p>
Isto é um parágrafo com duas linhas e uma palavra a
negrito . Também pode ter palavras em itálico .

Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
98

Tudo Junto
a HTML
d<h2> </h2>
<h3> </h3>
<p> </p>
<hr>
Secção 2 - Tags que ajudam na acessibilidade
Secção 2.1 - Palavras strong
Lorem ipsum dolor sit amet<strong> </strong>
<h3> </h3>
<p> <em> </em> </p>
</body>
</html>
Secção 2.2 - Palavras enfatizadas
Lorem ipsum dolor sit amet
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
99

VAMOS REVER O QUE JÁ DEMOS ATÉ AQUI
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
100

TRABALHO PRATICO
Crie uma página chamada tp01-seunome.html
- O Title e as Meta tags (que estudamos) devidamente preenchidas! Use Charset UTF-8
- um heading H1 seguido de 1 parágrafo de introdução sobre o documento.
- 2 secções (inclua headings que achar apropriados e uma pequena frase
de introdução em cada secção)
- Secção1: Seus dados pessoais (nome, naturalidade, cidade de morada, email,
data nascimento, e outros que se lembre/queira incluir)
- Secção2: Análise crítica de um site que goste/use. Fale do design global do site,
estrutura, tipos de letra escolhidos, cores, organização dos conteúdos, publicidade, etc).
Aponte também uma funcionalidade que goste e uma funcionalidade que ache menos
boa/desnecessária. Faça também a conclusão global da sua análise.
- Faça uso de todas as tags que vimos pelo menos 1 vez.
que deve ter:
Envie o ficheiro para eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
101

Links
<a > </a>href=’’http://google.pt’’ Vamos ao Google.
Título da página
afonsogomes.com/
Vamos ao Google
Vamos ao Google
Vamos ao Google
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
102

Links
<a > </a>href=’’http://google.pt’’ Vamos ao Google.
Endereço absoluto
<a > </a>href=’’documentos/pagina2.htm’’ Pagina 2
Endereço relativo
<a > </a>href=’’mailto:eu@afonsogomes.com’’ Email
Endereço de Email
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
103

Links
<a > </a>href target=’’#’’ =’’_self’’ Link
Atributo TARGET
_blank
_self
Abre numa nova janela
Abre na mesma janela (é o valor por defeito)
Abre o link no frame principal
Abre o link em todo o corpo do documento
_parent
_top
Pode assumir os valores:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
104

Links
<a > </a>href rel=’’#’’ =’’nofollow’’ LinkAtributo REL
nofollow
noreferrer
Link para um documento pelo qual não nos responsabilizamos.
O GoogleBot não segue estes links.
Indica que o browser não deve enviar o cabeçalho HTTP Referrer se o
utilizador decidir seguir este link
Link para uma versão alternativa do documento. (uma pág de impressão)
Especifica que o link-alvo deve ser posto em cache pelo browser.
alternate
prefetch
Pode assumir estes valores entre outros:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
105

Links ANCORAS
<a > </a>href=’’#seccao1’’ Vamos para a secção1.
Ancoras:
EXEMPLO E ACTIVIDADE!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
106

Imagens
<img
>
src
alt
=’’img/FCPenafiel.png’’
=’’Logo F. C. Penafiel’’
Este ficheiro da imagem tem:
Largura: 200px
Altura: 200px
NOTA: Atributo ALT obrigatório mesmo que esteja vazio!!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
107

Imagens - MÁ PRATICA
<img
>
src
alt
widht
height
=’’100’’
=’’100’’
MÁ PRATICA: Ficheiro ser maior que o necessário!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
108

Imagens - MÁ PRATICA
<img
>
src
alt
widht
height
=’’100’’
=’’200’’
<img
>
src
alt
widht
height
=’’200’’
=’’100’’
MÁ PRATICA: Distorção das medidas no código
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
109

Imaginem o seguinte...
Como dividir uma imagem e fazer as várias áreas dela ‘clicáveis’?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
110

Imagemaps
0px 100px 200px 300px 400px
100px
200px
300px
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
111

Imagemaps
<img >
<map >
<area >
<area >
<area >
</map>
="imagemap.png" ="400" ="300" ="" ="#cores"
="cores"
="rect" ="0,0,100,100" ="A.htm" ="#2980b9"
="rect" ="100,0,200,100" ="B.htm" ="#c0392b"
="rect" ="200,0,300,100" ="C.htm" ="#2c3e50"
...
src height alt usemap
name
shape coords href alt
shape coords
shape coords
widht
href alt
href alt
a HTML
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
112

Imagemaps
<img >
<map >
<area >
<area >
<area >
</map>
="cores"
="rect" ="0,0,100,100" ="A.htm" ="#2980b9"
="rect" ="100,0,200,100" ="B.htm" ="#c0392b"
="rect" ="200,0,300,100" ="C.htm" ="#2c3e50"
rect" ="300,0,400,100" ="D.htm" ="#27ae60">
rect" ="0,100,200,200" ="E.htm" ="#f39c12">
rect" ="200,100,400,300" ="F.htm" ="#2ecc71">
rect" ="0,200,100,300" ="G.htm" ="#9b59b6">
rect" ="0,200,200,300" ="H.htm" ="#f1c40f">
name
shape coords
shape coords
widht
href alt
href alt
="
="
="
="
="
<area
<area
<area
<area
<area
a HTML
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
113

Imagemaps
0px 100px
200px
300px
400px
100px
200px
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
114

Imagemaps (Exercício)
<img >
<map >
<area >
</map>
="cores"
="rect" ="0,0,100,100" ="H.htm" ="Area H"
name
widht
a HTML
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
115

Listas DESORDENADAS
a HTML
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
Elemento 2
Elemento 3
Elemento 1
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
116

Listas ORDENADAS
a HTML
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
Elemento 2
Elemento 3
Elemento 1
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
117

Listas ORDENADAS
a HTML
<ol >
<li> </li>
<li> </li>
<li> </li>
</ol>
=''10'' =''i''
Elemento 1
Elemento 2
Elemento 3
start type
Atributos para melhor definição da lista: , ostart type e o reversed
Valores que atributo type assumir: 1, a, A, i, I
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
118

Listas de DESCRIÇÃO
a HTML
<dl>
<dt> </dt>
<dd> </dd>
<dd> </dd>
</dl>
Descrição 1
Descrição 2
Termo
<dt> <dd>
<dl> <dt> <dd>
= definition term = definition description
Numa podemos ter quantos s e/ou s quisermos
Exemplo 1
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
119

Listas de DESCRIÇÃO
a HTML
<dl>
<dt> </dt>
<dt> </dt>
<dd> </dd>
</dl>
Outro nome para o termo
Descrição
Termo
<dt> <dd>
<dl> <dt> <dd>
= definition term = definition description
Numa podemos ter quantos s e/ou s quisermos
Exemplo 2
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
120

Listas dentro de listas
a HTML
<ul>
<li>
<ol>
<li> </li>
<li> </li>
</ol>
</li>
<li> </li>
</ul>
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
121

Listas dentro de listas
a HTML
<ul>
<li> </li>
<ol>
<li> </li>
<li> </li>
</ol>
<li> </li>
</ul>
Elemento 1
Elemento 2
Elemento 3
Elemento 4
Assim também funciona mas está :errado
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
122

l
Superscript e Subscript
a HTML
<p> <sup </sup></p>Texto normal Texto superscript>
a HTML
<p> <sub </sub> </p>Eu gosto de beber H 2 O.>
Título da página
afonsogomes.com/
Texto normal
Eu gosto de beber H O.
Texto superscript
2
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
123

Abreviaturas <abbr>
a HTML
<p>
<abbr </abbr>
</p>
Este módulo do percurso formativo é sobre
="HyperText Markup Language">HTML .title
Fornece em «Tooltip» a explicação da abreviatura, que introduzimos no
atributo .title
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
124

l
Tags Editoriais - Struck <s>
a HTML
<p><s> </s></p>
<p> </p>
O meu carro é verde
O meu carro novo é azul
Título da página
afonsogomes.com/
O meu carro é verde
O meu carro novo é azul
Algo que era verdade e entretanto foi alterado.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
125

l
Tags Editoriais - Delete e Insert<del> <del>
a HTML
<p>Decidi ="2013-01-26" aumentar
="http://www.afonsogomes.com" baixar
o meu colestrol. Dizem que baixa-lo faz bem à saúde.
<del > </del>
<ins > </ins>
</p>
datetime
cite
Título da página
afonsogomes.com/
Decidi aumentar baixar o meu colestrol. Dizem que baixa-lo faz bem à saúde.
Texto que foi editado. Passagens marcadas para apagar e passagens
entretanto inseridas.
Atributos possiveis: =’’YYYY-MM-DD hh:mm:ss’’ =’’URL’’datetime cite
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
126

Citações e<q> <blockquote>
a HTML
<p> <q >
</q>
</p>
E o Afonso disse cite=’’http://afonsogomes.com’’
Bem vindo ao meu novo site pessoal, feito com muito amor.
É um poeta!
Para citações pequenas e «em linha» usa-se o <q>
Para um grande bloco de citação usa-se o <blockquote>
Ambas aceitam unicamente, o atributo cite.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
127

Citações (Parte 1): <q>
a HTML
<p> <q >
</q> </p>
E o Afonso disse cite=’’http://afonsogomes.com’’
Bem vindo ao meu novo site pessoal . Ele é um poeta!
Para citações pequenas e «em linha» usa-se o . Esta tag aceita o
atributo e todos os outros atributos globais. Apenas adiciona aspas na
citação
<q>
cite
Título da página
afonsogomes.com/
E o Afonso disse «Bem vindo ao meu novo site pessoal». Ele é um poeta!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
128

Citações (Parte 2): <blockquote>
a HTML
<blockquote >
</blockquote>
cite=’’http://afonsogomes.com’’ Bem vindo ao
meu novo site pessoal.
Para blocos maiores de uma citação usa-se o . Esta tag
aceita o atributo e todos os outros atributos globais.
Indenta a citação no site.
<blockquote>
cite
Título da página
afonsogomes.com/
Bem vindo ao meu novo site pessoal.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
129

<blockquote> EXEMPLOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
130

Objecto de uma citação: <cite>
a HTML
<p> <cite> </cite>
</p>
O quadro La Monalisa foi pintado por
Leonardo da Vinci entre 1503 e 1506
Para referir um trabalho que citamos/mencionamos.
ATENÇÃO! Esta é a TAG . Não confundir com o ATRIBUTO !!!!
Não tem atributos especificos e só produz um itálico no texto!
<cite> cite
Título da página
afonsogomes.com/
O quadro La Monalisa foi pintado por Leonardo da Vinci entre 1503 e 1506.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
131

Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
132

e<figure> <figcaption>
- A criação da tag é nova na especificação HTML5
- Não existia no HTML 4.01
- É uma tentativa do W3 Consortium de melhorar a semantica HTML
quando se está a utilizar imagens, ilustrações, diagramas, gráficos, etc...
até citações (blockquotes)!!
- Não afecta a visualização da página no browser em nenhuma maneira.
- Quando está presente no código, pode, ou não, estar
acompanhada da tag .
<figure>
<figure>
<figcamption>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
133

a HTML
<figure>
<img
>
<figcaption> </figcaption>
</figure>
src alt
width height
=’’monalisa.jpg’’ =’’A monalisa’’
=’’300’’ =’’600’’
La Monalisa
Como usar: e<figure> <figcaption>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
134

a HTML
<pre>
<code>
</code>
</pre>
< >
< >Um cabeçalho< >
< >Isto é um parágrafo de texto.< >
< >
div id="intro"
h1 /li
p /p
/div
Texto pré-formatado e código<pre> <code>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
135

Título da página
afonsogomes.com/
<div id="intro">
<h1>Um cabeçalho</h1>
<p>Isto é um parágrafo de texto e tal e coisa...</p>
</div>
A tag preserva e mostra, no browser, todo o espaçamento
que for dado no código.
Isto pode trazer problemas esquisitos de espaçamentos...
<pre>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
136

a HTML
<pre>
<code>
</code>
</pre>
< >
< >Um cabeçalho< >
< >Isto é um parágrafo de texto.< >
< >
div id="intro"
h1 /li
p /p
/div
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
137

Título da página
afonsogomes.com/
<div id="intro">
<h1>Um cabeçalho</h1>
<p>Isto é um parágrafo de texto e tal e coisa...</p>
</div>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
138

<ruby> <rt> <rp>, e
Já que se fala de código ....
http://www.w3schools.com/tags/tag_ruby.asp
Estas tags são tão inuteis que mais vale explicar através da página
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
139

Mais tags relacionadas com código que dificilmente virão a usar...
<samp> <kbd> <var>, e
a HTML
<p>Se, por algum acaso tivermos a variável
chatearDathVader = true;
no programa guerra_das_estrelas o Darth Vader
ordena que destruam o teu planeta. Dá a ordem ao fulano que
opera a Estrela da Morte, este escreve
Disparar raio no computador, e o resultado final é
Planeta Destruido!
<code><var> </var> </code>
<code> </code>
<kbd> </kbd>
<samp> </samp></p>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
140

Ou muito úteis ou muito inúteis... estas tags desapareceram ao passar
do especificação antiga de HTML 4.01 para a nova e fabulosa HTML5
TRIBUTO às tags desaparecidas
<font>
<frame>
<acronym>
<applet>
<dir>
<basefont>
<big> <tt>
<frameset>
<center>
<noframes>
<s>
<u>
<strike>
<isindex>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
141

a HTML
<address>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</address>
(+351) 966 488 842
eul@afonsogomes.com.com
http://afonsogomes.com/contactos
Também podemos assinalar no HTML quando estamos a falar de endereços.
Endereços <address>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
142

Ou assinalar ... datas especificas (e hora!)
Tempo <time>
Valores que pode assumir o =datetime "AAAA-MM-DD HH:MM:SS"
a HTML
<p>
>
Uma dia que gosto é a
="2013-12-24 20:00:00" Véspera de Natal
.
<time
</time> </p>
datetime
<p> >Eu hoje acordei às 07:00 horas.<time </time> </p>
não interfere na validação.
me não for introduzido desta maneira
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
143

a HTML
<p> <dfn > </dfn>
<dfn
> </dfn> </p>
O Johnny, title="Cão" canídeo e fiel companheiro
do Afonso é da raça title="Raça de retriveres caracterizados
por serem ... bla bla bla." Labrador Retriver .
Uma pequena definição de uma palavra ou de um termo.
Definições Básicas <dfn>
Esta tag produz uma tooltip quando o rato fica em cima do elemento
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
144

...Para que serve o HTML ?
Ainda se recordam ...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
145

Ainda se recordam ...
Serve para aplicar a
ou seja... .
Vamos ver duas tags que não fazem nada disso!
SIGNIFICADO CONTEÚDOS
pôr em CONTEXTO
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
146

a HTML
<p> <span > </span>
<span > </span> </p>
A minha mãe tem olhos ="color:blue" azuis
e cabelo ="color:yellow" louro .
style
style
Uma das tags mais frequentes<span>Uma das tags mais frequentes<span>
span ... quer dizer: «que se estende»
Providencia um wrapper (=embrulho) genérico para agrupar elementos
que sózinhos não teriam significado.
O é usado para elemenos in-line.
Normalmente para atingir elementos com CSS ou manipula-los com javascript.
<span>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
147

Depois de falarmos do deviamos falar das .
Mas antes de falarmos sobre essa tag fabulosa....
Vamos falar da evolução das ESTRUTURAS de páginas web
- O período Pré-Frames
- Período dos Frames
- Domínio das tabelas para estruturação
- O reino das s
- Os dias de hoje ...
<span> <div>
<DIV>
está tudo a mudar outra vez!
Evolução da estruturação de websites
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
148

Não havia necessidade de estruturas.
Tudo era simples...
Tudo era sequencial...
Era só código... muitos headings, muitos parágrafos com muitos links
(Ainda usavam-se muito poucas imagens em sites...
Ter uma linha de ADSL não era banal como é hoje)
a internet era lenta!
O período pré-Frames
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
149

Este período não durou muito, mas existiu.
Os frames estiveram sempre envoltos em controvérsia e muita
discussão:
- Muitos browsers não suportavam frames.
- Tornavam a gestão de código mais complexa e dividida.
- Não faziam nada que já não houvesse marcação HTML para fazer
a mesma coisa
- Muita gente usava-os mal. Ou com mau código ou usando-os
quando não deviam.
- Muito susceptíveis de criar erros... principalmente com links.
O período dos frames
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
150

Exemplo dos FRAMES
O período dos frames
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
151

Já que mencionamos Frames... aproveito para falar dos
- São muito usados em muitos websites. Já todos vimos iframes em
algum site, alguma vez.
- Os são usados para mostrar no NOSSO SITE conteúdos
de OUTRO SITE.
- RARAMENTE escrevemos o código... quase sempre é COPY&PASTE !
<iframe>
<iframe>
VAMOS VER UM EXEMPLO!
IFRAMES
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
152

Analisando a tag do <iframe>
IFRAMES
a HTML
>
<iframe ="640" ="360"
="http://www.youtube.com/embed/2PYyEDl1bJk?rel=0"
O seu browser não suporta iframes
width height
src
allowfullscreen </iframe>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
153

Para simplificar a gestão de código HTML e «remediar» muitos dos problemas
que a utilização de frames criavam... começou-se a usar tabelas.
Semanticamente, não era correcto utilizar tabelas para estruturar sites...
... mas era assim que se fazia.
Voltando à História da evolução estruturação de websites...
Período das tabelas
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
154

Vamos então aprender a fazer tabelas...
... para as usar da maneira correcta!
Tabelas são usadas para exibir dados como por exemplo:
- Especificações de um produto
- Comparação de produtos e preços
- Competências num Curriculum Vitae
- etc etc etc...
TABELAS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
155

TABELAS
a HTML
<table >
<caption> </caption>
</table>
border=’’1’’
A minha tabela
...
Para iniciar uma tabela basta fazer isto:
Mas o que é uma tabela dados lá dentro?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
156

TABELAS
a HTML
<table >
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
A minha tabela
Título Coluna 1
Título Coluna 2
Título Coluna 3
Linha 1 Célula 1
Linha 1 Célula 2
Linha 1 Célula 3
Acrescentando linhas e colunas (EXEMPLO 1):
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
157

TABELAS
a HTML
<table >
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
Uma tabela
Título Col. 1
Título Col. 2
Título Col. 3
L1 Cél. 1
L1 Cél. 2
L1 Cél. 3
Acrescentando (ainda) mais linhas (EXEMPLO 2)
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
L2 Cél. 1
L2 Cél. 2
L2 Cél. 3
L3 Cél. 1
L3 Cél. 2
L3 Cél. 3
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
158

TABELAS
E se quisermos isto? Ou isto?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
159

TABELAS
1 2
3
4 5
a HTML
<table >
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
border
colspan
=’’1’’
1
2
=’’2’’ 3
4
5
Atributo colspan
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
160

TABELAS
1 2
3
4
5
a HTML
<table >
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
border
rowspan
=’’1’’
1
2
=’’2’’ 3
4
5
Atributo rowspan
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
161

TABELAS
1
2
3
4
a HTML
<table >
<tr>
<td > </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
border
colspan
rowspan
=’’1’’
=’’2’’ 1
=’’2’’ 2
3
4
colspan rowspane
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
162

EXERCÍCIO1
1 2
3
4
5
6
7 8
9 10
Vamos fazer isto juntos
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
163

EXERCÍCIO2
1 2
4
5
6
7
8
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
164

Titulo1 Titulo2 Título3
... ... ...
... ... ...
Total Titulo1 Média Titulo2 Total Titulo3
TABELAS - Header, body e footer numa tabela
Mas (quase) sempre as tabelas têm a primeira linha para os títulos
das colunas e a última para totais, por exemplo. Precisamos de ter
uma maneira de dar contexto a essas linhas.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
165

É simples assim:
Titulo1 Titulo2 Título3
... ... ...
... ... ...
Total Titulo1 Total Titulo2 Total Titulo3
<thead>
<tbody>
<tfoot>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
166

a HTML
<table >
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
Legenda da Tabela
Título Coluna 1
Título Coluna 2
Título Coluna 3
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
167

a HTML
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tfoot>
</table>
Linha 1 coluna 1
Linha 2 coluna 2
Linha 1 coluna 3
Total coluna 1
Total coluna 2
Total coluna 3
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
168

TABELAS - col e colgroup
Por vezes também há necessidade de formatar as tabelas por colunas
Carro Marca Carro Modelo Preço (em €)
BMW 320 xxxxx
Audi A7 xxxxx
Hyundai Accent xxxxx
- - yyyyy
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
169

TABELAS - col e colgroup
a HTML
<colgroup>
<col >
<col >
</colgroup>
<table border=’’1’’>
<thead>
<tr>
<th>Carro Marca</th>
<th>Carro Modelo</th>
<th>Preço</th>
</tr>
</thead>
...
=''2'' =''background-color:red''
=''background-color:green''
span style
style
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
170

TABELAS dentro de tabelas
1
2 4
1 2
3 4
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
171

TABELAS dentro de tabelas
a HTML
<table >
<tr>
<td> </td>
<td>
<table >
</table>
</td>
</tr>
border
border
=’’1’’
1
=’’1’’
...
...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
172

a HTML
<div>
</div>
QUALQUER COISA AQUI... QUALQUER COISA MESMO!
A rainha de todas as tags <div>
Até que a malta começa a usar a tag <div> para estruturação... isto acaba
de vez com a situação de estarmos a usar as tabelas erradamente.
Vamos ver o que faz a ...
A faz o mesmo que a mas em vez de ser para elementos
in-line é para elementos em bloco (Block Elements)
<div>
<div> <span>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
173

a HTML
<div >
<div > </div>
<div > </div>
</div>
<div >
<div > </div>
<div > </div>
</div>
<div > </div>
<div > </div>
id
id
id
id
id
id
id
id
= header
= logotipo ...
= menu ...
= meio
= barralateral ...
= corpo ...
= footer
= bottomfooter
" "
" "
" "
" "
" "
" "
" "
" "
...
...
A rainha de todas as tags <div>
Pode ser usada de todas as maneiras, feitios e gostos...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
174

Alguma pratica com e tudo mais...<div>
Vamos tirar um tempo para estruturar páginas que já tenhamos feito. E ir
preparando o que será mais tarde a página pessoal de cada um
Usem <divs> para estruturar o código.
Planeiem já uma boa estrutura futura para um site pessoal.
- Criem divisões para headers, footers, corpo do site, barra laterais, etc..
- Façam já menus com listas e links para as diferentes páginas...
- Criem as varias páginas para diferentes secções (sobremim.html ,
contactos.html, portfolio.html, etc etc etc)
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
175

A estruturação de um site nos dias de hoje
Agora já se começa a usar as s com maior moderação...
O oferece algumas tags novas para estruturação de conteúdos
São tags sem atributos específicos e podemos incluir-lhes (se desejarmos)
atributos globais tipo o e o .
<div>
<header> <footer> <nav> <aside> <section> <article>
HTML5
id class
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
176

Estruturação de um site em HTML5
a HTML
<div >
<div > </div>
<div > </div>
</div>
id
id
id
= header
= logotipo ...
= menu’’ ...
" "
" "
"
a HTML
<header>
<div > </div>
<nav> </nav>
</header>
id= logotipo ...
...
" "
d
d
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
177

Estruturação de um site em HTML5
<header>
<aside>
<footer>
<nav>
<section>
<article>
<article>
<article>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
178

Análise de um website em HTML5
Para análise, vamos ver este fabuloso website
http://afonsogomes.com
Entrar no site e fazer «Ver código fonte».
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
179

EXERCÍCIO
Cabeçalho H3
a itálico
Parágrafo
de texto!
Clique aqui
para abrir o
Google. (nova
janela)
ŸElemento 1
1. Item 1
2. Item 2
Coisa 1
Coisa 2
3. Item 3
ŸElemento 2
ŸElemento 3
Este é o
código:
[CÓDIGO
DA CEL.
DA FIGURE]
Tudo dentro desta célula é
um parágrafo!
Neste momento:
HH:MM 27/09/2013
La Gioconda
CESAE
Delegação Porto
Rua Ciríaco Cardoso, 186
4150-212 Porto
Na , usem o e da para não haver scrollbar na páginafigure imgwidth height
1 2
3 4
Olá!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
180

Comentários
- Ajudam a orientarmo-nos no nosso código.
- Servem como apontamento para coisas que precisem de ser
feitas mais tarde
- Um dia que outro programador fique responsável pelo nosso
código ... os nossos comentários poderão dar-lhe jeito.
a HTML
<header>
<div id="logotipo"> ... </div>
<nav>
...
</nav>
</header>


Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
181

Comentários Condicionais
a HTML
<head>
<title>O meu site</title>
<link href="todo-o-css.css" rel="stylesheet">
</head>

Volta e meia o professor precisa de ter
conversinhas com meninos mal comportados.
Nos websites é a mesma coisa ... para isso temos
os comentários condicionais.
d
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
182

a HTML
<head>
</head>




Também podemos atacar versões epecíficas
do IE...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
183

a HTML
<head>
</head>




Ou então várias versões do IE...
gt lt
gte lte
= maior que = menor que
= maior ou igual que = menor ou igual que
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
184

Multimedia - VIDEO
a HTML
<video >
<source >
<source >
</video>
="320" ="240"
="video.mp4" ="video/mp4"
="video.ogg" ="video/ogg"
O seu browser não suporta vídeos.
width height controls
src type
src type
Simplesmente assim:
São dadas várias s caso o browser não suporte esse tipo de
ficheiro. (mp4 não é suportado no Opera...)
http://cesae.afonsogomes.com/video.mp4
http://cesae.afonsogomes.com/video.ogg
src
Podem testar com:
e
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
185

Multimedia - AUDIO
a HTML
<audio
<source >
<source >
<p> </p>
</audio>
="musica.mp3" ="audio/mpeg"
="musica.ogg" ="audio/ogg"
O seu browser não suporta audio.
controls
src type
src type
>
Simplesmente assim:
- Mais uma vez... diferentes ficheiros para diferentes browsers
- O texto que tiver dentro da tag é exibido caso o
browser não suporte a tag.
<audio>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
186

FORMULÁRIOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
187

FORMULÁRIOS
Já todos os vimos. Todos os sites os têm.
Mas como são feitos? Como funcionam?
HTML
JS
&
SQL
EMAIL
PHP
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
188

FORMULÁRIOS
a HTML
<form >
</form>
="processa-form.php" ="POST"
....
action method
Como criar um formulário:
method pode assumir os valores POST ou GET
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
189

FORMULÁRIOS: A tag de <input>
a HTML
<input >=" " ="nomedacaixa" ="O seu valor"type nameXXXXX value
XXXXX assume diferentes valores para diferentes tipos de inputs
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
190

FORMULÁRIOS: Vários tipos de <input>
a HTML
<input >
<input >
<input >
<input >
<input >
<input >
="text"
="password"
="hidden"
="checkbox"
="radio"
="submit"
type
type
type
type
type
type
...
...
...
...
...
... Enviar
Afonso
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
191

FORMULÁRIOS: Experimentem
a HTML
<form >
<p> <input </p>
<p> <input </p>
<p> <input </p>
<input
<p><input </p>
</form>
="processa-form.php" ="POST"
O seu nome: ="text" =’’nome’’ ="Nome"
O seu email: ="text" =’’email’’ ="Email"
Password: ="password" =’’pass’’
="hidden" ="11:00 01/10/2013"
="submit" ="Enviar Formulário"
action method
type name value
type name value
type name
type value
type value
>
>
>
>
>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
192
é o valor que o formulário envia para o ficheiro na action
Nas caixas ="text" o atributo funciona também
como valor «inicial» da caixa
value
<input >type value

FORMULÁRIOS: Uma pequena nota
<button > </button>="button" Clica aqui!type
Embora exista marcação HTML para botões:
<input >="submit" ="Enviar!"type value
Em formulários devemos usar a marcação do botão de input:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
193
a HTML
a HTML

FORMULÁRIOS: input Checkboxes
a HTML
<p> </p>
<p>
<input <br>
<input <br>
<input <br>
<input
</p>
Assinale algumas coisas que goste:
="checkbox" ="gostos" ="livros" Livros
="checkbox" ="gostos" ="filmes" Filmes
="checkbox" ="gostos" ="series" Séries TV
="checkbox" ="gostos" ="teatro" Teatro
type name value
type name value
type name value
type name value
>
>
>
>
Checkboxes são usadas em situações onde se pode fazer uma
seleção múltipla de entre várias hipóteses.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
194

FORMULÁRIOS: input Radio
a HTML
<p> </p>
<p>
<input <br>
<input <br>
<input <br>
<input
</p>
O seu género:
="radio" ="genero" ="M" Masculino
="radio" ="genero" ="F" Feminino
="radio" ="genero" ="NS" Não Sabe
="radio" ="genero" ="NR" Não Responde
type value
type value
type value
type value
name
name
name
name
>
>
>
>
Similar às checkboxes, estão inseridos num grupo de opções onde
o utilizador só pode escolher UMA de várias.
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
195

FORMULÁRIOS: Áreas de texto <textarea>
a HTML
<textarea > </textarea>="5" ="20" ="qqcoisa" Valor inicialrows cols name
<textarea ></textarea>="comentario"name
Atributos seguros:
, , , ,
Atributos novos em HTML5:
, , , ,
name cols rows disabled readonly
placeholder required maxlength autofocus wrap
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
196

FORMULÁRIOS: Caixas de <select>
a HTML
<select >
<option > </option>
<option> </option>
<option > </option>
<option > </option>
</select>
value
value selected
value
value
="caixaselect"
="M" Masculino
Feminino
="NS" Não sabe
="NR" Não Responde
Como o input radio... oferece uma escolha de selecção de entre
várias opções de onde se pode escolher apenas uma.
Mas o cria um menu drop-down.<select>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
197

FORMULÁRIOS: Formulários acessíveis com <label>
a HTML
<label > </label>
<input >
="seuNome" O seu nome:
="text" ="seuNome" ="seuNome"
for
name id

type
Cada elemento do formulário deve ter o seu rótulo explícito.
A tag trata disto e inclui um atributo que associa
a tag a um elemento especifico do formulário (pelo id).
<label> for
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
198

FORMULÁRIOS: Formulários acessíveis <label>
Em caso de haver muitos elementos, tipo checkboxes e radios...
Podemos simplificar os rótulos assim:
<p>Clube preferido
="checkbox" ="clube" ="FCP" Porto
="checkbox" ="clube" ="SLB" Benfica
="checkbox" ="clube" ="SCP" Sporting
="checkbox" ="clube" ="BFC" Boavista
<label><input > </label>
</p>
type
type
type
type
name value
name value
name value
name value
a HTML
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
199

FORMULÁRIOS: Formulários acessíveis <label>
E assim (no caso das caixas selects):
="caixaselect" Escolha uma opção:
="caixaselect"
="1" Fácil
="2" Médio
="3" Difícil
<label > </label>
<select >
<option > </option>
<option > </option>
<option > </option>
</select>
for
id
value
value
value
a HTML
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
200

FORMULÁRIOS: Organização com o <fieldset>
Podemos organizar diferentes de um formulário para
um melhor entendimento do utilizador, para futura manipulação
de estilos ou mesmo para melhor organização do nosso código.
secções
a HTML
<form >
<fieldset>
<legend> </legend>
<label > </label><input >
<label > </label><input >
</fieldset>
</form>
="POST" ="script.php"
="pNome"
="uNome"
method action
name
name
Dados pessoais
=’’pNome’’ Primeiro nome:
=’’uNome’’ Sobrenome:
for
for
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
201

FORMULÁRIOS: PRIMEIRA ACTIVIDADE
- Codifique um formulário divido em 2 ou 3 zonas com o fieldset
- Em cada zona... as opções que quiser inserir...
- No global o formulário deve conter pelo menos:
- Um campo de input normal, um de password, um hidden
- Uma textarea
- Uma pergunta com 4 checkboxes
- Uma pergunta com 4 botões Radio
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
202

FORMULÁRIOS: Grupos de opção aplicados ao<optgroup> <select>
a HTML
<select >
<option > </option>
<option > </option>
<option > </option>
<option > </option>
</select>
name="caixaselectgenero"
="M" Masculino
="F" Feminino
="NS" Não sabe
="NR" Não Responde
value
value
value
value
Lá atrás, vimos que o cria menus de dropdown com
várias opções de onde só podemos escolher uma. Só com o select
não as conseguimos organizar... precisamos do
<select>
<optgroup>
Vamos então reorganizar esta caixa de seleção:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
203

FORMULÁRIOS: Grupos de opção aplicados ao<optgroup> <select>
a HTML
<select >
<optgroup >
<option > </option>
<option > </option>
</optgroup>
<optgroup >
<option > </option>
<option > </option>
</optgroup>
</select>
name
label
value
value
label
value
value
="caixaselectgenero"
="Pessoas confiantes"
="M" Masculino
="F" Feminino
="Pessoas esquisitas"
="NS" Não sabe
="NR" Não Responde
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
204

EXERCÍCIO Escreva marcação que produza o seguinte resultado:
Não consegue ver esta imagem do seu lugar?
http://cesae.afonsogomes.com/ex-forms.jpg
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
Acrescente um campo
com a data e hora como !
hidden
valor
Quando acabar envie o HTML
para eu@afonsogomes.com
Não se esqueça dos <label>
205

FIM DO HTML!
No próximo módulo:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
206

Aprender HTML (UFCD0152 e UFCD0153) v2

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Aprender HTML (UFCD0152 e UFCD0153) v2

Similar a Aprender HTML (UFCD0152 e UFCD0153) v2 (20)

Aprender HTML (UFCD0152 e UFCD0153) v2