Benvenuti su questa mia guida dedicata a HTML. Nessuna pretesa, vuole semplicemente essere una guida di aiuto con basi introduttive, qualcosa che illustri con esempi pratici le potenzialità di questo metalinguaggio che nonostante le continue evoluzioni del web continua ad essere il pilastro portante della rete. Nasce dalle molteplici domande che ricevevo in forma privata nella mia mailbox e da qualche anno ormai sul forum gratuito di supporto. Come potrete notare cerco di tenerla sempre aggiornata nonostante non sia facile visto il continuo evolversi della rete stessa, mi auguro con questo mio ennesimo sforzo di riuscire a soddisfare tutte (o quasi) le vostre esigenze. Se poi l'argomento dovesse interessarvi al punto tale di volerlo ulteriormente approfondire, la cosa migliore sarebbe affidarsi alla letteratura specializzata. Da modesto quale sono credo di aver trattato in queste pagine tutto quello che realmente serve per creare un buon sito web.

Settembre 2008: La guida è stata scritta nella sua prima versione nel Settembre del 1998 ed oggi molte cose sono cambiate, o sarebbe meglio dire evolute, grazie soprattutto all'uso dei CSS: fogli di stile, e ad alcune regole ben precise e più restrittive che hanno dato vita al XHTML (evoluzione del linguaggio html) entrambi regolati dal W3C, consorzio che si occupa proprio di questo argomento. Tutto quello che troverete in questa guida è e resta comunque perfettamente funzionante, vi informo che esiste una rubrica che tratta Xhtml con i fogli di style. La trovate su questo link: http://www.web-link.it/xhtml mentre qui la guida ai fogli di style CSS.

Con questo aggiornamento mi prefiggo di rendere questa stessa guida adeguata e di conseguenza sempre al passo coi tempi.

E' possibile scaricare la guida anche in formato compresso .zip per poterla consultare comodamente off-line, cioè scollegati dalla rete, è sufficiente cliccare su questo link: Scarica guida html

Attenzione! eventuali ultime modifiche potrebbero non essere ancora inserite nella versione scaricabile, queste vengono infatti aggiornate ad intervalli prestabiliti o quando siano di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi.   Alcuni consigli per adoperarla al meglio: nel menù laterale trovate disposto verticalmente l'indice degli argomenti: tabelle, links, immagini ecc. Per ogni argomento esistono altri due menù disposti orizzontalmente che riportano in ordine alfabetico i nomi degli elementi o tags

• Elementi o Tags:

ed i relativi attributi, (sempre in ordine alfabetico o di assemblaggio codice).

• Attributi:

Basterà un clik sul nome dell'elemento o su quello del suo attributo per raggiungere la descrizione. Alla fine di ogni descrizione una riga come questa sotto separa e conclude gli elementi, grazie alla piccola freccia verde posizionata a destra della riga separatrice sarà possibile (cliccandola) ritornare all'indice degli argomenti.

HTML (Hyper Text Markup Language) è formato da definizioni, elementi (tags), questi impartiscono al browser (il programma usato per la navigazione) delle direttive ben precise al fine di ottenere il risultato a video, una sorta di interpretazione che varia a volte a seconda del tipo di browser adoperato. Si tratta dunque di conoscere il significato dei vari elementi e come questi possono essere combinati fra loro per avere la padronanza del linguaggio.

Per la stesura di questo metalinguaggio si fa uso di un normale editor di testi, meglio se un editor specifico per HTML, cominciamo proprio da qui, cliccando su questo link sarà possibile scaricarne uno dalla rete.

Cosa è un editor e cosa è il codice html?

Un editor altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; quel codice che i vari browser di navigazione, qualunque essi siano, riconoscono ed interpretano. Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono molte le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto, da qui il nome sigla HTML: Hyper Text Markup Language.

Gli editors per HTML si dividono in due categorie:

Visuali: molto semplici, simili ai programmi di grafica, permettono di disegnare o semplicemente trascinare quello che serve all'interno del loro ambiente di sviluppo, operazione che genera automaticamente codice html valido.

