</>
Corso HTML · Impariamo a creare pagine web
Lezione 1
Introduzione all'HTML
<html>
<head>
<body>
Che cos'è
Un linguaggio di contrassegno
Non fa calcoli e non prende decisioni: serve solo a dire al browser come disporre le cose nella pagina.
Niente calcoli
non somma, non confronta numeri.
Niente variabili
non memorizza valori.
Niente cicli
non ripete da solo le cose.
Lezione 1 — Introduzione all'HTML02 / 13
Il mattone di base
I tag
Comandi tra parentesi angolari, quasi sempre in coppia: apertura e chiusura.
<b>questo è in grassetto</b>
Alcuni tag stanno da soli:
<br>
<hr>
Lezione 1 — Introduzione all'HTML03 / 13
Personalizzare un tag
Attributi e valori
Gli attributi cambiano il comportamento del tag. Il valore va sempre tra virgolette.
<p align="center">testo</p>
Lezione 1 — Introduzione all'HTML04 / 13
Lo scheletro
La struttura di ogni pagina
<!doctype html>
<html>
<head>
<title>Titolo</title>
</head>
<body>
Tutto ciò che si vede.
</body>
</html>
html
head
l'intestazione · contiene il title
body
tutto ciò che si vede
Lezione 1 — Introduzione all'HTML05 / 13
Due scatole
head e body
<head>
Intestazione
Non si vede nella pagina. Qui dentro c'è il title.
<body>
Corpo
Tutto ciò che si vede: testi, immagini, link.
Lezione 1 — Introduzione all'HTML06 / 13
⭐
Regola d'oro · da non sbagliare mai
All'esame il <title> è sempre
Cognome, Nome, Classe
<title>Rossi Mario - 3B</title>
Lezione 1 — Introduzione all'HTML07 / 13
I titoli
Da h1 a h6
<h1>Titolo grande</h1>
<h3>Più piccolo</h3>
<h6>Il più piccolo</h6>
<h2 align="center">
Centrato
</h2>
come si vede
Titolo grande
Più piccolo
Il più piccolo
Centrato
Lezione 1 — Introduzione all'HTML08 / 13
Allineare il testo
Il paragrafo <p>
<p align="...">
"left"
testo allineato a sinistra, il valore predefinito.
"right"
testo allineato a destra del riquadro.
"center"
testo centrato nel riquadro.
"justify"
testo allineato su entrambi i lati, riempie la riga.
Lezione 1 — Introduzione all'HTML09 / 13
Dare stile alle parole
Formattare il testo
<b>grassetto
<i>corsivo
<u>sottolineato
<br>va a capo
nuova riga
<hr>riga divisoria
<center>centrato
Lezione 1 — Introduzione all'HTML10 / 13
Dare colore
Colori e font
// sfondo + colore testo
<body bgcolor="#fff3c4"
text="#1f2a2a">
// un pezzo di testo
<font face="Georgia"
color="#cc0000"
size="5">ciao</font>
come si vede
Testo normale su sfondo giallo.
ciao
size va da 1 a 7
Lezione 1 — Introduzione all'HTML11 / 13
Riepilogo
Cassetta degli attrezzi
Struttura basehtml · head · title · body
Titolo linguetta<title>
Titoli pagina<h1> … <h6>
Paragrafo<p align>
A capo / riga<br> · <hr>
Grassetto/corsivo/sott.<b> <i> <u>
Centra<center>
Sfondo / testobgcolor · text
Font<font face color size>
Lezione 1 — Introduzione all'HTML12 / 13
</>
Pratica guidata
Ora tocca a te
La pagina «Chi sono»
1Scheletro html · head · title · body
2Titolo, paragrafo giustificato, grassetto e corsivo
3Una citazione con un <font> diverso, centrata
Regola d'oro: scrivi → salva → ricarica il browser.