Introduzione all'HTML e Ipertesto

La lettura tradizionale è lineare, mentre gli ipertesti permettono collegamenti non lineari tra informazioni.

L'HTML utilizza tag per creare link ipertestuali che automatizzano la navigazione tra pagine.

I tag in HTML sono parole chiave che identificano e definiscono gli elementi della pagina.

<p>HTML serve principalmente per la strutturazione semantica e non possiede funzioni per logica di programmazione avanzata.</p> Signup and view all the answers

<p>L'HTML organizza la struttura logica del contenuto per includere testo, immagini, link, e altro.</p> Signup and view all the answers

<p>Cliccare su un link attiva la navigazione tra pagine, permettendo un'esperienza interattiva.</p> Signup and view all the answers

<p>Gli eventi in HTML possono attivare risposte specifiche, con il clic del mouse come evento principale per la navigazione.</p> Signup and view all the answers

<p>Il tag <code>&lt;form&gt;</code> permette di creare moduli di inserimento dati per l'interazione con gli utenti.</p> Signup and view all the answers

<p>La struttura è gestita dall'HTML, mentre la presentazione grafica è gestita da CSS.</p> Signup and view all the answers

<p>La sintassi prevede un tag di apertura <code>&lt;tag&gt;</code> e un tag di chiusura <code>&lt;/tag&gt;</code>.</p> Signup and view all the answers

<p>Alcuni tag, come quelli che sono vuoti o che compiono un'azione implicita, non richiedono un tag di chiusura.</p> Signup and view all the answers

<p>Il tag <code>&lt;head&gt;</code> contiene metadati e informazioni non visualizzate direttamente nella pagina.</p> Signup and view all the answers

<p>Il tag <code>&lt;title&gt;</code> definisce il titolo della pagina visualizzato nella barra di navigazione del browser.</p> Signup and view all the answers

<p>I meta tag possono caratterizzare il contenuto per SEO, definire il linguaggio e la codifica dei caratteri.</p> Signup and view all the answers

<p>La dichiarazione DOCTYPE indica al browser che si tratta di un documento HTML5.</p> Signup and view all the answers

<p>Un tag HTML determina la struttura e il contenuto visualizzabile, influenzando direttamente il layout della pagina.</p> Signup and view all the answers

<p>HTML supporta elementi come audio, video e immagini.</p> Signup and view all the answers

<p>Il tag <code>&lt;img&gt;</code> è utilizzato per inserire immagini nella pagina web.</p> Signup and view all the answers

<p>Il tag <code>&lt;br&gt;</code> crea un'interruzione di linea all'interno del contenuto.</p> Signup and view all the answers

<p>La sezione <code>&lt;body&gt;</code> contiene tutto il contenuto visualizzabile della pagina per l'utente.</p> Signup and view all the answers

<p>È necessario utilizzare un tag di chiusura quando un tag racchiude del contenuto, come testo o altri tag.</p> Signup and view all the answers

<p>Il codice ASCII include solo 128 caratteri, insufficienti per rappresentare lettere accentate o caratteri speciali.</p> Signup and view all the answers

<p>La codifica UTF-8 permette di supportare caratteri di tutte le lingue del mondo, garantendo una visualizzazione corretta.</p> Signup and view all the answers

<p>Si possono verificare errori di visualizzazione, come simboli errati, e problemi nel funzionamento del codice.</p> Signup and view all the answers

<p>HTML 4 preferisce la codifica ISO 8859-1, che supporta caratteri degli alfabeti occidentali, incluse le lettere accentate italiane.</p> Signup and view all the answers

<p>La coerenza assicura che tutti i file e strumenti utilizzati adottino la stessa codifica, evitando errori nei caratteri visualizzati.</p> Signup and view all the answers

<p>La codifica dei caratteri serve a definire come i caratteri vengono interpretati e visualizzati nei browser.</p> Signup and view all the answers

<p>Possono verificarsi errori di caratteri visualizzati, con conseguente confusione per l'utente e malfunzionamenti del sito.</p> Signup and view all the answers

<p>È fondamentale per garantire che il contenuto testuale venga mostrato correttamente e senza errori nei vari browser.</p> Signup and view all the answers

<p>Le lettere accentate possono non essere visualizzate correttamente.</p> Signup and view all the answers

<p>Permette di gestire un'ampia gamma di caratteri e simboli senza errori di codifica.</p> Signup and view all the answers

<p>Il file potrebbe essere salvato con l'estensione .txt aggiuntiva, risultando in pagina.html.txt.</p> Signup and view all the answers

<p>Mostrare le estensioni dei file nascosti nelle impostazioni di Windows.</p> Signup and view all the answers

<p>Consente di inserire diversi tipi di media come immagini, audio e video in una pagina web.</p> Signup and view all the answers

<p>Per migliorare la leggibilità e la comprensione del contenuto da parte dei motori di ricerca e degli utenti.</p> Signup and view all the answers

<p>Utilizzare editor come Visual Studio Code che non aggiungono estensioni indesiderate.</p> Signup and view all the answers

<p>Possono essere creati link a altre pagine o sezioni, facilitando la navigazione non lineare.</p> Signup and view all the answers

<p>L'attributo <code>alt</code> fornisce una descrizione alternativa nel caso in cui l'immagine non possa essere caricata.</p> Signup and view all the answers

<p>Un attributo deve essere scritto nella forma <code>nome_attributo=&quot;valore_attributo&quot;</code>.</p> Signup and view all the answers

<p>Significa che i tag HTML possono essere scritti in qualsiasi combinazione di maiuscole e minuscole.</p> Signup and view all the answers

<p>L'attributo <code>disabled</code> indica che un elemento è disabilitato.</p> Signup and view all the answers

<p>Scrivere i tag in modo coerente migliora la leggibilità e facilita la manutenzione del codice.</p> Signup and view all the answers

<p>L'attributo <code>alt</code> è utile perché fornisce un testo quando un'immagine richiede tempo per essere caricata.</p> Signup and view all the answers

<p>È consigliabile scrivere tutti i tag in minuscolo per mantenere uno stile coerente.</p> Signup and view all the answers

<p>La struttura di un tag HTML con attributi è: <code>&lt;tag nome_attributo=&quot;valore_attributo&quot;&gt;Contenuto&lt;/tag&gt;</code>.</p> Signup and view all the answers

<p>È preferibile per evitare confusioni, specialmente quando il valore contiene apici singoli.</p> Signup and view all the answers

<p>L'attributo <code>lang</code> specifica la lingua del contenuto della pagina, ad esempio <code>lang='it'</code> indica italiano.</p> Signup and view all the answers

<p>Indica la codifica dei caratteri utilizzata nella pagina, come ad esempio UTF-8.</p> Signup and view all the answers

<p>Può causare difficoltà di elaborazione e problemi di accessibilità per i motori di ricerca.</p> Signup and view all the answers

<p>I metadati migliorano l'indicizzazione nei motori di ricerca e forniscono informazioni agli strumenti di accessibilità.</p> Signup and view all the answers

