HTML 5
-
Upload
julio-gomes -
Category
Documents
-
view
2 -
download
0
description
Transcript of 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
http://slidepdf.com/reader/full/html-5-56da0e90704df 2/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 3/39
Exemplo HTML
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 4/39
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 5/39
Versões HTML
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 6/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 7/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 8/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 9/39
Atributo Title
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 10/39
O atributo href
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 11/39
Atributos Tamanho
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 12/39
Atributo alt
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 13/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 14/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 15/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 16/39
Regras horizontais HTML
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 17/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 18/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 19/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 20/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 21/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 22/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 23/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 24/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 25/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 26/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 27/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 28/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 29/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 30/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 31/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 32/39
Listas em HTML Em HTML, podemos ter listas não-ordenadas, listas ordenadas e listas de descri
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 33/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 34/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 35/39
Listas de Descrição
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 36/39
Listas Aninhadas
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 37/39
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
http://slidepdf.com/reader/full/html-5-56da0e90704df 38/39
Layouts - www.liquidapsive.com
7/21/2019 HTML 5
http://slidepdf.com/reader/full/html-5-56da0e90704df 39/39
Layouts www.liquidapsive.com