Recensisci!
Diventa un recensore per ricevere prodotti gratuiti o scontati!
Iscriviti
Se desideri, puoi effettuare un'iscrizione gratuita al forum per entrare nella nostra community.
Ricerca Avanzata
Pubblicità Amazon
Answers
Se necessiti di aiuto, clicca il pulsante "Cerco Aiuto" (disponibile anche per i non iscritti).
Ultimi argomenti
» Meglio Android o iOS? Video spiegazione
Da Admin Ven Nov 17, 2017 9:52 pm

» Primo gameplay Platinum Edition - Farming Simulator 2017
Da Admin Ven Nov 17, 2017 9:47 pm

» Errore sketch braccio robotico
Da papat Mer Nov 15, 2017 3:39 pm

» Miglior smartphone sotto i €150 - 2017
Da Admin Sab Nov 11, 2017 10:50 am

» Miglior smartphone sotto i €100 - 2017
Da Admin Ven Nov 10, 2017 10:10 pm

» Recensione protettore RFID
Da Entop Dom Ott 29, 2017 10:01 pm

» Presentati al forum
Da Entop Dom Ott 29, 2017 9:40 pm

» Formato delle recensioni Amazon consigliato
Da Admin Dom Ott 29, 2017 4:12 pm

» Come localizzare in diretta i propri contatti di Whatsapp
Da Admin Sab Ott 28, 2017 9:35 pm

I postatori più attivi del mese
Admin
 
papat
 

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

Vedere l'argomento precedente Vedere l'argomento seguente Andare in basso

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

Messaggio Da Admin il 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.

avatar
Admin
♔ Amministratore

Messaggi Messaggi : 4224
Crediti Crediti : 11792
Reputazione Reputazione : 186
Data d'iscrizione Data d'iscrizione : 08.03.11
Età Età : 19
Località Località : Brescia

Vedi il profilo dell'utente http://www.wikiinfo.net

Tornare in alto Andare in basso

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto


 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum