Come creare un sito #2 - Le basi dell'HTML (struttura)

Da **Admin** Mer Ago 15, 2012 11:31 am

Dopo aver descritto al meglio in quale piattaforme piazzarsi nella prima lezione su come creare un sito web, in questa seconda lezione vi darò più informazioni possibili per capire come perfezionare i propri forum, blog e siti web. Devo dire che questa è l'ultima tappa per i forum e blog e le lezioni continueranno solo per chi ha ideato un sito web dato che è molto più difficile gestirlo perché non dispone di un pannello di amministrazione proprio. Ma non è detto! Seguendo le varie lezioni potreste integrare servizi che anche le piattaforme dei forum e dei blog mettono a disposizione. Esiste un forum di supporto in italiano della piattaforma di forum attivo dove c'è un ampio archivio di tutorial e FAQ per gestire al meglio la propria pagina web. In caso si hanno dubbi o domande si potrà chiedere anche assistenza facendo una piccola iscrizione. Per blogger è la stessa cosa, solo che non c'è un supporto stabile ma dovremo documentarci tramite il motore di ricerca Google.

Finalmente siamo arrivati nel settore per creare una pagina HTML su Altervista (ah, dimenticavo! Se sei un forum attivo, andando nel tuo Pannello di amministrazione impostato in "avanzato", troverai in Moduli, la gestione pagine HTML e potrai anche tu creare un sito web, nel proprio forum). Su Altervista dobbiamo andare in "Gestione file" (su forum attivo invece PDA-> Moduli-> Gestione pagine HTML-> Creare pagina HTML) e creiamo la nostra pagina in formato .HTML (impostato in default su forum attivo). Il dubbio che avete ideato il sito web su Altervista è: perché in HTML e non in un altro formato? il formato HTML è il migliore per capire ed iniziare a creare un sito web in modo facile e intuitivo. Il PHP si potrà imparare in futuro, quando si sarà super esperti di HTML, CSS e Javascript. La cosa principale che adesso dobbiamo fare è inserire l'head e il tag dell'html, ecco il codice:

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> CODICI DEL'HEAD</head> <body> TUTTI I CODICI DEL TUO SITO </body> </html>

Nell'head si inseriscono spesso i codici che integrano file .css, .js, .xml ecc.! Nel settore "TUTTI I CODICI DEL TUO SITO" dovremo inserisce i codici strutturali, come spiega questa guida. Dovremo inserire il div id del contenitore e poi il codice CSS. Per evitare confusioni, vi pubblico sia il div id del contenitore della pagina e sia il codice CSS della guida che ho creato qualche tempo fa che poi dovranno essere posizionati successivamente, in modo corretto, dentro la pagina HTML (inserirlo al posto di "TUTTI I CODICI DEL TUO SITO"):

Codice:: <div id="contenitoresito"> Il testo del tuo sito </div> <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>

Ho inserito il meta tag del CSS in quel modo perché secondo dei test Google, evita il rallentamento della pagina dopo averli inseriti. In ogni stringa c'è una breve descrizione per capire come personalizzare la struttura della pagina. E' importante anche dire che per modificare lo sfondo esterno della pagina dovremo modificare "LINK IMMAGINE", che si trova infondo al codice CSS. Come promesso prima, il risultato finale di tutti i codici messi insieme sarà questo:

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> <body> <div id="contenitoresito"> Il testo del tuo sito </div> </body> </html>

Nella prossima lezione vi insegnerò come inserire il contenuto all'interno della propria pagina web.

----->Apri elenco di tutti i tutorial <-----

1	#include
2	#drone
3	#dlcitalia
4	#ets2
5	#eurotrucksimulator2
6	#arduino
7	#aukey
8	#xiaomi
9	#farmingsimulator