UN SITO WEB css GRATUITO in 10 minuti
Un sito web in pochi minuti? Il tutto a pochi euro all’anno? … siamo nel 2008 … questo non è possibile!…
INVECE DA OGGI è DAVVERO POSSIBILE!
Quello che state per leggere è quanto di più corretto si possa ottenere oggi, informaticamente parlando, ovvero una diffusione GRATUITA e LIBERA di conoscenze ed informazioni tramite internet!
L’articolo seguente non vuole essere una guida alla COMPRENSIONE di HTML, CSS , WEB design e altro.
Lascio il compito alle numerose guide AVANZATE e, di certo più compententi, che potete trovare online.
Lo scopo delle pagine seguenti è quello di fornire un semplicissimo ma completo scheletro a chiunque ne abbia bisogno! Se avrete la pazienza di seguirmi credo rimarrete soddisfatti!
OBIETTIVI:
-
Creazione di un semplice template web CSS composto da:
-
header, foother, barra sinistra e spazio centrale.
-
Nozioni di base su come modificare l’aspetto del template.
STRUMENTI NECESSARI sotto WINDOWS:
-
Client FTP (SmartFTP) – guida disponibile in questo articolo: articolo sul blog
Bene, a questo punto è consigliato, per chi intende dedicarsi allo sviluppo web, di munirsi di un “pacchetto” completo come “LAMP” oppure “WAMP“.
I termini stanno ad indicare semplicemente una serie di programmi comunemente utilizzati, nel caso di “LAMP” si tratta di un pc dotato di LINUX, APACHE, MYSQL e PHP.
Nel caso di “WAMP” la differenza è solamente sul sitema operativo WINDOWS.
Il consiglio è di munirsi di un sistema LINUX , in attesa di scrivere una guida vi invito ad utilizzare google per informazioni al riguardo.
Consiglio vivamente l’accoppiata UBUNTU-WINDOWS per uno sviluppo ottimale della parte grafica e di codice.
Purtroppo devo presupporre che a questo punto chi sta leggendo si sia informato abbastanza da essere in una di queste condizioni:
a) SPAZIO WEB su cui hostare il sito già registrato e disponibile (gratuito o a pagamento non importa).
b) Pacchetto LAMP o WAMP pronto all’utilizzo ed avviato.
Se ancora non siete nella condizione di poter “TESTARE” il lavoro che sto per inserire potrete fare davvero ben poco!
SCARICATE IL PACCHETTO FILE : File
Tramite un client FTP (se avete intenzione di lavorare direttamente sul server di host remoto come aruba, altervista, ecc ecc) oppure nella vostra cartella locale sul computer se state lavorando in locale, dovrete creare/inviare questi file nella cartella principale del sito:
| home.html | index.html |
Ora dovrete creare una cartella nella directory root del sito (/) e rinominarla “css”
all’interno del percorso creato : www.tuosito.xxx/css/ dovete inviare questo file:
| style.css |
Il vostro scheletro è pronto e funzionante! si tratta di 2 pagine web , “index.html” e “home.html” , e un foglio css di stile “style.css”. Accedendo alla root del vostro sito apparirà l’index, dal quale potrete recarvi nella home page del sito!
La modifica è la personalizzazione non sono cose semplici, ma seguendo questi semplici passi potrete modificare il vostro sito per adattarlo ad un semplice utilizzo!
FAQ SULLA PERSONALIZZAZIONE:
GRAFICA:
Gli elementi che compongono il sito web sono definiti GRAFICAMENTE nel file style.css, per modificarne l’aspetto è necessario aprire questo file con un editor di testo ed apportare alcune modifiche:
GLI ELEMENTI CHE HO INSERITO NELLA PAGINA SONO I SEGUENTI:
| Body |(800×600px)
(corpo della pagina che contiene il resto)
| header |(800×200px)
| upmenu |(800×20px)
| leftside (150px)| central (500px)| rightside |(150px)
|foother |(800×50px)
Ogni elemento è identificabile nel file “style.css” dalla sintassi:
div#nomelemento{
…
}
-
modificare il colore di sfondo o inserire un immagine negli elementi:
La proprietà del colore è decisa dalla seguente stringa:
background-color: #FFB5B5; o background-color: black;
Per modificare il colore è necessario inserire il valore ESADECIMALE corrispondente preceduto da “#“, oppure inserire il nome del color.
(per i colori standard sono disponibili i nomi, per tutti gli altri 16 millioni è necessario trovare il codice esadecimale. TUTTI i programmi di grafica avanzati , così come molti siti web inseriscono il codice esadecimale del colore, che è composto da 6 cifre alfanumeriche (0-9+a b c d e f).
-
inserire un immagine di sfondo
In tutti gli elementi è inserita una riga commentata (racchiusa tra i simboli /*… */ come la seguente:
/*background:url(../img/tuaimmagine.xxx);*/
Per modificare o inserire un immagine è necessario creare una cartella chiamate “img” nella root principale del sito o della cartella locale (/img/), al suo interno è possibile inserire le imamgini da utilizzare, basta sostituire “tuaimmagine.xxx” con il nome dell’immagine.estensione (Es ciao.jpg).
In seguito ELIMINARE I DUE TAG DI COMMENTO ALL’INIZIO ED ALLA FINE DELLA RIGA : “/*” e “*/“.
Le immagini di dimensioni ridotte vengono ripetute nello spazio disponibile se non si precisa diversamente inserendo dopo “;” : “no-repeat;”.
CONTENUTI:
I contenuti degli elementi che compongono il sito web sono definiti nel file stesso che viene aperto, ovvero i contenuti della home page saranno nel file “home.html” e quelli dell’index nel file “index.html”. Per modificarli necessario aprire il file necessario con un editor di testo ed apportare alcune modifiche.
Ogni elemento è identificabile nel file “file.html” dalla sintassi:
<div id=”nomelemento”>…</div>
Le modifiche dei contenuti sono da inserire all’interno di questi tag (Es al posto dei “…” sopra citati). Quello che scrivete all’interno dei tag comparirà direttamente all’interno dell’elemento nella pagina. Per formattare il testo ecco alcune info:
-
Inserire IMMAGINI all’interno degli elementi (NON COME SFONDO DEGLI STESSI):
<img src=”/img/tuaimmagine.xxx” alt=”Nome visualizzato in caso di errore” />
- ANDARE A CAPO: inserire <br> nel testo.
scrivo e<br>
vado a capo
- GRASSETTO: inserire il testo da grassettare tra i tag <b>TESTO IN GRASSETTO</b>
- CORSIVO: inserire il testo da corsivo tra i tag <i>TESTO IN CORSIVO</i>
- UNDERLINE: inserire il testo da underline tra i tag <b>TESTO UNDERLINE</b>
- CENTRARE IL TESTO: inserire il testo da centrare tra i tag <center>TESTO CENTRATO</center>
- Inserire un link a pagine esterne al sito: <a href=”http://www.sito.xx/”>NOME SU CUI CLICCARE</a>
- Inserire un link a pagine interne al sito: <a href=”nomepagina.html”>NOME SU CUI CLICCARE</a>
- sintassi tabella: <table border=”0″ width=”XXX”><tr width=”xxx”><td width=”xxx”></td></tr></table>
Width=”larghezza in pixel” | <tr> = nuova riga | <td>= nuovo elemento della riga |
Es: <table width=”600″>
<tr><td width=”200″>PRIMO ELEMENTO></td><td width=”200″>SECONDO ELEMENTO></td><td width=”200″>TERZO ELEMENTO</td></tr>
…NUOVA RIGA…
<tr><td width=”200″>PRIMO ELEMENTO></td><td width=”200″>SECONDO ELEMENTO></td><td width=”200″>TERZO ELEMENTO</td></tr>
</table>
-
modificare il titolo della pagine e i meta tag che riconoscono i motori di ricerca:
Aprire il file index.html e home. html e sostituire in queste righe:
<meta name=”description” content=”DESCRIZIONE DEL TUO SITO“>(descrizione sito)
<meta name=”keywords” content=”LE TUE KEY WORDS DI RICERCA“>(parole usate per la ricerca)
<title>TITOLO TUA PAGINA WEB</title> (visualizzato nella barra del browser web).
l’autore dell’articolo, così come l’amministratore non si assumono responsabilità per quanto trattato. Tutto il materiale è presentato in maniera gratuita e privo di impegno alcuno sull’effettiva pericolosità, correttezza o completezza.
matte89thebest’s blog press is licensed under a Creative Commons Attribuzione-Non commerciale 2.5 Italia License. Based on a work at www.matte89thebest.com/blog. |
Tag: come creare un sito, guida creare un sito, guida css, guida sito web, html, sito web