O documento descreve como funcionam as aplicações web. 1) Os clientes como computadores, tablets e telefones acessam conteúdo de um servidor web através da internet. 2) Os clientes utilizam navegadores web como Chrome e Dreamweaver para acessar os conteúdos. 3) Para criar conteúdo web em HTML e CSS não é necessário entender todo o funcionamento da internet, mas algumas noções básicas são úteis.
2. 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.
3. Como Funciona uma Web
Application
Para aceder os conteúdos dos servidores ligados à
Internet estes dispositivos utilizam um Web browser.
Web browser
4. 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.
5. 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.
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/
9. 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
10. 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”
11. 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
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
16. 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
17. 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
18. 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:
19. 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.
20. 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
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 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.
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 uma página web
Todos estes componentes:
Texto
Referências a outros ficheiros
Marcadores
são criados utilizando apenas texto simples.
25. 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
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 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>
32. 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
33. 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>
34. 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>
35. 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>
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 documento html é constituído por um conjunto
de elementos, representados por uma sequência
de símbolos – TAG
39. 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
40. 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
41. 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>
42. 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 -->
43. 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”>
44. Elementos e Atributos
<ELEMENTO atributo1=valor1
atributo2=valor2...
atributon=valorn...>
...
...
</ELEMENTO>
Os elementos podem ter atributos e o seu respectivo valor
45. 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>
46. 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
48. 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.
49. 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
50. 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>
52. 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:
53. 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>
58. <!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
59. 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
63. <!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
64. <!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
65. <!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
66. <!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
67. <!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
68. <!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
69. <!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”
70. <!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”
71. <!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”
72. <!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
73. <!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
74. <!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
75. <!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
76. <!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>
77. 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>
78. 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 -->
79. Caracteres Especiais
Alguns caracteres não podem ser escritos
directamente no documento HTLM porque fazem
parte da estrutura da linguagem sobretudo:
< < <
> > >
/ /
80. 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
81. 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: //
82. 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>
83. 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>
…
84. 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
85. 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
86. 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
87. 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>
88. 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.
89. html 5
1. Criar uma nova página de início definindo o tipo de
documento como html 5
<!doctype html>
</html>
90. 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.
91. 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
92. 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>
93. 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
94. 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
95. 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
96. 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
97. 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
98. 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
99. 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
100. Exemplos
Bold, Itálico e Sublinhado
Quebras de linha
Exemplo com vários elementos
Texto semântico
O elemento <em>
O elemento <strong>
102. 11/22/13
1
O browser carrega o documento
que incluiu elementos de marcação
escritos em HTML e estilos escritos
em CSS
103. 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
104. 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.
106. 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
107. 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.
108. 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
110. 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
111. Exercício
Crie website baseado na sua informação pessoal
com as seguintes páginas:
Dados Biográficos
Dados Escolares
Dados Profissionais
Interesses