03 Linguagem+HTML Completo2

!
"#$%#&'
&
Linguagem HTML
Luciana Fortes
HTML
! HyperText Markup Language (Linguagem de Marcao de
Hipertexto)
! a camada responsvel pela estrutura da pgina web
! Criado por Tim Berners-Lee
! Arquivos HTML podem ser interpretados por browsers
(navegadores)
! Comandos da linguagem so tags (etiquetas)
! Os contedos dessas tags so os elementos
! Um elemento composto de 3 partes:
! Tag de abertura
! Contedo
! Tag de fechamento
! Existem elementos que so uma exceo a essa regra.
!"#$%#&'
!
HTML/ SEO
! Pginas html devem sempre conter um elemento <html> em conjunto
com
! <head>
! <body>
! As informaes sobre a pginas esto no elemento - ?
! <head>
! O que visualizado no browser fica entre as tags - ?
! <body> e </body>
! Devemos utilizar os cabealhos com cautela, pois eles so utilizados
como parmetros de ranqueamento da pgina por diversos buscadores
como Google, Yahoo e Bing, por exemplo. O uso correto das tags de
cabealho faz parte das tcnicas de SEO (Search Engine Optimization)
que, como o prprio nome j indica, so tcnicas que ajudam a
melhorar o ranqueamento de pginas dentro dos buscadores.
! De acordo com as tcnicas de SEO devemos tomar os seguintes
cuidados ao utilizarmos as tags de cabealhos: Utilizar apenas uma tag
<h1> por pgina; Utilizar no mximo duas tags <h2> por pgina.
Conceitos gerais e principais
elementos
! HTML e CSS so linguagens que utilizamos para criao de
pginas web
! HTML cuida da estrutura
! CSS (Cascading Style Sheets Folhas de Estilo em Cascata)
cuidam da apresentao do HTML
! HTML tambm prov formatao bsica, mas o mais apropriado
faz-lo utilizando CSS
! Existem 2 tipos de tags:
! Tags em bloco - Tipo de tag que impacta em mais de uma linha de
cdigo, normalmente pargrafos
! Tags em linha
! necessrio sempre aps uma tag de abertura - ?
! Uma tag de fechamento
! Quase todos os espaos e tabulaes no cdigo so ignorados
pelo browser, mas voc pode utiliz-los para tornar seu cdigo
mais inteligvel
!"#$%#&'
'
Outros elementos trabalhados
na prtica
! Tags de ttulo: <h1>, <h2>...
! <p> e <br>
! Atributos do elemento <p>
! Elementos vazios - elementos que no precisam de tag de
fechamento
! Aninhamento de tags
! Comentrios 
! Listas:
! Ordenadas <ol> - ordened list/ <li> - list item
! No ordenadas <ul> - unordened list/ <li> - list item
! <b>, <i>, <u>, <font face= size= color=>
! Tag <q> para citao alguns browsers no reconhecem
! Tag <blockquote>
! <pre>
Links, Caminhos
! Link absoluto
Um link absoluto um link que leva exatamente para uma pgina. Por
exemplo, voc est na pgina www.meusite.com e quer criar um link
para www.ceuma.br
! Um link absoluto deve comear por um protocolo, seja "http://", "ftp://" ou
outros que existem, ou ento ele ser tratado como link relativo.
! Link relativo
Um link relativo leva para uma pgina usando o link da atual. Se voc quer ir
de www.meusite.com para www.meusite.com/pg2.html, pode usar o seguinte
elemento:
<a href="pg2.html">Link para a pgina 2</a>O
contedo do atributo "href" somado com o caminho at a pgina atual
(excluindo o prprio nome da pgina), incluindo a barra. Ou seja,
www.meusite.com/ + pg2.html. Voc tambm pode usar mltiplas pastas:
<a href="plantas/arvores/carvalho.html">Link
para a pgina sobre carvalhos</a>
! Links absolutos e relativos so vlidos tambm no uso de ncoras
! Imagens tambm podem ser includas utilizando links absolutos e links
relativos
!"#$%#&'
)
Links, Caminhos
! Propriedade Target
! _blank: abre nova janela/browser
! _top: na mesma janela, sobrepondo todas as definies do
frame
! _parent: abre na mesma janela e no mesmo frame, sem
sobrepor as definies dos frames da pgina

