Criação de Páginas Web HTML e Marcado

Prof.ª Emília Isaías
Módulo III
Criação de Páginas Web
AGRUPAMENTO DE ESCOLAS DE MONTEMOR-O-NOVO
Tecnologias da Informação e Comunicação

Introdução
 O HTML é uma linguagem de estruturação
de documentos.
 Um documento estruturado em HTML é
composto por texto e por algumas
directivas especiais chamadas marcas.
 Um documento HTML “deve” ser
guardado com a extensão .HTML

Exemplo 1
 Documento HTML
sem qualquer
marca
 Incorrecto mas
(“todos”) os
navegadores o
aceitam.

Exemplo 2

Marcas
 As marcas identificam-se por se iniciarem por um
sinal de menor e terminarem num sinal de maior.
 As marcas são insensíveis à capitulação dos
caracteres
 Ex: <HTML> é o mesmo que <Html> ou <html>

Marcas
 A maior parte das marcas são constituídas
por pares: a Marca de Abertura; e a Marca
de Fecho. O fecho de uma marca é
efectuado com o caracter barra entre o
sinal de menor e o nome da marca.
 Ex: <body>textodocorpo</body>
Fecho da Marca

Marcas
 Designa-se por “Conteúdo da Marca” tudo o
que estiver entre a Abertura e o Fecho
correspondente da Marca.
 Algumas marcas não necessitam de ser
fechadas.
 Ex: <br>

Marcas
 As marcas podem conter atributos,
opcionais, na maioria dos casos, mas
obrigatórios nalguns outros.
 Ex: <BODY bgcolor=“black”>

Exemplo 3

Marcas base
 HTML
 Define um documento HTML
 Deve ser fechada
 Só deve existir uma marca HTML por documento
 Num documento HTML bem escrito, todas as
outras marcas, todo o texto, todos os estilos e
scripts devem ser sempre incluídos dentro desta
marca

Marcas base
 HEAD
 Define o cabeçalho do documento
 Qualquer texto inserido nesta Marca
“pode” ser ignorado pelos navegadores
 Estilos e scripts, internos mas globais ao
documento, devem ser inseridos nesta
marca

Marcas base
 TITLE
 Define o título do documento
 Não faz parte do conteúdo do documento
 A forma de apresentação, ou não, é decidida pelo navegador
 Só pode ocorrer dentro da marca HEAD
 BODY
 Define o conteúdo do documento
 A maior parte das marcas ocorrem dentro desta
 Só deve existir um par por documento

Marcas Simples
 H1, H2,…,H6 Define um tipo de cabeçalho no texto
 HR Insere uma linha horizontal
 <qualquer coisa> Insere um comentário
 P Insere um novo parágrafo
 BR Insere uma quebra de linha
 B Usa a forma negrito
 I Usa a forma itálico
 PRE Usa o formato predefinido
 U Em vez U (sublinhado) deve usar-se
estilos

Marcas simples (mais algumas)
 BI G Usa a fonte de caracteres maiúsculas
 SMALL Usa a fonte de caracteres minúsculas
 SUB Coloca o texto em “subscript”
 SUP Coloca o texto em “superscript”
 STRONG Usa o texto forte
 INS Marca o texto como inserido
 DEL Marca o texto como apagado
Possibilidade de Atributos em Diversas Marcas, mas quase
todos ultrapassados*

Exemplo 4

Função das Marcas
 As marcas assinalam para o navegador o tipo de
conteúdo mas não obrigam a um formato de
apresentação
 É o navegador que decide qual o formato da
apresentação
 O navegador ignora as marcas desconhecidos e/ ou
não suportadas
 Os Navegadores “procuram” ultrapassar os erros,
tais como marcas mal fechadas, marcas mal
encadeadas e caracteres desconhecidos

Listas
 UL Define uma lista não ordenada
 OL Define uma lista ordenada
 LI Define um elemento de uma lista
 DT Define uma lista de termos
 DL Define um termo
 DD Define uma definição para o termo

Exemplo 5

Âncoras e Ligações
 A âncora identifica um ponto do documento HTML
 Uma âncora é criada pela Marca A com o atributo name
 Ex: <A name=“ponto2”>Aprovação da acta </ A>
 Uma ligação permite o acesso directo a um outro documento e/
ou a um ponto do documento.
 A inclusão de ligações no texto é obtida pela utilização da Marca
