Please Wait
Cosa Cerchi?  

Lezione 01 - La Storia e la mia prima pagina Web

Cos'è Internet

Internet è la più grande rete telematica mondiale e collega centinaia di milioni di computers in tutto il mondo.
Il suo nome infatti è composto dalla parola latina "inter" fra e la parola inglese "net" rete.
 

Breve Storia

Internet nasce nei primi anni '60 sottoforma di un progetto denominato ARPANET finanziato dall'ARPA (Advanced Research Projects Agency), un'agenzia del dipartimento della difesa statunitense.
Il progetto si prefiggeva l'obiettivo di collegare tra loro tutti i computer e i sistemi delle forze armate statunitensi, della NASA e alcuni centri di ricerca universitari.
Fin da subito venne definito il protocollo di comunicazione tra i computer il TCP/IP (Transfer Control Protocol/Internet Protocol) che basandosi sulla concezione di rete a commutazione di pacchetto rendeva stabile e sicuro il trasferimento delle informazioni.
I primi collegamenti avvenivano sottoforma di terminale (Telnet) e per il trasferimento di file (FTP File Transfer Protocol), ma già nel 1971 Ray Tomlinson ispirandosi a due programmi già esistenti, il SENDMSG e CPYNET, inventò la posta elettronica.
In poco tempo alla rete di ARPANET si unirono altre università comprese alcune del vecchio continente come ad esempio University College di Londra.
Nel 1991 presso il CERN di Ginevra il ricercatore Tim Berners-Lee definì il protocollo HTTP (HyperText Transfer Protocol), un sistema per la consultazione ipertestuale (non sequenziale) di documenti, saltando da un punto all'altro mediante opportuni collegamenti (links) tra i vari documenti.
Nel 1993 venne realizzato il primo browser con le caratteristiche simili a quelle dei browser attuali: il Mosaic. Fu una vera e propria rivoluzione nell'uso di internet che decretò la nascita del World Wide Web (Rete intorno al mondo).
Succesivamente nacque il primo browser commerciale Netscape, ma già nel 1995 con l'uscita del suo nuovo sistema operativo Windows, la Microsoft introduceva il suo browser Internet Explorer, rendendo quindi Internet alla portata di tutti!

HTML

HTML (HyperText Murkup Language) è un linguaggio basato su marcatori che consente di collegare in ipertesto diversi documenti.
Un file HTML è un semplice file di testo contenente alcuni marcatori (tags) che definiscono come devono essere rappresentati a video i contenuti del documento.
Un file HTML può essere creato mediante un qualsiasi editor di testo come ad esempio Notepad (o Textpad che useremo nel corso), l'importante è che il file abbia l'estensione html o htm.
Proviamo ad aprire Textpad e a scrivere il testo seguente:

<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
Questa e' la mia rpima pagina HTML. <b>Questo testo e' in grassetto</b>
</body>
</html>

Salviamo il file con il nome MiaPagina.html.(NB: posso salvare il file anche con estensione htm, ma è bene abituarsi ad utilizzare l'estensione completa. L'utilizzo dell'estensione htm è un'eredità lasciata da vecchi sistemi operativi che non gestivano estensioni più lunghe di tre caratteri).
Eseguiamo ora il nostro browser (ad esempio Internet Explorer) e apriamo il file appena creato accedendo al menu File->Apri...
 

Primi Tag HTML

Approfondiamo ora il contenuto del file HTML. Come avrete già notato il testo all'interno del file è delimitato dai marcatori (che d'ora in poi chiameremo 'tag'). Ogni marcatore viene indicato mediante le parentesi angolari (angle brackets) o meglio i simboli "minore" < e "maggiore" >.
Vedremo che in linea di massima ogni marcatore ha un tag per indicare l'inizio del suo contenuto e la fine. La fine si indica facendo precedere al nome del tag lo "slash" /.
Il tage che indica l'inizio del contenuto &grave; detto start tag, mentre quello che ne indica la fine è detto end tag. Un documento HTML comincia sempre con il tag <html> e termina con </html>. Questi tag indicano al browser l'inizio e la fine del documento HTML contenuto nel file aperto.
Ogni documento HTML è composto da una testata e da un corpo. La testata del documento è delimitata dai tag <head> e </head>, e indica al browser una serie di informazioni relative al documento che dovrà visualizzare, come ad esempio il titolo.
Il corpo del documento è delimitato dai tag <body> e </body> e contiene la rappresentazione vera e propria della pagina HTML che dovrà essere visualizzata dal browser.
Nel tag <title> è contenuto il titolo del documento, questa è l'unica informazione presente nella testata (head) del documento HTML che ha un riscontro visivo nel browser. Infatti il titolo viene visualizzato nella barra del titolo (detta Caption) del browser.
Il tag <b> presente nel corpo (body) del documento indica che il testo in esso contenuto dovrà essere rappresentato in grassetto.
NB: Nell'HTML è indifferente scrivere i tag in maiuscolo o in minuscolo (esempio <b> è lo stesso di <B>). È comunque buona abitudine scrivere tutti i tag in minuscolo in quanto con l'introduzione delle nuove specifiche per XHTML definite dal W3C, i tag dovranno essere in futuro tutti minuscoli!!

