Linguaggio di programmazione HTML

Che cos'è HTML

HTML è l’acronimo di HyperText Markup Language (“Linguaggio di contrassegno per gli Ipertesti”) e non è un linguaggio di programmazione. Si tratta invece di un linguaggio di markup (di ‘contrassegno’ o ‘di marcatura’), che permette di indicare come disporre gli elementi all’interno di una pagina.
Queste indicazioni vengono date attraverso degli appositi marcatori, detti tag (‘etichette’), che hanno la caratteristica di essere inclusi tra parentesi angolari (ad es, <img> è il segnaposto di un’immagine).

WP-Syntax.jpg

Con HTML indichiamo, attraverso i tag, quali elementi dovranno apparire su uno schermo e come essi debbano essere disposti. Tutte queste indicazioni sono contenute in un documento HTML, spesso detto “Pagina HTML“, che è rappresentato da un file di testo, ovvero con quei tipi di file che possiamo modificare con programmi come notepad. In genere hanno un nome che finisce con .html.

Come creare la prima pagina

Seppure molto potente, HTML non è un linguaggio complesso e può offrire soddisfazioni immediate. Per iniziare basta pochissimo, quasi niente in realtà:

  • Un browser (Google Chrome, Mozilla Firefox, Internet explorer …)
  • Un editor di testi. L’importante è ricordare che non dobbiamo utilizzare programmi come Word, OpenOffice o WordPad, che sono “word processor” evoluti e non servono allo scopo.

Per prima cosa apriamo il nostro editor di testi, ad esempio il blocco note di Windows e scriviamo un semplice testo come il seguente: "Ciao mondo".
Successivamente salviamo il file con estensione .html ad esempio “hello.html“.
Una volta assegnata questa estensione, cliccando sul file si aprirà automaticamente il browser predefinito di sistema e mostrerà una schermata simile alla seguente:

ciao_mondo.png

A seguire trovi una pagina di esempio, se vuoi puoi copiarla ed incollarla sul WordPad, modificarla a piacimento, salvare il file .html e provare ad aprire il file con il tuo brawser

<!DOCTYPE html>
<html>
 
<head>
    <title> Il mio primo sito </title>
</head>
 
<body bgcolor="blue text"="blue">
   <h1> Benvenuto nel mio sito </h1>
   <h2> Grazie della visita e buona giornata! </h2>
</body>
 
</html>

I tag

In una pagina HTML tutti gli elementi sono connotati da tag (letteralmente “etichette”). Si tratta di marcatori che evidenziano non tanto l’aspetto, quanto il senso, il ruolo, o l’organizzazione che vogliamo assegnare ai contenuti. Ad esempio se indichiamo un titolo con <h1> le parole in quel titolo rappresentano il tema principale della pagina.
Un tag è una parola chiave del linguaggio racchiusa tra parentesi angolari (< >). Esempi di tag sono <html>, <body> e <h1>.
Esistono vari tag, ognuno con la propria funzione specifica:

Impaginazione

Font e colore del testo

Il tipo di carattere (cioè il “font”) che il browser visualizza di default è il “Times”.
Purtroppo questo carattere (ottimo per la carta stampata) non è adatto a essere visualizzato sul monitor di un computer: è una questione di “grazie” (le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire per rendere più leggibile il carattere).
Dal momento che i caratteri con grazie non ottengono il risultato voluto sul monitor (quello cioè di rendere le lettere maggiormente riconoscibili e di conseguenza il testo più leggibile), ma anzi ottengono l’effetto contrario, si preferisce di solito utilizzare dei caratteri senza grazie come il “Verdana”, l’”Arial” o l’”Helvetica” (si veda l’articolo «I font e la tipografia del testo» in questo sito).
Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi: <font face=”Arial”>testo in Arial</font> per il testo in Arial. Per tutti gli altri font è necessario cambiare il nome all'interno della sintassi.
La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che “face” e “color” sono entrambi attributi del tag <font>). Sara necessario cambiare la sintassi: <font face="Arial" color="blue">.

Colore e immagine di sfondo

In HTML possiamo impostare un colore di sfondo utilizzando il relativo attributo del tag body con un'appropriata sintassi: <body bgcolor="blue"> (per gli altri colori sarà necessario cambiare il nome del colore), dove bgcolor sta per “background color”, cioè “colore di sfondo”.
Per inserire un’immagine come sfondo è sufficiente utilizzare la seguente sintassi: <body background=”imgSfondo.gif”> se l'immagine si trova nella stessa cartella della nostra pagina HTML.

Bibliografia

http://www.html.it
http://www.mrwebmaster.it

Salvo diversa indicazione, il contenuto di questa pagina è sotto licenza Creative Commons Attribution-ShareAlike 3.0 License