Ancora anatomia, le pagine HTML(5)
26
Ancora anatomia... Le pagine HTML 26/10/2011 prof. Carlo Frinolli
description
Lezione 3 del corso Open Web programming
Transcript of Ancora anatomia, le pagine HTML(5)
Ancora anatomia...Le pagine HTML
26/10/2011prof. Carlo Frinolli
Correzioni, e dubbi!Niente di esistenziale, vi prego.
DOCTYPE HTML 4.01
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
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">
DOCTYPE HTML 5
HTML5
<!doctype html>
Più semplice. Più immediato. È solo la dichiarazione del documento.
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.
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.
Devo disegnare il DOM sempre?
NO.
Tipi di TAG HTML(si molti sono proprio HTML5!)
http://www.w3.org/TR/html5-diff/http://html5doctor.com
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.
TEST!Quanti h1 in una pagina HTML5?
NavNelle 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>
In questo snippet c’è un’incongruenza.<nav> <ul> <li>menu link 1</li> <li>menu link 2</li> </ul></nav>
<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)
<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)
<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>.
<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”>...
<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.
<aside><body>
<header>
...
</header>
<section id=”content”>
...
</section>
<aside id=”sidebar”>
...
</aside>
</body>
<aside><article>
<header>
...
</header>
<section>
...
</section>
<footer>
...
</footer>
<aside class=”contextual”>
...
</aside>
</article>
WTF?
Che differenza c’è fra il codice nella pagina_aside.html e nella pagina_content.html?
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.
Grouping tag
<p>
<div>
<pre>
<blockquote>
<ol>
<ul>
<figure>
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
CSS Time!