<p>I tag forniscono semantica e strutturazione, migliorando l'accessibilità e la presentazione del contenuto.</p> Signup and view all the answers

<p>Può portare a visualizzazioni errate o caratteri illeggibili per gli utenti.</p> Signup and view all the answers

<p>Fornisce ai motori di ricerca una sintesi del contenuto, migliorando l'indicizzazione e la visibilità.</p> Signup and view all the answers

<p>Significa che la pagina è strutturata per contenere collegamenti e riferimenti ad altri documenti o risorse.</p> Signup and view all the answers

<p>Stabilisce il titolo della pagina, visibile nella scheda del browser e nei risultati di ricerca.</p> Signup and view all the answers

<p>L'attributo <code>name</code> specifica il tipo di metadato che il meta tag rappresenta.</p> Signup and view all the answers

<p>Il valore dell'attributo <code>content</code> deve essere racchiuso tra doppi apici per includere parametri separati da virgole.</p> Signup and view all the answers

<p>Indica che la pagina deve essere ricaricata automaticamente dopo un certo intervallo di tempo.</p> Signup and view all the answers

<p>Impedisce agli utenti di effettuare zoom sulla pagina web.</p> Signup and view all the answers

<p>Fornisce una descrizione succinta del contenuto della pagina web, utile per i motori di ricerca.</p> Signup and view all the answers

<p>Definisce il fattore di scala iniziale della pagina al primo caricamento.</p> Signup and view all the answers

<p>Elenca le parole chiave che caratterizzano il contenuto della pagina, separate da virgole.</p> Signup and view all the answers

<p>Si possono avere problemi di interpretazione dei parametri a causa di virgole o segni uguali.</p> Signup and view all the answers

<p>La codifica dei caratteri garantisce la corretta interpretazione dei simboli e previene errori di visualizzazione.</p> Signup and view all the answers

<p>Imposta la codifica dei caratteri a UTF-8, assicurando che il browser interpreti correttamente il testo.</p> Signup and view all the answers

<p>Si possono verificare errori di visualizzazione, soprattutto con caratteri speciali o accentati.</p> Signup and view all the answers

<p>Il browser inizia a interpretare il documento dall'inizio e ha bisogno di sapere subito quale codifica usare.</p> Signup and view all the answers

<p>Si possono generare caratteri illeggibili e problemi di visualizzazione nel browser.</p> Signup and view all the answers

<p>Specifica la relazione tra il documento corrente e la risorsa collegata, come un foglio di stile.</p> Signup and view all the answers

<p><code>rel=&quot;alternate&quot;</code> è per risorse alternative, mentre <code>rel=&quot;stylesheet&quot;</code> è per fogli di stile CSS.</p> Signup and view all the answers

<p>Specifica la lingua della risorsa collegata, facilitando il collegamento a versioni tradotte della pagina.</p> Signup and view all the answers

<p>La favicon potrebbe non apparire correttamente nel browser, riducendo l'identificazione visiva del sito.</p> Signup and view all the answers

<p>Il contenuto viene interpretato secondo la codifica HTTP, sovrascrivendo la codifica del tag <code>&lt;meta&gt;</code>.</p> Signup and view all the answers

<p>Aiuta a garantire la corretta interpretazione e visualizzazione della risorsa da parte del browser.</p> Signup and view all the answers

<p>Indica per quale tipo di media la risorsa è ottimizzata, come per la visualizzazione o la stampa.</p> Signup and view all the answers

<p>Specifica il tipo di contenuto della risorsa, come <code>text/css</code> per un foglio di stile.</p> Signup and view all the answers

<p>Permette di offrire contenuti in diverse lingue o formati, aumentando l'accessibilità.</p> Signup and view all the answers

<p>L'attributo consigliato è <code>id</code>, perché garantisce la conformità agli standard HTML5 e massima compatibilità tra i browser.</p> Signup and view all the answers

<p>Omettere il protocollo garantisce coerenza del protocollo e previene problemi di contenuto misto.</p> Signup and view all the answers

<p>Un collegamento a una sezione della stessa pagina dovrebbe omettere il nome del file e contenere solo <code>#id</code>.</p> Signup and view all the answers

<p>L'uso dell'attributo <code>name</code> per le ancore è obsoleto e non è raccomandato.</p> Signup and view all the answers

<p>La cosa più importante è definire correttamente il <code>id</code> del punto di arrivo nella pagina di destinazione.</p> Signup and view all the answers

<p>La lista ordinata è numerata, mentre la lista non ordinata è puntata.</p> Signup and view all the answers

<p>Si utilizza il tag <code>&lt;dl&gt;</code> per la lista, <code>&lt;dt&gt;</code> per il termine e <code>&lt;dd&gt;</code> per la definizione.</p> Signup and view all the answers

<p>L'attributo <code>type</code> è utilizzato per indicare il tipo di numerazione.</p> Signup and view all the answers

<p>L'attributo <code>reversed</code> crea una lista ordinata in ordine decrescente.</p> Signup and view all the answers

<p>CSS offre maggiore flessibilità e separa la presentazione dal contenuto HTML.</p> Signup and view all the answers

<p>Nelle liste non ordinate si utilizzano comunemente punti o simboli come cerchi.</p> Signup and view all the answers

<p>Il tag <code>&lt;li&gt;</code> racchiude ogni elemento di una lista, sia essa ordinata che non ordinata.</p> Signup and view all the answers

<p>Un codice pulito migliora la leggibilità e l'accessibilità, facilitando anche la validazione automatica.</p> Signup and view all the answers

<p>Gli stili fisici definiscono come deve apparire il testo, mentre gli stili logici indicano il significato semantico del testo.</p> Signup and view all the answers

<p>Perché, pur essendo logici, indicano presentazione anziché struttura semantica.</p> Signup and view all the answers

<p>Il tag <code>&lt;abbr&gt;</code> definisce un'abbreviazione, e può utilizzare l'attributo <code>title</code> per fornire l'espansione al passaggio del mouse.</p> Signup and view all the answers

<p>L'attributo <code>href</code> specifica l'indirizzo della risorsa a cui il collegamento porta.</p> Signup and view all the answers

<p>L'attributo <code>id</code> assegna un identificatore unico a un elemento che può essere referenziato da un link.</p> Signup and view all the answers

<p>Il tag <code>&lt;pre&gt;</code> preserva gli spazi e i ritorni a capo, mostrando il testo esattamente come appare nel codice sorgente.</p> Signup and view all the answers

<p>L'attributo <code>name</code> non è più necessario e può causare confusione, essendo stato sostituito dall'attributo <code>id</code>.</p> Signup and view all the answers

<p>È sufficiente omettere alcune parti dell'URL, come il protocollo o il nome di dominio.</p> Signup and view all the answers

<p>Utilizzando gli attributi <code>id</code> per identificare le diverse sezioni e <code>href</code> per fare riferimento a essi.</p> Signup and view all the answers

<p>Il tag <code>&lt;small&gt;</code> modifica la dimensione del testo in modo relativo, legando la formattazione alla presentazione anziché alla struttura logica.</p> Signup and view all the answers

