Html forfood

HTML for food pizza, please
XHTML, CSS e técnicas SEO

É 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 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">

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

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 />

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" />

CSS
• Inline e/ou externo?
• Separar em vários arquivos?
• Minify (UI Performance, Ant)
• Tableless ou divless (!)
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#FF7F00">
<td rowspan="2" width="138" align="center" valign="middle"><img
src="http://web.archive.org/web/20011009083132im_/http://www.terra.com.br/capa/logoterra.gif" width="110"
height="32" border="0" alt="Terra Networks"></td>
<td width="320" align="RIGHT" valign="MIDDLE">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td width="97" height="17" align="RIGHT">
...

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>...

Boas práticas
• tag#elementId
• X.elementClass
• Simplificação (background, font, border)
• CSS reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}

HTML versus CSS
• <strong> ou font-weight:bold
• <em> ou font-style:italic
• ...

CSS 3
• Graceful degradation

CSS3 Generator:
• Box shadow
• Text shadow
• Border radius...

FontSquirrel:
• Gerador de fontes customizadas

SEO
• Importância das tags
• <meta> tags
• Robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Sitemap: http://www.informant.com.br/sitemap.xml

• Webmaster Tools
• Analytics

Sitemaps
• Padrão em http://www.sitemaps.org

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>

div.header > div ul

div.console div.welcome

div.getstarted

div.container

div div
div
div.features

div.footer
ul

Html forfood

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Html forfood

Similar a Html forfood (20)

Último

Último (20)

Html forfood