Guida HTML
Imparare HTML è fondamentale per chiunque desideri iniziare a sviluppare siti web, sia per hobby che per lavoro. La grande disponibilità di CMS e software di vario tipo per la creazione di siti web in modo visuale, infatti, non deve far pensare che la conoscenza dei tag e delle strutture di HTML sia superflua, essendo, viceversa, un requisito imprescindibile per chiunque desideri lavorare "dietro le quinte" di Internet.
Scopo di questa guida è, pertanto, quello di fornire al lettore una conoscenza adeguata della sintassi di HTML, dei suoi tag più importanti e dei loro attributi, corredando ogni concetto con esempi pratici ed illustrazioni.
La guida HTML è adatta a chiunque e non ha particolari prerequisiti, essendo stata pensata per poter essere un valido punto di partenza per chi, per la prima volta, si affaccia al fantastico mondo del web-publishing e delle meraviglie che si nascondono dietro ad un sito web ben fatto.
Cos'è HTML?
HTML è l'acronimo di HyperText Markup Language ed è il linguaggio col quale vengono create le pagine web. Si tratta di un linguaggio di pubblico dominio sviluppato in seno al W3C, ovvero il World Wide Web Consotium, cioè il consorzio che presiede allo sviluppo del web e dei linguaggi ad esso connessi. Questo linguaggio è stato sviluppato da un ricercatore del CERN - Tim Berners Lee - verso la fine degli anni ottanta parallelamente alla definizione del protocollo HTTP. Nel corso degli anni il linguaggio ha subito diverse modifiche e revisioni. Ad oggi la versione ufficiale di HTML è la 4.01 (pubblicata nel dicembre del 1999) ma da molti anni si sta lavorando ad HTML5 che si preannuncia come una vera e propria rivoluzione per il web. Attualmente HTML5 è soltanto una "bozza" (cioè non è ancora stato rilasciato ufficialmente), tuttavia la maggior parte dei browser in circolazione ne offre già un discreto supporto. In questa guida, tuttavia, faremo riferimento ad HTML 4.01 (per chi volesse approfondire le tematiche legate ad HTML5 segnalo la disponibilità , su questo sito, di una ricca guida ad HTML5).Come funziona HTML?
Il linguaggio HTML, è bene precisarlo, non è un linguaggio di programmazione vero e proprio ma, più correttamente, può essere definito come un linguaggio di marcatura (o linguaggio di markup) basato su tag. I tag sono gli elementi strutturali di ogni pagina web e costituiscono le "mattonelle" che danno vita e forma ai documenti ipertestuali. HTML è detto ipertestuale proprio perchè, attraverso i suoi tag, consete di creare pagine composte da diversi elementi tra cui testo, immagini, video, ecc.I browser
Il compito di interpretare il markup HTML è affidato ai browser; cioè ai software di navigazione su Internet i quali hanno il compito di connettersi ad un server remoto (identificato da un host o, più semplicemente, nome a dominio) e scaricare (download) il documento richiesto. Una volta scaricato, il documento verrà interpretato (renderizzato) dal "motore" del browser che restituirà all'utente la pagina web pronta per essere fruita. sul mercato esistono diversi browser, i più famosi sono: Internet Explorer, Firefox, Chrome, Safari ed Opera. E' bene precisare fin da subito che non tutti i browser interpretano il codice HTML alla stessa maniera, è pertanto possibile notare delle piccole differenze visualizzando la stessa pagina web con browser diversi.Cosa possiamo fare con HTML?
Grazie al linguaggio HTML è possibile creare documenti ipertestuali piuttosto ricchi ed articolati. Grazie al markup del linguaggio HTML, infatti, possiamo:- formattare testi (inserire titoli e paragrafi, gestire grassetto e corsivo, ecc.);
- creare elenchi (numerati e puntati);
- inserire immagini;
- creare link ed ancore;
- creare tabelle;
- gestire l'interazione con gli utenti (mediante i form);
- inserire file multimediali (audio e video).
La struttura di una pagina HTML
In questo articolo, inizieremo a creare un documento HTML di base per familiarizzare con l'argomento. È importante notare che per creare una semplice pagina HTML, non è necessario disporre di software o editor particolari. Puoi creare una pagina HTML utilizzando un semplice editor di testo. Un file HTML è in realtà un documento plain text in cui, grazie all'utilizzo...
Il DOCTYPE di una pagina HTML
Prima di parlare dell'header dei documenti HTML è opportuno dedicare una lezione ad un elemento importante e molto spesso sottovalutato: il doctype. Il doctype è (o dovrebbe essere) la prima riga di codice di un documento HTML e serve per indicare al browser il tipo di documento di cui si tratta. Il termine doctype, infatti, è la contrazione di...
HTML <head> e i metadata
Come abbiamo detto ogni pagina web scritta in HTML può essere idealmente suddivisa in due aree: una sezione d'intestazione (header) ed il corpo effettivo della pagina.
In questa lezione soffermeremo la nostra attenzione sulla prima di queste aree dando una sbirciata a quello che succede tra i tag <head> e </head>.
Come detto il contenuto di questa porzione di pagina non...
HTML <body> – Il corpo della pagina
Nella lezione precedente abbiamo visto il funzionamento del tag <head> ed i principali tag in esso contenuti. In questa lezione vedremo, invece, cos'è il tag <body> e qual'è la sua funzione nell'economia di una pagina web.
Come abbiamo già avuto modo di osservare, il tag <body> definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi...
Impostare un colore di sfondo in HTML
In questa lezione vedremo come gestire il colore di sfondo di una pagina web. La scelta dei colori è una delle decisioni più importanti da compiere in fase di web-design ed ovviamente, grazie al codice HTML, abbiamo la massima libertà creativa nel definire il colore degli elementi che compongono la nostra pagina.
Tra gli elementi di un documento HTML un...
Immagine di sfondo ad un sito web con HTML
Nella lezione precedente abbiamo visto come lavorare sullo sfondo di una pagina applicando un colore arbitrario mediante l'attributo bgcolor (o, più correttamente, mediante i CSS e l'attributo style). In questa lezione vedremo come personalizzare ulteriormente lo sfondo della pagina applicando un'immagine di background invece che un semplice colore di riempimento.
Non è questo il luogo dove fare dissertazioni di web-design,...
Commenti HTML: cosa sono e come utilizzarli correttamente
In questa lezione vedremo come inserire dei commenti all'interno del codice HTML delle nostre pagine web. Circa l'importanza dei commenti ritengo opportuno rammentarvi che la presenza di annotazioni all'interno del codice rappresenta non solo una buona regola di programmazione, ma è anche una pratica utilissima che faciliterà ogni tipo di intervento futuro (effettuato da noi o da terzi) all'interno...
Titoli, paragrafi, div e span
Da questa lezione iniziamo ad esaminare gli elementi che l'HTML mette a disposizione dello sviluppatore per la creazione di pagine web, cioè i tag da utilizzare all'interno del corpo della pagina.
I titoli: h1, h2, ..., h6
Iniziamo con gli elementi di testo; nel caso specifico parliamo dei titoli o heading che dir si voglia. In HTML esistono sei livelli di...
Andare a capo in HTML e inserire linee orizzontali di separazione
Come abbiamo detto nella lezione precedente, normalmente, in HTML i blocchi di testo sono racchiusi all'interno dei tag <p> e <div> i quali, per loro stessa natura, producono un ritorno a capo (in quanto elementi di tipo block-level) generando uno spazio vuoto (ovviamente la presenza o meno di questo spazio e la sua dimensione sono regolabili attraverso i CSS,...
Elenchi HTML: liste ordinate, non ordinate e di definizione
Vediamo adesso il cosa sono e come funzionano gli elenchi HTML, i quali possono essere numerati o puntati o, più correttamente, ordinati o non ordinati: i primi sono elenchi caratterizzati da una scaletta numerica o alfabetica, mentre i secondi sono elenchi di voci senza un ordine preciso.
Da un punto di vista funzionale, per fare un esempio, è corretto utilizzare...
Formattazione del testo in HTML: scegliere font, dimensione e colore
La formattazione del testo eseguita direttamente in HTML è una pratica diventata ormai obsoleta e si consiglia di ricorrere ai fogli di stile CSS. Vediamo in ogni caso come formattare il testo con HTML scegliendo il font da utilizzare, la dimensione del testo ed il colore.
Il tag in oggetto è font e supporta gli attributi face per la scelta...
Stilizzare il testo in HTML: grassetto, corsivo, sottolineato, ecc.
Come più volte detto nella precedente lezione, oggi la formattazione del testo non può prescindere dall'utilizzo dei CSS soprattutto per quanto attiene all'utilizzo del tag <font> (ormai deprecato). Discorso (parzialmente) diverso è quello che attiene alla stilizzazione del testo mediante l'utilizzo di grassetto, corsivo, sottolineato, ecc.
In questi casi, infatti, l'utilizzo del markup HTML non può dirsi "superato" in quanto,...
Link HTML: i collegamenti ipertestuali
Internet è nata e si è sviluppata grazie alla ipertestualità, ovvero alla possibilità offerta agli utenti di poter navigare comodamente tra le pagine di un sito e di raggiungere altri siti con un semplice click su quello che viene definito, appunto, collegamento ipertestuale o link.
In questa lezione della nostra guida vedremo come inserire link HTML a risorse interne ed...
Il link MAILTO: creare un link per spedire un email
Nella lezione precedente abbiamo visto come creare e gestire collegamenti ipertestuali all'interno di un documento HTML. In questa lezione vedremo come sfruttare il markup offerto dal tag <a> per creare un link piuttosto particolare: il link MAILTO ("mail to ...", in italiano, significa "mail per ...").
Come molti di voi sapranno, infatti, è possibile creare dei link collegati ad un...
Link TEL: inserire link a numeri di telefono con HTML
In HTML è possibile inserire dei link a dei numeri di telefono, creando, quindi, un modo veloce ed immediato per effettuare una telefonata verso un numero telefonico presente all'interno di una pagina web. Tale opportunità è stata introdotta da HTML 5 che ha previsto la possibilità di creare dei link utilizzando una varietà di protocolli tra cui tel. Ma...
Inserire immagini in HTML (il tag IMG)
Una delle caratteristiche del linguaggio HTML è, come insito nel suo nome, l'essere ipertestuale. Con l'HTML, quindi, si supera il testo ed i documenti si arricchiscono di altri elementi come immagini ed elementi multimediali. In questa lezione vedremo come inserire un'immagine in un documento HTML attraverso l'utilizzo del tag <img>. Prima di vedere qual'è il markup HTML necessario per...
Mappe di immagini cliccabili in HTML
In HTML sappiamo tutti come inserire un'immagine "cliccabile"; si tratta, semplicemente, di applicare un link ad un tag <img/>:
<a href="pippo.html"><img src="pippo.jpg" border="0"></a>
In realtà, però, con HTML possiamo fare molto di più! possiamo creare, cioè, le cosiddette mappe di immagini cliccabili, rendendo quindi sensibile al click del mouse solo una determinata porzione di immagine, oppure rendendo cliccabile più porzioni di...
Tabelle HTML: la struttura e i tag per creare una tabella
La creazione di una pagina Web dall'aspetto gradevole e ben strutturato si basava, fino a qualche tempo fa, sull'utilizzo delle tabelle HTML, ovvero griglie in cui venivano inseriti i contenuti della pagina in modo da poterli disporre affiancati o a cascata a seconda dei propri gusti.
Con l'evolversi delle tecniche di Web Design, tuttavia, l'utilizzo delle tabelle si è ridotto...
Gestire l’allineamento con HTML: il tag center e gli attributi align e valign
Attraverso il markup HTML è possibile definire l'allineamento degli elementi costitutivi della pagina (testo, immagini, tabelle, ecc.) per farlo si ricorre al tag <center> e agli attributi align e valign. E' bene precisare, tuttavia, che ad oggi si tratta di tecniche di allineamento deprecate in quanto la presentazione dei contenuti dovrebbe essere gestita esclusivamente attraverso i CSS.
Il tag <center>
Come...
Form HTML (inserire moduli in una pagina web)
All'interno delle pagine web è possibile inserire dei Form HTML, cioè dei moduli attraverso i quali gli utenti possono inserire informazioni e/o effettuare scelte. In questa lezione della nostra guida HTML vedremo cosa sono i form, come funzionano e come è possibile crearne uno. Non mancheranno alcuni esempi pratici di form HTML pronti all'uso.
Form: cosa sono e a cosa...
I Frame HTML: creare un frameset
I frame sono delle "finestre" all'interno delle quali vengono visualizzate altre pagine web. Si tratta, in sostanza, di una sorta di sistema di inclusione attraverso il quale più pagine web possono essere composte insieme come in un puzzle e presentate all'utente all'interno di una cornice che prende il nome di frameset.
La tecnica dei frameset - adifferenza degli iframe che...
I Frame in linea: il tag iframe di HTML
Oltre ai frame tradizionali esistono i frame in linea costituiti dal tag iframe (il nome del tag corrisponde, appunto, alla contrazione di inline frame).
Non si tratta di frameset ma di elementi veri e propri della pagina che, in quanto tali, possono essere inseriti tra i vari tag del <body" di un comune documento HTML. Mentre nel frameset abbiamo una...
Player HTML: riprodurre file audio e video in una pagina web
Il linguaggio HTML consente di gestire, all'interno delle pagine web, elementi multimediali come file audio e video.
Si pensi, ad esempio, uno store di musica online che permette di ascoltare le anteprime delle canzoni che si intendono acquistare, oppure una testata giornalistica che permette di vedere determinati servizi video, oppure ad una TV online o servizi di streaming (come ad...
Redirect HTML: come funzionano e come crearli
Esistono diverse tecniche per redirezionare automaticamente gli utenti. Normalmente le tecniche di redirect più utilizzate coinvolgono Javascript oppure linguaggi server-side come PHP o ASP. In realtà, per fare un semplice redirect, non è necessario scomodare linguaggi di scripting. Sfruttando i metatag, infatti, è possibile effettuare redirect sia immediati che temporizzati in puro HTML.
Prima di addentrarci nel codice, tuttavia, è...
Utilizzare bottoni in HTML come fossero link
Attraverso i tag HTML <button> e <input type="button"> viene creato un bottone o pulsante. Questi tag sono stati concepiti per essere usati all'interno di form oppure per essere collegati a specifiche azioni Javascript come, ad esempio, stampare una pagina o aprire una finestra.
Una delle domande frequenti di chi è alle prime armi con il web-publishing, tuttavia, è come utilizzare...