<p>Il tag <code>&lt;cite&gt;</code> è utilizzato per indicare il titolo di un'opera, come un libro o un film.</p> Signup and view all the answers

<p>Un link assoluto include l'intero URL, mentre un link relativo si basa sulla posizione della pagina corrente.</p> Signup and view all the answers

<p>Il tag <code>&lt;address&gt;</code> è utilizzato per fornire informazioni di contatto, migliorando l'accessibilità del sito.</p> Signup and view all the answers

<p>Il tag <code>&lt;strong&gt;</code> trasmette un significato semantico di enfasi, mentre <code>&lt;b&gt;</code> è puramente presentazionale.</p> Signup and view all the answers

<p>Il suo uso eccessivo può portare a risultati poco flessibili su dispositivi diversi.</p> Signup and view all the answers

<p>L'attributo <code>alt</code> fornisce un testo alternativo che viene visualizzato se l'immagine non viene caricata.</p> Signup and view all the answers

<p>Mantenere il rapporto di dimensione originale evita distorsioni visive nell'immagine.</p> Signup and view all the answers

<p>Gli attributi <code>width</code> e <code>height</code> sono utilizzati per specificare la larghezza e l'altezza di un'immagine.</p> Signup and view all the answers

<p>L'attributo <code>title</code> fornisce informazioni aggiuntive quando l'utente passa il mouse sull'immagine.</p> Signup and view all the answers

<p>Le immagini responsive si adattano automaticamente alle dimensioni dello schermo del dispositivo utilizzato.</p> Signup and view all the answers

<p>Un'immagine può essere racchiusa all'interno di un tag <code>&lt;a&gt;</code> per diventare un collegamento ipertestuale.</p> Signup and view all the answers

<p>L'attributo <code>src</code> indica la posizione dell'immagine da caricare.</p> Signup and view all the answers

<p>Senza dimensioni specificate, il browser deve calcolare lo spazio da riservare per l'immagine, causando un caricamento lento.</p> Signup and view all the answers

<p>L'attributo <code>srcset</code> consente di specificare diverse versioni dell'immagine in base alla risoluzione del dispositivo.</p> Signup and view all the answers

<p>Il testo alternativo fornisce una descrizione dell'immagine quando questa non viene caricata, migliorando l'accessibilità.</p> Signup and view all the answers

<p>L'attributo <code>border</code> veniva utilizzato per aggiungere bordi, ma è obsoleto in favore di CSS che offre maggiore flessibilità.</p> Signup and view all the answers

<p>Le immagini mappate consentono di definire aree interattive all'interno di un'immagine, collegate a diverse azioni.</p> Signup and view all the answers

<p>Le forme delle aree possono essere rettangoli, cerchi o poligoni.</p> Signup and view all the answers

<p>Le coordinate di un'area rettangolare sono indicate da quattro valori che rappresentano i vertici opposti.</p> Signup and view all the answers

<p>Se il link è non valido, il browser non sarà in grado di seguire il collegamento.</p> Signup and view all the answers

<p>L'attributo <code>usemap</code> collega un'immagine alla sua mappa definita con il tag <code>&lt;map&gt;</code>.</p> Signup and view all the answers

<p>L'accessibilità web richiede l'uso di testi alternativi per garantire che gli utenti con disabilità possano comprendere il contenuto visivo.</p> Signup and view all the answers

<p>L'attributo <code>coords</code> specifica le coordinate delle aree interattive all'interno dell'immagine.</p> Signup and view all the answers

<p>Gestire spazi e bordi con CSS offre maggiore flessibilità e separazione tra contenuto e presentazione.</p> Signup and view all the answers

<p>L'area <code>default</code> rappresenta qualsiasi spazio non coperto dalle aree definite in precedenza.</p> Signup and view all the answers

<p>Il tag <code>&lt;a&gt;</code> crea un link ipertestuale che apre l'immagine in una nuova pagina, mentre <code>&lt;img&gt;</code> la incorpora direttamente nella pagina corrente.</p> Signup and view all the answers

<p>I quattro valori necessari sono le coordinate dei vertici opposti del rettangolo: x1, y1, x2, y2.</p> Signup and view all the answers

<th> per l'intestazione e <td> per i dati. Signup and view all the answers

<p>Utilizzando l'attributo colspan='2'.</p> Signup and view all the answers

<p>Il tag <caption> fornisce una didascalia descrittiva per la tabella.</p> Signup and view all the answers

<p>Perché ci sono metodi migliori, come i CSS, per gestire il layout delle pagine web.</p> Signup and view all the answers

<p>Permettono a una cella di estendersi su più righe o colonne.</p> Signup and view all the answers

<table>, <tr>, <th>, <td> Signup and view all the answers

<p>Sono considerate obsolete e non più raccomandate.</p> Signup and view all the answers

<p>Le tabelle consentono una chiara organizzazione di dati in righe e colonne.</p> Signup and view all the answers

<p>Il tag <code>&lt;label&gt;</code> associa un'etichetta descrittiva a un elemento di input, migliorando l'accessibilità per utenti con disabilità visive tramite lettori di schermo.</p> Signup and view all the answers

<p>L'attributo <code>for</code> deve corrispondere all'id dell'input associato per garantire un collegamento logico.</p> Signup and view all the answers

<p>Annidare un <code>&lt;input&gt;</code> all'interno di un <code>&lt;label&gt;</code> semplifica il codice e rende l'intera etichetta cliccabile per l'input.</p> Signup and view all the answers

<p>L'attributo <code>aria-describedby</code> fornisce una descrizione aggiuntiva collegata all'input, accessibile ai lettori di schermo.</p> Signup and view all the answers

<p>Confondere <code>id</code> e <code>name</code> può portare a errori nell'associazione delle etichette e difficoltà di identificazione degli input nei modulo.</p> Signup and view all the answers

<p>Il simbolo <code>*</code> indica che il campo è obbligatorio e deve essere completato dall'utente.</p> Signup and view all the answers

<p>Le icone possono sostituire le etichette visive, rendendo il design della pagina più attraente pur mantenendo l'accessibilità.</p> Signup and view all the answers

<p>Il tag <code>&lt;fieldset&gt;</code> raggruppa logico i controlli di un modulo, mentre <code>&lt;legend&gt;</code> fornisce una descrizione del gruppo.</p> Signup and view all the answers

<p>Un campo di input di tipo <code>range</code> ha bisogno di una label collegata per fornire un’indicazione chiara sul controllo dello slider.</p> Signup and view all the answers

<p>Consentire che la label rimanga accessibile ai lettori di schermo anche quando è nascosta migliora l'esperienza per gli utenti con difficoltà visive.</p> Signup and view all the answers

<p>Associare chiaramente una label con un campo di input di tipo file usando un'etichetta descrittiva che faciliti l’identificazione dell'azione richiesta.</p> Signup and view all the answers

<p>Il tag <code>&lt;select&gt;</code> consente di presentare opzioni multiple in modo compatto e chiaro, riducendo il disordine nei moduli.</p> Signup and view all the answers

