![HTML5 No início de 2008 o W3C – consórcio de empresas de tecnologia para levar a Web ao seu máximo potencial – anunciou a primeira especificação do HTML 5[1]. O HTML (Hypertext Markup Language), que é responsável por organizar e formatar as páginas que visitamos na internet, está em sua versão 4.0.1 e continua evoluindo. Após cinco anos de trabalho, esta ainda é apenas uma versão de testes do HTML 5, enquanto a versão final está prometida para 2012. Foram feitas grandes alterações, que incluem: novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais, controle embutido de conteúdo multimídia, aprimoramento do uso off-line, melhoria na depuração de erros, entre outros avanços.](https://image.slidesharecdn.com/aulahtml-100819122307-phpapp01/85/Aula-html-32-320.jpg)
Carregado porSuissa
Aula html
O documento descreve o que é HTML, como funciona e suas principais tags e elementos. HTML é uma linguagem de marcação usada para estruturar e apresentar conteúdo para a web. É composta por tags que definem o tipo de conteúdo e sua estrutura. O documento também discute a diferença entre HTML e XHTML.
Aula html
- 1. HTML HyperText MarkupLanguage
- 2. O que é? É um acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto. A tecnologia é fruto do "casamento" dos padrões HyTime e SGML. HyTime é um padrão para a representação estruturada de hipermédia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiper-ligações. O padrão é independente de outros padrões de processamento de texto em geral. SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.
- 3. Para que serve? Serve para criarmos a estrutura dos dados mostrados em nossas páginas Web. Define qual informação será mostrada e onde.
- 4. Como? Criamos esta estrutura no documento HTML através de TAGs que nos mostram que tipo de informação é e qual lugar ela ocupará. HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.
- 5. Exemplo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="pt"> <head> <title>Título do Documento</title> </head> <body> texto, imagem, links, ... </body> </html>
- 6. Tags Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/". Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.
- 7. Tags Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />. A maneira mais correta é escreve-las em letra minúscula
- 8. Lista de Tags Como a lista é um pouco extensa aqui estão alguns links para consulta: http://www.truquesedicas.com/tutoriais/html/00007a.htm http://werbach.com/barebones/barebone_port.html
- 9. Exemplo <b>Este textodeve ser em negrito.</b> Este texto deve ser em negrito. <h1>Este é um título</h1> Este é um título <h2>Este é um sub título</h2> Este é um sub título
- 10. Cabeçalho É nossa primeira posição no documento HTML e é nela onde passamos a informação de como nosso documento deve ser interpretado. A informação mais importante para a corrreta exibição do HTML é a declaração DOCTYPE .
- 11. Doctype o queé e para que serve? O Doctype é uma declaração que vai na primeira linha de cada página HTML. Serve para especificar uma DTD (Document Type Definition) e assim possibilitar que os navegadores e ferramentas de validação identifiquem a linguagem utilizada numa página, assim como suas tags, atributos e estrutura.
- 12. Quais são? O HTML 4.01 especifica três tipos de documento: Strict, Transitional e Frameset.
- 13. DTD HTML Strict Usa-se para escrever código limpo, livre de misturas entre estilo e conteúdos. É usada em conjunto com estilos CSS ("Cascading Style Sheets"). Usa-se do seguinte modo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 14. DTD HTML Transitional A DTD HTML Transitional inclui tanto os elementos estruturais com os elementos de apresentação (desaconselhados porque misturam estilo com conteúdos.) Esta DTD deve ser usada quando somos obrigados a manter a compatibilidade com browsers que não suportam os estilos CSS na perfeição. Usa-se do seguinte modo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 15. DTD HTML Frameset A DTD HTML Frameset deve ser usada quando o documento contém molduras ("frames".) Esta DTD consiste na DTD Transitional mais os elementos relacionados com as molduras ("frames"). Usa-se do seguinte modo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 16. DTD HTML Frameset A DTD HTML Frameset deve ser usada quando o documento contém molduras ("frames".) Esta DTD consiste na DTD Transitional mais os elementos relacionados com as molduras ("frames"). Usa-se do seguinte modo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 17. Escolhendo um DOCTYPE A primeira escolha que você deve fazer é escolher entre HTML e XHTML. Está é uma questão um pouco complicada pois envolve varias questões técnicas e ideologias confusas, então vamos deixar isso de lado agora e começar de pelo mais fácil. A outra escolha que você deve fazer é entre Strict, Transitional e Frameset. Essa escolha é fácil de resolver então vamos lá…
- 18. Strict Strict pode ser um pouco complicado para iniciantes porque você precisa escrever um código impecável, sem erros, você não pode usar tags e atributos de apresentação como a tag <font>, <body bgcolor=”red”>, etc. E você deve usar CSS para qualquer tipo de estilo/apresentação/design que queria usar na página. Se você se sentir bem com tudo isso então você pode parrar por aqui mesmo, você fez a escolha certa, mas se ainda está incerto, por favor, continue lendo.
- 19. Transitional Foi destinado para ajudar os web designer a melhorarem seu códigos, para aprenderem. Com Transitional você poderá cometer alguns erros e usar tags e atributos de apresentação. É como uma transição entre a forma antiga e errada de codificar para a forma nova e correta.
- 20. Frameset Sua existência tem destino parecido com o Transitional, foi feito para designers que insistem em usar frames em suas páginas, frames são horríveis e devem ser banidos da face da terra, são ruins tanto para usuários que não conseguem “favoritar” suas páginas corretamente quanto para mecanismos de buscas que não conseguem indexar suas páginas de maneira correta. Mas se você quiser usar frames, então você deve usar um Doctype Frameset.
- 21. Validação w3c Quando terminado um documento HTML precisamos validá-lo para conferirmos se ele está nas regras estabelecidas pela w3c e caso conter erros, arrumá-los. http://validator.w3.org/
- 22. xHTML eXtensible HyperTextMarkup Language
- 23. Diferenças entre HTMLe xHTML As Diferenças Mais Imoprtantes: Os elementos XHTML devem estar devidamente aninhados Os documentos XHTML devem estar bem-formados Os nomes das tags devem estar em letras minúsculas Todos os elementos XHTML devem ser fechados
- 24. Diferenças entre HTMLe xHTML Na HTML alguns elementos podem estar indevidamente aninhados uns dentro dos outros como estes: <b><i>Este texto está em negrito e itálico</b></i> Na XHTML todos os elementos devem estar devidamente aninhados uns dentro dos outros como estes: <b><i>Este texto está em negrito e itálico</i></b>
- 25. Diferenças entre HTMLe xHTML <ul> <li>Café</li> <li>Chá <ul> <li>Chá preto</li> <li>Chá verde</li> </ul> <li>Leite</li> </ul> Correto: <ul> <li>Café</li> <li>Chá <ul> <li>Chá preto</li> <li>Chá verde</li> </ul> </li> <li>Leite</li> </ul>
- 26. DOCTYPEs O XHTML 1.0 especifica quatro tipos básicos de documento XML: Strict, Transitional, Frameset e Basic.
- 27. DTD XHTML Strict Usa-se para escrever código limpo, livre de misturas entre estilo e conteúdos. É usada em conjunto com estilos CSS ("Cascading Style Sheets"). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 28. DTD XHTML Transitional A DTD XHTML Transitional junta os elementos estruturais com aqueles elementos que o W3C quer eliminar da linguagem porque misturam o estilo com os conteúdos. Esta DTD deve ser usada quando somos obrigados a manter a compatibilidade com browsers que não suportam estilos CSS na perfeição. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 29. DTD XHTML Frameset Usa-se em documentos que contêm molduras ("frames") <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- 30. DTD XHTML Basic Versão básica do XHTML. Contém apenas os elementos indispensáveis para construir páginas úteis. Serve de base para construir outras linguagens da família XHTML, como o XHTML Mobile Profile, que foi concebido para criar páginas para a Internet Móvel. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
- 31.
- 32. HTML5 No início de 2008 o W3C – consórcio de empresas de tecnologia para levar a Web ao seu máximo potencial – anunciou a primeira especificação do HTML 5[1]. O HTML (Hypertext Markup Language), que é responsável por organizar e formatar as páginas que visitamos na internet, está em sua versão 4.0.1 e continua evoluindo. Após cinco anos de trabalho, esta ainda é apenas uma versão de testes do HTML 5, enquanto a versão final está prometida para 2012. Foram feitas grandes alterações, que incluem: novas API’s, entre elas uma para desenvolvimento de gráficos bidimensionais, controle embutido de conteúdo multimídia, aprimoramento do uso off-line, melhoria na depuração de erros, entre outros avanços.
- 33. HTML5 DOCTYPE O HTML5 utiliza um DOCTYPE genérico: <!DOCTYPE html> <html lang="pt-br">
- 34. Comparação Referência: http://www.w3schools.com/html5/html5_reference.asphttp://www.pinceladasdaweb.com.br/html5/ http://www.mxmasters.com.br/html5/conhecendo-html-5/ <body> <div id="header">...</div> <div id="menu">...</div> <div class="post">...</div> <div id="sidebar">...</div> <div id="rodape">...</div> </div> </body> <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
- 35. HTML5 http://www.youtube.com/html5 http://html5-showcase.com/http://www.weeby.com.br/category/html5-css3-html-css/ http://shapeshed.com/examples/techno-kittens/ http://html5demos.com/
- 36. CSS Cascading StyleSheets
- 37. O que é? Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo. Lista de atributos: http://www.criarweb.com/artigos/108.php
- 38. Como? Podemos utilizaro CSS de 3 formas: inline linkado no documento no documento importado
- 39. inline <a href="#"style="color: #333333">LINK</a> Altamente desaconselhável
- 40. linkado <link type="text/css"href="estilo.css" media="all"> Altamente aconselhável
- 41. no documento <styletype="text/css"> ... estilos </style>
- 42. no documento importado<style type="text/css"> @import url('estilo.css'); </style>
- 43. Exemplo hr {color:#5e5e5e;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}