(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE"

Lamberto Bossi
8 anni fa
Visualizzazioni

1 Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA Rispondere alle seguenti domande producendo anche qualche esempio: B1) Conoscenza 1. Cosa sono i fogli di stile interni? 2. Cosa sono i fogli di stile esterni? 3. Cosa sono i fogli di stile inline? 4. Cosa sono i fogli di stile incorporati? B2) Competenza 1. Come si crea un CSS esterno? 2. Come si crea un CSS incorporato? 3. Come si crea un CSS inline? 4. Come si usa il tag link per un CSS esterno? 5. Come si usa import per un CSS esterno? 6. Che differenza c è fra i selettori id e class? 7. Dove va inserita una regole di un CSS incorporato? (C) ESERCIZI DI COMPRENSIONE 1. I fogli di stile esterni sono codice CSS scritto in un file... separato rispetto alla pagina web ed avente estensione.css I CSS esterni possono essere usati per impostare elementi in più. ed eventuali modifiche allo stile si effettuano solo modificando il.css. 2. Un foglio di stile esterno, ad esempio, stile.css, può essere richiamato in una pagina HTML nei seguenti modi: a. b. 3. I fogli di stile incorporati e quelli. contengono regole valide solo per la pagina in cui sono presenti. I fogli. sono quelli inseriti nel documento HTML tramite l elemento <.> e la loro dichiarazione va posta all interno della sezione <.>. I fogli.. sono quelli inseriti nel documento HTML tramite l attributo. degli elementi HTML. 4. La sintassi di un CSS inline è la seguente:. 5. Indicare, per ciascuna delle seguenti regole di formattazione, se si tratti di un CSS esterno, incorporato o inline. <h2 style="color:bownr;margin-left:40px"> Calendario </h1> p.autore {color:red;} hr {color:green;} <style type="text/css">body {background:#ffffcc;} p {margin-left:50px;} <h1 style="color: green; background: gray;">...</h1> body {background-image:url("images/player-30.jpg");} p#copyright {text-align:center; font-size:14pt } <style type= text/css > h1 {font-weight: bold; font-size: 12pt; color: #FF8000; } <h1 style= font-weight:bold; font-size:12pt; color:red;} Esterno Incorporato Inline 1

Cosa sono i fogli di stile inline? 4. Cosa sono i fogli di stile incorporati? B2) Competenza 1. Come si crea un CSS esterno? 2. Come si crea un CSS incorporato? 3. Come si crea un CSS inline? 4. Come si usa il tag link per un CSS esterno?

