HTML5 nozioni base

Come si crea una pagina web? L’obbiettivo di questo articolo é di rendere la comprensione della struttura base di una pagina web il più semplice possibile, affinché anche persone senza basi di informatica possano capire di quello che stiamo parlando e soprattutto  come metterlo in pratica.

Quando digitiamo qualcosa nella barra di ricerca  facciamo una richiesta al server, il server elabora quello che gli viene richiesto e risponde, la risposta è quello che ci appare sullo schermo. Tutto questo funziona grazie ad un codice scritto in HTML.

HTML richiesta e risposta
Grafica richesta-risposta

Che cos’é l’HTML?

HTML e’ l’acronimo di hypertext markup language. Dividiamo in 2:

  • Markup language sta per linguaggio di marcatori, ovvero un linguaggio che permette al browser di leggere tutto quello che noi digitamo. Tutto quello che noi digitiamo viene messo all’interno di appositi marcatori, i tag, che a breve vedremo, così il browser in questo caso può interpretare quanto scritto, ad esempio se è un titolo, un paragrafo o una immagine.
  • L’hypertext fa riferimento ai collegamenti ipertestuali, ovvero i link quelli che ci permettono di muoverci da una pagina all’altra. Alla base di tutto internet è composto da connessioni fra diverse pagine.

É opportuno precisare che l’html non è un linguaggio di programmazione, in quanto non contiene alcuna logica.

acronimo HTML
Grafica per HTML

Ci sono tre elementi che compongono la facciata una pagina web:

  1. L’HTML, compone la struttura della pagina.
  2. Il CSS si occupa della facciata della pagina, di come appare agli occhi dell’utente. Aggiunge colori, sposta elementi, etc.
  3. JavaScript, JavaScript è un linguaggio di programmazione, aggiunge logica così da rendere la pagina funzionale, ovvero permette all’utente di interagire con essa.

Per sviluppare una pagina web sono necessari due strumenti : un browser e un editore di testo, ovvero un programma che ci permette di scrivere il codice HTML. Ce ne sono diversi da poter scaricare, fra i migliori in circolazione c’é Visual Studio Code, è gratuito, sviluppato da Microsoft e disponibile per Windows, Linux e macOS. Puoi scaricare Visual Studio Code dal sito dedicato.


Tag e Sintassi

Cosa sono i tag in HTML? I tags sono un insieme di caratteri che digitati nel ordine corretto impongono al browser come mostrare un elemento sullo schermo, bisogna usare una corretta sintassi affinchè il browser capisca cosa deve fare. I tag si aprono con il simbolo < e si chiudono con il simbolo >, questi simboli sono essenziali, in quanto fanno capire al browser che sono appunto tag. In base al nominativo che mettiamo all’interno dei simboli < e > il browser capisce cosa deve mostrare all’utente. Per mostrare un paragrafo usiamo <p>, per una immagine usiamo <img> e via dicendo.

Ci sono due tipi di tag:

  1. Container Tag: sono composti da un tag di apertura, un tag di chiusura e del contenuto fra i due tag. Per esempio si usano container tag per i titoli <h1>Titolo </h1> e per i paragrafi <p>io sono un paragrafo </p>. La differenza fra il tag di apertura e il tag di chiusura sta nella barra obliqua / che troviamo nel tag di chiusura. L’insieme di tag di apertura, contenuto e tag di chiusura forma un elemento. Le pagine web sono composte da una serie di elementi.
container tag HTML
Esempio di Container Tag
  1. Empty Tag: a differenza dei container tag sono composti da un solo tag e sono senza contenuto, il tag è seguito da degli attributi che fornisco informazioni per il tag stesso. Gli empty tag si usano, ad esempio, per le immagini <img src=”img.jpg” alt=”immagine“>. Nel caso delle immagini l’attributo src indica al browser dove reperire l’immagine da mostrare nello schermo, l’attributo alt fornisce un testo alternativo all’immagine quando questa non viene mostrata dal browser. Gli attributi sono formati da un nome e da un valore.
empty tag HTML
Esempio di Empty Tag

La struttura

La prima riga che si digita in ogni pagina web é una dichiarazione per far capire al browser che tipo di documento sta trattando:

<!DOCTYPE html>

Doctype sta per Document Type Declaration, informa il browser che tipo e versione di HTML stiamo usando, in questo caso HTML5, la versione di HTML che si usa oggigiorno. É giusto precisare che nonostante il tutto sia racchiuso fra i simboli < e > questo non é un tag, ma come già detto é una dichiarazione.

