Esercizi

ESERCIZI

I linguaggi del web

HTML

1. Completa le seguenti frasi.


a. Modificando l’                                                 di un file di testo da .txt a                                                  è possibile fare in modo che il sistema operativo consideri il file un file                                                  e che pertanto facendo clic due volte su di esso, questo venga aperto all’interno del                                                  anziché nell’editor di testo.


b. Il documento HTML è delimitato dai tag                                                  che racchiudono tutto quello che verrà scritto, suddiviso in due sezioni distinte:                                                  che contiene impostazioni e informazioni utili per la pagina e                                                  che contiene tutto ciò che il browser visualizza.

2. Vero o falso?


a. I simboli <!-- e --> specificano i riferimenti ipertestuali del documento HTML.
  • V   F
b. Il testo scritto fra i tag <h6> ha dimensione minore di quello fra tag <h1>.
  • V   F
c. Racchiudere il testo fra i tag <b> o fra i tag <strong> produce equivalenza estetica.
  • V   F

d. I motori di ricerca considerano nello stesso modo il testo racchiuso fra i tag <i> o <em>.
  • V   F
e. Il tag <hr> inserisce un a capo nella pagina.
  • V   F
f. L’immagine visualizzata dal tag <img> viene specificata nell’attributo href.
  • V   F
g. Il tag <ul> genera una lista ordinata, cioè un elenco puntato.
  • V   F
h. Il tag <table> serve per inserire una tabella nella pagina web.
  • V   F
3. Indica il completamento corretto.

a. Il tag che individua una riga della tabella è:
  • 1 <th>
  • 2 <td>
  • 3 <tr>
  • 4 <tb>

b. Per indicare al browser che la pagina web segue le specifiche dell’HTML 5 si scrive:
  • 1 <!DOCTYPE html>
  • 2 <html>
  • 3 <!DOCTYPE html5>
  • 4 <html5>

CSS

4. Indica il completamento corretto.

a. In generale, la sintassi delle istruzioni CSS è:
  • 1 selettore {proprietà, valore;}
  • 2 selettore {proprietà; valore;}
  • 3 selettore {proprietà: valore,}
  • 4 selettore {proprietà: valore;}

b. I commenti in linguaggio CSS si scrivono:
  • 1 // commento //
  • 2 /* commento */
  • 3 (* commento *)
  • 4 <!-- commento -->

c. Per collegare alla pagina HTML il foglio di stile si utilizza:
  • 1 il tag style nella head.
  • 2 l’attributo style nel body.
  • 3 il tag link nella head.
  • 4 il tag span nel body.

d. Con il linguaggio CSS le immagini di sfondo:
  • 1 possono essere applicate solo al body.
  • 2 vengono applicate a tag e body con la stessa sintassi.
  • 3 vengono applicate a tag e body con sintassi differenti.
  • 4 possono essere applicate solo nella head.

e. L’istruzione CSS per inserire un bordo tratteggiato nero, spesso 2 pixel, a un div è:
  • 1 <div style="border:2px solid black;"> Div </div>
  • 2 <div style="border:2px dotted black;"> Div </div>
  • 3 <div style="border:2px dashed black;"> Div </div>
  • 4 <div style="border:2px double black;"> Div </div>

 >> pagina 383 

LINGUAGGI PER PAGINE DINAMICHE

5. Completa le seguenti frasi.

a. Il                                                  è un linguaggio di programmazione lato client, mentre il                                                  è un linguaggio di programmazione lato server.
L’                                                 e il                                                  invece, non sono linguaggi di programmazione.

b. Le pagine web                                                  sono scritte in linguaggio HTML e JavaScript; quelle                                                  possono essere scritte in linguaggio PHP.

6. Indica il completamento corretto.

a. Il linguaggio JavaScript serve per:
  • 1 definire la struttura della pagina web.
  • 2 definire l’estetica della pagina web.
  • 3 definire il comportamento della pagina web.
  • 4 generare pagine web dinamiche.

b. Il linguaggio PHP:
  • 1 è un linguaggio di scripting lato client.
  • 2 è un linguaggio di scripting lato server.
  • 3 viene eseguito dal client web.
  • 4 viene eseguito dal server web.

CREARE PAGINE WEB

7. SONO COMPETENTE Segui le indicazioni e crea dei siti web. 

a. Utilizzando il seguente testo, crea una pagina web nei linguaggi HTML e CSS, rispettando le indicazioni fornite.
  • Testo da usare:
    Lorem Ipsum
    Un testo utilissimo che… non significa nulla!
    Lorem Ipsum è un testo semi casuale che assomiglia a latino confuso, utilizzato nella composizione tipografica almeno dagli anni Sessanta e introdotto nel mondo digitale a metà degli anni Ottanta.

    Nel campo dell’editoria e della grafica può accadere che 
    il designer della pagina necessiti di utilizzare un testo prima che esso sia effettivamente disponibile. Il testo, allora, viene sostituito temporaneamente da una copia che consente al designer di intervenire sulla forma e sull’aspetto delle parole anche se non hanno significato.
    In questo modo è possibile impaginare un documento, intervenendo anche sul tipo di carattere, concentrandosi esclusivamente sulla forma e non sulla sostanza, trattandosi di contenuti non significativi.

    Sembra che Lorem Ipsum derivi da una versione 
    corrotta del De finibus bonorum et malorum, un testo del I secolo a.C. attribuito al filosofo romano Ciceronele cui parole vengono alterate, aggiunte e rimosse per renderlo un testo scritto in latino improprio e privo di senso.

    In rete sono disponibili vari software in grado di 
    generare testo semi-casuale che assomiglia a un latino confuso.

    Per saperne di più visita il sito https://it.wikipedia.org/
    wiki/Lorem_ipsum

  • Indicazioni per la realizzazione della pagina.
    - In un file esterno inserisci il codice CSS per ottenere un <h1> con testo di colore blu in codifica esadecimale, sfondo bianco e bordo spesso 2 pixel, tratto intero, dello stesso colore del testo e un <h2> con testo di colore tomato, sfondo bianco e bordo spesso 2 pixel, tratteggiato, tomato.
    - Nel tag <style> inserisci il codice CSS per ottenere uno sfondo della pagina nero e il colore del testo di tutti i paragrafi bianco.
    - Utilizza un’immagine quadrata con larghezza 200 pixel. 
    - Inserisci un ulteriore a capo tra <h2> e il primo paragrafo.
    - Inserisci con criterio i tag <strong>, i tag per la sottolineatura del testo, i tag per visualizzare il corsivo e il grassetto.
    - Inserisci un ulteriore a capo prima dell’ultimo paragrafo.
    - Utilizzando l’attributo style imposta il colore bianco per lo sfondo dell’ultimo paragrafo. 
    - Utilizzando il tag <span> imposta il colore del testo “Per saperne di più visita il sito” con notazione RGB (R=170, G=0, B=250), con stile grassetto.
    - Trasforma in un link l’ultimo indirizzo.
    La pagina web che risulta deve essere come la seguente.

 >> pagina 384 
b. Crea un sito di nove pagine molto semplici, tenendo conto delle seguenti indicazioni.

  • Nella home page inserisci 8 immagini di matite colorate (rosso, arancione, giallo, verde, azzurro, blu, viola e grigio) e trasforma ciascuna di esse in collegamenti ad altre pagine. Ciascun link deve portare a una pagina che contiene un’illustrazione con gli stessi colori della matita su cui si è fatto clic.

  • In ciascuna pagina di arrivo inserisci un <h1> con scritto il nome del colore (con un carattere del colore di riferimento) e un paragrafo con una frase riferita al colore (per esempio Azzurro - Il colore delle onde del mare).

  • CSS da inserire nel file esterno: tutte le pagine del sito devono avere <h1> con sfondo R = FA, G = DF e B = AD e paragrafi con sfondo R = 255, G = 253 e B = 208.

  • CSS da inserire opportunamente nelle head di tutte le pagine: le otto pagine di arrivo devono avere, ciascuna, il bordo dell’<h1> e il testo dei paragrafi del colore di riferimento (per esempio rosso per la pagina rossa).

  • CSS da inserire opportunamente nella singola pagina: nella pagina grigia il paragrafo deve avere sfondo grigio scuro e testo bianco.

  • CSS da inserire opportunamente dove occorre: nella pagina gialla il colore del testo dei paragrafi deve essere grigio scuro.

c. Crea il sito web per uno zoo, di almeno 4 pagine, utilizzando le tue conoscenze dei linguaggi HTML e CSS.

Dopo aver riprodotto la prima pagina nello stile seguente (con testo a piacere), integrala con gli elementi che ritieni necessari e inventa altre tre pagine, prevedendo di collegarle tra loro.

d. Usando i box flessibili costruisci una pagina simile alla seguente.


Suggerimenti:
  • Testo da usare: Puoi inserire un <div> privo di contenuto, impostandone una larghezza, per ottenere spazio sulla sinistra della pagina.

  • Puoi utilizzare il tag <span>, invece del tag <p>, per fare in modo che tra le didascalie e le immagini non venga inserito spazio bianco.

     8. SONO COMPETENTE Create a simple three-page HTML website with the following structure.

Clic!
Clic!
Tecnologie informatiche per il primo biennio