A, com o atributo HREF indicando o URL pretendido
 Ex: <A href =“http:/ / www.fe.up.pt / ”>FEUP</ A>
 A identificação visível da ligação, para o utilizador , é o conteúdo
da Marca A.
 No exemplo acima essa identificação é a palavra FEUP, mas
pode ser qualquer outra componente, incluindo imagens.

Quadros
 A divisão da janela em quadros é feita num doc. HTML
composto pelas Marcas
 FRAMESET
 Define um conjunto de Quadros
 FRAME
 Define um Quadro
 NOFRAME
 Define o conteúdo para navegadores (antigos) que não
suportem Quadros
 Deve incluir a marca BODY

Exemplo 6

Controlo de Quadros
 O atributo NAME num quadro permite a sua identificação a partir de outro
quadro
 O atributo TARGET permite identificar um quadro ou janela alvo
 Por omissão o alvo é sempre o quadro presente
 Pode-se alterar o alvo por omissão com o atributo TARGET na marca BASE
 <BASE TARGET=“quadroalvo” > (ver exemplo 13)
 Alvos especiais
 _blank: cria uma nova janela
 _self: o próprio quadro ou janela (valor por omissão)
 _parent: o conjunto de quadros ou janelas que contém o quadro
 _top: a janela que contém o quadro

Outros Atributos dos Quadros

Exemplo 7

Quadros Embutidos

Exemplo 8

Argumentação Contra os Quadros
 Bookmarks
 Actualização dos quadros
(Refresh/ reload)
 Enviar um email com a referência ou
conteúdo
 As dimensões dos quadros podem
impedir a correcta visualização

Tabelas
Exemplo 9

Tabelas - Atributos

Exemplo 10

Mais Marcas para usar em Tabelas

Atributos das Marcas de Tabela

Exemplo 11

Inserção de Imagens
 Marca <IMG> (que não tem tag de fecho), tem
sempre associado o atributo src (de source – a
fonte) contendo o URL da imagem.
 Ex: <IMG Src=“Globo.gif”>
 Ex: <IMG Src=“Imagens/Globo.gif”
 Quando a imagem se encontrar numa pasta diferente
da corrente, teremos de indicar a sua localização .

Inserção de Imagens
 Atributos
 SRC: identifica por um URL o ficheiro da imagem
 ALT: Texto alternativo à imagem
 WIDTH: permite definir a largura da imagem
 HEIGHT: permite definir a altura da imagem.
 ALIGN: permite definir a forma de alinhamento
da imagem.
 LEFT
 RIGHT
 MIDDLE
 BOTTOM
 TOP
12-05-14 Prof.ª Emília Isaías

Exemplo 12

Exemplo 12 (outro)

Formatos de Imagens Embutidas
 Tipos de formatos:
 Suportados por quase todos os navegadores: todos os navegadores:
 GIF, JPEG, PNG
JPEG é bom para comprimir fotos mas perde alguma
qualidade
GIF usa 8 bits => só permite 256 cores
PNG permite usar até 48 bits
• Características suportadas pelos navegadores
• Imagens animadas
• Possível com GIF ou utilizando Javascript (DHTML)
• Fundos transparentes
• Fundos transparentes
• GIF - transparência simples: transparente ou opaco
• PNG – 254 níveis de transparência
• Imagens interlaçadas
• GIF – Linha
• PNG – Bidimensional
 Imagens progressivas (JPEG)

Imagens sensitivas
 Uma imagem pode ser uma ligação para
um outro documento, como qualquer
caractere, palavra, frase, parágrafo, etc.
Só precisa de estar delimitada por uma
Marca A com um atributo HREF.
 Um toque no rato sobre a imagem
permite efectuar uma ligação ao URL
indicado.

Áreas de Imagem Sensitivas
(Imagens Mapa)
 Uma imagem pode ser “dividida” em regiões por
forma a associa-las a ligações distintas.
 A divisão pode ser efectuada do lado do cliente ou
do servidor.
 Lado do servidor
 Definido pelo atributo ISMAP dentro da Marca IMG
 O navegador limita-se a adicionar as coordenadas
do toque do rato ao URL da ligação
 É o servidor que toma a decisão sobre a escolha da
nova página
 Só deve ser usado para imagens com regiões
complexas.

Imagens Mapa (lado cliente)
 Definido pelo Atributo USEMAP que identifica um