Altri Tag HTML

Prima di vedere altri tag di rappresentazione del testo, apriamo una piccola parentesi per parlare del W3C. Il W3C (World Wide Web Consortium) è un'istituzione che si occupa di definire e con solidare gli standards sui quali si basa Internet.
Tra i vari standard definiti dal W3C c'&grave; appunto il linguaggio HTML e la sua evoluzione l'XHTML.
Quindi l'insieme dei tag che possono essere utilizzati all'interno di un file HTML è stato definito dal W3C.
Vediamo ora altri tag che ci consentono di rappresentare il testo in modi differenti.
Esistono sei tag dedicati alle intestazioni (heading) e sono <h1>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Ognuno di essi rappresenta un titolo; <h1> è il più grande mentre <h6> è il più piccolo.
Proviamo a modificare il file MiaPagina.html introducendo nel body la seguente riga:

<h1>Questa e' un'intestazione</h1>

Il file completo dovrebbe risultare così:

<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
<h1>Questa e' un'intestazione</h1>
Questa e' la mia rpima pagina HTML. <b>Questo testo e' in grassetto</b>
</body>
</html>

Vediamo ora il risultato della modifica nel browser. Per aggiornare la pagina è sufficiente utilizzare l'apposito comando Aggiorna (Refresh) presente in tutti i browser. Abbiamo quindi introdotto un nuovo elemento (HTML Element) nella nostra pagina: un'intestazione.
Vediamo ora il tag <p>. Questo tag serve ad identificare un paragrafo. Nel rappresentare un paragrafo il browser inserirà automaticamente una riga vuota al termine del paragrafo stesso.
Vediamo un esempio:

<html>
<body>

<p>
Questo e' un paragrafo
scritto come esempio nel corso della prima lezione.
Come si pu? notare anche se vado a capo nel "sorgente" del
testo HTML, il browser visualizza tutto di seguito.
</p>

<p>
Questo &grave; un altro paragrafo che mi consente di notare
che il browser inserisce automaticamente una riga vuota tra un paragrafo e l'altro.
</p>

<p>
Il numero di righe presenti in un paragrafo dipende dalla dimensione
del browser. Vedremo successivamente com'e' possibile forzare l'"a capo".
</p>

</body>
</html>

Faccio notare che eventuali spazi aggiunti forzature di "a capo" nel testo vengono ignorate nella rappresentazione del documento.
Ora vediamo come possiamo mandare a capo il testo nei paragrafi. Utilizziamo il tag <br />. Come si può notare il tag è scritto in un modo leggermente diverso rispetto a quanto visto finora.
BR infatti è un tag vuoto (Empty Tag) che significa che per definizione non può contenere alcun elemento (HTML Element) al suo interno. Pertanto esso si apre e si chiude in un solo tag ponendo lo "slash" / alla fine del tag <br / >.
Modifichiamo il documento dell'esempio precedente per mandare a capo le righe dei paragrafi a nostro piacimento.
Un altro Empty Tag simile al <br /> è <hr /> Horizontal Rule (separatore orizzontale). Questo tag inserisce una riga orizzontale per separare i contenuti del nostro documento.

Prima di chiudere la lezione vi introduco un tag che vi consente di inserire commenti all'interno del vostro "codice" HTML. È il tag per i commenti: ogni commento comincia con <!-- e termina con -->. Tutto il testo che viene scritto all'interno di questi due tag viene ignorato dal browser e quindi non ha alcuna rappresentazione.
Esempio:

<p>
Questo e' un paragrafo<br />
<!-- Questo e' un commento -->
su due righe
</p>

 

Prossimamente...

Nella prossima lezione vedremo come allineare il testo dei paragrafi al centro, a destra e in modo giustificato e come inserire immagini e collegamenti ad altri documenti.
 

Freelance Jobs

Credits

x

Layout e Contenuti © Stefano Pozzati (POZZware.com)
Realizzazione Tecnica e Grafica © Stefano Pozzati (POZZware.com)
Hosting - Aruba (www.aruba.it)
Immagini del titolo © Shunya Yamashita (http://shunyama.web.fc2.com/)
 

Realizzato con:  WebSitter By Pozzware.com Browser compatibili:  Explorer Internet Explorer 6
Firefox Mozilla FireFox 2
Chrome Google Chrome
 
Strumenti:  FCK Editor
JQuery
Valid XHTML 1.0 Transitional CSS Valido!