 |
Registrare un dominio, i primi passi, le tabelle e i testi
|
Come visto in precedenza fu scelto il dominio "Mondodellanotte" e lo abbiamo registrato come Dominio di secondo livello
( www.mondodellanotte.com) Per fare cio' ci siamo rivolti ad un "Provider" che si e' incaricato di registrarlo presso gli enti competenti dopo aver controllato che il nome scelto fosse stato libero ossia non assegnato gia' ad altri. Il provider ci ha poi riservato lo spazio sui suoi server, dove andremo ad inserire le pagina HTML e ci ha anche riservato 5 caselle di posta sul suo server della posta. Caselle che andremo a definire tipo info@monodellanotte.com Avremmo anche potuto registralo come Dominio di terzo livello (www.ospitante.mondodellanotte.com. Come ospitante vi sono molti siti che ospitano gratuitamente i domini richiedendo in cambio l'esposizione dei banner pubblicitari. Per essere attivo il sito deve risiedere su di un server collegato alla "rete" e quindi la sua struttura, una volta terminata e testata deve essere trasferita su di esso. La maggior parte dei provider offrono le apposite tools per eseguire il trasferimento altrimenti ci si munisce di un Client FTP (File Transfer Protocol) reperibile anche gratis in rete. IL PROGETTO ED IL CODICEPer iniziare dobbiamo stendere un progetto relativo al sito che andremo a realizzare.Il contenuto di esso sara' determinato dalla tipologia dello stesso e quindi la scelta del logo, delle pagine, dei link, delle fotografie, dei menu di navigazione, dei contenuti, dei colori, dei linguaggi da affiancare. Il logo e' cio' che identifica il sito ed e' la prima cosa che il visitatore vedra'. Un logo brutto, dalla grafica scadente fuori tema non invogliera' certo la visita e cosi' dicasi per i contenuti. Una volta definito lo scopo del sito si procedera' con l'analisi della sua struttura. Case sensitive ossia Maiuscole o minuscole ?I server sono case-sensitive e quindi distinguono le minuscole dalla maiuscole.Usare per le cartelle e per i relativi link sempre nomi in minuscolo. Fanno eccezione i link ai siti web dove www.pippo.com e' uguale a WWW.PIPPO.COM ma non funzionerebbe questo tipo di link: www.pippo.com/menu/apertura.htm e www.pippo.com/Menu/apertura.htm Lo stesso dicasi per i TAG dove, anche se lo HTML non fa distinzione tra maiuscole e minuscole conviene scriverli sempre in minuscolo poiche' ad esempio, lo "spazio" tra i caratteri non funzionerebbe se scritto  
LA PAGINA HTML - Il DTDCome gia' accennato la parte iniziale della pagina HTML e' costituita dal DTD Document Type Definition che definisce nel nostro caso la validita' del documento in base alle specifiche del W3C.Faremo uso del DTD Transitional meno restrittivo del tipo Strict.
LA PAGINA HTML - L' HeaderDopo il DTD il primo tag valido e' <html> che determina l'inizio della pagina che finira' con </html>La prima riga contiene altre direttive del W3 e comunque va lasciata come e'. Le righe che seguono a partire dal tag <head> e terminano con il tag </head> racchiudono l'Header della pagina.
GENERATOR - Puo' essere omesso description - keyword - category - identifier - author - sono relativi al sito distribution - rating - robots - possono essere lasciati tal quali link rel - carica il foglio di stile alvin.css , residente in root - I seguenti non ci sono ma potrebbero essere in altre configurazioni <link rel="stylesheet" href="../../alvin.css" type="text/css" /> Chiama il CSS da una sottocartella <script type="text/JavaScript" src="../../script/criptxor.js"></script> Questo carica routine javascript contenuta in criptxor.js. <title> contiene il titolo della pagina e rispecchia le sue caratteristiche. E' utile ai fini dei motori di ricerca. LA PAGINA HTML - Il BODYIl codice contenuto tra i tag <body> e </body> e' cio' che verra' visualizzato dal browser ed e' la parte principale della pagina HTMLIl mondodellanotte, per ora, iniziamo a rappresentarlo con una pagina di apertura molto semplice che chiamera' poi una seconda pagina in cui presenteremo il sito e visualizzeremo alcune fotografie ed un filmato. La pagina di apertura la possiamo rivedere qui: VAI ALLA PAGINA DI APERTURA Dopo il DTD e l'Header che finisce con il tag <title> la prima istruzione relativa al tag body <body bgcolor> specifica quale sara' il colore dello sfondo , non solo della pagina ma di tutto lo schermo e cio' perche' al momento la pagina non e' delimitata e quindi occupa tutto lo spazio disponibile. I colori e la composizione dello sfondo dello schermo<body bgcolor="#132033"> VEDI COLORE DELLO SFONDO DELLO SCHERMOAbbiamo scelto un colore vicino al blu molto scuro che viene rappresentato con il codice ESADECIMALE corrispondente ai valori R.G.B. ed e' formato da 3 byte per un totale di 24 bit ossia una palette di 16 milioni di colori. Ricordiamo che i colori di base sono:  Rosso (#ff0000)  verde (#00ff00 )
 blu (#0000ff)Ogni colore viene rappresentato da un valore esadecimale che va da 0 a FF e la combinazione di questi valori restituisce una cromia ricca di 16 milioni di colori. Lo sfondo puo', oltre che da un colore, essere composto da una trama o da una o piu' immagini. Vediamo alcuni esempi di sfondo : Sfondo composto da una tramaPer comporre uno sfondo composto da una trama o da una sfumatura o altro basta una riga formata da pochi pixel o una figura geometrica che , con apposito comando, verra' replicata fino a completare lo sfondo della pagina. Il formato della figura per lo sfondo puo' essere sia JPG che GIF o PNG.NOTARE CHE le sfumature o immagini complesse devono essere dimensionate alla pagina del sito e NON allo schermo poiche' il risultato sarebbe inaccettabile. Per realizzare uno sfondo dimensionato alla larghezza del sito e non dello schermo e' sufficiente una riga di pochi pixel che rappresenti quanto si vuole ottenere. Useremo la seguente immagine in formato GIF per realizzare lo sfondo
Come si puo' notare lo sfondo occupa non la grandezza schermo ma solo la dimensione del layout del sito e per fare cio' ci dobbiamo avvalere di una semplice routine che utilizza i CSS mentre lo sfondo dello schermo e' bianco come lo e' di default. <style type="text/css"> <body bgcolor="#132033"> ( il colore e' comunque a piacere ) SFONDO SFUMATO SU BLU SCURO E qui la rotine per ottenere quanto visto: <style type="text/css"> body { background-image: url("sfondo.gif"); background-position:center; background-repeat: repeat-y } </style> <body bgcolor="#132033"> A seguire vediamo uno sfondo schermo improponibile poiche' formato da riga sfumata ed uno formato da texture che ripetendosi riempira' lo schermo nel modo corretto. SFONDO SCHERMO IMPROPONIBILE SFONDO SCHERMO CON TEXTURE Il fatto di usare una texture come sfondo schermo non ci impedisce di applicare il layout del sito. SFONDO SCHERMO CON TEXTURE E SFUMATURA Come si puo' leggere dal codice , oltre al DTD, si fa uso dei CSS ma di cio' se ne parlera' in seguito. Per ora pensiamo solo al HTML non prima di aver spiegato il tag <!-- --> entro cui il codice non viene sia visualizzato che interpretato e dove si possono scrivere commenti ecc. Torniamo al nostro Mondo della Notte Per ora abbiamo realizzato lo sfondo della schermo con colore unico e quindi dovremo caricare le prime informazioni relative al sito ossia il logo, le scritte ed i link. Il LOGO e' importante poiche' deve rispecchiare lo stile e lo scopo del sito e la sua realizzazione va curata nei particolari. Se si sceglie una fotografia in formato JPG essa deve essere correttamente elaborata e "alleggerita" con gli appositi programmi di elaborazione foto. Un esempio e' la fotografia che rappresenta il logo del sito "Il mondo della notte" che in condizioni pre-elaborazione occupa circa 450 Kbyte mentre dopo ne occupa 67. Cio' perche' le foto "pesanti", e questo vale per tutte, rallentano la visualizzazione del sito contribuendo al suo insuccesso.. Per la prima pagina del nostro sito abbiamo pensato ad una fotografia che rispecchi l'immagine della notte con una scritta classica che si integri con essa. Ma come inserire foto, scritte ecc , in modo che occupino i posti previsti ? Con il codice HTML. Il logo e le TabelleAbbiamo visto il codice per colorare lo schermo ed ora dobbiamo creare la struttura che conterra' il logo ed affidarci quindi alle TABELLELe tabelle (tables) vengono adoperate nei siti per sistemarvi le informazioni e per creare il layout della pagina. Il loro uso, anche se ancora molto diffuso, viene man mano soppiantato dai CSS che consentono un controllo piu' accurato della pagina. Nel nostro caso ne faremo uso per dividere in sezioni la pagina, sezioni in cui collocheremo foto e testi. Le tabelle hanno la loro serie di attibuti che andremo man mano ad esaminare. Esaminiamo pero' prima il tag <DIV> Questo TAG crea un contenitore vuoto in cui si possono inserire tabelle, testi, fotografie , filmati ecc. Il tag DIV ha pero' un solo attributo ALIGN che riconosce 3 valori ( giustify lo ignoriamo ) Center, right e left ( default) ed ha il vantaggio , con i testi, di consentirne l'allineamento senza lasciare spazi tra le righe mentre il tag <P>( paragrafo ) lascia lo spazio. Vediamo il risultato della tabella senza il tag <DIV> a questo link: LOGO IN TABELLA TAG TABLE Anche se non strettamente necessario ai fini della tabella ma intendendolo come un contenitore l'uso del tag <DIV> diventa necessario e quindi verra' sempre usato. Cio' non crea ovviamente alcun problema alla pagina. Per completare le tabelle sono necessari altri tag che andremo man mano ad esaminare. Questo listato crea una tabella in cui viene caricata una fotografia: <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="1000" bgcolor="none"> <tr> <td> <img src="../../immagini/argo.jpg" /> </td> </tr> </table> </div> Carichiamo questo link per per esaminare la gestione delle tabelle con l'uso dei tag <DIV> e <TABLE> I TAG DIV e TABLE Le Tabelle e il TestoE' cosa risaputa che i testi trovano il loro miglior utilizzo se gestiti tramite i CSS poiche' con una unica indicazione nel "Foglio di Stile" si puo' modificare il testo dell'intero sito.E' altresi' possibile cambiare la configurazione del testo con il tag Style che una volta chiuso riporta quello che segue allo stato originale. Questa pagina sta usando il carattere "Verdana" 13px, colore giallo. Ora il carattere cambia e carica il font calibri 16px, bianco,carattere alternativo "Verdana".( Se manca il font Calibri, carica Verdana ) Ora pero' si torna alle caratteristiche precedenti come si puo' notare e qui segue il listato <a style="font-size:16px; color: #ffffff; font-family: calibri, verdana;"> Qui si inserisce il testo </a> NOTA IMPORTANTE La lettera "a" che precede la parola style NON deve essere confusa con il tag html "a" che consente di creare i collegamenti tra le pagine ossia i link, i collegamenti alle e-mail ed i collegamenti tra pagine interne. Questo tag e' detto "ancora" (anchor) e precede di regola "href" Esempio: <a href="http://www.oldreprogram.it"> Vai al sito Olderprogram </a> Oltre alla lettera "a", lo stile del testo consente altre soluzioni: Esaminiamo "Questa e' una prova di scrittura" . Useremo carattere "verdana" 14px, colore bianco ( #ffffff ) <a style="font-size:14px; color: #ffffff; font-family: verdana;"> Questa e' una prova di scrittura "a style" </a> <b style="font-size:14px; color: #ffffff; font-family: verdana;"> Questa e' una prova di scrittura "b style" </b> <i style="font-size:14px; color: #ffffff; font-family: verdana;"> Questa e' una prova di scrittura "i style" </i> <p style="font-size:14px; color: #ffffff; font-family: verdana;"> Questa e' una prova di scrittura "p style". Lascia spazio sopra e sotto </p> <s style="font-size:14px; color: #ffffff; font-family: verdana;"> <u style="font-size:14px; color: #ffffff; font-family: verdana;"> Questa e' una prova di scrittura "u style" </u> <span style="font-size:14px; color: #ffffff; font-family: verdana;"> Questa e' una prova di scrittura "span style" </span> Dopo i caratteri dobbiamo considerare la posizione del testo nella pagina e la gestione degli elenchi puntati. Il testo normalmente viene posto all'interno di un contenitore definito dai tag DIV e TABLE ed abbiamo visto gli esempi nella gestione delle tabelle. Oltre alle posizioni left, center, right, esiste anche justify dove il testo si allinea ai margini destro e sinistro della pagina nel contenitore. Ecco un piccolo esempio di testo giustificato: Peccato pero' che il browser "Explorer" allinei al centro mentre Google Chrome giustifica. La soluzione e' pero' molto semplice anche perche' la definizione precedente non era molto corretta e cio' in quanto il tag TD e' vero che condiziona tutto il testo al suo interno ma se questi deve occupare una posizione diversa si deve ricorrere al tag P: Ecco dunaque che al posto della "ancora" a abbiamo usato la p "paragrafo" direttamente nella definizione del carattere ed abbiamo aggiunto l'allineamento del testo e cosi' passo passo ci avvicineremo all'uso dei CSS. Per questo motivo, nelle istruzioni della tabella precedente, ho volutamente omesso l'istruzione <p align="justify"></p>
Vediamo l'effetto del tag P sul testo e notiamo che questo tag inserisce uno spazio sopra e sotto ad esso.
Se vogliamo che il testo sia allineato a destra, centro e sinistra senza lo spazio tra le righe dobbiamo usare le tabelle ed inserire il testo nel contenitore DIV Le dimensioni del TestoLo HTML ci mette a disposizone 6 modelli dimensionali classificati da H1 a H6. Ad ognuno corrisponde una dimensione del carattere ma anche a questi si preferira' l'uso dei CSS. Vediamoli comunque ricordando che il testo va posto tra i tag <h1> e </h1> dove 1 verra' sostituito da 2-3-4-5 o 6 a seconda dell'esigenza.
Le liste e gli elenchi in HTMLLo HTML ci da' la possibilita' di gestire gli elenchi ordinati e qui di seguito ne vedremo un esempio.Le liste sono contrassegnate da un marcatore iniziale che puo' essere un punto, un numero, un simbolo. Anche la gestione delle liste viene ormai sempre di piu' demandata ai CSS ma e' utile conoscerne le basi in HTML. I tag che contrassegnano una lista sono UL e /UL - OL e /OL - DL e /DL. Gli elementi all'interno della lista sono tutti identificati dal tag LI e /LI. ad eccezione di DL dove troviamo DT e DD. Vediamoli ora: Questa lista fa uso del tag UL ed i suoi elementi vengono contrassegnati con punti, cerchi e quadri. La lista non viene considerata ordinata poiche' manca la sequenza crescente rappresentata da numeri, lettere o numeri romani.
Questa che segue e' una lista ordinata che fa uso di numeri, lettere e numeri romani. I numeri possono essere inseriti anche non partendo da 1 ma inserendo l'istruzione "<ol start="6"> ( start + numero di partenza ) mentre le lettere devono partire dalla a o A Per i numeri romani vai all'ultima tabella.
Esistono poi ancora le Liste di definizione identificate dai tag DL, DT e DD dove DL e DT creano una lista senza rientro mentre DL e DD creano la lista con rientro.
|
