HTML usa dei marcatori chiamati tag per indicare al browser come visualizzare un documento. I tag sono racchiusi tra parentesi angolari (<>). Generalmente, un elemento HTML è composto da un tag di apertura e un tag di chiusura, come ad esempio <p> per un paragrafo e </p> per la sua fine.
La struttura base di un tag è
<nomeTag> Contenuto </nomeTag>
dove:<nomeTag>rappresenta l\apertura del tag- Contenuto: è ciò che contiene il tag
</nomeTag>: è la chiusura del tag
<!DOCTYPE html>
<html>
<head>
<title>Titolo della Pagina</title>
</head>
<body>
<!-- Il contenuto della pagina va qui -->
</body>
</html>
<!DOCTYPE html>: questa dichiarazione, posta all'inizio di ogni documento HTML, specifica al browser che il documento è scritto in HTML5.
<html>: è l'elemento radice che racchiude tutto il contenuto della pagina.
<head>: contiene metadati e informazioni sulla pagina non visibili all'utente (come il titolo della pagina nel browser, i collegamenti a file CSS o script JavaScript).
<body>: contiene tutto il contenuto visibile della pagina, come testo, immagini, link e tabelle.
<!-- Commento -->: è un commento. I commenti sono note o spiegazioni che uno sviluppatore inserisce nel codice. Non vengono visualizzati dal browser e servono solo a chi legge il codice sorgente per chiarire il codice.
- inizia con
<!-- - termina con
-->
| Tag | Descrizione | Esempio | Risultato Visibile |
|---|---|---|---|
<b> |
Definisce testo in grassetto. | <b>Testo in grassetto</b> |
Testo in grassetto |
<em> |
Definisce testo enfatizzato (solitamente in corsivo). | <em>Testo enfatizzato</em> |
Testo enfatizzato |
<i> |
Definisce una parte di testo in una voce o umore alternativi (solitamente in corsivo). | <i>Testo in corsivo</i> |
Testo in corsivo |
<small> |
Definisce testo più piccolo. | <small>Testo piccolo</small> |
Testo piccolo |
<strong> |
Definisce testo importante (solitamente in grassetto). | <strong>Testo importante</strong> |
Testo importante |
<sub> |
Definisce testo in pedice. | <sub>Testo in pedice</sub> |
Testo in pedice |
<sup> |
Definisce testo in apice. | <sup>Testo in apice</sup> |
Testo in apice |
<ins> |
Definisce testo inserito (solitamente sottolineato). | <ins>Testo inserito</ins> |
Testo inserito |
<del> |
Definisce testo cancellato (solitamente barrato). | <del>Testo cancellato</del> |
|
<mark> |
Definisce testo marcato/evidenziato. | <mark>Testo evidenziato</mark> |
Testo evidenziato |
Gli attributi
Gli attributi HTML sono informazioni aggiuntive che arricchiscono il comportamento, l’aspetto o il significato di un elemento HTML, e si trovano sempre all’interno del tag di apertura. Hanno la forma:
<tagname attributo1="valore1" attributo2="valore2"> Contenuto del tag </tagname>
In generale un tag può avere uno o più attributi.
Gli attributi possono essere suddivisi in
- Globali – applicabili ovunque (es. id, class)
- Booleani – la loro presenza vale come true (es. checked)
- Enumerati – accettano solo valori da un insieme predefinito (es. contenteditable)
- Specifici – legati ad uno o pochi elementi (es. src, href)
LABORATORIO
Crea una pagina HTML
Crea una pagina HTML dedicata al tuo attore o cantante preferito. All'interno della pagina, inserisci un titolo, un paragrafo descrittivo, e utilizza i tag di formattazione che hai imparato per mettere in risalto il nome dell'artista o una data importante.
Strumenti: un editor di testo di base (come Blocco Note su Windows o TextEdit su Mac) e un qualsiasi browser web (come Chrome, Firefox o Safari).
1 Crea un nuovo documento html
- Titolo della pagina: Inserisci il nome dell'artista o del film preferito nel tag
<title> nella sezione <head>.
- Titolo principale: All'interno del
<body>, crea un titolo di primo livello (<h1>) con il nome del tuo artista o film.
- Sottotitolo: Usa un tag di sottotitolo (
<h2>) per inserire una frase che lo descriva. Ad esempio: "Il re del pop" o "Un capolavoro del cinema".
- Paragrafo introduttivo: Scrivi un breve paragrafo (
<p>) che introduca l'artista o il film.
- Testo formattato: All'interno del paragrafo, utilizza i tag che hai imparato per mettere in risalto alcune parole chiave:
<strong> per sottolineare un concetto importante (es. "La sua carriera è iniziata nel...").<em> per enfatizzare un'opinione o un dettaglio (es. "...il suo ultimo album è fantastico.").<sub> o <sup> se il testo lo richiede (es. un anno in pedice).<!-- Commento --> Inserisci un commento nel quale indichi la data in cui hai scritto il documento.
2 Visualizza il risultato
Una volta che hai scritto e salvato il tuo file HTML aprilo con il browser magari due diversi (fai clic destro sul file, seleziona l'opzione "Apri con" e scegli il browser che preferisci dall'elenco.)
<tagname attributo1="valore1" attributo2="valore2"> Contenuto del tag </tagname>
LABORATORIO
Crea una pagina HTML
Crea una pagina HTML dedicata al tuo attore o cantante preferito. All'interno della pagina, inserisci un titolo, un paragrafo descrittivo, e utilizza i tag di formattazione che hai imparato per mettere in risalto il nome dell'artista o una data importante.
1 Crea un nuovo documento html
- Titolo della pagina: Inserisci il nome dell'artista o del film preferito nel tag
<title>nella sezione<head>. - Titolo principale: All'interno del
<body>, crea un titolo di primo livello (<h1>) con il nome del tuo artista o film. - Sottotitolo: Usa un tag di sottotitolo (
<h2>) per inserire una frase che lo descriva. Ad esempio: "Il re del pop" o "Un capolavoro del cinema". - Paragrafo introduttivo: Scrivi un breve paragrafo (
<p>) che introduca l'artista o il film. - Testo formattato: All'interno del paragrafo, utilizza i tag che hai imparato per mettere in risalto alcune parole chiave:
<strong>per sottolineare un concetto importante (es. "La sua carriera è iniziata nel...").<em>per enfatizzare un'opinione o un dettaglio (es. "...il suo ultimo album è fantastico.").<sub>o<sup>se il testo lo richiede (es. un anno in pedice).<!-- Commento -->Inserisci un commento nel quale indichi la data in cui hai scritto il documento.
2 Visualizza il risultato
Una volta che hai scritto e salvato il tuo file HTML aprilo con il browser magari due diversi (fai clic destro sul file, seleziona l'opzione "Apri con" e scegli il browser che preferisci dall'elenco.)