HTLM: Nozioni base
Nozioni di base sull’HTML
HTML (HyperText Markup Language) è il codice utilizzato per strutturare una pagina web e il suo contenuto. Ad esempio, il contenuto potrebbe essere strutturato all’interno di una serie di paragrafi, un elenco di punti puntati o utilizzando immagini e tabelle di dati. Questo articolo di blog ti fornirà una comprensione delle nozioni base dell’HTML e delle sue funzioni.
Cos’è l’HTML?
HTML è un linguaggio di markup che definisce la struttura dei tuoi contenuti. L’HTML è costituito da una serie di elementi, che usi per racchiudere, o avvolgere, diverse parti del contenuto per farlo apparire in un certo modo o agire in un certo modo. I tag di inclusione possono creare un collegamento ipertestuale di una parola o di un’immagine a qualche altra parte, possono mettere in corsivo le parole, possono ingrandire o ridurre il carattere e così via.
Ad esempio, prendi la seguente riga di contenuto:
Il mio cane è molto docile
Se volessimo che la riga stesse da sola, potremmo specificare che si tratta di un paragrafo racchiudendolo tra tag di paragrafo:
<p>Il mio cane è molto docile</p>
Anatomia di un elemento HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>La mia pagina di prova</title> </head> <body> <img src="images/firefox-icon.png " alt="La mia immagine di prova"> </body> </html>
Esploriamo ulteriormente questo elemento del paragrafo.
Le parti principali del nostro elemento sono le seguenti:
- Il tag di apertura: consiste nel nome dell’elemento (in questo caso, p), racchiuso tra parentesi angolari di apertura e chiusura. Indica dove l’elemento inizia o inizia ad avere effetto, in questo caso dove inizia il paragrafo.
- Il tag di chiusura: è lo stesso del tag di apertura, tranne per il fatto che include una barra prima del nome dell’elemento. Indica dove finisce l’elemento, in questo caso dove finisce il paragrafo. La mancata aggiunta di un tag di chiusura è uno degli errori standard dei principianti e può portare a risultati strani.
- Il contenuto: questo è il contenuto dell’elemento, che in questo caso è solo testo.
- L’elemento: il tag di apertura, il tag di chiusura e il contenuto insieme costituiscono l’elemento.
Attributi
Gli attributi contengono informazioni aggiuntive sull’elemento che non si desidera appaia nel contenuto effettivo.
Un attributo viene utilizzato per definire le caratteristiche di un elemento HTML ed è collocato all’interno del tag di apertura dell’elemento. Tutti gli attributi sono costituiti da due componenti: un nome e un valore: Il nome indica la proprietà che si desidera impostare.
Qui, class è il nome dell’attributo e editor-note è il valore dell’attributo. L’attributo class consente di assegnare all’elemento un identificatore non univoco che può essere utilizzato per indirizzarlo (e qualsiasi altro elemento con lo stesso valore di classe) con informazioni sullo stile e altre cose.
Un attributo dovrebbe sempre avere :
- Uno spazio tra l’attributo e il nome dell’elemento o l’attributo precedente, se l’elemento ha già uno o più attributi.
- Il nome dell’attributo seguito da un segno di uguale.
- Il valore dell’attributo racchiuso tra virgolette di apertura e chiusura.
I valori degli attributi semplici che non contengono spazi bianchi ASCII (o uno qualsiasi dei caratteri ” ‘ ` = < > ) possono rimanere senza virgolette, ma si consiglia di citare tutti i valori degli attributi, in quanto rende il codice più coerente e comprensibile.
Elementi di nidificazione
Puoi inserire elementi anche all’interno di altri elementi: questo è chiamato annidamento. Se volessimo affermare che il nostro gatto è molto scontroso, potremmo racchiudere la parola “molto” in un elemento <strong>, il che significa che la parola è da sottolineare fortemente:
<p>Il mio cane è <strong>molto</strong> docile.</p>
Tuttavia, devi assicurarti che i tuoi elementi siano nidificati correttamente. Nell’esempio sopra, abbiamo aperto prima l’elemento <p>, poi l’elemento <strong>; quindi, dobbiamo prima chiudere l’elemento <strong>, quindi l’elemento <p>. Quanto segue non è corretto:
<p>Il mio cane è <strong>molto docile.</p></strong>
Gli elementi devono aprirsi e chiudersi correttamente in modo che siano chiaramente interni o esterni l’uno all’altro. Se si sovrappongono come mostrato sopra, il tuo browser web cercherà di indovinare al meglio ciò che stavi cercando di dire, il che può portare a risultati inaspettati. Quindi non farlo!
Elementi vuoti
Alcuni elementi non hanno contenuto e sono chiamati elementi vuoti. Prendi l’elemento <img> che abbiamo già nella nostra pagina HTML:
<img src=”images/firefox-icon.png” alt=”La mia immagine di prova”>
Questo contiene due attributi, ma non ci sono tag di chiusura </img> e nessun contenuto interno. Questo perché un elemento dell’immagine non avvolge il contenuto per influenzarlo. Il suo scopo è incorporare un’immagine nella pagina HTML nel punto in cui appare.
Anatomia di un documento HTML
Ciò racchiude le basi dei singoli elementi HTML, ma non sono utili da soli. Ora vedremo come i singoli elementi vengono combinati per formare un’intera pagina HTML. Rivisitiamo il codice che abbiamo inserito nel nostro esempio index.html (che abbiamo incontrato per la prima volta nell’articolo Gestire i file):
<!DOCTYPE html>
<html>
<testa>
<meta set di caratteri=”utf-8″>
<title>La mia pagina di prova</title>
</testa>
<corpo>
<img src=”images/firefox-icon.png” alt=”La mia immagine di prova”>
</corpo>
</html>
Qui abbiamo tutto questo:
Doctype
<!DOCTYPE html> — doctype. È un preambolo obbligatorio. Nella notte dei tempi, quando l’HTML era agli inizi, ed era molto giovane (intorno al 1991/92), i doctype dovevano fungere da collegamenti a un insieme di regole che la pagina HTML doveva seguire per essere considerata un buon HTML, il che poteva significare un controllo automatico degli errori e altro cose utili. Tuttavia, al giorno d’oggi, non fanno molto e sono fondamentalmente necessari solo per assicurarsi che il tuo documento si comporti correttamente.
HTML
<html></html> — l’elemento <html>. Questo elemento racchiude tutto il contenuto dell’intera pagina ed è talvolta noto come elemento radice.
Head
<head></head> — l’elemento <head>. Questo elemento funge da contenitore per tutto il materiale che desideri includere nella pagina HTML che non è il contenuto che stai mostrando ai visitatori della tua pagina. Ciò include cose come parole chiave e una descrizione di pagina che desideri venga visualizzata nei risultati di ricerca, CSS per definire lo stile dei nostri contenuti, dichiarazioni di set di caratteri e altro ancora.
Meta
<meta charset=”utf-8″> — Questo elemento imposta il set di caratteri che il documento dovrebbe utilizzare su UTF-8, che include la maggior parte dei caratteri della stragrande maggioranza delle lingue scritte. In sostanza, ora può gestire qualsiasi contenuto testuale che potresti inserire su di esso. Non c’è motivo per non impostarlo e può aiutare a evitare alcuni problemi in seguito.
Titolo
<titolo></titolo> — l’elemento <titolo>. Questo imposta il titolo della tua pagina, che è il titolo che appare nella scheda del browser in cui è caricata la pagina. Viene anche usato per descrivere la pagina quando la aggiungi ai preferiti/ai preferiti.
<body></body> — l’elemento <body>. Questo contiene tutto il contenuto che vuoi mostrare agli utenti web quando visitano la tua pagina, che si tratti di testo, immagini, video, giochi, tracce audio riproducibili o qualsiasi altra cosa.
immagini
Rivolgiamo nuovamente la nostra attenzione all’elemento <img>:
<img src=”images/firefox-icon.png” alt=”La mia immagine di prova”>
Copia negli appunti
Come abbiamo detto prima, incorpora un’immagine nella nostra pagina nella posizione in cui appare. Lo fa tramite l’attributo src (source), che contiene il percorso del nostro file immagine.
Abbiamo anche incluso un attributo alt (alternativo). In questo attributo specifichi un testo descrittivo per gli utenti che non possono vedere l’immagine, forse per i seguenti motivi:
Sono ipovedenti. Gli utenti con disabilità visive significative utilizzano spesso strumenti chiamati lettori di schermo per leggere loro il testo alternativo.
Qualcosa è andato storto causando la mancata visualizzazione dell’immagine. Ad esempio, prova a modificare deliberatamente il percorso all’interno del tuo attributo src per renderlo errato. Se salvi e ricarichi la pagina, dovresti vedere qualcosa di simile al posto dell’immagine:
Le keyword o parole chiave per il testo alternativo sono “testo descrittivo”. Il testo alternativo che scrivi dovrebbe fornire al lettore informazioni sufficienti per avere una buona idea di ciò che l’immagine trasmette. In questo esempio, il nostro testo attuale di “La mia immagine di prova” non va affatto bene. Un’alternativa molto migliore per il nostro logo di Firefox sarebbe “Il logo di Firefox: una volpe fiammeggiante che circonda la Terra”.
Prova ora a trovare un testo alternativo migliore per la tua immagine.
Text mark
In italiano la marcatura del testo.
Questa sezione tratterà alcuni degli elementi HTML essenziali che utilizzerai per contrassegnare il testo.
Intestazioni
Gli elementi di intestazione ti consentono di specificare che alcune parti del tuo contenuto sono intestazioni o sottotitoli. Allo stesso modo in cui un libro ha il titolo principale, i titoli dei capitoli e i sottotitoli, anche un documento HTML può farlo. L’HTML contiene 6 livelli di intestazione, <h1> – <h6>, sebbene di solito ne utilizzi solo da 3 a 4 al massimo:
4 livelli di intestazione:
- <h1>Il mio titolo principale</h1>
- <h2>Il mio titolo di primo livello</h2>
- <h3>Il mio sottotitolo</h3>
- <h4>Il mio sottotitolo</h4>
Qualsiasi elemento in HTML tra <– e –> è un commento HTML. Il browser ignora i commenti mentre esegue il rendering del codice. In altre parole, non sono visibili sulla pagina, ma solo nel codice. I commenti HTML sono un modo per scrivere note utili sul codice o sulla logica.
Ora prova ad aggiungere un titolo adatto alla tua pagina HTML appena sopra il tuo elemento <img>.
Potrai notare che il tuo livello di intestazione 1 ha uno stile implicito. Non utilizzare gli elementi di intestazione per rendere il testo più grande o in grassetto, perché vengono utilizzati per l’accessibilità e altri motivi come la SEO. Cerca di creare una sequenza significativa di intestazioni sulle tue pagine, senza saltare i livelli.
Paragrafi
Come spiegato sopra, gli elementi <p> servono a contenere paragrafi di testo; li utilizzerai frequentemente quando esegui il markup del contenuto di testo normale:
<p>Questo è un singolo paragrafo</p>
Aggiungi il tuo testo di esempio in uno o pochi paragrafi, posizionato direttamente sotto il tuo elemento <img>.
Elenchi
Gran parte del contenuto del Web è costituito da elenchi e l’HTML ha elementi speciali per questi. Le liste di markup sono sempre composte da almeno 2 elementi. I tipi di elenco più comuni sono elenchi ordinati e non ordinati:
Gli elenchi non ordinati sono per gli elenchi in cui l’ordine degli articoli non ha importanza, ad esempio una lista della spesa. Questi sono racchiusi in un elemento <ul>.
Gli elenchi ordinati sono per gli elenchi in cui l’ordine degli articoli è importante, ad esempio una ricetta. Questi sono racchiusi in un elemento <ol>.
Ogni elemento all’interno degli elenchi viene inserito all’interno di un elemento <li> (elemento dell’elenco).
Ad esempio, se volessimo trasformare la parte del frammento di paragrafo seguente in un elenco
<p>In Mozilla siamo una comunità globale di tecnologi, pensatori e costruttori che lavorano insieme… </p>
Copia negli appunti
Potremmo modificare il markup in questo modo
<p>In Mozilla siamo una comunità globale di</p>
<ul>
<li>tecnologi</li>
<li>pensatori</li>
<li>costruttori</li>
</ul>
<p>lavorare insieme… </p>
Prova ad aggiungere un elenco ordinato o non ordinato alla tua pagina di esempio.
Collegamenti
I link sono molto importanti: sono ciò che rende il web un web! Per aggiungere un collegamento, dobbiamo usare un semplice elemento — <a> — “a” è la forma abbreviata di “anchor”. Per trasformare il testo all’interno del paragrafo in un collegamento, procedi nel seguente modo:
Prendiamo come esempio il testo “Manifesto di Mozilla”.
Avvolgi il testo in un elemento <a>, come mostrato di seguito:
<a>Manifesto Mozilla</a>
Assegna all’elemento <a> un attributo href, come mostrato di seguito:
<a href=””>Manifesto di Mozilla</a>
Inserisci il valore di questo attributo con l’indirizzo web a cui vuoi collegare il link:
<a href=”https://www.mozilla.org/en-US/about/manifesto/”>Manifesto di Mozilla</a>
Potresti ottenere risultati imprevisti se ometti la parte https:// o http://, chiamata protocollo, all’inizio dell’indirizzo web. Dopo aver creato un collegamento, fai clic su di esso per assicurarti che ti invii dove desideri.
