Curso de HTML5 - Aula 01

Conteúdo do Curso
 Introdução
 Estrutura HTML5
 Novos Elementos Semânticos
 Formatação
 Formulários
 Elemento Canvas
 Players de áudio e vídeo
 Vínculos (links) e microdata
 Listas
 Tabelas
 Tableless
 Introdução ao CSS3
 Montagem de Layout

Introdução
Noções básicas sobre desenvolvimento para ambientes Web

Como funciona a WEB
A World Wide Web é uma grande rede de computadores interligados e capazes de
compartilhar informações e recursos. Para disponibilizar de modo mais acessível são
criadas páginas de hypertexto para que o usuário possa interagir com estas informações.
Hipertexto são conjuntos de elementos ou nós ligados por conexões. Estes
elementos podem ser palavras, imagens, vídeos, áudio, documentos dentre outros.
Segundo a World Wide Web Consortium (W3C) a Web é baseada em 3 pilares:
 Esquema de nomes para localização (URL)
 Protocolo de acesso (HTTP)
 Linguagem de Hypertexto (HTML)

Linguagens WEB
Quem está acostumado com programação voltada para desktop, geralmente
trabalha com uma única linguagem. Se você esta fazendo um programa em Java, Visual
Basic, C# ou Delphi usa a mesma linguagem para a interface quanto para o
funcionamento do programa.
Quando trabalhamos na criação de projetos voltados para ambientes web temos
uma mudança de paradigma. Trabalhamos com mais de uma linguagem onde cada uma
tem um papel a cumprir. Por exemplo o HTML estrutura o seu documento enquanto o
CSS é responsável pela formatação ou seja a aparência de uma página da internet.

Linguagens WEB
Existem diversas linguagens mas vamos citar abaixo as mais usadas hoje.
 HTML (atualmente na versão 5)
Estrutura e organização do documento
 CSS (atualmente na versão 3)
Formatação e aparência do documento
 Javascript (atualmente na versão 3)
Responsável pela programação de toda funcionalidade que é executada no navegador por esta razão chamada de
client-side ou seja executa do lado do cliente. Permite validar formulários, criar banners, slideshow e processar
dados.
 PHP (atualmente na versão 5)
Responsável pela programação de toda funcionalidade que é executada no servidor por esta razão chamada de
server-side ou seja executa do lado do servidor. Permite validar formulários, manipular banco de dados, e processar dados.

O que é o HTML
HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação
de Hypertexto, e é de acordo com a World Wide Web Consortium (W3C), é uma
linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
Segundo Lee (1994), dentre as linguagens de marcação, ainda é a mais
utilizada na Internet, mesmo que muitos a considerem simples e limitada. Sua
utilização está voltada tanto para a estruturação de documentos quanto na
apresentação visual destes documentos em um navegador.

O que é o HTML
Embora simples, ela pode representar documentos na Internet da mesma
forma que as linguagens mais complexas. Ainda que existam formas de representação
mais evoluídas, não se usando apenas tags predefinidas a HTML continua sendo
utilizada em larga escala.

Estrutura do HTML
A estrutura básica do HTML é relativamente simples. Utiliza-se marcadores
chamados de tag’s. Cada tag é representada da seguinte forma:
<html> - Tag de abertura
</html> - Tag de fechamento
A maioria das tags é aberta e fechada como mostrado acima, com o conteúdo entre
as duas. Para aqueles que já utilizavam HTML4 é importante ressaltar que houveram
algumas mudanças na estrutura básica. Seguem os exemplos do código nas versões 4 e
5 para comparar.

Estrutura do Documento HTML 4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Título do Documento</title>
</head>
<body>
Corpo do Documento
</body>
</html>

Estrutura do Documento HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo da Página</title>
</head>
<body>
Corpo da Página
</body>
</html>

Vamos começar entendendo as tag’s presentes no exemplo.
<!doctype html> Indica que se trata de um documento do tipo HTML
ressaltando que se trata da versão 5. Deve ser a primeira tag do código
antes mesmo da tag <html>.
<html> Indica que todo seu conteúdo deve ser tratado como um código
HTML.
<head> Indica o cabeçalho do documento HTML onde muito de seu
conteúdo não é visível ao usuário. Nesta parte ficam os metadados que são
informações sobre a página e o conteúdo ali publicado.

Modelos de conteúdo
O HTML possui algumas regras básicas sobra a organização de elementos desde as primeiras
versões. Elas fazem referências às duas categorias: elementos de linhas e de bloco. Estas
regras definem onde os elementos podem ou não estar. Se eles podem ser filhos ou pais de
outros elementos e quais os seus comportamentos.
Isto é muito importante para a organização mas também influenciará a formatação no CSS.
Vamos ver algumas premissas simples:
1. Elementos de linha podem conter outros elementos de linha
2. Elementos de linha nunca podem conter elementos de bloco.
3. Elementos de bloco sempre podem conter elementos de linha.
4. 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 dos Elementos
Os elementos HTML são divididos em algumas categorias de acordo com suas similaridades.
 Metadata content
 Flow content
 Sectioning content
 Heading content
 Phrasing content
 Embedded content
 Interactive content
As listas que serão mostradas a seguir, estão organizadas de acordo as informações da W3C.

Metadata Content
Os elementos desta categoria 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.
base
command
link
meta
noscript
script
style
title

Flow Content
A maioria dos elementos utilizados no body e aplicações são categorizados como
Flow Content. Existem alguma exceções em que elementos de outra categoria passa a
ser considerados Flow Content. Veja a lista abaixo:
 area (se for um descendente de um elemento de mapa
 style (Se o atributo scopedfor utilizado)
 link (Se o atributo itempropfor utilizado)
 meta (Se o atributo itempropfor utilizado)
Basicamente elementos que seu modelo de conteúdo permitem inserir qualquer
elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de
texto ou um elemento descendente que faça parte da categoria embedded.

Flow Content
a
abbr
address
area
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
header
hgroup
hr
i
iframe
img
input
Ins
Kbd
keygen
label

Flow Content
Link
map
mark
math
Menu
Meta
meter
nav
noscript
object
o
output
p
pre
progress
q
ruby
samp
script
section
select
small
span
strong
sub
sup
svg
table
textarea
time
ul
var
video
wbr
Text

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

Heading content
Estes elementos 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.
Existem alguns elementos que só se enquandram nestas categorias em condições
especiais.
 area (se ele for descendente de um elemento de mapa)
 del (se ele contiver um elemento da categoria de Phrasing)
 ins (se ele contiver um elemento da categoria de Phrasing)
 link (se o atributo itempropfor utilizado)
 map (se apenas ele contiver um elemento da categoria de Phrasing)
 meta (se o atributo itempropfor utilizado)

Phrasing Content
a
abbr
audio
b
bdo
br
button
canvas
cite
code
command
datalist
dfn
em
embed
i
iframe
img
input
kbd
keygen
Label
mark
Math
meter
noscript
object
output
progress
q
ruby
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
var
video
wbr
Text

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

Embedded content
Os elementos desta classe fazem parte da
interação de usuário. 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 pode ser um evento de
teclado, mouse, comando de voz dentre outros
dependendo do user-agente, que permite que o
usuário ative manualmente.
São eles:
 a
 audio (se o atributo controlfor utilizado)
 button
 details
 Embed
 frame
 img (se o atributo usemapfor utilizado)
 input (se o atributo type não tiver o valor hidden)
 keygen
 label
 menu (se o atributo typetiver o valor toolbar)
 object (se o atributo usemapfor utilizado)
 select
 textarea
 video (se o atributo controlfor utilizado)

Elementos Semânticos
Novidades do HTML5

Uma das novidades do HTML5 é que agora temos novas tags que funcionam como
elementos semânticos. Isto além de organizar o código permite que os buscadores como
o Google possa ler o conteúdo de uma página com mais eficiência.
As versões anteriores do HTML não continham um padrão para a criação de seções
comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Frequentemente era
necessário usar uma tag <div> para cada elemento onde trabalhávamos com ID e
classes para identificá-los. Também não havia um padrão de nomenclatura de IDs,
classes ou tags. Veja o exemplo em HTML 4.

<!doctype html>
<html>
<head>
</head>
<body>
<div id=“header”>
Cabeçalho
<div id=“navbar”> Menu </div>
</div> 
<div id=“content”> Conteúdo </div> 
<div id=“sidebar”> Barra lateral </div> 
<div id=“footer”> Roda Pé </div> 
</body>
</html>
Exemplo de Estrutura utilizando apenas
A tag <div>.

O HTML5 modifica a forma de como escrevemos código e organizamos a informação
na página. Organizada com novas tags de forma mais semântica com menos código.
Deste modo conseguimos mais interatividade sem a necessidade de instalação de
plugin’s o que pode levar a perda de performance.
Ainda sim podemos ter problemas de compatibilidade de código que podem ocorrer
com mais frequência o que depende dos fabricantes dos navegadores. Por exemplo, um
navegador pode adotar bordas arredondadas e outro não.

Estas são algumas das novas tags:
<article> Define uma artigo ou conteúdo de texto
<aside> Esta tag demarca a área para uma barra lateral
<header> Define um cabeçalho de conteúdo
<nav> Marca uma barra de navegação seja ela principal ou secundária.
<section> Define uma nova seção genérica no documento
<hgroup> Este elemento consiste em um grupo de títulos.
<footer> Define um rodapé de conteúdo
<time> Marca parte do texto que exibe um horário ou uma data

Elementos Semânticos – Exemplo 1
Esta é a organização do
código do exemplo 1, que
você verá no próximo slide.

<!doctype html>
<html>
<head>
</head>
<body>
<header> Cabeçalho </header>
<nav> Menu </nav>
<article> Conteúdo </article>
<aside> Barra lateral </aside>
<footer> Roda Pé </footer>
</body>
</html>
Agora observe o exemplo utilizando as novas tags e
observe como ficou mais limpo e organizado.
Podemos ainda dizer que está semanticamente correto.

<!doctype html>
<html>
<head>
<title> Titulo da Página </title>
</head>
<body>
<header>
Cabeçalho
<nav> Menu </nav>
</header>
<hgroup>
<h1> Título 1 </h1>
<h2> Título 2 </h2>
</hgroup>
<section> Secção 1 </section>
<section> Secção 2 </section>
<footer> Roda Pé </footer>
</body>
</html>
Observe este outro exemplo onde trabalhamos com a tag
section para dividir secções de conteúdo.
Também utilizamos a tag hgroup para organizar os
grupos de cabeçalhos , onde haverão títulos e subtítulos.

Elementos Modificados
<b> Passa a ter o mesmo nível semântico que um SPAN, mas ainda mantém o estilo de
negrito no texto.
<i> também passa a ser um SPAN. O texto continua sendo itálico e para usuários de
leitores de tela, a voz utilizada é modificada para indicar ênfase.
<a> Quandi estiver sem o atributo href representa um placeholder no lugar que este
link se encontra.
<address> Agora é tratado como uma seção no documento.
<hr> agora tem o mesmo nível que um parágrafo, mas é utilizado para quebrar linhas e fazer
separações.
<strong> Ganhou mais importância.
<head> não aceita mais elementos child como seu filho.

Professor
Formado Técnico em Informática pela Universidade Federal de Viçosa Campus
Florestal/MG, Graduado em Sistemas de Informação pela Faculdade Pitágoras Campus
Divinópolis/MG.
Profissional certificado pela Microsoft nos exames Microsoft Office Specialist
(MOS) de Word 2010, Powerpoint 2010 e Excel 2010 além de aprovado em diversos
cursos da Microsoft Virtual Academy (MVA) dentre eles: PowerShell 3.0, HTML5 -
Homologado pelo W3C e SQL Server para DBAs Oracle.
Trabalha como designer gráfico e webmaster desde 2007, tendo feito diversos
trabalhos de criação de identidade visual contendo elementos como logos, cartões de
visitas, banners, sites dinâmicos e outros.

Professor
Atuou como Instrutor na People - Informática e Idiomas, da cidade de Divinópolis
em Minas Gerais, de 2011 até 2015, onde ministrou cursos de diversos assuntos como
Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Adobe Dreamweaver, HTML, CSS,
Flash, Actionscript, Windows 7, Windows 8, Office 2010, Excel Avançado e Excel com
VBA.
Também criador e responsável pelo conteúdo e manutenção dos blog’s cujo os
endereços estão listados abaixo, onde procura compartilhar parte do conhecimento com
outros profissionais e estudantes de design e programação.
 rabiscandonophotoshop.blogspot.com.br
 worldwildwebdesign.blogspot.com.br

CONTATOS
 Skype: leo.diaz1985
 Twitter: wilborn7
 Facebook: www.facebook.com/wilborn7

Curso de HTML5 - Aula 01

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Curso de HTML5 - Aula 01 (20)

Último (7)

Curso de HTML5 - Aula 01