HTML5

HTML é o Hipertexto, são conjuntos de elemento em uma linguagem para publicação de conteúdo, como texto, imagem, vídeo e áudio na Web.

Objetivo

O HTML - define a estrutura,
o CSS - os estilos,
o JavaScript - os comportamentos.

Histórico

1990 - Marc Andreessen desenvolveu o o Mosaic - browser;
Tim Berners-Lee desenvolveu o HTML para organizar o conteúdo em páginas.
Entre 1993 e 1995 - versões HTML+, HTML2.0 e HTML3.0 com diversas mudanças para enriquecer as possibilidades da linguagem;
1997 - o grupo de trabalho do W3 responsável por manter o padrão do código ¹;
2004 - desenvolvedores de empresas como Mozilla, Apple e Opera que formaram o grupo WHATWG ² para desenvolver o HTML5 e o Web Controls 1.0;
2006 - passou a ser reconhecido como W3C que trabalhou no HTML5 e no XHTML 2.
2009 - descontinuação do XHTML 2 em favor do HTML5.

Roteiro

Introdução a linguagem de marcação HTML
Um pouco sobre internet e a Web
História do HTML
A Linguagem HTML
1. O que é e como funciona a linguagem HTML
2. Estrutura do documento HTML
3. Semântica, TAGs e atributos
4. Cabeçalho, Parágrafos e quebras de linha
  1. Cabeçalho
  2. Parágrafos
  3. Quebra de linha
  4. Linhas horizontais
5. Formatação de Texto
  1. Negrito, itálico, sublinhado e tachado
  2. Texto pré - formatado
  3. Símbolos especiais
6. Imagem
  1. O marcador IMG
  2. Atributos
7. Listas
  1. Ordenadas
  2. Não Ordenadas
  3. De Definição
8. Links
  1. URL
  2. Âncora
  3. Navegação
  4. Download
9. Agrupamentos de elementos
  1. Agrupamento/destaque em linha (span)
  2. Agrupamento de elementos (div)
10. Tabelas e suas importância 1. O que são, sua importância e seu uso 2. Table 3. Linha e Coluna
11. Formulários 1. O que são, para que serve e exemplos 2. Form 3. Entrada de dados 4. Atributos únicos e comuns entre tags 5. Seleções 6. Caixas de Marcação 7. Botões
Linguagem de marcação HTML5
1. Diferença entre HTML e HTML5
2. Versões e Principais Diferenças - Evoluções 1 Vantagens da Linguagem HTML
Introdução ao HTML5 e Semântica
1. Importância das TAGS e de sua Web Semântica
2. Header
3. Nav
4. Main
5. Aside
6. Article
7. Section
8. Footer
Novos Elementos para Formatação de Texto HTML5
1. Importante
2. Destaque
3. Menor
4. Marcado
5. Excluído
6. Inserido
7. subscrito e sobrescrito
Estruturação de tabelas HTML5
1. Cabeçalho, corpo e rodapé
2. Atributos e Acessibilidade
3. Colunas de grupo
Conteúdo HTML5
1. Áudio
2. Vídeo
3. Figuras
Novos tipos de campos HTML5
1. Campo Email
2. Campos Search
3. Campo Number
4. Campo Tel
5. Campos URL
6. Campo File
7. Campos de data, hora, mês

Estrutura básica

  
<!DOCTYPE html>
<html lang="pt-br">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>

<img src="img_la.jpg" alt="LA" style="width:100%">

<div class="">
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

</body>
</html>

Esqueleto HTML

Elementos

Os elementos que compões as páginas HTML seguem regras de definição de linha ou bloco.

Elementos de linha

Marcam principalmente elementos de texto, por exemplo: a, strong, em, img, input, abbr, span.

Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label;
Os elementos de linha nunca podem conter elementos de bloco.

Elementos de bloco

Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout.

Elementos de bloco sempre podem conter elementos de linha.
Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível.

Categorias de Elementos

Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de conteúdo o elemento trabalha e como pode ser seu comportamento.

Metadata

Os metadados em HTML 5 são especificados dentro da tag <head> do documento HTML e geralmente incluem informações sobre o título da página, descrição, autor, palavras-chave e codificação do documento. Os metadados podem ser definidos usando as tags <title>, <meta>, <link>, <style> e <script>, entre outras. Por exemplo, a tag <meta> pode ser usada para especificar a descrição da página, como no seguinte exemplo:

  
<head>
  <title>Exemplo de página</title>
  <meta name="description" content="Esta é uma página de exemplo para demonstrar metadados em HTML 5.">
</head>

identificam o documento e seu conteúdo, formado por:
- base
- command
- link
- meta
- noscript
- script
- style
- title

