NOME
PROJECTO
DATA CLIENTE
DATA
HMTLHYPERTEXT MARK-UP LANGUAGE
LINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS

COMO FUNCIONA UMA
WEB APPLICATION
Um conjunto de Clientes acede a um Web
Server para obter conteúdos. Os clientes
podem ser computadores, tablets, telefones
ou qualquer outro dispositivo com acesso à
Internet.

Como Funciona uma Web
Application
Para aceder os conteúdos dos servidores ligados à
Internet estes dispositivos utilizam um Web browser.
Web browser

Como Funciona uma Web
Application
Para criar conteúdos para a Web em HTML e CSS não
é necessário entender todo o funcionamento da
Internet mas convém ter algumas noções básicas.

Como Funciona uma Web
Application
Para se criar uma Web Application é necessário ter
uma rede um web server e um conjunto de dispositivos
ligados a esse server que se designam por clientes.

Aplicações a Instalar
Windows / Mac
Google Chrome (free)
https://www.google.com/intl/pt-BR/chrome/browser/?hl=pt-BR
Dreamweaver(trial)
http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver
Windows
Notepad++(free)
http://notepad-plus-plus.org/download/v6.2.html
Mac
TextWrangler(free)
http://www.barebones.com/products/textwrangler/

Linguagem e Documentos
HTML
Documento HTML
Index.txt
Index.html

Linguagem e Documentos
HTML
DESMARCAR OPÇÂO

Linguagem e Documentos
HTML
Depois de guardar um ficheiro alterar a sua extensão:
Index.txt
Index.html
Cuidado para
não ficar
Index.hml.txt

Linguagem e Documentos
HTML
A Linguagem HTML
HTML = HyperText Markup Language
Permite definir o conteúdo e a estrutura de uma
webpage
O código de uma página de designa-se por
“Documento HTML”

Linguagem e Documentos
HTML
Texto em que se pode clicar para aceder a um novo
documento.
É uma referência à capacidade das páginas Web
conterem links umas para as outras.
Documento HTML
HTML = HyperText Markup Language

Linguagem e Documentos
HTML
• Marcadores (Tags) que aplicam
formatações convencionadas a texto
simples.
Documento HTML
HTML = HyperText Markup Language

Linguagem e Documentos
HTML
• Os documentos HTML são descritos pelos
marcadores da linguagem.
• Cada marcador da linguagem descreve
um tipo de conteúdo diferente.
Documento HTML
HTML = HyperText Markup Language

Linguagem e Documentos
HTML
Referência ao facto de o HTML ser
considerado uma linguagem de programação.
Documento HTML
HTML = HyperText Markup Language

HTML5
Web Technologies
html 5 Markup Language
CSS 3 Style Sheets
JavaScript

Fases para a criação de um website
1. Criação do documento HTML
Notepad, DreamWeaver, VisualStudio,etc
2. Registar um nome de domínio
.com, .net, .pt
3. Contratar o Alojamento
Onde hospedar os ficheiros do seu site

A Estrutura do Site
Antes de defina as páginas que precisa:
Home Page
Catálogo de Produtos
Informação da Empresa
Formulário de Encomendas
Página de Contactos
Apoio e FAQ
Notícias

Mapa do Site
Home Page
Produtos A Empresa
Ferramentas
da empresa
Contactos Novidades
Produto 1
Produto 2
O Nosso Blog
Os Nossos
Clientes
As nossas
Ferramentas
Um de um site é normalmente apresentado numa estrutura em árvore
sendo a Home Page colocada no topo da hierarquia que representa as
páginas do site. É uma boa prática desenhar um mapa do site seja em
papel ou em qualquer aplicação. Por exemplo:

Regras para a elaboração
do conteúdo
1. Colocar os visitantes em primeiro lugar
Considere aquilo que os seus visitantes deverão
procurar
no site em primeiro lugar, e coloque essa informação em
primeiro lugar.2. Evite becos sem saída
Todas as páginas têm de proporcionar ao visitante a
possibilidade de navegar para um conteúdo - por
exemplo, para comprar um produto, ou para contactar a
empresa.
3. Seja directo
As páginas não devem ter mais de 400 páginas. Estruture
as ideias por tópicos de modo a que a informação seja
mais facilmente absorvida.

4. Seja Pessoal
Um tom casual como o de conversação resulta bem na
Internet - evite ser demasiado formal.
5. Utilize Imagens e Vídeo
Quando escolhidas de forma criteriosa as imagens e
vídeos podem dar vida ao seu site.
6. Não se esqueça do seu Objectivo
Cada elemento do seu site deve ser utilizado tendo em
vista o objectivo global do site definido à partida.
Regras para a elaboração
do conteúdo

