PROFISSIONAL EM WEBDESIGN
0152 Estrutura de um sítio para Internet
0153 Finalização de um sítio para Internet
PROFISSIONAL EM WEBDESIGN
b Estrutura ...
Objectivos para hoje
Introdução
Apresentações
Primeira abordagem a conteúdos: HTML, CSS, PHP, mySQL e javascript
História ...
História e evolução da Internet
INTERNETo que é?
Dúvidas?
Pergunte. Agora! 4
Qualquer coisa:
eu@afonsogomes.com
PROFISSION...
História e evolução da Internet
O nosso PC/telemóvel está na e faz parte da internet.
A nossa rede caseira está na e faz p...
Internet
- Rede global de aparelhos interligados.
- Permite um Mundo ligado.. e cada vez mais em tempo real.
- Começou pel...
Internet
Tim Berners-Lee Primeiro servidor de web
O pai da internet
7
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsog...
Topologias (Esquemas de Navegação)
Fila Árvore Bus
Anel Rede (Mesh) Estrela
Totalmente
Ligada
Dúvidas?
Pergunte. Agora!
Qu...
Modelo de computção: CLIENTE-SERVIDOR
ClienteCliente
Cliente
Cliente
Cliente
SERVIDOR
Internet
O pede, o serve!cliente ser...
Modelo de computção: CLIENTE-SERVIDOR
Server Farm (Quinta de servidores) da Google
Dúvidas?
Pergunte. Agora!
Qualquer cois...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
Protocolos
O que são e para que servem?
Quando navegamos na net, estamos conscientes que (sequer) existem?
Dúvidas?
Pergun...
Protocolos
- Conjunto de regras establecidas entre máquinas para que possam
«falar» entre si;
- Podem definir:
- que tipo ...
Protocolos
Algumas vez os vimos?
Não estarão bem à frente dos nossos olhos?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@a...
Protocolos
Algumas vez os vimos?
Não estarão bem à frente dos nossos olhos?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@a...
Protocolos
HTTP
FTP
SMTP
HyperText Transfer Protocol
File Transfer Protocol
Simple Mail Transfer Protocol
POP Post Office ...
HTTP
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e finalização de u...
Protocolos
- Conjunto de regras establecidas entre máquinas para que possam
«falar» entre si;
- Podem definir tudo sobre a...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
Browsers
Apple Safari
Opera
Mozilla Firefox
Google Chrome
MS Internet Explorer
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
e...
Quando chega a hora de escolher um browser ...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL E...
Plataformas
PC Desktop? Telemóvel? Tablet? Consola?
E se for telemóvel?? iPhone? Android?
Dúvidas?
Pergunte. Agora!
Qualqu...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
LAYOUT
É o design do nosso site só visto pela perspectiva da estrutura e design
Sem considerar conteúdos nem funcionalidad...
WIREFRAMING
Significado lato em português: a armação de arames.
É uma coisa que fazemos num papel, ou bloco de notas... co...
WIREFRAMING: Exemplos
Esboço inicial em papel
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM...
WIREFRAMING: Exemplos
Esboço mais avançado (e polido) em PC
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
P...
WIREFRAMING: Exemplos
Um que eu fiz
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN...
WIREFRAMING: Como fazer
Título da página
afonsogomes.com/
Rodapé (footer)
Cabeçalho (Header)
Corpo do siteBarra Lateral
Dú...
WIREFRAMING: Como fazer
Título da página
afonsogomes.com/
FACEBOOK
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogome...
WIREFRAMING: Como fazer
Título da página
afonsogomes.com/
Rodapé (footer)
Cabeçalho (Header)
Corpo
Logo
Menu
Facebook
Copy...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
Qual o porquê da sua importância em Webdesign?
Como classificar as «fonts» (tipos de letra)?
Que famílias de tipos de letr...
Tipografia e Familias de Tipos de letra
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console Lucida Sa...
Tipografia: Classificar uma família de fontes
ABCDúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL...
Tipografia: Classificar uma família de fontes
ABCSERIF
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFIS...
Tipografia: Classificar uma família de fontes
ABCSANS-SERIF
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
P...
Tipografia: Classificar uma família de fontes
AbcdeScript
também conhecidas como Handwritting
Dúvidas?
Pergunte. Agora!
Qu...
Tipografia: Classificar uma família de fontes
AbcMonospace
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PR...
Classificação: Resumo
Abc Monospace
ABC
ABC
Abc
Sans-Serif
Serif
Script
Frequentemente usadas em cabeçalhos
Usadas em todo...
ACTIVIDADE: Classifiquemos as fonts!
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
...
ACTIVIDADE: Classifiquemos as fonts!
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
...
Websafe font?
O conceito de websafe, «segura para a internet» em português,
refere-se ao facto da font
estar ou não presen...
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
F...
Arial
Times New Roman
Georgia
Helvetica
VerdanaComic Sans
Lucida Console
Lucida Sans
Tahoma
Trebuchet
Courier New
IMPACT
F...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
Design e conteúdos
DESIGN
vs.
CONTEÚDOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDE...
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 re...
O que vimos até agora
Introdução
Apresentações
Primeira abordagem a conteúdos: HTML, CSS, PHP, mySQL e javascript
História...
Actividade
http://publico.pt http://jn.pt http://dn.pt http://expresso.pt
http://maisfutebol.pt http://ojogo.pt http://abo...
Olhar crítico
Vamos analisar:
Jardim Botânico da UTAD
http://jb.utad.pt
Tempo a carregar a página.
Design:
Conteúdos:
Plat...
Concluindo: Fazer sítios web
Velocidade do carregamento
Estrutura
Cores
Tipos de Letra
Funcionalidades do site
Organização...
Concluindo: Fazer sítios web... TECNOLOGIAS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM W...
Concluindo: Fazer sítios web
Considerações a ter sempre
Cores e Tipo de letra:
Estruturação e organização:
Funcionalidades...
Software necessário para criação de websites
Notepad++
http://notepad-plus-plus.org/
XAMPP
http://www.apachefriends.org/pt...
- Criar um novo ficheiro .html
- Abrir no Notepad++ para edição
- Escrever «Olá Mundo»
- Guardar
- Executar o ficheiro par...
Título da página
Ol Mundo!á
afonsogomes.com/
Um simples ficheiro!
O PRIMEIRO SITE
PORQUE?
Dúvidas?
Pergunte. Agora!
Qualq...
O PRIMEIRO SITE
O caracter «á» aparece de uma forma esquisita.
Isto acontece porque não definimos um CHARSET para o docume...
ACTIVIDADE: A nossa segunda página
- Editar o ficheiro .html que criamos antes
- Mudar «Olá Mundo» para «Olá Mundo»...
Título da página
Olá Mundo!Olá Mundo!
afonsogomes.com/
Com as alterações...
O PRIMEIRO SITE
O browser não interpretou o no...
HTML
HTMLAqui vamos nós
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura...
A primeira página do Mundo
http://info.cern.ch/hypertext/WWW/TheProject.html
Por: Tim Berners-Lee
Dúvidas?
Pergunte. Agora...
CONTEÚDOS
Introdução ao HTML
• Conceito de tags
Cabeçalho
Corpo
– Elementos simples
– Elementos (Imagens, Tabelas, Listas,...
O QUE É O HTML
- Hyper-Text Markup Language
- Linguagem de marcação utilizada para produzir páginas Internet
- Estes códig...
Principais editores de HTML
- Macromedia Dreamweaver ... agora conhecido como ... ADOBE DreamWeaver.
- Microsoft Frontpage...
Tags de HTML
- Etiquetas de marcação
- Etiquetas com uma marca de ínicio e outra de final que contextualizam e delimitam u...
Anatomia de uma TAG HTML
<nometag > </nometag>=’’ ‘’ conteúdo do elementoatributo valor
<nometag > </nometag>=’’ ‘’ conteú...
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 ...
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 ...
Anatomia de uma página HTML
<html>
</html>
<head>
</head>
</body>
....
....
<body>
<!DOCTYPE html>
Dúvidas?
Pergunte. Agor...
Resumindo
<html>
</html>
<head>
</head>
</body>
<body>
<!DOCTYPE html>
Esta será a estrutura que veremos vezes e vezes sem...
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 in...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
ACTIVIDADE
Refazer o nosso «Olá Mundo» recorrendo a HTML...
Guarde o ficheiro como ex2.html e execute o ficheiro no broser...
ACTIVIDADE
Refazer o nosso «Olá Mundo» recorrendo a HTML...
<html>
</html>
<head>
</head>
</body>
<body>
<!DOCTYPE html>
O...
ACTIVIDADE
Título da página
afonsogomes.com/
Olá Mundo!
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFI...
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...
<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>
<h...
<meta>
As <meta> tags definem propriedades da página (metadata). Como por exemplo: codificação de caracteres,
o autor,a de...
<meta charset>
É também com uma <meta> tag que definimos qual o CHARSET a ser usado por essa página.
a HTML
d...
<head>
="...
?DÚVIDAS
Dúvidas?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e fin...
Importancia dos elementos no <HEAD>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN...
Importancia dos elementos do <HEAD>
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN...
ACTIVIDADE
Refazer o nosso «Olá Mundo» inserindo os novos elementos:
- Title
- Meta Description
- Meta Keywords
- Meta Aut...
ACTIVIDADE
a HTML
d<!DOCTYPE html>
<html>
<head>
<title>A minha primeira página</title>
="description" ="A minha brilhante...
Mais detalhes sobre ATRIBUTOS
ATRIBUTOS Globais
Atribui um identificador único a uma determinada tag
Atribui uma class a u...
Slide em branco para explicações
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b ...
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
Text...
Palavras a negrito/bold
<p> <strong> </strong> </p>Palavra forte .
<p> <b> </b> </p>Palavra a negrito .
Título da página
a...
Palavras a bold/strong
Poderemos ver coisas do género:
Título da página
afonsogomes.com/
Filme: The Shawshank Redemption
A...
Palavras em itálico/emfatizadas
<p> <i> </i> </p>Palavra a itálico .
<p> <em> </em> </p>Uma palavra enfatizada .
Também ac...
Palavras sublinhadas??
ACTIVIDADE: Vamos ver se funciona!
( Se alguém souber o porquê de eu estar a pedir para fazer isto....
Palavras sublinhadas??
a HTML
d<p>
<u> </u><br>
</p>
Frase sublinhada.
Hum.....
FUNCIONA...
MAS NÃO DEVEMOS USAR.
PORQUÊ?
...
HEADINGS (Cabeçalhos) (... em texto!)
a HTML
d
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
Cabeçalho...
HEADINGS (Cabeçalhos ... do texto!)
Título da página
afonsogomes.com/
Cabeçalho tipo H1
Cabeçalho tipo H2
Cabeçalho tipo H...
Tags menores mas muito usadas
<br>
<hr>
Introduz uma quebra de linha ou «break».
- Encontramos esta tag sempre dentro de u...
Tudo Junto
a HTML
d
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
A minha primeira página
="description" ="A minh...
Tudo Junto
a HTML
d
<body>
<h1> </h1>
<p> </p>
<h2> </h2>
A minha primeira página
Isto é um parágrafo!
Primeira secção
<p>...
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 ...
VAMOS REVER O QUE JÁ DEMOS ATÉ AQUI
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN...
TRABALHO PRATICO
Crie uma página chamada tp01-seunome.html
- O Title e as Meta tags (que estudamos) devidamente preenchida...
Links
<a > </a>href=’’http://google.pt’’ Vamos ao Google.
Título da página
afonsogomes.com/
Vamos ao Google
Vamos ao Googl...
Links
<a > </a>href=’’http://google.pt’’ Vamos ao Google.
Endereço absoluto
<a > </a>href=’’documentos/pagina2.htm’’ Pagin...
Links
<a > </a>href target=’’#’’ =’’_self’’ Link
Atributo TARGET
_blank
_self
Abre numa nova janela
Abre na mesma janela (...
Links
<a > </a>href rel=’’#’’ =’’nofollow’’ LinkAtributo REL
nofollow
noreferrer
Link para um documento pelo qual não nos ...
Links ANCORAS
<a > </a>href=’’#seccao1’’ Vamos para a secção1.
Ancoras:
EXEMPLO E ACTIVIDADE!
Dúvidas?
Pergunte. Agora!
Qu...
Imagens
<img
>
src
alt
=’’img/FCPenafiel.png’’
=’’Logo F. C. Penafiel’’
Este ficheiro da imagem tem:
Largura: 200px
Altura...
Imagens - MÁ PRATICA
<img
>
src
alt
widht
height
=’’img/FCPenafiel.png’’
=’’Logo F. C. Penafiel’’
=’’100’’
=’’100’’
MÁ PRA...
Imagens - MÁ PRATICA
<img
>
src
alt
widht
height
=’’img/FCPenafiel.png’’
=’’Logo F. C. Penafiel’’
=’’100’’
=’’200’’
<img
>...
Imaginem o seguinte...
Como dividir uma imagem e fazer as várias áreas dela ‘clicáveis’?
Dúvidas?
Pergunte. Agora!
Qualque...
Imagemaps
0px 100px 200px 300px 400px
100px
200px
300px
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFI...
Imagemaps
<img >
<map >
<area >
<area >
<area >
</map>
="imagemap.png" ="400" ="300" ="" ="#cores"
="cores"
="rect" ="0,0,...
Imagemaps
<img >
<map >
<area >
<area >
<area >
</map>
="imagemap.png" ="400" ="300" ="" ="#cores"
="cores"
="rect" ="0,0,...
Imagemaps
0px 100px
200px
300px
400px
100px
200px
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONA...
Imagemaps (Exercício)
<img >
<map >
<area >
</map>
="imagemap.png" ="400" ="300" ="" ="#cores"
="cores"
="rect" ="0,0,100,...
Listas DESORDENADAS
a HTML
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
Elemento 2
Elemento 3
Elemento 1
Dúvidas?
Pergunte....
Listas ORDENADAS
a HTML
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
Elemento 2
Elemento 3
Elemento 1
Dúvidas?
Pergunte. Ag...
Listas ORDENADAS
a HTML
<ol >
<li> </li>
<li> </li>
<li> </li>
</ol>
=''10'' =''i''
Elemento 1
Elemento 2
Elemento 3
start...
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> <...
Listas de DESCRIÇÃO
a HTML
<dl>
<dt> </dt>
<dt> </dt>
<dd> </dd>
</dl>
Outro nome para o termo
Descrição
Termo
<dt> <dd>
<...
Listas dentro de listas
a HTML
<ul>
<li>
<ol>
<li> </li>
<li> </li>
</ol>
</li>
<li> </li>
</ul>
Elemento 1
Elemento 2
Ele...
Listas dentro de listas
a HTML
<ul>
<li> </li>
<ol>
<li> </li>
<li> </li>
</ol>
<li> </li>
</ul>
Elemento 1
Elemento 2
Ele...
l
Superscript e Subscript
a HTML
<p> <sup </sup></p>Texto normal Texto superscript>
a HTML
<p> <sub </sub> </p>Eu gosto de...
Abreviaturas <abbr>
a HTML
<p>
<abbr </abbr>
</p>
Este módulo do percurso formativo é sobre
="HyperText Markup Language">H...
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ágin...
l
Tags Editoriais - Delete e Insert<del> <del>
a HTML
<p>Decidi ="2013-01-26" aumentar
="http://www.afonsogomes.com" baixa...
Citações e<q> <blockquote>
a HTML
<p> <q >
</q>
</p>
E o Afonso disse cite=’’http://afonsogomes.com’’
Bem vindo ao meu nov...
Citações (Parte 1): <q>
a HTML
<p> <q >
</q> </p>
E o Afonso disse cite=’’http://afonsogomes.com’’
Bem vindo ao meu novo s...
Citações (Parte 2): <blockquote>
a HTML
<blockquote >
</blockquote>
cite=’’http://afonsogomes.com’’ Bem vindo ao
meu novo ...
<blockquote> EXEMPLOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e...
Objecto de uma citação: <cite>
a HTML
<p> <cite> </cite>
</p>
O quadro La Monalisa foi pintado por
Leonardo da Vinci entre...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e finalização de um web...
e<figure> <figcaption>
- A criação da tag é nova na especificação HTML5
- Não existia no HTML 4.01
- É uma tentativa do W3...
a HTML
<figure>
<img
>
<figcaption> </figcaption>
</figure>
src alt
width height
=’’monalisa.jpg’’ =’’A monalisa’’
=’’300’...
a HTML
<pre>
<code>
</code>
</pre>
&lt; &gt;
&lt; &gt;Um cabeçalho&lt; &gt;
&lt; &gt;Isto é um parágrafo de texto.&lt; &gt...
Texto pré-formatado e código<pre> <code>
Título da página
afonsogomes.com/
<div id="intro">
<h1>Um cabeçalho</h1>
<p>Isto ...
Texto pré-formatado e código<pre> <code>
a HTML
<pre>
<code>
</code>
</pre>
&lt; &gt;
&lt; &gt;Um cabeçalho&lt; &gt;
&lt; ...
Texto pré-formatado e código<pre> <code>
Título da página
afonsogomes.com/
<div id="intro">
<h1>Um cabeçalho</h1>
<p>Isto ...
<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 qu...
Mais tags relacionadas com código que dificilmente virão a usar...
<samp> <kbd> <var>, e
a HTML
<p>Se, por algum acaso tiv...
Ou muito úteis ou muito inúteis... estas tags desapareceram ao passar
do especificação antiga de HTML 4.01 para a nova e f...
a HTML
<address>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</address>
(+351) 966 488 842
eul@afonsogomes.com.com
http://...
Ou assinalar ... datas especificas (e hora!)
Tempo <time>
Valores que pode assumir o =datetime "AAAA-MM-DD HH:MM:SS"
a HTM...
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...
...Para que serve o HTML ?
Ainda se recordam ...
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL...
Ainda se recordam ...
Serve para aplicar a
ou seja... .
Vamos ver duas tags que não fazem nada disso!
SIGNIFICADO CONTEÚDO...
a HTML
<p> <span > </span>
<span > </span> </p>
A minha mãe tem olhos ="color:blue" azuis
e cabelo ="color:yellow" louro ....
Depois de falarmos do deviamos falar das .
Mas antes de falarmos sobre essa tag fabulosa....
Vamos falar da evolução das E...
Não havia necessidade de estruturas.
Tudo era simples...
Tudo era sequencial...
Era só código... muitos headings, muitos p...
Este período não durou muito, mas existiu.
Os frames estiveram sempre envoltos em controvérsia e muita
discussão:
- Muitos...
Exemplo dos FRAMES
O período dos frames
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDE...
Já que mencionamos Frames... aproveito para falar dos
- São muito usados em muitos websites. Já todos vimos iframes em
alg...
Analisando a tag do <iframe>
IFRAMES
a HTML
>
<iframe ="640" ="360"
="http://www.youtube.com/embed/2PYyEDl1bJk?rel=0"
O se...
Para simplificar a gestão de código HTML e «remediar» muitos dos problemas
que a utilização de frames criavam... começou-s...
Vamos então aprender a fazer tabelas...
... para as usar da maneira correcta!
Tabelas são usadas para exibir dados como po...
TABELAS
a HTML
<table >
<caption> </caption>
</table>
border=’’1’’
A minha tabela
...
Para iniciar uma tabela basta fazer ...
TABELAS
a HTML
<table >
<caption> </caption>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <...
TABELAS
a HTML
<table >
<caption> </caption>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> <...
TABELAS
E se quisermos isto? Ou isto?
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESI...
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>...
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>...
TABELAS
1
2
3
4
a HTML
<table >
<tr>
<td > </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
bo...
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
PROFI...
EXERCÍCIO2
1 2
4
5
6
7
8
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutur...
Titulo1 Titulo2 Título3
... ... ...
... ... ...
Total Titulo1 Média Titulo2 Total Titulo3
TABELAS - Header, body e footer ...
TABELAS - Header, body e footer numa tabela
É simples assim:
Titulo1 Titulo2 Título3
... ... ...
... ... ...
Total Titulo1...
TABELAS - Header, body e footer numa tabela
a HTML
<table >
<caption> </caption>
<thead>
<tr>
<th> </th>
<th> </th>
<th> <...
TABELAS - Header, body e footer numa tabela
a HTML
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tfoot>
<t...
TABELAS - col e colgroup
Por vezes também há necessidade de formatar as tabelas por colunas
Carro Marca Carro Modelo Preço...
TABELAS - col e colgroup
a HTML
<colgroup>
<col >
<col >
</colgroup>
<table border=’’1’’>
<thead>
<tr>
<th>Carro Marca</th...
TABELAS dentro de tabelas
1
2 4
1 2
3 4
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDE...
TABELAS dentro de tabelas
a HTML
<table >
<tr>
<td> </td>
<td>
<table >
</table>
</td>
</tr>
border
border
=’’1’’
1
=’’1’’...
a HTML
<div>
</div>
QUALQUER COISA AQUI... QUALQUER COISA MESMO!
A rainha de todas as tags <div>
Até que a malta começa a ...
a HTML
<div >
<div > </div>
<div > </div>
</div>
<div >
<div > </div>
<div > </div>
</div>
<div > </div>
<div > </div>
id
...
Alguma pratica com e tudo mais...<div>
Vamos tirar um tempo para estruturar páginas que já tenhamos feito. E ir
preparando...
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 no...
Estruturação de um site em HTML5
a HTML
<div >
<div > </div>
<div > </div>
</div>
id
id
id
= header
= logotipo ...
= menu’...
Estruturação de um site em HTML5
<header>
<aside>
<footer>
<nav>
<section>
<article>
<article>
<article>
Dúvidas?
Pergunte...
Análise de um website em HTML5
Para análise, vamos ver este fabuloso website
http://afonsogomes.com
Entrar no site e fazer...
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
...
Comentários
- Ajudam a orientarmo-nos no nosso código.
- Servem como apontamento para coisas que precisem de ser
feitas ma...
Comentários Condicionais
a HTML
<head>
<title>O meu site</title>
<link href="todo-o-css.css" rel="stylesheet">
</head>
<!-...
Comentários Condicionais
a HTML
<head>
<title>O meu site</title>
<link href="todo-o-css.css" rel="stylesheet">
</head>
<!-...
Comentários Condicionais
a HTML
<head>
<title>O meu site</title>
<link href="todo-o-css.css" rel="stylesheet">
</head>
<!-...
Multimedia - VIDEO
a HTML
<video >
<source >
<source >
</video>
="320" ="240"
="video.mp4" ="video/mp4"
="video.ogg" ="vid...
Multimedia - AUDIO
a HTML
<audio
<source >
<source >
<p> </p>
</audio>
="musica.mp3" ="audio/mpeg"
="musica.ogg" ="audio/o...
FORMULÁRIOS
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b Estrutura e finalizaç...
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...
FORMULÁRIOS
a HTML
<form >
</form>
="processa-form.php" ="POST"
....
action method
Como criar um formulário:
method pode a...
FORMULÁRIOS: A tag de <input>
a HTML
<input >=" " ="nomedacaixa" ="O seu valor"type nameXXXXX value
XXXXX assume diferente...
FORMULÁRIOS: Vários tipos de <input>
a HTML
<input >
<input >
<input >
<input >
<input >
<input >
="text"
="password"
="hi...
FORMULÁRIOS: Experimentem
a HTML
<form >
<p> <input </p>
<p> <input </p>
<p> <input </p>
<input
<p><input </p>
</form>
="p...
FORMULÁRIOS: Uma pequena nota
<button > </button>="button" Clica aqui!type
Embora exista marcação HTML para botões:
<input...
FORMULÁRIOS: input Checkboxes
a HTML
<p> </p>
<p>
<input <br>
<input <br>
<input <br>
<input
</p>
Assinale algumas coisas ...
FORMULÁRIOS: input Radio
a HTML
<p> </p>
<p>
<input <br>
<input <br>
<input <br>
<input
</p>
O seu género:
="radio" ="gene...
FORMULÁRIOS: Áreas de texto <textarea>
a HTML
<textarea > </textarea>="5" ="20" ="qqcoisa" Valor inicialrows cols name
<te...
FORMULÁRIOS: Caixas de <select>
a HTML
<select >
<option > </option>
<option> </option>
<option > </option>
<option > </op...
FORMULÁRIOS: Formulários acessíveis com <label>
a HTML
<label > </label>
<input >
="seuNome" O seu nome:
="text" ="seuNome...
FORMULÁRIOS: Formulários acessíveis <label>
Em caso de haver muitos elementos, tipo checkboxes e radios...
Podemos simplif...
FORMULÁRIOS: Formulários acessíveis <label>
E assim (no caso das caixas selects):
="caixaselect" Escolha uma opção:
="caix...
FORMULÁRIOS: Organização com o <fieldset>
Podemos organizar diferentes de um formulário para
um melhor entendimento do uti...
FORMULÁRIOS: PRIMEIRA ACTIVIDADE
- Codifique um formulário divido em 2 ou 3 zonas com o fieldset
- Em cada zona... as opçõ...
FORMULÁRIOS: Grupos de opção aplicados ao<optgroup> <select>
a HTML
<select >
<option > </option>
<option > </option>
<opt...
FORMULÁRIOS: Grupos de opção aplicados ao<optgroup> <select>
a HTML
<select >
<optgroup >
<option > </option>
<option > </...
EXERCÍCIO Escreva marcação que produza o seguinte resultado:
Não consegue ver esta imagem do seu lugar?
http://cesae.afons...
FIM DO HTML!
No próximo módulo:
Dúvidas?
Pergunte. Agora!
Qualquer coisa:
eu@afonsogomes.com
PROFISSIONAL EM WEBDESIGN
b E...
Próximos SlideShares
Carregando em…5
×

Aprender HTML (UFCD0152 e UFCD0153) v2

1.544 visualizações

Publicada em

Publicada em: Internet
1 comentário
5 gostaram
Estatísticas
Notas
  • Excelente Trabalho, Obrigado!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
1.544
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
0
Comentários
1
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aprender HTML (UFCD0152 e UFCD0153) v2

  1. 1. PROFISSIONAL EM WEBDESIGN
  2. 2. 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
  3. 3. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website
  4. 4. História e evolução da Internet INTERNETo que é? Dúvidas? Pergunte. Agora! 4 Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website
  5. 5. História e evolução da Internet 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website
  6. 6. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website
  7. 7. Internet Tim Berners-Lee Primeiro servidor de web O pai da internet 7 Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 7
  8. 8. Topologias (Esquemas de Navegação) Fila Árvore Bus Anel Rede (Mesh) Estrela Totalmente Ligada Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 8
  9. 9. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 9
  10. 10. Modelo de computção: CLIENTE-SERVIDOR Server Farm (Quinta de servidores) da Google Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 10
  11. 11. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 11
  12. 12. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 12
  13. 13. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 13
  14. 14. Protocolos Algumas vez os vimos? Não estarão bem à frente dos nossos olhos? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 14
  15. 15. Protocolos Algumas vez os vimos? Não estarão bem à frente dos nossos olhos? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 15
  16. 16. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 16
  17. 17. HTTP Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 17
  18. 18. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 18
  19. 19. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 19
  20. 20. Browsers Apple Safari Opera Mozilla Firefox Google Chrome MS Internet Explorer Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 20
  21. 21. Quando chega a hora de escolher um browser ... Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 21
  22. 22. Plataformas PC Desktop? Telemóvel? Tablet? Consola? E se for telemóvel?? iPhone? Android? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 22
  23. 23. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 23
  24. 24. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 24
  25. 25. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 25
  26. 26. WIREFRAMING: Exemplos Esboço inicial em papel Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 26
  27. 27. WIREFRAMING: Exemplos Esboço mais avançado (e polido) em PC Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 27
  28. 28. WIREFRAMING: Exemplos Um que eu fiz Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 28
  29. 29. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 29
  30. 30. WIREFRAMING: Como fazer Título da página afonsogomes.com/ FACEBOOK Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 30
  31. 31. WIREFRAMING: Como fazer 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 31
  32. 32. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 32
  33. 33. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 33
  34. 34. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 34
  35. 35. Tipografia: Classificar uma família de fontes ABCDúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 35
  36. 36. Tipografia: Classificar uma família de fontes ABCSERIF Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 36
  37. 37. Tipografia: Classificar uma família de fontes ABCSANS-SERIF Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 37
  38. 38. Tipografia: Classificar uma família de fontes AbcdeScript também conhecidas como Handwritting Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 38
  39. 39. Tipografia: Classificar uma família de fontes AbcMonospace Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 39
  40. 40. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 40
  41. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 41
  42. 42. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 42
  43. 43. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 43
  44. 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? * Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 44
  45. 45. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 45
  46. 46. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 46
  47. 47. Design e conteúdos DESIGN vs. CONTEÚDOS Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 47
  48. 48. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 48
  49. 49. O que vimos até agora 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! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 49
  50. 50. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 50
  51. 51. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 51
  52. 52. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 52
  53. 53. Concluindo: Fazer sítios web... TECNOLOGIAS Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 53
  54. 54. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 54
  55. 55. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 55
  56. 56. - 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 56
  57. 57. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 57
  58. 58. 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. á = &aacute; à = &aagrave; ã = &atilde; Á = &Aacute; À = &Aagrave; Ã = &Atilde; ç = &ccedil; Ç = &Ccedil; õ = &otilde; í = &iacute; ì = &iagrave; Í = &Iacute; Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 58
  59. 59. ACTIVIDADE: A nossa segunda página - Editar o ficheiro .html que criamos antes - Mudar «Olá Mundo» para «Ol&aacute; Mundo» - Dar um «Enter» e escrever outro «Ol&aacute; Mundo» - Guardar - Executar o ficheiro para abrir no browser Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 59
  60. 60. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 60
  61. 61. HTML HTMLAqui vamos nós Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 61
  62. 62. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 62
  63. 63. CONTEÚDOS Introdução ao HTML • 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 63
  64. 64. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 64
  65. 65. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 65
  66. 66. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 66
  67. 67. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 67
  68. 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) Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 68
  69. 69. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 69
  70. 70. Anatomia de uma página HTML <html> </html> <head> </head> </body> .... .... <body> <!DOCTYPE html> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 70
  71. 71. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 71
  72. 72. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 72
  73. 73. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 73
  74. 74. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 74
  75. 75. ACTIVIDADE Refazer o nosso «Olá Mundo» recorrendo a HTML... <html> </html> <head> </head> </body> <body> <!DOCTYPE html> Ol&aacute; Mundo! Executar o ficheiro no broser. Se der: Fazer upload do ficheiro e visualizar na «Internet». Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 75
  76. 76. ACTIVIDADE Título da página afonsogomes.com/ Olá Mundo! Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 76
  77. 77. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 77
  78. 78. <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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 78
  79. 79. <meta> As <meta> tags definem propriedades da página (metadata). Como por exemplo: codificação de caracteres, o autor,a descrição dessa página, as palavras-chave, etc... Não é «vista» pelo utilizador mas outras «máquinas» conseguem e leem-na! a HTML d <!DOCTYPE html> <html> <head> ="description" ="A minha brilhante primeira página" ="keywords" ="HTML, CESAE, pagina Web, outraTag, maisOutra " ="author" ="Afonso Ferreira Gomes" </head> . . . <meta > <meta <meta name content name content name content > > Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 79
  80. 80. <meta charset> É também com uma <meta> tag que definimos qual o CHARSET a ser usado por essa página. a HTML d... <head> ="UTF-8" <head> ... <meta charset > a HTML d ... <head> ="content-type" content="text/html; charset=UTF-8" <head> ... <meta http-equiv > Podia ser ISO-8859-1 (também conhecido como latin-1), Windows-1525, etc etc etc ... HTML5 HTML 4.01 Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 80
  81. 81. ?DÚVIDAS Dúvidas? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 81
  82. 82. Importancia dos elementos no <HEAD> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 82
  83. 83. Importancia dos elementos do <HEAD> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 83
  84. 84. ACTIVIDADE Refazer o nosso «Olá Mundo» inserindo os novos elementos: - Title - Meta Description - Meta Keywords - Meta Author - Meta Charset - Substituir «Ol&aacute; Mundo» por «Olá Mundo» Guarde o ficheiro como ex3.html e execute o ficheiro no browser. Se der: Fazer upload do ficheiro e visualizar na «Internet». Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 84
  85. 85. ACTIVIDADE a HTML d<!DOCTYPE html> <html> <head> <title>A minha primeira página</title> ="description" ="A minha brilhante primeira página" ="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 <!-- Já agora... isto é um comentário de HTML! O browser não o mostra ao visitante --> > > > a HTML d<!DOCTYPE html> <html> <head> <title>A minha primeira página</title> ="description" ="A minha brilhante primeira página" ="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 <!-- Já agora... isto é um comentário de HTML! O browser não o mostra ao visitante --> > > > a HTML d<!DOCTYPE html> <html> <head> <title>A minha primeira página</title> ="description" ="A minha brilhante primeira página" ="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 <!-- Já agora... isto é um comentário de HTML! O browser não o mostra ao visitante --> > > > Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 85
  86. 86. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 86
  87. 87. Slide em branco para explicações Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 87
  88. 88. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 88
  89. 89. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 89
  90. 90. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 90
  91. 91. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 91
  92. 92. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 92
  93. 93. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 93
  94. 94. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 94
  95. 95. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 95
  96. 96. 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 <!-- Isto é um comentário --> 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 96
  97. 97. Tudo Junto a HTML d <!DOCTYPE html> <html> <head> <title> </title> </head> A minha primeira página ="description" ="A minha brilhante página" ="keywords" ="HTML, CESAE, página pessoal" ="author" ="O seu nome" ="UTF-8" <meta > <meta <meta <meta name content name content name content charset > > > Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 97
  98. 98. Tudo Junto a HTML d <body> <h1> </h1> <p> </p> <h2> </h2> A minha primeira página 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 . <!-- Não esquecer incluir mais coisas! --> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 98
  99. 99. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 99
  100. 100. VAMOS REVER O QUE JÁ DEMOS ATÉ AQUI Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 100
  101. 101. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 101
  102. 102. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 102
  103. 103. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 103
  104. 104. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 104
  105. 105. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 105
  106. 106. Links ANCORAS <a > </a>href=’’#seccao1’’ Vamos para a secção1. Ancoras: EXEMPLO E ACTIVIDADE! Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 106
  107. 107. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 107
  108. 108. Imagens - MÁ PRATICA <img > src alt widht height =’’img/FCPenafiel.png’’ =’’Logo F. C. Penafiel’’ =’’100’’ =’’100’’ MÁ PRATICA: Ficheiro ser maior que o necessário! Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 108
  109. 109. Imagens - MÁ PRATICA <img > src alt widht height =’’img/FCPenafiel.png’’ =’’Logo F. C. Penafiel’’ =’’100’’ =’’200’’ <img > src alt widht height =’’img/FCPenafiel.png’’ =’’Logo F. C. Penafiel’’ =’’200’’ =’’100’’ MÁ PRATICA: Distorção das medidas no código Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 109
  110. 110. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 110
  111. 111. Imagemaps 0px 100px 200px 300px 400px 100px 200px 300px Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 111
  112. 112. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 112
  113. 113. 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" 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"> src height alt usemap name shape coords href alt shape coords shape coords widht href alt href alt shape coords href alt shape coords href alt shape coords href alt shape coords href alt shape coords href alt =" =" =" =" =" <area <area <area <area <area a HTML Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 113
  114. 114. Imagemaps 0px 100px 200px 300px 400px 100px 200px Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 114
  115. 115. Imagemaps (Exercício) <img > <map > <area > </map> ="imagemap.png" ="400" ="300" ="" ="#cores" ="cores" ="rect" ="0,0,100,100" ="H.htm" ="Area H" src height alt usemap name shape coords href alt widht a HTML Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 115
  116. 116. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 116
  117. 117. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 117
  118. 118. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 118
  119. 119. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 119
  120. 120. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 120
  121. 121. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 121
  122. 122. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 122
  123. 123. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 123
  124. 124. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 124
  125. 125. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 125
  126. 126. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 126
  127. 127. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 127
  128. 128. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 128
  129. 129. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 129
  130. 130. <blockquote> EXEMPLOS Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 130
  131. 131. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 131
  132. 132. Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 132
  133. 133. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 133
  134. 134. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 134
  135. 135. a HTML <pre> <code> </code> </pre> &lt; &gt; &lt; &gt;Um cabeçalho&lt; &gt; &lt; &gt;Isto é um parágrafo de texto.&lt; &gt; &lt; &gt; 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 135
  136. 136. Texto pré-formatado e código<pre> <code> 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 136
  137. 137. Texto pré-formatado e código<pre> <code> a HTML <pre> <code> </code> </pre> &lt; &gt; &lt; &gt;Um cabeçalho&lt; &gt; &lt; &gt;Isto é um parágrafo de texto.&lt; &gt; &lt; &gt; 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 137
  138. 138. Texto pré-formatado e código<pre> <code> 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 138
  139. 139. <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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 139
  140. 140. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 140
  141. 141. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 141
  142. 142. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 142
  143. 143. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 143
  144. 144. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 144
  145. 145. ...Para que serve o HTML ? Ainda se recordam ... Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 145
  146. 146. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 146
  147. 147. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 147
  148. 148. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 148
  149. 149. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 149
  150. 150. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 150
  151. 151. Exemplo dos FRAMES O período dos frames Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 151
  152. 152. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 152
  153. 153. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 153
  154. 154. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 154
  155. 155. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 155
  156. 156. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 156
  157. 157. TABELAS a HTML <table > <caption> </caption> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> border=’’1’’ 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 157
  158. 158. TABELAS a HTML <table > <caption> </caption> <tr> <th> </th> <th> </th> <th> </th> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> border=’’1’’ 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 158
  159. 159. TABELAS E se quisermos isto? Ou isto? Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 159
  160. 160. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 160
  161. 161. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 161
  162. 162. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 162
  163. 163. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 163
  164. 164. EXERCÍCIO2 1 2 4 5 6 7 8 Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 164
  165. 165. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 165
  166. 166. TABELAS - Header, body e footer numa tabela É simples assim: Titulo1 Titulo2 Título3 ... ... ... ... ... ... Total Titulo1 Total Titulo2 Total Titulo3 <thead> <tbody> <tfoot> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 166
  167. 167. TABELAS - Header, body e footer numa tabela a HTML <table > <caption> </caption> <thead> <tr> <th> </th> <th> </th> <th> </th> </tr> </thead> border=’’1’’ Legenda da Tabela Título Coluna 1 Título Coluna 2 Título Coluna 3 Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 167
  168. 168. TABELAS - Header, body e footer numa tabela 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 168
  169. 169. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 169
  170. 170. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 170
  171. 171. TABELAS dentro de tabelas 1 2 4 1 2 3 4 Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 171
  172. 172. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 172
  173. 173. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 173
  174. 174. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 174
  175. 175. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 175
  176. 176. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 176
  177. 177. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 177
  178. 178. Estruturação de um site em HTML5 <header> <aside> <footer> <nav> <section> <article> <article> <article> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 178
  179. 179. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 179
  180. 180. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 180
  181. 181. 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> <!-- FIM Nav --> <!-- FIM Header --> Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 181
  182. 182. Comentários Condicionais a HTML <head> <title>O meu site</title> <link href="todo-o-css.css" rel="stylesheet"> </head> <!--[if IE]> <link href="css-para-o-ie.css" rel="stylesheet"> <![endif]--> 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 182
  183. 183. Comentários Condicionais a HTML <head> <title>O meu site</title> <link href="todo-o-css.css" rel="stylesheet"> </head> <!--[if IE 6]> ... <![endif]--> <!--[if IE 7]> ... <![endif]--> <!--[if IE 8]> ... <![endif]--> <!--[if IE 9]> ... <![endif]--> Também podemos atacar versões epecíficas do IE... Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 183
  184. 184. Comentários Condicionais a HTML <head> <title>O meu site</title> <link href="todo-o-css.css" rel="stylesheet"> </head> <!--[if IE gt 6]> ... <![endif]--> <!--[if IE gte 8]> ... <![endif]--> <!--[if IE lt 8]> ... <![endif]--> <!--[if IE lte 9]> ... <![endif]--> 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 184
  185. 185. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 185
  186. 186. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 186
  187. 187. FORMULÁRIOS Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 187
  188. 188. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 188
  189. 189. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 189
  190. 190. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 190
  191. 191. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 191
  192. 192. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 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
  193. 193. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 193 a HTML a HTML
  194. 194. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 194
  195. 195. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 195
  196. 196. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 196
  197. 197. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 197
  198. 198. FORMULÁRIOS: Formulários acessíveis com <label> a HTML <label > </label> <input > ="seuNome" O seu nome: ="text" ="seuNome" ="seuNome" for name id <!-- etc etc etc --> 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 198
  199. 199. 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> <label><input > </label> <label><input > </label> <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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 199
  200. 200. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 200
  201. 201. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 201
  202. 202. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 202
  203. 203. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 203
  204. 204. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 204
  205. 205. 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 PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 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
  206. 206. FIM DO HTML! No próximo módulo: Dúvidas? Pergunte. Agora! Qualquer coisa: eu@afonsogomes.com PROFISSIONAL EM WEBDESIGN b Estrutura e finalização de um website 206

×