Вы находитесь на странице: 1из 24

HTML, XHTML, HTML

5
Arthur Emanuel de O. Carosia
Entidades e Smbolos
HTML
Alguns caracteres em HTML so reservados

O browser pode misturar alguns caracteres


com as tags:
menor que (<)
maior que (>)

Entidades so utilizadas para exibir caracteres


reservados em HTML:
&nomeDaEntidade;
&#NmeroDaEntidade;
Entidades e Smbolos
HTML
Resultado Descrio Nome da Nmero da
Entidade Entidade
Espao em &nbsp; &#160;
branco
< Menor &lt; &#60;
> Maior &gt; &#62;
& E comercial &amp; &#38;
cent &cent; &#162;
pound &pound; &#163;
yen &yen; &#165;
euro &euro; &#8364;
copyright &copy; &#169;
registered &reg; &#174;
trademark
Entidades e Smbolos
HTML
Acento Caracter Construo Resultado

a a&#768; a
a a&#769; a
a a&#770; a
a a&#771;
O O&#768; O
O O&#769; O
O O&#770; O
O O&#771; O
HTML Charset
ASCII foi o primeiro padro de codificao de
caracteres, representando 127 caracteres:
nmeros (0-9) , letras (A-Z) e alguns caracteres
especiais

ISO-8859-1 foi o conjunto de caracteres padro


para HTML 4.
256 cdigos de caracteres diferentes

A codificao de caracteres padro foi alterado


para UTF- 8 em HTML5.
abrange quase todos os caracteres e smbolos do
mundo
HTML Charset
Para exibir uma pagina HTML corretamente, um
navegador web deve saber o conjunto de caracteres
usado na pagina.

Isso especificado na tag <meta>, dentro de


<head>

HTML4:
<metahttp-equiv="Content-
type"content="text/html;charset=ISO-8859-1">

HTML5:
<metacharset="UTF-8">
HTML vs XHTML
O que XHTML ?
Extensible HyperText Markup Language

Muito semelhante ao HTML

Mais rigoroso do que o HTML

Definio de HTML como um aplicativo XML

Suportado por todos os principais navegadores


HTML vs XHTML
Como converter de HTML para XHTML
Adicionar um XHTML <!DOCTYPE>para a primeira
linha de cada pagina
Adicionar um atributo xmlns ao elemento html de
cada pagina
Mudar todos os nomes de elementos para
minsculas
Feche todos os elementos vazios
Mudar todos os nomes de atributos para
minsculas
Citar todos os valores de atributo
Design Responsivo
Desenvolvimento de paginas que podem ter
tamanhos ajustaveis a tela do dispositivo

Ideal para tablets e telefones celulares

Definido principalmente com o uso de CSS


HTML 5
HTML 5

Indicao de que o
documento HTML 5

Indicao da
Codificao
HTML 5 - Novidades
Elementos semanticos:
<header>, <footer>, <article>, e <section>.

Atributos de fomulario:
number, date, time, calendar, e range.

Elementos graficos:
<svg> and <canvas>.

Elementos multimdia:
<audio> and <video>.
HTML 5 - Novidades
Novas APIs (Application Programming
Interfaces):
Localizao Geografica
Drag and Drop
HTML Application Cache
HTML Web Workers
HTML SSE
HTML 5 Elementos Semnticos
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML 5 Elementos Semnticos
Com HTML4, os desenvolvedores usaram seus
prprios nomes de atributos para os elementos da
pagina de estilo:
cabealho, superior, inferior, rodap, menu, navegao,
principal, container, o contedo do artigo, barra lateral,etc.

Dificultou para os motores de busca


identificarem o contedo correto pagina web.
Com elementos HTML5 isso vai se tornar mais fcil.

Web Semntica
Permite que os dados sejam compartilhados e
reutilizados em aplicaes, empresas e comunidades.
HTML 5 - Multimdia
O HTML 5 promete um futuro mais facil para
recursos multimdia:
Vdeos
udio
Plugins
Youtube
HTML 5 - Multimdia
Reproduo de vdeos em HTML
Antes de HTML5, no havia padro para exibio
de vdeos em uma pagina web.
Vdeos s poderiam ser inseridos na pagina com
um plug-in (como flash).
HTML 5 - Multimdia
Reproduo de vdeos em HTML
Feito com o uso da tag <video>
O atributo controls insere os controles do vdeo
No entanto, o vdeo no ser exibido em
navegadores desatualizados
Pode ser adicionado o atributo autoplay para o
vdeo se inciar assim que a pgina for
carregada
HTML 5 - Multimdia
Reproduo de audio em HTML
Antes de HTML5, no havia nenhuma norma para
a reproduo de arquivos de audio em uma
pagina web.
Arquivos de audio s poderia ser disponibilizados
com um plug-in (como flash).
HTML 5 - Multimdia
Reproduo de audio em HTML
Tag <audio> especifica uma forma padro para
inserir audio em uma pagina web.
O audio pode vir de diversos formatos, definidos
com a tag <source>
HTML 5 - Multimdia
Plug-ins
Ampliam a funcionalidade padro de um
navegador web.
<object> e <embed>
Definem um objeto incorporado em um
documento HTML.
Applets Java, leitores de PDF, Flash, etc.
HTML 5 - Multimdia
Reproduzir um vdeo do YouTube em HTML
Para reproduzir o vdeo em uma pagina web, voc
pode fazer o upload para o YouTube, e em
seguida, insira o cdigo HTML em sua pagina web
para exibi-lo.

Uso das tags <object> e <embed>


Exerccio
Converta a estrutura de <div> elaborado
na pagina de notcias da aula anterior para
os elementos semanticos do HTML 5 e
reestruture sua pagina.

Insira vdeos e audio em cada notcia.


HTML, XHTML, HTML
5
Arthur Emanuel de O. Carosia

Вам также может понравиться