Il Blog Di Sanfra - Guide MSN Space - WebMastering

Inserire Un Immagine Con Link

Fri, 30 Mar 2007 14:41:15 GMT

In questo manuale, vedremo come inserire un immagine con un link. Per prima cosa ci serve il tag:

<a href="LINK SITO"><img src="LINK IMMAGINE"></a>

Al posto di LINK SITO, va inserito il link del sito che volete linkare e al posto di LINK IMMAGINE, va inserito il link dell'immagine.

Esempio:

<a href="http://www.google.it">

<img src="http://images.google.it/intl/it_ALL/images/images_hp.gif" border="0"></a>

</head>

<body>

LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!

 

<a href="http://www.google.it">

<img src="http://images.google.it/intl/it_ALL/images/images_hp.gif" border="0"></a>

</body>

</html>

Se avete scritto correttamente il codice dovrebbe venirvi fuori una pagina COSI.

Provate a passare sull'immagine, e noterete che appare la manina che indica un link.

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Inserire Un Immagine

Fri, 30 Mar 2007 13:54:24 GMT

Per inserire un immagine nell'HTML bisogna utilizzare il seguente tag:

<img src="LINK IMMAGINE">

Al posto di link immagine, va ovviamente il link dell'immagine ad esempio se il link è

<img src="http://images.google.it/intl/it_ALL/images/images_hp.gif">

</head>

<body>

LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!

 

<img src="http://images.google.it/intl/it_ALL/images/images_hp.gif">

</body>

</html>

Se avete scritto correttamente il codice dovrebbe venirvi fuori una pagina COSI

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Pubblicare Le Pagine Su Internet

Thu, 29 Mar 2007 16:39:43 GMT

Per prima cosa recatevi su www.altervista.org, e registratevi.

ATTENZIONE!!!

Scegliete bene il vostro nick perchè il vostro nick costituirà il vostro sito web, mettiamo caso che il vostro nick sarà tuonick il sito web sarà www.tuonick.altervista.org quindi sceglietelo bene...

A questo punto effettuate l'acceso su altervista e vi apparira una mini schermata blu con delle scritte.

Cliccate su:

_GESTIONE FILES-->INVIA FILES-->SFOGLIA.

Scegliete il file che volete caricare e mettiamo caso che il vostro file si chiama ciao.html, la destinazione del seguente file sarà:

www.tuonick.altervista.org/ciao.html

Consiglio: chiamate la vostra homepage/prima pagina index.html

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Siti Free Hosting

Thu, 29 Mar 2007 16:17:58 GMT

Finalmente siamo giunti lla sezione per caricare le pagine su internet, ovvero il famosissimo www...

Per prima cosa dobbiamo trovare un sito hosting, ovvero un sito che ci permetta di caricare le nostre pagine web su internet.

Vi cito adesso dei più famosi siti hosting gratuiti:

Altervista: Sito free hosting, che offre 100 Mb di spazio e 10 Gb di banda mensile (CONSIGLIATO);

Netsons: Sito free hosting che offre 100 Mb di spazio (COMPATIBILE SOLO CON F.T.P.);

HelloWeb: Sito free hosting che offre 150 Mb di spazio e banda mensile illimitata.

Io uso Altervista e mi trovo molto bene, è sicuramente il migliore da dove iniziare.

In questa guida userò solo Altervista.

Sia chiaro che con questi siti non avete il dominio .it ma avete dei sotto domini ad esempio

Altervista: www.tuosito.altervista.org

HelloWeb: www.tuosito.helloweb.eu

Netsons: www.tuosito.netsons.org

Per avere il dominio .it bisogna registrarsi a questi siti a PAGAMENTO

www.aruba.it

www.tol.it

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Aggiungere Un Immagine Allo Sfondo

Wed, 28 Mar 2007 17:09:21 GMT

Ciao! Qui vedremo come mettere un immagine che si ripete, come sfondo di una pagina web.

Recatevi nell'html della pagina o createne una nuova, e invece di inserire il tag <body>, inseriamo il tag

<body background="LINK IMMAGINE"></body>

Supponiamo il caso di voler usare quest'immagine

Andiamo nell'HTML e al posto di <body> inseriamo:

<body background="http://sanfra1407.altervista.org/crea_un_sito/stelle.gif">

Cosi

<html>

<head>

<meta name="description" content="Il Blog Di Sanfra">

<meta name="keywords" content="Sanfra, Sanfra1407, Il Blog Di Sanfra">

<meta name="robots" content="NOINDEX,NOFOLLOW">

<title>Prima Pagina Web</title>

</head>

<body background="http://sanfra1407.altervista.org/crea_un_sito/stelle.gif">

LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!

</body>

</html>

Se avete fatto tutto correttamente dovrebbe uscire fuori una pagina del genere GUARDA.

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Colorare Lo Sfondo Delle Pagine

Wed, 28 Mar 2007 16:42:59 GMT

In questa sezione, vedremo come cambiare il colore di sfondo di una pagina web.

Recatevi nell'html della pagina o createne una nuova, e invece di inserire il tag <body>, inseriamo il tag

<body bgcolor="CODICE COLORE"></body>

Questo tag, è identico al tag <body></body> ha le stesse funzionalità, solo che cambia il colore dello sfondo...

Ricordatevi di sostituire CODICE COLORE con il codice di un colore.

CODICI COLORI.

A questo punto vediamo di far interagire il nuovo tag nell'HTML

<html>

<head>

<meta name="description" content="Il Blog Di Sanfra">

<meta name="keywords" content="Sanfra, Sanfra1407, Il Blog Di Sanfra">

<meta name="robots" content="NOINDEX,NOFOLLOW">

<title>Prima Pagina Web</title>

</head>

<body bgcolor="#000000">

LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!

</body>

</html>

Se create una pagina con il seguente codice HTML, dovrebbe venirvi il colore dell sfondo nero. COSI

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Far Interagire I Meta Tag Nell'HTML

Wed, 28 Mar 2007 16:05:01 GMT

I Meta Tag come visto nella lezione precedente, vanno inserite tra <head></head> ecco qui sotto un esempio:

<html>

<head>

<meta name="description" content="Il Blog Di Sanfra">

<meta name="keywords" content="Sanfra, Sanfra1407, Il Blog Di Sanfra">

<meta name="robots" content="NOINDEX,NOFOLLOW">

<title>Prima Pagina Web</title>

</head>

<body>

LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!

</body>

</html>

Ovviamente non c'è un ordine ben preciso con qui metterli...

Guardando L'Anteprima della pagina, noterete all'apparenza che non presenta nessuna differenza dalla pagina precedente all'apparenza perchè se cliccate con il tasto destro su HTML noterete la presenza di Meta Tag.

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Meta Tag

Tue, 27 Mar 2007 17:52:46 GMT

I meta tag sono utilizzati nel linguaggio HTML per fornire informazioni sulle pagine ai motori di ricerca.

Essi vanno inseriti tra tag <head></head>, e quindi il browser non leggendoli non ce li mostra...

La struttura dei meta tag è molto semplice da comprendere ed è la seguente:

<meta name="proprietà" content="valore">

L'attributo name indica il tipo di informazione del tag;

L'attributo content indica il contenuto dell'informazione.

Vediamo ora, alcuni dei più importanti Meta Tag:

<meta name="description" content="Il Blog Di Sanfra">

Il primo meta tag che vediamo è "DESCRIPTION" che serve a dare una breve descrizione del sito.

<meta name="keywords" content="Sanfra, Sanfra1407, Il Blog Di Sanfra">

Questo invece, serve per inserire le keywords del vostro sito per semplificare la ricerca sul motore di ricerca.

<meta name="robots" content="COMANDO">

L'ultimo meta tag invece può variare in 4 modi, sostituendo i seguenti contenuti al posto di COMANDO

e sono:

INDEX

Per indicare che la pagina può essere aggiunta nel motore di ricerca;

NOINDEX

Per indicare che la pagina non può essere aggiunta al motore di ricerca;

FOLLOW

Indica che tutti i link di quella pagina vengano aggiunti al motore di ricerca;

NOFOLLOW

L'ultimo invece ha il comando di non aggiungere tutti i link presenti in quella pagina.

Sono sempre accoppiati, a seconda dell'esigenza del webmaster. Esempi

<meta name="robots" content="NOINDEX,NOFOLLOW">

<meta name="robots" content="NOINDEX,FOLLOW">

<meta name="robots" content="INDEX,NOFOLLOW">

<meta name="robots" content="INDEX,FOLLOW">

E' indefferente mettere prima follow o index e viceversa, ma se quest'ultimi meta tag non vengono aggiunti, il motore di ricerca procede come se essi fossero aggiunti...

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

La Nostra Prima Pagina Web In HTML!!!

Tue, 27 Mar 2007 17:25:16 GMT

Ed eccoci arrivata all'attesissima e più interessante sezione!!!

Apriamo il nostro block notes andando su:

START-->PROGRAMMI-->ACCESSORI-->BLOCCO NOTE

e cominciamo ad inserire i "TAG FONDAMETALI", in questo modo:

<html>

<head>

<title>Prima Pagina Web</title>

</head>

<body>

LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!

</body>

</html>

Fatto ciò clicchiamo su file, salva con nome, nome: web.html salva come: tutti i file codifica ANSI.

Apriamo il file con internet explorer (tasto dx Apri Con) e dovrebbe uscire una pagina COSI.

Importantissimo!!!

Non fa differenza quanto spazio c'è tra un tag e l'altro il risultato sarà sempre identico!!!

Esempio:

<html>

<head>

<title>Prima Pagina Web</title>

</head>

<body>



LA MIA PRIMA PAGINA IN HTML CON IL BLOCK NOTES!!!



</body>

</html>

Non c'è nessuna differenza tra il primo codice e il secondo.

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

I Commenti

Tue, 27 Mar 2007 17:03:24 GMT

In questa sezione vediamo cosa sono e a cosa servono i commenti.

Per rendere il nostro codice più leggibile,possiamo inserire dei "commenti".

Si tratta di indicazioni significative per il webmaster, ma invisibili al browser.

Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi.

Quindi tutto il testo inserito tra i seguenti "TAG" , non verrà visualizzato dal browser anche se presente

nel codice della pagina.

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Altri Tag

Tue, 27 Mar 2007 16:47:37 GMT

Ovviamente non ci sono solo i tag precedenti.

Ecco altri tag utili

 

Serve ad andare a capo di una riga, ogni è una riga a capo. Esempio 2 righe a capo.

Tutto il testo, le immagini ecc. compreso in questo tag, viene accentrato perfettamente.

Tutto il testo, le immagini ecc. compreso in questo tag, viene disposto a sinistra.

Tutto il testo, le immagini ecc. compreso in questo tag, viene disposto a destra.

<a href="LINK">TESTO</a>

Questo è un tag che serve per i link, al posto della scritta LINK va il link del sito ad esempio:

http://www.sanfra1407.altervista.org/

ed al posto del campo TESTO il nome ad esempio:

SanfraWeb

Alla fine visualizzeremo un cosa simile:

SanfraWeb

Il testo compreso dai due tag verrà colorato di un colore a nostra scelta, con una font a nostra scelta e una dimensione a nostra scelta.

Inserendo al posto di CODICE COLORE, il codice del colore.

Esempio TESTO ROSSO

Il testo sarà visualizzato rosso, perchè #FF0000 è il codice del colore rosso stile di scrittura verdana e

dimensione a 8.

Di solito i codici sono formati da un # e da una serie di sei numeri o lettere .

CODICI COLORI

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

I Tag Fondamentali

Tue, 27 Mar 2007 16:22:39 GMT

Tanto per cominciare in questa guida non useremo editor (programmi per scrivere le nostre pagine web), ma

useremo il nostro caro amico block notes o notepad chiamatelo come volete.

Aggiungerò dei download utili più avanti...

Bene a questo punto andiamo a vedere cos'è e come è formata una pagina web.

Una pagina web è costituita da tag, ovvero strutture che contengono varie parti del codice HTML di una pagina.

Vediamo i più importanti:

<html></html>

Questi tag comprendono tutto il codice e tutti gli altri tag, di una pagina web. Senza questi il nostro browser

non riconosce la pagina web.

<head></head>

Dentro questi tag sono racchiuse le informazioni che servono ai motori di ricerca o al browser di ogni singola

pagina web.

<title></title>

Questi tag ovviamente racchiudono il titolo di ogni pagina web, che è quello che appare in alto nella barra blu.

Sono compresi tra i tag <head></head>.

<body></body>

Questi tag sono il corpo di ogni pagina web dentro di essi è racchiuso quello che noi vedimo in un browser,

ovvero test, immagini, video, lik e via dicendo...

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Premessa: Importante

Tue, 27 Mar 2007 15:56:33 GMT

Ciao a tutti prima di cominciare a consultare questa guida, vorrei darvi tre cosigli:

_E' necessario prima di iniziare a creare un sito, stabilirne l'argomento;

_Dedicate molto tempo al vostro sito web se volete fare un sito fatto bene;

_Dovete essere portati per il PC e dovete avere un minimo di conoscenza degli argomenti.

http://www.sanfra1407.altervista.org/

http://sanfra90.spaces.live.com/

Inserire Una Canzone/Video Nel Media Player

Fri, 05 Jan 2007 16:18:19 GMT

URL PER IL MEDIA PLAYER

Per inserire una canzone/video nel blog, dovete essere in possesso del suo URL

DOVE TROVO GLI URL DELLE CANZONI?

Gli url delle canzoni si creano con i siti free hosting (hosting gratuiti) praticamente se voi avete sul vostro pc la canzone o il video che volete mettere nel media player la dovete hostare (CARICARE) su un sito (FREEHOSTING) e vi sarà dato l'url da inserire nel media player del vostro space.

P.S. Aggiungo che i siti per hostare file sono tutti molto lenti e la durata dell'upload dura a seconda della grandezza del file. Di solito per una canzone ci vogliono dai 5 ai 10 minuti.

Inserire Windows Media Player Nel Blog

Fri, 05 Jan 2007 16:05:14 GMT

1. Entrate nel vostro blog in modalità modifica.
2. Cliccate su personalizza.
3. Dalla scheda moduli cliccate altro.
4. Cliccate aggiungi alla destra di windows media player.
5. Quando avete finito salvate.

Inserire Un Immagine In Un Intervento

Fri, 05 Jan 2007 15:55:36 GMT

OTTENERE L'URL DI UN'IMMAGINE

Trovata l'immagine cliccateci con il destro del mouse e poi su "PROPRIETA'"
, a questo punto salvatevi l'url

OTTENERE L'URL DI UN'IMMAGINE SUL PROPRIO PC

Quando un'immagine è sul vostro pc dovete usare un sito free hosting che la mette su internet, per questo c'è:
IMAGESHACK.US
Per caricare la vostea immagine cliccate su "SFOGLIA", cercate l'immagine nel vostro pc e cliccate su "HOST IT".
Ora andate a fondo pagina e prendete l'url alla voce "Direct link to image"

CREARE UN CODICE HTML PER L'URL DELL'IMMAGINE

Ora dovete sostituire la parola "URL" nel codice sottostante con l'url fornito da imageshack.us:
<img src="URL" border="0">

COME USARE IL CODICE HTML

1. Cliccate su "AGGIUNGI" nel modulo "BLOG"

2. Nel BBCode dovete clickare su "HTML"
3. Incollate il codice html di cui abbiamo parlato sopra
4. Ricliccate su "HTML" nel BBCode
5. Scrivete il vostro intervento
6. Mettete un TITOLO all'intervento
7. Cliccate in alto su "PUBBLICA INTERVENTO"

Pubblicare Un Intervento Senza Titolo

Fri, 05 Jan 2007 15:44:37 GMT

CREARE UN INTERVENTO SENZA TITOLO

Per creare un intervento in modo veloce o senza titolo basta andare qui

http://spaces.live.com/blogit.aspx

Modificare Gli Interventi Vecchi

Fri, 05 Jan 2007 15:42:29 GMT

MODIFICARE/CANCELLARE GLI INTERVANTI VECCHI

1. Accedi al tuo blog in modo da poterlo modficare

2. Clicca su "Blog"

3. Modifica/Elimina gli interventi passati

PER ACCEDERE AI PROSSIMI 10 INTERVENTI VECCHI CLICCA SULLA FRECCETTA IN ALTO A DESTRA

Collegamento Permanente Di Un Intervento

Fri, 05 Jan 2007 15:35:42 GMT

Per ottenere il collegamento di un intervento dovete:

1. Accedere al vostro blog in "Anteprima"
2. Cliccare su "Blog"

3. Cercare l'intervento desiderato
4. Sotto all'intervento c'è un link con scritto "COLLEGAMENTO PERMANENTE", cliccateci sopra
5. L'URL che appere è il collegamento permanente di quell'intervento

ATTENZIONE! NON POTETE ELIMINARE GLI INTERVENTI DOPO AVER SALVATO IL COLLEGAMENTO PERMANENTE!
SE ELIMINATE L'INTERVENTO IL COLLEGAMENTO PERMANENTE NON FUNZIONA PIU'!