! #ancora: indica um lugar dentro de uma mesma pgina
(ncora) onde o usurio ser redirecionado quando clicar no
respectivo link
! <a name=nome_da_ancora></a>
Imagens
! o navegador interpreta as imagens a partir da leitura da tag
<img />
! inserir uma imagem que est no mesmo caminho do seu
documento propriedade src
! <img src="imagem.jpg" />
! inserir uma imagem (arquivo ceuma.png) que est na pasta
imagens relativa ao seu documento
! <img src=imagens/ceuma.png" />
! imagem que est na Internet, usando uma URL
! <img src=http://www.ceuma.br/portal/wp-content/themes/
responsive/images/marca.png>
! Descrio para a imagem (texto alternativo)
! alt=texto
! Outras propriedades: align, height, width
!"#$%#&'
*
Doctype
! Document Type Definition (DTD)
! Exigncia dos web standards
! W3C
! Responsvel por informar ao browser como processar o
documento, razo pela qual dever ser a primeira coisa a
colocar no documento HTML
! Estrutura do Doctype:
! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-Strict.DTD" >
! Nas especificaes do HTML5:
! <!DOCTYPE html>
Definir a Codificao de
Caracteres
! Mesmo que charset
! Informa ao browser como a pgina HTML dever ser
interpretada
! Em Html4:
! <meta http-equiv="Content-Type" content="text/
html; charset = utf-8">
! Em Html5:
! <meta charset = "utf-8" />
! No permitido codificar diferentes partes de um mesmo
documento com diferentes formas de codificao
! Uma codificao Unicode tal como UTF-8 prov suporte para
muitos idiomas, inclusive para qualquer mistura de idiomas
em uma pgina ou formulrios
! UTF-8 reduz a complexidade de criao de sites ou
aplicaes multi-lnguas
!"#$%#&'
+
Definir a Codificao de
Caracteres (cont.)
! Existem trs codificaes de caracteres em Unicode: UTF-8, UTF-16 e
UTF-32
! Para Web recomenda-se o UTF-8
! Pesquisa: Por que no recomendado utilizar UTF-32 em codificao de
pginas web? O que significa utilizar uma codificao SEM BOM?
! Editores devero utilizar codificao SEM BOM
! byte-order mark
! Quando um arquivo salvo com um BOM, h um caractere Unicode inserido
no incio do arquivo que a maioria dos editores de texto no exibe
! Especificao da HTML 5:
! Autores so encorajados a usar UTF-8. Mecanismos verificadores devem
alertar os autores sobre o uso de codificao do passado. Ferramentas de
criao de contedos devem adotar codificao UTF-8 por padro, para
criao de novos documentos.
! Charsets em documentos html podem ser sobrescritos por
configuraes no servidor de hospedagem
! Ex.: pginas com charset correto, mas caracteres ainda com problema
! Escrevendo caracteres especiais
Tabelas
! O uso de tabelas importante tanto para organizar as
informaes de modo mais estruturado, a exemplo do que
ocorre em uma planilha, quanto para formatar uma pgina.
! Alguns designers tm utilizado o conceito de tabela para
modelar a pgina.
! Tags <table> e </table> indicam comeo e fim da tabela.
! Linhas:
! Tags <tr> </tr>: indicam comeo e fim de uma linha
! Propriedade rowspan: Mescla linhas; o valor define a quantidade
de linhas que sero mescladas
! Colunas:
! Tags <td> </td>: indicam comeo e fim de uma coluna
! Propriedade colspan: Mescla colunas; o valor define a
quantidade de colunas que sero mescladas
!"#$%#&'
"
Tabelas (cont.)
! Outras propriedades para trabalho com colunas:
! width: controla a largura das colunas. pode ser definido
em pixels ou porcentagem.
! height: controla a altura das colunas. pode ser definido
em pixels ou porcentagem.
! valign: controla o alinhamento vertical da clula:
top, center e bottom.
! halign: controla o alinhamento horizontal da clula.
left, center e right.
! Tag <caption align="bottom>: acrescenta uma legenda, abaixo
da tabela</caption>
! Tag <th>: usada para o cabealho da tabela, um texto
destacado para explicar um pouco sobre a coluna em questo
! Muitas dessas propriedades sero trabalhadas melhor com
CSS, que a camada responsvel pela apresentao.
Formulrios
! Em HTML possvel apenas criar os controle para os
formulrios
! Campos: input text, radio button, checkbox, caixas de seleo
etc
! Em geral, para que eles tenham alguma funcionalidade,
gerando interatividade com o usurio, necessrio o auxlio
de um programa para manipulao e/ou armazenamento dos
dados digitados nesses formulrios
! Tags <form> e </form>
! Propriedades mais importantes das tags de formulrio
! name: especifica o nome do controle funcionar como nomes
de variveis
! value: valor da varivel
!"#$%#&'
%
Formulrios Propriedades
principais do objeto form
! name
! o nome nico do formulrio.
! action
! o lugar ao qual se envia o formulrio para ser processado. O
action define a URL a qual se envia tal formulrio.
! method
! mtodo de envio dos dados inseridos em um formulrio. O
method pode ser:
! GET = envia os dados em uma cadeia "visvel". Conveniente para
enviar poucos dados.
! POST = envia os dados em forma "invisvel". Conveniente para enviar
uma grande quantidade de dados.
! target
! define a janela ou frame na que se Mostraro ou se processaro
os resultados do formulrio.
Formulrios Principais controles
! Elementos <input />: mostram no navegador os campos que
sero responsveis por possibilitar a entrada de algum tipo de
informao por parte do usurio; atributo type:
! text: Usado para inserir caracteres, nmeros e afins no formulrio
! Atributos adicionais: size (tamanho da caixa de texto), maxlength
(quantidade mxima de caracteres permitida), accesskey (atalho de acesso
ao campo)
! password: parecido com o 'text' mas sua entrada de dados no
aparecer explicitamente para o usurio. Usada principalmente,
como o prprio nome sugere, para a entrada de senhas.
! radio: radio buttons ou botes de opo. Permitem que o usurio
seja capaz de escolher um elemento entre um nmero limitado
deles.
! checkbox: caixas de seleo. Tm uma finalidade parecida com a
dos botes, com a diferena de permitir que sejam selecionados
mais de um elemento.
! radio e checkbox suportam a propriedade checked que mantem
selecionado o item
!"#$%#&'
,
Formulrios Principais controles
! Tag <select>: lista de valores
! Atributos <option>: um item da lista
! Atributo selected: mantem selecionado o item da lista
! Atributo multiple: permite a seleo de mais de um item
! Tag <textarea>
! Elemento <button>
! submit: boto para enviar os dados.
! reset: boto para apagar todas as entradas do formulrio.
! <label for="></label>: torna clicvel a descrio do campo; o
valor da propriedade for dever ser o nome do controle a ser
acessado ao clicar na respectiva descrio
! <label for="login>Nome de Usurio: </label><input type="text"
name="login>
Exercitando
! Pgina de login
index.html
! action aponta para
reserva.html
! Tabela com os dados
de login (usurio,
senha e boto)
! Pgina reserva.html
! Controles conforme
ilustrao
!"#$%#&'
&$
XHTML, HTML5
Estendendo o HTML
XHTML
! eXtensible Hypertext Markup Language (Linguagem
Extensvel para Marcao de Hipertexto)
! Construo de pginas na internet a partir da linguagem
HTML juntamente com a linguagem XML, transformando-se
em uma linguagem padronizada para web
! Combina as tags de marcao HTML com regras da XML
! eXtensible Markup Language
! Separao do contedo da formatao
! Criao de arquivos para validao de estrutura (DTDs)
! Possibilidade de criao de tags sem limitao
! Concentrao na estrutura da informao, e no na sua
aparncia
!"#$%#&'
&&
XHTML (cont.)
! Objetivos:
! exibio de pginas Web em diversos dispositivos
(televiso, palm, celular etc)
! melhorar a acessibilidade
! melhorar o sentido semntico para as mquinas/
buscadores
! Vantagens:
! menor tempo de carregamento da pgina web
! interoperabilidade e portabilidade dos documentos web
! compatvel com todas as aplicaes HTML antigas
HTML5
! HTML5 simplifica mais o XHTML
! Maior organizao da estrutura da pgina
! Maior semntica
! Definio em XHTML:
! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
! Definio em HTML5:
! <!DOCTYPE html>
! Codificao de caracteres em XHTML:
! <meta http-equiv="content-type" content="text/
html; charset=iso-8859-1" />
! Codificao de caracteres em HTML5:
! <meta charset="utf-8">
!"#$%#&'
&!
XHTML (com CSS) x HTML5
HTML5 - Origem dos novos
elementos
! Com o surgimento do HTML5 apareceu a oportunidade de
dar mais informao ao browser sobre a estrutura da pgina
e o que significaria cada elemento dessa estrutura.
! 2005: o Google analisou mais de um bilho de pginas para
descobrir que nomes de classes CSS os desenvolvedores
web utilizavam mais frequentemente.
! Ian Hickson (Hixie), editor do principal grupo responsvel
pela proposta do HTML5, comeou a pensar sobre os novos
elementos que deveriam ser criados e quais nomes seriam
mais apropriados.
! Termos mais comuns apontados na pesquisa passaram a ser o
alvo para a criao de tags de forma permanente (ex.: header,
footer, article)
!"#$%#&'
&'
HTML5 (cont.)
! Case sensitive
! O que o html5 traz de novo?
! Conectividade e aplicaes em tempo real
! Novas possibilidades de estilo com css3
! Acesso a dispositivos (Interoperabilidade)
! Grficos 2d, 3d e efeitos
! Recursos multimdia
! Melhor performance e integrao
! Elementos mais semnticos
! Armazenamento off-line
Diviso em camadas
!"#$%#&'
&)
Compatibilidade com browsers
! Browsers como Google Chrome, Firefox 3.5, Internet
Explorer 9 e Safari 4 do suporte ao HTML5, e com isso
algumas pginas j vo aderindo a nova verso.
! IE o browser com menos compatibilidade
! O site http://html5test.com/ faz uma lista de verificao se o
browser suporta os recursos de HTML5
Novas tags de estrutura
! <header> e <footer> para cabealho e rodap
! <section> para sees de contedo de uma pgina
! <article> para identificar um artigo ou um post
! <nav> para elementos de navegao
!"#$%#&'
&*
header
! Tipicamente elementos como um formulrio de pesquisa ou um
Sobre Ns podero estar includos neste header
! <header>
<img alt = "Logotipo em HTML5" src="logo.png" />
<h1><a href="#">HTML5</a></h1>
</header>
! Poder incluir ajuda navegao, ex.:
! Marca da empresa
! Nome e ttulo do site
! Subttulo do site
! Links de navegao principais
! Formulrio de pesquisa
! Dependendo do design do website o menu de navegao
poder estar fora do header
! Aps criado poder ser utilizado em mais de uma pgina
! aconselhvel tambm que se tivermos apenas um ttulo
(desde h1 at h6) e mais nenhum elemento, no devemos
utilizar um header. O prprio ttulo ser suficiente.
header (cont.)
! No estamos restritos a apenas um header por pgina
! No ter de estar no topo da pgina
! Se tivermos vrios cabealhos em uma pgina poderemos
considerar coloc-los em um elemento header
!"#$%#&'
&+
article
! Representa um bloco independente de contedo
! Contedo que possa existir por si s e que possa ser reutilizvel
! Considere o contedo que est contido nas RSS feeds. Trata-se
de um contedo que contm apenas o essencial para representar
um artigo, e que poder ser retirado da feed, continuando a fazer
sentido.
! A especificao HTML5 sugere alguns exemplos do que um
artigo e como pode ser utilizado, referindo exemplos como um
tpico de frum, artigos, posts ou artigos submetidos pelos
utilizadores.
footer, aside, figure
! <footer>
! Para definir onde ser o rodap da pgina ou da sesso.
! <aside>
! Informaes relativas ao contedo principal, como um menu ou
um campo de busca.
! til para citaes, agrupamento de publicidade, grupos e blocos
de navegao e para qualquer outro contedo que separado
do contedo principal.
! <figure>
! Para a insero de imagens com legenda