Il primo tag da inserire è <html>, questo tag fa capire al browser che il documento principale della pagina è html, tutto il contenuto della pagina andrà messo all’interno di questi due tag:

<!DOCTYPE html>
<html>
</html>

Il prossimo tag da inserire è la <head>. Nell’head tag si inseriscono tutte le informazioni riguardanti la nostra pagina web, da notare che queste sono solo informazioni riguardanti la pagina, non faranno parte del contenuto della pagina. I tag che verranno inseriti in questa sezione sono chiamati meta tag.

<!DOCTYPE html>
<html>
 <head>
 --- INFORMAZIONI RIGUARDANTI LA PAGINA ---
 </head>
</html>

Un tag da inserire nel head tag è il tag del titolo della pagina, questo è  <title>, e il contenuto di questo tag sarà mostrato nella barra dei titoli del browser:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
</html>

Per ora lasciamo stare il tag head e andiamo a lavorare sul contenuto della pagina, tutto quello che appare sulla pagina è incluso all’interno del tag <body>,  appunto il corpo della pagina:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
 
 --- CONTENUTO DELLA PAGINA VISIBILE SULLO SCHERMO ---
 </body>  
</html>

In questo tutorial tratteremo i tag più importanti che compongono una pagina web: impareremo come aggiungere testo, immagini e collegamenti.

Testo

Le pagine web sono solitamente composte da un titolo, da dei sottotitoli, da dei paragrafi e talvolta delle liste. All’ interno dei tag body inseriamo il tag <h1>, h sta per heading, ovvero titolo, h1 e’ il titolo principale.

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <h1>Titolo</h1>
 </body>  
</html>

I sottotitoli in html si digitano aumentando di valore il numero dopo h, i numeri vanno da 1 a 6, più aumenta il valore del numero più’ piccolo sarà il carattere del titolo:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <h1>Titolo principale --> h1</h1>
  <h2>Titolo secondario --> h2</h2>
  <h3>Titoletto --> h3</h3>
  <h4>Titolo 4 --> h4</h4>
  <h5>Titolo 5 --> h5</h5>
  <h6>Titolo 6 --> h6</h6>
 </body>  
</html>

Solitamente più di h3 non si usa, per la maggior parte delle volte l’utilizzo di h1 e h2 è più che sufficiente.

Per inserire un paragrafo si usa il tag <p>, che appunto sta per paragrafo. <p>Io sono un paragrafo </p>:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <p>Io sono un paragrafo</p>
 </body>  
</html>

Prima di continuare con i tag mi soffermerei su un aspetto importante di quando si costruiscono pagine web: i commenti. I commenti si usano per sottolineare un certo passaggio importante e fanno anche la funzione del promemoria, ci aiutano a ricordare la funzione di una determinata  parte di codice. I commenti non saranno visibili all’utente ma solo quando si accede al codice.

Studiare lo sviluppo del web comporta assimilare nuovi concetti di volta in volta, avere una codice in fase di produzione ricco di commenti ci facilita quando abbiamo la necessità di tornare su quel determinato argomento. Ti invito ad usarli spesso quando stai imparando cose nuove. Il commento in html si apre così <!– e si chiude così –>:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <p>Io sono un paragrafo</p> <!--Io sono un commento-->
 </body>  
</html>

I tag, come si dice in termine tecnico, possono anche esser nested, ovvero un tag all’interno di un altro. Per esempio quando vogliamo evidenziare una parte di paragrafo mettendo in grassetto una parte del testo si usa il tag <strong>:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <p>Questa parte del paragrafo <strong>è molto importante!</strong></p>
 </body>  
</html>

I nested tag sono necessari anche quando vogliamo fare delle liste, abbiamo 2 tipi di lista: Unordered list <ul>, dove l’ordine degli elementi al suo interno non ha importanza, come potrebbe essere la lista della spesa. Si presenta come un elenco puntato:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <ul>
   <li>Carote</li>
   <li>Pasta</li>
   <li>Patate</li>
  </ul>
 </body>  
</html>

E la Ordered List <ol>, dove l’ordine degli elementi ha importanza, come potrebbe essere una ricetta. Si presenta come un elenco numerato:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <ol>
   <li>Pulire</li>
   <li>Tagliare</li>
   <li>Cucinare</li>
  </ol>
 </body>  