mapa
 Um mapa é definido pela Marca MAP
 O valor do Atributo NAME (obrigatório) deve
coincidir como valor do atributo USEMAP da
Marca IMG
 Tipos de Regiões possíveis:
 Rectângulos, Círculos e Polígonos
 A decisão da ligação a seguir é determinada no
cliente (navegador)
 Permite ao agente identificar à priori o destino da
ligação

Exemplo 15

Mapas (Marcas e Atributos)
 Marca AREA
 Define uma área dentro do MAPA
 Atributos:
 SHAPE: Define a formato geométrico da região
 COORDS: Defina as coordenadas da região
 HREF: Define o URL da ligação
 NOHREF: Específica que a região não t em uma ligação
associada
 Um Mapa também pode, alternativamente, ser definido por um
bloco de elementos contendo em vez de Marcas AREA, Marcas A

Formulários
 Função
 Recolha de informação, personalizada, do utilizador para o
sistema
 Os dados são enviados para o/ um servidor
 Marca FORM
 Atributos
 ACTI ON: Identifica o URL do aplicativo que irá processar a informação
e devolver uma resposta
 METHOD: Selecciona o método GET ou POST para envio dos dados
para o servidor

Exemplo 16

Marcas em Formulários
 INPUT
 Atributo TYPE: Define o tipo de entrada:
 TEXT, PASSWORD, IMAGE, RADIO, CHECKBOX,
BUTTON, SUBMIT, RESET, HIDDEN, FILE
 SELECT: Define um conjunto de opções possíveis de
selecção (simples ou múltipla).
 As opções são definidas por uma ou mais marcas
OPTION dentro deste elemento.
 O Atributo MULTI PLE define que a lista é de escolha
múltipla
 O Atributo SELECTED na Marca OPTION permite pré-
seleccionar essa opção

Exemplo 17

Marca META
 META: Usada (dentro do elemento HEAD) para definir
meta informação
 <META name="Author " content =“Isidro Vila Verde">
 <META name="keywords" lang=“pt " content =“férias, gerês,
passeios">
 <META http-equiv="Expires" content ="Tue, 11 Mar 2003 23:00:00
GMT">
 <META http-equiv="Content -Type" content ="text / html;charset =I
SO-8859-1">
 <META name="date" content ="2003-07-03T10:11:08+00:00">
 <META name="copyright " content ="© FEUP 2003.">
 <META name="robots" content ="noindex">
 <META http-equiv="refresh" content ="10">
 <META HTTP-EQUI V = "pragma" CONTENT="no-cache">

Marca META (transição de páginas)
 Só é suportado pelo Internet Explorer
 <META HTTP-EQUIV="Page-Enter
"CONTENT="RevealTrans(Duration=second;Transition=n)">
 <META HTTP-EQUIV="Page-Exit "CONTENT="Reveal
Trans(Duration=second;Transition=n)">
Tabela de Valores para o efeito de transição
N.º Tr. Description N.º Tr. Description N.º Tr. Description N.º Tr. Description
0 Box in 6 Wipe right 12 Random dissolve 18 Strips left up
1 Box out 7 Wipe left 13 Split vertical in 19 Strips right down
2 Circle in 8 Vertical blinds 14 Split vertical out 20 Strips right up
3 Circle out 9 Horizontal blinds 15 Split horizontal in 21 Random bars
horizontal
4 Wipe up 10 Checkerboard across 16 Split horizontal out 22 Random bars
vertical
5 Wipe down 11 Checkerboard down 17 Strips left down 23 Random

