Aula 2 HTML

HTML
Hypertext Markup Language - Linguagem de Marcação de Hipertexto

Proposta por Tim Berners-Lee em 1980
1993 e 1995 - HTML+, HTML2.0 e HTML3.0
1997 – HTML 3.2 – código pode ser lido por diversos meios ao invés de
versões diferentes para diversos dispositivos
Versão atual – HTML5
Hipertexto
Conjuntos de elementos (nós) ligados por conexões.

...palavras, imagens, vídeos, áudio, documentos...
i c a m
:
á s s u e
a B p o s
ur e
ut q u
s tr n t o s
– E le m
e
ML o r e
p
HT st
o
s)
po
om nó
ou
C
s (
g
Ta t o s
bu
r i
At s
re
a l o
V
Tags (ou nós)
Estruturas de marcação
Definida entre
parênteses angulares
<nome> OU <nome />
Possuem marcações
de início e de fim
<nome> ... </nome>

HTML - Estrutura básica
<!DOCTYPE>
Pré-Processamento
Processamento
on-demand
HTML - Exemplo
<html> é o nó (tag) raiz, pois

todos os outros nós no
<!DOCTYPE html> documento estão contidos
<html> nele
<head>
<head> é filho de <html>
<title>DOM Tutorial</title>
</head> <title> é filho de <head>
<body>
<h1>DOM Lesson one</h1> <body> é filho de <html>
<p>Hello world!</p>
</body> <body> possui os nós <h1> e
</html> <p>
HTML - Exemplo
1 <html >
2 <head >
3 <meta http - equiv =" Content - Type " content =" text / html ; charset =UTF -8">
4 <title >Exemplo da estrutura básica de um documento HTML </ title >
5 </ head >
6 <body >
7 <p>Olá mundo !</p>
8 </ body >
9 </ html >
HTML – DOCTYPE
O DOCTYPE deve ser a primeira linha de código do documento antes

do nó (tag) HTML
O DOCTYPE indica para o navegador e para outros meios qual a

especificação de código utilizar:
<!DOCTYPE html> Não é case-sensitive
<html lang="pt-br“>
...
</html>
O DOCTYPE não é uma tag do HTML, mas uma instrução para que o
browser tenha informações sobre qual versão de código a marcação
foi escrita.
W3C = World Wide Web Consortium (Berners-Lee)
Órgão responsável pela “padronização da internet”.
 A HTML5
• Nova versão da HTML 4 e XHTML
• Semântica do código: ajuda a identificar o conteúdo a partir da
própria tag.
• Separação da estrutura do código: formatação, interação e conteúdo.
• Facilita a manipulação dos elementos HTML
• Traz novas tags, como <canvas>, <header>, <nav>, <article>,
<footer>, etc. e modifica a função de outras, com <b>, <i>
• Mais interativo, sem necessidade de plugins e perda de
performance;
• Código interoperável, ou seja, pronto para futuros dispositivos;
• Reutilização da informação.
 APIs da HTML5:
• Geolocation: busca a informações sobre a posição de

um local na Terra
• Canvas: permite ao usuário criar seus próprios
desenhos.
• Video: nos permite controlar a reprodução, criar
nossas próprias interfaces de vídeo personalizados e
integrar vídeo com o resto do HTML de maneira
totalmente nova.
• Web Storage: armazena dados, de forma persistente,
no próprio navegador.
• Drag and Drop: torna um elemento arrastável.
 Tags:
São estruturas de linguagem de marcação que consistem

em breves instruções, tendo uma marca de início e outra
de fim.
<nome> ... </nome>

Ou <nome>
 Elementos obrigatórios em um documento HTML5
<!DOCTYPE html>
<html>
<head>
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento
</body>
</html>
 Para que serve o DOCTYPE ?
• As declarações DOCTYPE são componentes-chave de páginas Web
compatíveis.
• Sua marcação e CSS não será validada a menos que seu código HTML comece
com uma declaração DOCTYPE apropriada.
• Esta deve ser sempre a primeira declaração em um documento Web.
• O Doctype não é uma tag do HTML, mas uma instrução para que o browser
tenha informações sobre qual versão de código a marcação foi escrita
 DOM
• É um padrão do W3C (World Wide Web Consortium)
• Define um padrão para acessar documentos como HTML e XML:
• "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access
and update the content, structure, and style of a document."
– O DOM do W3C é uma plataforma e interface de linguagem-neutra para acessar e atualizar dinamicamente o conteúdo, estrutura e estilo de
um documento
• É separado em 3 partes/níveis diferentes:
– Core DOM – modelo padrão para qualquer documento estruturado
– XML DOM - modelo padrão para documentos XML
– HTML DOM - modelo padrão para documentos HTML
• Define os objetos e propriedades de todos os elementos do documento e os métodos para acessá-los.
 A árvore DOM
 A árvore DOM
Nós filhos do
nó raiz <html>
 A árvore DOM
Nó filho do
nó
elemento
<head>
 A árvore DOM
Nós filhos do
nó elemento
<body>
 A árvore DOM
Nó pai dos nós

elemento <body> e
<head>
 A árvore DOM
Nó pai dos nós

Nó pai do elemento <a> e
nó <h1> e do nó
elemento atributo “href”
<title>
 Tags HTML:
<html>..</html>
Determina o início e o fim do documento html.
<head>..</head>
CABEÇALHO - Determina a região do cabeçalho do documento. As informações contidas nesta região não
serão apresentadas área do navegador reservada ao conteúdo página, com exceção do título, que aparece
no topo da janela do navegador. As demais informações, que podem ser acrescentadas, servem para fins
de documentação e de relacionamento com arquivos externos.
<title>..</title>
TÍTULO - Insere um título na página. Este título aparece no topo da janela do navegador.
<body>..</body>
CORPO - Determina a região do corpo do documento. As informações contidas nesta região correspondem ao
conteúdo que é mostrado na janela do navegador.
<p>..</p>
PARÁGRAFO - Cria um novo parágrafo, com salto de linha antes e depois.
 Tags HTML:
<h1>..</h1>
CABEÇALHO - Insere títulos/subtítulos no documento, com salto de linha antes e depois. É possível usar 6
níveis de cabeçalho em um documento (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>).
<div>..</div>
SEÇÕES - Determina o início e o fim de uma seção no documento.
<ul>..</ul>
LISTA NÃO-ORDENADA - Cria uma lista não-ordenada de elementos. Nesta lista, os marcadores não têm relação de
precedência entre si.
<ol>..</ol>
LISTA ORDENADA - Cria uma lista ordenada de elementos. Nesta lista, os marcadores apresentam uma certa relação
de precedência.
 Tags HTML:
<li>..</li>
ELEMENTO DA LISTA - Acrescenta um elemento a uma lista (não-ordenada ou ordenada).
<a>..</a>
ÂNCORA - Insere um link (âncora) para um recurso. Este recurso pode ser arquivo de: imagem, vídeo, música, planilha
eletrônica, documento texto, documento pdf, outro documento html/xhtml, página php, ou seja, todo e qualquer
recurso que possa ser endereçado na Web. O atributo href (recebe o endereço do recurso) é obrigatório.
Ex: <a href=“www.uol.com.br”> uol </a>
<img>
IMAGEM - Insere uma imagem no documento. Os atributos src (recebe o endereço da imagem) e alt (recebe um texto
alternativo para a imagem) são obrigatórios.
 Exercício:
• 1º Passo - preparar a estrutura de pastas
Você deve criar em seu computador uma pasta com o nome "site."
Dentro da pasta chamada "site", crie uma pasta chamada "imagens".
• 2º Passo - preparar a estrutura de páginas

Você deve criar, dentro da pasta "site" um arquivo em formato ".html"
• 3º Passo - DTD
Declarar o "tipo do documento" (Doctype).
 Exercício:
• 4º Passo – finalizar a estrutura do HTML
<html>
<head>
<title> O título </title>
</head>
<body>
</body>
</html>
• 5º Passo – validar seu código

Entre na página do w3C e valide sua página:
http://validator.w3.org/
• 6º Passo – Testar as tags básicas:

<h1>..</h1>
<h2>..</h2>
<h3>..</h3>
<p>..</p>
 Exercício:
• 7º Passo – Criar uma lista ordenada
<body>
<ol>
<li>... </li>
<li>... </li>
<li>... </li>
</ol>
</body>
</html>
• 8º Passo – Criar uma lista não ordenada

<ul>
<li>... </li>
<li>... </li>
<li>... </li>
</ul>
<li type="square">
 Exercício: Disc, circle, square,
decimal, uper-roman,
• 7º Passo – Criar uma lista ordenada lower-roman,uper-alpha,
e lower-alpha.
<body>
<ol>
<li>... </li>
<li>... </li>
<li>... </li>
</ol>
</body>
</html>
• 8º Passo – Criar uma lista não ordenada

<ul>
<li>... </li>
<li>... </li>
<li>... </li>
</ul>
 Imagens:
• As imagens em documentos HTML podem ser: GIF, JPG e PNG.
• Importante que seja descrito, no campo src da tag <img> o caminho até a
imagem, no nosso caso as imagens estão numa pasta chamada imagens
• No HTML5 o atributo alt é obrigatório.
<body>
<img src=“ imagens/arquivo.jpg” alt=“um texto alternativo” >
</body>
Escolha algumas imagens na web, salve em sua pasta imagens e use-as em seu documento XHTML.
Valide o código
http://validator.w3.org/
 Links:
Uma hiperligação (link) num documento XHTML é um apontador (interno ou
externo) para um recurso (ex. outro documento publicado na Web).
Um apontador especifica um endereço para um documento - pasta, diretório,
URL(endereço web) ou uma parte marcada de outro documento -.
 Cada apontador é especificado no atributo href (hypertext reference) da Tag

<a> (anchor).
 O documento que inclui a etiqueta <a> diz-se fonte do apontador e o
documento que é especificado no apontador diz-se destino do apontador.
 Links:
<body>
<a href = "http://www.mackenzie.br/"> Mackenzie </a>
<br />
<a href = "http://www.mackenzie.br/">
<img src = “mackenzie.gif" alt = “Mackenzie" >
</a>
</body>

Aula 2 HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 2 HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

Hypertext Markup Language - Linguagem de Marcação de Hipertexto

Conjuntos de elementos (nós) ligados por conexões.

<nome> OU <nome />

<nome> ... </nome>

<html> é o nó (tag) raiz, pois

O DOCTYPE deve ser a primeira linha de código do documento antes

O DOCTYPE indica para o navegador e para outros meios qual a

• Geolocation: busca a informações sobre a posição de

São estruturas de linguagem de marcação que consistem

<nome> ... </nome>

Nó pai dos nós

Nó pai dos nós

• 2º Passo - preparar a estrutura de páginas

• 5º Passo – validar seu código

• 6º Passo – Testar as tags básicas:

• 8º Passo – Criar uma lista não ordenada

• 8º Passo – Criar uma lista não ordenada

 Cada apontador é especificado no atributo href (hypertext reference) da Tag

Você também pode gostar