|
Sei in:
Home > Materiale >
Laboratorio > Esercitazione 2 |
Seconda
esercitazione - Introduzione a HTML e CSS
Informazioni e
materiale relativo alla seconda esercitazione di laboratorio.
|
Strumenti
Editor di pagine web KompoZer
Si farà riferimento al software KompoZer.
L’editor KompoZer è disponibile in Internet come “free software”. Chi
volesse scaricarlo ed installarlo sulla propria macchina può seguire le
istruzioni riportate qui.
Sul sito http://www.chromakinetics.com/Kompozer/
è disponibile una guida all'uso di KompoZer (può essere visualizzata
online oppure scaricata in formato PDF o Microsoft Word).
Traccia
dell'esercitazione
1. Introduzione al linguaggio
HTML:
- struttura della pagina (tag
<html>, <head>, <body>)
- tag per la formattazione elementare del
testo
- inserimento di elenchi puntati ed ordinati
- inserimento di link, immagini e oggetti
2. Stili:
utilizzo di fogli di stile CSS per la gestione del layout della pagina.
Esercizi (in
laboratorio)
Prima di cominciare l'esercitazione
Scaricare l'archivio materiale_es02.zip, che
contiene alcuni file utili per lo svolgimento degli esercizi
proposti. Creare una cartella dedicata a questa esercitazione
(chiamandola, ad es. "es2") all'interno della vostra cartella personale
(per chi svolge l'esercitazione in Lab4). Estrarre i file
contenuti in materiale_es02.zip ("Estrai tutto...")
all'interno della cartella appena creata.
Avviare il software KompoZer (disponibile in Lab4; chi lo desidera può
installare KompoZer sulla propria macchina a casa seguendo le
istruzioni riportate qui) e prendere confidenza con la sua interfaccia
grafica. In particolare, nel corso dell'esercitazione utilizzeremo
spesso il meccanismo di navigazione a schede nella parte inferiore
dell'area della pagina, che consente di accedere a diverse "viste" del
documento che si sta elaborando:
- scheda Normal: editor "What You See Is What You
Get";
- scheda HTML Tags: evidenzia in giallo le
porzioni del documento delimitate da specifici tag HTML;
- scheda Source: mostra il codice sorgente del
documento;
- scheda Preview: mostra attraverso un'anteprima
come un generico browser visualizza il documento.
All'avvio, KompoZer mostra una pagina vuota. Confrontate le
diverse viste disponibili ed osservate, in particolare, la struttura
della pagina HTML vuota mostrata nella scheda Source.
1. Creazione di pagine HTML
L'obiettivo di questa esercitazione è quello di
creare un mini-sito, composto da due pagine HTML, dedicato al bar di
Ingegneria.
- in KompoZer, creare una pagina nuova (tasto
"New" nella barra degli strumenti di composizione) e salvarla
all'interno della cartella creata per questa esercitazione (tasto
"Save"). Come nome per il file è possibile specificare ad
esempio "home";
- utilizzando la scheda Normal,
incollare
all'interno della pagina appena salvata il contenuto del file
"home.txt" che si trova all'interno dell'archivio
(materiale_es02.zip) precedentemente scaricato ed estratto
nella vostra cartella personale.
Salvare nuovamente la pagina per mantenere le modifiche apportate;
- formattare il testo della pagina, in modo da
evidenziare i titoli (di vari livelli). In particolare è possibile:
- selezionare, nella scheda Normal, le righe
che si vogliono trasformare in titoli e successivamente scegliere uno
dei formati disponibili per i titoli (Heading 1, ...., Heading 6) nella
barra di formattazione di KompoZer;
- selezionare le porzioni di testo che si
vogliono trasformare in paragrafi e scegliere il formato "Paragraph";
all'interno dei paragrafi è inoltre possibile selezionare altre
porzioni di testo ed utilizzare i pulsanti presenti nelle due barre di
formattazione per applicare altre caratteristiche a vostro piacere (ad
esempio creare elenchi ordinati o non ordinati, modificare
l'allineamento del testo, evidenziare porzioni di testo mettendole in
grassetto, ...)
- dopo aver formattato il testo e salvato le
modifiche, osservare la scheda Source: che tag compaiono? In quale
posizione si trovano rispetto al testo a cui si riferiscono?
- creare la seconda pagina del mini-sito (tasto
"New"), salvarla scegliendo un nome indicativo (ad esempio "dovesiamo")
e incollare al suo interno (scheda Normal) il contenuto del file
"dovesiamo.txt" presente nell'archivio di partenza. Come prima,
formattare il testo disponibile; questa volta però provate a farlo
modificando il codice sorgente dalla scheda Source ed inserendo tag
simili a quelli che avete osservato al punto precedente.
- dalla scheda Normal, utilizzare il tasto "Image"
per inserire in fondo alla pagina "dovesiamo.html" la mappa contenuta
nel file mappa.png (presente nell'archivio di partenza). Osservare
attraverso la scheda Source come è stato modificato il codice sorgente
dopo questa modifica.
2. Creazione di collegamenti fra pagine
HTML
- nella pagina "home.html", dalla scheda Normal,
aggiungere un breve testo a cui agganciare un link alla pagina
"dovesiamo.html" (ad esempio, è possibile aggiungere a fondo pagina la
scritta "Dove siamo");
- evidenziare il testo appena inserito e premere
il tasto "Link" nella barra degli strumenti di
composizione; nella
finestrella che si aprirà, specificare il nome della pagina che
vogliamo linkare (ad esempio "dovesiamo.html"). Osservare, attraverso
la scheda Source, come si è modificato il codice HTML di "home.html" a
seguito della modifica apportata;
- visualizzare la pagina "home.html" utilizzando
un browser (doppio click sul file) e verificare che il link funzioni;
- tornare in KompoZer e creare nella pagina
"dovesiamo.html" un link che permetta di tornare alla home. Provate,
questa volta, a creare il link modificando il codice sorgente dalla
pagina Source utilizzando i tag osservati al punto 2;
- utilizzando, a vostra scelta, l'editor grafico
(scheda Normal) o l'editor HTML (scheda Source), inserite nella pagina
"home.html" un link al sito http://www.ing.unibo.it
in corrispondenza
del testo "Facoltà di Ingegneria" ed un link al sito
http://www.unibo.it
in corrispondenza del testo "Università di
Bologna". Aprite la pagina utilizzando un browser e verificate che i
link funzionino correttamente.
3. Modifica dello stile tramite
CSS interni
- Nella pagina "home.html" (scheda Normal)
premere il pulsante "CaScadeS" e creare una nuova
style rule (nella
finestrella che si aprirà, cliccare sulla tavolozza e scegliere la voce
"style rule"). Nella parte destra della finestrella è possibile
scegliere a quali elementi della pagina la
regola deve essere applicata (ad esempio, titoli di primo livello h1,
oppure paragrafi); occorre quindi cliccare sul pulsante
“Create Style rule” per procedere con le
definizioni delle proprietà stilistiche che verranno applicate
all'elemento scelto. Al termine occorre cliccare su "Ok" per salvare la
prorpie modifiche.
Tenendo conto di questo provate a creare le "style
rule" necessarie per:
- visualizzare i titoli H1 in un font
appartente alla famiglia "Arial, Helvetica, Sans-serif", in grassetto e
uppercase (tutte lettere maiuscole), in verde (codice esadecimale:
#006600);
- visualizzare i titoli di livello inferiore ad
H1 in font appartenti alla famiglia "Arial, Helvetica, Sans-serif", in
grassetto ed in corsivo
- visualizzare i link non ancora visitati in
verde scuro (#003300)
[aggiungere una regola "custom" per a:link: scegliere "custom style
rule", selezionare
nella casella a:link ed effettuare le impostazioni nella scheda "Text"]
- visualizzare i link visitati in rosso scuro
(#CC0000)
[aggiungere una regola per a:visited: scegliere "custom style rule",
selezionare nella
casella a:visited ed effettuare le impostazioni nella scheda "Text"];
- nella scheda Source, osservare le modifiche al
codice HTML. In particolare, all'interno del tag <HEAD>
osservare il contenuto del tag <STYLE>: saranno presenti
dei selettori (ad esempio h1) e, per ciascun selettore, un elenco di
coppie proprietà: valore (ad esempio font-family:
Arial) corrispondenti
alle caratteristiche specificate nelle regole precedentemente create;
- quali vantaggi offre questa soluzione rispetto
all'uso di "inline style" (ovvero rispetto alla specifica di proprietà
stilistiche applicate ai singoli tag dentro la sezione
<BODY>)?
4. Modifica dello stile tramite
CSS esterni
- Ora "home.html" e "dovesiamo.html" hanno stili
diversi: come possiamo uniformarli?
- Una possibilità è quella di ricorrere ad un CSS
esterno, condiviso dalle due pagine. Creare un CSS esterno, a partire
dalle regole create precedentemente: premere il pulsante "CaScadeS",
selezionare la voce "internal stylesheet" nella sezione di sinistra
("Sheets and rules") e cliccare sul pulsante "Export stylesheet and
switch to exported version". Scegliere un nome per il foglio di stile
(es. "miostile.css") e salvarlo nella cartella dedicata
all'esercitazione;
- osservare, tramite la scheda Source, come si è
modificata la sezione <HEAD> in seguito a questa modifica;
- associare il CSS esterno appena creato anche
alla pagina "dovesiamo.html", agedo questa volta sul codice sorgente
(scheda Source) ed inserendo modifiche analoghe a quelle appena
osservate. Salvare le proprie modifiche e verificare, tramite la scheda
Preview o tramite un browser, che le regole di stile siano state
correttamente applicate;
- modificare entrambe le pagine in modo da
assocaire loro il foglio di stile "halloween.css" presente
nell'archivio di partenza.
Altri file di
esempio
Di seguito sono riportati altri file di esempio
che possono essere utili per:
Link utili
Il portale W3Schools
mette a disposizione tutorial, esempi, esercizi e risorse utili per la
creazione di pagine web. In particolare, sono presenti due sezioni
dedicate ad HTML e CSS:
|
|
|