.png){kind=small}
HTML: elementi e struttura
L'HTML (HyperText Markup Language) viene utilizzato per fornire contenuti a una pagina web e istruisce i browser web su come strutturare tali contenuti.
L'HTML è organizzato in una struttura ad albero genealogico. Gli elementi HTML possono avere genitori, nonni, fratelli e sorelle, figli, nipoti, ecc.
Il contenuto di un elemento HTML è l'informazione tra i tag di apertura e chiusura di un elemento.
<h1>
Tuttofaredigitale.it 🙂
</h1>
Un tag di chiusura HTML è usato per indicare la fine di un elemento HTML. La sintassi di un tag di chiusura è una parentesi ad angolo sinistra < seguita da una barra in avanti / poi il nome dell'elemento e una parentesi ad angolo per chiudere >.
<body>
<div>
<h1>È il figlio di Div e il nipote del corpo</h1>
<h2>È il fratello di h1</h2>
</div>
</body>
<html> Elemento HTML
L'elemento <html>, la radice di un documento HTML, dovrebbe essere aggiunto dopo la dichiarazione DOCTYPE. Tutti i contenuti/strutture di un documento HTML dovrebbero essere contenuti tra i tag <html> di apertura e chiusura.
<!DOCTYPE html>
<html>
...
</html>
Dichiarazione del tipo di documento
La dichiarazione del tipo di documento <!DOCTYPE html> è richiesta come prima riga di un documento HTML.
La dichiarazione del tipo di documento è un'istruzione al browser su quale tipo di documento aspettarsi e quale versione di HTML viene utilizzata, in questo caso è HTML5.
<body> Elemento body
L'elemento <body> rappresenta il contenuto di un documento HTML. I contenuti all'interno dei tag <body> sono visualizzati sui browser web.
Nota bene: ci può essere un solo elemento <body> in un documento.
<body>
<h1>Impara nuove abilità con tuttofaredigitale.it</h1>
</body>
<em> Elemento di enfasi
L'elemento di enfasi <em> enfatizza il testo ed i browser di solito lo evidenziano in corsivo per impostazione predefinita.
<p>Questa <em>parola</em> sarà enfatizzata in corsivo.</p>
<li> Elemento dell'elenco
L'elemento <li> crea una voce all'interno degli elementi della lista:
- Elenchi ordinati <ol>
- Elenchi non ordinati <ul>
L'elemento <ol> , lista ordinata, crea una lista di elementi in ordine sequenziale. Ogni elemento della lista appare numerato per default.
L'elemento <ul> elenco non ordinato viene utilizzato per creare un elenco di elementi in nessun ordine particolare. Ogni singolo elemento della lista avrà per default un punto come segnalatore.
<ol>
<li>Prendi questo</li>
<li>Prendi quello</li>
</ol>
<ul>
<li>Biscotti</li>
<li>Latte</li>
</ul>
<video> Elemento video
L'elemento <video> incorpora un lettore multimediale per la riproduzione di video. L'attributo src conterrà l'URL del video. Aggiungendo l'attributo controls si visualizzeranno i controlli video nel media player.
Nota: il contenuto all'interno del tag di apertura e chiusura viene mostrato come una alternativa nei browser che non supportano l'elemento.
<video src="test.mp4" controls>
Video non supportato
</video>
<div> Elemento div
L'elemento <div> è usato come contenitore che divide un documento HTML in sezioni ed è l'abbreviazione di "divisione". Gli elementi <div> possono contenere contenuti come titoli, paragrafi, link, immagini, ecc.
<div>
<h1>Una sezione</h1>
<p>Testo per la sezione</p>
</div>
<div>
<h1>Seconda sezione</h1>
<p>Testo per la sezione</p>
</div>
Attributi HTML
Gli attributi HTML sono costituiti da un nome e da un valore con la seguente sintassi: nome="valore" e possono essere aggiunti al tag di apertura di un elemento HTML per configurare o modificare il comportamento dell'elemento.
<elemento nome="valore"></elemento>
<br> Elemento interruzione di riga
L'elemento <br>, interruzione di riga, creerà un'interruzione di riga nel testo ed è particolarmente utile quando è richiesta una divisione del testo, come in un indirizzo postale. L'elemento di interruzione di riga richiede solo un tag di apertura e non deve avere un tag di chiusura.
Una interruzione di linea.<br>
Le poesie sono un ottimo caso d'uso.<br>
Un'altra interruzione di linea.<br>
<img> Elemento immagine
Gli elementi HTML image <img> incorporano le immagini nei documenti. L'attributo src contiene l'URL dell'immagine ed è obbligatorio. <img> è un elemento vuoto, il che significa che non è necessario il tag di chiusura.
<img src="image.png">
Attributo alt
Un elemento <img> può avere un testo alternativo tramite l'attributo alt. Il testo alternativo viene visualizzato se un'immagine non viene resa a causa di un URL non corretto, se il formato dell'immagine non è supportato dal browser, se l'immagine è bloccata dalla visualizzazione o se l'immagine non è stata ricevuta dall'URL. Questo è rilevante anche per l'indicizzazione sui motori di ricerca (SEO).
Il testo verrà letto ad alta voce se viene utilizzato un software di lettura dello schermo e aiuta a supportare gli utenti ipovedenti fornendo una descrizione testuale per il contenuto dell'immagine su una pagina web.
<img src="indirizzo/img" alt="descrizione immagine" />
<h1>-<h6> Elementi di intestazione
L'HTML può utilizzare sei diversi livelli di elementi di intestazione. Gli elementi di intestazione sono ordinati dal livello più alto <h1> al livello più basso <h6>.
<h1>Titolo</h1>
<h2>Questo è il 1° sottotitolo</h2>
<h3>Questo è il 2° sottotitolo</h3>
...
<h6>Questo è il 5° sottotitolo</h6>
<p> Elemento paragrafo
L'elemento paragrafo <p> contiene e visualizza un blocco di testo.
<p>Questo è un blocco di testo!</p>
Attributi ID unici
In HTML, è possibile assegnare attributi id specifici e univoci a diversi elementi per differenziarli.
Quando necessario, il valore id può essere richiamato da CSS e JavaScript per manipolare, formattare ed eseguire istruzioni specifiche su quell'elemento e solo su quell'elemento. Gli attributi id validi dovrebbero iniziare con una lettera e dovrebbero contenere solo lettere (a-Z), cifre (0-9), trattini (-), underscore (_).
<h1 id="titolo">Tuttofaredigitale </h1>
<span> Elemento span
L'elemento <span> è un contenitore in linea per il testo e può essere usato per raggruppare il testo a scopo di styling.
Tuttavia, poiché <span> è un generico contenitore per separare pezzi di testo da un corpo di testo più grande, il suo uso dovrebbe essere evitato se è disponibile un elemento più semantico.
<p><span>Testo</span> può essere formattato in modo diverso.</p>
<strong> Elemento strong
L'elemento <strong> evidenzia il testo importante ed i browser normalmente rendono questo testo evidenziato in grassetto per impostazione predefinita.
<p>Questo è<strong>importante</strong>!</p>
<a> Elemento di ancoraggio
L'elemento di ancoraggio <a> è usato per creare collegamenti ipertestuali in un documento HTML.
I collegamenti ipertestuali possono puntare ad altre pagine web, file sullo stesso server, una posizione sulla stessa pagina o qualsiasi altro URL tramite l'attributo del collegamento ipertestuale, href. L'href determina la posizione a cui punta l'elemento di ancoraggio.
<a href="URL">Visita il sito</a>
<a href="URL">
<img src="logo.jpg" alt="logo tuttofaredigitale">Clicca sull'immagine
</a>
Link ad una parte della pagina con #
L'elemento di ancoraggio <a> può creare collegamenti ipertestuali a diverse parti dello stesso documento HTML usando l'attributo href per puntare alla posizione desiderata con # seguito dall'id dell'elemento a cui collegarsi.
<a href="#idelemento">Portami a quella parte nella pagina</a>
<div>
<p id="idelemento">Parte nella pagina</p>
</div>
<target> Attributo di destinazione
L'attributo target su un elemento di ancoraggio <a> specifica dove deve essere aperto un collegamento ipertestuale.
Un valore di destinazione di "_blank" dirà al browser di aprire il collegamento ipertestuale in una nuova scheda nei browser moderni, o in una nuova finestra nei browser più vecchi.
<a href="URL" target="_blank">La pagina sarà aperta in una nuova scheda o finestra del tuo browser</a>
<head> Elemento di testa
L'elemento <head> contiene informazioni generali su una pagina HTML che non viene visualizzata sulla pagina stessa. Queste informazioni sono chiamate metadati e includono cose come il titolo del documento HTML e i link ai fogli di stile.
<!DOCTYPE html>
<html>
<head>
<!-- Metadati-->
</head>
</html>
<title> Elemento del titolo
L'elemento <title> contiene un testo che definisce il titolo di un documento HTML. Il titolo viene visualizzato nella barra del titolo del browser o nella scheda del browser in cui viene visualizzata la pagina HTML.
L'elemento <title> può essere contenuto solo all'interno dell'elemento <head> di un documento.
<!DOCTYPE html>
<html>
<head>
<title>Titolo della pagina</title>
</head>
</html>
Commenti
In HTML, i commenti possono essere aggiunti tra un'apertura <!-- e la chiusura -->. Il contenuto all'interno dei commenti non sarà visualizzato dai browser e di solito sono utilizzati per descrivere una parte del codice o fornire altri dettagli.
I commenti possono essere su righe singole o multiple.
Indentazione
Il codice HTML dovrebbe essere formattato in modo che il livello di indentazione del testo aumenti una volta per ogni livello di nidificazione.
È una convenzione comune usare due o quattro spazi per ogni livello di nidificazione. I text editor come VScode, Atom, Brackets, in automatico creano questa identazione.
Spazi bianchi
Gli spazi bianchi, come le interruzioni di riga, aggiunti ad un documento HTML tra elementi, saranno ignorati dal browser e non saranno aggiunti per aumentare la spaziatura sulla pagina HTML visualizzata dal browser.
Gli spazi bianchi vengono aggiunti per l'organizzazione e per una più facile lettura del documento HTML stesso.
Percorso del file
I percorsi URL in HTML possono essere percorsi assoluti, come un URL completo o un percorso di file relativo che si collega a un file locale nella stessa cartella o sullo stesso server, ad esempio: ./style.css.
I percorsi relativi dei file iniziano con ./ seguito da un percorso del file locale.
I caratteri ./ dicono al browser di cercare il percorso del file nella directory corrente.
<<<
>>>
