Introduzione all' HTML

HTML significa letteralmente Hypertext Markup Language, ed è il linguaggio più comune utilizzato per la creazione di pagine Web.

  • Hypertext(Ipertesto) si riferisce al modo in cui le pagine Web (i documenti HTML) sono collegate tra loro. Così un link disponibile su una pagina Web viene chiamato Hypertext.

  • Come suggerisce il nome, HTML è un Markup Language, ossia il testo viene "marcato" tramite tags che indicano al browser come strutturare e visualizzare il documento.

In origine, l' HTML venne sviluppato con l'intenzione di definire la struttura dei documenti come le intestazioni, i paragrafi, le liste e così via in modo da facilitare lo scambio di informazioni scientifiche fra i ricercatori.

Ora, grazie alla molteplicità di tag disponibili, l' HTML viene ampiamente utilizzato per formattare le pagine Web.

Struttura base di un documento HTML

A seguire un semplice esempio di documento HTML:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

E' possibile utilizzare l'opzione Try it disponibile nell'angolo superiore destro del box contenente il codice per verificare il risultato di questo codice HTML, in alternativa è possibile copiare il codice all'interno di un file di testo tramite un text editor e salvarlo come test.htm. Infine aprendo il file tramite un browser Web come Internet Explorer, Google Chrome, o Firefox, ecc Verrà mostrato il seguente risultato:

HTML Hello World

Tags HTML

Come detto in precedenza, l'HTML è un linguaggio di markup e fa uso di vari tag per formattare il contenuto. Questi tags sono racchiusi fra parentesi angolate e chiamati <Tag Name>. Eccetto pochi tags, la maggiorparte di essi necessità del corrispettivo tag di chiusura. Ad esempio <html> termina con </html> e <body> termina con il tag </body>, ecc.

A seguire un esempio di utilizzo di alcuni principali tags:

TagDescrizione
<!DOCTYPE...>Definisce il tipo di documento e la versione HTML.
<html>Questo tag racchiude l'intero documento HTML, e principalmente comprende il document header, rappresentato dai tags <head>...</head> ed il document body, rappresentato dai tags <body>...</body>.
<head>Indica il document header, può contenere all'interno altri tags HTML come <title>, <link> ecc.
<title>Il tag <title> è utilizzato all'interno del tag <head> per indicare il titolo della pagina.
<body>Rappresenta il corpo del documento HTML e contiene altri tags come <h1>, <div>, <p> ecc.
<h1>Rappresenta l'intestazione.
<p>Indica un paragrafo testuale.

Per imparare l'HTML, sarà necessario studiare vari tag e capire come si comportano durante la formattazione di un documento testuale. Imparare l'HTML vuol dire semplicemente imparare l'uso di diversi tag, al fine di formattare il testo o le immagini per costruire accattivanti pagine Web.

Il World Wide Web Consortium (W3C) a partire da HTML 4 raccomanda di scrivere i tags in minuscolo.

Struttura di un documento HTML

Un tipico documento HTML segue la seguente struttura:

Document declaration tag 

<html>
   <head>
       Document header related tags
   </head>

   <body>
       Document body related tags 
   </body>
</html>

Studieremo tutti i tag di intestazione (head) e del corpo (body) nei capitoli successivi, per ora vediamo che cosa è il tag di dichiarazione del documento.

La dichiarazione <!DOCTYPE>

Il tag di dichiarazione viene utilizzato dal browser Web per comprendere la versione del codice HTML utilizzato nel documento. La versione attuale di HTML è HTML 5 e utilizza la seguente dichiarazione:

<!DOCTYPE html>

Esistono molti altri tipi di dichiarazione che possono essere utilizzati nel documento HTML a seconda della versione di HTML utilizzata. Vedremo ulteriori dettagli al riguardo quando discuteremo del tag <!DOCTYPE...>.

Advertisements