Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb                                                    4  ...
DWEB - Design para Web / Carlos José                                             Contato                                  ...
DWEB - Design para Web / Carlos José                                   Objetivo da Aula    Apresentar a linguagem    de ma...
DWEB - Design para Web / Carlos José                                   Agendan Acentuação   em HTML5n Lista de tag’s e  ...
DWEB - Design para Web / Carlos José                                   Introdução as linguagens de marcaçãon  Introdução ...
DWEB - Design para Web / Carlos José                                    Introdução as linguagens de marcaçãon  Introdução...
DWEB - Design para Web / Carlos José                                    Introdução as linguagens de marcaçãon  Introdução...
DWEB - Design para Web / Carlos José                                    Introdução as linguagens de marcaçãon  Introdução...
DWEB - Design para Web / Carlos José                                    Introdução as linguagens de marcaçãon  Estrutura ...
DWEB - Design para Web / Carlos José                                      Introdução as linguagens de marcaçãon    Estrut...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Estrutura...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Estrutura...
DWEB - Design para Web / Carlos José                                     Introdução as linguagens de marcaçãon  Introduçã...
DWEB - Design para Web / Carlos José                                                        HTML - <!DOCTYPE>n    Lista d...
DWEB - Design para Web / Carlos José                                               HTML - <html>n  Lista     de Tags e at...
DWEB - Design para Web / Carlos José                                                           HTML - <html>n  Lista     ...
DWEB - Design para Web / Carlos José                                           HTML - <body>n  Lista     de Tags e atribu...
DWEB - Design para Web / Carlos José                                                                  HTML - <body>n  Lis...
DWEB - Design para Web / Carlos José                                    HTML – exe01.html<!DOCTYPE html><html> <head>  <me...
DWEB - Design para Web / Carlos José                                                HTML - <p> Parágrafon  Lista     de T...
DWEB - Design para Web / Carlos José                                           HTML - <p> Parágrafon  Lista       de Tags...
DWEB - Design para Web / Carlos José                                    HTML - <br> Quebra de linhan  Lista     de Tags e...
DWEB - Design para Web / Carlos José                                          HTML - <hr> Linha horizontaln    Lista de T...
DWEB - Design para Web / Carlos José                                         HTML - <!--...--> comentárion  Lista     de ...
DWEB - Design para Web / Carlos José                                    HTML – exe02.html<!DOCTYPE html><html> <head>  <me...
DWEB - Design para Web / Carlos José                                      HTML - <h1> Definição de cabeçalhosn  Lista    ...
DWEB - Design para Web / Carlos José                                    HTML - <h1> Definição de cabeçalhosn  Lista      ...
DWEB - Design para Web / Carlos José                                    HTML – exe03.html<!DOCTYPE html><html> <head>  <me...
DWEB - Design para Web / Carlos José                                        Perguntas                                    ?...
DWEB - Design para Web / Carlos José                                                  Considerações Finaisn  Atenção     ...
Próximos SlideShares
Carregando em…5
×

Unb 2012.1 - dweb - 04 - html5 básico - parte i

