Intro Html by elisa casari

Web design

Obiettivo: APPRENDIMENTO

DEL LINGUAGGIO HTML di base (HYPERTEXT MARKUP LANGUAGE)

Seconda parte – I Frame e le Tabelle

PREMESSA: In questa lezione termineremo il percorso intrapreso nella seconda

lezione, approfondendo con ulteriori “TAG” di “base” la nostra conoscenza della programmazione in HTML. Inoltre impareremo due importanti nozioni, indispensabili per un creatore del web, ossia sapere cosa sono i FRAME e conoscere al meglio l’utilità delle TABELLE. (Argomenti che verranno ripresi non appena ci addentreremo nella conoscenza dell’ editor Fronte Page.) A questo proposito volevo precisare che se siete sprovvisti di tale programma vi posso dare il cd che installerete per riuscire a testare le vostre pagine web ed il Sito Finale. Ricordo infine che lo scopo finale “sottointeso”, per tale corso è di riuscire a creare un Sito Web! ,da soli passo passo, lezione dopo lezione, che abbia tutte le caratteristiche corrette e basilari per essere un vero e proprio sito degno di essere considerato tale!.(TUTTI SONO CAPICI DI FARE QUATTRO PAGINE, E CHIAMARLE “SITO”, ma veramente pochi riescono a realizzare pagine in maniera corretta!)

Riprendiamo il discorso con un veloce riepilogo:

I TAG SONO I CODICI CHE VENGONO UTILIZZATI PER IL LINGUAGGIO HTML. (VENGONO CHIAMATI ANCHE MARCATORI, DEFINISCONO LE CARATTERISTICHE DI STILE, INDICANDO IL PUNTO D’ INSERIMENTO DELLE IMMAGINI, E TRASFORMANDO PARTE DI TESTO IN COLLEGAMENTI IPERTESTUALI. 1

Web design

Quindi fino ad ora ci siamo soffermati su TAG che Definiscono le Caratteristiche di Stile del Testo, e a questo punto ne vediamo altri di Base per poi passare ai TAG d’inserimento d’immagini e ai TAG che trasformano immagini e testo in collegamenti ipertestuali (LINK) Ripartiamo: ESEMPIO di struttura base: Io riparto da qui, ma voi utilizzate come punto di partenza la vostra pagina web “index.html”. <HTML> <HEAD><TITLE>Il Mio Primo Sito</TITLE></HEAD> <BODY>Questa che sto creando sarà la mia prima pagina web! Che emozione! voglio proprio vedere di cosa sono capace!! </BODY> </HTML> Proviamo molto semplicemente ora a “formattare il nostro testo”. A questo proposito mi soffermo su questo termine, ossia “formattare”, che nel contesto attuale, indica “abbellire” il nostro testo, con caratteri speciali, con il sottolineato, centrandolo ed evidenziandolo. Per Il Grassetto: (Il significato della B sta per BOLD) Il TAG usato è inserite il testo in questa posizione, e chiudete subito il TAG in questo modo (tra il TAG di apertura – testo e chiusura non DEVE esserci spazio)

Web design

Andiamo quindi ad applicarlo immediatamente al nostro codice base della Index: (supponiamo di volere inserire il grassetto nella Parte Iniziale della nostra pagina) <HTML> <HEAD><TITLE>Il Mio Primo Sito</TITLE></HEAD> <BODY>Questa che sto creando sarà la mia prima pagina web! Che emozione! voglio proprio vedere di cosa sono capace!! </BODY> </HTML> Ovviamente rimane intesto che aprirò la mia di pagina web e voi la vostra “index.html”, poi da visualizza e HTML, andrò a modificare il mio codice, salverò ed aggiornerò la mia pagine per vedere il risultato modificato!. Velocemente vediamo ora il TAG per il corsivo , ed il TAG per il sottolineato

TESTO (Il significato della I sta per ITALIC) TESTO ( Il significato della U sta per UNDERLINE)

Quindi ora riprendiamo la nostra Index, e procediamo come sopra per il TAG del “Grassetto” alla modifica sempre del nostro testo… <HTML> <HEAD><TITLE>Il Mio Primo Sito</TITLE></HEAD> <BODY>Questa che sto creando sarà la mia prima pagina web! Che emozione! voglio proprio vedere di cosa sono capace!! </BODY> </HTML> Notate bene!!, che come accennavo anche nella lezione precedente i TAG si chiudono a partire dall’ultimo che viene aperto!

Web design

Ci siamo!, bene ora passiamo oltre! Ora l’ALLINEAMENTO! Per centrare il testo utilizzo il TAG <center>testo</center> Applichiamolo al nostro codice della Index: <HTML> <HEAD><TITLE>Il Mio Primo Sito</TITLE></HEAD> <BODY><Center>Questa che sto creando sarà la mia prima pagina web! Che emozione!</Center> voglio proprio vedere di cosa sono capace!! </BODY> </HTML> Faccio ora brevemente un carrellata su altri TAG per la formattazione, sui quali potete lavorare poi per compito a casa, sperimentandoli ed impratichendovi sempre piu’. Lampeggiante (scritta) spazio Il font(carattere) piu’ grande Il font(carattere) piu’ piccolo Allineamento del testo(a seconda dei casi (e’ ovvio che metterò o left, o right,o center a seconda che voglia un’allineamento a destra,sinistra o centrato) Paragrafo

Passiamo ora all’inserimento dello Sfondo- che potrà essere prima un “colore” , poi potremo inserire un’ immagine. Avevamo creato delle pagine, dove in ciascuna delle quali è stato messo il titolo e spero anche una breve descrizione dell’ immagine che sarebbe stata inserita! Dico spero, PERCHE’ nella seconda lezione avevo detto di sperimentare al meglio il più possibile quanto appreso sino ad ora! Prendiamo ora la prima pagina alla quale la nostra Index Si deve Collegare! 4

Web design

Nel mio caso “Sfondo uno” come potete avere notato nei file allegati alla lezione precedente!, e che riprendo ora naturalmente!: Prendo il mio codice: <HTML> <HEAD><TITLE>Sfondo uno</TITLE></HEAD> <BODY><Center>Questo che state per vedere è il mio primo sfondo, che desidero mostrarvi per bellezza e semplicità, il suo nome è: </Center> Farfalle </BODY> </HTML> ORA VI INSERISCO IL TAG PER LO SFONDO COLORATO:

A QUESTO PUNTO!!, DA SAPERE IN OGNI CASO SIA CHE IO DECIDA DI PROCEDERE ALLA STESURA DI UN SITO E SIA CHE IO DECIDA DI STENDERLO E PROGETTARLO NON USANDO CODICI DI PROGRAMMAZIONE…SONO I COLORI VGA: I COLORI VGA: OGNI COLORE HA UN SUO CODICE CHE PRENDE IL NOME DI CODICE ESADECIMALE,(COMPOSTO DA IL SIMBOLO# , DA LETTERE E DA NUMERI), CHE VEDREMO MEGLIO QUANDO FAREMO IL PROGRAMMA DI GRAFICA PSP5. SIGNIFICA CHE AD OGNI COLORE O SFUMATURA DELLO STESSO O TANALITA’ CORRISPONDERA’ SEMPRE UN CODICE . PER I COLORI Più FORTI ANCHE UN NOME PER IL RISPETTIVO “TAG” RIPORTO QUI UNA TABELLA CON I PIU’ FREQUENTI CODICI ESADECIMALI PER COMINCIARE SUBITO A COLORARE LE NOSTRE PAGINE! ED ANCHE IL TESTO…VOLENDO!

PREMESSA: In questo corso voglio precisare che “progettare per il web!”, significa non fare “necessariamente” ciò che si vuole sulla tela del foglio “web”, perché? Direte voi?. Il perché è semplice…, possiamo di certo fare e disfare le nostre pagine a nostro piacimento, ma con il rischio che forse l’utente del web, non riesca a visualizzare esattamente ciò che faccio e vedo io a schermo da casa mia, visto che il nostro “visualizzatore di pagine web” ossia Internet Explorer o Nescape Navigator, o comunque qualunque altro browser potrebbe non avere le caratteristiche necessarie che permettano la mia stessa visualizzazione. Quindi è bene e fondamentale imparare la “semplicità” in maniera che io abbia la 5 garanzia che ciò che sto facendo anche “pinco pallino”, con il browser più

Web design

sgangherato ed obsoleto lo possa vedere! Questa è una delle ragioni per le quali vi insegno subito il linguaggio html, i tag ed i codici esadecimali, perché è un “linguaggio” che qualsiasi browser potrà permettermi di vedere in maniera inalterata! BLACK NERO SILVER ARGENTO GRAY GRIGIO SCURO WHITE BIANCO MAROON MARRONE RED ROSSO PURPLE VIOLA FUCHSIA VIOLA ACCESO GREEN VERDE LIME VERDE ACCESO OLIVE VERDE OLIVA YELLOW GIALLO NAVY VIOLA SCURO BLUE BLU COBALTO TEAL CELESTE SPORCO AQUA BLU PRIMARIO

#000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FF0000 #000080 #0000FF #008080 #00FFFF

METTIAMO IN PRATICA! <HTML> <HEAD><TITLE>Sfondo uno</TITLE></HEAD> <BODY><Center>Questo che state per vedere è il mio primo sfondo, che desidero mostrarvi per bellezza e semplicità, il suo nome è: </Center> <BODY BGCOLOR=”#800080”> Farfalle </BODY> </HTML> Quindi questo TAG sarà <BODY BGCOLOR=”#800080”> 6

Web design

OVVIAMENTE BASTERA’ INSERIRE IL COLORE CHE PREFERIAMO TRA LE VIRGOLETTE. POTREMO ANCHE UTILIZZARE IL NOME DEL TAG E NON IL CODICE ESADECIMALE PER I COLORI PIU’ COMUNI COME QUELLI IN TABELLA SOPRA VEDIAMO… Quindi questo TAG sarà <BODY BGCOLOR=”BLACK”> NELLA CARTELLINA METTERO’ UN ESEMPIO DI ENTRAMBI I CASI! Per il testo se volete provare il tag sarà <BODY TEXT=”#000000”>(esempio) Ora proviamo con un’immagine 1. bisogna assicurarsi che la mia immagine sia dentro alla mia “local folder” 2. pensare che se voglio mettere un’immagine di sfondo essa dovrà essere leggera e non affaticare l’utente nella lettura; 3. cercare di non appesantire il mio sito con immagini troppo grandi che rischino di far innervosire il mio utente, scoraggiandolo e rischiando che il sito alla fine non venga visto! 4. quindi prendiamo una piccola immagine (magari andando su google e prendendo ora solo per provare una piccola piccola immagine, con colori pastello, che mi serva da esempio per l’inserimento dello sfondo, poi le prossime lezioni vedremo come creare uno sfondo ad arte con il programma di grafica!) Il TAG è il seguente: <BODYBackround=”sfondo.jpg”> <HTML> <HEAD><TITLE>Sfondo uno</TITLE></HEAD> <BODY><Center>Questo che state per vedere è il mio primo sfondo, che desidero mostrarvi per bellezza e semplicità, il suo nome è: </Center> <BODYBackround=”sfondo.jpg”> Farfalle </BODY> </HTML>

Web design

Io ho messo sfondo.jpg perché la mia immagine si chiama così, ma voi mettete il nome del vostro file immagine, completo e preciso in termini di maiscuole e minuscole con anche l’estensione (appunto.jpg, o jif, o png) Ora ci resta da impare per finire questo capitolo dedicato all’ Html il codice per l’ inserimento di un’immagine non di sfondo, ed il TAG per il collegamento ipertestuale: immagine:

<img src=”farfalla.jpg”> posso dare le dimensioni servendomi di : width e haigth quindi avro’: <img src= “farfalla.jpg”> width=200 height=200 border=2>

ripeto: avro’ tra le virgolette il nome della mia immagine, già contenuta all’interno della mia “local folder” Nel caso in cui non ci sia la mia immagine avrò una quadrato con una crocetta rossa e nel caso l’immagine non possa essere visualizzata avrò un altro simbolino con figure geometriche posto in alto nel punto in cui dovrei vedere la mia immagine! Nel secondo caso, invece ci sono Width/height e border, che stanno ad indicare la lunghezza dell’immagine l’altezza e il bordo, nel caso voglia dargli delle dimensioni particolari! Come si vedono le dimensioni di un’immagine? Semplice basta posizionarsi sopra l’icona della stessa e verranno visualizzate automaticamente le dimensioni oppure le visualizzerò già in automatico sotto senza posizionarmici sopra con il mouse.

Web design

Provate: primo caso <HTML> <HEAD><TITLE>Sfondo uno</TITLE></HEAD> <BODY><Center>Questo che state per vedere è il mio primo sfondo, che desidero mostrarvi per bellezza e semplicità, il suo nome è: </Center> <BODYBackround=”sfondo.jpg”> Farfalle

Secondo caso: <HTML> <HEAD><TITLE>Sfondo uno</TITLE></HEAD> <BODY><Center>Questo che state per vedere è il mio primo sfondo, che desidero mostrarvi per bellezza e semplicità, il suo nome è: </Center> <BODYBackround=”sfondo.jpg”> Farfalle

<img src= “farfalla..jpg”> width=200 height=200 border=2> </BODY> </HTML> Come avrete di certo notato questi TAG non hanno una chiusura perchè servono unicamente ad inserire degli oggetti, e devono essere però sempre messi all’interno del TAG “Body” Altra cosa che potreste aver notato è qualche riga di codice in più rispetto al codice che abbiamo inserito nell’html, il che sta semplicemente a siginificare che ogni qualvolta il browser visualizza le nostre pagine inserisce all’interno del codice ossia nella parte superiore una stringa che sta ad indicare che siamo in

Web design

presenza di documenti HTML e la maniera in cui è stato creato/generato: La scritta dovrebbe essere di questo tipo: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0 Transitional//EN"> <META content="MSHTML 6.00.2900.2769" name=GENERATOR> (non è detto però che venga obbligatoriamente visualizzata dipende dalla versione del vs.browser) Ora potete mettere ordine nelle vostre idée, cercare di inserire delle immagini all’interno di ciascuna delle vostre pagine, e lo sfondo rispettivo, in maniera che anche la index abbia uno sfondo colorato e le pagine siano complete, prima di cominciare a collegarle una ad una Andiamo dalla Index e visualizziamo l’ HTML: (questo è il mio, come da esempio allegato) Per rendere linkabile una scritta facciamo in questo modo: osservate il codice: <Html> <Head><Title>Il Mio Primo Sito</Title></Head> <Body><BODY bgcolor=”#ff0000”><center>Questa che sto creando sarà la mia prima pagina web! Che emozione! Voglio proprio vedere di cosa sono capace!! <center> Queste pagine traterranno una breve carellata di sfondi per il computer <A HREF= “sfondo uno.html”>Sfondo uno </A> <A HREF= “sfondo due.html”>Sfondo due </A> <A HREF= “sfondo tre.html”>Sfondo tre </A> <A HREF= “sfondo quattro.html”>Sfondo quattro </A> </Body> </Html> Attenzione alla sintassi!, e se avete difficoltà guardate il mio veloce esempio in cartellina! (index.html)

Web design

Passiamo ora alle pagine del sito nelle quali voglio fare un menù che non rimbalzi, ossia per una corretta navigabilità cercherò di riportare questo menù della index già linkato in codice, nelle pagine: sfondo uno, sfondo due, sfondo tre, sfondo quattro, in maniera da riuscirmi a spostare da qualsiasi parte sempre ovunque mi trovi! Prendete quindi il codice HTML della index e copiate ed incollate dal seguente punto che vi evidenzio, poi subito sotto vedrete che ho aggiunto un link che riporti alla index: <A HREF= “index.html”>torna allaIndex</A> quindi avremo: <Html> <Head><Title>Il Mio Primo Sito</Title></Head> <Body><BODY bgcolor=”#ff0000”><center>Questa che sto creando sarà la mia prima pagina web! Che emozione! Voglio proprio vedere di cosa sono capace!! <center> Queste pagine traterranno una breve carellata di sfondi per il computer <A HREF= “sfondo uno.html”>Sfondo uno</A> <A HREF= “sfondo due.html”>Sfondo due</A> <A HREF= “sfondo tre.html”>Sfondo tre</A> <A HREF= “sfondo quattro.html”>Sfondo quattro</A> <A HREF= “index.html”>torna alla Index</A> </Body> </Html> Attenzione: posizionate tale codice in “verde” in una parte qualsiasi della vostra pagina, ma per meglio fare sarebbe meglio in basso, subito dopo tutto il codice che avete all’interno del TAG “Body”.

Web design

Ora proviamo a linkare un’immagine: Prendiamone una dalla prima pagina , sempre “sfondo uno”, è per me: <Html> <Head><Title>Sfondo uno</Title></Head> <BODY bgColor="COCOCO"> <CENTER>Questo che state per vedere è il mio primo sfondo, che desidero mostrarvi per bellezza e semplicità, il suo nome è:</CENTER> Farfalle <a href="farfalla.jpg"><img src="farfalla.jpg"widht=120 height=100 border=2></a> <A HREF= "sfondo uno.html">Sfondo uno</A> <A HREF= "sfondo due.html">Sfondo due</A> <A HREF= "sfondo tre.html">Sfondo tre</A> <A HREF= "sfondo quattro.html">Sfondo quattro</A> <A HREF= "Index.html">torna alla Index</A> <Body> </Body> </Html> Notate che la parte evidenziata è il linkaggio all’immagine: farfalla.jpg Bene: per il momento è chiaramente chiuso il discorso Html, che abbiamo direi ampiamente estrapolato nelle sue essenziali peculiarità! Per la costruzione di un sito completo di link ed immagini linkabili e non. Per questioni di pesantezza non ho estrapolato le pagine degli “sfondi due,tre e quattro”, ma ho cercato di mettervi l’esempio relativo alla index e ad una delle pagine poiché era l’essenziale per capire. E’ senz’altro stata una lunga lezione, e per questo direi che necessità di due settimane per imparare e sperimentare correttamente il tutto.

Fine prima parte! 12

Web design

Seconda Parte:

Tabelle e Frame

Spesso succede che si mettano sulla pagine web, delle immagini, testo e qualsiasi altra cosa, come se stessimo stendendo un file di word!, NIENTE DI PIU’ SBAGLIATO! Infatti tutto ciò che si trova sopra alla mia pagina è come una velina sopra alla scrivania, qualsiasi cosa, potrebbe spostarla. Il risultato…?, pessimo antiestetico, ed allucinante!! Per evitare tutto questo, dicevo nella prima lezione, è importante progettare il tutto su carta, in maniera da avere sott’occhio dove andrà il logo, dove metterò le scritte, le descrizioni, i menu, le immagini ecc…ecc…, ma non è solo il primo passo!. 1. Devo intabellare tutti i miei oggetti; 2. Quindi prendo il mio blocco notes nel quale ho steso lo schizzo del mio sito; 3. Procedo a tracciare delle linee come se ciascun oggetto debba stare all’interno di celle del tipo: di Excel 4. Poi quando partiremo con la stesura delle nostre pagine web in Fronte Page la prima cosa che faremo sarà riportare questa struttura tabellare o griglia all’interno della mia pagina in maniera che successivamente io vi inserisca i miei oggetti ed il mio testo. Un tempo invece non si utilizzavano le tabelle, venivano utilizzati i Frame. I frame non sono altro che pagine all’interno di una pagina: Facciamo un’esempio andando sul seguente sito : http://web.tiscali.it/ingenieria/ In questo sito vedrete alla vostra sinistra una barra con scorrimento dall’alto in basso per i menu principalmente, ed al centro appena cliccherete su di un menù qualsiasi vedrete che apparirà una seconda barra direi “centrale”, per lo scorrimento del testo senza dovere scorrere verso il basso e senza perdere di vista i menu! I problemi di un sito fatto con i frame: Molti moltissimi siti web attualmente pubblicati sulla rete presentano caratteristiche che ne limitano o addirittura impediscono una corretta catalogazione da parte dei motori di ricerca. 13

Web design

Una di queste caratteristiche è indubbiamente l’errata realizzazione dei FRAME. Infatti i motori di ricerca si comportano in maniera molto simile ai vecchi browser testuali in uso diversi anni fa,ed ignorano molte caratteristiche tecniche avanzate cominciando dai frame. Significa che molti motori di ricerca, saltano piè pari i tag dei frame e tutti i loro contenuti compresi gli url, con il rischio di mandare in pallone l’intero sito! Quindi sta alla Web Master decidere il dafarsi, se servirsi o meno di tali Frame, che senz’altro sono utilissimi per non perdere nulla di vista nella visualizzazione della pagine ma poi…hanno questi direi non trascurabili dettagli che ne impediscono la cosciente realizzazione. In ogni caso, per ogni regola esiste anche la sua eccezione, che sarebbe quella di inserire dei tag di codice html all’interno di frame in maniera tale da comunicare con il browser che non riesce ad aprire questi frame. Non tratterò questo, adesso è ovvio, ma pensate fin d’ora se vorrete o meno utilizzarli nei vostri siti, in maniera tale che più avanti quando sarete anche più pratici vi spiegherò come sarà il caso di procedere!