HTML5. Prof. Salustiano Rodrigues de Oliveira

Tamanho: px

Começar a partir da página:

Download "HTML5. Prof. Salustiano Rodrigues de Oliveira saluorodrigues@gmail.com www.profsalu.com.br"

Jonathan di Castro Pinheiro
8 Há anos
Visualizações:

1 HTML5 Prof. Salustiano Rodrigues de Oliveira

2 HTML5 HTML5 é considerada a próxima geração do HTML e suas funcionalidades inovadoras o tornam uma alternativa à tecnologias proprietárias como Adobe Flash ou Microsoft Silverlight. HTML5 é um padrão aberto e já é suportado pela maioria dos novos navegadores. Além das novas tags adicionadas ao HTML5 ainda tem- se a possibilidade de melhor estruturar um site, permitindo que um motor de busca logo identifique cada área da página a partir de suas tags específicas.

HTML5 é um padrão aberto e já é suportado pela maioria dos novos navegadores.

3 HTML 5 e a Web Semântica Cada vez mais informações são criadas na Web, principalmente com o advento da Web 2.0 em que o usuário pode criar o seu próprio conteúdo por meio das redes sociais ou Web Sites pessoais. Tornou- se cada vez mais necessário o desenvolvimento de ferramentas que retornem resultados mais precisos diante de tantas informações irrelevantes que temos na Web.

0 em que o usuário pode criar o seu próprio conteúdo por meio das redes sociais ou Web Sites

4 HTML 5 e a Web Semântica Motores de busca como Google e Yahoo apresentam muitas limitações quanto à eficiência e eficácia ao recuperar informações, pois até então a busca é baseada em palavras- chave contidas nos textos. Além disso, outro problema reside nos próprios detentores do conteúdo, que são os sites, em que se prioriza muitos mais a exibição e formatação do conteúdo, sendo assim o conteúdo pobremente descrito e impossibilitando que as máquina conheçam o contexto e o sentido em que a informação foi descrita.

Além disso, outro problema reside nos próprios detentores do conteúdo, que são os sites, em que se prioriza muitos mais a

5 HTML 5 e a Web Semântica Com a chegada do HTML5 tem- se um novo cenário em que agora novos elementos para estruturar as informações com foco na Web Semântica foram criadas. Com isso os motores de busca também poderão se beneficiar dessas novas características que as página da web trarão consigo. Todos esses benefícios serão possíveis porque agora os motores de busca conhecerão cada parte do site e com isso poderão fazer inferências sob as informações de acordo com o sentido e o contexto podendo oferecer aos usuários resultados mais relevantes.

Com isso os motores de busca também poderão se beneficiar dessas novas características que as página da web trarão consigo.

6 Evolução da Web

7 HTML5 - O que mudou? De uma maneira bem simples e direta: o HTML5 faz o que antes só era possível com outras ferramentas e linguagens de programação. Com poucos, e simples códigos, o HTML5 nos proporciona efeitos muito úteis, de uma maneira bem lógica e fácil de aprender. O objetivo do HTML 5 é criar uma forma mais simples, fácil e ágil de desenvolver websites. Seja por organização, padronização do código ou qualquer outra coisa que facilite todos os nichos do desenvolvimento web.

8 HTML5 - O que mudou? Esta nova versão do HTML traz mudanças significativas com a criação de novas tags que possibilitam unir as partes da página de forma lógica. O que não significa necessariamente um código mais enxuto, pois o objetivo é torná- lo mais organizado. Diferentemente do XHTML, o HTML 5 é case insensitive, ou seja, permite que as tag s sejam escritas tanto em minúsculas, quanto em maiúsculas. No HTML 5 não é mais obrigatório o fechamento da tag de elementos como <img>, <br>.

9 Principais mudanças DOCTYPE XHTML <!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01//EN" " HTML5 <!DOCTYPE html> E quando o HTML5 mudar, não vamos mudar esse doctype, já foi decidido que esse vai ser permanente. Ou seja, uma coisa a menos para se preocupar.

10 Principais mudanças CSS XHTML <link type="text/css" rel="stylesheet" ref="estilo.css > HTML5 <link rel="stylesheet" href="estilo.css >

11 Principais mudanças charset XHTML <meta http- equiv="content- type" content="text/html; charset=utf- 8 > HTML5 <meta charset="utf- 8 >

12 Principais mudanças cabeçalhos (h n ) A hierarquia de cabeçalhos (h1 - h6) também foi alterada. Agora ela não é mais só relativa à página, mas à seção da página. É possível ter diversos h1 em uma mesma página, sendo que cada um em cada lugar diferente e sem influenciar nos outros.

Agora ela não é mais só relativa à página, mas à seção da página.

13 Estrutura de Página XHTML

14 XHTML vs HTML5

15 <header> Elemento <header> do HTML5 - A tag cabeça Antes de mais nada, cuidado para não confundir <header> com <head>. Como o nome sugere, ele é usado para estruturar um cabeçalho, geralmente de informações, de uma página, como o nome do site, slogan, marca, títulos etc.

Como o nome sugere, ele é usado para estruturar um cabeçalho,

16 <nav> Elemento <nav> do HTML5 - Navegando Pelo Site A tag <nav> se refere à navegação de um site, que geralmente é composta por links com as principais páginas ou seções. É um elemento genérico, pois no geral, os sites realmente possuem um local para o usuário navegar, se localizar e achar facilmente conteúdo em uma página. Ou seja, o <nav> é um elemento para estruturar um site.

É um elemento genérico, pois no geral, os sites realmente possuem um local para o usuário

17 <article> Elemento <article> do HTML5 - O conteúdo Como o nome pode sugerir, a tag <article> define e estrutura uma região do seu site, de modo a deixar ela mais independente. Ele fica independendo do menu de navegação, barra lateral ou rodapé. Estruturando e definindo este elemento <article>, você separa o conteúdo (o "grosso") da página, do restante do site, como do design.

Ele fica independendo do menu de navegação, barra lateral ou rodapé.

18 <section> Elemento <section> do HTML5 - Dividindo e Estruturando Sites A tag section é, simplesmente, uma seção. Ele define e estrutura diversas partes de uma página, é bem genérica e seu uso ajuda a organizar os elementos de uma página. Com este elemento do HTML5, você poderá agrupar elementos que tem algo em comum, como uma seção na página de um artigo, com informações do autor e uma foto. É uma section do autor. As <section> são bem gerais e tem a função de agrupar elementos que fazem parte de um mesmo bloco lógico e estrutural, com relações entre si.

Com este elemento do HTML5, você poderá agrupar elementos que tem algo em comum, como uma seção na página de um artigo, com informações do

19 <footer> Elemento <footer> do HTML5 - Rodapé Os rodapés são, geralmente, trechos de um site que aparecem ao fim de cada página. Porém, ao contrário do que muitos pensam, não é obrigado que este elemento fique embaixo da página. Sua ideia é a de dar informações sobre a página, sobre o site, listar outros links interessantes ou informações de direitos autorais.

Porém, ao contrário do que muitos pensam, não é obrigado que este elemento fique embaixo

20 <aside> Elemento <aside> do HTML5 - Elementos à parte Aside, em inglês, quer dizer de lado. Usamos esta tag para definir elementos, ou agrupá- los, de modo que formem um bloco que não está diretamente ligado ao conteúdo principal da página. É comum o uso do elemento <aside> em HTML5, para definir regiões para publicidade, links laterais, banners e tudo mais que não for conteúdo principal.

diretamente ligado ao conteúdo principal da página.

Documentos relacionados

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de