<!DOCTYPE html>
<html lang="pt">
<head>
<title>Meu documento HTML</title>
</head>
<body>
</body>
</html>
ESCREVER DIRETAMENTE 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>
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>
ATRIBUTO TITLE
<!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 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>
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>
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>
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>
(…)
10/27/2018
1 O browser carrega o documento que incluiu elementos de marcação escritos em HTML e estilos escritos em CSS
10/27/2018
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
10/27/2018
À 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.
10/27/2018
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!!)
10/27/2018
Existem algumas melhorias com a introdução dos novos
elementos da linguagem HTML5
Os estilos da página, caso existam são escritos na
lingaugem CSS3 e transformam a forma como os elementos de
HTML são apresentados na página.
10/27/2018
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.