Html5 primeiros passos

HTML5 – Os primeiros passos
By;
Roberto Vinicius da Silva
Bacharel em Ciência da Computação
UNICID – Universidade da Cidade de São Paulo

 HTML é uma abreviação de Hypertext Markup Language.
Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma
linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio, etc...) na Web.

 Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o
Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força.
A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base,
compartilhando as mesmas convenções.

 Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas
práticas que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo,
assuntos como a separação da estrutura do código com a formatação e princípios de
acessibilidade foram trazidos para discussões e à atenção dos fabricantes e
desenvolvedores.
 Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4
também não facilitava a manipulação dos elementos via Javascript ou CSS. Se você
quisesse criar um sistema com a possibilidade de Drag’n Drop de elementos, era necessário
criar um grande script, com bugs e que muitas vezes não funcionavam de acordo em todos
os browsers.

Afinal, O que é o HTML5 ?
O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de
marcação que usaremos no HTML5 e no XHTML, eles também definem APIs que
formarão a base da arquitetura web. Essas APIs são conhecidas como DOM Level 0.
Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento
possibilitando o desenvolvedor a modificar as características dos objetos de forma não
intrusiva e de maneira que seja transparente para o usuário final.
 Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o
Javascript fazerem seu trabalho da melhor maneira possível. O HTML5 permite por meio
de suas APIs a manipulação das características destes elementos, de forma que o website
ou a aplicação continue leve e funcional.

Resumo
 HTML significa Hyper Text Markup Language
 HTML descreve a estrutura de uma página da Web
 HTML consiste em uma série de elementos
 Os elementos HTML informam ao navegador como exibir o conteúdo
 Elementos HTML são representados por tags

3. ESTRUTURA BÁSICA, DOCTYPE E CHARSETS
A estrutura básica do HTML5 continua sendo a mesma das versões anteriores da linguagem, há
apenas uma excessão na escrita do Doctype. Segue abaixo como a estrutura básica pode ser seguida:
<!DOCTYPE HTML>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
<title></title>
</head>
<body>
</body>

O Doctype
 O Doctype deve ser a primeira linha de código do documento antes da tag HTML.
 <!DOCTYPE html!>
 O Doctype indica para o navegador e para outros meios qual a especificação de código
utilizar.

O elemento HTML
 O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de
outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.
 <html lang=”pt-br”>
 O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal
do documento.
 Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado
em qualquer outro elemento para indicar o idioma do texto representado.
 Para encontrar a listagem de códigos das linguagens, acesse:
http://www.w3.org/International/questions/qa-choosing-language-tags.

 HEAD
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados.
Metadados são informações sobre a página e o conteúdo ali publicado.
 Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a
página está utilizando.
<meta charset=”utf-8”>
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>

 Tag LINK
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros
documentos e a tag LINK, que são links para fontes externas que serão usadas no documento.
No nosso exemplo há uma tag LINK que importa o CSS para nossa página:
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo
referente a folhas de estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel=”alternate” type=”application/atom+xml” title=”feed” href=”/feed/”>

 MODELOS DE CONTEÚDO
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos:
elementos de linha e de bloco.
 Os elementos de linha (INLINE em inglês) marcam, na sua maioria das vezes, texto.
Alguns exemplos: a, strong, em, img, input, abbr, span.
 Os elementos de blocos (INBLOCK em inglês) são como caixas, que dividem o conteúdo
nas seções do layout.

 Abaixo segue algumas premissas que você precisa relembrar e
conhecer:
• 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 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
Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características
similares. As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que haja
um melhor entendimento:
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing contente
• Embedded content
• Interactive content

 Metadata content
Os elementos que compõe a categoria Metadata são:
• base
• command
• link
• meta
• noscript
• script
• style
• title
Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu conteúdo com outros
documentos que distribuem informação por outros meios.

 Flow content
A maioria dos elementos utilizados no body e aplicações são categorizados como Flow
Content. São eles:
• a
• abbr
• address
• area (se for um decendente de um elemento de mapa)
• article
• aside
(e vários outrs)

 Sectioning content
Estes elementos definem um grupo de cabeçalhos e rodapés.
• article
• aside
• nav
• section
Basicamente são elementos que juntam grupos de textos no documento.

 Heading content
Os elementos da categoria Heading definem uma seção de cabeçalhos, que podem estar
contidos em um elemento na categoria Sectioning.
• h1
• h2
• h3
• h4
• h5
• h6
• hgroup

 Phrasing content
Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de parágrafo.
• a
• abbr
• area (se ele for descendente de um elemento de mapa)
• audio
• b
• bdo
• br
• button
• canvas
• cite
• code
• command

 Embedded content
Na categoria Embedded, há elementos que importam outra fonte de informação para o documento.
• audio
• canvas
• embed
• iframe
• img
• math
• object
• svg
• video

 Interactive content
Interactive Content são elementos que fazem parte da interação de usuário.
• 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)

 Alguns elementos no HTML podem ser ativados por um comportamento. Isso significa que
o usuário pode ativá-lo de alguma forma. O início da sequencia de eventos depende do
mecanismo de ativação e normalmente culminam em um evento de click seguido pelo
evento DOMActivate.
 O user-agent permite que o usuário ative manualmente o elemento que tem este
comportamento utilizando um teclado, mouse, comando de voz etc.

 NOVOS ELEMENTOS E ATRIBUTOS
A função do HTML é indicar que tipo de informação a página está exibindo. Quando
lemos um livro, conseguimos entender e diferenciar um título de um parágrafo. Basta
percebermos a quantidade de letra, tamanho da fonte, cor etc.
No código isso é diferente. Robôs de busca e outros user-agents não conseguem
diferenciar tais detalhes. Por isso, cabe ao desenvolvedor marcar a informação para que elas
possam ser diferenciadas por diversos dispositivos.

 Abaixo segue uma lista dos novos elementos e atributos incluídos no HTML5:
section A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou
novidades, informação de contato e chamadas para conteúdo interno.
nav O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav,
aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor
menu principal do site.
article O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de
comentários de usuários ou apenas um bloco de texto comum.
aside O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em
sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do
hgroup Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis como título com
etc.
header O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos,
campos de busca ou até mesmo logos.
footer O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não
precisa aparecer necessariamente no final de uma seção.
time Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.

 Elementos ou atributos descontinuados;
Os elementos abaixo foram descontinuados por que seus efeitos são apenas visuais:
• basefont
• big
• center
• font
• s
• strike
• tt
• u

 Os elementos abaixo foram descontinuados por que ferem os princípios de acessibilide e
usabilidade:
• frame
• frameset
• noframes
 Os elementos abaixo não foram incluídos na especificação porque não tiveram uso entre os
desenvolvedores ou porque sua função foi substituída por outro elemento:
• acronym não foi incluído porque criou um bocado de confusão entre os desenvolvedores que
preferiram utilizar a tag abbr.
• applet ficou obsoleto em favor da tag object.
• isindex foi substituído pelo uso de form controls.
• dir ficou obsoleto em favor da tag ul.

 O Slide foi criado com base em livros, e depois de muito trabalho, além de que
vale lembrar, isso é uma parte da explicação de comando novos do HTML 5, há
muitos outros.
Eu optei por não postar muitas ‘teóricas’ com HTML5, se não, ia ficar mais de 50 ou
até 100 slides, espero que tenha pegado um pouquinho, e não se esqueça de
#COMPARTILHAR #SHAREWITHFRIENDS
-*- Obrigado a todos

Html5 primeiros passos

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Html5 primeiros passos (20)

Último (10)

Html5 primeiros passos