Corso HTML e CSS (lezione 3)

Impariamo a costruire un sito Web

Lezione 3: La struttura HTML: La nostra prima pagina.

Nella lezione precedente abbiamo visto come ci siano differenze anche nel formalismo HTML a seconda dello standard che si adotta. Come detto ci soffermeremo sull’ XHTML 1.0 Strict. Di conseguenza la nostra pagina avrà la seguente struttura:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
          <title>  …  </title>
          <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
</head>

<body>
          <p>…</p>
</body>

</html>

Quelli che vedete evidenziati con diversi colori sono i Tag principali della pagina. I Tag sempre compresi tra i segni ‘<‘ e ‘>’ per identificarli in pratica danno informazioni al browser in merito a ciò che è contenuto al loro interno.

Vediamo in pratica cosa significa per i principali tag della pagina:

  • <html> dice al browser che quello che segue è una pagina HTML. La pagina verrà chiusa col tag di chiusura </html>. Ricordiamo che a parte alcune eccezioni che andremo a vedere di volta in volta , i tag vengono sempre aperti e chiusi. Il tag di chiusura è come quello di apertura con una ‘/’ che significa appunto ‘fine’.
  • <head> ….   </head> sono i tag di apertura e chiusura che includono tutte le dichiarazioni di testata, che vedremo in dettaglio più avanti.
  • <body>  ….  </body> sono infine i tag di apertura e chiusura della parte di contenuti della pagina web; in  pratica di tutto ciò che il browser ci farà vedere a video.
Ora che abbiamo una prima struttura di pagina HTML andiamo ad esaminare i contenuti della Head e del Body.
In questa lezione analizzeremo la head.

 Sezione <head>

Come detto questa sezione raccoglie diverse direttive per il browser, ma non i contenuti della nostra pagina.

Vediamo in dettaglio tutti gli elementi che possono o devono essere inclusi nel tag ‘head‘. Anche questi ovviamente vanno dichiarati includendoli in un tag di apertura ed uno di chiusura, salvo le eccezioni che diremo di volta in volta:

  • <title></title> E’ il titolo della pagina web. E’ obbligatorio. Tra i tag di apertura e chiusura va scritto il titolo. Non ci sono differenze tra HTML e XHTML.
    Il tag <title> supporta un attributo chiamato profile con il quale si può assegnare come valore l’ URL di un file che dovrebbe contenere un insieme di regole riguardanti l’attributo content dei meta tags.  Poiché è assolutamente superfluo, possiamo dimenticarci di questo attributo.
    Esempio di titolo:
<title>Titolo della mia pagina web</title>
  • <style> … </style> Viene utilizzato per inserire alcuni stili da applicare ad alcuni elementi del body, direttamente  nella pagina HTML senza ricorrere ad un foglio di stile CSS.
    Se non sapete di cosa si stia parlando, certamente la definizione appena data risulterà oscura, ma non preoccupatevi, i fogli di stile CSS saranno una parte fondamentale del corso e diventeranno presto familiari.
    Il formato della dichiarazione style è: <style type=”MIME_type“> seguito dalle specifiche di stile e chiuso con </style>. Il MIME_type da inserire nella dichiarazione è “text/css” l’unico al momento supportato da questo tag.
    La tabella completa dei MIME_type comunque verrà fornita come allegato a questo corso successivamente.
    Tabella sinottica del formato di questo tag:
Attributo Valore Descrizione Obbl./Facolt. DTD
type text/css Specifica il MIME type del foglio di stile Obbligatorio Tutti
media screen Specifica il tipo di device per cui è ottimizzato l’elemento Facoltativo Tutti
tty
tv
projection
handheld
print
braille
aural
all
title text Un titolo per dare informazioni sugli elementi Facoltativo Tutti

DTD ricordiamo che significa Document Type.

Se una regola di stile viene definita per un elemento in un foglio CSS ed anche all’interno di un documento,   quest’ultima avrà la priorità sul foglio CSS.
Un esempio di dichiarazione style all’interno della pagina potrebbe dunque essere questa:

