Il linguaggio Html

Il linguaggio HTML è un linguaggio di markup per realizzare dei documenti ipertestuali con un semplice editor di testo.

Cosa significa HTML? Il termine HTML è l'acronimo di Hyper Text Markup Language.

A cosa serve il linguaggio HTML?

Il linguaggio HTML è stato creato alla fine degli anni '80 da Tim Berners-Lee, un ricercatore del Cern di Ginevra, per organizzare i documenti scientifici.

Prima di allora i documenti erano archiviati in modo testuale e si poteva accedere alle informazioni soltanto tramite una linea di comando.

Esempio. In una vecchia BBS degli anni '80 i documenti erano testuali e consultabili con la tastiera del computer tramite la linea di comando. Erano semplici file di testo.
un esempio di BBS monocromatico

In un documento HTML, invece, il testo è affiancato da una struttura ipertestuale ( ipertesto ) che aggiunge altre funzionalità.

Ad esempio, tra le funzionalità aggiuntive più importanti:

  • il collegamento ipertestuale ( link ) tra i documenti
  • la formattazione del testo sullo schermo ( grassetto, corsivo, tabelle, ecc. ).
  • la visualizzazione delle foto e delle immagini digitali nel testo

un esempio pratico di documento HTML

Grazie al linguaggio HTML, agli inizi degli anni '90 nacque il Web.

Tutti i siti web sono realizzati in linguaggio Html.

Gli utenti cominciarono a navigare nella rete internet tramite i browser ... a colpi di mouse.

Nota. A differenza delle vecchie BBS, i documenti Html non richiedono l'utilizzo della riga di comando. Basta cliccare un link attivo per passare da una pagina all'altra.

Come funziona il linguaggio HTML?

L'HTML non è un linguaggio di programmazione. E' soltanto un sistema di codifica dell'ipertesto all'interno di un documento.

I codici di formattazione dell'Html sono detti tag.

Tutti i tag Html sono compresi tra il simbolo minore < e maggiore >.

A cosa servono i tag?

I tag sono interpretati dai browser dell'utente per formattare la visualizzazione della pagina sullo schermo.

Un esempio

Ecco un esempio pratico di documento in Html

<HTML>
<HEAD>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

Alcuni tag sono caratterizzati da un tag di apertura e uno di chiusura ( es. <HTML>, <BODY> e <HEAD> ).

I tag di chiusura si distinguono da quelli di apertura perché hanno lo slash / prima del nome.

Esempio

<P> ... </P>

Altri tag, invece, sono singoli e non hanno un tag di chiusura.

Esempio

<IMG SRC=/file>

Quest'ultimo tag visualizza un'immagine nella pagina web.

La visualizzazione nel browser

Per visualizzare un documento in Html si utilizza un apposito software detto browser.

Il browser interpreta i tag del documento e visualizza i contenuti formattati sullo schermo dell'utente.

Il linguaggio Html e la navigazione sul web

Nota. Quando un utente naviga sul web, i documenti delle pagine sono scaricate dal computer ( server ) del sito web al computer ( client ) dell'utente tramite il protocollo di comunicazione HTTP. Tuttavia, il browser può aprire anche documenti ipertestuali locali, quelli situati sul PC dell'utente. Il funzionamento è sempre lo stesso.

L'esempio precedente è banale ma è più che sufficiente per comprendere le fondamenta del linguaggio.

La visualizzazione del documento ipertestuale sul browser è la seguente:

un esempio di visualizzazione del documento HTML sul browser

Sul browser l'utente non vede i tag Html ma soltanto il testo informativo nella formattazione che gli ho dato.

La struttura di una pagina Html

Una pagina Html è compresa tra due tag <HTML> di apertura e chiusura.

<HTML>
...
</HTML>

Posso scrivere i tag in maiuscolo o minuscolo. E' indifferente.

  • <HTML>
    Il tag di apertura <html> segna l'inizio del documento ipertestuale.
  • </HTML>
    Il tag di chiusura </html> indica la fine del documento.

