Versione italiana
Guida su HTML
1. Introduzione a HTML
HTML è il linguaggio di markup utilizzato per strutturare il contenuto delle pagine web. Consente di definire elementi come testi, immagini, link e altri contenuti multimediali.
Link utili:
2. Struttura di base di un documento HTML
Un documento HTML ha una struttura di base che include le seguenti sezioni:
<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titolo della Pagina</title> </head> <body> <h1>Benvenuto in HTML!</h1> <p>Questo è un paragrafo di esempio.</p> </body> </html>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo della Pagina</title>
</head>
<body>
<h1>Benvenuto in HTML!</h1>
<p>Questo è un paragrafo di esempio.</p>
</body>
</html>
<!DOCTYPE html>
: Dichiara il tipo di documento.<html>
: L'elemento radice del documento HTML.<head>
: Contiene metadati e informazioni sulla pagina.<body>
: Contiene il contenuto visibile della pagina.
3. Elementi HTML comuni
Ecco alcuni degli elementi HTML più comuni:
-
Intestazioni: Utilizzate per i titoli, da
<h1>
a<h6>
.<h1>Intestazione principale</h1> <h2>Intestazione secondaria</h2>
<h1>Intestazione principale</h1> <h2>Intestazione secondaria</h2>
-
Paragrafi: Utilizzati per il testo.
<p>Questo è un paragrafo.</p>
<p>Questo è un paragrafo.</p>
-
Link: Utilizzati per collegare a altre pagine o risorse.
<a href="https://www.example.com">Visita il nostro sito</a>
<a href="https://www.example.com">Visita il nostro sito</a>
-
Immagini: Utilizzate per visualizzare immagini.
<img src="immagine.jpg" alt="Descrizione dell'immagine">
<img src="immagine.jpg" alt="Descrizione dell'immagine">
-
Liste: Liste ordinate e non ordinate.
<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul> <ol> <li>Primo elemento</li> <li>Secondo elemento</li> </ol>
<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul> <ol> <li>Primo elemento</li> <li>Secondo elemento</li> </ol>
4. Formattazione del testo
HTML consente di formattare il testo in vari modi:
-
Grassetto e corsivo:
<strong>Testo in grassetto</strong> <em>Testo in corsivo</em>
<strong>Testo in grassetto</strong> <em>Testo in corsivo</em>
-
Citazioni:
<blockquote>Questa è una citazione.</blockquote>
<blockquote>Questa è una citazione.</blockquote>
5. Tabelle
Le tabelle possono essere create utilizzando i seguenti elementi:
<table> <tr> <th>Intestazione 1</th> <th>Intestazione 2</th> </tr> <tr> <td>Riga 1, Colonna 1</td> <td>Riga 1, Colonna 2</td> </tr> <tr> <td>Riga 2, Colonna 1</td> <td>Riga 2, Colonna 2</td> </tr> </table>
<table>
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
<tr>
<td>Riga 1, Colonna 1</td>
<td>Riga 1, Colonna 2</td>
</tr>
<tr>
<td>Riga 2, Colonna 1</td>
<td>Riga 2, Colonna 2</td>
</tr>
</table>
6. Form
I moduli consentono di raccogliere dati dagli utenti:
<form action="/submit" method="post"> <label for="name">Nome:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <input type="submit" value="Invia"> </form>
<form action="/submit" method="post">
<label for="name">Nome:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Invia">
</form>
7. Risorse aggiuntive
English version
HTML Guide
1. Introduction to HTML
HTML is the markup language used to structure the content of web pages. It allows you to define elements such as text, images, links and other multimedia content.
Useful links:
2. Basic Structure of an HTML Document
An HTML document has a basic structure that includes the following sections:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> </head> <body> <h1>Welcome to HTML!</h1> <p>This is an example paragraph.</p> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>This is an example paragraph.</p>
</body>
</html>
<!DOCTYPE html>
: Declares the document type.<html>
: The root element of the HTML document.<head>
: Contains metadata and information about the page.<body>
: Contains the visible content of the page.
3. Common HTML Elements
Here are some of the most common HTML elements:
- Headings: Used for headings, from
<h1>
to<h6>
.
<h1>Major Heading</h1> <h2>Sub-Heading</h2>
<h1>Major Heading</h1>
<h2>Sub-Heading</h2>
- Paragraphs: Used for text.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
- Links: Used to link to other pages or resources.
<a href="https://www.example.com">Visit our site</a>
<a href="https://www.example.com">Visit our site</a>
- Images: Used to display images.
<img src="image.jpg" alt="Image description">
<img src="image.jpg" alt="Image description">
- Lists: Ordered and unordered lists.
<ul> <li>Element 1</li> <li>Element 2</li> </ul> <ol> <li>First element</li> <li>Second element</li> </ol>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
<ol>
<li>First element</li>
<li>Second element</li>
</ol>
4. Text Formatting
HTML allows you to format text in various ways:
- Bold and Italic:
<strong>Bold text</strong> <em>Italic text</em>
<strong>Bold text</strong>
<em>Italic text</em>
- Quotes:
<blockquote>This is a quote.</blockquote>
<blockquote>This is a quote.</blockquote>
5. Tables
Tables can be created using the following elements:
<table> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
6. Form
<form action="/submit" method="post"> <label for="name">Nome:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <input type="submit" value="Invia"> </form>
<form action="/submit" method="post">
<label for="name">Nome:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Invia">
</form>
Commenti
Posta un commento