HTML 5

HTML 5 - Bsico
Prof James Moreira
O que HTML?
HTML uma marcao de textos para descrever documentos
Web (pginas web).
HTML significa HYper Text Markup Language
Uma linguagem de marcao de hypertexto um conjunto

de tags de marcao
Documentos HTML so descritos por tags HTML
Cada tag HTML descreve diferentes contedos do

documento
Exemplo HTML
Verses HTML
Elementos HTML
Elementos HTML so escritos com um incio tag, com um final tag,

com o contedo no meio;
Elementos HTML podem ser aninhados (elementos podem conter

elementos).
Todos os documentos HTML consistem em elementos HTML aninhadas.
Elementos HTML sem contedo so chamados de elementos vazios.
<br> um elemento vazio, sem uma marca de fechamento (o <br> tag

define uma quebra de linha).
Elemento vazio pode ser "fechado" na tag de abertura assim: <br />.
Tags HTML no diferem maisculas de minsculas: <P> significa o

mesmo que <p>.
O padro HTML5 no requer etiquetas minsculas, mas W3C

recomenda minsculas em HTML4 e exige minsculas para mais
rigorosas tipos de documentos como XHTML.
Atributos HTML
Elementos HTML podem ter atributos;
Atributos fornecem informaes adicionais sobre um

elemento;
Os atributos so sempre especificado na tag de incio;
Atributos vm em pares nome / valor como: name =

"value;
O atributo lang
O idioma do documento pode ser declarado na tag <html>.
A linguagem declarada no atributo lang.
Declarando uma lngua importante para aplicativos de
acessibilidade (leitores de tela) e motores de busca:
As primeiras duas letras especificar o idioma (en). Se houver

um dialeto, use mais duas letras (EUA).
Atributo Title
O atributo href
Atributos Tamanho
Atributo alt
Resumo do captulo
Todos os elementos HTML pode ter atributos
O HTML title atributo fornece "tool-tip" informao adicional
O HTML href atributo fornece informaes sobre o endereo para links
Os HTML width e height atributos fornecem informaes de tamanho para

imagens
O HTML alt atributo fornece texto para leitores de tela
Cabealhos HTML
Cabealhos HTML so definidos com os <h1> para <h6> tags:
<H1> define o ttulo mais importante. <H6> define o ttulo
menos importante.
Os Cabealhos so importantes
Use Cabealhos HTML para apenas ttulos. No use cabealhos

para tornar o texto Grande ou Negrito .
Os motores de busca usam suas posies para indexar a

estrutura e o contedo de suas pginas web.
Usurios Procuram suas pginas por seus ttulos. importante a

utilizao de posies para mostrar a estrutura do documento.
posies de h1 deve ser principais posies, seguido por

posies h2, h3, em seguida, o menos importante, e assim por
diante.
Regras horizontais HTML
O HTML elemento <head>
O HTML <head> elemento no tem nada a ver com posies HTML.
O HTML <head> contm Meta Dados. Meta dados no so exibidos.
O HTML <head> elemento colocado entre a tag <html> e <body> tag:
Elementos meta
O HTML <meta> elemento tambm meta dados.
Ele pode ser usado para definir o conjunto de caracteres, e outra

informao sobre o documento HTML.
O HTML <style> elemento usado para definir as folhas de estilo CSS

internas.
O HTML <link> elemento usado para definir as folhas de estilo CSS

externos.
Pargrafos HTML
O HTML <p> elemento define um pargrafo.
Voc no pode ter certeza de como HTML ser exibido.

Grandes ou pequenas telas e janelas redimensionadas ir criar resultados
diferentes.
Com HTML, voc no pode alterar a sada, adicionando espaos extras ou
linhas extras em seu cdigo HTML.
O navegador ir remover espaos extras e linhas extras quando a pgina

exibida.
Qualquer nmero de espaos, e qualquer nmero de novas linhas,
contam como apenas um espao .
Quebras de linha HTML
O HTML <br> elemento define uma quebra de linha .
Use <br> se voc quer uma quebra de linha (uma nova linha) sem iniciar um
novo pargrafo.
O HTML <pre> Elemento
O HTML <pre> elemento define um bloco de pr-formatado texto, com

espaos e linhas estruturadas.
Para exibir qualquer coisa, com espaamento entre direita e quebras de

linha, voc deve quebrar o texto em um <pre> elemento:
HTML Styling (Estilizando)
Cada elemento HTML tem um estilo padro (cor de fundo branco, cor do
texto preto, de tamanho de texto 12px ...)
Mudar o estilo padro de um elemento HTML, pode ser feito com o atributo
de estilo .
style="property:value"
Ex: <body style=background-color:lightgrey>
Mudar a cor do Texto:
<h1 style="color:blue">This is a heading</h1>
Mudar a Fonte do Texto:
<p style="font-family:verdana">This is a paragraph.</p>
Mudar o Tamanho do Texto:
<p style="font-size:160%">This is a paragraph.</p>
Alinhamento do Texto:
<h1 style="text-align:center">Centered Heading</h1>
Elementos de Formatao HTML
O HTML <b> elemento define negrito texto, sem qualquer importncia extra.
O HTML <strong> elemento define forte texto, com adio de semntica

importncia "forte".
O HTML <i> elemento define itlico texto, sem qualquer importncia extra.
O HTML <em> elemento define enfatizou texto, com importncia semntica

acrescentou.
O HTML <small> elemento define pequeno texto
O HTML <mark> elemento define marcado ou texto destacado
O HTML <del> elemento define excludo (removida) de texto
O HTML <ins> elemento define inserido (adicionado) de texto
O HTML <sub> elemento define subscrita texto
HTML <sup> elemento define Sobrescrito texto.
Citaes e Cotaes em HTML
O HTML <q> elemento define uma breve citao.
HTML <blockquote> para citaes longas.
HTML <abbr> para abreviaes
HTML <address> Para informaes de contato
O HTML <cite> elemento define o ttulo de uma obra .
Comentrios em HTML
Comentrios no so exibidos pelo navegador, mas podem ajudar a

documentar o seu HTML.
Comentrios Condicionais
Voc pode tropear em cima de comentrios condicionais em HTML:
Os comentrios condicionais define tags HTML para ser executado por

apenas Internet Explorer.
Links em HTML
Os links so encontrados em quase todas as pginas da web. Links permite

