HTML 5

• HTML significa Hyper Text Markup Language

• HTML é a linguagem de marcação padrão para a criação de páginas da web

• HTML descreve a estrutura de uma página da web

Introdução • HTML consiste em uma série de elementos

• Os elementos HTML informam ao navegador como exibir o conteúdo

• Os elementos HTML identificam partes de conteúdo como "isto é um

título", "isto é um parágrafo", "isto é um link", etc.
 Tag

Um elemento HTML é definido por uma tag inicial, algum

conteúdo e uma tag final:

Tag Exemplo
 • Todos os elementos HTML podem ter atributos

• Os atributos fornecem informações adicionais sobre os elementos

Atributo
• Os atributos são sempre especificados na tag inicial

• Os atributos geralmente vêm em pares nome / valor como: nome

= "valor"
Estrutura de uma
Página HTML
Estrutura de
uma página
HTML
Estrutura de
uma página
HTML
A declaração <! DOCTYPE html> define que este documento é
um documento HTML5
Elementos
Cabeçalho
Paragráfo
 Régua
Horizontal
Quebra de
linha
<pre>
Formatação
de texto
Formatação
de texto
Elementos de
Citação
Elementos de
Citação
Elementos de
Citação
 Sintaxe

Exemplo

Link
 Atributo target

Link
 Sintaxe

Exemplo
Imagem
 Resultado

Imagem
Video
Audio
 Sintaxe

Exemplo

Iframe
Tabela
Lista
Lista
Lista
Lista
Emoji
Emoji
Formulário
 <Form>
<input>

Formulário
Formulário
Formulário
Formulário
 HTML Form Attributes

Formulário
 GET

Acrescenta os dados do formulário ao URL, em pares nome / valor NUNCA use

GET para enviar dados confidenciais! (os dados do formulário enviado são visíveis
no URL!)

O comprimento de um URL é limitado (2.048 caracteres)

Útil para envios de formulários onde um usuário deseja marcar o resultado

Formulário GET é bom para dados não seguros, como strings de consulta no Google

POST
Acrescenta os dados do formulário dentro do corpo da solicitação HTTP (os
dados do formulário enviado não são mostrados no URL)

O POST não tem limitações de tamanho e pode ser usado para enviar grandes
quantidades de dados.

Os envios de formulários com POST não podem ser marcados

 Bloco HTML e
elementos embutidos
 Um elemento de nível de bloco sempre começa em
uma nova linha.

Elementos de nível Um elemento de nível de bloco sempre ocupa toda a

de bloco largura disponível (se estende para a esquerda e para a
direita, tanto quanto pode).

Um elemento de nível de bloco tem uma margem

superior e uma inferior, enquanto um elemento
embutido não.
Elementos de nível
de bloco
 Um elemento embutido não começa em uma nova
linha.
Elementos
Inline Um elemento embutido ocupa apenas a largura
necessária.
Elementos Inline
Estrutura do html 5
Estrutura do
HTML 5
<header> - Define um cabeçalho para um documento ou seção
<nav> - Define um conjunto de links de navegação
<seção> - Define uma seção em um documento
<artigo> - Define um conteúdo independente e autocontido
<aside> - Define o conteúdo além do conteúdo (como uma barra lateral)
<footer> - Define um rodapé para um documento ou seção
<detalhes> - Define detalhes adicionais que o usuário pode abrir e fechar sob demanda
<summary> - Define um título para o elemento <details>
Estrutura do
HTML 5
Estrutura do
HTML 5
HEAD
HEAD
HEAD
HEAD
Class & Id
Class
Class
Id
Id