Conjuntos de códigos de caracteres
ISO 8859-1 Western European (Albanian, Basque, Breton, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, German, Greenlandic,
Icelandic, Irish Gaelic, Italian, Latin, Luxemburgish, Norwegian, Portuguese, Rhaeto-Romanic, Scottish Gaelic, Spanish, Swedish)
ISO 8859-2 Eastern European (Albanian, Croatian, Czech, English, German, Hungarian, Latin, Polish,
Romanian, Slovak, Slovenian, Serbian)
ISO 8859-3 Southeastern European (Afrikaans, Catalan, Dutch, English, Esperanto, German, Italian,
Maltese, Spanish, Turkish)
ISO 8859-4 Northern European (Danish, English, Estonian, Finnish, German, Greenlandic, Latin, Latvian,
Lithuanian, Norwegian, Sámi, Slovenian, Swedish)
ISO 8859-5 Eastern European (Cyrillic-based: Bulgarian, Byelorussian, Macedonian, Russian, Serbian,
Ukrainian)
ISO 8859-6 Arabic
ISO 8859-7 Greek
ISO 8859-8 Hebrew
ISO 8859-9 Western European (Albanian, Basque, Breton, Catalan, Cornish, Danish, Dutch, English,
Finnish, French, Frisian, Galician, German, Greenlandic, Irish Gaelic, Italian, Latin,
Luxemburgish, Norwegian, Portuguese, Rhaeto-Romanic, Scottish Gaelic, Spanish, Sw
ISO 8859-10 Northern European (Danish, English, Estonian, Faeroese, Finnish, German, Greenlandic,
Icelandic, Irish Gaelic, Latin, Lithuanian, Norwegian, Sámi, Slovenian, Swedish)
ISO 8859-13 Baltic Rim (English, Estonian, Finnish, Latin, Latvian, Norwegian)
ISO 8859-14 Celtic (Albanian, Basque, Breton, Catalan, Cornish, Danish, English, Galician, German,
Greenlandic, Irish Gaelic, Italian, Latin, Luxemburgish, Manx Gaelic, Norwegian, Portuguese,
Rhaeto-Romanic, Scottish Gaelic, Spanish, Swedish, Welsh)
ISO 8859-15 Western European (Albanian, Basque, Breton, Catalan, Danish, Dutch, English, Estonian,
Faroese, Finnish, French, Frisian, Galician, German, Greenlandic, Icelandic, Irish Gaelic, Italian,
Latin, Luxemburgish, Norwegian, Portuguese, Rhaeto-Romanic, Scottis

Referências de caracteres
 Numéricas
&# D; ou &# xH; onde D é o
código em decimal e H em
hexadecimal do carácter de acordo
com a norma ISO 10646
 Ex:
 &# xE7; é o ç
 &# 231; é também o ç

Referências de caracteres
 Nomes simbólicos
 &nome; onde nome está definido na
norma do HTML
 Ex:
 ã é o ã
 á é o á
 è é o è
 ç é o ç
 Importante
 &lt ; &gt ; &

Mais Marcas
 DIV: Define uma divisão do documento.
 Um documento pode conter várias divisões cada
uma com características próprias.
 SPAN
 Equivalente a DIV mas o Elemento não é tratado
como um bloco.
 BASE: Esta Marca deve ser usada no Elemento
HEAD para definir características base ao
Documento.
 Atributo HREF: Define o URL base para as ligações relativas.
 Atributo TARGET: Ident ifica o Quadro ou Janela onde, por
omissão, serão visualizadas as ligações deste Documento.

Atributos Nucleares
 Atributos que podem ocorrer em todas as
Marcas
 I D: Identifica uma Marca/ Elemento
 CLASS: Associa a Marca/ Elemento a uma categoria
 STYLE: Permite definir (inline) características usando
CSS
 TI TLE: Associa informação descritiva à Marca/
Elemento.

Outras Marcas e outros ATRIBUTOS

Marcas não standard
 NOBR
 WBR
 LAYER
 BGSOUND
 Etc…
 Ver uma lista de Marcas não standard em:
http://www.devguru.com/Technologies/html/quickref
/html_other_tags.html

Links
 http://www.w3.org/TR/html
 Norma actual do HTML
 http://www.w3schools.com/html/default.asp
 Site excelente para aprender Html e, adicionalmente, com
duas ferramentas muito úteis:
 http://www.w3schools.com/html/html_examples.asp
 Uma colecção de exemplos que podem ser alterados
on-line e o resultado visualizado de imediato.
Classificação: Excelente
 http://www.w3schools.com/html/html_quiz.asp
 Uma ferramenta para testar, on-line, os
conhecimentos HTML.

Links
 http://www.echoecho.com/
 http://www.pageresource.com/
 http://www.pagetutor.com/pagetutor/makapage/
 Informações sobre Marcas META
 http://webdesign.about.com/cs/metatags/
 http://www.cs.ucc.ie/j.bowen/cs4320/metaTags.html
 http://web-wise-wizard.com/html-tutorials/html-meta-
tag-search-tutorial.html

Criação de Páginas Web HTML e Marcado

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a Criação de Páginas Web HTML e Marcado

Semelhante a Criação de Páginas Web HTML e Marcado (20)

Último

Último (20)

Criação de Páginas Web HTML e Marcado