os usurios a clicar o seu caminho a partir de uma pgina para outra.
Em HTML, links so definidas com a <a> tag;
Links Locais
Uma ligao local (link para o mesmo site) especificado com uma URL
relativa (sem http: // www ....)
cores e cones
Links em HTML
O atributo alvo
O alvo atributo especifica onde abrir o documento vinculado.
imagem como link
Links em HTML - o atributo id
O id atributo pode ser usado para criar marcadores dentro de documentos HTML.
Indicadores no so exibidos em qualquer maneira especial. Eles so invisveis

para o leitor.
HTML Images
O atributo alt serve para leitoras de Tela;
Altura e largura pode ser usado os atributos height e width;
Mapas de Imagens:
Floating Imagem:
Tabelas em HTML
As tabelas so definidas com a <table> tag.
Tabelas so divididos em linhas da tabela com o <tr> tag.
As linhas da tabela so divididos em dados da tabela com o <td> tag.
A linha da tabela tambm pode ser dividido em ttulos da tabela com o <th> tag.
Atributo Border da Tabela
Se voc no especificar um limite para a tabela, ele ser exibido sem fronteiras.
Adicione o atributo border, mas claro, em CSS.
Para colapsar as bordas use a propriedade

border-collapse:
bom especificar um preenchimento:
Ttulos da tabela so definidas com a tag <th>:
Use a propriedade text-align para alinhar o

texto esquerda nos ttulos da tabela;
Listas em HTML
Em HTML, podemos ter listas no-ordenadas, listas ordenadas e listas de descrio:
Listas no ordenadas
Uma lista no ordenada comea com o <ul> tag. Cada item da

lista comea com o <li> tag.
Os itens da lista sero marcados com balas (pequenos crculos

pretos).
Atributos list-style-type podem alterar

como os itens aparecem:
Listas ordenadas
Uma lista ordenada comea com o <ol> tag. Cada item da

lista comea com o <li> tag.
Os itens da lista sero marcados com nmeros.
Tipos de Atributos:
Listas de Descrio
Listas Aninhadas
Elementos em Bloco e em Inline
Elementos em Bloco comeam e finalizam com uma quebra de linha;
EX: <h1>, <p>, <ul>, <table>, <div>
O elemento <div> utilizado como recipiente para outros elementos

HTML.
Elementos em inline so exibidos sem quebras de linha;
EX: <b>, <td>, <a>, <img>, <span>
O elemento <span> utilizado como recipiente para textos.
Layouts - www.liquidapsive.com

HTML 5

Enviado por

Dados do documento

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

HTML 5

Enviado por

Direitos autorais:

Formatos disponíveis

HTML 5 - Bsico

Prof James Moreira

HTML significa HYper Text Markup Language

Uma linguagem de marcao de hypertexto um conjunto

Documentos HTML so descritos por tags HTML

Cada tag HTML descreve diferentes contedos do

Elementos HTML so escritos com um incio tag, com um final tag,

Elementos HTML podem ser aninhados (elementos podem conter

Todos os documentos HTML consistem em elementos HTML aninhadas.

Elementos HTML sem contedo so chamados de elementos vazios.

<br> um elemento vazio, sem uma marca de fechamento (o <br> tag

Tags HTML no diferem maisculas de minsculas: <P> significa o

O padro HTML5 no requer etiquetas minsculas, mas W3C

Elementos HTML podem ter atributos;

Atributos fornecem informaes adicionais sobre um

Os atributos so sempre especificado na tag de incio;

Atributos vm em pares nome / valor como: name =

As primeiras duas letras especificar o idioma (en). Se houver

Todos os elementos HTML pode ter atributos

O HTML title atributo fornece "tool-tip" informao adicional

O HTML href atributo fornece informaes sobre o endereo para links

Os HTML width e height atributos fornecem informaes de tamanho para

O HTML alt atributo fornece texto para leitores de tela

Use Cabealhos HTML para apenas ttulos. No use cabealhos

Os motores de busca usam suas posies para indexar a

Usurios Procuram suas pginas por seus ttulos. importante a

posies de h1 deve ser principais posies, seguido por

Regras horizontais HTML

O HTML elemento <head>

O HTML <head> elemento no tem nada a ver com posies HTML.

O HTML <head> contm Meta Dados. Meta dados no so exibidos.

O HTML <head> elemento colocado entre a tag <html> e <body> tag:

O HTML <meta> elemento tambm meta dados.

Ele pode ser usado para definir o conjunto de caracteres, e outra

O HTML <style> elemento usado para definir as folhas de estilo CSS

O HTML <link> elemento usado para definir as folhas de estilo CSS

O HTML <p> elemento define um pargrafo.

Voc no pode ter certeza de como HTML ser exibido.

O navegador ir remover espaos extras e linhas extras quando a pgina

Quebras de linha HTML

O HTML <br> elemento define uma quebra de linha .

O HTML <pre> Elemento

O HTML <pre> elemento define um bloco de pr-formatado texto, com

Para exibir qualquer coisa, com espaamento entre direita e quebras de

HTML Styling (Estilizando)

<h1 style="color:blue">This is a heading</h1>

Mudar a Fonte do Texto:

<p style="font-family:verdana">This is a paragraph.</p>

Mudar o Tamanho do Texto:

<p style="font-size:160%">This is a paragraph.</p>

<h1 style="text-align:center">Centered Heading</h1>

Elementos de Formatao HTML

O HTML <strong> elemento define forte texto, com adio de semntica

O HTML <em> elemento define enfatizou texto, com importncia semntica

O HTML <small> elemento define pequeno texto

O HTML <mark> elemento define marcado ou texto destacado

O HTML <del> elemento define excludo (removida) de texto

O HTML <ins> elemento define inserido (adicionado) de texto

O HTML <sub> elemento define subscrita texto

HTML <sup> elemento define Sobrescrito texto.

Citaes e Cotaes em HTML

O HTML <q> elemento define uma breve citao.

HTML <blockquote> para citaes longas.

HTML <abbr> para abreviaes