Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Html forfood
1. HTML for food pizza, please
XHTML, CSS e técnicas SEO
2. É quase idêntico ao HTML 4
A principal diferença é que o XHTML é
definido como XML
tags sempre em minúsculas
Como já fazemos:
<span></span>, <script></script>
Mas também com self-closing:
<br />, <hr />, <meta />, <img />
3. 3 doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
4. Boas práticas
• Manter semântica
• <span> mania (span class=bold)
• layout sem <table>, mas tabulares
• <h1>,<h2>, <ul>...
• Pra CSS, <link /> na <head>
• <scripts> no fim, antes do </body>
• <scripts> em CDNs
• Poucas tags, menor DOM = SUCCESS
5. Jogo dos sete erros
<p><strong>Negrito</p></STRONG>
<ul>
<li>Item
<ol><li>Sub-item</ol>
</ul>
<strong><em>Alô Informant</em></strong>
<TABLE width=100></table>
<div><script></script></div>
<input disabled />
6. Jogo dos sete erros
<p><strong>Negrito</strong></p>
<ul>
<li>Item
<ol><li>Sub-item</li></ol>
</li></ul>
<strong><em>Alô Informant</em></strong>
<table width="100"></table>
<div><script></script></div>
<input disabled="disabled" />
8. CSS no id ou na class?
• Tanto faz
• E que tal nas tags?
div.box { float:left; }
<div class="box">...<div class="box">...
div.boxes div { float:left; }
<div>...<div>...<div>...