Gena - a.a. 2004 /2005 Web Design 1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti) Linguaggi di mark-up • separazione tra contenuto (testo) e aspetto (indicazioni che vengono interpretate dal programma che visualizza il documento) • pagina Web = file di testo (per es. home.html ) che contiene indicazioni per: (a) i link (connessioni ipertestuali) (b) la visualizzazione Pagine Web statiche: HTML
55
Embed
Gena - a.a. 2004/2005Web Design1 Pagine Web statiche: HTML HTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Gena - a.a. 2004/2005 Web Design 1
Pagine Web statiche: HTMLHTML (HyperText Markup Language) è un linguaggio di mark-up per scrivere pagine Web (ipertesti)
Linguaggi di mark-up• separazione tra contenuto (testo) e aspetto (indicazioni
che vengono interpretate dal programma che visualizza il documento)
• pagina Web = file di testo (per es. home.html) che contiene indicazioni per:
(a) i link (connessioni ipertestuali)
(b) la visualizzazione
Pagine Web statiche: HTML
Gena - a.a. 2004/2005 Web Design 2
HTML: introduzione
home page:
link1
link2
pagina papers:
link3
pagina di un editore
pagina del celi
link4
(a) I link (connessioni ipertestuali)
home.html: contenuto+link+aspetto
pagina Web visualizzata da un Web browser (per es. Microsoft Interner Explorer)interpretati
Gena - a.a. 2004/2005 Web Design 3
HTML: introduzione
(b) la visualizzazione (esempio): cosa si vede...
Gena - a.a. 2004/2005 Web Design 4
HTML: introduzione
...<H1><IMG SRC="img/bimbo.gif" HSPACE="2" ALIGN="ABSCENTER"> Le attività</H1><P> Il nido è aperto <B>dal Lunedì al Venerdì</B><BR><B>dalle 7.30 alle 19.00</B></P><P> <A HREF="javascript:openAlbum('foto.html');"onMouseover="window.status='foto'; return true" onMouseOut="window.status='';return true;">Qualche foto dei nostri locali</A></P><P> I bambini si divertiranno a manipolare la <B>pasta colorata</B> (simil pongo), con cui potranno creare oggetti e animali, con l'ausilio di apposite "formine", ma soprattutto utilizzando la loro fantasia.</P><B> <P> Le attività si svolgeranno tutti i giorni con il seguente orario: </P> <UL> <LI>al mattino, dalle 10.00 alle 11.00</LI> <LI>al pomeriggio, dalle 16.00 alle 17.00 </LI> </UL> </B>... aspetto
contenuto
(b) la visualizzazione (esempio): … cosa c’è dietro
Gena - a.a. 2004/2005 Web Design 5
HTML: introduzione
Premessa:• Esistono molti strumenti per costruire pagine Web, cioè
per “scrivere HTML senza vederlo”, per es. Deamweaver (Macromedia), FrontPage (Microsoft), Netscape Composer
• Tuttavia è importante capire “cosa ci sta sotto” per due ragioni principali: è importante capire ciò che il programma che usiamo
sta effettivamente scrivendo per capirne meglio il comportamento
talvolta è necessario intervenire manualmente sul codice HTML generato da un programma
Gena - a.a. 2004/2005 Web Design 6
HTML: i tagIn un file HTML contiene indicazioni per il browser (cheinterpreta il linguaggio HTML) sotto forma di tag:
<META NAME="DESCRIPTION" CONTENT="Corso sulla pubblicazione on-line, progettazione e costruzione di siti Web">
Descrivono le parole-chiave e il contenuto della pagina(vengono generalmente usate dai motori di ricerca)
NB: spesso il tag META non è chiuso (ma funziona lo stesso!)
Gena - a.a. 2004/2005 Web Design 10
HTML: il tag BODY
All'interno del tag BODY si trova il documento vero eproprio (il contenuto della pagina Web)
Gli attributi del tag BODY:<BODY
BGCOLOR = colore dello sfondoBACKGROUND = immagine di sfondoTEXT = colore del testoLINK = colore dei linkVLINK = colore dei link vistitatiALINK = colore dei link attivi
• Ogni colore può essere rappresentato mediante tre numeri, compresi tra 0 e 255, che rappresentano la quantità di rosso (Red), verde (Green) e blu (Blue) presenti
codifica RGB
• La codifica usata è quella esadecimale (base 16)
• Si possono rappresentare più di 16 milioni di colori diversi
Esistono dei nomi mnemonici per i colori più comuni (per es. “red”, “acquamarine”, “beige”, ecc.)
Gena - a.a. 2004/2005 Web Design 14
HTML: titoli
Possiamo usare vari tag per strutturare il documento (cioè ilcontenuto della pagina Web), racchiuso all'interno del tag
<BODY> ...</BODY>
I titoli (headers):<H1> Titolo di primo livello </H1>
Titolo di primo livello<H2> Titolo di primo livello </H2>
Titolo di secondo livello<H3> Titolo di primo livello </H3>
Titolo di terzo livello
Gena - a.a. 2004/2005 Web Design 15
HTML: titoli<H1>La pubblicazione on-line</H1><H2>Progettazione e costruzione di siti Web</H2>...<H3>Materiale e riferimenti bibliografici:</H3>...<H3>Informazioni generali:</H3>
Gena - a.a. 2004/2005 Web Design 16
HTML: paragrafi<P> Paragrafo </P>
Allineamento (attributo di P):<P ALIGN="CENTER/LEFT/RIGHT/JUSTIFIED"> Paragrafo</P>
Per andare a capo senza creare un nuovo paragrafo:<BR>
NB: Alcuni tag (per es. BR, HR e IMG) si possono scrivere senza chiusura (cioè senza <TAG> ... </TAG>, o <TAG/>). Questo, benché non sia formalmente corretto, viene interpretato correttamente dai browser, cioè:
<FONT SIZE="3">testo grande 3 unità</FONT> testo grande 3 unità
<FONT FACE="Arial">testo in font Arial</FONT> testo in font Arial
<FONT COLOR="blue">testo blu</FONT> testo blu
Gena - a.a. 2004/2005 Web Design 22
HTML: caratteri<B><FONT COLOR="red"> La pubblicazione on-line: progettazione e costruzione di siti Web</FONT></B>...<I>Principi di Interazione Uomo-Macchina</I>...<FONT SIZE="2" FACE="Comic sans MS"> [Prof. Giovanna Petrone]</FONT>...
Gena - a.a. 2004/2005 Web Design 23
HTML: elenchi (liste)Liste non numerate: <UL> <LI>Principi di Interazione Uomo-Macchina</LI> <LI>Progettazione di siti Web</LI> <LI>Architettura dell'informazione</LI> <LI>Realizzazione di siti Web statici e
dinamici</LI> <LI>Cenni a usabilità e accessibilità</LI></UL>
Gena - a.a. 2004/2005 Web Design 24
HTML: elenchi (liste)Liste numerate: <OL> <LI>Principi di Interazione Uomo-Macchina</LI> <LI>Progettazione di siti Web</LI> <LI>Architettura dell'informazione</LI> <LI>Realizzazione di siti Web statici e
dinamici</LI> <LI>Cenni a usabilità e accessibilità</LI></OL>
Gena - a.a. 2004/2005 Web Design 25
HTML: commenti e linee orizzontali
Commenti (il browser NON legge il testo commentato):<!-- questo è un commento -->
SRC = nome del file che contiene l’immagineALT = descrizione dell'immagineALIGN = "CENTER/LEFT/RIGHT" "TOP/BOTTOM/MIDDLE"BORDER = spessore del bordo (in pixel)HEIGHT = altezza (in pixel)WIDTH = larghezza (in pixel)HSPACE = spazio a destra e a sinistra (in pixel)VSPACE = spazio in alto e in basso (in pixel)
>
NB: Il tag IMG si può scrivere senza chiusura; il browser lo interpreta come:
<IMG ... > <IMG ... />
Gena - a.a. 2004/2005 Web Design 27
HTML: immagini
<IMG SRC="img/Unilogo.jpg" ALT="Università di Torino" ALIGN="BOTTOM" BORDER="0" HSPACE="10">
Gena - a.a. 2004/2005 Web Design 28
HTML: suoni<BGSOUND
SRC = nome del file che contiene il suonoLOOP = numero di ripetizioni del suono (un
numero, oppure "infinite")>
NB: Anche il tag BGSOUND si può scrivere senza chiusura; il browser lo interpreta come:
<BGSOUND ... > <BGSOUND ... />
Gena - a.a. 2004/2005 Web Design 29
HTML: link
Link esterni e ancore interne:
home.html:
.........orario
.........
didattica
.........
Attività didattica: Bla, bla, bla, ...
.........
orario.html.........
linkesterno
ancorainterna
NB: può essere un file sullo stesso server (nel qual caso basta indicare il nome del file, con l'eventuale path), oppure un file su un server diverso (nel qual caso occorre specificare l'intero URL)
Gena - a.a. 2004/2005 Web Design 30
HTML: link
Link esterni:<A HREF = "URL/nome-file"> link </A> link
Per esempio: <A HREF="orario.html">orario</A>
orario = vai alla pagina orario.html (NB: devetrovarsi nella stessa cartella della pagina corrente!)
orario = vai alla pagina orario.html, che si trova nella cartella masterEM, nell'area dell'utente goy, sul server www.di.unito.it e utilizza il protocollo http (HyperText Transfer Protocol, utilizzato di default dai browser principali)
Gena - a.a. 2004/2005 Web Design 31
HTML: link
Ancore interne:<A NAME = "etichetta"> ancora </A> creo l'ancora<A HREF="#etichetta">link</A> link (interno)
all'ancoraPer esempio:
<A NAME="dida">Attività didattica</A> non ha effetti visibili...<A HREF="#dida">didattica</A> didattica = Vai al testo contrassegnato con l’etichetta
dida (paragrafo “Attività didattica”) in questa pagina
<A HREF="home.html#dida">didattica</A> didattica = Vai al testo contrassegnato con l’etichetta
dida (paragrafo “Attività didattica”) nella pagina home.html
<TABLE BGCOLOR = colore dello sfondo della tablella ALIGN = "CENTER/LEFT/RIGHT" BORDER = spessore del bordo (in pixel) BORDERCOLOR = colore del bordo WIDTH = larghezza (in pixel) o in % CELLSPACING = spazio tra celle CELLPADDING = spazio tra testo e bordo cella>
NB: La maggioranza degli attributi di TABLE possono essere applicati anche a TR e a TD
Attributi esclusivi del tag TD:<TD COLSPAN = estensione della cella su più colonne ROWSPAN = estensione della cella su più righe VALIGN = posizione del testo nella cella>
<TABLE BORDER="0" CELLPADDING="10"><TR><TD> <P ALIGN="CENTER" CLASS="BIG"> Nido per bimbi <B>da 0 a 3 anni</B></P> <TABLE BORDER="1" BORDERCOLOR="red" CELLPADDING="4"><TR><TD> <P ALIGN="CENTER"> <IMG SRC="img/clock1.gif" BORDER="0" ALIGN="ABSCENTER"> <FONT COLOR="red" SIZE="3"><B>AVVISI:</B></FONT> <IMG SRC="img/clock1.gif" BORDER="0" ALIGN="ABSCENTER"> </P> <UL><FONT COLOR="red"> <LI>Nel periodo <B>maggio-giugno</B> l'asilo chiuderà alle <B>17.30</B> <BR><BR> <LI><B>Nei mesi giugno-luglio si accolgono bambini provenienti <BR> dagli asili comunali che in quel periodo resteranno chiusi</B> <BR><BR> <LI>Inoltre l'asilo resterà <B>chiuso dal 5 al 30 di agosto</B> <BR><BR> <LI>Per appuntamenti e informazioni <B><A HREF="dove.html">contattateci</A> !</B> </FONT></UL> </TD></TR></TABLE> </TD></TR></TABLE> </TD></TR></TABLE>
Gena - a.a. 2004/2005 Web Design 40
HTML: frameI frame servono a suddividere la finestra del browser in sotto-finestre tra loro indipendenti, nelle quali si possono caricare documenti (file HTML) diversi
Gena - a.a. 2004/2005 Web Design 41
HTML: frameIl file HTML che rappresenta l’intera pagina contienele istruzioni per la suddivisione della finestra:
Un’image map è un’immagine suddivisa in “aree sensibili”che, al click del mouse, si comportano come link.Per es, consideriamo l’immagine contenuta nel file willer.gif
Gena - a.a. 2004/2005 Web Design 47
HTML: image map
Per costruire un image map:1. Si dichiara che, in corrispondenza di una certa immagine,
verrà usata una certa "mappa" (con l'attributo USEMAP) <IMG SRC="willer.gif" USEMAP="#miamappa">
2. Si definisce la "mappa" (con il tag MAP) <MAP NAME="miamappa"> <AREA SHAPE="rect" COORDS="55,25,100,70" HREF="kit.html"> <AREA SHAPE="rect" COORDS="125,25,160,70" HREF="tiger.html"> <AREA SHAPE="rect" COORDS="165,25,220,70" HREF="tex.html"> <AREA SHAPE="rect" COORDS="80,75,125,125" HREF="carson.html"> </MAP>
NB: Come si fa a conoscere le coordinate?
Gena - a.a. 2004/2005 Web Design 48
HTML: image mapSi può caricare l'immagine con l'attributo ISMAP e poi leggere le coordinate sulla barra di stato, muovendosi con il mouse (NB: l'origine delle coordinate è in alto a sinistra): <A HREF="#">
<IMG SRC="willer.gif" ISMAP> </A>
NB: Gli strumenti di sviluppo (come Dream-weaver, FrontPage, ...) generalmente forniscono metodi per costruire automaticam. le mappe!
Gena - a.a. 2004/2005 Web Design 49
HTML: formLe form (moduli) sono un meccanismo per rendere interattiva una pagina Web, richiedendo informazioni (dati) all’utente e inviandole al server per l’elaborazione