<p>Utilizzando etichette annidate all'interno dei campi di input, si rende più facile cliccare sull'etichetta per selezionare o attivare il campo.</p> Signup and view all the answers

<p>Il tag <code>&lt;progress&gt;</code> mostra graficamente il completamento di un'operazione, come una barra di progresso.</p> Signup and view all the answers

<p>Attraverso il tag <code>&lt;meter&gt;</code>, che indica un valore all'interno di un intervallo specificato.</p> Signup and view all the answers

<p>SVG consente di creare immagini scalabili senza perdita di qualità e facilita grafica interattiva e animazioni.</p> Signup and view all the answers

<p>Il tag <code>&lt;canvas&gt;</code> consente di disegnare e manipolare grafiche utilizzando JavaScript.</p> Signup and view all the answers

<p>È buona pratica includere un messaggio alternativo, come 'Il tuo browser non supporta la grafica SVG'.</p> Signup and view all the answers

<p>Definire le proprietà tramite CSS consente una maggiore flessibilità e un facile aggiornamento dello stile grafico.</p> Signup and view all the answers

<p>L'indipendenza di SVG permette di usarlo come standard autonomo, migliorando la compatibilità e la versatilità.</p> Signup and view all the answers

<p>Questo supporto permettere la creazione di grafiche avanzate e interattive, migliorando l'esperienza utente.</p> Signup and view all the answers

<p>Le immagini SVG possono essere ridimensionate senza perdere qualità grazie alla loro descrizione matematica.</p> Signup and view all the answers

<p>SVG è basato su forme geometriche, permettendo precisione e scalabilità, mentre Canvas utilizza i pixel, il che non mantiene la qualità al ridimensionamento.</p> Signup and view all the answers

<p>SVG supporta eventi come i click del mouse su singoli elementi a causa della sua struttura basata su forme.</p> Signup and view all the answers

<p>In SVG, il testo è gestito in modo nativo, mentre in Canvas il testo è trattato come pixel, richiedendo sforzo aggiuntivo per la gestione.</p> Signup and view all the answers

<p>Canvas offre una manipolazione rapida e meno precisa delle immagini, ideale per aggiornamenti continui e dinamici richiesti nei giochi.</p> Signup and view all the answers

<p><canvas> definisce un'area di disegno basata su pixel, mentre SVG utilizza forme vettoriali scalabili.</p> Signup and view all the answers

<p>Si utilizza il metodo <code>ctx.moveTo()</code> e <code>ctx.lineTo()</code> per definire il punto di inizio e il punto finale della linea, seguito da <code>ctx.stroke()</code> per tracciarla.</p> Signup and view all the answers

<p>SVG mantiene la qualità dell'immagine indipendentemente dal ridimensionamento, mentre Canvas perde qualità poiché si basa su pixel.</p> Signup and view all the answers

<p>SVG è consigliato per grafiche scalabili e progetti che richiedono precisione, come loghi e diagrammi.</p> Signup and view all the answers

<p>SVG è leggibile dai motori di ricerca poiché è basato su XML, mentre Canvas non offre la stessa accessibilità.</p> Signup and view all the answers

<p>L'attributo <code>controls</code> mostra i controlli per permettere all'utente di gestire la riproduzione dell'audio, come play, pausa e volume.</p> Signup and view all the answers

<p>Il browser tenterà di caricare le sorgenti in ordine, scegliendo la prima disponibile e supportata.</p> Signup and view all the answers

<p>L'attributo <code>autoplay</code> può essere ignorato dai browser per ragioni di sicurezza o per migliorare l'esperienza utente.</p> Signup and view all the answers

<p>I formati supportati dal tag audio sono MP3, OGG Vorbis e WAV.</p> Signup and view all the answers

<p>L'attributo <code>muted</code> disattiva l'audio quando la pagina viene caricata.</p> Signup and view all the answers

<p>Il problema principale è che l'autoplay può risultare invasivo, specialmente se l'audio parte automaticamente ad alto volume.</p> Signup and view all the answers

<p>Se il browser non supporta nessun formato, viene mostrato il messaggio 'Il tuo browser non supporta l'elemento audio.'</p> Signup and view all the answers

<p>L'attributo <code>loop</code> consente di ripetere il file audio in loop una volta terminato.</p> Signup and view all the answers

<p>I formati video più comuni sono MP4, WebM e OGG.</p> Signup and view all the answers

<p>L'attributo <code>controls</code> mostra i controlli di riproduzione del video, come play e pausa.</p> Signup and view all the answers

<p>L'attributo <code>srclang</code> definisce la lingua dei sottotitoli inclusi.</p> Signup and view all the answers

<p>La politica di 'same origin' limita il caricamento di risorse esterne da domini diversi per motivi di sicurezza.</p> Signup and view all the answers

<p>I sottotitoli potrebbero non caricarsi a causa di restrizioni della politica 'same origin'.</p> Signup and view all the answers

<p>Assicurarsi che i sottotitoli siano correttamente associati al video tramite il tag <code>&lt;track&gt;</code>.</p> Signup and view all the answers

<p>L'attributo <code>width</code> definisce la larghezza del riquadro dell'iframe in cui verrà visualizzata la risorsa.</p> Signup and view all the answers

<p>Gli attributi come <code>autoplay</code>, <code>loop</code> e <code>controls</code> possono essere utilizzati per personalizzare il comportamento.</p> Signup and view all the answers

<p>L'attributo <code>lang</code> specifica la lingua del contenuto, migliorando l'accessibilità.</p> Signup and view all the answers

<p>L'attributo <code>title</code> fornisce informazioni aggiuntive su un elemento, visualizzate come tooltip.</p> Signup and view all the answers

<p>I tag <code>&lt;video&gt;</code> e <code>&lt;audio&gt;</code> hanno attributi simili, ma il primo è specifico per i video e il secondo per l'audio.</p> Signup and view all the answers

<p>Il tag <code>&lt;track&gt;</code> permette di includere sottotitoli o descrizioni per il video.</p> Signup and view all the answers

<p>L'attributo <code>kind</code> indica il tipo di testo, come sottotitoli o descrizioni.</p> Signup and view all the answers

<p>L'attributo <code>autoplay</code> avvia automaticamente la riproduzione del video o audio al caricamento della pagina.</p> Signup and view all the answers

<p>Il testo alternativo serve a fornire informazioni sulle immagini agli utenti di screen reader, migliorando l'accessibilità.</p> Signup and view all the answers

<p>Il tag <code>&lt;link&gt;</code> deve essere inserito all'interno della sezione <code>&lt;head&gt;</code> di un documento HTML.</p> Signup and view all the answers

<p>Modificare un elemento può alterare classi o ID, influenzando gli stili e i comportamenti associati a quei selettori.</p> Signup and view all the answers

<p>I browser ignorano gli spazi bianchi extra, quindi non influenzano la visualizzazione finale della pagina.</p> Signup and view all the answers

