-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml_base.html
More file actions
150 lines (147 loc) · 6.39 KB
/
Copy pathhtml_base.html
File metadata and controls
150 lines (147 loc) · 6.39 KB
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Introduzione a HTML</title>
</head>
<body>
<header>
<h1>Benvenuti nell'introduzione a HTML, se non hai capito GitHub <a href="github.html">clicca qui</a>, mentre se hai capito l'html passiamo a <a href="boostrap.html">boostrap</a></h1>
</header>
<main>
<section>
<h2>Cos'è HTML?</h2>
<p>HTML (HyperText Markup Language) è il linguaggio standard per creare pagine web. <br>Utilizza una serie di
elementi e tag per strutturare il contenuto di una pagina.</p>
</section>
<section>
<h2>Struttura di base di un documento HTML</h2>
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina che vedi sulla scheda</title>
</head>
<body>
<header>
Questa è l'intestazione della pagina.
</header>
<main>
Questo è il contenuto principale della pagina.
</main>
<footer>
Questo è il piè di pagina della pagina.
</footer>
</body>
</html>
</code>
</pre>
</section>
<section>
<h2>Elementi principali</h2>
<ul>
<li><h1> - <h6>: Intestazioni</li>
<li><p>: Paragrafi</li>
<li><a>: Link</li>
<li><img>: Immagini</li>
<li><ul> e <ol>: Liste non ordinate e ordinate</li>
<li><div> e <span>: Contenitori generici</li>
<li><table>: Tabelle</li>
</ul>
</section>
<section>
<h2>Intestazioni</h2>
<p>Le intestazioni vanno da <code><h1></code> a <code><h6></code> e rappresentano titoli di
diversa importanza.</p>
<h1>Intestazione 1</h1>
<h2>Intestazione 2</h2>
<h3>Intestazione 3</h3>
<h4>Intestazione 4</h4>
<h5>Intestazione 5</h5>
<h6>Intestazione 6</h6>
</section>
<section>
<h2>Paragrafi e Span</h2>
<p>Il tag <code><p></code> viene utilizzato per creare paragrafi.</p>
<p>Questo è un esempio di paragrafo.</p>
<p>Il tag <code><span></code> viene utilizzato per applicare stili a parti di testo all'interno di un
paragrafo.</p>
<p>Questo è un esempio di <span style="color: red;">span</span> all'interno di un paragrafo.</p>
</section>
<section>
<h2>Liste</h2>
<p>Le liste possono essere non ordinate (<code><ul></code>) o ordinate (<code><ol></code>).</p>
<ul>
<li>Elemento della lista non ordinata 1</li>
<li>Elemento della lista non ordinata 2</li>
</ul>
<ol>
<li>Elemento della lista ordinata 1</li>
<li>Elemento della lista ordinata 2</li>
</ol>
</section>
<section>
<h2>Div</h2>
<p>Il tag <code><div></code> viene utilizzato come contenitore generico per raggruppare altri
elementi.</p>
<div style="border: 1px solid black; padding: 10px;">
Questo è un esempio di <code><div></code>.
</div>
</section>
<section>
<h2>Section vs Div</h2>
<p>Il tag <code><section></code> viene utilizzato per raggruppare contenuti tematicamente correlati,
mentre il tag <code><div></code> è un contenitore generico senza significato semantico.</p>
<section style="border: 1px solid blue; padding: 10px;">
Questo è un esempio di <code><section></code> che raggruppa contenuti correlati.
</section>
<div style="border: 1px solid green; padding: 10px;">
Questo è un esempio di <code><div></code> che raggruppa elementi senza significato semantico.
</div>
</section>
<section>
<h2>Tabelle</h2>
<p>Le tabelle vengono create utilizzando il tag <code><table></code>.</p>
<table style="border: 1px solid black; border-collapse: collapse;">
<caption>Tabella di esempio</caption>
<thead>
<tr>
<th style="border: 1px solid black;">Intestazione 1</th>
<th style="border: 1px solid black;">Intestazione 2</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black;">Dati 1</td>
<td style="border: 1px solid black;">Dati 2</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Immagini</h2>
<p>Le immagini vengono inserite utilizzando il tag <code><img></code>.</p>
<img src="esempio.jpg" alt="Esempio di immagine">
</section>
<section>
<h2>Link ad altre pagine</h2>
<p>I link vengono creati utilizzando il tag <code><a></code>.</p>
<a href="https://www.example.com">Questo è un esempio di link</a>
</section>
<section>
<h2>Footer</h2>
<p>Il tag <code><footer></code> viene utilizzato per definire il piè di pagina di un documento o di
una sezione. Solitamente contiene informazioni sull'autore, copyright, link a termini di servizio, ecc.
</p>
<footer style="border: 1px solid gray; padding: 10px;">
<p>cose aziendali varie</p>
</footer>
</section>
</main>
<footer>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis libero neque dolore et alias. Temporibus molestiae sunt quaerat, numquam maxime alias, dolore ducimus assumenda fugit quae aut inventore omnis deleniti!
</footer>
</body>
</html>