<figure id=1>
<img src=imagem.jpg alt=descrio>
<legend>Legenda da Imagem</legend>
</figure>
!"#$%#&'
&"
hgroup
! propsito adicionar mais informao ao elemento header
! utilizado para agrupar mais do que um ttulo relacionado
(podendo ir de h1 a h6)
nav
! elementos de navegao
! utilizado para criar hiperligaes entre as vrias pginas do
website, ou outras partes de uma pgina
! Ex.: tabelas de contedos e ncoras
! utilizao mais comum para criar a navegao principal de
um website
! boa prtica: utilizar uma lista no ordenada para a
navegao principal de um website
! <ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Acerca</a></li>
<li><a href="#">Sobre ns</a></li>
<li><a href="#">Novidades</a></li>
<li><a href="#">Falar connosco</a></li>
</ul>
!"#$%#&'
&%
nav (cont.)
! recomendado utilizar o elemento nav dentro de um
elemento header.
! Poderemos colocar esta navegao no header, j que
perfeitamente comum colocar no header contedo
introdutrio e de navegao.
! No regra manter o nav no header, e poder depender do
design adotado pelo website.
! tambm bastante comum ter um menu de navegao no
footer da pgina, duplicando a navegao principal do
website.
! No necessrio colocar todas as hiperligaes de uma
pgina em um elemento nav; a especificao HTML5 apenas
adverte que os blocos de navegao principal so os
apropriados para ser includos no elemento nav.