<p>Il tag <code>&lt;br&gt;</code> è usato per forzare un a capo, ma è sconsigliato poiché ha scopi puramente estetici.</p> Signup and view all the answers

<p>Le modifiche apportate non si riflettono sul file sorgente e vengono annullate al ricaricamento della pagina.</p> Signup and view all the answers

<p>L'attributo <code>alt</code> è fondamentale per migliorare l'accessibilità delle immagini, specialmente per gli utenti con disabilità visive.</p> Signup and view all the answers

<p>Il tag <code>&lt;summary&gt;</code> fornisce una descrizione generale della tabella, leggibile da screen reader.</p> Signup and view all the answers

<p>Sì, è possibile avere più tag <code>&lt;link&gt;</code> per includere diversi fogli di stile o risorse nella stessa pagina.</p> Signup and view all the answers

<p>Cambiare ID o classi può impedire l'applicazione di stili CSS o script JavaScript legati a quegli attributi.</p> Signup and view all the answers

<p>L'uso improprio del tag <code>&lt;br&gt;</code> per la spaziatura può portare a un codice HTML non semantico e poco pulito.</p> Signup and view all the answers

<p>Conoscere il tab Elements permette di analizzare, modificare e testare dinamicamente il codice HTML e CSS di una pagina.</p> Signup and view all the answers

<p>Utilizzando descrizioni dettagliate nel testo alternativo, gli utenti con disabilità visive possono comprendere il contenuto delle immagini.</p> Signup and view all the answers

<p>Una best practice è quella di utilizzare CSS per gestire la spaziatura anziché tag HTML come <code>&lt;br&gt;</code> o spazi bianchi.</p> Signup and view all the answers

<p>Lo scopo principale di un programma è risolvere un problema, che può essere concreto o astratto.</p> Signup and view all the answers

<p>Gli algoritmi elaborano dati per produrre un risultato che richiede un'interazione con l'utente, che può essere diretta o indiretta.</p> Signup and view all the answers

<p>L'interazione continua richiede feedback costante dall'utente, mentre quella occasionale avviene sporadicamente.</p> Signup and view all the answers

<p>Un programma può ottenere dati da fonti esterne come altre macchine nella rete, file di configurazione o dati preimpostati nel codice.</p> Signup and view all the answers

<p>Un esempio di interazione indiretta è l'apertura automatica del portello di un'auto senza messaggi espliciti.</p> Signup and view all the answers

<p>I sensori intelligenti regolano le impostazioni in modo automatico in base al comfort dell'utente, senza richiedere feedback continuo.</p> Signup and view all the answers

<p>Il 'feedback continuo' implica che il programma richiede costantemente opinioni dall'utente, il che può risultare sgradevole.</p> Signup and view all the answers

<p>Comprendere i paradigmi permette di progettare e implementare sistemi più efficienti e scalabili.</p> Signup and view all the answers

<p>I processori multi-core permettono l'esecuzione concorrente di più operazioni, aumentando la velocità di elaborazione.</p> Signup and view all the answers

<p>Una delle principali sfide è la complessità nella definizione delle interfacce e dei protocolli di comunicazione tra i nodi.</p> Signup and view all the answers

<p>L'elaborazione distribuita separa i dati tra diversi nodi, impedendo l'accesso diretto ai dati di altri nodi.</p> Signup and view all the answers

<p>La scalabilità implica la capacità di distribuire il carico di lavoro su più nodi, migliorando le prestazioni globali.</p> Signup and view all the answers

<p>L'accesso remoto consente di utilizzare risorse senza necessità di interazione fisica con il dispositivo che le ospita.</p> Signup and view all the answers

<p>La sincronizzazione diventa complessa quando più nodi richiedono accesso a dati condivisi simultaneamente.</p> Signup and view all the answers

<p>Il concetto è superato a causa dell'evoluzione verso processori multi-core e risorse distribuite.</p> Signup and view all the answers

<p>La comunicazione avviene attraverso un'interfaccia macchina-macchina, facilitando lo scambio di dati.</p> Signup and view all the answers

<p>Ogni nodo esegue un proprio task e non può accedere direttamente ai dati degli altri nodi.</p> Signup and view all the answers

<p>Il nodo A rappresenta l'interfaccia utente, responsabile dell'interazione con l'utente.</p> Signup and view all the answers

<p>Le tre componenti fondamentali di un programma sono l'algoritmo, i dati e l'interfaccia utente.</p> Signup and view all the answers

<p>L'elaborazione classica esegue programmi su un singolo dispositivo in modo sequenziale, mentre l'elaborazione distribuita gestisce dati su più macchine interagendo su una rete.</p> Signup and view all the answers

<p>L'interfaccia utente permette all'utente di interagire con il programma, fornendo input e ricevendo output.</p> Signup and view all the answers

<p>Il punto cruciale è che i dati devono essere disponibili per essere manipolati dall'algoritmo.</p> Signup and view all the answers

<p>La logica applicativa è la parte che esegue le elaborazioni necessarie per risolvere il problema usando l'algoritmo.</p> Signup and view all the answers

<p>Il principale vantaggio è la sua semplicità, in quanto non richiede di gestire interazioni tra più processi.</p> Signup and view all the answers

<p>Le problematiche includono sicurezza, efficienza e basse prestazioni relative alla gestione delle risorse.</p> Signup and view all the answers

<p>La programmazione orientata agli oggetti aiuta a gestire l'accesso ai dati definendo chiaramente quali dati sono accessibili.</p> Signup and view all the answers

<p>Una sfida chiave è gestire la comunicazione e la cooperazione tra diversi sistemi per ottenere un risultato complessivo.</p> Signup and view all the answers

<p>L'interfaccia utente può essere testuale, grafica o invisibile, a seconda delle esigenze dell'utente e del programma.</p> Signup and view all the answers

<p>Un'architettura distribuita è un sistema diviso in più componenti che interagiscono su una rete per condividere risorse e dati.</p> Signup and view all the answers

<p>Le interazioni permettono all'utente di fornire input e ricevere output, rendendo il programma interattivo.</p> Signup and view all the answers

<p>Il pseudocodice aiuta a semplificare la comprensione degli algoritmi, rendendoli accessibili anche a chi non conosce i linguaggi di programmazione.</p> Signup and view all the answers

<p>Il problema maggiore è rappresentato dalle basse prestazioni specialmente in contesti moderni che richiedono elaborazione simultanea.</p> Signup and view all the answers

<p>I CSS permettono di separare il contenuto dalla presentazione, rendendo il codice HTML più pulito e facilmente gestibile.</p> Signup and view all the answers

<p>Negli ultimi 10-15 anni, l'uso di CSS è diventato uno standard per migliorare leggibilità e mantenibilità del codice, evitando stili incorporati in HTML.</p> Signup and view all the answers

<p>Questo codice nasconde il menu di navigazione quando la pagina viene stampata.</p> Signup and view all the answers

<p>Il CSS 2.2 ha consolidato lo standard e ha introdotto nuove funzionalità come la gestione degli stili per media differenti.</p> Signup and view all the answers

