Anteprima
Vedrai una selezione di 4 pagine su 14
Simulazioni Abilità Informatiche Pag. 1 Simulazioni Abilità Informatiche Pag. 2
Anteprima di 4 pagg. su 14.
Scarica il documento per vederlo tutto.
Scarica
Simulazioni Abilità Informatiche Pag. 6
Anteprima di 4 pagg. su 14.
Scarica il documento per vederlo tutto.
Scarica
Simulazioni Abilità Informatiche Pag. 11
1 su 14
D/illustrazione/soddisfatti o rimborsati
Disdici quando
vuoi
Acquista con carta
o PayPal
Scarica i documenti
tutte le volte che vuoi
Estratto del documento

Formattazione del testo

Se la larghezza fosse 50%, allora l'immagine occuperebbe metà del riquadro, cosa che con width: 50% non succede. Si può usare padding-left per creare lo spazio dal bordo sinistro del riquadro, ma è meglio usare il padding sul riquadro stesso, cosa che è stata fatta qui (vedi che lo spazio non riguarda solo l'immagine). Di nuovo, si può usare margin-left per creare lo spazio dal margine sinistro del riquadro, ma è meglio usare il padding sul riquadro stesso, cosa che è stata fatta qui (vedi che lo spazio non riguarda solo l'immagine).

Nella pagina web mostrata qui sotto, quale tag è la scelta migliore per lo stile delle parole colorate del paragrafo ("blue", "greenish", "red", ecc)?

Scegli 1 risposta:

  • <div>
  • <p>
  • <span>
  • <font>

Suggerimento #1: Consideriamo ciascuna delle possibilità.

è un elemento inline che può essere utilizzato per colorare i nomi.Possiamo aggiungere semplicemente una proprietà a ciascuno span per ottenere l'effetto colore mostrato nello screenshot. Altre opzioni potrebbero essere o se volessimo enfatizzare semanticamente i nomi, ma questa situazione riguarda più l'apparenza che la semantica. Di conseguenza, è l'opzione migliore.

Nella pagina web mostrata qui sotto, quale tag è la scelta migliore per l'elemento con il bordo che circonda i due paragrafi?

Scegli 1 risposta:

  • <p>
  • <span>
  • <table>
  • <div>

1 / 1

Suggerimento #1

Consideriamo ciascuna possibilità presentata:

- Un paragrafo è un elemento blocco con margini su entrambi i lati. L'elemento con il bordo <p> contiene 2 paragrafi, e un paragrafo non dovrebbe stare dentro altri paragrafi, quindi questa sarebbe una cattiva opzione.

- Una tabella potrebbe essere usata per ottenere

questo effetto, ma sarebbe un abuso delle tabelle: una tabella dovrebbe essere usata solo per comunicare i dati in forma di tabella. Di conseguenza, questa non sarebbe una buona opzione. è un generico elemento inline. Potrebbe essere usato per creare l'elemento con i bordi, se lo trasformassimo in un elemento blocco cambiando la sua proprietà in display:block, ma non è una buona idea dato che abbiamo opzioni migliori.
è un generico elemento blocco con il ritorno a capo su entrambi i lati. Questa è un'ottima opzione, dato che possiamo semplicemente circondare i paragrafi con div e aggiungere una proprietà border per ottenere l'effetto desiderato. Di conseguenza, è l'opzione migliore.
Esamina questi due screenshot della stessa pagina web, ottenuti con il browser a dimensioni diverse. Con una dimensione più grande della finestra (440 per 400): Con
Background Image Oh Noes Hopper
Dobbiamo stare attenti a come rispondono alle diverse dimensioni della finestra per capirlo.
  1. Suggerimento #2

Oh Noes, il tipo verde spaventato, sembra stare sempre nella stessa posizione in entrambi gli screenshot, sotto il flusso di lava. Questo è un buon indizio del fatto che sia posizionato utilizzando top e left, perché la sua distanza dall'alto resta costante, e la sua distanza dai bordi resta costante, e i bordi non cambiano con le dimensioni della finestra.

Le due possibili proprietà sono top: 185px e left: 160px. Beh, l'intera finestra nel secondo screenshot è larga solo 360 pixel, e lui sembra stare al centro, quindi l'opzione corretta è left: 160px.

  1. Suggerimento #3

Hopper, the orange beaver, seems to change position

In the two screenshots - moving closer to the left hand side and closer to the top side in the smaller window. This is a good indication that she is positioned using left and top, because those two sides actually change when the window is resized, and thus anything positioned with them will also change.

The two possible properties are bottom: 60px and bottom: 240px, so bottom: 240px is the correct choice.

There is only one possible property, right: 160px, so that is the correct choice.

Metti in ordine queste regole in base alla loro specificità, dalla meno specifica alla più specifica.

  1. .article
  2. #main-container

Un selettore ID ha un punteggio di specificità più alto di un selettore di classe, e un selettore di classe ha un punteggio di specificità più alto di un selettore di elemento.

  1. Suggerimento #2: "#main-container" è un selettore ID.

".article" è un selettore di classe, e "p" è un selettore di elemento.

Suggerimento #3

Di conseguenza, i selettori ordinati dal meno specifico al più specifico sono "p", ".article", "#main-container".

Metti in ordine queste regole in base alla loro specificità, dalla meno specifica alla più specifica.

h1

h2 class="important"

Suggerimento #1

Un selettore ID ha un punteggio di specificità più alto di un selettore di classe, e un selettore di classe ha un punteggio di specificità più alto di un selettore di elemento.

Suggerimento #2

"#main-photo" è un selettore ID, "h2.important" contiene un elemento selettore e anche un selettore di classe, ".important" è un selettore di classe, e "p" è un selettore di elemento.

Suggerimento #3

Di conseguenza, i selettori ordinati

Il testo formattato con i tag HTML corretti è il seguente:

Dal meno specifico al più specifico sono "h1", ".important", "h2.important", e "#main-photo".

Dato questo codice CSS, di quale colore saranno gli <h3>?

Scegli 1 risposta:

  • rosso
  • blu
  • verde

Suggerimento #1: Il CSS calcola per prima cosa il punteggio di specificità per decidere quale regola applicare. Ma le due regole per h3 sono ugualmente specifiche.

Suggerimento #2: Allora CSS sceglie la regola definita per ultima. Quella che imposta come colore blu era scritta dopo quella che imposta il colore rosso, quindi vincerà.

Incolla il seguente HTML in http://validator.w3.org per vedere quali errori restituisce e pensa a quali miglioramenti potrebbero risolvere gli errori. Quale riga o quali righe di HTML devi aggiungere a questa pagina per renderla una pagina web HTML valida?

Seleziona tutte le risposte valide:
  • <h1>A valid page</h1>
  • <title>A valid page</title>
  • <style> body { background: red; }</style>
  • <!DOCTYPE html>
  • È già HTML valido.

1 / 4

Incolla l'HTML nella casella direct input su http://validator.w3.org e scorri verso il basso per visualizzare gli errori.

2 / 4

Suggerimento #2

Il primo errore è "no document type declaration; implying <!DOCTYPE HTML SYSTEM>". Tutte le pagine web devono iniziare con un doctype, in modo che il browser sappia quale versione di HTML viene usata dalla pagina, mentre a questa pagina web manca un doctype. Di conseguenza, questa riga rimuoverà questo errore:

<!DOCTYPE html>

3 / 4

Suggerimento #3

Il secondo e il terzo errore sono collegati al primo errore, e se

A valid page

ricontrolli il codice dopo aver aggiuntodoctype, andranno via. L'ultimo errore è "end tag for "HEAD" which is not finished". Questo perché serve il tag <head> e questa pagina non lo ha. Quindi, aggiungendo questa riga rimuoverai l'errore:

Suggerimento #4

Aggiungendo queste 2 righe, la pagina web è HTML valido

Dettagli
Publisher
codae
A.A. 2019-2020
14 pagine
1 download
SSD Scienze matematiche e informatiche INF/01 Informatica
I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher codae di informazioni apprese con la frequenza delle lezioni di Abilità informatiche e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Università degli studi Ca' Foscari di Venezia o del prof Rossi Sabina.