Your SlideShare is downloading. ×
  • Like
HTML - How To
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML - How To

  • 3,906 views
Published

Recap, best practices e forgotten tags. …

Recap, best practices e forgotten tags.

Consolidação de conhecimentos de HTML, HTML vs. XHTML e mais algumas coisas que ainda não sabiam.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,906
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
145
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. <html> <head> <title>HTML/XHTML</title> </head> <body> </body> </html> 2009.03.04 HTML/XHTML
  • 2. <html> André Torgal – Lisboa, Portugal - 2009-03-04 <head> <title>HTML</title> <meta name=”author” Torgal”> content=”André <meta name=quot;geo.placenamequot; Portugalquot; /> content=quot;Lisboa, <meta name=quot;DC.Date.Createdquot; content=quot;2009-03-04quot;> ... </head> <body> ... 2009.03.04 HTML/XHTML
  • 3. HOW-TO HTML XHTML FAIL COOL 2009.03.04 HTML/XHTML
  • 4. HTML::State Of The Art Estrutura  Declarações Semântica  #referências Conteúdo  <estrutura> <semântica> Usabilidade  ... Contéudo Acessibilidade  ... SEO </semântica>  </estrutura> ...  2009.03.04 HTML/XHTML
  • 5. HTML::Apenas HTML Estrutura  Declarações Semântica  #referências Conteúdo  <estrutura> <semântica> ... Contéudo ... </semântica> </estrutura> 2009.03.04 HTML/XHTML
  • 6. HTML XHTML SGML XML 1986 1998 HTML XHTML 4.0.1 1.0 STRICT STRICT 1999 2000 2009.03.04 HTML/XHTML
  • 7. COMPONENTES MARKUP  Declarações ELEMENT TYPE  #referências TAG  <estrutura> ATTRIBUTE / VALUE  <semântica> ELEMENT ...  Conteúdo CONTENT MODEL  ... </semântica> DOCUMENT STRUCTURE  </estrutura> DECLARATIONS  COMMENTS  2009.03.04 HTML/XHTML
  • 8. MARKUP Processo de “marcar” o conteúdo com TAGS  Conjunto de TAGS de um documento.  “Ah e tal, é preciso meter aí um <BR /> “Ah e tal, é preciso mexer no markup” 2009.03.04 HTML/XHTML
  • 9. ELEMENT TYPES / TAGS Cada ELEMENT TYPE tem o seu TAG  Cada elemento é definido por um par  OPENING TAG + CLOSING TAG <tag> ...conteúdo... </tag> 2009.03.04 HTML/XHTML
  • 10. ELEMENT TYPES / TAGS HTML Alguns ELEMENT TYPE  podem dispensar CLOSING-TAG (mas não é aconselhável) <h1>Carpe Diem! <p>Lorem ipsum dolor sit amet. <p>Et pluribus unum. 2009.03.04 HTML/XHTML
  • 11. ELEMENT TYPES / TAGS XHTML Todos os ELEMENT têm que abrir/fechar  seja qual fôr o seu ELEMENT TYPE (regra “well-formed” do XML) <h1>Carpe Diem!</h1> <p>Lorem ipsum dolor sit amet.</p> <p>Et pluribus unum.</p> 2009.03.04 HTML/XHTML
  • 12. ELEMENT TYPES / TAGS HTML Alguns ELEMENT TYPE  não têm CLOSING-TAG porque nunca têm conteúdo <br> <hr> <img src= “/media/logo.png”> 2009.03.04 HTML/XHTML
  • 13. ELEMENT TYPES / TAGS XHTML Nos elementos sem conteúdo omite-se o  CLOSING-TAG e dizem-se AUTO-CLOSING (só se “deve” aplicar a elementos que não têm conteúdo por natureza... porquê?) <link type=“text/css” href=“/style/x.css” /> <br />  <img src= “/media/logo.png” /> <div /> 2009.03.04 HTML/XHTML
  • 14. ATTRIBUTES Cada ELEMENT TYPE tem um conjunto de  ATTRIBUTES possíveis Ex: id, class  <tag id=“foo” class=“bar”> ...conteúdo... </tag> 2009.03.04 HTML/XHTML
  • 15. TAGS / ATTRIBUTES HTML Os TAGS ou ATTRIBUTES  não são case-sensitive (mas é aconselhável só usar minúsculas) <Tag ID=“foo” class=“bar”> ...conteúdo... </Tag> 2009.03.04 HTML/XHTML
  • 16. TAGS / ATTRIBUTES XHTML Os TAGS e ATTRIBUTES são case-sensitive  (usar minúsculas sempre!) <tag id=“foo” class=“bar”> ...conteúdo... </tag> 2009.03.04 HTML/XHTML
  • 17. TAGS / ATTRIBUTES HTML Alguns ATTRIBUTES de alguns TAGS  podem ser minimizados <option value=“pt” selected> Portugal </option> 2009.03.04 HTML/XHTML
  • 18. TAGS / ATTRIBUTES XHTML Nenhum ATTRIBUTE pode ser minimizado  (usa-se o valor igual ao nome do atributo) <option value=“pt” selected=“selected”> Portugal </option> 2009.03.04 HTML/XHTML
  • 19. CONTENT MODEL O elemento principal do conteúdo é o BODY  Dentro deste, cada ELEMENT TYPE é: BLOCK LEVEL   INLINE LEVEL <body> ...conteúdo... </body> 2009.03.04 HTML/XHTML
  • 20. BLOCK LEVEL DIV <h1>welcome</h1> H1 .. H6 <p>foo</p> <div>bar</div> P BLOCKQUOTE UL, OL, DL welcome ADDRESS foo TABLE bar 2009.03.04 HTML/XHTML
  • 21. INLINE LEVEL SPAN <p>Lorem Ipsum A     <span>alfa</span>     <em>beta</em>. STRONG, EM </p> IMG CITE, CODE Lorem Ipsum alfa beta. INPUT SELECT 2009.03.04 HTML/XHTML
  • 22. CONTAINER / CONTENTS Cada ELEMENT pode conter + ELEMENTS...  <tag id=“foo” class=“bar”> <tag>     <tag>         ...conteúdo...     </tag> </tag> </tag> 2009.03.04 HTML/XHTML
  • 23. CONTAINER / CONTENT MODEL ...mas apenas de terminados ELEMENT TYPE  - BODY só pode conter BLOCK LEVEL - INLINE LEVEL não pode conter BLOCK - ... e várias outras regras específicas ✗  ✗  <span> <p> <p>...</p> <p>....</p> </span> </p> 2009.03.04 HTML/XHTML
  • 24. MARKUP (BÁSICO) Texto  H1.6 P, SPAN, EM, STRONG, BLOCKQUOTE, ABBR Listas/Items  UL, OL, LI, DL, DT, DD Links  A Secções  DIV 2009.03.04 HTML/XHTML
  • 25. MARKUP - TEXTO <h1>Bolo de Nozes</h1> <h2>Preparação</h2> <p>Deite num recipiente 100g de margarina e 100g de açúcar e amasse muito bem até amolecer.</p> <p><img src= “/media/bolo1.jpg” /></p> <p>...</p> 2009.03.04 HTML/XHTML
  • 26. MARKUP - LISTAS <h1>Bolo de Nozes</h1> ... <h2>Ingredientes</h2> <ul> <li>99 ovos</li> <li>31 nozes</li> ... </ul> 2009.03.04 HTML/XHTML
  • 27. MARKUP - LINKS <h1>Bolo de Nozes</h1> ... <h2>Receitas Relacionadas</h2> <ul> <li><a href= “/receitas/foo”>foo</a></li> <li><a href= “/receitas/foo”>foo</a></li> ... </ul> 2009.03.04 HTML/XHTML
  • 28. MARKUP (FORMS) Form  FORM, FIELDSET Controls  INPUT type=“hidden|text|radio|checkbox|file| password|submit|reset” TEXTAREA SELECT type=“multiple” 2009.03.04 HTML/XHTML
  • 29. FORGOTTEN “TAGS” XHTML LABEL  <label for=“userpass”>Password</label> <input type= “password” id=“userpass” /> DL, DT, DD  <dl> <dt></dt> <dd></dd> </dl> 2009.03.04 HTML/XHTML
  • 30. DOCUMENT STRUCTURE <!DOCTYPE ... > Declarações <html> <head> ... Cabeçalho </head> <body> Conteúdo ... </body> </html> 2009.03.04 HTML/XHTML
  • 31. HEADER XHTML TITLE  <title>Password</title> META  <meta name=“keywords”      content=“foo, bar, baz, lorem, ipsum, nozes” /> <meta http­equiv=quot;Content­Typequot;      content=quot;text/html; charset=UTF­8quot; /> 2009.03.04 HTML/XHTML
  • 32. HEADER XHTML SCRIPT  <script type=quot;text/javascriptquot; src=quot;/js/foo.jsquot; /> LINK  <link rel=quot;alternatequot; type=quot;application/rss+xmlquot;    title=quot;Feedquot; href=quot;http://example.com/rssquot; /> <link rel=quot;shortcut iconquot;     href=quot;http://example.com/fav.icoquot; /> <link rel=quot;stylesheetquot; type=quot;text/cssquot;     href=quot;http://example.com/style/main.cssquot; /> 2009.03.04 HTML/XHTML
  • 33. DECLARAÇÕES HTML !DOCTYPE - indica ao browser o tipo de  documento (qual o standard seguido) <!DOCTYPE HTML PUBLIC     quot;­//W3C//DTD HTML 4.01//ENquot;      quot;http://www.w3.org/TR/html4/strict.dtdquot;> 2009.03.04 HTML/XHTML
  • 34. DECLARAÇÕES XHTML No caso de XHTML...  Declaração XML com indicação do encoding  Elemento HTML tem que conter atributo NAMESPACE  <!DOCTYPE html PUBLIC      quot;­//W3C//DTD XHTML 1.0 Strict//ENquot;     quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;      lang=quot;ptquot; xml:lang=quot;ptquot;> 2009.03.04 HTML/XHTML
  • 35. DECLARAÇÕES XHTML No caso de XHTML...  Declaração <?xml ?> opcional se encoding = UTF-8  Se usada a declaração IE6 entra em QUIRKS MODE!  Encoding não é = UTF-8 !?  <?xml version=quot;1.0quot; encoding=quot;UTF­8quot;?> QUIRKS MODE - WTF!? 2009.03.04 HTML/XHTML
  • 36. FAIL QUIRKS MODE? Obrigar o browser a apresentar o  documento segundo as regras (?) quebradas pré-standards (IE 5.5) Usar a declaração <?xml ... ?>  IE6 entra em QUIRKS MODE! Não declarar <!DOCTYPE ... >  Praticamento todos os browsers passam a QUIRKS MODE 2009.03.04 HTML/XHTML
  • 37. FAIL TRANSITIONAL Usar HTML deprecated (HTML 3.2, 1997)  FONT, CENTER, B, I, IFRAME, ...  bgcolor=“pink”  target=“_blank”  style=“...”  name=“...”  2009.03.04 HTML/XHTML
  • 38. FAIL (DES)ESTRUTURADO <h3>Bolo de Nozes</h3> <h3>Ingredientes</h3> <p>....</p> <img ... /> <h2>Relacionados</h2> <p>....</p> <h1>Todos os Bolos do Mundo</h1> 2009.03.04 HTML/XHTML
  • 39. FAIL DIVITIS <div class=“receitaWrapper”> <div class= “receita”> <div class= “receitaContent”> <div class=“title”> <h2>Bolo de Nozes</h2> </div> <div class=“subtitle”> <h3>Ingredientes</h3> <p class=“link”> <a href=“/more”> <span class= “more” ... 2009.03.04 HTML/XHTML
  • 40. FAIL SEMÂNTICA (1) <div class=“receita”> <p class=“title”>Bolo de Nozes</p> <strong class=“texto”> Deite num recipiente 100g de margarina e 100g de açúcar e amasse <span class=“strong”>muito bem</span> até amolecer.<br /> Junte... </strong> <blockquote class=“danger”>...</blockquote> </div> 2009.03.04 HTML/XHTML
  • 41. FAIL SEMÂNTICA (2) <div class=“roundedBox”> <h2 class=“shadow”>Bolo de Nozes</h2> <p class=“gray”> Deite num recipiente 100g de margarina e 100g de açúcar e amasse <strong class=“yellowItalic”>muito bem</strong> até amolecer. </p> <a class=“orangeBig” href=“...”>...</a> </div> 2009.03.04 HTML/XHTML
  • 42. FAIL NÃO-CONTEÚDO <a href=“/about” class=“header”> <img src=“about.png” /> </a> <div class=“title”> <img src=“receitas.png” /> </div> <a href=“/about”>...</a> | <a ... 2009.03.04 HTML/XHTML
  • 43. COOL COMENTÁRIOS STDOUT/STDERR  <!-- BEGIN receitas/list/default --> <!-- created: 2009-03-04 12:30 --> <!-- expires: 2009-03-04 14:00 --> <div class=“receitas”> ... </div> <!-- /END receitas/list/default --> 2009.03.04 HTML/XHTML
  • 44. COOL STANDARDS Validador W3C  http://validator.w3.org/check DTD Recomendados  http://www.w3.org/QA/2002/04/valid-dtd-list.html Web-Standards Project  http://www.webstandards.org/ XTHML vs content-type  http://h3h.net/2005/12/xhtml-harmful-to-feelings/ http://www.456bereastreet.com/archive/200501/the_perils_of_using_xh 2009.03.04 HTML/XHTML
  • 45. COOL EDITORES TEXTO Open  Syntax-highlight  Auto-complete  Auto-format  Save as “desktop/test.(x)html”  Abrir no(s) browser(s) ;-)  2009.03.04 HTML/XHTML
  • 46. COOL EXTENSÕES FF FIREBUG (inspect/test html, css, js, headers, ...)  http://www.youtube.com/results?q=firebug TIDY (validate html - error/warn - line# + why?)  http://users.skynet.be/mgueury/mozilla/ WEB-DEVELOPER (enable/disable css, js, ...)  https://addons.mozilla.org/en-US/firefox/addon/60 2009.03.04 HTML/XHTML
  • 47. COOL REFERÊNCIAS W3C (specs completos, linguagem muito técnica)  http://www.w3.org/html/ W3SCHOOLS (rápido, incompleto, impreciso...)  http://www.w3schools.com/xhtml/ WIKIPEDIA (ah pois...)  http://en.wikipedia.org/wiki/Html 2009.03.04 HTML/XHTML
  • 48. COOL EXEMPLOS BONS/MAUS WWW (inspect/test html, css, js, headers, ...)  Dicas que estamos perante um bom exemplo: MARKUP válido (check tidy!)   MARKUP mínimo  MARKUP semântico  MARKUP comentado Exemplo máximo: bom MARKUP não precisa de  ser alterado quando muda o layout: a.k.a. link do costume: http://www.csszengarden.com/ 2009.03.04 HTML/XHTML
  • 49. COOL MESTRES ALA (A List Apart)  http://www.alistapart.com/topics/code/htmlxhtml/ 456BEREASTREET (Roger Johansson)  http://www.456bereastreet.com/ Muitos mais...  http://perguntem.ao.andr3.net 2009.03.04 HTML/XHTML