HTML Know How: Pulizia del codice (parte prima)
Siccome sono stato molto bastardo con un utente (credendolo un webmaster di professione), ho deciso di scrivere una serie di messaggi su come fare delle buone pagine web.
Iniziamo col dare subito un'occhiata a questo codice:
http://numerone.altervista.org/forum...e_1/image1.jpg
C'é qualcosa che non va, ma cosa?
Iniziamo subito col vedere che i tag di apertura e chiusura non sempre sono scritti allo stesso modo
http://numerone.altervista.org/forum...e_1/image2.jpg
La prima cosa da fare é quella di scrivere i tag di apertura e chiusura nello stesso identico modo, l'esempio, quindi, diventa
http://numerone.altervista.org/forum...e_1/image3.jpg
Tuttavia non basta, perché, come si può vedere ad occhio, il codice é ancora abbastanza incomprensibile.
Il problema é che alcuni tag sono scritti in maiuscolo, altri, invece, in minuscolo.
La seconda regola per ottenere del codice pulito é quella di scrivere tutti i tag di una pagina nello stesso modo (secondo le regole dovrebbero essere tutti minuscoli, ma va bene anche tutti maiuscoli, basta che lo siano :))
http://numerone.altervista.org/forum...e_1/image4.jpg
L'esempio, quindi, diventa:
http://numerone.altervista.org/forum...e_1/image5.jpg
Ma non basta ancora: ci sono dei tag che non sono chiusi
http://numerone.altervista.org/forum...e_1/image6.jpg
Chiudiamoli (ricordandoci sempre lo stile con cui abbiamo scritto i tag...)
http://numerone.altervista.org/forum...e_1/image7.jpg
Abbiamo fatto diversi passi avanti, anche se, a colpo d'occhio, il codice fa ancora schifo.
La prossima domanda da farci é: abbiamo messo dei tag dentro altri?
La risposta é si: il tag TITLE é dentro il tag HEAD che é dentro il tag HTML..
Esiste un modo per mettere in risalto questo incapsulamento?
Sappiamo che gli spazi sono ignorati dal browser, quindi possiamo usare quelli per definire l'incapsulamento, in questo modo (in gergo si dice indentare il codice):
http://numerone.altervista.org/forum...e_1/image8.jpg
E' leggermente più comprensibile, anche se si può fare di più.
Ad esempio possiamo (per risparmiare caratteri d'indentazione e quindi grandezza della pagina) mettere i tag di apertura e chiusura (solo se servono da contenitore per il testo) sulla stessa riga del testo da visualizzare, in questo modo:
http://numerone.altervista.org/forum...e_1/image9.jpg
Codice da cui siamo partiti:
http://numerone.altervista.org/forum...e_1/image1.jpg
A me sembra che, con una semplice occhiata, il codice sia molto più comprensibile, ed a voi? ;)
Riassunto:
1. Scrivere tutti i tag di una pagina sempre nello stesso modo (tutti maiuscoli o tutti minuscoli)
2. Chiudere sempre i tag
3. Indentare il codice
4. Non separare il testo da visualizzare dal tag che identifica l'elemento HTML che lo deve contenetere.
