3. DOCTYPE HTML 4.01
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
4. DOCTYPE xHTML 1.0
xHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
xHTML 1.0 Transitional (un po’ più permissivo)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6. Document Object Model
il DOM (http://j.mp/u0OosV) è un caso particolare di
una struttura ad albero (http://j.mp/vV8Uo7).
L’HTML (sia nella versione xml -> xHTML) che la
versione 5 fa uso di questo standard. Ogni elemento del
DOM è un nodo dell’albero.
7. Perché il DOM è importante
Metabolizzare e visualizzare il concetto di DOM vi
permette di capire visualmente qual è l’elemento che
state andando a selezionare.
CSS = #header -> seleziona il tag con id header
JS a.getElementById(‘header’); -> seleziona il tag
con id header, per usarlo via Javascript
jQuery -> $(‘#header’) fa la stessa cosa del
precedente in maniera più compatta ed elegante, al
costo dell’uso di un framework esterno.
10. Tipi di TAG HTML
(si molti sono proprio HTML5!)
http://www.w3.org/TR/html5-diff/
http://html5doctor.com
11. Sections/Header
body... non lo commento neanche. :)
h1->h6
sono gli heading e li conoscete molto bene.
Tendenzialmente sono renderizzati dal browser di
dimensioni differenti.
Gli altri tag sono HTML5.
Li vediamo tra un attimo.
13. Nav
Nelle pagine xHTML o HTML è diventato molto comune avere
<ul id=”menu”> oppure <div id=”mainMenu”>...
L’introduzione di nav vuole rappresentare un modo per definire una volta
per tutte il menu principale del sito.
Not all groups of links on a page need to be in a nav element — only groups of primary navigation
links. In particular, it is common for footers to have a list of links to various key parts of a site, but the
footer element is more appropriate in such cases.
<nav>
<ul>
<li>menu link 1</li>
<li>menu link 2</li>
</ul>
</nav>
14. In questo snippet c’è
un’incongruenza.
<nav>
<ul>
<li>menu link 1</li>
<li>menu link 2</li>
</ul>
</nav>
15. <header>
Nella maggior parte delle pagine HTML potrete trovare
<div id=”header”>
per delimitare la sezione header di un sito web.
La novità di <header> è che può sia assolvere a questo
compito che rappresentare l’header di una particolare
sezione o articolo. (vd. più avanti)
16. <footer>
Nella maggior parte delle pagine HTML potrete trovare
<div id=”footer”>
per delimitare la sezione footer di un sito web.
La novità di <footer> è che può sia assolvere a questo
compito che rappresentare il footer di una particolare
sezione o articolo. (vd. più avanti)
17. <section>, <article>, <aside>
<section>
Raggruppa un qualsiasi insieme di tag html che abbiano
un’appartenenza semantica.
es. <div id=”header”>, <div class=”post”>...
IMPORTANTE: le specifiche di HTML5 prevedono che
ogni section fa storia a sé. Quindi si può avere un h1
per ogni section.
I motori di ricerca ancora penalizzano questa pratica.
Inoltre si può dichiarare un <header> all’interno di
section. Così come un <footer>.
18. <section>, <article>, <aside>
<article>
Raggruppa un qualsiasi insieme di tag html che abbiano
un’appartenenza semantica e che rappresentino un
articolo, o un contenuto USERGENERATED.
es. <div class=”article”>, <div class=”post”>...
19. <section>, <article>, <aside>
<aside>
È un contenitore che può essere relativo o no al
contenuto del sito stesso. Si può usare quindi sia
all’interno di <section> o <article> che per
rappresentare una sidebar nella pagina web.
23. Put content first!
Le pagine web sono sempre vittima di almeno 2 tipi di
visitatori.
I vostri clienti, e i motori di ricerca.
Mentre i clienti possono apprezzare scelte stilistiche di
un qualche genere, i motori di ricerca vogliono i vostri
contenuti da macinare.
Dateglieli.
Prediligete se possibile un approccio che metta prima i
contenuti rispetto alle sidebar o altro.
25. E questo era HTML...
Ognuno di questi elementi viene visualizzato dai
browser con un comportamento di default.
Ovviamente tramite CSS si possono sovrascrivere tutti
questi comportamenti.
A volte è desiderabile, a volte no.
Vediamo come si comportano gli elementi citati oggi.
20111026.html