Anche tu sei interessato a sviluppare una tua pagina web personale? Bene allora questa guida fa al caso tuo!
Sviluppare una pagina web non è una cosa semplicissima, tuttavia oggigiorno esistono parecchi modi per crearne una. Per creare una pagina Web devi conoscere un minimo il linguaggio HTML (HyperText Markup Language), inventato nel 1989 da Tim Berners-Lee. In questa guida ti aiuterò a comprendere le basi essenziali per poter scrivere pagine web statiche, senza problemi e in breve tempo.
La regola da tenere sempre in considerazione è quella di progettare pagine HTML puntando non sull’aspetto che assumeranno su un determinato computer o browser, ma indirizzandosi sulla maggior visibilità.
Che cosa è una pagina HTML?
Un file HTML non è altro che un documento di testo che descrive la struttura e il contenuto di una pagina web. Questi documenti sono visualizzati dai browser e costituiscono la base per la creazione di pagine web statiche. Una pagina HTML è composta da un insieme di marcatori (i tag) con relativi attributi, che indicano al browser come interpretare e visualizzare il contenuto.
Immagina di essere un giornalista incaricato di scrivere un articolo per un giornale, sapendo che poi qualcun altro si occuperà della formattazione. Devi comunicare all’impaginatore quali righe sono titoli, quali sono didascalie di immagini e quali costituiscono l’intestazione di un paragrafo. Con HTML, il processo è simile: stai essenzialmente dicendo al browser come organizzare e presentare diversi elementi sulla tua pagina web.
Gli elementi HTML sono come blocchi di costruzione che definiscono la struttura della nostra pagina web. Esistono tanti tag e attributi nel linguaggio HTML, come ad esempio il tag <img> per inserire delle immagini, il tag <h1> per inserire un titolo di un testo oppure il tag <p> che identifica il paragrafo di un testo.
Come realizzare un file HTML?
Per scrivere un file HTML, puoi utilizzare un semplice editor di testo, come Notepad++ su Windows, TextEdit su macOS o Visual Studio Code su diverse piattaforme. Una volta scelto l’editor di testo, inizia con una struttura di base, ad esempio:
<!DOCTYPE html>
<html>
<head> — qui ci va l’intestazione — </head>
<body> — qui ci va il contenuto — </body>
</html>
Successivamente aggiungi il contenuto al corpo della pagina, salva il file con estensione .html e aprilo successivamente nel tuo browser web per visualizzarlo.
Per dare un titolo alla nostra pagina HTML, inseriremo nell’head il seguente tag:
<title> Titolo della pagina </title>
Tra i possibili contenuti, i più essenziali da conoscere sono:
Elementi di Testo:
Per la creazione di paragrafi, usa il tag <p>:
<p> Questo è un paragrafo di testo. </p>
Per la creazione di titoli e/o sottotitoli usa i tag da <h1> a <h6>:
<h1> Titolo principale </h1>
<h2> Sottotitolo </h2>
Se vuoi scrivere un testo utilizzando un font in grassetto usa il tag <strong>, per il corsivo <em>, per quello sottolineato <u> mentre per lo sbarrato <s>.
<p>Questo è <strong>grassetto</strong> e questo è <i>corsivo</i>.</p>
<p>Questo è <u>sottolineato</u> e questo è <s>sbarrato</s>.</p>
Liste ordinate e non:
Per creare una lista ordinata secondo uno schema numerato usa il tag <ol>:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Se vuoi invece creare una lista non numerata usa il tag <ul>:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Link e Immagini:
Se vuoi aggiungere un collegamento a un sito usa il tag <a>:
<a href="https://www.esempio.com">Visita il sito esempio</a>
Per aggiungere un’immagine alla tua pagina web usa il tag <img>:
<img src="percorso/immagine.jpg" alt="Descrizione dell'immagine" />
Tabelle:
Per visualizzare una tabella nella tua pagina web, è necessario utilizzare diversi tag:
– <table> per la creazione della tabella
– <thead> definisce la sezione dell’intestazione della tabella
– <tr> rappresenta una riga all’interno della tabella
– <th> rappresenta una cella di intestazione nella tabella
– <tbody> definisce la sezione del corpo della tabella
– <td> rappresenta una cella di dati nella tabelle
Di seguito puoi trovare un semplice esempio che puoi copiare e incollare sul tuo editor per avere un’idea di come funziona il linguaggio HTML.
Esempio finale:
<!DOCTYPE html>
<html>
<head>
<title>Titolo della Pagina visualizzato</title>
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo</p>
<a> href=”https://www.link.com”>il mio link</a>
<table>
<thead>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</tbody>
</table>
</body>
</html>
