docEsercizi
download 
Reclamo Transcript
Esercizi
MODULO L2
Unità 1.2 – CSS e HTML
(A) CONOSCENZA TERMINOLOGICA
Dare una breve descrizione dei termini introdotti:
•
•
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.
2.
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.
Un foglio di stile esterno, ad esempio, stile.css, può essere richiamato in una pagina HTML nei seguenti modi:
a.
b.
3.
4.
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.
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.
.
Esterno
Incorporato
Inline
<h2 style="color:bownr;margin-left:40px"> Calendario </h1>
p.autore {color:red;}
hr {color:green;}
<style type="text/css">body {background:#FFFFCC;}</style>
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; }
</style>
<h1 style=”font-weight:bold; font-size:12pt; color:red;}
M.Malatesta
14/01/2014
1
MODULO L2
Unità 1.2 – CSS e HTML
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;}
</html>
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>
<head>
<link rel=”Stylesheet” type=”text/css”
href=”esempio.css”>
<style type=”text/css”>
p.par1 {color : red}
</style>
</head>
<body>
<p class=”par1”
style = “color : green”>
</body>
</html>
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>
<head>
<title>Stile individuale ai tag</title>
<style>
p#copyright {font-size: 14;
text-align: center;
}
</style>
</head>
<p id="copyright">Game House (c) 1998”
</p>
</html>
Fig. 4-Documento con CSS incorporato
M.Malatesta
14/01/2014
2
MODULO L2
Unità 1.2 – CSS e HTML
(D) ESERCIZI DI APPLICAZIONE
1.
2.
3.
4.
5.
6.
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.
Ripetere l’esercizio precedente, ma tramite un CSS esterno.
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
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."
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”).
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.
M.Malatesta
14/01/2014
3
MODULO L2
Unità 1.2 – CSS e HTML
(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">
<head>
<meta content="text/html;charset=ISO-8859-1"
http-equiv="Content-Type">
<title>La mia pagina con CSS</title>
</head>
<body>
<!-- Menu di navigazione -->
<ul>
<li><a href="index.html">Home page</a>
</li>
<li><a href="musings.html">Canzoni</a>
</li>
<li><a href="town.html">La mia città</a>
</li>
<li><a href="links.html">Link utili</a>
</li>
</ul>
<!-- Contenuto principale -->
<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...
<!-- Data --></p>
<address>04 Settembre, 2012<br>
</address>
</body>
</html>
Iniziamo ad aggiungere le regole di stile.
1)
Nella sezione <head> impostare il colore del testo e dello sfondo della sezione <body> mediante le regole seguenti:
<style type="text/css">
body { color: purple;
M.Malatesta
14/01/2014
4
Unità 1.2 – CSS e HTML
2)
3)
4)
5)
MODULO L2
background-color: #d8da3d; }
</style>
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;
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 }
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; }
Visualizzando la pagina, infine, si dovrebbe ottenere quanto segue:
M.Malatesta
14/01/2014
5
