HTML 5

7/21/2019 HTML 5

http://slidepdf.com/reader/full/html-5-56da0e90704df 1/39

HTML 5 - BásicoProfº James Moreira

7/21/2019 HTML 5


O que é HTML?

HTML é uma marcação de textos para descrever documentos

Web (páginas web).

HTML significa HYper Text Markup Language

Uma linguagem de marcação de hypertexto é um conjuntode tags de marcação

Documentos HTML são descritos por tags HTML

Cada tag HTML descreve diferentes conteúdos dodocumento

7/21/2019 HTML 5


Exemplo HTML

7/21/2019 HTML 5


7/21/2019 HTML 5


Versões HTML

7/21/2019 HTML 5


Elementos HTML Elementos HTML são escritos com um início tag, com um final tag,

com o conteúdo no meio;

Elementos HTML podem ser aninhados (elementos podem conter

elementos). Todos os documentos HTML consistem em elementos HTML aninhadas

Elementos HTML sem conteúdo são chamados de elementos vazios.

<br> é um elemento vazio, sem uma marca de fechamento (o <br> tadefine uma quebra de linha).

Elemento vazio pode ser "fechado" na tag de abertura assim: <br />.

Tags HTML não diferem maiúsculas de minúsculas: <P> significa omesmo que <p>.

O padrão HTML5 não requer etiquetas minúsculas, mas W3Crecomenda minúsculas em HTML4 e exige minúsculas para maisrigorosas tipos de documentos como XHTML.

7/21/2019 HTML 5


Atributos HTML Elementos HTML podem ter atributos;

Atributos fornecem informações adicionais sobre umelemento;

Os atributos são sempre especificado na tag de início;

Atributos vêm em pares nome / valor como: name ="value“;

7/21/2019 HTML 5


O atributo langO idioma do documento pode ser declarado na tag <html>.

A linguagem é declarada no atributo lang.

Declarando uma língua é importante para aplicativos deacessibilidade (leitores de tela) e motores de busca:

As primeiras duas letras especificar o idioma (en). Se houverum dialeto, use mais duas letras (EUA).

7/21/2019 HTML 5


Atributo Title

7/21/2019 HTML 5


O atributo href

7/21/2019 HTML 5


Atributos Tamanho

7/21/2019 HTML 5


Atributo alt

7/21/2019 HTML 5


Resumo do capítulo

Todos os elementos HTML pode ter atributos

O HTML title atributo fornece "tool-tip" informação adicional O HTML href atributo fornece informações sobre o endereço para links

Os HTML width e height atributos fornecem informações de tamanho paraimagens

O HTML alt atributo fornece texto para leitores de tela

7/21/2019 HTML 5


Cabeçalhos HTML

Cabeçalhos HTML são definidos com os <h1> para <h6> tags:

<H1> define o título mais importante. <H6> define o títulomenos importante.

7/21/2019 HTML 5


Os Cabeçalhos são importantes

Use Cabeçalhos HTML para apenas títulos. Não use cabeçalhos

para tornar o texto Grande ou Negrito . Os motores de busca usam suas posições para indexar a

estrutura e o conteúdo de suas páginas web.

Usuários Procuram suas páginas por seus títulos. É importante autilização de posições para mostrar a estrutura do documento.

posições de h1 deve ser principais posições, seguido porposições h2, h3, em seguida, o menos importante, e assim pordiante.

7/21/2019 HTML 5


Regras horizontais HTML

7/21/2019 HTML 5


O HTML elemento <head>

O HTML <head> elemento não tem nada a ver com posições HTML.

O HTML <head> contém Meta Dados. Meta dados não são exibidos.

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

7/21/2019 HTML 5


Elementos meta

O HTML <meta> elemento é também meta dados.

Ele pode ser usado para definir o conjunto de caracteres, e outrainformação sobre o documento HTML.

O HTML <style> elemento é usado para definir as folhas de estilo CSSinternas.

O HTML <link> elemento é usado para definir as folhas de estilo CSSexternos.

7/21/2019 HTML 5


Parágrafos HTML

O HTML <p> elemento define um parágrafo.

Você não pode ter certeza de como HTML será exibido.

Grandes ou pequenas telas e janelas redimensionadas irá criar resultadosdiferentes.

Com HTML, você não pode alterar a saída, adicionando espaços extras oulinhas extras em seu código HTML.

O navegador irá remover espaços extras e linhas extras quando a páginaé exibida.

Qualquer número de espaços, e qualquer número de novas linhas,contam como apenas um espaço .

7/21/2019 HTML 5


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 umnovo parágrafo.

7/21/2019 HTML 5


O HTML <pre> Elemento

