Last Updated on 2 anni | Published: 31/05/2024
Introduzione all' HTML
HTML, acronimo di HyperText Markup Language, è il linguaggio standard per la creazione di pagine web. È utilizzato per descrivere la struttura di una pagina web attraverso l’uso di tag e attributi. In questo articolo, esploreremo le basi di HTML e progrediremo verso concetti più avanzati, illustrando ogni argomento con esempi di codice HTML.
HTML è un linguaggio di markup utilizzato per strutturare contenuti su Internet. Ogni elemento in HTML è rappresentato da tag, che sono racchiusi tra parentesi angolari <>. Esistono tag di apertura e tag di chiusura, con il contenuto posto tra di essi:
<html>
<head>
<meta charset=”UTF-8“>
<title>Pagina di esempio</title>
</head>
<body>
<h1>Benvenuto nel mondo dell’HTML</h1>
<p>Questo è un paragrafo di esempio.</p>
</body>
</html>
Ogni documento HTML ha una struttura di base che comprende i seguenti elementi:
<!DOCTYPE html>: Dichiarazione del tipo di documento.<html>: Tag radice che contiene tutto il contenuto della pagina.<head>: Sezione per i meta-dati (informazioni sulla pagina).<title>: Titolo della pagina, visibile nella barra del titolo del browser.<body>: Contiene il contenuto visibile della pagina.
HTML offre vari tag per formattare il testo. Ecco alcuni dei più comuni:
<h1>–<h6>: Tag per i titoli, dove<h1>è il più importante e<h6>il meno importante.<p>: Tag per i paragrafi.<a>: Tag per i collegamenti ipertestuali.<strong>e<em>: Tag per il testo in grassetto e corsivo, rispettivamente.
<!DOCTYPE html>
<head>
<title>Formattazione del testo</title>
</head>
<body>
<h1>Intestazione principale</h1>
<h2>Intestazione secondaria</h2>
<p>Questo è un <strong>paragrafo</strong> esempio con testo <em>in corsivo</em>.</p>
<p>Visita<a href=”https://www.example.com”>nostro sito</a>maggiori informazioni.</p>
</body>
</html>
Le immagini sono aggiunte alle pagine web utilizzando il tag <img>. Questo tag richiede l’attributo src per specificare il percorso dell’immagine e l’attributo alt per fornire un testo alternativo.
<!DOCTYPE html>
<html>
<head>
<title>Immagini in HTML</title>
</head>
<body>
<h1>Inserimento di immagini</h1>
<img src=”https://www.example.com/immagine.jpg” alt=”Descrizione“>
</body>
</html>
Le tabelle sono create utilizzando i tag <table>, <tr>, <th>, e <td>.
<head>
<title>Tabelle in HTML</title>
</head>
<body>
<h1>Esempio di tabella</h1>
<table border=”1“>
<tr>
<th>Nome</th>
<th>Età</th>
</tr>
<tr>
<td>Mario</td>
<td>30</td>
</tr>
<tr>
<td>Luigi</td>
<td>25</td>
</tr>
</table>
</body>
</html>
I moduli consentono agli utenti di inviare dati a un server. Utilizzano i tag <form>, <input>, <textarea>, e <button>.
</head>
<body>
<h1>Modulo di Contatto</h1>
<form action=”/submit” method=”post“>
<label for=”name“>Nome:</label>
<input type=”text” id=”name” name=”nome“>
<br>
<label for=”email“>Email:</label>
<input type=”email” id=”email” name=”email“>
<br>
<textarea id=”messaggio” name=”mess” rows=”4” cols=”50“> Messaggio …. </textarea>
<br>
<button type=”submit“> Invia </button>
</form>
</body>
</html>
I Form (moduli) sono una delle parti più importanti del web, senza di esse non ci sarebbe un modo facile per raccogliere i dati, cercare risorse, effettuare una iscrizione per ricevere informazioni. Come possiamo notare si utilizza un tag di <input> per creare diversi controlli in un Form.
È un elemento in linea e riceve attributi come type, name, minlength, maxlength, placeholder e così via. Ciascuno di essi hanno specifici valori che possono ricevere.
Inoltre ci sono diversi type di input oltre al text, email e submit, tra questi possiamo menzionare password, number, radio, checkbox, button, file, color, search, url, tel, date, select.
I tag <div> e <span> sono utilizzati per raggruppare elementi e applicare stili o script.
</head>
<body>
<div style=”background-color: lightblue; padding: 20px;”>
Questo è un elemento div.
<span style=”color: red;”>Questo è un elemento span. </span>
</div>
</body>
</html>
HTML supporta sia liste ordinate che non ordinate. Le liste ordinate usano il tag <ol>, mentre quelle non ordinate usano il tag <ul>. Gli elementi di lista sono rappresentati con il tag <li>.
</head>
<body>
<h1>Esempio di Liste</h1>
<h2>Lista non ordinata</h2>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
</body>
</html>
Attributi principali:
- style=“list-style-type: disc“ Specifica il tipo di marker (punto, cerchio, quadrato). Non è supportato in HTML5, ma può essere usato in XHTML o HTML 4.01.
Oltre a disc, circle, square e none, ci sono altre opzioni meno comuni ma valide per list-style-type in CSS, che possono essere usate anche con liste ordinate (<ol>):
decimal: Numeri (1, 2, 3, …)
decimal-leading-zero: Numeri con zero iniziale (01, 02, 03, …)
lower-roman: Numeri romani minuscoli (i, ii, iii, …)
upper-roman: Numeri romani maiuscoli (I, II, III, …)
lower-alpha: Lettere minuscole (a, b, c, …)
upper-alpha: Lettere maiuscole (A, B, C, …)
Utilizzo di list-style-type in HTML5
<html>
<head>
<title>Esempio di liste HTML5 con CSS</title>
<style>
.disc { list-style-type: disc; }
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.none { list-style-type: none; }
</style>
</head>
<body>
<h2>Lista con marker predefinito (disc)</h2>
<ul class=”disc“>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<h2>Lista con marker circle</h2>
<ul class=”circle“>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<h2>Lista con marker square</h2>
<ul class=”square“>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>
Attributi Globali
Gli attributi globali possono essere utilizzati con qualsiasi elemento HTML per definire proprietà comuni come l’identificatore (id), le classi (class), lo stile inline (style), e molto altro.
<head>
<title>Attributi Globali</title>
</head>
<body>
<h1 id=”intestazione” class=”titolo” style=”color: blue;”> attributi globali</h1>
<p class=”testo”>Paragrafo con una classe.</p>
</body>
</html>
Elementi di Layout
Con l’avvento di HTML5, sono stati introdotti nuovi tag semantici per un miglior layout della pagina web, come <header>, <nav>, <section>, <article>, <aside>, e <footer>.
<head>
<title>Layout HTML5</title>
</head>
<body>
<header>
<h1>Header della Pagina</h1>
</header>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>About</a></li>
<li><a href=”#contact”>Contact</a></li>
</ul>
</nav>
<section>
<article>
<h2>Articolo 1</h2>
<p>Contenuto dell’articolo 1.</p>
</article>
<article>
<h2>Articolo 2</h2>
<p>Contenuto dell’articolo 2.</p>
</article>
</section>
<aside>
<h3>Informazioni Laterali</h3>
<p>Contenuti aggiuntivi e pubblicità.</p>
</aside>
<footer>
<p>Footer della Pagina</p>
</footer>
</body>
</html>
Video e Audio
HTML5 ha introdotto tag nativi per l’inclusione di video e audio: <video> e <audio>. Questi tag supportano vari formati e possono essere controllati direttamente dall’utente.
<head>
<title>Video in HTML5</title>
</head>
<body>
<h1>Inserimento di Video</h1>
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
Il tuo browser non supporta il tag video.
</video>
</body>
</html>
Esempio di Audio
<head>
<title>Audio in HTML5</title>
</head>
<body>
<h1>Inserimento di Audio</h1>
<audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”>
Il tuo browser non supporta il tag audio.
</audio>
</body>
</html>
HTML è il fondamento del web e la comprensione della sua sintassi e delle sue funzionalità è essenziale per chiunque voglia creare pagine web. Abbiamo esplorato le basi di HTML e fornito esempi pratici per aiutarti a iniziare. Man mano che progredisci, scoprirai ulteriori tag e tecniche che ti permetteranno di creare pagine web sempre più complesse e interattive. Buon coding!