<style type=”text/css”
body {background-color:#003366}
</style>

Per la cronaca con questa dichiarazione diremmo al browser che il colore di sfondo della pagina è quel tipo di azzurro.

  • <base … /> Questo tag (che non ha tag di chiusura, ma viene chiuso col ‘/>’) specifica l’URL di base per tutti gli URL relativi della pagina. Se per esempio nella pagina abbiamo un URL del tipo “images/immagine.jpg” se nell’ head abbiamo specificato il tag base, significa che la cartella images viene considerata una sottocartella dell’indirizzo specificato in base.
    Gli attributi possibili per questo tag sono solo href che deve specificare l’URL e target che dice come deve essere aperta la nuova pagina.
    La tabella sinottica per il formato di questo tag è quindi:
Attributo Valore Descrizione Obbl./Facolt. DTD
href URL Specifica un URL di base per tutti gli URL relativi della pagina. Facoltativo Tutti
Nota: L’URL nel tag base deve essere un URL assoluto!
target _blank Specifica come la nuova pagina richiamata col click sul link) debba essere aperta. Es.nella stessa pagina o in una nuova. Facoltativo Transit.
_parent
_self
_top
framename

Un esempio di tag base è:

<base href=”http://www.miosito.com/dati/” target=”_blank” />
  • <link /> Questo tag (che non ha tag di chiusura, ma viene chiuso col ‘/>’) definisce la relazione tra la pagina corrente ed un documento esterno correlato. E’ generalmente usato per linkare i fogli di stile CSS. Gli altri usi tra l’altro non sono supportati completamente o del tutto dai principali browsers, per cui vi forniamo la tabella sinottica di tutti gli attributi col rispettivo valore, ma teniamo presente che verrà usato esclusivamente per richiamare un foglio di stile.
Attributo Valore Descrizione Obbl./Facolt. DTD
charset char_encoding Specifica il tipo di codifica del documento linkato Facoltativo Tutti
href URL Specifica l’indirizzo del documento linkato Facoltativo Tutti
hreflang language_code Specifica il codice lingua del documento linkato Facoltativo Tutti
media screen Specifica il tipo di device a cui è destinato il documento Facoltativo Tutti
tty
tv
projection
handheld
print
braille
aural
all
rel Specifica la relazione tra il documento corrente e il documento linkato Facoltativo Tutti
alternate Una versione alternativa del documento (es. pagina di stampa o tradotta ecc.)
stylesheet Un foglio di stile esterno al documento
start Il primo documento in una selezione
next Il documento successivoin una selezione
prev Il documento precedentein una selezione
contents L’indice di un documento
index La lista degli argomenti di un documento
glossary Il glossario delle parole usate nel documento
copyright Un documento conttenente informazioni di copyright
chapter Il capitolo di un documento
section La sezione di un documento
subsection Una sottosezione di un documento
appendix L’appendice di un documento
help Un documento di help
bookmark Un documento correlato
rev Inverso di rel. Non supportato in alcun browser. Facoltativo Tutti
target _blank Specifica dove il documento linkato debba essere caricato Facoltativo No Strict
_self
_top
_parent
frame_name
type MIME_type Specifica the MIME type of the linked document Facoltativo Tutti

Un esempio (l’unico da ricordare) del tag link è dunque il seguente:

<link rel=”stylesheet” type=”text/css” href=”IlMio.css” />
  • <meta … /> Questo tag fornisce informazioni sulla pagina specificatamente per quanto riguarda descrizione, parole chiave, autore, linguaggio, date e altro ancora. Non ha tag di chiusura, ma viene chiuso col ‘/>’.
    Assume la forma di <meta attributo=”…” content=”…” /> dove l’attributo content è sempre obbligatorio per assegnare un valore al primo attributo.
    Di seguito la tabella sinottica completa:
Attributo Valore Descrizione
http-equiv Fornisce al browser informazioni per mezzo dell’attributo obbligatorio content
cache-control Controlla l’uso della cache per il documento in uso. Possibili valori:
public – messo nella cache pubblica condivisa
private – messo nella cache privata
no-cache – non in cache
no-store – In cache ma non archiviato
Es.: <meta http-equiv=”cache-control” content=”no-cache” />
content-language Specifica il linguaggio del documento (usato dai motori di ricerca per classificare le pagine per linguaggio). Il codice linguaggio è nella forma xx-YY dove xx è il codice della lingua e YY il codice del paese. Le tabelle complete vengono fornite negli allegati del corso.
Es.: <meta http-equiv=”content-language” content=”it-IT” />
content-type Specifica il set di caratteri per i contenuti del documento.
Si raccomanda di specificare sempre il set di caratteri.
Es.: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
date Specifica data e ora di creazione della pagina
Es.: <meta http-equiv=”date” content=”Thu, 16 Feb 2012 22:34:13 GMT” />
expires Specifica data e ora di scadenza della pagina. Se la pagina è scaduta si forza il browser a rileggere sempre l’originale anziché prelevarla dalla cache. Un sito di aste on line per esempio dovrebbe impostare il valore a 0 per evitare che venga visualizzata la pagina dalla cache del server.
Es.: <meta http-equiv=”expires” content=”Fri, 07 Mar 2012 12:00:00 GMT” />
last-modified Specifica la data dell’ultima modifica
Es.: <meta http-equiv=”last-modified” content=”Mon, 06 Feb 2012 17:45:57 GMT” />
location Reindirizza la pagina verso un nuovo indirizzo
Es.: <meta http-equiv=”location” content=”URL=http://www.risorsepc.it” />
refresh Definisce un intervallo di tempo per il refresh della pagina. Utile per esempio per i siti che danno notizie live.
Es.: <meta http-equiv=”refresh” content=”300″ />
set-cookie Crea un cookie con nome, data scadenza e valore. La data di scadenza è nella forma che vedete sotto. Ora l’utilità di impostare un cockie in una pagina HTML statica con una data di scadenza fissa mi è francamente oscura. L’uso dei cockie va riservato ai casi in cui si usino pagine dinamiche per esempio con PHP. Per cui potete soprassedere.
Es.: <meta http-equiv=”set-cookie” content=”mycookie=myContent;expires=Fri, 30 Dec 2011 12:00:00 GMT; path=http://www.yoursite.com” />
window-target Specifica il target del frame dove la pagina deve essere caricata
Es.: <meta http-equiv=”window-target” content=”_top” />
content-script-type Dichiara il tipo di linguaggio di scripting utilizzato nel documento. Ignorato da Google.
Es.: <meta http-equiv=”content-script-type” content=”text/javascript” />
content-style-type Dichiara il tipo di linguaggio di stile utilizzato nel documento. Anch’esso è ignorato da Google.
Es.: <meta http-equiv=”content-style-type” content=”text/css” />
distribution Dichiara  il tipo di distribuzione del documento che può essere: Global (il web), Local (riservato a specifici IP), e IU (Internal Use, documento privato non destinato al pubblico).
Es.: <meta http-equiv=”distribution” content=”IU” />
name Fornisce al browser un nome per ciascuna delle informazioni sotto riportate per mezzo dell’attributo obbligatorio content
abstract Descrizione secondaria. Ignorata da Goggle.
author Nome dell’autore.
Es.: <meta name=”author” content=”Franco Desiderio” />
classification Classifica il sito in una specifica categoria. Inutile e ignorato da Google.
Es.: <meta name=”classification” content=”Internet” />
copyright Da informazioni sul copyright
Es.: <meta name=”copyright” content=”2012© weweb.in” />
description Descrizione della pagina (non del sito). Usata dai motori di ricerca. Essenziale.
Es.: <meta name=”description” content=”Free web tutorials” />
distribution Dichiara se il documento sia disponibile nel web o in una intranet.
web – for the full internet
intranet – only for intranet
Es.: <meta name=”distribution” content=”web” />
doc-class Specifica lo stato di completamento del documento
Es.: <meta name=”doc-class” content=”Completed” />
doc-rights Specifica lo stato del copyright del documento
Es.: <meta name=”doc-rights” content=”Public” />
doc-type Specifies the type of the document (pubblico o privato)
Es.: <meta name=”doc-type” content=”Public” />
DownloadOptions Determina quali bottoni sono visibili nella finestra di dialogo del Download
Es.: <meta name=”DownloadOptions” content=”noopen” />
expires Specifica data e ora in cui la pagina scadrà.
Es.: <meta name=”expires” content=”Fri, 10 Jun 2011 12:00:00 GMT” />
generator Specifica il nome del programma con cui è stato generato il documento
Es.: <meta name=”generator” content=”Microsoft Word” />
googlebot Informa il motore di ricerca di Google sulle regole di indicizzazione e archiviazione. I valori dell’attributo content sono:
noarchive – Impedisce a Google di archiviare la pagina
nofollow – La pagina può essere indicizzata, evitando di seguire i links
noindex – I robots di Google possono seguire i links, ma non indicizzare la pagina
nosnippet – Impedisce a Google di mostrare le due righe di estratto sotto al link proposto, quando presenta i risultati di una ricerca
Es.: <meta name=”googlebot” content=”noarchive” />
keywords Parole chiave della pagina usate dai motori di ricerca. Indispensabile!
Es.: <meta name=”keywords” content=”HTML, CSS, JavaScript” />
owner Dichiara il proprietario della pagina o del sito
Es.: <meta name=”owner” content=”Franco Desiderio” />
progid Definisce l’ ID di un programma usato per generare il documento
Es.: <meta name=”progid” content=”Word.Document” />
rating Indica il tipo di pubblico che può visitare il sito (es. adulti o tutti).
Es.: <meta name=”rating” content=”General” />
refresh Il documento resteràa video per un certo numero di secondi prima di fare un refresh o andare ad un altro URL.
Es.: <meta name=”refresh” content=”10″ />
Es.: <meta name=”refresh” content=”10;URL=http://www.risorsepc.it” />
reply-to Indirizzo email cui scrivere per il for documento. Da non usare!
Es.: <meta http-equiv=”reply-to” content=” info@miosito.it” />
resource-type Definisce il tipo di risorsa che la pagina rappresenta.
Es.: <meta name=”resource-type” content=”document” />
revisit-after Definisce dopo quanto tempo il motore di ricerca dovrà rivisitare il sito
Es.: <meta name=”revisit-after” content=”30 days” />
robots Definisce i meccanismi di indicizzazione per i robots e le regole per quanto riguarda le altre pagine linkate. Da usare.
I parametri indicati nell’attributo content devono essere separati da virgole.
all – I robots devono indicizzare, archiviare e seguire i link
follow –  I robots devono seguire i link di questa pagina
index – I robots devono indicizzare questa pagina
noarchive –  I robots non devono archiviare questa pagina
noindex – I robots non devono indicizzare questa pagina
nofollow –  I robots non devono seguire i link di questa pagina
none – I robots devono ignorare questa pagina
Es.: <meta name=”robots” content=”all” />
Es.: <meta name=”robots” content=”index,nofollow” />
Template Dichiara il template utilizzato indicandone nome e percorso.
Es.: <meta name=”template” content=”/temp/MioTemplate.htm” />
scheme format/URI Specifica lo schema da usare per interpretare quanto inserito in content
Es.: <meta scheme=”JSON” name=”includeComponent” content='{“name”:”MyComponent”,”url”:”MyComponent.html”}’ />