nav (cont.)
<nav>
<h2>Interessantes</h2>
<ul>
<li><a href="#">Html5</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Java Server Pages</a></li>
</ul>
<h2>Seguir</h2>
<ul>
<li><a href="#">Novidades W3c</a></li>
<li><a href="#>E-commerce</a></li>
<li><a href="#>Criao para Web</a></li>
</ul>
</nav>

!"#$%#&'
&,
nav (cont.)
! possvel existir um h2 ou h3 para separar grupos de links
em um elemento nav (links podero funcionar como
cabealhos de abas)
! Estes ttulos no so absolutamente necessrios, mas
podem ser utilizados para agrupar em grupos menores a
estrutura de navegao.
! Com a utilizao do elemento nav existe uma grande
vantagem em termos de acessibilidade.
! Por exemplo, os visitantes de determinado site sero capazes de
imediatamente pesquisar e utilizar grupos de navegao, de
acordo com seus interesses
Exerccios propostos
! - Criar uma pgina em html5 utilizando os elementos:
! Header
! Article
! Figure
! Hgroup
! Nav
! No se preocupar com a formatao, apenas com a
estrutura em html5
!"#$%#&'
!$
Novos elementos/ campos
! Novos tipos de campos

! Color
! <input type="color" name="corPreferida">
! Date
! Datetime
! Datetime-local
! Month
! Number
! Range
Novos elementos/ campos
(cont.)
! Tel
! Torna o input com a funo de formatar o campo e fazer a
validao, em conjunto com o atributo pattern.

