HTML base
A cosa serve il tag <head> e in cosa differisce dal <body>?
Il <head> contiene le "informazioni invisibili" della pagina, come il titolo che appare sulla scheda del browser (<title>), i collegamenti ai file CSS e i metadati. Il <body> contiene invece tutto ciò che l'utente vede effettivamente sullo schermo (testi, immagini, video).
Qual è la differenza tra le proprietà color e background-color?
color cambia il colore del testo all'interno di un elemento, mentre background-color cambia il colore dello sfondo di quell'elemento.
Qual è la differenza tra margin e padding?
Il padding è lo spazio interno tra il contenuto e il bordo dell'elemento. Il margin è lo spazio esterno tra il bordo dell'elemento e gli altri elementi circostanti.
Cosa significa "Responsive Design" in parole povere?
Significa progettare un sito in modo che il suo layout si adatti automaticamente alla grandezza dello schermo del dispositivo usato (computer, tablet o smartphone), rimanendo sempre leggibile e facile da navigare.
Cosa succede se le immagini pesano troppo (molti Megabyte)?
Le immagini pesanti sono la causa numero uno del rallentamento dei siti. Per questo gli sviluppatori le "comprimono" o usano formati moderni (come il WebP) che mantengono una buona qualità ma pesano pochissimo.
Qual è l'ordine corretto dei tag dei titoli (da <h1> a <h6>)?
I titoli vanno usati in ordine gerarchico di importanza. L'<h1> è il titolo principale della pagina (ne dovrebbe esistere solo uno), l'<h2> è per i sottotitoli delle sezioni, e così via fino all' <h6>. Non vanno scelti in base alla grandezza del testo, ma in base alla struttura logica del contenuto.
A cosa serve la proprietà font-family?
Serve a definire il tipo di carattere da usare (es. Arial, Times New Roman). È buona norma indicare una lista di font di riserva, terminando con una categoria generica come sans-serif, nel caso il font principale non sia installato sul computer dell'utente.
Cosa succede se imposti margin: auto su un elemento con una larghezza fissa?
Se l'elemento è di tipo blocco (come un div), il browser distribuirà lo spazio disponibile equamente a destra e a sinistra, centrando orizzontalmente l'elemento nel suo contenitore.
Qual è il vantaggio principale per l'utente?
L'utente non deve più fare "pinch-to-zoom" (ingrandire con le dita) per leggere i testi o cliccare sui bottoni, perché tutto è già dimensionato correttamente per il suo dito e per la sua vista.
Perché il titolo della pagina TITLE è così importante?
Il tag <title> è la prima cosa che Google e l'utente leggono. Deve essere chiaro e contenere l'argomento principale, perché è quello che appare come titolo blu cliccabile nei risultati di ricerca.
Come si crea una lista puntata e una lista numerata?
Per una lista puntata (senza numeri) si usa il tag <ul> (unordered list). Per una lista numerata si usa il tag <ol> (ordered list). In entrambi i casi, ogni singola voce dell'elenco deve essere racchiusa nel tag <li> (list item).
Cosa sono i colori esadecimali (HEX)?
Sono codici di 6 cifre e lettere preceduti da un cancelletto (es. #FF5733) che rappresentano un colore specifico. È il metodo più usato sul web perché permette di scegliere tra milioni di sfumature diverse.
Cos'è un "contenitore" in un layout?
È un elemento (solitamente un <div>) che serve a raggruppare altri elementi. Pensa al contenitore come a una scatola: se sposti la scatola, tutto quello che c'è dentro (testi, immagini, bottoni) si sposta con lei, aiutandoti a tenere il sito ordinato.
Qual è il vantaggio di usare le unità di misura % rispetto ai px nei layout?
Le percentuali rendono il layout "fluido". Se un div ha una larghezza del 50%, si adatterà sempre alla metà della larghezza del suo contenitore, indipendentemente dal fatto che l'utente stia guardando il sito da un monitor enorme o da un tablet.
Cos'è la "Home Page" e perché è la pagina più importante?
È la "vetrina" del tuo sito. Deve far capire in pochi secondi chi sei e cosa offri, guidando l'utente verso le altre sezioni più importanti (come i prodotti o i contatti).
Cos'è l'attributo alt nel tag delle immagini (<img>)?
È un testo alternativo che descrive il contenuto dell'immagine. È fondamentale per l'accessibilità: i software per non vedenti leggono questo testo ad alta voce. Inoltre, appare sullo schermo se l'immagine non viene caricata correttamente per un errore di connessione.
Come si toglie la sottolineatura dai link?
I browser sottolineano i link di default. Per toglierla, si usa la proprietà text-decoration: none; applicata al tag <a>.
A cosa serve esattamente clear: both?
La proprietà clear: both serve a interrompere l'effetto del float.Quando un elemento ha un float: left o right, "esce" dal normale flusso della pagina e gli elementi successivi gli scorrono intorno. Se vuoi che un nuovo elemento (come un footer o un nuovo paragrafo) non si affianchi a quelli flottanti ma inizi sotto di essi su una riga pulita, devi applicargli clear: both.
Cos'è il "Menu a Hamburger"?
È quell'icona con tre linee orizzontali (☰) che appare sui siti mobile. Serve a nascondere il menu di navigazione per risparmiare spazio, mostrandolo solo quando l'utente ci clicca sopra.
Cos'è il protocollo HTTPS e perché serve alla SEO?
È la versione sicura di Internet (quella col lucchetto). Google dà la precedenza ai siti che usano HTTPS perché garantiscono la protezione dei dati degli utenti; i siti non sicuri vengono spesso segnalati come "pericolosi".
Cosa sono gli attributi dei tag e dove si scrivono?
Gli attributi forniscono informazioni extra ai tag e si scrivono sempre nel tag di apertura. Ad esempio, nel link <a href="www.sito.it">, href è l'attributo che indica la destinazione. Altri attributi comuni sono id, class, src e alt.
A cosa serve la proprietà opacity?
Serve a impostare la trasparenza di un elemento. Il valore va da 0 (completamente invisibile) a 1 (completamente opaco). Ad esempio, 0.5 rende l'elemento semi-trasparente.
Cosa fa la proprietà object-fit: cover applicata alle immagini?
È utilissima quando hai un contenitore di dimensioni fisse e vuoi che l'immagine al suo interno lo riempia completamente senza apparire schiacciata o deformata. Il browser ritaglia leggermente i bordi dell'immagine per mantenere le proporzioni corrette.
Perché è importante il meta tag viewport nell'HTML?
È una riga di codice fondamentale che dice al browser dello smartphone: "Adatta la pagina alla larghezza del mio schermo". Senza questo tag, i siti appaiono minuscoli e difficili da leggere sui cellulari.
Cosa si intende per "Accessibilità" di un sito?
Significa progettare il sito in modo che sia utilizzabile anche da persone con disabilità (ad esempio i non vedenti che usano programmi che leggono il testo a voce). Usare bene l'HTML aiuta questi strumenti a capire meglio la pagina.