HTML                  TIPS                     TRICKS& CSS                     DONTS                      DOSDINIS CORREIA...
O CSS É COMO   O XADREZ      FOTO DE KEVIN OMARA c HTTP://FLIC.KR/P/3TYZSI
HTMLSEMÂNTICO
<p	  class="titulo">SAPO.pt</p><div	  class="nav">  ...</div>
<p	  class="titulo">SAPO.pt</p><div	  class="nav">  ...</div>
<h1>SAPO.pt</h1><ul	  class="nav">  ...</ul>
<div	  class="barra-­‐verde">  ...</div>
<div	  class="barra-­‐verde">  ...</div>
<div	  class="header">  ...</div>
<p>O	  Tribunal	  de	  Instrução	  Criminal	  de	  Lisboa	  <br>	  decidiu	  hoje	  levar	  a	  julgamento</p>
<p>O	  Tribunal	  de	  Instrução	  Criminal	  de	  Lisboa	  <br>	  decidiu	  hoje	  levar	  a	  julgamento</p>
<p>Ó	  mar	  salgado,	  quanto	  do	  teu	  sal<br>São	  lágrimas	  de	  Portugal!<br>Por	  te	  cruzarmos,	  quantas	  mã...
http://naked.dustindiaz.com
PROGRESSIVEENHANCEMENT
CONTEÚDO             HTML       APRESENTAÇÃO       CSSCOMPORTAMENTOJavaScript
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
CSSCONDITIONAL
p	  {     margin:	  10px;     _margin:	  20px;}
p	  {     margin:	  10px;     _margin:	  20px;}
<link	  type="text/css"	  rel="stylesheet"	  href="global.css"><!-­‐-­‐[if	  IE	  6]><link	  type="text/css"	  rel="styles...
http://bit.ly/conditional_css
http://bit.ly/css_compat
LIDAR COM BUGSDE CSSFOTO DE BRIAN SEARLE c HTTP://FLIC.KR/P/5KVVSL
http://bit.ly/ie_bugs
CSS RESET
1           2          3     User                User       Author    agent
http://bit.ly/reset_meyerweb
http://bit.ly/reset_meyerweb
COMENTÁRIOS
“Comments as notes-to-future-self FTW    @gruber — http://twitter.com/gruber/status/391293102
/*	  Header	  */h1.logoul.nav	  {	  ...	  }ul.nav	  li	  {	  ..	  }/*	  Content	  */.item	  {	  ...	  }	  
http://bit.ly/css_edit
http://bit.ly/css_edit
<div	  class="container"> <div	  class="header">  <ul	  class="nav">   <li>	  ...	  </li>  </ul>  <div	  class="search">  ...
<div	  class="container"> <div	  class="header">  <ul	  class="nav">   <li>	  ...	  </li>  </ul>  <div	  class="search">  ...
<div	  class="container"> <div	  class="header">   <ul	  class="nav">      <li>	  ...	  </li>   </ul>   <div	  class="sear...
FERRAMENTAS
http://bit.ly/firebug
http://bit.ly/firebug
http://bit.ly/notepad_plus
E AINDA...
http://bit.ly/css_cheat_sheet
http://alistapart.com
http://www.456bereastreet.com
http://www.webdesignerwall.com
http://css-tricks.com
http://csszengarden.com
http://csszengarden.com
http://csszengarden.com
OBRIGADOdiniscorreia@mac.com@diniscorreia
HTML&CSS 7 - Tips & Tricks
HTML&CSS 7 - Tips & Tricks
Upcoming SlideShare
Loading in...5
×

HTML&CSS 7 - Tips & Tricks

866

Published on

Slides for my in-house HTML & CSS trainning at SAPO.

Tips, tricks, do's and don'ts.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
866
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML&CSS 7 - Tips & Tricks

  1. 1. HTML TIPS TRICKS& CSS DONTS DOSDINIS CORREIA 2011 cbn
  2. 2. O CSS É COMO O XADREZ FOTO DE KEVIN OMARA c HTTP://FLIC.KR/P/3TYZSI
  3. 3. HTMLSEMÂNTICO
  4. 4. <p  class="titulo">SAPO.pt</p><div  class="nav"> ...</div>
  5. 5. <p  class="titulo">SAPO.pt</p><div  class="nav"> ...</div>
  6. 6. <h1>SAPO.pt</h1><ul  class="nav"> ...</ul>
  7. 7. <div  class="barra-­‐verde"> ...</div>
  8. 8. <div  class="barra-­‐verde"> ...</div>
  9. 9. <div  class="header"> ...</div>
  10. 10. <p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>
  11. 11. <p>O  Tribunal  de  Instrução  Criminal  de  Lisboa  <br>  decidiu  hoje  levar  a  julgamento</p>
  12. 12. <p>Ó  mar  salgado,  quanto  do  teu  sal<br>São  lágrimas  de  Portugal!<br>Por  te  cruzarmos,  quantas  mães  choraram,<br>Quantos  filhos  em  vão  rezaram!<br>Quantas  noivas  ficaram  por  casar<br>Para  que  fosses  nosso,  ó  mar!</p>
  13. 13. http://naked.dustindiaz.com
  14. 14. PROGRESSIVEENHANCEMENT
  15. 15. CONTEÚDO HTML APRESENTAÇÃO CSSCOMPORTAMENTOJavaScript
  16. 16. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  17. 17. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  18. 18. CSSCONDITIONAL
  19. 19. p  { margin:  10px; _margin:  20px;}
  20. 20. p  { margin:  10px; _margin:  20px;}
  21. 21. <link  type="text/css"  rel="stylesheet"  href="global.css"><!-­‐-­‐[if  IE  6]><link  type="text/css"  rel="stylesheet"  href="ie6.css"><![end  if]-­‐-­‐>
  22. 22. http://bit.ly/conditional_css
  23. 23. http://bit.ly/css_compat
  24. 24. LIDAR COM BUGSDE CSSFOTO DE BRIAN SEARLE c HTTP://FLIC.KR/P/5KVVSL
  25. 25. http://bit.ly/ie_bugs
  26. 26. CSS RESET
  27. 27. 1 2 3 User User Author agent
  28. 28. http://bit.ly/reset_meyerweb
  29. 29. http://bit.ly/reset_meyerweb
  30. 30. COMENTÁRIOS
  31. 31. “Comments as notes-to-future-self FTW @gruber — http://twitter.com/gruber/status/391293102
  32. 32. /*  Header  */h1.logoul.nav  {  ...  }ul.nav  li  {  ..  }/*  Content  */.item  {  ...  }  
  33. 33. http://bit.ly/css_edit
  34. 34. http://bit.ly/css_edit
  35. 35. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> </div></div>
  36. 36. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> <!-­‐-­‐  Um  comentário  -­‐-­‐> </div></div>
  37. 37. <div  class="container"> <div  class="header"> <ul  class="nav"> <li>  ...  </li> </ul> <div  class="search"> ... </div> <!-­‐-­‐  /.search  -­‐-­‐> </div> <!-­‐-­‐  /.header  -­‐-­‐></div><!-­‐-­‐  /.container  -­‐-­‐>
  38. 38. FERRAMENTAS
  39. 39. http://bit.ly/firebug
  40. 40. http://bit.ly/firebug
  41. 41. http://bit.ly/notepad_plus
  42. 42. E AINDA...
  43. 43. http://bit.ly/css_cheat_sheet
  44. 44. http://alistapart.com
  45. 45. http://www.456bereastreet.com
  46. 46. http://www.webdesignerwall.com
  47. 47. http://css-tricks.com
  48. 48. http://csszengarden.com
  49. 49. http://csszengarden.com
  50. 50. http://csszengarden.com
  51. 51. OBRIGADOdiniscorreia@mac.com@diniscorreia
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×