All'interno di questi due tag, il documento è suddiviso in due sezioni principali: <head> e <body>.

<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>

Anche in questo caso le sezioni sono indicate da un tag di apertura e di chiusura, e possono essere scritte in minuscolo o maiuscolo.

  • <HEAD>
    Nella sezione <HEAD> sono inserite le meta informazioni aggiuntive sulla pagina. Ad esempio, i metatag, le keyword e la descrizione del documento, il title sul browser, il foglio di stile css da utilizzare, ecc. Per saperne di più sulla sezione <HEAD>
  • <BODY>
    Nella sezione <BODY> sono inseriti i contenuti informativi da visualizzare sullo schermo nel browser dell'utente. La sezione include sia i contenuti testuali che i tag del linguaggio HTML di formattazione ( grassetto, corsivo, ecc. ), di organizzazione ( tavole, tabelle, ecc. ), multimediali ( immagini, suoni, video ) e di collegamento ( link ). Per approfondire la conoscenza della sezione <BODY>.

Come creare un documento Html

Un documento HTML è un semplice file di testo. Non occorre disporre di software particolari per crearne uno.

Si può usare anche un editor di testo gratuito come Notepad su Windows.

come visualizzare e modificare il codice html di un documento tramite il blocco note di Windows

Nota. Sono in commercio anche dei software di sviluppo che rendono più semplice la programmazione. Sono detti editor Html WYSIWYG.

Un esempio pratico

Apro l'editor di testo e scrivo questo semplice documento ipertestuale.

<html>
<head>
<title>La mia prima pagina web</title>
</head>
<body>
<p>Hello World! <b>Ciao</b></p>
</body>
</html>

Poi salvo il documento in un file con l'estensione .HTM o .HTML.

Ad esempio. lo salvo sul mio PC con il nome prova.htm.

Nota. Posso scrivere il nome e l'estensione in maiuscolo o minuscolo. E' indifferente. L'estensione è molto importante, perché permette ai web browser di riconoscere e aprire il documento ipertestuale.

A questo punto, apro il file del documento prova.htm con il browser.

Va bene qualsiasi browser ( Chrome, Firefox, IE, ecc. ).

aprire il file html con il browser

Il browser legge e interpreta il documento ipertestuale.

Sullo schermo appare il contenuto testuale formattato.

Una spiegazione rapida. La parola ciao è in grassetto perché è racchiusa tra i tag <b> e </b> del grassetto ( Bold ). Il tag <p> </p> indica il paragrafo. Mentre il tag <title> </title> contiene l'informazione visibile sulla scheda del browser.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

Le lezioni del corso HTML gratuito online

  1. Il linguaggio Html
  2. Cos'è il tag
  3. Quale software usare per scrivere in Html
  4. Il documento Html
  5. La sezione Head
  6. La sezione Body
  7. I tag header ( H1, H2, H3, ... )
  8. L'annidamento dei tag
  9. Gli attributi e i parametri dei tag
  10. L'elenco dei tag Html

FAQ

  1. Come fare il titolo H1 di una pagina
  2. Come fare l'allineamento
  3. Come fare il grassetto in Html
  4. Come cambiare il font
  5. Come cambiare il colore del testo su tutto il documento
  6. Come cambiare il background al documento
  7. Come visualizzare un'immagine di sfondo sulla pagina
  8. Come scrivere un testo in corsivo ( italico )
  9. Come scrivere un testo in grassetto-corsivo
  10. Come scrivere i tag Html nel codice sorgente
  11. Come fare un link
  12. Come cambiare il colore del testo
  13. Come realizzare una pagina frame suddivisa in due
  14. Come fare un iframe
  15. Come creare un link interno in un documento ( etichetta / ancora )
  16. Come unire le celle in una tabella ( ROWSPAN e COLSPAN )
FacebookTwitterLinkedinLinkedin
knowledge base

Libri di approfondimento
  1. Il linguaggio Html