Creare un sito da zero / i contenuti

di Maria Silvana Radice






I contenuti
Create a site from scratch / contents


Questa pagina e` una continuazione della guida Come creare un sito da zero, passo a passo..

Ora che avete imparato a creare le pagine, vediamo come inserire i vari contenuti..

Per prima cosa, dovete creare una cartella "immagini" all'interno della cartella del sito. Le immagini vanno caricate usando questa stringa:

<a href="URLcollegamento" target="_blank"><img src="URLimmagine" alt="testo"><a />

Dove....
  • Al posto di URLcollegamento, potete inserire il link apribile cliccando sull'immagine (opzionale).
  • Al posto di URLimmagine, dovete mettere l'indirizzo (o percorso) dell'immagne.
Il tag "alt" serve ad inserire la descrizione dell'immagine per i motori di ricerca.
Il tag  target="_blank" fa aprire il link in una nuova scheda del browser. Se non volete questo, potete toglierlo.

Le immagini vanno inserite tra <body> e </body> e all'interno del div riferito alla sezione in cui volete che compaiano.

Se preferite, potete inserire le immagini tramite un editor html come Kompozer.

Dopo che il vostro sito sara` stato pubblicato e si trovera` sullo spazio hosting, potrete inserire le immagini anche usando il file-manager integrato nel vostro cPanel.

Per prima cosa, dovete creare una cartella, che contenga le immagini, all'interno della cartella public_html.

Per caricare le immagini nella nuova cartella creata, dovete cliccare su "upload" e cercarle nel vostro pc.

Importante: le immagini caricate dovranno avere nomi senza spazi vuoti. Le parole dovranno essere separate solo da trattini, altrimenti non saranno riconosciute.

Es: 11-12-2012-gitaalmare.jpg

Consiglio, anche, di usare sempre e solo lettere minuscole, per evitare errori.

Potrete, comunque, caricare le immagini e poi rinominarle.

Una volta caricate le immagini, aprite  l'HTML edit della pagina in cui volete inserirle.
Posizionate il cursore nel punto in cui volete mettere l'immagine e cliccate, in alto, sull'icona corrispondente.
Si aprirà una finestra con le cartelle presenti. Cliccate (2 volte) su quella che contiene le vostre immagini..




..e poi, cliccate (1 volta) sull'immagine scelta. A destra, appariranno i dettagli dell'immagine, cliccate su options..





Come vedete, avete la possibilità di modificare le dimensioni dell'immagine (occhio alle proporzioni!), di aggiungere un bordo e di stabilire la posizione e la distanza del testo intorno all'immagine. Fatto tutto, cliccate su "Insert" e l'immagine apparirà nella vostra pagina.
Cliccando sull'immagine caricata e usando i comandi nella barra degli strumenti, in alto, potrete posizionarla a dx, o in centro, o a sx.

E', anche, possibile inserire le immagini tramite il loro URL. Per fare questo dovete scegliere "Web location", in alto a sx. Quindi, inserite l'indirizzo dell'immagine in basso, nella casella apposita e cliccate sullo spazio bianco dell'anteprima per vederla apparire..




..anche qui, avrete la possibilità di modificare le dimensioni e le varie impostazioni secondo le vostre necessità.

Come includere contenuti tramite iFrame:

Questo e` il modo piu` semplice per aggiungere contenuti esterni in una pagina del sito.
Un iFrame (frame in linea) e` come una finestra aperta in una pagina.
Tramite un iFrame e` possibile inserire in una pagina html un'altra pagina html. Chi non e` nuovo di questo sito, avra` gia` letto altre guide in cui ho indicato l'uso di iFrame per inserire slideshow e altro. La comodita` sta nel fatto che non si appesantisce il sito e che e` possibile modificare il contenuto all'origine, trasmettendo tale modifica a tutte le pagine in cui l'iFrame e` contenuto.
La cartella che contiene il file.html e gli altri file, eventualmente, necessari, puo` essere caricata nella stessa cartella del sito, oppure in un sito di archivio, oppure ancora su un altro hosting.
Usando un iFrame e` possibile caricare qualunque tipo di contenuto in una pagina del sito, anche un codice javascript.
Basta creare una pagina html di base con la classica struttura:

<html>
<head>
</head>
<body>
</body>
</html>

Lo script (o qualunque altro contenuto) va inserito, di solito, tra <body> e </body>, ma in alcuni casi ci sono delle parti da inserire tra <head> e </head>.
Fatto questo, basta prelevare l'indirizzo del file.html e inserirlo nel codice dell'iFrame....

<iframe style="
width: 100%;
height: 400px;
display: block;
overflow: hidden;
border: 1px solid #ccc;" src="file.html"></iframe> 

....dove:

L'iFrame dovra` essere inserito nella sezione <body> della pagina del sito e nel div relativo alla zona in cui dovra` apparire l'effetto (es: <div id="content">).

Come inserire un codice Javascript:

Un codice javascript puo` essere incluso sia nella sezione <head>, sia nella sezione <body> e va racchiuso in questi tag:

<script type="text/javascript">
CODICE
</script>

Come includere contenuti tramite file.js esterno:

E' possibile inserire codici e altro, anche usando un file Javascript esterno (come gia` visto per il menù).
Il metodo puo` essere utile, per esempio, nel caso in cui si vogliano inserire contenuti fissi nelle pagine, con la possibilita` di modificarli in automatico. Oppure se, semplicemente, si vogliono avere determinati contenuti sempre pronti da inserire e velocemente.

Vediamo, ad esempio, come includere questo codice, contenente solo un link e un'immagine....

 <b>Testo</b>
<br>
<a href='URLcollegamento' target='_blank'>Vai</a>
<br>
<img width='100'src='immagini/lugano27.jpg' alt=''/>


In un file di testo (file.txt), inseriamo questo codice di esempio e, poi, cambiamo la sua estensione file.js (naturalmente, al posto di "file", potete mettere il nome che preferite per identificarlo):

Il codice va trasformato in questo modo:

document.write("<b>Testo</b>");
document.write("<br>");
document.write("<a href='URLcollegamento' target='_blank'>Vai</a>");
document.write("<br>");
document.write("<img width='100'src='immagini/lugano27.jpg' alt=''/>");

Come potete vedere, ogni singola stringa deve essere preceduta dal comando document.write, come pure gli eventuali tag presenti.
Il tag <br>, nell'esempio, serve per andare a capo.
Ci sono 2 regole da seguire e a cui fare la massima attenzione:
  1. Mettete sempre il punto e virgola alla fine di ogni riga di comando
  2. Se le virgolette esterne (prima del segno di apertura (<) e dopo il segno di chiusura  (>) sono doppie, le altre virgolette, all'interno, devono essere singole, o viceversa.
Caricate il file.js preparato nella cartella che contiene il sito.
Ora, aprite il codice html della pagina in cui volete includere i contenuti.
Nel posto in cui volete che appaiano (all'interno del div), inserite questa stringa di richiamo:

<script type="text/javascript" src="file.js"></script>

Al posto di file.js, dovete mettere il nome del vostro file.

Fate sempre molta attenzione, perche` e` facile sbagliare, a mettere la stringa all'interno del div giusto. Se l'effetto deve apparire nella zona del contenuto, la stringa di richiamo del file.js andra` posizionata all'interno del div content e prima della sua chiusura (</div>). Se, invece, volete che appaia nella sidebar, dovrete mettere la stringa all'interno del div rispettivo e cosi` via.

Es:
<div id="content">
<script type="text/javascript" src="file.js"></script>
</div>

Per separare il nuovo contenuto dal contenuto gia` presente, potete usare il tag <br>, ripetuto a seconda dello spazio desiderato.
Per posizionare il nuovo contenuto al centro della pagina (o a destra), dovete racchiuderlo in un nuovo div, in questo modo:

<div id="content">
<div align="center">
<script type="text/javascript" src="file.js"></script>
</div>
</div>

Ecco fatto. Mettete la stringa di richiamo del file.js in ogni pagina in cui volete includere gli stessi contenuti. Modificandoli nel file.js, verranno modificati, in automatico, in ogni pagina. Tenete presente che i contenuti inclusi saranno visibili solo tramite il browser e con il loro indirizzo pubblico. Non potrete vederli, quindi, usando "HTML edit", o Kompozer.
Ricordate, anche, che il contenuto del file javascript non verra` letto dai motori di ricerca. E' meglio, quindi, non usare questo metodo per contenuti di cui si desidera l'indicizzazione.
Proseguite con la prossima parte della guida....


Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in     



1
  2   3   4   5   6   7   8   9
Leggi il prossimo argomento:  Fare un sito con PHP ->>