Médio Integrado Ana Paula Alves de Lima

Apresentação em tema: "Médio Integrado Ana Paula Alves de Lima"— Transcrição da apresentação:

1 Médio Integrado Ana Paula Alves de Lima
Introdução HTML 5 Médio Integrado Ana Paula Alves de Lima Este modelo pode ser usado como arquivo de partida para apresentar materiais de treinamento em um cenário em grupo. Seções Clique com o botão direito em um slide para adicionar seções. Seções podem ajudar a organizar slides ou a facilitar a colaboração entre vários autores. Anotações Use a seção Anotações para anotações da apresentação ou para fornecer detalhes adicionais ao público. Exiba essas anotações no Modo de Exibição de Apresentação durante a sua apresentação. Considere o tamanho da fonte (importante para acessibilidade, visibilidade, gravação em vídeo e produção online) Cores coordenadas Preste atenção especial aos gráficos, tabelas e caixas de texto. Leve em consideração que os participantes irão imprimir em preto-e-branco ou escala de cinza. Execute uma impressão de teste para ter certeza de que as suas cores irão funcionar quando forem impressas em preto-e-branco puros e escala de cinza. Elementos gráficos, tabelas e gráficos Mantenha a simplicidade: se possível, use estilos e cores consistentes e não confusos. Rotule todos os gráficos e tabelas.

2 HTML HTML = Hypertext Markup Language (Linguagem de Marcação de Hipertexto); Linguagem Interpretada por um Browser; Define o formato do documento e as ligações com outros documentos;

3 História do HTML Desenvolvido originalmente por Tim Berners-Lee;
Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0; Ainda não era um padrão;

4 História do HTML Em 1997 o W3C criou a versão 3.2;
A partir daí HTML se tornou um padrão; Em 1999 saiu a especificação do HTML4.

5 HTML Tags básicas: <a></a>; <p></p>;
<img/>; <div></div> <table></table> <br/>

6 HTML Trocando em miúdos:
“O HTML é uma linguagem para publicação de conteúdo na Web (texto, imagem, vídeo, áudio, etc.)”.

7 Esta é outra opção para um slide de Visão Geral usando transições.

8 World Wide Web Consortium; Fundado por Tim Berners-Lee;
Visa desenvolver padrões para a criação e a interpretação de conteúdos para Web; Agrega hoje 300 integrantes ligados a empresas, órgão governamentais e organizações independentes; Sua idéia é acabar com essa bagunça e criar normas para criação de páginas HTML. Todo navegador deve seguir os padrões estabelecidos pelo W3C. Site da W3C:

9 Padrões: CSS DOM(JavaScript) XML XHTML 1.0
Somente em 2008 que o W3C lançou as especificações iniciais do HTML5!

10 Diferenças O HTML4 ainda não trazia diferencial real para a semântica do código. Também não facilitava a manipulação dos elementos via JavaScript ou CSS. O HTML5 fornece ferramentas para a CSS e o JavaScript fazerem seu trabalho da melhor maneira possível. O HTML5 também cria novas tags e modifica a função de outras. Seu desenvolvimento é modular.

11 Mas como reconhecer um HTML 4 de um HTML 5?
X Esta é outra opção para um slide de Visão Geral.

12 Novos elementos de marcação
Em versões anteriores o HTML não tinha uma classificação semântica (significado da informação) do conteúdo. Nos casos mais comuns tudo era DIV que semanticamente é um divisor de conteúdo. No HTML5 foram introduzidas novos elementos de marcação de conteúdo.

13

14 Veja... Digamos que você use uma tag do HTML 4 que não é mais utilizada na versão 5 dentro de uma página cujo doctype está dizendo ao navegador que se trata de um HTML 5? O que vai acontecer? Vai dar erro?

15 Quirks Mode Use um cabeçalho de seção para cada um dos tópicos, para que a transição seja evidente ao público.

16 Quirks Mode... É um conjunto de regras de
interpretação que são ativadas quando o navegador não entende qual a versão do HTML. Ele interpretará aquela página da maneira dele, seguindo padrões do próprio navegador. Adicione slides a cada seção de tópico conforme necessário, incluindo slides com tabelas, gráficos e imagens. Consulte a próxima seção para obter um exemplo tabela, gráfico, imagem e layouts de vídeo.

17 O Quirks é importante, pois ele garante a visualização do conteúdo da página mesmo com erros;
Mas é bom seguir sempre os padrões do W3C para a construção de página web para não ter erro.

18 Mas como saber se o código html está seguindo os padrões internacionais do W3C?
Resuma. Torne seu texto o mais breve possível para manter um tamanho de fonte maior.

19 Apresentando o Validador do W3C: http://validator.w3.org/
Checa se o código html está dentro dos padrões!

20 Vamos testar um código... Escolha um site e clique com o botão direito em qualquer lugar da página e clique em Exibir código fonte da página, copie o código e cole no site do validator:

21 Principais Elementos do HTML 5
Esta é outra opção para um slide de Visão Geral usando transições.

22 section A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.

23 nav O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.

24 article O elemento article representa uma parte da   página que poderá ser distribuído. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.

25 aside O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em side­bars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo   principal do website. Esta é outra opção para um slide de Visão Geral usando transições.

26 header O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.

27 footer O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.

28 video Elemento de link para arquivo de vídeo.

29 Tags descontinuadas do HTML4
Algumas tags foram descontinuadas simplesmente porquê o CSS já cumpre com essa função!

30 Atributos descontinuados
Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS: align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. alink, link, text e vlink como atributos da tag body. background como atributo da tag body. bgcolor como atributo da tag table, tr, td, th e body. border como atributo da tag table e object. cellpadding e cellspacing como atributos da tag table. char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr. clear como atributo da tag br. compact como atributo da tag dl, menu, ol e ul.

31 Atributos descontinuados
frame como atributo da tag table. frameborder como atributo da tag iframe. height como atributo da tag td e th. hspace e vspace como atributos da tag img e object. marginheight e marginwidth como atributos da tag iframe. noshade como atributo da tag hr. nowrap como atributo da tag td e th. rules como atributo da tag table. scrolling como atributo da tag iframe. size como atributo da tag hr. type como atributo da tag li, ol e ul. valign como atributo da tag col, colgroup, tbodny, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e pre.

32 Para dar um gostinho do CSS...
Abra o notepad++ e escreva o seguinte código e grave-o como "centralizar.html": <!DOCTYPE html> <html> <head> <style type="text/css"> h1 { text-align: center; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Centralizando com CSS</title> </head> <body> <h1>Olha que legal, eu estou no meio. ;)</h1> </body> </html>