27/08/13

1

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.

27/08/13

2

HTML/ SEO

Pginas html devem sempre conter um elemento em conjunto com

As informaes sobre a pginas esto no elemento - ?

O que visualizado no browser fica entre as tags - ? e

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 por pgina; Utilizar no mximo duas tags 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

27/08/13

3

Outros elementos trabalhados na prtica Tags de ttulo: , ... e Atributos do elemento Elementos vazios - elementos que no precisam de tag de

fechamento Aninhamento de tags Comentrios Listas:

Ordenadas - ordened list/ - list item No ordenadas - unordened list/ - list item

, , , Tag para citao alguns browsers no reconhecem Tag

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: Link para a pgina 2O 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: Link para a pgina sobre carvalhos

Links absolutos e relativos so vlidos tambm no uso de ncoras Imagens tambm podem ser includas utilizando links absolutos e links

relativos

27/08/13

4

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

Imagens o navegador interpreta as imagens a partir da leitura da tag

inserir uma imagem que est no mesmo caminho do seu

documento propriedade src

inserir uma imagem (arquivo ceuma.png) que est na pasta imagens relativa ao seu documento

27/08/13

5

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:

Nas especificaes do HTML5:

Definir a Codificao de Caracteres Mesmo que charset Informa ao browser como a pgina HTML dever ser

interpretada Em Html4:

Em Html5:

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

27/08/13

6

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 e indicam comeo e fim da tabela. Linhas:

Tags : indicam comeo e fim de uma linha Propriedade rowspan: Mescla linhas; o valor define a quantidade

de linhas que sero mescladas Colunas:

Tags : indicam comeo e fim de uma coluna Propriedade colspan: Mescla colunas; o valor define a

quantidade de colunas que sero mescladas

27/08/13

7

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

27/08/13

8

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 : 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

27/08/13

9

Formulrios Principais controles

Tag : lista de valores Atributos : um item da lista Atributo selected: mantem selecionado o item da lista Atributo multiple: permite a seleo de mais de um item

Tag Elemento

submit: boto para enviar os dados. reset: boto para apagar todas as entradas do formulrio.

Nome de Usurio:

27/08/13

10

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

27/08/13

11

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:

Definio em HTML5:

Codificao de caracteres em XHTML:

Codificao de caracteres em HTML5:

27/08/13

12

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)

27/08/13

13

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

27/08/13

14

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

e para cabealho e rodap

para sees de contedo de uma pgina para identificar um artigo ou um post

para elementos de navegao

27/08/13

15

header

Tipicamente elementos como um formulrio de pesquisa ou um Sobre Ns podero estar includos neste header HTML5

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

27/08/13

16

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

Para definir onde ser o rodap da pgina ou da sesso.

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.

Para a insero de imagens com legenda

Legenda da Imagem

27/08/13

17

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 Home Acerca Sobre ns Novidades Falar connosco

27/08/13

18

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.)

!Interessantes!!Html5!Javascript!Java Server Pages!!Seguir!!Novidades W3c!Criao para Web!!!!

27/08/13

19

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

27/08/13

20

Novos elementos/ campos

Novos tipos de campos

Color

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.

27/08/13

21

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: Edite-me...

27/08/13

22

Multimdia udio

Exibe qualquer elemento de streaming de udio, com atributos para

exibio de controles ou execuo automtica.

Codecs O codec serve para indicar ao navegador o container e codecs de

determinado arquivo, usa-se o atributo type no formato. Ex: Com MPEG-4 a coisa um pouco mais complicada, por que

preciso indicar ao navegador tambm o profile do codec de vdeo utilizado.

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

27/08/13

23

Correo ortogrfica Os agentes de usurio podem oferecer recursos de reviso

ortogrfica e gramatical, dependendo do que houver

disponvel em cada plataforma.

Elementos modificados e ausentes Alguns elementos do html foram modificados e ausentes

Outros foram retirados porque afetam negativamente a acessibilidade do site: , e .

27/08/13

24

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 e demais tags de tabelas , , , , , entre outros; background em ; bgcolor nos elementos de tabela e no ; border em e ; cellpadding e cellspacing em ; height em e ; width nos elementos , , , e ; hspace e vspace em e ; noshade e size em .

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/

27/08/13

25

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