Quando imposteremo la prima pagina daremo anche qualche consiglio su quale tag inserire. La maggior parte non hanno interesse pratico.

  • <script> … </script> Il tag <script> è usato per definire uno script client-side come JavaScript. La dichiarazione dello script va obbligatoriamente messa nella <head>, ma poi il richiamo dello script naturalmente sarà nel body nel punto interessato. Gli attributi da usare sono indicati nella tabella seguente:
Attributo Valore Descrizione Obbl./Facolt.
type MIME-type Specifica il tipo di linguaggio usato dallo script. Praticamente è solo Javascript. obbligatorio
charset charset Specifica il tipo di codifica usato nello script esterno facoltativo
defer defer Quando specificato, questo attributo booleano indica al browser che lo script non genera alcun contenuto nel documento perché lo script è eseguiyo quando la pagina è stata esaminata completamente. facoltativo
src URL Il valore di questo attributo indica il  file esterno in cui è definito il codice da eseguire. Può essere un indirizzo    locale o assoluto e risiedere anche su un server diverso. Se l’attributo SRC    non è impostato il browser cerca i comandi di scripting nelle righe    successive. Se l’attributo SRC, invece, contiene l’url di un file allora il    contenuto tra i tag di apertura e chiusura viene ignorato. facoltativo
xml:space preserve Specifica se gli spazi bianchi nel codice  devono essere mantenuti. facoltativo

Un esempio del tag <script> è il seguente:

<script src=”MyScripts.js” type=”text/javascript”></script>

Con questo tag termina la descrizione della <head> del documento. Come vedremo solamente una piccola parte di queste informazioni verranno poi realmente inserite nei nostri documenti HTML, ma averne un elenco completo può essere utile per esigenze estemporanee o semplicemente per referenza. Quando si impostano corsi di formazione c’è sempre il rischio di andare troppo nel dettaglio o troppo poco. Tralasciando le particolarità veramente inutili o non supportate, ho tuttavia preferito elencare compiutamente tutti gli elementi principali riservandomi successivamente di approfondire ciò che più servirà.

Alla prossima.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.