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

00 a linguagem html

  • 1.
    NOME PROJECTO DATA CLIENTE DATA HMTLHYPERTEXT MARK-UPLANGUAGE LINGUAGEM DE FORMATAÇÃO DE DOCUMENTOS
  • 2.
    COMO FUNCIONA UMA WEBAPPLICATION 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.
  • 3.
    Como Funciona umaWeb Application Para aceder os conteúdos dos servidores ligados à Internet estes dispositivos utilizam um Web browser. Web browser
  • 4.
    Como Funciona umaWeb 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.
  • 5.
    Como Funciona umaWeb 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.
  • 6.
    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/
  • 7.
    Linguagem e Documentos HTML DocumentoHTML Index.txt Index.html
  • 8.
  • 9.
    Linguagem e Documentos HTML Depoisde guardar um ficheiro alterar a sua extensão: Index.txt Index.html Cuidado para não ficar Index.hml.txt
  • 10.
    Linguagem e Documentos HTML ALinguagem 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”
  • 11.
    Linguagem e Documentos HTML Textoem 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
  • 12.
    Linguagem e Documentos HTML •Marcadores (Tags) que aplicam formatações convencionadas a texto simples. Documento HTML HTML = HyperText Markup Language
  • 13.
    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
  • 14.
    Linguagem e Documentos HTML Referênciaao facto de o HTML ser considerado uma linguagem de programação. Documento HTML HTML = HyperText Markup Language
  • 15.
    HTML5 Web Technologies html 5Markup Language CSS 3 Style Sheets JavaScript
  • 16.
    Fases para acriaçã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
  • 17.
    A Estrutura doSite 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
  • 18.
    Mapa do Site HomePage 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:
  • 19.
    Regras para aelaboraçã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.
  • 20.
    4. Seja Pessoal Umtom 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
  • 21.
    Editores de documentos- exemplos Editores de texto Notepad Notepad ++ Editores WYSIWYG ("What You See Is What You Get“) Dreamweaver Visual Studio
  • 22.
    Componentes de umapá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.
  • 23.
    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
  • 24.
    Componentes de umapágina web Todos estes componentes: Texto Referências a outros ficheiros Marcadores são criados utilizando apenas texto simples.
  • 25.
    Componentes de umapá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
  • 26.
    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.
  • 27.
    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
  • 28.
    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
  • 29.
    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
  • 30.
    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
  • 31.
    Regras básicas Um elementoprovoca 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>
  • 32.
    Regras básicas Um elementoprovoca 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
  • 33.
    Regras básicasUm elementoprovoca 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>
  • 34.
    Regras básicas Um elementoprovoca 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>
  • 35.
    Elementos que contêm outros Numdocumento html, uma tabela é um elemento. Esse elemento pode conter outros elementos, por exemplo, as linhas da tabela. <table> <tr> <td>…. </td> </tr> </table>
  • 36.
    ELEMENTOS Uma lista numeradaé um elemento. Cada item da lista é um elemento contido no elemento que define a lista.
  • 37.
    Regras básicas Um documentohtml é constituído por um conjunto de elementos, representados por uma sequência de símbolos – TAG
  • 38.
    Regras básicas Cada TAGé sempre escrita entre o símbolo < e o símbolo >
  • 39.
    Regras básicas Grande partedas 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
  • 40.
    ELEMENTOS vs TAGS Numdocumento 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
  • 41.
    ELEMENTOS vs TAGS BLOCODE 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>
  • 42.
    Regras básicas Deve criaro 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 -->
  • 43.
    Regras básicas 3 tiposde 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”>
  • 44.
    Elementos e Atributos <ELEMENTOatributo1=valor1 atributo2=valor2... atributon=valorn...> ... ... </ELEMENTO> Os elementos podem ter atributos e o seu respectivo valor
  • 45.
    Elementos e Atributos <ELEMENTOatributo1=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>
  • 46.
    Elementos e Atributos <ELEMENTOatributo1=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
  • 47.
    <ELEMENTO atributo1=valor1 atributo2=valor2...atributon=valorn...> ... ... </ELEMENTO> <p ID=p1 CLASS=“Paragrafotexto” ALIGN=“left” TITLE=“ParágrafoImportante”>Texto que aparece na página do documento. </p> Elementos e Atributos Identificação Interna do parágrafo. Útil quando utilizadas Style- Sheets.
  • 48.
    Elementos e Atributos <ELEMENTOatributo1=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.
  • 49.
    Elementos e Atributos <ELEMENTOatributo1=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
  • 50.
    Exemplos com atributos Elementode 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>
  • 51.
    Exemplos com atributos AtributoLANG Atributo TITLE Atributo WIDTH e HEIGHT Atributo ALT
  • 52.
    Exemplos com atributos AtributoLANG 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:
  • 53.
    Exemplos com atributos AtributoLANG <!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>
  • 54.
    Estrutura do documento base html head body Defineo 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
  • 55.
    Indica o tipode standard ou versão do html a cuja conformidade o documento obedece. <!DOCTYPE html> html 5 1 Estrutura do documento basedoctype
  • 56.
    <!DOCTYPE html> <html> </html> html 5 Inícioe fim do documento html Designa-se por elemento raíz ou root element. 2 html Estrutura do documento base
  • 57.
    <!DOCTYPE html> <html lang=“pt”> </html> html5 Definir o idioma principal do documento. Não indica a codificação de caracteres da página. 3 lang Estrutura do documento base
  • 58.
    <!DOCTYPE html> <html lang=“pt-br”> </html> html5 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
  • 59.
    4 Estrutura do documentobase <!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
  • 60.
    <!DOCTYPE html> <html lang=“pt”> <head> <title>Meudocumento html</title> </head> </html> html 5 Titulo do documento “Meu documento html” 5 Estrutura do documento base
  • 61.
    <!DOCTYPE html> <html lang=“pt”> <head> <title>Meudocumento html</title> </head> <body> Escrever directamente sobre o documento. </body> </html> Estrutura do documento base ver
  • 62.
    <!DOCTYPE html> <html lang=“pt”> <head> <title>Meudocumento html</title> </head> <body> <h1>O Cabeçlho da Página</h1> <p>O primeiro parágrafo.</p> </body> </html> Estrutura do documento base
  • 63.
    <!DOCTYPE html> <html lang=“pt”> <head> <title>Meudocumento 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
  • 64.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=“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
  • 65.
    <!DOCTYPE html> <html lang=“pt”> <head> <metaname=“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
  • 66.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 67.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 68.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 69.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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”
  • 70.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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”
  • 71.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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”
  • 72.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 73.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 74.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 75.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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
  • 76.
    <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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>
  • 77.
    Nested Elements <!DOCTYPE html> <htmllang=“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>
  • 78.
    Comentários <!DOCTYPE html> <html lang=“pt”> <head> <metacharset=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 -->
  • 79.
    Caracteres Especiais Alguns caracteresnão podem ser escritos directamente no documento HTLM porque fazem parte da estrutura da linguagem sobretudo: < &lt; &#60; > &gt; &#62; / &#47;
  • 80.
    Hipertexto Links eURLs 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
  • 81.
    Hiperlink Endereço protocolo Localização doservidor 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: //
  • 82.
    Hipertexto Links eURLs 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>
  • 83.
    Hipertexto Links eURLs 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> …
  • 84.
    Hipertexto Links eURLsLink – 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
  • 85.
    Hipertexto Links eURLs 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
  • 86.
    Base Define o URLbase 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
  • 87.
    O URL definidoneste 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>
  • 88.
    html 5 3 ObjectivosPrincipais 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.
  • 89.
    html 5 1. Criaruma nova página de início definindo o tipo de documento como html 5 <!doctype html> </html>
  • 90.
    html 5 2. Definiro 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.
  • 91.
    html 5 3. Definira 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
  • 92.
    html 5 4. Definirum título para a página: <!doctype html> <html lang=“pt”> <head> <meta charset=ISO-8859-1> <title>Benvindo ao html</title> </head> </html>
  • 93.
    Exemplos O ELEMENTO TITLE <!DOCTYPEhtml> <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
  • 94.
    ESCREVER DIRECTAMENTE NOBROWSER <!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
  • 95.
    PARÁGRAFOS E COMENTÁRIOS <!DOCTYPEhtml> <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
  • 96.
    ATRIBUTO TITLE Coloca umtoolltip 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
  • 97.
    ATRIBUTO ALIGN <!DOCTYPE html> <htmllang="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
  • 98.
    HEADINGS <!DOCTYPE html> <html lang="pt"> <head> <metacharset=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
  • 99.
    LINHAS HORIZONTAIS <!DOCTYPE html> <htmllang="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
  • 100.
    Exemplos Bold, Itálico eSublinhado Quebras de linha Exemplo com vários elementos Texto semântico O elemento <em> O elemento <strong>
  • 101.
    11/22/13 OK, mas como éque isto funciona no browser ?
  • 102.
    11/22/13 1 O browser carregao documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS
  • 103.
    11/22/13 1 O browser carregao 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
  • 104.
    11/22/13 À medida queo 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.
  • 105.
    11/22/13 4 html head body title scripth1 p em Chamamos a esta árvore hierárquica o Document Object Model ou DOM (Mais tarde voltamos a falar dele!!)
  • 106.
    11/22/13 Existem algumas melhoriascom 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
  • 107.
    11/22/13 Enquanto o browserestá 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.
  • 108.
    Os nomes daspá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
  • 109.
    URLs Uniform Resource Locator OURL básico contém: - Protocolo - Nome do Servidor - Caminho - Nome do Ficheiro
  • 110.
    Ranking de Compatibilidadecom 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
  • 111.
    Exercício Crie website baseadona sua informação pessoal com as seguintes páginas: Dados Biográficos Dados Escolares Dados Profissionais Interesses

Notas do Editor