Cos'è l'HTML?
HTML sta per Hyper Text Markup L anguage _
HTML è il linguaggio di markup standard per le pagine Web
Gli elementi HTML sono gli elementi costitutivi delle pagine HTML
Gli elementi HTML sono rappresentati da <> tag
Elementi HTML
Un elemento HTML è un tag di inizio e un tag di fine con contenuto tra:
<h1>Questa è un'intestazione</h1>
Start tag | Element content | End tag |
---|---|---|
<h1> | This is a Heading | </h1> |
<p> | This is paragraph. | </p> |
Attributi HTML
- Gli elementi HTML possono avere attributi
- Gli attributi forniscono informazioni aggiuntive sull'elemento
- Gli attributi sono disponibili in coppie nome/valore come charset="utf-8"
Un semplice documento HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is
another paragraph.</p>
</body>
</html>
Esempio spiegato
Gli elementi HTML sono gli elementi costitutivi delle pagine HTML.
- La
<!DOCTYPE html>
dichiarazione definisce questo documento come HTML5 - L'
<html>
elemento è l'elemento radice di una pagina HTML - L'
lang
attributo definisce la lingua del documento - L'
<meta>
elemento contiene meta informazioni sul documento - L'
charset
attributo definisce il set di caratteri utilizzato nel documento - L'
<title>
elemento specifica un titolo per il documento - L'
<body>
elemento contiene il contenuto della pagina visibile - L'
<h1>
elemento definisce un'intestazione grande - L'
<p>
elemento definisce un paragrafo
Documenti HTML
Tutti i documenti HTML devono iniziare con una dichiarazione del tipo di documento: <!DOCTYPE html>
.
Il documento HTML stesso inizia <html>
e finisce con </html>
.
La parte visibile del documento HTML è compresa tra <body>
e </body>
.
Struttura del documento HTML
Di seguito è riportata una visualizzazione di un documento HTML (una pagina HTML):
Nota: in un browser viene visualizzato solo il contenuto all'interno della sezione <body> (l'area bianca sopra).
Intestazioni HTML
Le intestazioni HTML sono definite con <h1>
i <h6>
tag.
<h1>
definisce l'intestazione più importante. <h6>
definisce l'intestazione meno importante:
Esempio
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Paragrafi HTML
HTML paragraphs are defined with <p>
tags:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with <a>
tags:
Example
<a href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href
attribute.
HTML Images
HTML images are defined with <img>
tags.
The source file (src
), alternative text (alt
),
width
, and height
are provided as attributes:
Example
<img src="img_w3schools.jpg" alt="W3Schools" style="width:120px;height:150px"
HTML Buttons
HTML buttons are defined with <button>
tags:
Example
<button>Click me</button>
HTML Lists
HTML lists are defined with <ul>
(unordered/bullet list) or
<ol>
(ordered/numbered list) tags, followed by <li>
tags (list items):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML Tables
An HTML table is defined with a <table>
tag.
Table rows are defined with <tr>
tags.
Le intestazioni delle tabelle sono definite con <th>
tag. (grassetto e centrato per impostazione predefinita).
Le celle della tabella (dati) sono definite con <td>
tag.
Esempio
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Programmazione HTML
Ogni elemento HTML può avere attributi .
Per lo sviluppo e la programmazione web, gli attributi più importanti sono id e class. Questi attributi sono spesso usati per affrontare le manipolazioni di pagine Web basate su programmi.
Attributo | Esempio |
---|---|
ID | <table id = "table01" |
classe | <p classe = "normale"> |
stile | <p style ="font-size:16px"> |
dati- | <div data -id="500"> |
al clic | <input onclick ="myFunction()"> |
al passaggio del mouse | <a onmouseover ="this.setAttribute('style','color:red')"> |
Tutorial HTML completo
Questa è stata una breve descrizione dell'HTML.
Per un tutorial HTML completo, vai a W3Schools HTML Tutorial .
Per un riferimento completo ai tag HTML, vai a W3Schools Tag Reference .