</html>

Immagini

Parte integrante del web sono le immagini. Per inserire le immagini si usa il tag <img>, questo tag a differenza dei precedenti è un tag che sia apre ma non si chiude, come descritto prima questa è un empty tag. All’interno del tag img dobbiamo inserire degli attributi affinché il browser capisca cosa deve fare. Gli attributi ci danno informazioni aggiuntive riguardo l’elemento in questione. Nelle immagini ci sono 2 attributi essenziali: uno è src, che indica la fonte dove il browser va a reperire l’immagine da mostrare; l’altro è alt, ovvero un testo alternativo in caso in cui l’immagine non dovesse caricarsi.

Abbiamo due modi per inserire le immagini nella pagine, uno è aggiungendo direttamente noi le immagini, l’altro è collegandosi ad un’immagine già presente in un’altra pagina web.

Il primo e migliore metodo è aggiungere il file dell’immagine direttamente nella cartella dove abbiamo il file html:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <img src="immagine.jpg" alt="descrizione dell'immagine">
 </body>  
</html>

Il secondo metodo e’ attuabile collegandosi ad una immagine presente in un’altra pagina web, in questo caso il valore dell’attributo src sarà l’url dell’immagine scelta:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <img src="https://pixabay.com/photos/tree-sunset-amazing-beautiful-736885/" alt="descrizione dell'immagine">
 </body>  
</html>

Fra i due metodi il primo è sicuramente migliore perché abbiamo pieno controllo sull’immagine, con il secondo metodo non abbiamo controllo sull’immagine, se ad esempio l’immagine viene spostata o tolta andrebbe persa, inoltre per usare immagini altrui dobbiamo chiedere il permesso altrimenti possiamo violare diritti di copyright. 

Giusto che siamo sull’argomento immagini è imporante ricordare l’importanza dell’attributo alt, oltre a sostituire con un testo l’immagine nel caso in cui non dovesse caricarsi ha anche altre 2 importanti funzioni:

  1. rientra nei principi di web accessibility, cos’è il web accessibility? La web accessibility fa riferimento all’utilizzo di tecniche e strumenti affinché persone diversamente abili possano usufruire dei siti web. Nel caso dell’attributo alt gli utenti non vedenti che utilizzano un lettore di schermo possono capire di cosa l’immagine tratta.
  2. forniscono una descrizione al browser in modo tale che possa capire cosa l’immagine rappresenta.

Collegamenti (link)

I link ci permettono con un semplice click di passare da una parte della pagina ad un’altra, da una pagina all’altra o da un sito all’altro. Fanno parte del web sino dei suoi albori.

Per inserire i link usiamo il tag <a>. L’attributo essenziale per ogni link è href, href specifica dove vogliamo indirizzare l’utente dopo aver cliccato sul link, ed è per questo che noi daremo come valore un URL, ovvero l’indirizzo web di una determinata pagina o di un file specifico.

Un altro requisito fondamentale di ogni link è il contenuto del tag, può essere composto da testo, o un’icona, o una immagine. Dobbiamo inserire una parte visibile all’utente da poter cliccare:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <a href="https://www.google.com/">Google</a>
 </body>  
</html>

I link possono essere messi all’interno di altri tag, ad esempio un paragrafo:

<!DOCTYPE html>
<html>
 <head>
  <title>Primi passi nel mondo Web</title>
 </head>
 <body>
  <p>Fai un ricerca in<a href="https://www.google.com/">Google</a></p>
 </body>  
</html>

Due empty tag che si usano spesso sono <br> e <hr>.

Per tornare a capo e iniziare da una nuova riga si usa il tag <br>, br sta per break, ovvero rompe l’elemento e fa tornare a capo.

Quando invece vogliamo passare da un argomento all’altro o creare una netta divisione nel documento possiamo usare il tag <hr>, questo tag traccia una linea retta orizzontale, aiuta a distinguere due o più parti nella stessa pagina.

Per questo tutorial è tutto, quanto trattato è una infarinatura di HTML, sono diverse le cose di cui si dovrebbe parlare, ma ci vogliono video mirati per ogni argomento in modo tale da assimilare un concetto per volta senza creare confusione.

Ricordati che per lavorare con il web ci vuole tanta pratica e che Everyday is a Learning day.


Guarda il video:

Scarica il file del video.

Articoli simili