Come fare HTML: pulizia del codice (parte seconda)

10-12-2003, 23.47.49

HTML Know How: Pulizia del codice (parte seconda)

Diamo uno sguardo al seguente codice:

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:

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

Basta così? Eh no! Sarebbe troppo facile

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

Ancora una volta la regola é la coerenza. Lo standard imporrebbe la delimitazione con apici doppi.

Ancora: i browser non supportano alcune lettere. Nello specifico, i più vecchi non supportano le lettere accentate (à è é ì ò ù).

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

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:

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):

.

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

**twisterdark** · 12-12-2003, 00.54.25

Non me ne volere se ho votato "poco" ma il voto è personale...mi spiego. Se avessi inteso il poll come "è utile per tutti?" avrei risposto "si"...ma considerandolo "è utile per me?" ho risposto "no" perchè sinceramente io per fare l'HTML base uso il dreamweaver perchè mi interessa più la grafica d'impatto (perchè se non vedo non riesco a modificare) alla pulizia del codice (che spesso fa il programma...ho detto spesso non sempre

)
Detto questo...ciao :P

12-12-2003, 01.45.06

Originalmente inviato da twisterdark

Non me ne volere se ho votato "poco" ma il voto è personale...mi spiego. Se avessi inteso il poll come "è utile per tutti?" avrei risposto "si"...ma considerandolo "è utile per me?" ho risposto "no" perchè sinceramente io per fare l'HTML base uso il dreamweaver perchè mi interessa più la grafica d'impatto (perchè se non vedo non riesco a modificare) alla pulizia del codice (che spesso fa il programma...ho detto spesso non sempre

)
Detto questo...ciao :P

Male: molto male!
Un minimo di mano al codice la devi comunque mettere, se no l'utente finale scaricherà una cozzaglia grande 10 volte il necessario.

Se vuoi far buttare banda...

**twisterdark** · 13-12-2003, 01.27.51

Certo che ce la metto la mano...ma dopo (l'ho dovuto fare altrmenti chi non aveva IE non visualizzava bene le cose)

NON MI LINCIARE!

Visualizza risultati del sondaggio: Quanto é importante il contenuto di questa lezione?

Discussione: Come fare HTML: pulizia del codice (parte seconda)

LinkBack

Strumenti discussione

Display

Regole di scrittura