<p>La separazione consente ai designer di gestire stili e layout in modo efficiente senza compromettere la logica del contenuto HTML.</p> Signup and view all the answers

<p>I CSS definiscono le caratteristiche estetiche come colori, font, e layout degli elementi HTML.</p> Signup and view all the answers

<p>L'uso di attributi di presentazione rende il codice HTML complesso e difficile da mantenere, contrariamente alla praticità offerta dai CSS.</p> Signup and view all the answers

<p>I CSS permettono di posizionare gli elementi HTML liberamente nella pagina, senza vincoli dalla loro posizione nel codice.</p> Signup and view all the answers

<p>CSS2 è un insieme di regole statiche, mentre CSS3 è uno standard live che continua a evolversi.</p> Signup and view all the answers

<p>Le media queries permettono di applicare stili diversi in base alle caratteristiche del dispositivo, come la larghezza dello schermo.</p> Signup and view all the answers

<p>I sviluppatori di browser impiegano tempo per implementare nuove specifiche, quindi il supporto può variare.</p> Signup and view all the answers

<p>@media permette di definire stili specifici che si applicano solo a determinate condizioni del dispositivo.</p> Signup and view all the answers

<p>Il tag <code>link</code> collega un foglio di stile esterno a una pagina HTML.</p> Signup and view all the answers

<p>Implica che non esiste un punto finale per lo standard, ma continua a evolversi e aggiornarsi.</p> Signup and view all the answers

<p>I commenti nel CSS vengono scritti con <code>/* commento */</code> e servono per annotare il codice e spiegarne il funzionamento.</p> Signup and view all the answers

<p>Il browser potrebbe ignorare quelle regole CSS, mostrando il contenuto senza gli stili desiderati.</p> Signup and view all the answers

<p>CSS4 o CSS5 sono termini usati per riferirsi a funzionalità in fase di sperimentazione o beta.</p> Signup and view all the answers

<p>Il W3C stabilisce e rilascia snapshot che rappresentano lo stato attuale delle specifiche adottate dai browser.</p> Signup and view all the answers

<p>Indica a quale elemento o elementi devono essere applicate le regole di stile.</p> Signup and view all the answers

<p>Si definisce una classe con un punto prima del nome, come in <code>.red-text</code>, e viene applicata usando l'attributo <code>class</code> nell'HTML.</p> Signup and view all the answers

<p>I commenti nel CSS sono contenuti tra <code>/*</code> e <code>*/</code>, e servono per descrivere il codice rendendolo più leggibile.</p> Signup and view all the answers

<p>Gli stili inline rendono il codice meno leggibile e difficile da mantenere, in quanto mescolano contenuto e presentazione.</p> Signup and view all the answers

<p>Gli stili interni sono inseriti all'interno di un tag <code>&lt;style&gt;</code> nell'HTML, mentre gli stili esterni sono definiti in un file CSS separato.</p> Signup and view all the answers

<p><code>#</code> si utilizza per identificare un id univoco, applicando stili solo a un elemento HTML specifico.</p> Signup and view all the answers

<p>Questa regola imposta il colore del testo dell'elemento selezionato a rosso.</p> Signup and view all the answers

<p>I selettori di classi sono preceduti da un punto (<code>.</code>) nel codice CSS.</p> Signup and view all the answers

<p>Permette modifiche rapide per visualizzare immediatamente l'effetto degli stili sulla pagina.</p> Signup and view all the answers

<p>Il browser ignorerà il tag e visualizzerà il contenuto successivo come testo.</p> Signup and view all the answers

<p>Racchiudendo il contenuto entro commenti HTML, se il tag non è supportato, il CSS verrà ignorato.</p> Signup and view all the answers

<p>Compromette la separazione tra contenuto e presentazione, rendendo il codice meno mantenibile.</p> Signup and view all the answers

<p>Utilizza un punto seguito dal nome della classe, ad esempio <code>.surname { font-weight: bold; }</code>.</p> Signup and view all the answers

<p>Il browser potrebbe interpretare il commento come parte del CSS e ignorarlo, generando errori.</p> Signup and view all the answers

<p>È una classe CSS che applica uno stile di testo in grassetto a un elemento HTML.</p> Signup and view all the answers

<p>Consentono modifiche temporanee al codice per visualizzare i risultati istantaneamente.</p> Signup and view all the answers

<p>Si utilizza l'attributo <code>class</code>, ad esempio <code>&lt;p class='surname'&gt;Questo testo sarà in grassetto&lt;/p&gt;</code>.</p> Signup and view all the answers

<p>Definire stili in un file CSS esterno e applicarli tramite classi agli elementi HTML.</p> Signup and view all the answers

<p>Un selettore per classi in CSS inizia con un punto (.) seguito dal nome della classe.</p> Signup and view all the answers

<p>Le pseudo-classi stilizzano un elemento in base al suo stato o al comportamento dell'utente.</p> Signup and view all the answers

<p>I selettori identificativi, che iniziano con il simbolo #, si riferiscono a elementi unici, mentre i selettori per classi, che iniziano con un punto (.), possono essere condivisi tra più elementi.</p> Signup and view all the answers

<p>Si utilizza l'asterisco (*) per applicare una regola a tutti gli elementi.</p> Signup and view all the answers

<p>Si utilizza la proprietà <code>background-color</code> all'interno del selettore <code>body</code>.</p> Signup and view all the answers

<p>I font sans-serif non presentano le piccole grazie alla fine delle lettere, dando un aspetto moderno e pulito.</p> Signup and view all the answers

<p>Si applicano regole CSS solo a specifici tag con una determinata classe, escludendo altri tag.</p> Signup and view all the answers

<p>Un selettore combinato permette di applicare stili a un insieme ristretto di elementi, aumentando la precisione del design.</p> Signup and view all the answers

<p>La combinazione di tag e classe, come <code>p.centrato</code>, applica stili specifici ai paragrafi, rendendoli centrati e con colore verde.</p> Signup and view all the answers

<p>I principali elementi del box model sono il contenuto, i margini, il padding e i bordi.</p> Signup and view all the answers

<p>Si possono rimuovere i margini e padding usando la regola CSS <code>* { margin: 0; padding: 0; }</code>.</p> Signup and view all the answers

<p>Le classi possono essere riutilizzate su più elementi, mentre gli identificatori (ID) devono essere unici per ogni elemento nella pagina.</p> Signup and view all the answers

<p>La pseudoclasse <code>a:hover</code> cambia il colore di sfondo di un link quando il puntatore del mouse passa sopra di esso.</p> Signup and view all the answers

<p>Si possono applicare stili a più tag separandoli con una virgola, come in <code>h1, h2, h3 { color: green; }</code>.</p> Signup and view all the answers

<p>Gli strumenti per sviluppatori permettono di visualizzare e debuggare il box model degli elementi HTML in tempo reale.</p> Signup and view all the answers

<p>Si può specificare una classe in CSS usando il selettore <code>.classe</code> senza alcuna restrizione sul tag HTML.</p> Signup and view all the answers

<p>Il bordo nel box model delimita visivamente l'elemento, separandolo dal contenuto circostante.</p> Signup and view all the answers

<p>La regola <code>*</code> seleziona tutti gli elementi della pagina e può essere utilizzata per applicare stili globali.</p> Signup and view all the answers

<p>Si utilizza il selettore <code>div &gt; p</code>.</p> Signup and view all the answers

<p>Applica stili al paragrafo che segue immediatamente un h1 nel DOM.</p> Signup and view all the answers

<p>Si usa <code>:first-child</code>.</p> Signup and view all the answers

<p>Si utilizza <code>input[type='text']</code>.</p> Signup and view all the answers

<p>Permette di applicare stili quando la lingua del documento è impostata su italiano.</p> Signup and view all the answers

<p>Il primo seleziona tutti i paragrafi discendenti, il secondo solo i figli diretti del div.</p> Signup and view all the answers

<p>Applica stili a tutti gli elementi input con l'attributo type, indipendentemente dal valore.</p> Signup and view all the answers

<p>Utilizzando <code>p:last-child</code>.</p> Signup and view all the answers

<p>La pseudoclasse <code>:focus</code> cambia lo stile di un elemento quando è attivo o in focus, come ad esempio per una casella di input selezionata.</p> Signup and view all the answers

<p>La pseudoclasse <code>:first-child</code> applica stili al primo elemento figlio di un contenitore, come rendere in grassetto il primo paragrafo.</p> Signup and view all the answers

<p>La proprietà <code>content</code> consente di inserire testo o simboli prima o dopo un elemento senza modificare l'HTML originale.</p> Signup and view all the answers

<p>Questo codice inserisce automaticamente il numero di sezione prima di ogni titolo h1, incrementando il contatore section.</p> Signup and view all the answers

<p>Il colore rimarrà rosso se non è ridefinito in una regola più specifica, mentre altre proprietà possono essere sovrascritte.</p> Signup and view all the answers

<p>Le classi possono essere utilizzate su più elementi e sono indicate con <code>.</code> mentre gli identificatori devono essere unici per pagina e sono indicati con <code>#</code>.</p> Signup and view all the answers

<p>La risoluzione degli schermi influenza come le unità di misura vengono interpretate, determinando l'aspetto e la precisione grafica su diversi dispositivi.</p> Signup and view all the answers

<p>L'attributo <code>style</code> inline ha la precedenza su qualsiasi regola CSS esterna o interna, sovrascrivendo gli stili definiti altrove.</p> Signup and view all the answers

<p>:hover permette di cambiare gli stili di un elemento quando il puntatore del mouse si trova sopra di esso.</p> Signup and view all the answers

<p>Questo codice visualizzerà l'URL di un link tra parentesi subito dopo il testo del link stesso.</p> Signup and view all the answers

<p>La regola più specifica ha la precedenza su quelle meno specifiche, quindi verrà applicato lo stile più rilevante per l'elemento.</p> Signup and view all the answers

<p>La pseudoclasse <code>:last-child</code> applica stili all'ultimo elemento figlio di un contenitore.</p> Signup and view all the answers

<p>La proprietà <code>quotes</code> consente di definire virgolette personalizzate per gli elementi di citazione, come il tag <code>&lt;q&gt;</code>.</p> Signup and view all the answers

<p>Si utilizza <code>counter-increment</code> per aumentare il valore del contatore ogni volta che viene incontrato un elemento specifico, come <code>h1</code>.</p> Signup and view all the answers

<p>Applica stili a tutti gli elementi input che possiedono l'attributo type, indipendentemente dal valore che ha.</p> Signup and view all the answers

<p>La pseudoclasse <code>:focus</code> applica uno stile a un elemento quando è attivo o ha il focus, come una casella di testo selezionata.</p> Signup and view all the answers

<p>La pseudoclasse <code>:lang(it)</code> applica stili specifici quando la lingua del documento è impostata su italiano.</p> Signup and view all the answers

<p>La proprietà <code>content</code> permette di inserire testo o simboli prima o dopo un elemento senza modificarne l'HTML.</p> Signup and view all the answers

<p>I contatori in CSS possono numerare automaticamente gli elementi come le sezioni o i paragrafi, incrementando il valore al loro incontro.</p> Signup and view all the answers

<p>La regola più specifica ha la precedenza sugli altri stili che potrebbero applicarsi allo stesso elemento.</p> Signup and view all the answers

<p>Un identificatore (id) può essere utilizzato solo una volta per pagina, mentre una classe può essere assegnata a più elementi.</p> Signup and view all the answers

<p>La pseudoclasse <code>:first-child</code> applica stili al primo elemento figlio di un genitore specifico.</p> Signup and view all the answers

<p>La proprietà <code>quotes</code> specifica le virgolette da utilizzare automaticamente intorno a un elemento di citazione.</p> Signup and view all the answers

<p>Una regola inline ha la massima precedenza sulle altre direttive CSS, sovrascrivendo qualsiasi stile definito altrove.</p> Signup and view all the answers

<p>Utilizzando la proprietà <code>content</code> insieme a <code>attr(href)</code> in un selettore, si può visualizzare il valore di un attributo specifico.</p> Signup and view all the answers

<p>La pseudoclasse <code>:after</code> permette di aggiungere contenuto dopo il paragrafo, come testo o simboli.</p> Signup and view all the answers

<p>DPI si riferisce alla risoluzione di stampa, mentre PPI si riferisce alla risoluzione dei dispositivi digitali.</p> Signup and view all the answers

<p>L'unità rem è relativa alla dimensione del font dell'elemento radice (<html>) ed evita problemi di accumulo nelle dimensioni.</p> Signup and view all the answers

<p>Le misure relative come em aumentano proporzionalmente in base alla dimensione del font dell'elemento padre, causando possibili accumuli.</p> Signup and view all the answers

<p>Le unità vw (viewport width) e vh (viewport height) si adattano dinamicamente alla dimensione della finestra del browser.</p> Signup and view all the answers

<p>Il paragrafo con 5vw si adatterà automaticamente alla larghezza della finestra, mentre il testo in px rimarrà sempre alla stessa dimensione.</p> Signup and view all the answers

<p>Il rapporto comunemente usato era di 96 pixel per pollice.</p> Signup and view all the answers

<p>La dimensione del font determina solo la dimensione dell'elemento radice (<html>) e non degli elementi genitori.</p> Signup and view all the answers

<p>Il 'pixel virtuale' consente di mantenere una proporzione fissa su schermi ad alta risoluzione per facilitare la compatibilità.</p> Signup and view all the answers

<p>Le unità basate sulla viewport consentono che gli elementi si adattino automaticamente alle dimensioni del display dell'utente.</p> Signup and view all the answers

<p>La dimensione del font degli elementi figli è direttamente influenzata dalla dimensione del font dell'elemento padre in un'annidamento.</p> Signup and view all the answers

<p>Rischia di causare un accumulo indesiderato di dimensione del font attraverso diverse gerarchie di elementi.</p> Signup and view all the answers

<p>Un 'pixel virtuale' è una misura che mantiene proporzioni fisse sugli schermi ad alta risoluzione, evitando di sfruttare il potenziale massimo dei pixel disponibili.</p> Signup and view all the answers

<p>Le unità relative permettono un layout più flessibile e adattabile a diverse dimensioni dello schermo.</p> Signup and view all the answers

<p>La dimensione del carattere per il body è impostata a 16px, che diventa il riferimento per le unità rem.</p> Signup and view all the answers

<p>Le unità assolute hanno un valore fisso, mentre quelle relative dipendono dalla dimensione del genitore e possono causare problemi di accumulo nelle dimensioni.</p> Signup and view all the answers

<p>1vw rappresenta l'1% della larghezza totale della viewport.</p> Signup and view all the answers

<p>'rem' rappresenta la dimensione del font relativa all'elemento radice, evitando l'accumulo di dimensioni dovuto alla gerarchia degli elementi.</p> Signup and view all the answers

<p>'vw' rappresenta una percentuale della larghezza della viewport, mentre 'vh' rappresenta una percentuale dell'altezza, consentendo adattamenti dinamici agli schermi diversi.</p> Signup and view all the answers

<p>Il font-size del paragrafo sarà il 5% della larghezza della finestra del browser, cambiando dimensione in base al ridimensionamento della finestra.</p> Signup and view all the answers

<p>I selettori dei discendenti applicano stili a tutti gli elementi discendenti, mentre i selettori figli diretti applicano stili solo ai figli immediati.</p> Signup and view all the answers

<p>Queste pseudoclassi applicano stili specifici al primo o all'ultimo elemento figlio, permettendo personalizzazioni di layout specifiche.</p> Signup and view all the answers

<p>'div &gt; p' seleziona solo i paragrafi figli diretti di un div, mentre 'div p' seleziona tutti i paragrafi discendenti di un div, senza limitazioni.</p> Signup and view all the answers

<p>Utilizzare selettori basati sugli attributi consente una maggiore specificità e personalizzazione degli stili applicati agli elementi HTML.</p> Signup and view all the answers

<p>La coerenza evita comportamenti imprevisti e garantisce un layout uniforme su diverse dimensioni di schermo.</p> Signup and view all the answers

<p>L'elemento .fixed-text mantiene sempre una dimensione di 16px, mentre .font-variable si adatta dinamicamente alla larghezza della finestra.</p> Signup and view all the answers

<p>Le unità relative, come em e rem, consentono una facile scalabilità del testo, migliorando l'accessibilità per gli utenti con diverse esigenze visive.</p> Signup and view all the answers

<p>:nth-child consente di selezionare elementi in base alla loro posizione nella gerarchia, fornendo una maggiore flessibilità nella progettazione del layout.</p> Signup and view all the answers

<p>'vmin' regola le dimensioni in base alla dimensione più piccola tra larghezza e altezza, migliorando la coerenza visiva su schermi di dimensione variabile.</p> Signup and view all the answers

<p>I colori in CSS possono essere rappresentati con nomi di colori predefiniti, codici esadecimali, notazione RGB e HSL.</p> Signup and view all the answers

<p>La trasparenza in CSS può essere definita utilizzando le notazioni rgba() o hsla(), dove l'ultimo parametro indica il livello di opacità.</p> Signup and view all the answers

<p>La proprietà background-size in CSS consente di scalare un'immagine di sfondo per adattarla al contenitore, mantenendo le proporzioni corrette.</p> Signup and view all the answers

<p>La notazione RGB si basa sulle intensità di rosso, verde e blu, mentre HSL si basa su tonalità, saturazione e luminosità.</p> Signup and view all the answers

<p>La rappresentazione esadecimale del colore verde foresta è #228B22.</p> Signup and view all the answers

<p>La proprietà background-repeat controlla se l'immagine di sfondo si ripete lungo gli assi X e Y dell'elemento.</p> Signup and view all the answers

<p>La notazione HSL è composta da Hue (tonalità), Saturation (saturazione) e Lightness (luminosità).</p> Signup and view all the answers

<p>Un colore può essere definito in notazione RGB usando percentuali, ad esempio rgb(13%, 55%, 13%).</p> Signup and view all the answers

<p>Consente di evitare che gli utenti vedano uno sfondo bianco mentre l'immagine si carica.</p> Signup and view all the answers

<p>Quando l'immagine presenta un pattern o una texture regolare.</p> Signup and view all the answers

<p>Utilizzando la proprietà <code>background-size</code> con il valore <code>contain</code>.</p> Signup and view all the answers

<p>Posizioni come left, center, right, top, bottom e valori percentuali.</p> Signup and view all the answers

<p><code>fixed</code> mantiene l'immagine fissa mentre il contenuto scorre, mentre <code>scroll</code> fa scorrere l'immagine con il contenuto.</p> Signup and view all the answers

<p>Permette di specificare colore, immagine, ripetizione, posizionamento e fissità in un'unica dichiarazione.</p> Signup and view all the answers

<p><code>no-repeat</code> deve essere utilizzato.</p> Signup and view all the answers

<p>Allinea il testo al centro del contenitore.</p> Signup and view all the answers

<p>Trasforma il testo in lettere maiuscole.</p> Signup and view all the answers

<p>Assicura coerenza visiva anche se l'immagine non viene caricata correttamente.</p> Signup and view all the answers

<p>Un valore negativo in <code>text-indent</code> sposta la prima riga del testo all'esterno della sua casella.</p> Signup and view all the answers

<p>La proprietà <code>border</code> rappresenta il bordo di un elemento e consiste in spessore, stile e colore.</p> Signup and view all the answers

<p>La proprietà <code>line-height</code> controlla l'altezza delle righe di testo, migliorando la leggibilità.</p> Signup and view all the answers

<p><code>font-weight: bold</code> utilizza una parola chiave mentre <code>font-weight: 700</code> specifica uno spessore numerico.</p> Signup and view all the answers

<p>Le parole chiave <code>larger</code> e <code>smaller</code> possono essere usate per modificare la dimensione del font relativa al font padre.</p> Signup and view all the answers

<p>La proprietà <code>font-variant</code> permette di utilizzare varianti tipografiche come <code>small-caps</code>.</p> Signup and view all the answers

<p>Le dimensioni del font possono essere specificate utilizzando unità relative come <code>em</code> o percentuali.</p> Signup and view all the answers

<p><code>font-family</code> specifica la famiglia di caratteri da utilizzare, influenzando l'aspetto del testo.</p> Signup and view all the answers

<p>Le media queries sono strumenti in CSS che permettono di applicare stili in modo condizionato in base alle caratteristiche del dispositivo, come la larghezza dello schermo. Offrono il vantaggio di migliorare la leggibilità e l'usabilità su vari dispositivi.</p> Signup and view all the answers

<p>L'istruzione @import in CSS viene utilizzata per caricare fogli di stile condizionati al tipo di media, come in @import url('stampa.css') print. Questo consente di organizzare il codice e separare le logiche di visualizzazione per media diversi.</p> Signup and view all the answers