HTML Know How: Pulizia del codice (parte seconda)
Diamo uno sguardo al seguente codice:
http://numerone.altervista.org/forum...immagine_0.jpg
Il codice é perfettamente indentato, ed i tag sono scritti tutti in maiuscolo, quindi, stando alla precedente lezione, sarebbe corretta, ma in realtà é uno dei tanti sgorbi che si trovano in giro per il web. Per quale motivo?
In HTML ogni marcatore può essere diviso in due parti: la prima é il nome del tag (la parte attaccata a <), la seconda sono i vari attributi (il resto del marcatore): nel nostro caso i tag sono coerenti, ma gli attributi sono scritti come capita:
http://numerone.altervista.org/forum...immagine_1.jpg
La prima cosa da fare quest'oggi é renderli coerenti e distinguerli dai tag (se abbiamo scritto i tag in maiuscolo, scriveremo gli arogmenti in minuscolo...).
http://numerone.altervista.org/forum...immagine_2.jpg
Basta così? Eh no! Sarebbe troppo facile :mrgreen:
Adesso mi tocca farvi notare che i vari argomenti degli attributi sono anch'essi scritte a caso: alcuni non sono delimitate da apici, altri sono delimitate da apici singoli, altri ancora da apici doppi...
http://numerone.altervista.org/forum...immagine_3.jpg
Ancora una volta la regola é la coerenza. Lo standard imporrebbe la delimitazione con apici doppi.
http://numerone.altervista.org/forum...immagine_4.jpg
Ancora: i browser non supportano alcune lettere. Nello specifico, i più vecchi non supportano le lettere accentate (à è é ì ò ù).
http://numerone.altervista.org/forum...immagine_5.jpg
Per ovviare a questo problema é stata creata una serie di codici (che si chiamano tokens). Questi cominciano sempre per "&" e finiscono sempre con ";". La parte centrale (nel nostro caso) é formata dalla lettera da accentare (a, e, i, o u) seguita dal tipo di accento (se l'accento parte da sinistra e finisce verso destra si definisce grave, altrimenti acute).
In questo modo:
à diventa &agrave;
è diventa &egrave;
é diventa &eacute;
ì diventa &igrave;
ò diventa &ograve;
ù diventa &ugrave;
Apportiamo le modifiche :mrgreen:
http://numerone.altervista.org/forum...immagine_6.jpg
Infine: non mi stancherò mai di dirvi che HTML non é un linguaggio per fare pagine web ma é un linguaggio per fare documenti testuali (esattamente come quelli che si creano con word ed il blocco note).
Per aprire due documenti con word, bisogna caricare due volte il programma; per aprire due pagine HTML, basta un link che porti dalla prima alla seconda :D (questo é quel qualcosa in più che fa diventare il semplice testo ipertesto. Da qui il nome HTML - HyperText Markup Language - Linguaggio a marcatori per ipertesto).
Il che vuol dire che dobbiamo specificare delle cose aggiuntive per semplificare il lavoro dei browser: come é stata codificata la nostra pagina (quale HTML stiamo usando)? Con quale set di caratteri é stata scritta? Che cosa contiene?
Esistono due elementi particolari per definire queste caratteristiche: il primo si chiama DTD (Document Type Definition) e serve per specificare quale HTML si sta usando (se non lo sapete, usate tranquillamente queste DTD - HTML 4.0):
Per pagine senza frame
[code:1:f088ba9c93]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">[/code:1:f088ba9c93]
Per pagine con frame
[code:1:f088ba9c93]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">[/code:1:f088ba9c93]
La DTD dev'essere inclusa all'inizio del documento, in questo modo:
http://numerone.altervista.org/forum...immagine_7.jpg
Il secondo tag da usare é il seguente (in generale il set di caratteri usato é quello inglese; da qui EN-US: England e United States - Inglese ed Americano; il tipo é testo, nello specifico HTML: da qui text/html):
[code:1:f088ba9c93]<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EN-US">[/code:1:f088ba9c93]
Attenzione al parametro content: é formato da "text/html; charset=EN-US", non da "text/html"; "charset=EN-US" :D
Lo dovete inserire all'interno dell'head (in questo modo):
http://numerone.altervista.org/forum...immagine_8.jpg.
Il codice non é perfetto, in quanto esistono tre riferimenti ai CSS: uno interno (in rosso), uno esterno (in blu) e due come argomenti (in verde). Una buona buona pagina web conterrebbe un solo riferimento che specifica tutto, ed é quello che faremo la prossima puntata :p
http://numerone.altervista.org/forum...immagine_9.jpg