Flow

Os elementos de fluxo em HTML 5 são elementos que definem o conteúdo principal de uma página e que são renderizados em ordem sequencial. Alguns exemplos de elementos de fluxo incluem:

<p>: define um parágrafo de texto
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: definem os títulos de seção, em ordem decrescente de importância
<ul> e <ol>: definem listas não-ordenadas e ordenadas, respectivamente
<li>: define um item de lista em <ul> ou <ol>
<div>: define uma seção genérica de conteúdo
<span>: define uma pequena seção de conteúdo, geralmente dentro de um parágrafo ou outra tag de texto
<a>: define um link para outra página ou recurso
<img>: define uma imagem para ser exibida na página

Esses elementos são chamados de “elementos de fluxo” porque eles são renderizados como uma sequência de blocos em linha. Outros elementos, como <header>, <footer>, <aside>, <nav> e <section>, são considerados “elementos de seção” e podem conter outros elementos de fluxo e de seção.

elementos de fluxo utilizado no body:
- a
- abbr
- address
- area (se for um decendente de um elemento de mapa)
- article
- aside
- audio
- b
- bdo
- blockquote
- br
- button
- canvas
- cite
- code
- command
- datalist
- del
- details
- dfn
- div
- dl
- em
- embed
- fieldset
- figure
- footer
- form
- h1, h2, h3, h4, h5, h6, hgroup
- header
- hr
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- link (Se o atributo itemprop for utilizado)
- map
- mark
- math
- menu
- meta (Se o atributo itemprop for utilizado)
- meter
- nav
- noscript
- object
- ol
- output
- p
- pre
- progress
- q
- ruby
- samp
- script
- section
- select
- small
- span
- strong
- style (Se o atributo scoped for utilizado)
- sub
- sup
- svg
- table
- textarea
- time
- ul
- var
- video
- wbr
- Text

Sectioning

Os elementos de seção em HTML 5 são elementos que definem seções de conteúdo em uma página. Eles ajudam a estruturar o conteúdo da página em partes lógicas e significativas, permitindo que o navegador e outros dispositivos de acessibilidade entendam melhor o conteúdo e apresentem-no de forma mais adequada. Alguns exemplos de elementos de seção incluem:

<article>: define um artigo ou postagem de blog
<section>: define uma seção genérica de conteúdo
<nav>: define uma seção de navegação
<aside>: define um conteúdo lateral relacionado ao conteúdo principal da página
<header>: define o cabeçalho da página ou de uma seção específica
<footer>: define o rodapé da página ou de uma seção específica
<main>: define o conteúdo principal da página

Nota: Esses elementos podem ser usados em conjunto com elementos de fluxo para criar uma estrutura de página bem definida e semântica. Além disso, eles podem ser aninhados uns dentro dos outros para criar uma estrutura de conteúdo ainda mais complexa.

Heading

definem a seção de títulos de cabeçalho
- h1, h2, h3, h4, h5, h6, hgroup

Phrasing

marcam o texto
- a
- abbr
- area (se ele for descendente de um elemento de mapa)
- audio
- b
- bdo
- br
- button
- canvas
- cite
- code
- command
- datalist
- del (se ele contiver um elemento da categoria de Phrasing)
- dfn
- em
- embed
- i
- iframe
- img
- input
- ins (se ele contiver um elemento da categoria de Phrasing)
- kbd
- keygen
- label
- link (se o atributo itemprop for utilizado)
- map (se apenas ele contiver um elemento da categoria de Phrasing)
- mark
- math
- meta (se o atributo
- itemprop
- for utilizado)
- meter
- noscript
- object
- output
- progress
- q
- ruby
- samp
- script
- select
- small
- span
- strong
- sub
- sup
- svg
- textarea
- time
- var
- video
- wbr
- Text

Embedded

importam outra fonte de informação
- audio
- canvas
- embed
- iframe
- img
- math
- object
- svg
- video

Interactive

interagem com o usuário, geralmente em formulários
- a
- audio (se o atributo control for utilizado)
- button
- details
- embed
- iframe
- img (se o atributo usemap for utilizado)
- input (se o atributo type não tiver o valor hidden)
- keygen
- label
- menu (se o atributo type tiver o valor toolbar)
- object (se o atributo usemap for utilizado)
- select
- textarea
- video (se o atributo control for utilizado)

Novos atributos do HTML5

section - seção de bloco de elementos;
article - bloco de postagem de blog, artigo, comentários, ou de texto;
aside - coluna lateral contendo o menu nav ou publicidade;
- nav - contém um menu de links;
- hgroup - grupo de titulos;
footer - rodapé da página