Editores de documentos - exemplos
Editores de texto
Notepad
Notepad ++
Editores WYSIWYG
("What You See Is What You Get“)
Dreamweaver
Visual Studio

Componentes de uma página web
Uma webpage é formada por 3 componentes básicos:
1. Texto:
Texto simples que aparece na página para mostrar
informações sobre o site aos visitantes.
2. Referências a outros ficheiros:
Conteúdos carregados para a página HTML através da
referência a outros ficheiros como imagens, sons, vídeo, outras
páginas HTML, ficheiros de CSS, ficheiros de JavaScript, ou
outras.

Uma webpage é formada por 3 componentes básicos:
3. Marcadores:
Elementos da linguagem HTML que descrevem o
conteúdo da página e tornam possíveis as referências a
outros documentos.
Componentes de uma página web

Componentes de uma página web
Todos estes componentes:
Texto
Referências a outros ficheiros
Marcadores
são criados utilizando apenas texto simples.

Componentes de uma página web
Para além disso uma página inclui um conjunto de informações sobre a
própria página.
Esta informação destina a passar informação ao search engines e aos
browsers. Exemplos:
Descrição do conteúdo da página
Definição do idioma da página
Definição da codificação de página.
Outros

Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags ou marcadores.

Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags ou marcadores.
Os tags indicam o local onde deve ser aplicada a
formatação:
<i>Todos os artigos em saldo</i>
Itálico

Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags.
Os tags indicam o local onde deve ser aplicada a
formatação:
<i>Todos</i> os artigos em saldo
Início da
formatação
Fim da
formatação

Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags.
Os tags indicam o local onde deve ser aplicada a
formatação:
<i>Todos</i> os artigos em saldo
tag ou
marcador
inicial
tag ou
marcador final

Regras básicas
html é uma sequência de texto que se encontra
definido entre um conjunto de símbolos que
designam por tags.
Os tags indicam o local onde deve ser aplicada a
formatação:
<i>Todos</i> os artigos em saldo
ELEMENTO

Regras básicas
Um elemento provoca uma alteração na página html
e pode ter um TAG inicial e um TAG final.
<i>Formata o texto em itálico</i>

Regras básicas
Um elemento provoca uma alteração na página html e
pode ter um TAG inicial e um TAG final.
Para alguns elementos o tag final é opcional:
<p>Formata o texto em itálico</p>
<p>Formata o texto em itálico

Regras básicasUm elemento provoca uma alteração na página
html e pode ter um TAG inicial e um TAG final.
Para alguns elementos o tag final é opcional e para
outros é obrigatório.
<table>
…
</table>

Regras básicas
Um elemento provoca uma alteração na página html
e pode ter um TAG inicial e um TAG final.
Para alguns elementos o tag final é opcional e para
outros é obrigatório.
Outros elementos não têm tag final.
<br>

Elementos que contêm
outros
Num documento html, uma tabela é um elemento. Esse elemento
pode conter outros elementos, por exemplo, as linhas da tabela.
<table>
<tr>
<td>…. </td>
</tr>
</table>

ELEMENTOS
Uma lista numerada é um elemento. Cada item da
lista é um elemento contido no elemento que define
a lista.

Regras básicas
Um documento html é constituído por um conjunto
de elementos, representados por uma sequência
de símbolos – TAG

Regras básicas
Cada TAG é sempre escrita entre o símbolo < e
o símbolo >

Regras básicas
Grande parte das TAGs têm que ser iniciadas e
finalizadas, utilizando o caracter /
Uma TAG pode conter outras TAGs. A finalização
das TAGs é na ordem inversa da sua criação

ELEMENTOS vs TAGS
Num documento html, cada elemento é representado
por uma sequência de símbolos que o identificam.
Essa sequência de símbolos é designada por tag.
Um parágrafo de texto é um elemento.
Esse elemento é representado pelo tag inicial <P> e
pelo tag final </P>. Entre o tag inicial e o tag final,
pode ser colocado o texto do parágrafo.
<P>Este texto é um
parágrafo.</P>
TAG
INICIAL
TAG FINAL

ELEMENTOS vs TAGS
BLOCO DE
CONTEÚDO
ELEMENTO
Num documento html, cada elemento é representado por uma
sequência de símbolos que o identificam. Essa sequência de símbolos é
designada por tag.
Um parágrafo de texto é um elemento.
Esse elemento é representado pelo tag inicial <P>
e pelo tag final </P>. Entre o tag inicial e o tag final,
pode ser colocado o texto do parágrafo.
<P>Este texto é um
parágrafo.</P>

Regras básicas
Deve criar o hábito de escrever as TAGs com letra
minúscula
As linhas de comentário tem um tag inicial <! - - e
um tag final - - >
<p>Este é um parágrafo</p>
<!-- Primeiro parágrafo -->

Regras básicas
3 tipos de elementos:
TAG FINAL obrigatório-explo:
<table>... </table>
TAG FINAL opcional-explo:
<p>... [</p>]
Sem TAG FINAL – explo:
<hr>
<br>
<img src=“logo.gif” alt=“Logo”>

Elementos e Atributos
<ELEMENTO atributo1=valor1
atributo2=valor2...
atributon=valorn...>
...
...
</ELEMENTO>
Os elementos podem ter atributos e o seu respectivo valor

Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLASS=“Paragrafotexto”
ALIGN=“left”
TITLE=“Parágrafo Importante”>Texto que aparece na página do documento.
</P>

Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLASS=“Paragrafotexto”
ALIGN=“left”
TITLE=“Parágrafo Importante”>Texto que aparece na página do documento.
</P>
As aspas não são obrigatórias mas
devem ser utilizadas sobretudo quando
o valor do atributo é composto mais de
uma palavra

<ELEMENTO atributo1=valor1
atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<p ID=p1
CLASS=“Paragrafotexto”
ALIGN=“left”
TITLE=“Parágrafo Importante”>Texto que aparece na
página do documento.
</p>
Elementos e Atributos
Identificação Interna do
parágrafo.
Útil quando utilizadas Style-
Sheets.

Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLASS=“Paragrafotexto”
ALIGN=“left”
TITLE=“ParagrafoImportante”>Texto que aparece na página do documento.
</P>
Define o formato de alinhamento
do parágrafo.

Elementos e Atributos
<ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...>
...
...
</ELEMENTO>
<P ID=p1
CLASS=“Paragrafotexto”
ALIGN=“left”
TITLE=“ParagrafoImportante”>Texto que aparece na página do documento.
</P>
Cria uma etiqueta

Exemplos com atributos
Elemento de abertura com 1 atributo:
<a href=contacto.html>Contacto</a>
Elemento de abertura com 3 atributos:
<a href=contacto.html
alt=Contacto
class=nav_click>
Contacto
</a>
Elemento sem fecho com 2 atributos:
<img src=imagem1.gif alt=logo>

Exemplos com atributos
Atributo LANG
Atributo TITLE
Atributo WIDTH e HEIGHT
Atributo ALT

Exemplos com atributos
Atributo LANG
Define o idioma de um elemento ou de uma
página.
A declaração do idioma é importante para
as aplicações de acessibilidade como os
leitores de texto (conversão para voz) ou
para os motores de busca:

Exemplos com atributos
Atributo LANG
<!DOCTYPE HTML>
<html lang="pt-PT">
<head>
<meta charset=UTF-8>
<title>Untitled Document</title>
</head>
<body>
<p>Prágrafo número 1</p>
</body>
</html>

Estrutura do documento
base
html
head
body
Define o início e o fim do documento
Cabeçalho – informações sobre o documento
Contém o conteúdo do documento
Define a versão do HTMLdoctype

Indica o tipo de standard ou versão do html a cuja
conformidade o documento obedece.
<!DOCTYPE html>
html 5
1
Estrutura do documento
basedoctype

<!DOCTYPE html>
<html>
</html>
html 5
Início e fim do documento html
Designa-se por elemento raíz ou root element.
2
html
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt”>
</html>
html 5
Definir o idioma principal do documento.
Não indica a codificação de caracteres da página.
3
lang
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt-br”>
</html>
html 5
As duas primeiras letras indicam o idioma. Caso
exista um dialecto - como brasileiro - então são
utilizadas também as duas últimas letras.
4
lang
Estrutura do documento
base

4
Estrutura do documento base
<!DOCTYPE html>
<html lang=“pt”>
<head>
…
</head>
<body>
…
</body>
</html>
Um documento encontra-se dividido em duas grandes
secções o Head e o Body.
O elemento HEAD pode incluir:
•Um titulo para o documento
•Scripts de diversas linguagens
•Estilos
•Metadata
•Links para outros documentos
•Não é uma secção obrigatória

<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
</head>
</html>
html 5
Titulo do documento
“Meu documento html”
5
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
</head>
<body>
Escrever directamente sobre o documento.
</body>
</html>
Estrutura do documento
base
ver

<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
</head>
<body>
<h1>O Cabeçlho da Página</h1>
<p>O primeiro parágrafo.</p>
</body>
</html>
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt”>
<head>
<title>Meu documento html</title>
<link rel=“stylesheet” href=“estilo.css”>
</head>
</html>
Ligações para outros documentos, neste caso,
uma página externa de estilos.
(Voltamos aos estilos mais tarde !!!!)
6
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=“utf-8”>
</head>
</html>
html 5
É também no HEAD que se
inclui a codificação de
caracteres.
A definição correcta da codificação de permite a
utilização de símbolos específicos de um
determinado idioma de acordo com um
determinado layout de teclado.
7
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta name=“description” content=“Descrição do conteúdo da
página”>
<meta name=“keywords” content=“HTML, CSS, Aulas”>
<meta name=“author” content=“Vasco Salada”>
</head>
Esta codificação é considerada
metainformação e por isso utiliza
o elemento <meta>.
Metainformação é um conjunto de informações
que descrevem um determinado conjunto de
dados.
8
Estrutura do documento
base

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
</html>
html 5
Estrutura do documento
base O elemento <meta> permite também a
especificação de caracteres em português.
Pode ser feita dando ao atributo charset um dos
seguintes valores:
Latin-1
ISO-8859-1
9

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
</html>
O elemento <meta> permite também a especificação de
caracteres em português.
Pode ser feita dando ao atributo charset um dos
seguintes valores:
• Latin-1
• ISO-8859-1
html 5
Para verificar os códigos de página
para os diferentes grupos de
caracteres consulte:
http://www.terena.org/activities/multilin
g/ml-docs/iso-8859.html
Estrutura do documento
base 9

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
SECÇÔES E CONTEÙDOS

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
<header>, <footer>, <article>, <section>, <nav>, <aside>
SECÇÕES – “document sectioning elements”

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
Parágrafos
Listas
Citações (blockquotes)
Listas
Imagens
CONTEÚDOS– “Content Grouping Elements”

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
• Utilização dos <hn>
• O elemento <section>
• O elemento <article>
• O elemento <aside>
TEXTO SEMÂNTICO– “Text Level Semantics”

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
<table>
<tr>
<td>
<th>
..
DADOS EM TABELAS

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
<FORM>
..
INTRODUÇÃO DE DADOS

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
<EMBED>
<AUDIO>
<VIDEO>
..
DADOS EMBEBIDOS

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
</body>
</html>
html 5
No elemento BODY ficam todos os conteúdos
principais como texto, imagens, vídeos, etc.
Estrutura do documento
base 10
PRECISAM DE JAVASCRIPT PARA FUNCIONAR
..
ELEMENTOS INTERATIVOS

<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<p id=p1 class=”ParagrafoTexto” align=”left”
title=”Este parágrafo é importante”>
Este é o texto do parágrafo. É este texto que aparece na página do documento.
Os atributos align e title têm um efeito visível na página. Os atributos id e class são
utilizados apenas internamente.
</p>
</body>
</html>
A cada elemento está associado um conjunto de atributos. Esses atributos podem ser
utilizados para identificar o elemento e para definir critérios de formatação.
Os atributos são inseridos no tag inicial, entre o símbolo < e o símbolo >.
Esquematicamente, os atributos podem ser representados do seguinte modo:
<ELEMENTO atributos1= ... atributo2= ... atributoN= ... </ELEMENTO>

Nested Elements
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<b><i>Nested Elements</i></b>
</body>
</html>
Um elemento pode ficar contido dentro de outros elementos.
<b><i>Nested Elements</i></b>
<i><b>Nested Elements</i></b>

Comentários
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<!-- 0 elemento seguinte é um parágrafo. Este texto é um comentário -->
<P>Este é o texto do parágrafo que aparece na janela do documento.</P>
</body>
</html>
Num documento html podem ser incluídas linhas de comentário. Essas linhas têm como
objectivo fornecer informação sobre o código do documento, mas não têm qualquer efeito
em termos de formatação.
Um comentário tem um tag inicial e um tag final obrigatório. O tag incial é <!-- . O tag final é
-->
<!-- comentário html -->

Caracteres Especiais
Alguns caracteres não podem ser escritos
directamente no documento HTLM porque fazem
parte da estrutura da linguagem sobretudo:
< &lt; &#60;
> &gt; &#62;
/ &#47;

Hipertexto Links e URLs
Link - Origem de uma ligação que pode conter:
Apontador para novo recurso:
Novo Documento html ou de outro tipo.
Novo Endereço URL
Endereço de E-Mail

Hiperlink
Endereço
protocolo Localização do servidor Localização do recurso no servidor: //
http www.istec.pt Web/index.html: //
ftp www.istec.pt Web/index.html: //
mailto vsf@istec.pt Subject=assunto: ?
file computador caminho/index.html: //

Hipertexto Links e URLs
Link – Para endereço externo:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<P>
Para obter mais informações sobre este produto consulte o site da
<a href=”http://www.microsoft.com”>
Microsoft Corporation.
</a>
</P>
</body>
</html>

Hipertexto Links e URLs
Link – Para documento externo na mesma pasta:
<!DOCTYPE html>
<html lang=“pt”>
<head>
<meta charset=Latin-1>
</head>
<body>
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”http://www.microsoft.com”>
Microsoft Corporation.
</a>
</p>
<p>Aceda ao nosso
<a href=“form.htm”>formulário</a>
</p>
…

Hipertexto Links e URLsLink – Para documento externo numa pasta dentro do local de
origem- ficheiro index.html
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”http://www.microsoft.com”>
Microsoft Corporation.
</a>
</p>
<p>
Aceda ao nosso
<a href=“formularios/form1.htm”>
Formulário
Pasta x
Index
Pasta
Formulario
s
form1

Hipertexto Links e URLs
Link – Para um e-mail
<p>
Para obter mais informações sobre este produto consulte o site da
<a href=”mailto:vsf@istec.pt?subject=assuntoxpto?body=texto da msg”>
Microsoft Corporation.
</a>
</p>
<p>
Aceda ao nosso <a href=“formularios/form1.htm”>formulário</a>
VER

Base
Define o URL base do documento, a partir do qual são
formados todos os URL relativos que fazem parte do
documento.
<!DOCTYPE html>
<html>
<head>
<base href=http://abc.com/def/>
<!--Em alguns casos a referência aos url ou ficheiros pode
precisar de “”-“http://abc.com/def/”-->
</head>
<body>
<p>Para obter mais informações consulte
<a href=ghi/pagina1.html>
página1
</a>
</p>
</body>
</html>
VER

O URL definido neste exemplo é:
http://abc.com/def/ghi/pagina1.html
BASE
 Define o URL base do documento, a partir do qual são formados
todos os URL relativos que fazem parte do documento.
<!DOCTYPE html>
<html>
<head>
<base href=http://abc.com/def/>
<!--Em alguns casos a referência aos url ou
ficheiros pode precisar de “”-“http://abc.com/def/”--
>
</head>
<body>
<p>Para obter mais informações consulte
<a href=ghi/pagina1.html>
página1
</a>
</p>
</body>
</html>

html 5
3 Objectivos Principais da Especificação:
1. Definir alguns comportamentos do browser que
podem ser personalizados
2. Definir o tratamento de erros pela primeira vez em
html
3. Desenvolvimento da linguagem para facilitar a
criação de web applications - aplicações concebidas
para serem acedidas pelos utilizadores através de
uma rede intranet ou da Internet.

html 5
1. Criar uma nova página de início definindo o tipo de
documento como html 5
<!doctype html>
</html>

html 5
2. Definir o idioma da página utilizado o Atributo lang do
Elemento <html>:
<!doctype html>
<html lang=“pt”>
</html>
Indica que a página
foi escrita no
idioma português.

html 5
3. Definir a codificação de caracteres com um meta tag:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
</head>
</html>
Não indica a
codificação
de caracteres

html 5
4. Definir um título para a página:
<!doctype html>
<html lang=“pt”>
<head>
<meta charset=ISO-8859-1>
<title>Benvindo ao html</title>
</head>
</html>

Exemplos
O ELEMENTO TITLE
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Meu documento HTML</title>
</head>
<body>
</body>
</html>
st/Users/vascosalada/Documents/Aulas ISTEC/Web MM1/Exercícios/02 A Linguagem HTML/00 E

ESCREVER DIRECTAMENTE NO BROWSER
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
Escrever Directamente no browser sem elemento
</body>
</html>
EXEMPLO

PARÁGRAFOS E COMENTÁRIOS
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
<!--Estrofe 1, Canto I -->
<p>As armas e os barões assinalados,</p>
<p>Que da ocidental praia Lusitana,</p>
<p>Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
</body>
</html> VER

ATRIBUTO TITLE
Coloca um toolltip text no elemento:
<body>
<p title="E1V1">As armas e os barões assinalados,</p>
<p title="E1V2">Que da ocidental praia Lusitana,</p>
<p title="E1V13">Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
</body>
</html>
Exemplo

ATRIBUTO ALIGN
<!DOCTYPE html>
<html lang="pt">
<!-- Meramente Indicativo não indica a codificação de caracteres -->
<head>
<meta charset=ISO-8859-1>
<!-- Codificação simplificada de caracteres em Português -->
<title>Benvindo ao HTML</title>
</head>
<body>
<!--Estrofe 1, Canto I -->
<p align="justify">É pouco o que se sabe de Luís Vaz de Camões, e esse pouco é, ainda assim e na maioria dos casos,
duvidoso. (…)</p>
<p title="E1V1" align="center">As armas e os barões assinalados,</p>
<p title="E1V2" align="right">Que da ocidental praia Lusitana,</p>
<p title="E1V13" align="left">Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
Exemplo

HEADINGS
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</head>
<body>
<h1>Cabeçalho de nível 1</h1>
<h2>Cabeçalho de nível 2</h2>
<h3>Cabeçalho de nível 3</h3>
<h4>Cabeçalho de nível 4</h4>
<p>Parágrafo</p>
<h5>Cabeçalho de nível 5</h5>
<h6>Cabeçalho de nível 6</h6>
</body>
</html>
Exemplo

LINHAS HORIZONTAIS
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset=ISO-8859-1>
<title>Headings de HTML</title>
</head>
<body>
h1>Cabeçalho de nível 1</h1>
<hr>
<h2>Cabeçalho de nível 2</h2>
<hr width=50%>
<h3>Cabeçalho de nível 3</h3>
<hr size=30>
<h4>Cabeçalho de nível 4</h4>
<hr noshade>
<p>Parágrafo</p>
<hr width=50% align=right>
(…)
Exemplo

Exemplos
Bold, Itálico e Sublinhado
Quebras de linha
Exemplo com vários elementos
Texto semântico
O elemento <em>
O elemento <strong>

11/22/13
OK, mas como
é que isto funciona
no browser ?

11/22/13
1
O browser carrega o documento
que incluiu elementos de marcação
escritos em HTML e estilos escritos
em CSS

11/22/13
1
O browser carrega o documento
que incluiu elementos de marcação
escritos em HTML e estilos escritos
em CSS
À medida que o browser carrega a
página, cria um modelo interno
do documento que contém todos
os elementos de HTML
2
html
head body
title script h1 p
em

11/22/13
À medida que o browser carrega a
página, cria um modelo interno
do documento que contém todos
os elementos de HTML
2
html
head body
title script h1 p
em
3
Por cada elemento no documento
HTML, o browser cria um objecto
que o representa e coloca-o numa
estrutura do tipo árvore com todos
os outros elementos.

11/22/13
4
html
head body
title script h1 p
em
Chamamos a esta árvore hierárquica
o Document Object Model ou DOM
(Mais tarde voltamos a falar dele!!)

11/22/13
Existem algumas melhorias com a
introdução dos novos elementos da
linguagem HTML5
Os estilos da página, caso existam
são escritos na linguagem CSS3 e
transformam a forma como os
elementos de HTML são
apresentados na página.
HTML5 WEB
TECHNOLOGIES

11/22/13
Enquanto o browser está a ler a
página, está também a ler o código
JavaScript que normalmente começa
a ser executado depois do HTML ter
sido completamente carregado.

Os nomes das páginas
Regras para a definição dos nomes das páginas
HTML:
1. Usar nomes em letra minúscula
2. Separar diversas palavras com um traço:
historia-da-empresa.html
meus-filmes-favoritos.html
3. Utilizar a extensão correcta
Dependendo do webserver deve utilizar a extensão
correctamente:
.htm para linux ou unix
.html para windows

URLs
Uniform Resource Locator
O URL básico contém:
- Protocolo
- Nome do Servidor
- Caminho
- Nome do Ficheiro

Ranking de Compatibilidade com HTML5
Uniform Resource Locator
Browser Versão
Pontuação
(Máximo 450)
Google Chrome 12 343
Opera 11 286
Mozilla Firefox 8 313
Apple Safari 5 293
Internet Explorer 9 141

Exercício
Crie website baseado na sua informação pessoal
com as seguintes páginas:
Dados Biográficos
Dados Escolares
Dados Profissionais
Interesses