HTML is a web language. It help create a website. HTML is a basic language. HTML5 is the latest and update language. If you want to create a website then HTML should be learn. HTML language …Full description
Full description
Full description
HTML5 Quick Reference Guide
html e programação
htmlFull description
HTML principiosDescripción completa
Descrição completa
Full description
Full description
html basic
Descripción: Apostila que ensina o HTML básico
HTML merupakan bahasa ibu bagi internet. Tak peduli ASP, PHP, JSP, atau lainnya, semua berangkat dari HTML. Karenanya, penguasaan HTML merupakan hal wajib bagi anda yang ingin membuat halama…Description complète
Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann
HTML5
VISÃO GERAL WORLD WIDE WEB HISTÓRICO W3C
HTML5
VISÃO GERAL WORLD WIDE WEB HISTÓRICO W3C
HTML – Visão Geral
World Wide Web Em 1989 Tim Berners-Lee inventou a World Wide Web: Criou o termo World Wide Web; Desenvolveu o primeiro servidor web; Desenvolveu o protocolo http; Desenvolveu o primeiro naveg navegador; ador; Em 1990 desenvolveu a primeira versão do HTML (HyperText Markup Language); Especificações iniciais para URIs, HTTP e HTML foram refinadas posteriormente.
•
•
•
•
•
•
HTML – Visão Geral
World Wide Web
Primeiro website criado por Tim Berners-Lee que trazia informações sobre o projeto WWW. WWW.
HTML – Visão Geral
W3C – World Wide Web Consortium
Em outubro 1994 Tim Berners-Lee fundou a W3C com o objetivo de desenvolver padrões, especificações técnicas e orientações que permitam o crescimento a longo prazo da web.
HTML – Visão Geral
W3C – World Wide Web Consortium Alguns padrões definidos pela W3C: •
•
•
•
•
•
•
•
XML; HTML; DOM; CSS; SVG; MathML; Padrões para Web Semântica; Padrões para Browsers.
Os padrões são definidos por grupos de trabalho.
HTML – Visão Geral
W3C – World Wide Web Consortium Um consórcio internacional que conta com: •
•
•
Organizações filiadas (mais de 350 membros); Uma equipe em tempo integral; Participação do público.
HTML – Visão Geral
W3C – World Wide Web Consortium
A W3C é administrada através de um contrato comum entre três instituições que o hospedam: MIT (EUA), ERCIM (Europa), e Keio University (Japão).
HTML – Visão Geral
W3C – World Wide Web Consortium Possui também os escritórios regionais, como a W3C Brasil. O escritório no Brasil tem como objetivos: Disseminar a cultura de adoção de padrões para a web; Organizar atividades na região para promover a W3C; Traduzir para o português textos da W3C relevantes para o Brasil; Propor políticas e procedimentos relativos à regulamentação do uso da internet; Recomendar padrões técnicos para o desenvolvimento da web no país; •
•
•
•
•
HTML – Visão Geral
Desenvolvimento da HTML5 De acordo com a W3C, a Web é baseada em 3 pilares: 1. Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI; 2. Um protocolo de acesso para acessar estas fontes, hoje o HTTP; 3. Uma linguagem de hipertexto, para a fácil navegação entre as fontes de informação: a HTML;
HTML – Visão Geral
Desenvolvimento da HTML5 1989 1990 1994 1997 1999 2000 2001 2004
Tim Berners-Lee cria a World Wide Web Tim Berners-Lee cria a 1ª versão da HTML HTML 2 – já incluia a tag HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 1.1 Apple, Mozilla e Opera criam a WHAT WG (Web Hypertext Application Technology Working Group)
HTML – Visão Geral
Desenvolvimento da HTML5
2007 2009 2010 2011
W3C retoma o HTML Working Group W3C descontinua XHTML Apple, Google, Microsoft, Mozilla e Opera implementam HTML5
HTML – Visão Geral
Desenvolvimento da HTML5
A expectativa da W3C é que a HTML5 se torne uma recomendação em 2014.
HTML – Visão Geral
Desenvolvimento da HTML5
O que é a HTML5? HTML5 é a nova versão da HTML. Além de definir regras de marcação HTML e XHTML, define APIs (DOM) que formarão a base da arquitetura web. http://www.w3.org/html/wg/
HTML – Visão Geral
Desenvolvimento da HTML5
Objetivos da HTML5: Novos elementos e modificação da função de outros. Elemento strong, por exemplo, não aparece mais apenas como elemento de apresentação, mas semântico, como marcador de um destaque dentro de um texto; Novos atributos, modificação de outros e novos valores de atributos; Elementos e atributos descontinuados (ex: font, center, frame); Elementos que melhoram a semântica do código; Mais interatividade sem a necessidade de plugins; Novo DOM (Document Object Model): nova API, eventos,... Interoperabilidade e Retrocompatibilidade. •
•
•
•
•
•
HTML – Visão Geral
Desenvolvimento da HTML5
HTML5 + CSS3 + JavaScript + outras especificações
HTML5 SUPORTE DOS NAVEGADORES E EXTRATÉGIAS DE USO
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
HTML5 nos navegadores atuais Para o desenvolvimento da HTML5 e CSS3, a W3C dividiu o desenvolvimento de cada tecnologia em módulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utilizarem as novidades das linguagens.
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
Teste de compatibilidade dos browsers:
html5test.com
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
HTML5 no Internet Explorer •
•
HTML5 apresenta vários novos elementos; IE8 e anteriores não aplicam regras CSS a elementos desconhecidos;
CSS:
header{height:150px; background-color:#cccccc;}
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
HTML5 no Internet Explorer Script desenvolvido por Remy Sharp:
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
Biblioteca JavaScript Modernizr •
•
•
Biblioteca JavaScript para detectar o suporte nativo dos navegadores; Detecta suporte ao HTML5 e CSS3; Constantemente atualizada, disponível em www.modernizr.com;
<script src="js/modernizr-2.5.3.js"> if(Modernizr.video){ // script para uso do elemento video } else { // }
Suporte dos navegadores e estratégias de uso
Compatibilidade da HTML5
Biblioteca JavaScript Modernizr Para o CSS3, a biblioteca Modernizr detecta o suporte CSS do navegador e adiciona valores ao atributo class da tag . •
Desenvolvedor deve acrescentar um class na tag html:
A biblioteca Modernizr vai acrescentar dinamicamente valores ao atributo class da tag html: <meta charset="UTF-8" /> Palestra HTML5
HTML5 – Estrutura básica, DOCTYPE e charsets Sintaxe XML do HTML5, para servir o documento como XML: Example document
Example paragraph
HTML5 Novos elementos e atributos
HTML5 – Novos elementos e atributos
Semântica dos documentos em HTML A função da HTML é indicar que tipo de informação a página está exibindo; Não há um padrão para nomenclatura de IDs e Classes; A HTML5 apresenta novos elementos que melhoram a semântica dos documentos web; Alguns dos novos elementos ajudam a definir setores principais nos documentos HTML; Ajuda o trabalho de agentes de usuário como os sistemas de busca que guardam informações mais exatas sobre o site. •
•
•
•
•
HTML5 – Novos elementos e atributos
Semântica dos documentos em HTML HTML4
HTML5
HTML5 – Novos elementos e atributos
Elemento header Representa um cabeçalho; Destina-se a marcar o cabeçalho de uma sessão ou da página como um todo. Geralmente deve conter os elementos h1-h6 (não obrigatoriamente). • •
•
header - HTML language reference
HTML5 – Novos elementos e atributos
Elemento header
Little Green Guys With Guns
Important News
To play today's games you will need to update your client.
Games
You have three active games:
...
header - HTML language reference
HTML5 – Novos elementos e atributos
Elemento footer Representa um rodapé; Destina-se a marcar o rodapé de uma sessão ou da página como um todo; Deve conter informações sobre o conteúdo da seção ou página, como seu autor, links para documentos relacionados, direitos autorais e similares. • •
•
footer - HTML language reference
HTML5 – Novos elementos e atributos
Elemento footer
A dolor sit amet, consectetur adipisicing elit....
footer - HTML language reference
HTML5 – Novos elementos e atributos
Elemento nav Marca uma seção da página que contenha links para outras páginas ou para outras partes dentro da própria página. Nem todos os grupamentos de links devem ser marcados com este elemento, somente os maiores grupos de links. •
•
nav - HTML language reference
HTML5 – Novos elementos e atributos
Elemento nav
nav - HTML language reference
HTML5 – Novos elementos e atributos
Elemento article Marca uma sessão de um conteúdo que forma uma parte independente de um documento ou site, por exemplo, um artigo de uma revista, uma entrada de um blog, um conteúdo fornecido via RSS, um post em um fórum, um comentário postado por um visitante, um conteúdo independente. •
article - HTML language reference
HTML5 – Novos elementos e atributos
Elemento article
The Very First Rule of Life
If there's a microphone anywhere near you.
...
Comments
Yeah! Especially when talking about your!
article - HTML language reference
HTML5 – Novos elementos e atributos
Elemento section Marca , genericamente, uma seção na página, geralmente com um título ou cabeçalho; Entende-se seção como um grupamento de conteúdos tratando de um mesmo tema; Não utilizar como container genérico. Quando for necessário um container genérico a ser usado por fins de estilização ou para ser manipulado por script, devemos empregar o elemento div. •
•
•
section - HTML language reference
HTML5 – Novos elementos e atributos
Elemento section
The apple is the pomaceous fruit of the apple tree.
Red Delicious
These bright red apples are the most common ...
Granny Smith
These juicy, green apples make a great filling ...
placeholder < input name=” pesquisa” placeholder=”Search here ”> required pattern Custom validators novalidate e formnovalidate
HTML5 – Novos elementos e atributos
Novos atributos para formulários • • •
O novo atributo form para elementos como input, select e textarea; Permitem que os controles sejam associados a um formulário; Os controles não precisam ser descendentes do elemento form.