! Search
! Destina-se a definir um input do tipo busca. O efeito deste valor
no atributo type alterar a estilizao e comportamento do
controle diferenciando-o dos demais controles do Input
! E-mail
! Torna o input com a funo de formatar o campo e fazer a
validao.
! Url
! Um endereo web, tambm com formatao e validao.
!"#$%#&'
!&
Tipos de Dados e validadores
! Autofocus
! O foco ser colocado neste campo automaticamente ao carregar
a pgina.
! Placeholder
! Coloca uma mscara no campo, ou seja, um texto explicativo.
! Required
! Para tornar um campo de formulrio obrigatrio
(seu valor precisa ser preenchido) basta, em HTML5, incluir o
atributo required. exclusivo com os elementos input, select e
textarea
Tipos de Dados e validadores
(cont.)
! Maxlength
! Limita a quantidade de caracteres em um campo de formulrio. E
agora pode ser usado na tag textarea.
! Pattern
! Define uma expresso regular, um padro para validao
! Contedo editvel
! Tornar um elemento do HTML editvel
! atributo contenteditable
! Aplicao: <div contenteditable="true">Edite-me...</div>
!"#$%#&'
!!
Multimdia
! udio
! <audio>
! Exibe qualquer elemento de streaming de udio, com atributos para
exibio de controles ou execuo automtica.
! <audio src=musica.mp3" controls="true" />
! Vdeo
! <video>
! Exibe vdeos na pgina, com exibio de controles e de uma Imagem
enquanto o vdeo carregado.
! <video src=video.ogv" width="400" height="300" />
! Codecs
! O codec serve para indicar ao navegador o container e codecs de
determinado arquivo, usa-se o atributo type no formato.
! Ex: <source src='video.ogv' type='video/ogg; codecs="theora,
vorbis"'>
! Com MPEG-4 a coisa um pouco mais complicada, por que
preciso indicar ao navegador tambm o profile do codec de vdeo
utilizado.
! <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240,
mp4a.40.2"'>
Drag and Drop