1.041 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.041
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Unb 2012.1 - dweb - 04 - html5 básico - parte i

  1. 1. Curso Superior de Tecnologia em Design GráficoDWEB - Design paraWeb 4 HTML 5 – básico I “Ninguém despreze a tua mocidade; mas sê o exemplo dos fiéis, na palavra, no trato, no amor, no espírito, na fé, na pureza.” 1 Timóteo 4:121 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  2. 2. DWEB - Design para Web / Carlos José Contato Carlos José carlosjose.unibratec@gmail.com www.carlosjose.net twitter.com/carlosjoser2n2 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  3. 3. DWEB - Design para Web / Carlos José Objetivo da Aula Apresentar a linguagem de marcação HTML 5 com seus conceitos básicos, bem como a construção de documentos.3 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  4. 4. DWEB - Design para Web / Carlos José Agendan Acentuação em HTML5n Lista de tag’s e atributosn Exercícios4 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  5. 5. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Acentuação n  Não é recomendável que os documentos Web contenham acentos. n  Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML pode ficar truncado. n  Para contornar este problema, existe uma tabela de códigos que substituem os acentos. n  Os navegadores transformam estes códigos em caracteres acentuados e o documento poderá ser transmitido por qualquer meio.5 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  6. 6. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Tabela de acentos e caracteres especiais Á &Aacute; á &aacute; Â &Acirc â &acirc; À &Agrave; à &agrave; Å &Aring; å &aring; Ã &Atilde; ã &atilde; Ä &Auml; ä &auml; Æ &AElig; æ &aelig; É &Eacute; é &eacute Ê &Ecirc; ê &ecirc; È &Egrave; è &egrave; Ë &Euml; ë &euml; Ð &ETH; ð &eth; Í &Iacute; í &iacute Î &Icirc; î &icirc; Ì &Igrave; ì &igrave;6 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  7. 7. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Tabela de acentos e caracteres especiais Ï &Iuml; ï &iuml; Ó &Oacute; ó &oacute; Ô &Ocirc; ô &ocirc Ò &Ograve; ò &ograve; Ø &Oslash; ø &oslash; Õ &Otilde; õ &otilde; Ö &Ouml; ö &ouml; Ú &Uacute; ú &uacute; Û &Ucirc; û &ucirc; Ù &Ugrave; ù &ugrave; Ü &Uuml; ü &uuml; Ç &Ccedil; ç &ccedil; Ñ &Ntilde; ñ &ntilde; < &lt; > &gt; & &amp; " &quot;7 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  8. 8. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Tabela de acentos e caracteres especiais ® &reg; © &copy; Ý &Yacute; ý &yacute; &nbsp; þ &thorn; ß &szlig; º º ª &170; ¹ ¹ ² ² ³ ³ ƒ ƒ † † ‡ ‡ ‰ ‰ ¢ ¢ £ £ « « ± ± » » · · ¼ ¼ ½ ½ ¾ ¾ ¿ ¿ × × ÷ ÷ ¡ ¡ ¤ ¤8 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  9. 9. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Estrutura da especificação para a HTML5 î A especificação para a HTML5 está estruturada em 10 seções, a saber: n  Infraestrutura comum: define terminologia, classes, algoritmos, sintaxes e partes comuns das especificações. n  Semântica, estrutura e APIs para documentos HTML: definem as funcionalidades do DOM HTML e dos elementos HTML em geral.9 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  10. 10. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Estrutura da especificação para a HTML5 î  A especificação para a HTML5 está estruturada em 10 seções, a saber: n  Elementos HTML: explicam o significado de cada um dos elementos HTML. São estabelecidas regras de uso dos elementos na marcação, bem como diretrizes de manipulação deles pelos agentes de usuário. n  Microformatos: a especificação para a HTML5 prevê um mecanismo para marcar informações sobre o documento, no formato nome/valor, para serem lidas por máquinas. î  Essa seção descreve esse mecanismo e os algoritmos capazes de converter documentos HTML em outros formatos. î  Adicionalmente, nessa seção definem-se alguns vocabulários para Microformatos: informações de contato, calendário de eventos e licenças.10 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  11. 11. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Estrutura da especificação para a HTML5 î A especificação para a HTML5 está estruturada em 10 seções, a saber: n  Carregamento de páginas web: documentos HTML não aparecem do nada – essa seção define as muitas funcionalidades relacionadas ao tratamento de páginas web pelos diferentes dispositivos. n  APIspara aplicações web: descrevem as funcionalidades básicas para desenvolvimento de scripts em aplicações HTML.11 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  12. 12. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Estrutura da especificação para a HTML5 î A especificação para a HTML5 está estruturada em 10 seções, a saber: n  Interação com o usuário: descreve os diferentes mecanismos de interação do usuário com um documento HTML. n  APIs para comunicação: tratam dos mecanismos de comunicação entre aplicações HTML rodando em domínios diferentes e no mesmo cliente. n  Sintaxe HTML: descreve a sintaxe HTML. n  Sintaxe XHTML: descreve a sintaxe XHTML.12 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  13. 13. DWEB - Design para Web / Carlos José Introdução as linguagens de marcaçãon  Introdução î Lista de Tags e atributos n  Astags apresentadas aqui formam uma compilação das definições oficiais da linguagem. î  http://www.w3schools.com î  http://www.htmldog.com13 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  14. 14. DWEB - Design para Web / Carlos José HTML - <!DOCTYPE>n  Lista de Tags e atributos î  HTML <!DOCTYPE> tag n  Definição e forma de uso: O declaração deve ser a primeira coisa em seu documento HTML5, antes da tag <html>. §  A declaração doctype não é uma tag da linguagem HTML, é uma instrução para o navegador web sobre qual versão da linguagem de marcação a página está escrita. î  É importante que você especifique o doctype em todos os documentos HTML, para que o navegador saiba o tipo do documento . î  O doctype em HTML 4.01 exigia uma referência a uma DTD, porque HTML 4.01 foi baseada em SGML. §  HTML5 não é baseada em SGML, e não requer uma referência a uma DTD mas precisa do doctype para que os navegadores. n  Diferença entre HTML 4.01, XHTML e HTML 5 î  Há 3 doctypes diferentes em HTML 4.01 e XHTML 1.0, em HTML5 há apenas um: §  <!DOCTYPE HTML>14 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  15. 15. DWEB - Design para Web / Carlos José HTML - <html>n  Lista de Tags e atributos î HTML <html> tag n  Definição e forma de uso: î  A Tag informa ao navegador que um documento HTML. î  O elemento HTML é o elemento mais externo em um documento. î  O elemento HTML também é conhecido como o elemento raiz. n  Diferença entre HTML 4.01, XHTML e HTML 5 î  HTML5 tem um novo atributo: manifest15 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  16. 16. DWEB - Design para Web / Carlos José HTML - <html>n  Lista de Tags e atributos î HTML <html> tag n  Atributos opcionais Attribute Value Description manifest url Especifica a URL de cache do documento manifest xmlns http://www.w3.org/1999/xhtml Define o atributo de namespace XML.16 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  17. 17. DWEB - Design para Web / Carlos José HTML - <body>n  Lista de Tags e atributos î HTML <body> tag n  Definiçãoe forma de uso: O elemento <body> contém todos os elementos do corpo do documento HTML como textos, links, imagens, tabelas, listas, etc. n  Diferença entre HTML 4.01, XHTML e HTML 5 î  Todos os atributos de apresentação do elemento <body> estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD.17 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  18. 18. DWEB - Design para Web / Carlos José HTML - <body>n  Lista de Tags e atributos î HTML <body> tag n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD alink rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF Especifica a cor de um link ativo em um documento background file_name Em desuso. Use CSS em vez disso. TF Especifica uma imagem de fundo para um documento bgcolor rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF Define a cor de fundo de um documento. link rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF Especifica a cor padrão dos links não visitados em um documento. text rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF Especifica a cor do texto em um documento. vlink rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF Especifica a cor dos links visitados em um documento..18 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  19. 19. DWEB - Design para Web / Carlos José HTML – exe01.html<!DOCTYPE html><html> <head> <meta charset=“utf-8“/> <title>Minha Primeira P&aacute;gina</title> </head><body>E a&iacute; Beleza!</body></html>19 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  20. 20. DWEB - Design para Web / Carlos José HTML - <p> Parágrafon  Lista de Tags e atributos î HTML <p> tag n  Definição e forma de uso: A tag <p> define um parágrafo. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Todos os atributos de apresentação do elemento <p> estão em desuso em HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD. n  Example î  <p>This is some text in a very short paragraph</p>20 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  21. 21. DWEB - Design para Web / Carlos José HTML - <p> Parágrafon  Lista de Tags e atributos î HTML <p> tag n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD align left Em desuso. Use CSS em vez disso. TF right Especifica o alinhamento do texto dentro de um center parágrafo. justify21 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  22. 22. DWEB - Design para Web / Carlos José HTML - <br> Quebra de linhan  Lista de Tags e atributos î HTML <br> tag n  Definição e forma de uso: A tag <br> inseri uma única quebra de linha. <br> é uma tag vazia, o que significa que não tem nenhuma marca de fim: exemplo <br></br>. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  No HTML a tag <br> não tem nenhuma marca de fim. î  Em XHTML a tag <br> deve estar devidamente fechada, como este: <br />. î  Example §  This text contains<br />a line break22 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  23. 23. DWEB - Design para Web / Carlos José HTML - <hr> Linha horizontaln  Lista de Tags e atributos î  HTML <hr> tag n  Definição e forma de uso: O <hr> marca e cria uma linha horizontal em uma página HTML. î  O elemento <hr> pode ser usado para separar o conteúdo em uma página HTML. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  No HTML a tag <hr> não tem nenhuma marca de fim. î  Em XHTML a tag <hr> deve estar devidamente fechado, como este: <hr />. î  Todos os atributos de "apresentação" do elemento <hr> estão em desuso HTML 4.01, e não são suportados em XHTML 1.0 Strict DTD . n  Example î  This is some text <hr /> This is some text23 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  24. 24. DWEB - Design para Web / Carlos José HTML - <!--...--> comentárion  Lista de Tags e atributos î HTML <!--...--> tag n  Definição e forma de uso: A tag de comentário é utilizado para inserir um comentário no código-fonte. î  Ocomentário será ignorado pelo navegador. î  Você pode usar os comentários para explicar seu código, que pode ajudar quando você editar o código fonte em uma data posterior. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Nenhuma. n  Example î  <!-- Inicio do menu de navegação principal -->24 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  25. 25. DWEB - Design para Web / Carlos José HTML – exe02.html<!DOCTYPE html><html> <head> <meta charset=“utf-8“/> <title>Marca&ccedil;&atilde;o de Texto </title> </head><body><hr /><!--esta linha é um comentário e não aparecerá nonavegador. linha horizontal--><h1>Marca&ccedil;&atilde;o de Texto</h1><p><strong>Este texto est&aacute; em negrito</strong>,j&aacute; esta palavra <em>esta</em> em it&aacute;lico.</p><p>Para aplicar uma quebra<br /> de linha dentro de umtexto em um par&aacute;grafo, &eacute; necess&aacute;rioutilizar a tag &lt;br /&gt;</p><hr /><!-- linha horizontal--></body></html>25 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  26. 26. DWEB - Design para Web / Carlos José HTML - <h1> Definição de cabeçalhosn  Lista de Tags e atributos î HTML <h1> até <h6> tags n  Definiçãoe forma de uso: O <h1> a <h6> são usados para definir posições em HTML. î  <h1> define o título do maior para o menor <h6>. n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  Oatributo "alinhamento“ do <h1> a <h6> estão em desuso em HTML 4.01, e não é suportado no XHTML 1.0 Strict DTD. n  Example î  <h1>This is header 1</h1>26 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  27. 27. DWEB - Design para Web / Carlos José HTML - <h1> Definição de cabeçalhosn  Lista de Tags e atributos î HTML <h1> até <h6> tags n  Atributos opcionais î  DTD indica em que DTD o atributo é permitido. S=Strict, T=Transitional, and F=Frameset. Attribute Value Description DTD align left Em desuso. Use CSS em vez disso. TF right Especifica o alinhamento do título center justify27 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  28. 28. DWEB - Design para Web / Carlos José HTML – exe03.html<!DOCTYPE html><html> <head> <meta charset=“utf-8”/> <title>T&iacute;tulo e Sub-t&iacute;tulos</title> </head><body><hr /> <h1>T&iacute;tulo e Sub-t&iacute;tulos</h1> <h1>T&iacute;tulo 1</h1><h2>T&iacute;tulo 2</h2> <h3>T&iacute;tulo 3</h3><h4>T&iacute;tulo 4</h4> <h5>T&iacute;tulo 5</h5><h6>T&iacute;tulo 6</h6><hr /><p>Em HTML/XHTML, utilizamos os &lt;h1&gt;...&lt;h6&gt; para utilizarcomo t&iacute;tulo e sub-t&iacute;tulo nos textos.</p><p>Exemplo:<br /><h1>Geografia</h1><p>texto aqui.</p><h2>Clima:</h2><p>texto aqui</p></p></body></html>28 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  29. 29. DWEB - Design para Web / Carlos José Perguntas ?29 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12
  30. 30. DWEB - Design para Web / Carlos José Considerações Finaisn  Atenção î Revisar os conceitos e fundamentos do HTML î Tentar refazer os documentos HTML pelo o que você vê no navegador, ou seja, o resultado final.Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;http://www.htmldog.com/; http://www.w3schools.com30 Capítulo 4 - HTML 5 básico I Monday, 27 de February de 12

×