3E SIA: Creare un sito Web Museo
Laboratorio di Informatica SIA - ITE Bassi Lodi
Esercizio HTML
da consegnare lunedì 23 nov 2020.
Come esercizio proponiamo di realizzare un sito di un piccolo museo virtuale.
Struttura generale delle pagine del sito.
HOME PAGE.
La pagina principale deve contenere (almeno):
• il nome del museo come intestazione e
• una lista delle opere contenute (almeno tre), per ogni opera elencata, ci sarà un collegamento ad un’altra pagina.
Ecco uno schema di massima della home page del vostro museo virtuale in HTML.
<HTML>
<HEAD>
<TITLE>
Il mio museo virtuale.
</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Il mio museo virtuale.</H1>
Un breve testo di introduzione del museo.
<P>
<UL>
<LI> <A HREF=”prima.html”> Prima Opera </A>
<LI> <A HREF=”seconda.html”> Seconda Opera </A>
<LI> <A HREF=”terza.html”> Terza Opera </A>
</UL>
</BODY>
</HTML>
PAGINE DELLE OPERE.
Ogni pagina contenente un’opera d’arte (accessibile tramite il link contenuto nella home page) deve contenere (almeno):
• il titolo dell’opera come intestazione,
• l’autore dell’opera,
• un breve testo descrittivo dell’opera,
• l’immagine dell’opera, cliccando sull’immagine deve aprirsi una nuova pagina contenente una scheda più dettagliata dell’opera e del suo autore
• un bottone che permetta di ritornare all’home page.
Aspetti grafici del sito.
Usate la vostra fantasia per rendere gradevole l’aspetto del museo virtuale, provate ad impostare nel body:
• il colore dello sfondo,
• un’immagine come sfondo,
• il colore del testo,
• il colore dei link da visitare,
• il colore dei link visitati,
• ecc.
Traccia:
<BODY
bgcolor=”colore sfondo”
background=”nome file con immagine”
text=”colore testo”
link=”colore link da visitare”
vlink=”colore link visitato”
alink=”colore link selezionato”
>
Nelle pagine delle opere utilizzate:
1. I TAG per la formattazione del testo, ad esempio:
<b> grassetto </b>
<i> corsivo </i>
<em> enfatizzato</em>
<code> codice </code>
<strong> grassetto </strong>
<font size= "3"> testo </font>
<font color= "blue"> ... ...</font>
<font face= "Arial "> ... ...</font>
2. I tag per l’allineamento dei paragrafi del testo:
<p align= "center">
<p align ="right">
<p align ="justify ">
<center> testo da centrare </center>
3. A scelta potete inserire anche:
Linee orizzontali: <hr>
<hr width="90%" size="3">
Testo scorrevole: <marquee>
<marquee> questo testo scorre </marquee>
Consigli per lo svolgimento dell’esercitazione.
Per editare i file HTML potete usare qualsiasi programma come blocconote, notepad, espressione Web, editor on line o l’editor di Altervista, ecc.
Salvate su Altervista creando una cartella museo e una sotto cartella immagini.
La prima pagina deve chiamarsi index.html, le altre con il nome del contenuto ad esempio: stanzauno.html, stanzadue.html , dovesiamo.html.
Le immagini delle vostre opere d’arte dovete salvarle nella sottocartella immagini su Altervista con il collegamento relativo e nella pagina sitografia dovete inserire i link assoluti specificando l’origine del link della foto o del testo inserito nelle pagine.
Struttura del tag per l’inserimento delle immagini nel sito oppure usate il CSS (vivamente consigliato)
<img
src="nome file dell’immagine"
align="left" | "right" | "center"
border="numero"
height="numero"
width="numero"
hspace="numero"
vspace="numero"
alt ="testo alternativo all’immagine">
Dopo aver realizzato il sito, pubblicate su Classroom il link come commento alla traccia che ho già scritto come post nella classe III E Sia.
Buon lavoro prof. Paolo Latella
Commenti
Posta un commento