14490 - Informatica Grafica
Strumenti

Firefox

KompoZer

LibreOffice


 

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:

  1. scheda Normal: editor "What You See Is What You Get";
  2. scheda HTML Tags: evidenzia in giallo le porzioni del documento delimitate da specifici tag HTML;
  3. scheda Source: mostra il codice sorgente del documento;
  4. 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. 

  1. 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";
  2. 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;
  3. 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, ...)
  4. 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?
  5. 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.
  6. 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

  1. 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");
  2. 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;
  3. visualizzare la pagina "home.html" utilizzando un browser (doppio click sul file) e verificare che il link funzioni;
  4. 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;
  5. 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

  1. 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"];
  2. 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;
  3. 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

  1. Ora "home.html" e "dovesiamo.html" hanno stili diversi: come possiamo uniformarli?
  2. 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;
  3. osservare, tramite la scheda Source, come si è modificata la sezione <HEAD> in seguito a questa modifica;
  4. 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;
  5. 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:

Calendario delle lezioni

Periodo
21/09/2011 - 15/12/2012

Orario
MER 14.00 - 17.00
Aula 5.7 / Lab4

GIO 14.00 - 17.00
Aula 1.2

Festività
Giovedì 08/12/2011


Registrazione

Registrazione al Lab4
-> CCIB

Informatica Grafica
-> Laboratorio Garagnani


Licenze

Creative Commons License
Handouts and all other material for Informatica Informatica Grafica per Ingegneria Edile-Architettura, Università di Bologna - A.A. 2011/2012 by Paolo Torroni is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Italy License.
Based on a work at University of Bologna, Italy.