Come creare un sito web #3 - Impostazione dei codici HTML

Da **Admin** Gio Nov 01, 2012 12:35 pm

Abbiamo inserito i codici basilari per realizzare la struttura del nostro forum e adesso è arrivato il momento di incominciarlo a riempirlo con tutti gli altri codici che ci garantiranno delle migliorie e piccoli perfezionamenti per renderlo visitabile e carino. In questa guida ci soffermiamo principalmente nei tag del contenitore che a mio parere, è il cuore di ogni sito. Io, con il codice della precedente guida, ho tradotto il div id in "contenitore", ma spesso gli sviluppatori esperti inseriscono wrap o wrapper, ma è meglio non metterci mano per il momento, finché non capiamo come è il meccanismo. Per rinfrescarvi la memoria, vi inserisco nuovamente il codice che vi ho realizzato l'altra volta (completo e unito):

Codice:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="it"> <head> <style> /*Codice estratto da wikiinfo.forumattivo.it*/ #contenitoresito { overflow: auto; margin: auto; padding : 5px; /*distacco tra testo e head della struttura della pagina web*/ width: 90%; /*larghezza laterale. Per allargare, aumentare il numero.*/ background-color: #FFFFFF; /*colore sfondo interno della struttura*/ border : 2px solid #EEE; /*larghezza bordo e colore del bordo*/ -moz-border-radius : 7px; /*arrotondamento del bordo*/ -webkit-border-radius : 7px; /*arrotondamento del bordo*/ -moz-box-shadow : 0 0 10px #666; /*arrotondamento del bordo*/ -webkit-box-shadow : 0 0 10px #666; /*arrotondamento del bordo*/ } body{background-image:URL('LINK IMMAGINE');background-attachment:fixed; } /*sfondo esterno della pagina*/ </style> </head> <div id="contenitoresito"> Il testo del tuo sito </div> </html>

Quello che dovremo modificare sarà la seguente parte del codice:

Codice:: <div id="contenitoresito"> Il testo del tuo sito </div>

Prima di tutto sostituiamo "il testo del tuo sito" con tutto quello che a breve vi riferirò.

Impostazione del logo

Il logo è la prima cosa che io inserisco in una pagina HTML perché è da lì che poi decido tutta la struttura della pagina. Per inserire un logo dovremo inserire il seguente codice:

Codice:: <center><img src="INDIRIZZO URL DELL'IMMAGINE" border="0" alt="Logo"/></center>

E' quello normalmente utilizzato per integrare le immagini che molto spesso molti forum, siti e blog scrivono in modo errato. L'inizio tag con scritto "center", serve per centralizzare l'immagine e bisogna evidenziare e ricordare che senza chiudere il codice (scrivendo "/center"), si rischia di centrare tutto il contenuto del contenitore. La sostituzione di "INDIRIZZO URL DELL'IMMAGINE", con l'inserimento del link dell'immagine, non dovrà comportare la rimozione delle due virgolette che iniziano e terminano il link perché causa un mal funzionamento nella visualizzazione! Inserendo valori maggiori di 0 nel border dell'immagine, si visualizzerà un bordo che farà da "contenitore" all'immagine che se rimossa questa parte, il browser Internet Explorer inserirà automaticamente un bordo se non l'avete indicato che in altri browser, se pur non specificato, non ve lo inserisce. La parte con scritto alt="", serve per specificare ai browser che in caso l'utente ha deciso di non permettere ai siti web il caricamento delle immagini, uscirà al suo post la scritta inserita tra le virgolette di alt="". Prima di chiudere con un >, dobbiamo inserire una sbarra che permetta la chiusura del codice dell'immagine, cioè questo simbolo: /. Nel codice iniziale per inserire un'immagine è già stato inserito. Se vogliamo successivamente scrivere di fianco all'immagine, vi consiglio di sostituire il codice che vi ho inserito all'inizio con questo:

Codice:: <center><img src="INDIRIZZO URL DELL'IMMAGINE" style="float:left" border="0" alt="Logo"/></center>

Cosa/come ho fatto? ho aggiunto dopo le virgolette di INDIRIZZO URL DELL'IMMAGINE, questa parte: style="float:left".
Se vogliamo anche ridimensionare l'immagine (ingrandire, ridurre, allargare ecc.), sempre dopo l'INDIRIZZO URL DELL'IMAGINE, questi valori: width="169" height="169" (variare dopo i numeri tra le virgolette del wifth e height se volete un ridimensionamento a piacere). Nella prossima guida vi insegnerò come inserire il testo nel contenitore e molto altro ancora. Alla prossima!

-> Apri elenco delle guide per creare un sito web <-