! Com drag and drop voc consegue manipular o
posicionamento dos elementos na tela
! Exemplos
! Arrastar um item para um carrinho de compra em um site
de e-commerce
! Listas de comparao em jogos virtuais
! Exemplo do recurso aplicado: http://
html5demos.com/drag
!"#$%#&'
!'
Correo ortogrfica

! Os agentes de usurio podem oferecer recursos de reviso
ortogrfica e gramatical, dependendo do que houver
disponvel em cada plataforma.
! <textarea spellcheck="true"></textarea>
Elementos modificados e
ausentes
! Alguns elementos do html foram modificados e ausentes
! <basefont>
! <big>
! <center>
! <font>
! <s>
! <strike>
! <tt>
! <u>
! Outros foram retirados porque afetam negativamente a
acessibilidade do site: <frame>, <frameset> e <noframes>.
!"#$%#&'
!)
Elementos modificados e
ausentes
! Caram em desuso ou podem ser substitudos semanticamente por
declaraes no CSS para definir o visual dos elementos:
! align nos elementos <table> e demais tags de tabelas
! <iframe>, <img>, <input>, <hr>, <div>, entre outros;
! background em <body>;
! bgcolor nos elementos de tabela e no <body>;
! border em <table> e <object>;
! cellpadding e cellspacing em <table>;
! height em <td> e <th>;
! width nos elementos <hr>, <table>, <td>, <th> e <pre>;
! hspace e vspace em <img> e <object>;
! noshade e size em <hr>.
Sites com HTML5 e CSS
! http://www.digitalhands.net/
! https://getsatisfaction.com/
! http://lab.4muladesign.com/dribbble/
! http://www.nike.com/us/en_us/
! http://www.chrdesigner.com/
! http://tableless.com.br/
! http://www.pinceladasdaweb.com.br/
! http://www.apple.com/br/safari/
!"#$%#&'
!*
Validao de pginas HTML,
XHTML, HTML5
Segundo normas da W3c
COMO SABER SE UMA PGINA
EST CORRETAMENTE
ESTRUTURADA?
! A W3C tem uma ferramenta de validao
! validator.w3.org
! outro validador: html5.validator.nu

03 Linguagem+HTML Completo2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

03 Linguagem+HTML Completo2

Enviado por

Direitos autorais:

Formatos disponíveis

!

Você também pode gostar