SlideShare uma empresa Scribd logo
1 de 41
Baixar para ler offline
Aula 1
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 HTML5
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.
Estrutura do Documento HTML5
<meta charset="utf-8"> Existem mais de uma tag meta. São
chamadas de metatags e são responsáveis por passar informações de
configuração. A propriedade charset informa a tabela de caracteres. No
nosso caso passamos o valor utf-8, que representa o padrão europeu já
que nosso idioma tem acentos e outros caracteres especiais de origem
europeia.
<title> Esta tag guarda o titulo do documento geralmente exibido na
guia do navegador.
<body> Tudo que está dentro desta tag faz parte do corpo do
documento e será exibido na tela.
Estrutura do Documento HTML5
Conhecendo as Tags
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
Elementos Semânticos
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.
Elementos Semânticos
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo da Página</title>
</head>
<body>
<div id=“header”>
Cabeçalho
<div id=“navbar”> Menu </div><!-- FIM DE NAVBAR -->
</div> <!-- FIM DE HEADER -->
<div id=“content”> Conteúdo </div> <!-- FIM DE CONTENT -->
<div id=“sidebar”> Barra lateral </div> <!-- FIM DE SIDEBAR -->
<div id=“footer”> Roda Pé </div> <!-- FIM DE FOOTER -->
</body>
</html>
Exemplo de Estrutura utilizando apenas
A tag <div>.
Elementos Semânticos
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.
Elementos Semânticos
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.
Elementos Semânticos – Exemplo 1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo da Página</title>
</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.
Elementos Semânticos – Exemplo 2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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
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.
Apresentação
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

Mais conteúdo relacionado

Mais procurados

Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)Kaoru Hatake
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScriptThiago Poiani
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAndré Constantino da Silva
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoJessyka Lage
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 

Mais procurados (20)

Html
HtmlHtml
Html
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Curso javascript básico
Curso javascript básicoCurso javascript básico
Curso javascript básico
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Seletores css
Seletores cssSeletores css
Seletores css
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 

Destaque

Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016 Léo Dias
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBPeslPinguim
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)Devmedia
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNRenato Melo
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)Gustavo Zimmermann
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Apresentacao tic profissionais
Apresentacao tic profissionaisApresentacao tic profissionais
Apresentacao tic profissionaisVanda Pereira
 
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...escolaprofissionalsm
 

Destaque (20)

Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Html5 aula 01
Html5 aula 01Html5 aula 01
Html5 aula 01
 
Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
 
HTML5 - Homologado pelo W3C
HTML5 - Homologado pelo W3CHTML5 - Homologado pelo W3C
HTML5 - Homologado pelo W3C
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
The Appy Hour
The Appy HourThe Appy Hour
The Appy Hour
 
Instalar windows server 2012 numa máquina virtual
Instalar windows server 2012 numa máquina virtualInstalar windows server 2012 numa máquina virtual
Instalar windows server 2012 numa máquina virtual
 
What if ?
What if ?What if ?
What if ?
 
Html básico
Html básicoHtml básico
Html básico
 
Apresentacao tic profissionais
Apresentacao tic profissionaisApresentacao tic profissionais
Apresentacao tic profissionais
 
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
Tecnologias da Informação e Comunicação - Módulo 2 – As bases de dados – Micr...
 
Html estrutura basica
Html estrutura basicaHtml estrutura basica
Html estrutura basica
 
Html básico 2 imagens
Html básico 2   imagensHtml básico 2   imagens
Html básico 2 imagens
 

Semelhante a Curso de HTML5 - Aula 01

Semelhante a Curso de HTML5 - Aula 01 (20)

Sobre o HTML
Sobre o HTMLSobre o HTML
Sobre o HTML
 
Html5 primeiros passos
Html5 primeiros passosHtml5 primeiros passos
Html5 primeiros passos
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
HTML5
HTML5HTML5
HTML5
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Aula1web html
Aula1web htmlAula1web html
Aula1web html
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Apostila html
Apostila htmlApostila html
Apostila html
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 
Desenvolvimento Web Parte II
Desenvolvimento Web Parte IIDesenvolvimento Web Parte II
Desenvolvimento Web Parte II
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
Html completo
Html completoHtml completo
Html completo
 
Apresentacao html css
Apresentacao html cssApresentacao html css
Apresentacao html css
 

Último

ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx2m Assessoria
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx2m Assessoria
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASMarcio Venturelli
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfInocencioHoracio3
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPaulo Pagliusi, PhD, CISM
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoMarcio Venturelli
 

Último (8)

ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 

Curso de HTML5 - Aula 01

  • 2. 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
  • 3. Introdução Noções básicas sobre desenvolvimento para ambientes Web
  • 4. 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)
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 10. 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.
  • 11. 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>
  • 12. 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>
  • 13. 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. Estrutura do Documento HTML5
  • 14. <meta charset="utf-8"> Existem mais de uma tag meta. São chamadas de metatags e são responsáveis por passar informações de configuração. A propriedade charset informa a tabela de caracteres. No nosso caso passamos o valor utf-8, que representa o padrão europeu já que nosso idioma tem acentos e outros caracteres especiais de origem europeia. <title> Esta tag guarda o titulo do documento geralmente exibido na guia do navegador. <body> Tudo que está dentro desta tag faz parte do corpo do documento e será exibido na tela. Estrutura do Documento HTML5
  • 16. 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
  • 17. 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.
  • 18. 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
  • 19. 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.
  • 22. 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
  • 23. 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
  • 24. 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)
  • 26. 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
  • 27. 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)
  • 29. Elementos Semânticos 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.
  • 30. Elementos Semânticos <!doctype html> <html> <head> <meta charset="utf-8"> <title>Titulo da Página</title> </head> <body> <div id=“header”> Cabeçalho <div id=“navbar”> Menu </div><!-- FIM DE NAVBAR --> </div> <!-- FIM DE HEADER --> <div id=“content”> Conteúdo </div> <!-- FIM DE CONTENT --> <div id=“sidebar”> Barra lateral </div> <!-- FIM DE SIDEBAR --> <div id=“footer”> Roda Pé </div> <!-- FIM DE FOOTER --> </body> </html> Exemplo de Estrutura utilizando apenas A tag <div>.
  • 31. Elementos Semânticos 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.
  • 32. Elementos Semânticos 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
  • 33. Elementos Semânticos – Exemplo 1 Esta é a organização do código do exemplo 1, que você verá no próximo slide.
  • 34. Elementos Semânticos – Exemplo 1 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Titulo da Página</title> </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.
  • 35. Elementos Semânticos – Exemplo 2 <!doctype html> <html> <head> <meta charset="utf-8"> <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.
  • 37. 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.
  • 39. 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.
  • 40. 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
  • 41. CONTATOS  Skype: leo.diaz1985  Twitter: wilborn7  Facebook: www.facebook.com/wilborn7