O HTML <pre> elemento define um bloco de pré-formatado texto, comespaços e linhas estruturadas.

Para exibir qualquer coisa, com espaçamento entre direita e quebras delinha, você deve quebrar o texto em um <pre> elemento:

HTML S li (E ili d )

7/21/2019 HTML 5


HTML Styling (Estilizando) Cada elemento HTML tem um estilo padrão (cor de fundo é branco, cor do

texto é preto, de tamanho de texto é 12px ...)

Mudar o estilo padrão 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>

7/21/2019 HTML 5


Elementos de Formatação HTML O HTML <b> elemento define negrito texto, sem qualquer importância extra.

O HTML <strong> elemento define forte texto, com adição de semânticaimportância "forte".

O HTML <i> elemento define itálico texto, sem qualquer importância extra.

O HTML <em> elemento define enfatizou texto, com importância semânticaacrescentou.

O HTML <small> elemento define pequeno texto

O HTML <mark> elemento define marcado ou texto destacado

O HTML <del> elemento define excluído (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.

Citações e Cotações em HTML

7/21/2019 HTML 5


Citações e Cotações em HTML O HTML <q> elemento define uma breve citação.

HTML <blockquote> para citações longas.

HTML <abbr> para abreviações HTML <address> Para informações de contato

O HTML <cite> elemento define o título de uma obra .

7/21/2019 HTML 5


Comentários em HTML

Comentários não são exibidos pelo navegador, mas podem ajudar adocumentar o seu HTML.

Comentários Condicionais Você pode tropeçar em cima de comentários condicionais em HTML:

Os comentários condicionais define tags HTML para ser executado porapenas Internet Explorer.

Li k HTML

7/21/2019 HTML 5


Links em HTML Os links são encontrados em quase todas as páginas da web. Links permite

os usuários a clicar o seu caminho a partir de uma página para outra.

Em HTML, links são definidas com a <a> tag;

Links Locais

Uma ligação local (link para o mesmo site) é especificado com uma URLrelativa (sem http: // www ....)

cores e ícones

Li k HTML

7/21/2019 HTML 5


Links em HTMLO atributo alvo

O alvo atributo especifica onde abrir o documento vinculado.

imagem como link

Li k HTML ib id

7/21/2019 HTML 5


Links em HTML - o atributo id O id atributo pode ser usado para criar marcadores dentro de documentos HTML

Indicadores não são exibidos em qualquer maneira especial. Eles são invisíveispara o leitor.

HTML Images

7/21/2019 HTML 5


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

7/21/2019 HTML 5


Tabelas em HTML As tabelas são definidas com a <table> tag.

Tabelas são divididos em linhas da tabela com o <tr> tag.

As linhas da tabela são divididos em dados da tabela com o <td> tag.

A linha da tabela também pode ser dividido em títulos da tabela com o <th>

Atributo Border da Tabela

7/21/2019 HTML 5


t buto o de da abela Se você não especificar um limite para a tabela, ele será exibido sem fronteir

Adicione o atributo border, mas claro, em CSS.

Para colapsar as bordas use a propriedadeborder-collapse:

É bom especificar um preenchimento:

Títulos da tabela são definidas com a tag <th>:

Use a propriedade text-align para alinhar otexto à esquerda nos títulos da tabela;

7/21/2019 HTML 5


Listas em HTML Em HTML, podemos ter listas não-ordenadas, listas ordenadas e listas de descri

7/21/2019 HTML 5


Listas não ordenadas Uma lista não ordenada começa com o <ul> tag. Cada item da

lista começa com o <li> tag.

Os itens da lista serão marcados com balas (pequenos círculospretos).

Atributos list-style-type podem alterarcomo os itens aparecem:

Listas ordenadas

7/21/2019 HTML 5


Listas ordenadas Uma lista ordenada começa com o <ol> tag. Cada item da

lista começa com o <li> tag.

Os itens da lista serão marcados com números.

Tipos de Atributos:

7/21/2019 HTML 5


Listas de Descrição

7/21/2019 HTML 5


Listas Aninhadas

7/21/2019 HTML 5


Elementos em Bloco e em Inline

Elementos em Bloco começam e finalizam com uma quebra de linha;

EX: <h1>, <p>, <ul>, <table>, <div>

O elemento <div> é utilizado como recipiente para outros elementosHTML.

Elementos em inline são exibidos sem quebras de linha;

EX: <b>, <td>, <a>, <img>, <span>

O elemento <span> é utilizado como recipiente para textos.

7/21/2019 HTML 5


Layouts - www.liquidapsive.com

7/21/2019 HTML 5


Layouts www.liquidapsive.com

HTML 5

Documents

Transcript of HTML 5