Testuali: bisogna scrivere il codice, quindi conoscerlo, offrono gli strumenti giusti con i suggerimenti necessari alle varie situazioni, si ha il pieno controllo di quello che si sta facendo superando così quelli che spesso sono i limiti degli editors visuali. Personalmente adopero: HomeSite da quando era di Allaire, poi Macromedia ed oggi Adobe, fermo alla sua versione 5.5 da anni, ma guarda caso sempre molto attuale, lo trovo formidabile consapevole che si tratta di un parere del tutto soggettivo. Ha un solo difetto: costa, a differenza di molti altri editors distribuiti gratuitamente.

Dopo quanto appena detto è abbastanza ovvio immaginare che il principiante si affiderà agli editors visuali. Non fatelo se non per prova. C'è chi consiglia di adoperare il notepad o il wordpad di windows, personalmente reputo la scelta a dir poco illogica, della serie "facciamoci del male da soli". Non capisco perchè mai si dovrebbe adoperare uno strumento che di html non ha nulla quando la rete offre ottimi programmi, alcuni addirittura gratuiti (freeware), che danno un grosso aiuto proprio nella stesura di questo tipo di codice.

Chi avesse comunque deciso di affidarsi agli editors visuali può tranquillamente smettere di leggere il seguito di queste pagine, non gli serviranno a molto visto che parleremo di codice che l'editor visuale gestisce in assoluta autonomia. Un arrivederci a queste persone che probabilmente torneranno qui non appena insorgeranno le prime difficoltà dovute alla mancata realizzazione di determinate "cose" che non sempre un editor visuale è in grado di fare. Non ho nulla contro gli editor visuali ve lo assicuro, anzi per certe "cose" ho sempre pensato che avrei dovuto farne uso anch'io.

Un'ultima raccomandazione prima di passare in rassegna i vari elementi (tags): è bene ricordare sempre che qualsiasi pagina creata per la rete prima di poter essere visualizzata dovrà essere scaricata nella memoria interna del browser (cache); quindi, pagine lunghe o farcite di immagini, applets e suoni, sono spesso per il visitatore un ottimo motivo per decidere di abbandonare quella pagina perchè stanco di attendere. Evitatele nel modo più assoluto, meglio pianificare diverse pagine al posto di una singola. Suddividere il lavoro in più pagine non costa nulla ed offre maggiore flessibilità anche a voi stessi per eventuali future modifiche.

Html non è un vero e proprio linguaggio di programmazione, o almeno non come si è abituati a pensare quando si parla di programmazione. HTML è molto più semplicemente un insieme di istruzioni: <TAGS>, che il browser legge in maniera sequenziale: dall'alto verso il basso, da sinistra verso destra, esattamente come avviene per noi umani la normale lettura di un testo.

Queste istruzioni, o meglio questi elementi (tags), sono racchiusi fra parentesi angolari: <queste> ogni elemento (tag) impartisce un ordine preciso che termina con lo stesso elemento preceduto da una barra retroversa, per rifarmi all'esempio appena citato: </queste>

Non sono molti gli elementi che compongono il linguaggio, alcuni non vengono addirittura mai adoperati, al punto che spesso mi sono chiesto cosa li abbiano inventati a fare :). Come già detto, mi limiterò ad illustrare soltanto quelli che secondo il mio modesto parere possono realmente essere utili.

Per chi non avesse mai avuto prima d'ora alcuna esperienza con HTML è consigliabile iniziare dalla rubrica primi passi che in poche e semplici lezioni chiarisce quelli che sono i meccanismi per usare gli elementi illustrati in questa stessa guida, sulla quale potrete sempre ritornare una volta acquisito quel minimo di esperienza necessaria ad assemblare gli elementi trattati.

Non vi resta che selezionare dal menù laterale il gruppo di elementi che vi interessano.

Buona lettura. Andrea Bianchi

Vedi un esempio della Struttura Base

Questa opera è pubblicata sotto una
Licenza Creative Commons.

  Potete fare domande e discutere l'argomento sul Forum