Costruire un Sito Web - Gianmichele Falletto
annuncio pubblicitario
Costruire un Sito Web 3a Lezione: Martedì 13 Febbraio – HTML Comandi base – 2 parte Ripasso Tag I tags che formano la struttua di un documento HTML: <html></html> <head></head> <title></title> <body></body> Tags per la formattazione del testo <br> <font face=“TIPO_CARATTERE” color=“COLORE_IN_INGLESE” size=“VALORE_DA_1_A_7”></font> Ripasso Tag - continua Tags per la formattazione del testo (continua) <h1></h1> TITOLO <h2></h2> SOTTOTITOLO <p></p> PARAGRAFO (attenzione che l’opzione SIZE del tag FONT influenza la dimensione del testo di un PARAGRAFO mentre non influenza la dimensione del testo di un TITOLO o di un SOTTOTITOLO; le opzioni FACE e COLOR invece hanno effetto su tutti e tre!) Grassetto: <b></b> Corsivo: <i></i> Sottolineato: <u></u> Esercizio 1 Creare una cartella con nome Lezione3 sul desktop Al suo interno si vogliono creare due documenti HTML Il primo documento HTML deve essere chiamato A.htm e può essere creata a piacere, con l’unica condizione che deve contenere tutti i tags presentati nella scorsa lezione Il secondo documento HTML deve essere chiamato B.htm e deve avere la seguente struttura (continua) B.htm 4, Arial, Rosso 4 spazi titolo 1 spazio grassetto 4 spazi Grassetto e corsivo 4 spazi Corsivo, 5, Verdana, Verde B.Htm (continua) 4 spazi sottolineato 4 spazi Sottolineato, corsivo, grassetto 4 spazi 4 spazi Comic Sans MS, Arancio 6, Helvetica, Blu Altri tags: cambiamo lo sfondo! Ora concentriamoci su due attributi che possiamo utilizzare con il tag <BODY> Come si può notare lo sfondo di default è bianco! È importante imparare come cambiare il colore dello sfondo (background) perché il colore bianco non sempre è adeguato <BODY BGCOLOR=“color">, dove color è un qualsiasi colore scritto in lingua inglese Esempio: cambiare il colore dello sfondo di una pagina HTML Inserire un’immagine come sfondo! Oltre a cambiare il colore di sfondo, possiamo decidere di inserire un’immagine come sfondo! Questa opzione è in alternativa a <BODY BGCOLOR=“color"> ATTENZIONE: Dobbiamo introdurre un discorso molto importante, anche per i tags che vedremo in seguito! Per poter usare correttamente un’immagine come sfondo dobbiamo specificare il percorso (dove si trova "fisicamente" l'immagine) <BODY BACKGROUND=“percorso_fisico_immagine"> <BODY BACKGROUND="swirlies.gif"> " swirlies.gif", significa che il browser cercerà l'immagine swirlies.gif nella stessa cartella in cui si trova il documento html Esempio: inserire un’immagine come sfondo di una pagina HTML Tutto funziona se… Perché questo comando funzioni dobbiamo avere la pagina HTML immagine_sfondo.htm e l’immagine swirlies.gif che si vuole utilizzare come sfondo, contenuti NELLA STESSA CARTELLA! E se l’immagine si trova in un’altra cartella? Se l’immagine che vogliamo utilizzare si trova in un’altra cartella dobbiamo specificare l’indirizzo fisico esatto Supponiamo che l’immagine swirlies.gif si trovi all’interno di una cartella Immagini contenuta all’interno della cartella MioSito E se l’immagine si trova in un’altra cartella? - continua In questo caso dobbiamo specificare l’indirizzo esatto La prima osservazione, importante, da fare è la seguente: la cartella Immagini è una sottocartella di MioSito (cioè contenuta dentro) Per specificare l’indirizzo corretto di swirlies.gif il ragionamento da seguire è il seguente Indirizzo di un’immagine Partiamo dalla cartella contenente la nostra pagina HTML: MioSito A questo punto dobbiamo inserire il percorso che conduce al file desiderato Come abbiamo detto la cartella Immagini (che contiene l’immagine swirlies.gif ) è una sottocartella (è contenuta dentro) la cartella MioSito Quindi il percorso che dobbiamo seguire da MioSito per raggiungere swirlies.gif è il seguente: aprire la sottocartella Immagini Questa operazione si indica, con il codice HTML, nel seguente modo: “immagini/swirlies.gif” Il corrispondente codice HTML da inserire sarà: <BODY BACKGROUND=" immagini/swirlies.gif” "> Altri casi di indirizzo Un’altra possibilità è la seguente: la cartella MioSito è contenuta (è sottocartella) della cartella Immagini Altri casi di indirizzo - continua Anche in questo caso il ragionamento deve sempre partire dalla cartella MioSito, poiché è sempre in essa che è contenuta la nostra pagina HTML L’unica variante di questo esempio riguarda il fatto che non dobbiamo aprire una sottocartella, bensì andare indietro di uno L’operazione di tornare indietro di uno, in HTML si specifica con ../ Costruiamo l’indirizzo esatto passo passo Noi siamo nella cartella MioSito Dobbiamo tornare indietro di una cartella quindi scriviamo ../ A questo punto ci troviamo nella cartella Immagini e troviamo la nostra immagine per cui scriviamo: ../swirlies.gif Riepilogando Abbiamo tre possibilità: L’immagine si trova nella stessa cartella della pagine HTML: scriviamo semplicemente il nome del file comprensivo di estensione (.gif, .jpg, .bmp etc.) L’immagine si trova in una sottocartella rispetto alla cartella dove si trova la pagina HTML: scriviamo il nome della sottocartella seguita dal nome del file: immagini/swirlies.gif L’immagine si trova in una cartella che si trova, nel percorso, prima della cartella che contiene la nostra pagina HTML: dobbiamo dire di tornare indietro (..) fino al punto corretto: ../swirlies.gif Altri esempi di percorsi Supponiamo che la cartella Immagini e la cartella MioSito siano entrambe contenute all’interno di una cartella SitoWeb Come fare? Ragionamento.. Dobbiamo sempre partire dalla cartella MioSito, perché è li che è contenuto il nostro documento HTML Sicuramente è necessario tornare indietro di uno per raggiungere la cartella Immagini ../ Ma tornando indietro di uno, ci troviamo all’interno della cartella SitoWeb Dalla cartella SitoWeb dobbiamo entrare dentro la sottocartella Immagini ../Immagini Ora siamo nella cartella immagini non ci rimane altro che indicare il file da usare ../Immagini/swirlies.gif Graficamente Torniamo indietro di uno “../” Entriamo nella cartella Immagini “../Immagini” Graficamente - continua Ora scegliamo l’immagine giusta “../Immagini/swirlies.gif” Il codice HTML da utilizzare sarà <BODY BACKGROUND=“../Immagini/swirlies.gif” "> Esempio con il codice HTML Esercizio Creare una pagina HTML con un’immagine di sfondo La pagina HTML è contenuta all’interno della cartella HTML La cartella HTML è a sua volta contenuta nella cartella SitoA La cartella SitoA è contenuta nella cartella SitoWeb L’immagine da utilizzare deve essere salvare nella cartella Immagini, che è una sottocartella di Risorse a sua volta sottocartella di SitoWeb Per capire meglio… SitoWeb Risorse SitoA Immagini HTML Immagine da usare Come sfondo Pagina HTML Questo è il punto di partenza Gli spazi Proviamo a scrivere il seguente codice HTML e vediamo cosa succede: Come facciamo ad inserire gli spazi?? Dobbiamo usare un piccolo trucco! In HTML uno spazio si indica con la seguente parola: &nbsp; Quindi dobbiamo riscrivere il nostro codice nel seguente modo Altri caratteri speciali &amp; &copy; &gt; &lt; &quot; &reg; &shy; &nbsp; & Copyright > < “ Marchio registrato spazio Centriamo il testo Il prossimo è un utilissimo piccolo tag ed è piuttosto intuitivo <CENTER></CENTER> Si può centrare una parola oppure tutta la pagina Tutto quello che si trova tra i tags <CENTER> sarà centrato Esempio Inseriamo un’immagine nella nostra pagina Ora vediamo come inserire immagini in una pagina web Il tag specifico per inserire un'immagine è questo: <IMG> Questo tag non richiede la chiusura! <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> Come si può vedere oltre a specificare il percorso dell’immagine, OPZIONI si possono specificare altre due opzioni, che riguardano la grandezza della foto: WIDTH = Larghezza in pixel HEIGHT = Altezza in pixel Se non specifichiamo queste due opzioni, il browser utilizza le dimensioni originali della foto Esempio Inserire una foto che si trova su Internet E se volessi inserire nella mia pagina Internet una foto che si trova su un altro sito Internet? 1) Salvo la foto e la inserisco all’interno del mio materiale, per poi pubblicarla insieme alle pagine 2) Indico l’indirizzo completo (INDIRIZZO ASSOLUTO) dell’immagine Esempio immagini Il codice da usare per inserire quest’immagine nella nostra pagina HTML è <IMG SRC="http://www.ansa.it/site/images/logo_ansa.gif" WIDTH=224 HEIGHT=49> Esercizio Creare una pagina HTML a piacere, con l’unico vincolo di utilizzare almeno una volta, i seguenti tags: <html></html> <head></head> <title></title> <body></body> <font></font> <h1></h1> <h2></h2> <p></p> <b></b> <i></i> <u></u> <BODY BGCOLOR=“color"> &copy; &gt; &lt; &nbsp; <IMG SRC> I links Ora esaminiamo alcuni tags utili per trasformare le nostre pagine Web, semplici e solitarie, in un sito Web vero e proprio Infatti, i TAGS per la creazione di pagine Web descritti fino ad ora rendono facile aggiungere delle pagine ad un sito, ma in quale modo si collegano le pagine fra loro? I links interni ed esterni Come abbiamo detto nella precedente lezione esistono due tipi di collegamenti Interni: sono collegamenti che ci permettono di spostarci da un punto ad un altro ALL’INTERNO DELLO STESSO DOCUMENTO HTML per funzionare hanno bisogno di un ancora, o meglio di una destinazione precisa all’interno del documento Esterni: sono collegamenti che ci permettono di spostarci dalla pagina HTML attuale verso un’altra pagina HTML oppure verso un altro sito web o, in generale, verso un’altra risorsa (pagina HTML, immagine, video, ecc.) che si trova al di fuori del documento HTML in uso Vediamo degli esempi pratici! B.Htm con links interni I links: tag <a> Per trasformare un normale testo in un ipertesto occorre applicare il tag <a> In questo modo creiamo un collegamento (link) I links sono testi speciali che, se cliccati, ci collegano ad un altro indirizzo, visualizzando il documento desiderato Esistono links interni al documento o collegati a un documento esterno I collegamenti interni I collegamenti interni ad una stessa pagina, devono utilizzare un punto di ancoraggio, ad esempio in prossimità del titolo, e quindi contenere il collegamento vero e proprio I collegamenti interni continua Fare clic qui Scorrendo verso il basso la pagina, vediamo che il testo a cui è stato applicato il collegamento, ha cambiato aspetto: è sottolineato e di colore blu Cliccando sul collegamento il browser ci porterà in corrispondenza del tag di ancoraggio, cioè Titolo 1 I collegamenti interni continua Il punto di ancoraggio si definisce con il tag <a> seguito dall’attributo name, ove inseriamo il nome, ad esempio sopra Esempio punto di ancoraggio: <a name = “sopra”> Il collegamento, invece, utilizza lo stesso tag <a>, ma deve contenere l’attributo href con il nome del punto di ancoraggio preceduto dal simbolo cancelletto (#) Quindi applichiamo il tag <a href=“#sopra”> all’ultimo testo presente nella pagina Il simbolo cancelletto (#) indica che ci stiamo riferimento ad un punto contenuto nel documento corrente Cosa succede? Nello stesso modo possiamo creare links ad altre pagine del sito, oppure ad altri siti, sia sulla nostra macchina che situate su server distanti da noi occorre solo specificare esattamente il percorso Link esterni All’interno della pagina default.htm abbiamo inserito un link ad un’altra pagina Come si può notare è sparito il cancelletto (#) Ricordiamoci di non fare confusione: <a href=“#qualcosa”>TESTO</a> collegamento interno al documento! Deve esistere in qualche punto dello stesso documento la corrispondente ancora che sarà <a name = “qualcosa”>TESTO </a> <a href=“pagina.htm”>TESTO</a> collegamento esterno Link di altre risorse E’ possibile linkare alla pagina web file di ogni tipo L’importante è specificare l’estensione corretta ricordando che solo alcuni tipi di files possono essere visualizzati direttamente dal browser In caso contrario viene avviato il programma predefinito per gestire tali files Il tag che realizza tutto questo è sempre: <a href=“URL risorsa”>TESTO</a> Dove URL sta per Universal Resource Locator. E' un termine un po' altisonante, che significa: indirizzo Ogni risorsa (pagina internet, immagine, video, suono ecc.) ha un URL Esempi di URL: http://www.ansa.it http://www.ansa.it/site/images/logo_ansa.gif B.htm http://www.ansa.it/site/notizie/videonews/ansalive/playlist/g200702122100.asx Esempio di collegamento ad un’immagine Collegamento ad altre pagine sul web Come eseguire collegamenti a pagine o siti che si trovano in rete? Il prefisso da utilizzare è http:// Questo prefisso deve essere inserito all’interno dell’attributo href del tag <a> e indica che il file che stiamo cercando si trova all’indirizzo che segue, su un server diverso dal nostro Esempio: <a href = http://www.libanore.it>Visitate il mio sito</a> E se volessi inserire un collegamento ad un e-mail? Un link ad un indirizzo email funziona nello stesso modo Possiamo usare un indirizzo email come se fosse l'indirizzo di una pagina web <A HREF="mailto:[email protected] ">Mail!</A> Esempio Oltre ai links alle parole, possiamo mettere i links alle immagini Possiamo inoltre usare un'immagine come link, se vogliamo Usando il link d'esempio 'Go to Falletto.it!' possiamo semplicemente sostiture la parola Falletto.! con il tag <IMG> <BODY> Go to <A HREF="http://www.falletto.it/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A> </BODY> Oltre ai links alle parole, possiamo mettere i links alle immagini - continua Una domanda frequente è questa: come posso togliere il bordo attorno all'immagine quando è un link? <BODY> Go to <A HREF="http://www.falletto.it/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A> </BODY> Cambiare colore ai links Il browser ha configurato di default i colori del testo, dei links, dei links attivi e dei links visitati. Sono questi... Il testo è nero I links sono blu I links attivi sono rossi I links visitati sono viola E' possibile cambiarli se è necessario Si può cambiare la configurazione di default per l'intero documento nel tag <BODY> <BODY BGCOLOR="#00000" TEXT=“green" LINK=“red" VLINK=“cyan" ALINK=“yellow"> Qualcosa di divertente </BODY> Con questo comando abbiamo che: Il testo è verde I links sono rossi I links attivi sono celesti I links visitati sono gialli Altri tags di formattazione Un altro utilissimo strumento è il tag LIST. Ci sono liste ORDERED (liste ordinate di paragrafi, come ad esempio l'indice di un libro, in cui le voci dell'elenco sono precedute da un numero progressivo) e UNORDERED (liste di paragrafi in cui l'ordine non ha importanza e in cui le voci dell'elenco sono precedute da un simbolo). Questa è una lista ORDERED 1. 2. 3. 4. qualcosa qualcosa qualcosa qualcosa di di di di grande piccolo corto alto qualcosa qualcosa qualcosa qualcosa di di di di rosso blu vecchio nuovo Questa è una lista UNORDERED • • • • Liste UNORDERED Costruiamo una lista non ordinata Come prima cosa scriviamo: Aggiungiamo il tag da utilizzare per creare lista UNORDERED <UL></UL> E’ un TAG intuitivo: UL=UNORDERED LIST Liste UNORDERED Aggiungiamo, compresa tra i TAGS <UL>, la prima voce dell’elenco utilizzando un altro TAG: <LI> E’ un TAG che non richiede chiusura Liste UNORDERED - continua Aggiungiamo qualche altra voce: Come si costruisce una lista ordered ? Facile! Basta sostituire il tag <UL> con <OL> D’altronde OL = ORDERED LIST Esempio ORDERED LIST La linea orizzontale Un altro tag interessante da utilizzare è la linea orizzontale Linea orizzontale - continua Si possono specificare linee orizzontali di diverse lunghezze: Linea orizzontale - continua E' possibile anche definire lo spessore E si può decidere di renderla più spessa TAG per inserire un commento Un commento può essere inserito in qualsiasi punto del documento e il browser ignorerà qualsiasi cosa dentro questo tag Si possono inserire messaggi nascosti, note che possono servire, o scrivere un messaggio che può essere utile a chi legge il codice della tua pagina Il commento deve cominciare con <!-- e terminare con --> Si possono inserire dei tag html dentro ad un commento e verranno ignorati Il browser ignorerà qualsiasi cosa fino a --> Esempio di commento Compito per “casa” Creare un sito Internet a proprio piacimento composto da 3 pagine Vincoli: Le tre pagine devono essere tra di loro collegate, in modo tale che da una pagina posso sempre accedere ad una delle altre due Nella costruzione del sito (e NON di ogni pagina) e’ necessario utilizzare tutti i TAGS visti durante il corso (commento compreso) E’ importante inserire una foto di Scarlett Johansson ;-) La prossima volta commenteremo insieme le vostre soluzioni, valutando pregi e difetti (ed è per questo che è importante inserire i commenti!)