2 6. Considerando il CSS esterno mostrato in Fig. 1, e registrato nel file stilepar.css, scrivere nel riquadro sottostante il codice HTML che lo richiama e che lo utilizza per scrivere due paragrafi contenenti le frasi rispettivamente: Questo è il paragrafo 1 e Questo è il paragrafo 2 /* file: stilepar.css */ p.par1 {color : red;} p.par2 {color : green;} Fig. 1-Un esempio di CSS esterno 7. Nel documento di Fig. 2 è rappresentato un documento HTML, che fa riferimento al file stilepar.css dell esercizio n. 6. Svolgere le considerazioni relative alle seguenti domande:. a. Quali tipi di CSS sono presenti? b. È possibile la loro presenza contemporanea? c. Quale sarà lo stile effettivamente applicato alla sezione <p>? <htmll> <link rel= Stylesheet type= text/css href= esempio.css > <style type= text/css > p.par1 {color : red} <body> <p class= par1 style = color : green > </body> Fig. 2-Documento con CSS multipli 8. Considerando il CSS esterno mostrato in Fig. 3, e registrato nel file stiletitoli.css, scrivere nel riquadro sottostante il codice HTML che lo richiama e che lo utilizza per scrivere i titoli seguenti: Titolo principale: Classi presenti Titoli secondari: Biennio e Triennio /* file: stiletitoli.css */ h1 {font-weight:bold; font-size:14pt; color:red} h2 {font-weight: bold; font-size: 12pt; color: #FF8000; } Fig. 3-Un esempio di CSS esterno 9. Considerare il CSS mostrato in Fig. 4 e descriverne il tipo (esterno, incorporato o inline), il contenuto e gli effetti. <html> <title>stile individuale ai tag</title> <style> p#copyright {font-size: 14; text-align: center; } <p id="copyright">game House (c) 1998 </p> Fig. 4-Documento con CSS incorporato 2

2 /* file: stilepar.css */ p.par1 {color : red;} p.par2 {color : green;} Fig. 1-Un esempio di CSS esterno 7. Nel documento di Fig.

3 (D) ESERCIZI DI APPLICAZIONE 1. Creare una pagina web che riporta l orario settimanale di una classe, facendo in modo che il nome di ogni materia abbia un dato colore e che le ore siano di colore bianco su fondo nero. Le impostazioni di formattazione siano date mediante un CSS incorporato. 2. Ripetere l esercizio precedente, ma tramite un CSS esterno. 3. Scrivere un file CSS che esegua le seguenti impostazioni: a. body: testo centrato, margine e spaziatura a sinistra nulli; b. #testata: dimensione font 130% c. #fondo: dimensioni font 85%, testo centrato, colore bianco, sfondo marrone d. #sinistro: ampiezza 160px, margine nullo, padding 5px e. #centrale: margine sinistro 170px, padding 10px Provare il file creato, richiamandolo da una pagina HTML 4. Usando CSS fate in modo che il seguente paragrafo inizi con rientro di 20 pixel, abbia sfondo di colore verde e testo bianco. Il testo deve presentarsi come segue: Un mattino del febbraio 1960, a Milano, l'architetto Antonio Dorigo, di 49 anni, telefonò alla signora Ermelina. "Sono Tonino, buongiorno sign..." "E' lei? Quanto tempo che non si fa vedere. Come sta?" "Non c'é male, grazie. Sa in questi ultimi tempi un mucchio di lavoro e così... senta potrei venire questo pomeriggio?" "Questo pomeriggio? Mi faccia pensare... a che ora?" "Non so. Alle tre, tre e mezza." "Tre e mezza d'accordo." 5. Scrivere un documento HTML contenente il proprio nome e cognome. Usando opportunamente CSS fate in modo che il testo sia centrato nella pagine, che abbia dimensione 12 punti e colore nero, su fondo bianco. Inoltre, le lettere iniziali abbiano colore diverso dalle altre e dimensioni maggiori, per esempio 20pt (questa caratteristica si dice capolettera ). 6. Con riferimento all esercizio n. 5, scrivere una pagina HTML contenente il seguente testo: Mai memorizzare quello che puoi comodamente trovare in un libro. Imparare è un'esperienza; tutto il resto è solo informazione. L'immaginazione è più importante della conoscenza. (A. Einstein) Progettare per la pagina richiesta, un CSS in modo che il testo sia scritto in verde, con dimensione 12pt, con le capolettere di colore marrone su ogni riga, aventi dimensioni 20pt. Il CSS deve prevedere che il nome dell autore vada scritto in grassetto e a distanza 200pt dal margine sinistro. 3

Le impostazioni di formattazione siano date mediante un CSS incorporato. 2. Ripetere l esercizio precedente, ma tramite un CSS esterno. 3. Scrivere un file CSS che esegua le seguenti impostazioni: a.

4 (E) ESERCITAZIONI PRATICHE Esercitazione n. 1 Cognome e nome Data: Classe: Voto: Obiettivi:, CSS incorporati Problema: Si vuole progettare una pagina web di presentazione, contenente i propri dati personali.. Fase 1: Analisi del testo Innanzitutto la pagina avrà un titolo, ad esempio: La mia prima pagina con i CSS Il testo presenta un menu sotto forma di lista non ordinata, contenente le seguenti voci: Home page Canzoni La mia città Link utili Sotto l elenco compare il titolo La mia pagina con stile, formattata con tag <h1>. Successivamente compare una serie di paragrafi, come segue - una frase di benvenuto: Benvenuti nella mia prima pagina! - Purtroppo non contiene immagini e i link mostrati non portano da nessuna parte, ma almeno mostra uno stile... - Qua ci dovrebbe essere qualcosa, ma ancora non so bene cosa... Infine, con tag <address> compare la data. Fase 2: Codice HTML Una prima stesura del codice HTML è la seguente: <!DOCTYPE html> <html lang="it"> <meta content="text/html;charset=iso " http-equiv="content-type"> <title>la mia pagina con CSS</title> <body>  <ul> <li><a href="index.html">home page</a> <li><a href="musings.html">canzoni</a> <li><a href="town.html">la mia città</a> <li><a href="links.html">link utili</a> </ul>  <h1>la mia pagina con stile</h1> <p>benvenuti nella mia prima pagina!</p> <p>purtroppo non contiene immagini e i link mostrati non portano da nessuna parte, ma almeno mostra uno stile... </p> <p>qua ci dovrebbe essere qualcosa, ma ancora non so bene cosa... </p> <address>04 Settembre, 2012<br> </address> </body> Iniziamo ad aggiungere le regole di stile. 1) Nella sezione impostare il colore del testo e dello sfondo della sezione <body> mediante le regole seguenti: <style type="text/css"> body { color: purple; 4

. Fase 1: Analisi del testo Innanzitutto la pagina avrà un titolo, ad esempio: La mia prima pagina con i CSS Il testo presenta un menu sotto forma di lista non ordinata, contenente le seguenti voci:

5 background-color: #d8da3d; } 2) Aggiungiamo al testo della sezione <body> un font, ad esempio Georgia, "Times New Roman", Times, serif; La regola da scrivere sarà: font-family: Georgia, "Times New Roman", Times, serif; 3) Ancora una modifica, stavolta sul titolo della sezione <h1>. Lo vogliamo scrivere con il font font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif. Sarà sufficiente, sempre nella sezione <style> aggiungere la regola seguente: h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } 4) Come ultima cosa, disponiamo l elenco dei link a fianco del testo. Per fare ciò occorre spostare il testo sulla destra, distanziandolo dal bordo sinistro. In questo caso la regola è: padding-left: 250em; e, successivamente spostare l elenco in basso, sulla sinistra del testo. ul { position: absolute; top: 20 px; left: 20 px ; width: 180 px; } 5) Visualizzando la pagina, infine, si dovrebbe ottenere quanto segue: 5

Sarà sufficiente, sempre nella sezione <style> aggiungere la regola seguente: h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } 4) Come ultima cosa, disponiamo l elenco dei

Documenti analoghi

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es: