HabboLife Forum
Vuoi reagire a questo messaggio? Crea un account in pochi click o accedi per continuare.

HabboLife ForumAccedi

Habbolife Forum è un fansite ufficiale di Habbo hotel. Rimani aggiornato sulle notizie di questo magnifico mondo virtuale e sugli ultimi argomenti di attualità!

descriptionGuida Webmaster Base-4°Puntata EmptyGuida Webmaster Base

more_horiz
In questa guida spiegherò 2 capitoli per post la base del creare il web incominciamo subito con il 1° capitolo :

1. Cos'è Internet e come funziona


Se siete arrivati fino a qui e se state leggendo queste righe credo che una pur minima idea di cosa sia Internet l'abbiate già... e probabilmente se siete arrivati fino a qui è perchè sapevate cosa cercare e (spero) l'avete trovato... ma la domanda ve la pongo lo stesso... voglio vedere se lo sapete davvero...

Cos'è Internet e come funziona?

Internet è una parola composta che sta per Interactive net ovvero rete interattiva che funziona per mezzo della normale rete telefonica. In altri termini, quella che viene definita la rete delle reti, è un vero e proprio mondo virtuale in cui è possibile cercare e trovare le informazioni di cui si necessita ed è possibile trovarle nelle forme più disparate.

Per accedere ad Internet è necessario disporre di:

un computer dotato di un modem;
un telefono nelle vicinanze;
un abbonamento (gratuito) ad un provider (come Tiscali, Libero, InWind, ecc...)
un browser Web
Andiamo per gradi e vediamo cosa sono tutte queste cose.
Un modem è un dispositivo che modula e demodula i dati che gli arrivano e fa da interprete tra il computer ed il telefono, dato che non parlano la stessa lingua.

Non credo che ci sia bisogno di spiegare cosa sia un telefono :-) diciamo solo che è necessario avere vicino al computer un telefono o semplicemente una presa telefonica in modo da inserire il cavetto del telefono nel computer nella porta dove, in genere, c'è scritto o è indicato che si trova il modem.

I provider che forniscono connettività ad Internet sono dei servizi mediante cui è possibile avere un numero di telefono a cui il modem dovrà telefonare, il tutto protetto da un nume utente e da una password. Insomma, credo che se state leggendo questa pagina una connessione ad Internet l'abbiate già ;-)

Un browser Web è un programma come quello che state usando in questo momento per navigare tra le pagine di questo sito. Esistono diversi browser Web, i più famosi sono Microsoft Internet Explorer, Netscape Navigator e Opera. Credo che la maggior parte di voi stiano utilizzando il primo della lista.

Attraverso un browser Web, quindi, è possibile specificare l'indirizzo di un sito Web e navigare tra le sue pagine.

Nei prossimi capitoli continueremo a parlare di Internet, del suo funzionamento, dei servizi che è possibile sfruttare e di come (iniziare a) passare dalla parte del navigatore a quella del realizzatore di siti Web!


2.Cos'è un sito Web
Sapete cos'è esattamente un sito Web?

Un sito Web è un'insieme di pagine e di documenti, appartenenti ad uno stesso indirizzo, visualizzabili attraverso Internet.

In questo momento state navigando tra le pagine di habbolifeforum. habbolifeforum è un sito Web!

Se provate ad andare nella barra degli indirizzi e provate a scrivere, ad esempio,

Codice:

http://www.mrwcorsi.it

finirete su un'altro sito Web.
Esistono diverse categorie di siti Web. Elenchiamole.

Presentazioni grafiche - si tratta di siti in cui la grafica, le immagini e gli effetti speciali sono predominanti. Ad esempio, un politico che vuole far spiccare la sua immagine in fase di campagna elettorale, ricorrerà ad un sito del genere per risultare più accattivante nei confronti dei suoi potenziali elettori.

Siti personali o amatoriali - si tratta di siti realizzati da amanti di Internet, i quali mettono (gratuitamente) a disposizione di curiosi, le foto dei propri viaggi, i propri disegni, le proprie storielle o poesie o qualsiasi altra cosa possa venire in mente.

Vetrine di prodotti - si tratta di siti di aziende che vendono i propri prodotti online attraverso sistemi di commercio elettronico. E' possibile quindi effettuare acquisti online attraverso una semplice connessione ad Internet restando comodamente seduti avanti al proprio computer!

Portali di informazioni - si tratta di siti che trattano determinate argomentazioni divise per categorie. Questo, ad esempio, è un portale di informazione per aspiranti Webmaster e Webmaster professionisti. La divisione in categorie si evince dal fatto che ci sono sezioni (come questa) dedicata a chi muove i primi passi verso Internet e verso lo sviluppo di siti Web, mentre ci sono sezioni in cui si parla di programmazione e di grafica a livello avanzato. Ci sono numerose altre sezioni su questo sito come su qualsiasi portale di informazioni, ma non mi pare questa la sede per discuterne, basta navigare e vedere cosa viene offerto, gratuitamente o meno.

Portali di servizi - si tratta di portali che mettono a disposizione servizi e non informazioni di carattere più o meno generale o specifico. Fin qui penso che ci eravate già :-) ma quali servizi si possono ottenere attraverso Internet? Esistono, ad esempio, quelle che vengono definite comunità virtuali, ovvero sezioni di siti in cui è possibile chattare (scrivere e leggere messaggi in tempo reale con altri utenti), altri in cui è possibile conoscere gente attraverso sistemi di messaggistica, altri ancora in cui è possibile reperire informazioni attraverso strumenti avanzati come motori di ricerca, servizi di statistica (ad esempio per calcolare le distanze tra città) e quant'altro.

Applicazioni Web - si tratta di siti accessibili solo ad utenti riconosciuti dal sistema attraverso un sistema di autenticazione in cui è possibile, ad esempio, effettuare gestione di dati sensibili. Un'azienda, ad esempio, può avere bisogno di effettuare i pagamenti al proprio personale e può scegliere di sfruttare Internet, o meglio la tecnologia Web, per far fronte a questa esigenza.






descriptionGuida Webmaster Base-4°Puntata EmptyGuida Webmaster Base-2°Puntata

more_horiz
Introduzione all'HTML

Provate ad accedere, attraverso il vostro browser, al menu Visualizza e selezionate la voce HTML. Vi apparirà avanti il blocco note con una serie di codici scritti all'interno. Quel codice serve a mettere insieme quel che vedete, ovvero le pagine Web!

Potete arrivare al codice di una pagina HTML anche attraverso il click del tasto destro del mouse in un punto qualsiasi della pagina (non sulle immagini); troverete anche in questo modo la voce HTML.

Questo vuol dire che posso modificare l'aspetto di una pagina Web?

Beh... no! Mi spiego...

Se state navigando su Internet non potete modificare l'aspetto di una pagina Web, altrimenti tutti i siti andrebbero in fallimento! Potete però creare delle pagine Web sul vostro computer, aprirle attraverso il vostro browser e divertirvi a stilizzarle ed a riempirle di contenuti come meglio credete.

Facciamo una prova? Ok!

Andate sul desktop del vostro computer e create una nuova cartella, ad esempio mio_sito; adesso aprite il Notepad dal menu

Codice:

Start / Programmi / Accessori / Blocco note

e salvate il documento con nome sul desktop all'interno della cartella mio_sito come index.html. Questo è uno nei nomi che, in genere, si da ai file che rappresentano la Homepage (pagina iniziale, pagina di accoglienza o che dir si voglia) di un sito.
Vedete che l'icona del file è simile a quella del vostro browser predefinito; se state utilizzando Internet Explorer, ad esempio, il file avrà l'aspetto di un foglio bianco con una e azzurra nel mezzo.

Fateci un bel doppio click su... vedrete una pagina bianca all'interno del vostro browser... vuol dire che state navigando su Internet? No, infatti potete lavorarci anche disconnettendovi da Internet.

Avvedete al menu Visualizza, selezionate la voce HTML... troverete il Notepad vuoto! Vuol dire che potete iniziare a scriverci del codice per creare una vera pagina Web!

Fermiamoci un istante e dedichiamoci ad un minimo di indispensabile teoria. Per scrivere pagine Web è necessario conoscere alcuni linguaggi, ognuno dei quali serve ad uno scopo differente. Per il momento ci dedichiamo al linguaggio HTML (che sta per HyperText Markup Language) ovvero li linguaggio di marcatura ipertestuale che serve per definire la creazione della struttura delle pagine Web.

L'HTML è composto da una vasta serie di semplici comandi chiamati Tag composti dal nome del comando, racchiuso tra i simboli < ed > con relativo Tag di chiusura uguale al comando di apertura con uno slash (/ il carattere che si trova sul numero 7 della vostra tastiera).


Un esempio:

Codice:

<html>

</html>


All'interno di questa coppia di Tag si inserisce tutto il codice HTML della
pagina Web.
Vediamo adesso la struttura di base, che rimane sempre e comunque tale, di una pagina HTML:

Codice:

<html>
    <head>
        <title>La nostra prima pagina Web</title>
    </head>
<body>
</html>

Tra i Tag e inseriamo il codice della pagina che apparirà a video; il resto di ciò che vedete è solo parte della struttura



descriptionGuida Webmaster Base-4°Puntata EmptyGuida Webmaster Base-3°Puntata

more_horiz
I link: il motore di Internet

Abbiamo già detto che HTML vuol dire linguaggio di marcatura per l'ipertesto... ma cos'è l'ipertesto?

L'ipertesto è il sistema di navigazione di Internet. Avete fatto caso che, passando su alcun voci di una pagina, su un menu di navigazione o su un'immagine il cursore del mouse prende le sembianze di una manina? Cosa succede se ci cliccate una volta col tasto sinistro? Cambiate pagina o addirittura vi trovate su di un altro sito!

Questi si chiamano collegamenti ipertestuali, oppure, in gergo, link che in inglese vuol dire proprio collegamento.

Un sito privo di link diventa un sito morto, anzi, una semplice pagina morta in cui... ok... ci saranno delle informazioni, ma non è consentita la navigazione verso altre pagine.

Cliccare su un link equivale a scrivere nella barra degli indirizzi del browser l'indirizzo di una pagina a cui si desidera collegarsi. I link si creano in HTML e si utilizza il seguente codice:

Codice:

<a href="nome_di_una_pagina.html">Testo del link...</a>

dove il tag a rappresenta un'ancora (si, come quelle che Popay ha tatuato sui suoi avambracci) e l'attributo href server a specificare il percorso e/o il nome del file che si intende raggiungere.
Nel prossimo capitolo creeremo una pagina Web di prova, utilizzando il file index.html che avete salvato sul desktop del vostro computer nella cartella mio_sito.

descriptionGuida Webmaster Base-4°Puntata EmptyGuida Webmaster Base-4°Puntata

more_horiz
Ci siamo: creiamo la nostra prima pagina Web!

Apriamo il file index.html creato qualche capitolo fa ed accediamo al codice HTML come già spiegato ed inseriamo questo codice al suo interno

Codice:

 <html>
    <head>
        <title>La nostra prima pagina Web</title>
    </head>
<body>

<h1 align="center">La nostra prima pagina Web</h1>

</body>
</html>


Cercate una vostra foto sul vostro computer, copiatela nella cartella mio_sito e rinominatela assegnandole il vostro nome.
Attenzione: il file immagine ha un'estensione, ovvero un suffisso, che potrebbe essere .gif, .bmp o presumibilmente, trattandosi di una foto, .jpg. Non so se per come è impostato il vostro computer, ma non è detto che visualizziate l'estensione. Io ho rinominato la mia foto e l'ho chiamata luca.jpg e leggo esattamente cosi il nome del file perchè ho impostato il mio computer in modo visualizzare l'estensione; voi potreste non visualizzarla e leggere solo il vostro nome. In caso contrario non cancellate assolutamente l'estensione oppure il file diventerà irriconoscibile.

Modifichiamo il codice HTML del file index.html come segue (ho aggiunto le parti evidenziate in rosso)

Codice:

[code]<html>
    <head>
        <title>La nostra prima pagina Web</title>
    </head>
<body>

<h1 align="center">La nostra prima pagina Web</h1>

<p align="center"><img src="luca.jpg"></p>

</body>
<[/code]/html>


Il Tag non necessita di chiusura finale.
Adesso aggiungiamo una descrizione su di noi come segue (aggiungiamo le parti evidenziate in rosso)

Codice:

<html>
    <head>
        <title>La nostra prima pagina Web</title>
    </head>
<body>

<h1 align="center">La nostra prima pagina Web</h1>

<p align="center"><img src="luca.jpg"></p>



Mi chiamo Luca Ruggiero e sono nato a
Napoli il 12 Aprile del 1978.


Sono un programmatore Web ed amo realizzare siti
e scrivere guide ed articoli per insegnare ai miei lettori
come si realizzano pagine Web, anche molto complesse!


Siccome questo è solo un esempio e mi è finita la fantasia,
la finisco qui :-)




Codice:

</body>
</html>


ALLA FINE DOVREBBE ESSERE COSI :

Codice:

<html>
    <head>
        <title>La nostra prima pagina Web</title>
    </head>
<body>

<h1 align="center">La nostra prima pagina Web</h1>

<p align="center"><img src="luca.jpg"></p>

<p>
Mi chiamo Luca Ruggiero e sono nato a
Napoli il 12 Aprile del 1978.<br><br>
Sono un programmatore Web ed amo realizzare siti
e scrivere guide ed articoli per insegnare ai miei lettori
come si realizzano pagine Web, anche molto complesse!<br><br>
Siccome questo è solo un esempio e mi è finita la fantasia,
la finisco qui :-)
</p>

</body>
</html>



Il Tag

Codice:

<br>
che troviamo all'interno della descrizione personale serve a mandare il testo a capo.

descriptionGuida Webmaster Base-4°Puntata EmptyRe: Guida Webmaster Base-4°Puntata

more_horiz
Chiudo
privacy_tip Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.
power_settings_newAccedi per rispondere