summaryrefslogtreecommitdiffhomepage
path: root/it-it/html-it.html.markdown
blob: 471019a14a388e14e86a507458da1fd5e57fd520 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
---
language: html
filename: learnhtml-it.html
contributors:
    - ["Christophe THOMAS", "https://github.com/WinChris"]
translators:
    - ["Ale46", "http://github.com/Ale46/"]
lang: it-it
---

HTML sta per HyperText Markup Language (linguaggio a marcatori per ipertesti).
È un linguaggio che consente di scrivere pagine web per il world wide web.
È un linguaggio di markup, che permette di scrivere pagine web usando del codice che indica come il testo ed i dati devono essere mostrati.
Infatti, i files html sono semplici file di testo.
Cos'è il markup? È un metodo per organizzare i dati della pagina circondandoli con tag di apertura e tag di chiusura.
Questo markup serve a dare significato al testo che racchiude.
Come altri linguaggi di programmazione, HTML ha molte versioni. Qui discuteremo di HTML5.

**NOTA :**  Puoi testare i differenti tags ed elementi man mano che prosegui nel tutorial in un sito come [codepen](http://codepen.io/pen/) per vedere i loro effetti, capire come lavorano e familiarizzare con il linguaggio.
Questo articolo riguarda principalmente la sintassi HTML ed alcuni suggerimenti utili.


```html
<!-- I commenti sono racchiusi come in questa riga! -->

<!-- #################### I Tags #################### -->

<!-- Ecco un esempio di file HTML che andremo ad analizzare. -->

<!doctype html>
	<html>
		<head>
			<title>Il mio sito</title>
		</head>
		<body>
			<h1>Ciao, mondo!</h1>
			<a href = "http://codepen.io/anon/pen/xwjLbZ">Vieni a vedere ciò che mostra</a>
			<p>Questo è un paragrafo.</p>
			<p>Questo è un altro paragrafo.</p>
			<ul>
				<li>Questo è un elemento di un elenco non numerato (elenco puntato)</li>
				<li>Questo è un altro elemento</li>
				<li>E questo è l'ultimo elemento dell'elenco</li>
			</ul>
		</body>
	</html>

<!-- Un file HTML inizia sempre indicando al browser che la pagina è HTML. -->
<!doctype html>

<!-- Dopo questo, inizia aprendo un tag <html>. -->
<html>

<!-- che sarà chiuso alla fine del file con </html>. -->
</html>

<!-- Nulla dovrebbe apparire dopo questo tag finale. -->

<!-- All'interno (tra i tag di apertura e chiusura <html> </html>) troviamo: -->

<!-- Un'intestazione definita da <head> (deve essere chiusa con </head>). -->
<!-- L'intestazione contiene alcune descrizioni e informazioni aggiuntive non visualizzate; questi sono i metadati. -->

<head>
	<title>Il mio sito</title> <!-- Il tag <title> indica al browser il titolo da mostrare nella barra del titolo della finestra del browser e nel nome della scheda. -->
</head>

<!-- Dopo la sezione <head>, troviamo il tag - <body> -->
<!-- Fino a questo punto, niente di ciò che abbiamo descritto verrà visualizzato nella finestra del browser. -->
<!-- Dobbiamo riempire il corpo con il contenuto da visualizzare. -->

<body>
	<h1>Ciao, mondo!</h1> <!-- Il tag h1 crea un titolo. -->
	<!-- Ci sono anche sottotitoli a <h1> dal più importante (h2) al più preciso (h6). -->
	<a href = "http://codepen.io/anon/pen/xwjLbZ">Vieni a vedere ciò che mostra</a> <!-- un collegamento ipertestuale all'URL fornito dall'attributo href="" -->
	<p>Questo è un paragrafo.</p> <!-- Il tag <p> ci permette di includere del testo nella pagina html. -->
	<p>Questo è un altro paragrafo.</p>
	<ul> <!-- Il tag <ul> crea un elenco puntato. -->
	<!-- Per avere un elenco numerato, invece, usiamo <ol> che restituisce 1. per il primo elemento, 2. per il secondo, etc. -->
		<li>Questo è un elemento in un elenco non elencato (elenco puntato)</li>
		<li>Questo è un altro elemento</li>
		<li>E questo è l'ultimo elemento dell'elenco</li>
	</ul>
</body>

<!-- E questo è tutto, creare un file HTML può essere molto semplice. -->

<!-- Ma è possibile aggiungere molti altri tipi di tag HTML. -->

<!-- Per inserire un'immagine. -->
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- La fonte dell'immagine viene indicata usando l'attributo src="" -->
<!-- La fonte può essere un URL o persino un percorso di un file sul tuo computer. -->

<!-- È anche possibile creare una tabella. -->

<table> <!-- Apriamo un elemento <table>. -->
	<tr> <!-- <tr> ci permette di creare una riga. -->
		<th>Prima intestazione</th> <!-- <th> ci permette di dare un titolo ad una colonna della tabella. -->
		<th>Seconda intestazione</th>
	</tr>
	<tr>
		<td>prima riga, prima colonna</td> <!-- <td> ci permette di creare una cella della tabella. -->
		<td>prima riga, seconda colonna</td>
	</tr>
	<tr>
		<td>seconda riga, prima colonna</td>
		<td>seconda riga, seconda colonna</td>
	</tr>
</table>

```

## Uso

HTML è scritto in files che finiscono con `.html`.

## Per saperne di più

* [wikipedia](https://it.wikipedia.org/wiki/HTML)
* [HTML tutorial](https://developer.mozilla.org/it/docs/Web/HTML)
* [W3School](http://www.w3schools.com/html/html_intro.asp)