Internet è una grande rete che collega migliaia di computer in tutto il mondo. Tra questi computer ci sono due tipi fondamentali: i server e i client.

I server sono quei computer dove sono salvati i siti web; mentre è definito client ogni PC che invia una richiesta ad un server per visualizzare un sito web.
Ogni volta quindi, che si accede ad un sito, il proprio computer invia una richiesta al server del sito in questione, il quale risponde mandando indietro le informazioni richieste e permettendo così di visualizzare sullo schermo il contenuto della pagina.

Per navigare in Internet si utilizzano degli appositi programmi chiamati “browser”, i quali ricevono dai server i messaggi di risposta, interpretano i linguaggi che sono alla base dei siti web (XHTML, CSS) e ne consentono in questo modo la visualizzazione. I browser più diffusi sono Mozilla Firefox, celebre per la sua versatilità e usabilità, apprezzato specialmente per la quantità di add-on disponibili, poi Google Chrome, apprezzabile per la velocità di navigazione ed altri tra cui citiamo Netscape, Opera, Safari (Mac OS), IE (Windows).
Per estendere le funzionalità dei browser si possono installere dei componenti aggiuntivi, o add-on, i più utilizzati per lo sviluppo web sono Firebug, che consente di visualizzare e modificare il codice delle pagine web e WebDeveloper, che mette a disposizione degli strumenti per controllare e testare le pagine web.

Introduzione, Come funziona un browser

L’HTML (”HyperText Markup Language”, ovvero “Linguaggio di Contrassegno per gli Ipertesti”) è un linguaggio web che crea, tramite degli appositi selettori chiamati ‘TAG’, la struttura base di una pagina web. L’HTML, di cui è stata rilasciata la versione 5.0, è stato oggetto di un significativo cambiamento: l’introduzione dell’XHTML (giunto oggigiorno alla versione 2.0). L’elemento chiave è la “X” che sta per exstesible e significa che il linguaggio HTML è stato fuso con l’XML (”Extensible Markup Language”, “Linguaggio di Contrassegno Estendibile”). La novità rispetto al suo predecessore è che ora l’XHTML può interagire più liberamente con gli altri linguaggi di web-design e programmazione come CSS, PHP, JavaScript, consentendo così a web-designer e programmatori di lavorare più efficacemente.
Dal punto di vista pratico comunque, non cambia nulla, l’XHTML si basa quasi completamente sulla sintassi HTML, che è perciò indispensabile conoscere.

Cos'è XHTML, I vantaggi dell'XHTML

Come suddetto, all’interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione.
I tag vanno inseriti tra parentesi uncinate <TAG>, la chiusura del tag viene indicata con una “/” (simbolo comunemente detto “slash”), in questo modo: </TAG>. All’interno delle parentesi d’apertura, dopo il nome del tag, possono essere aggiunti o meno degli attributi, i quali a seconda del valore assegnato modificano la normale visualizzazione del tag e/o altri parametri. Il contenuto va inserito tra l’apertura e la chiusura del medesimo tag.
La forma sintattica generale per tag, attributi e valori è la seguente:

<tag attributo="valore">contenuto</tag>

Ci sono infine alcuni tag particolari, detti chiusi per i quali non è previsto contenuto e sono perciò così espressi: <TAG />.

Una caratteristica dei tag è che possono essere annidati uno dentro all’altro; questa peculiarità della sintassi HTML, detta annidamento permette di organizzare gli elementi di una pagina in modo più efficace.
Vi è poi l’indentazione, una convenzione per tutti gli utilizzatori di HTML, che consiglia di scrivere i tag annidati con una tabulazione in più rispetto al tag-contenitore:

<tag1>
   <tag2>
       <tag3>contenuto</tag3>
   </tag2>
</tag1>

I tag HTML: come scriverli

La prima cosa da fare per avere una pagina XHTML (che si ricorda, si basa sulla sintassi HTML) è creare un file e salvarlo con l’estensione “.html”, in modo che il browser possa riconoscerlo in quanto tale.

Estensioni dei file, Struttura pagina XHTML, Intestazione pagina XHTML

All’interno del file, per validarlo nel formato .html, è obbligatorio inserire, prima di tutto il resto, il Doctype, che esplicita quale tipo di XHTML è contenuto nella pagina: ve ne sono 3 tipi, ma quello che noi utilizziamo è la DTD Strict, la definizione più rigida e centrata esclusivamente sulla struttura del documento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I Doctype

Subito dopo il Doctype va inserito il tag < html >, obbligatorio in XHTML, che contiene tutti gli altri tag della pagina. Il tag < html > necessita di un attributo, anche questo obbligatorio, detto “elemento radice”, visibile nell’esempio sottostante, che consente all’XHTML un’implementazione corretta di altri linguaggi e specifiche settoriali:

<html xmlns="http://www.w3.org/1999/xhtml">
      contenuto pagina
</html>

L'elemento radice

All’interno di < html > vanno inserti i tag <head> e <body> le due parti principali di su cui si basa ogni pagina XHTML.
Nel tag <head> si specificano tutte le informazioni che non vengono direttamente visualizzate nella pagina, ma che riguardano il modo in cui il documento deve essere letto e interpretato e che sono comunque di grande rilievo. Queste informazioni sono il titolo (da includere nel tag <title>), la directory dei CSS, gli script JavaScript, ecc... Il tag <body> invece costituisce il vero e proprio corpo del documento ed è la sezione in cui si sviluppa il contenuto, include perciò tutti i tag che formano la struttura della pagina e che sono visibili all’utente.

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Mia pagina XHTML</title>
   </head>
   <body>
      contenuto pagina (altri tag)
   </body>
</html>

La struttura della pagina

I tag contenuti all’interno di <body> si suddividono in elementi blocco ed inline. Gli elementi blocco hanno la caratteristica di creare una nuova linea all’interno del flusso del documento e di occuparla interamente, costringendo così gli altri elementi ad essere inseriti nella riga successiva.
Gli elementi inline invece, vengono affiancati nella stessa riga fino a quando questa non è completamente riempita o è presente un elemento blocco.
Per quanto riguarda l’annidamento dei tag, è consentito inserire all’interno di un elemento inline un elemento blocco ma non è possibile fare il contrario.

Il corpo del documento

I tag di scrittura sono essenzialmente due: <p> e <span>. L’unica differenza è che il primo è un elemento blocco, mentre il secondo è inline.
Quindi il seguente esempio:

<p>ciao mondo!</p>
<span>che bella giornata, </span>
<span>oggi splende il sole!</span>

Darà come risultato:

ciao mondo!
che bella giornata, oggi splende il sole!

Come si può notare, <p>, elemento blocco, occupa tutta la riga, mentre <span> elemento inline affianca il contenuto dei tag nella stessa riga.

In XHTML esistono dei tag speciali per i titoli. Essi sono i tag <hn>, in cui “n” deve essere seguito da un numero compreso tra 1 e 6; più piccolo è il numero, più grande sarà il titolo, quindi <h1> è la formattazione più grande mentre <h6> la più piccola! NB: i titoli sono elementi di blocco, quindi occupano tutta la riga! Inoltre hanno la peculiarità di creare una riga vuota prima e dopo i contenuti!

La struttura è quindi la seguente:

<h1>Titolo h1</h1>
<h3>Titolo h3</h3>
<h5>Titolo h5</h5>

Che verrà visualizzato così:

I tag contenitori, come dice la parola, sono tag che creano una sorta di scatola, nella quale è possibile inserire testi, immagini e più avanti vedremo che ci saranno molto utili perchè saranno colorabili e modificabili internamente. Il <div> è il principale di questi, crea un semplice spazio in cui sarà possibile inserire tutto quel che vogliamo. La struttura del tag è molto semplice, ed è questa:

<div>
  <span>contenuto vario, non per forza uno tag span!</span>
</div>

Il risultato sarà questo, anche se non lo vedete chiaramente, la scritta interna allo span è inserita all’interno di uno spazio che la contiene:

contenuto vario, non per forza uno tag span!

I tag <hr /> e <br /> sono tag chiusi, hanno quindi una sintassi diversa dagli altri tag, come già spiegato in una precedente lezione.
Il primo serve a fare un po d’ordine nella pagina, creando una linea orizzontale che occupa tutta la riga ed è quindi un elemento di blocco.
Il secondo, invece, serve ad andare a capo.

Esempi:

  <span>Ciao Mondo</span>
  <hr />
  <span>Ciao Mondo2</span>
  <span>Adesso andiamo a capo</span>
  <br />
  <span>Fatto!</span>

Risultato:

Tutti i TAG principali

I commenti sono una cosa semplicissima, non sono visibili all’utente che visita il sito, ma lo sono al webmaster, e il loro compito è di migliorare il lavoro dello stesso. E’ ininfluente scriverli o meno, ma ci possono fornire dei “suggerimenti”, magari per ricordare meglio una cosa. La sintassi è la seguente:

<!--questo è un commento-->

I commenti

Il tag <a> serve a creare un collegamento ad un’altra pagina, in inglese link.
Questo tag ha un attributo obbligatorio, href, nel quale viene inserito l’indirizzo della pagina da linkare; all’interno del tag si immette poi il testo che si desidera venga visualizzato nella pagina, il quale una volta cliccatoci sopra richiamerà la pagina inserita come valore nell’attributo href (solitamente il testo in questione è sottolineato in blu, ma si può anche cambiare con i CSS).
La struttura sarà quindi di questo tipo:

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

Che verrà visualizzato così:

Tronweb

I link e l'ipertestualità

La struttura di un sito, man mano che questo diventa più grande, sarà sempre più complessa. Costituito da decine di file e cartelle, bisogna infatti mantenere un po’ d’ordine, soprattutto se ad usarlo non siete soltanto voi. Questo serve soprattutto a poter trovare con velocità e facilità i vari file contenuti nelle cartelle e collegarli tra loro tramite i link. Per fare questo si possono utilizzare due tipi di percorsi: i percorsi assoluti e i percorsi relativi.

Con i percorsi assoluti non dobbiamo fare altro che scrivere per esteso la posizione del file nella nostra directory. Ad esempio:

Sistema operativo Linux:
<a href="/home/user/miacartella/mio_file.hmtl">Link a 'mio_file.hmtl'</a>
Sistema operativo Microsoft:
<a href="C:\miacartella\mio_file.hmtl">Link a 'mio_file.hmtl'</a>

Con questa struttura si inserisce in href il percorso per raggiungere il file desiderato; ad ogni simbolo ‘/’, detto slash (’\’ backslash per i SO Microsoft), si indica che il file è situato ad un livello successivo, dentro alla cartella indicata dopo il simbolo.
NB: ricordarsi che il nome di un file è composto dal nome vero e proprio e dall’estensione, la quale identifica il tipo di file: è perciò diverso scrivere “index” da “index.html” ! Inoltre è buona norma evitare di inserire spazi nella nomenclatura di file e cartelle.

Possiamo anche inserire direttamente l’URL completa di un sito:

<a href="http://www.tronweb.it/corsi">Corsi TronWeb</a>

Che darà come risultato: Corsi TronWeb

Mentre i percorsi assoluti vanno a cercare il file direttamente con la posizione assoluta, i percorsi relativi fanno riferimento al file di partenza dal quale ci si sposta per trovare il file di arrivo.
Supponiamo di avere la seguente situazione:

Adesso proviamo ad inserire un collegamento dalla pagina index.html a interna.html:

<a href="./prima/interna/interna.html">Link a 'interna.hmtl'</a>

La sintassi ‘./’ significa che il riferimento è la cartella contenitrice del file; si parte quindi dalla cartella che contiene index.html (e tra le altre pure la directory denominata prima). Dopodiché si inseriscono separate da uno ‘/’ i nomi delle varie cartelle fino a quando raggiungiamo il file.

Nel caso invece fosse necessario fare il percorso inverso:

<a href="../../index.html">Link a 'index.hmtl'</a>

‘../’ sta per “sali di un livello”, ci si sposta quindi alla cartella superiore; nell’esempio troviamo ripetuta due volte questa formula perché index.html è contenuto in una cartella situata due livelli sopra a quello di partenza.
È possibile sfruttare entrambi questi esempi assieme, come nel caso in cui bisognasse spostarsi da interna.html a seconda.html.

<a href="../../seconda/seconda.html">Link a 'seconda.hmtl'</a>

Percorsi assoluti e relativi

Per inserire un’immagine si usa il tag chiuso <img> il quale ha un attributo obbligatorio, src. Il valore di src corrisponde al percorso, assoluto o relativo che sia, dell’immagine che si desidera includere nella pagina.
Ecco un esempio:

<img src="/home/utente/Immagini/logo.png" />

Le immagini

Con l’XHTML c’è la possibilità di creare elenchi, ordinati o non.
Per gli elenchi ordinati si usa il tag <ol> (”ordered list”), mentre per quelli non ordinati <ul> (”unorderd list”). Vi sono infine gli elementi dell’elenco, individuati dal tag <li> (”list item”).

Vediamo ora gli elenchi ordinati, <ol> e le loro caratteristiche :

<ol>
  <li>Primo elemento</li>
  <li>Secondo elemento</li>
  <li>Terzo elemento</li>
</ol>

Il risultato sarà:

1. Primo elemento
2. Secondo elemento
3. Terzo elemento

In base ai valori dell’attributo type si può cambiare il tipo di enumerazione dell’elenco:

• Numeri arabi (di default), type=”1”
• Alfabeto minuscolo (es.: a. b. c...), type=”a”
• Alfabeto maiuscolo (es.: A. B. C...), type=”A”
• Numeri romani minuscoli (es.:i, ii, iii...), type=”i”
• Numeri romani maiuscoli (es.: I,II, III...), type=”I”

Gli elenchi non ordinati, invece, come suddetto sono caratterizzati dal tag <ul>, accompagnato poi dal tag <li> (come negli elenchi ordinati).
Vediamo anche in questo caso un esempio:

<ul>
  <li>Primo elemento</li>
  <li>Secondo elemento</li>
  <li>Terzo elemento</li>
</ul>

Che darà questo risultato:

• Primo elemento
• Secondo elemento
• Terzo elemento

Anche con gli elenchi non ordinati in base all’attributo type si può cambiare l’iconcina di ogni punto dell’elenco:

• Pallino pieno (di default), type=”disc”
• Cerchio vuoto, type=”circle”
• Quadratino pieno, type=”square”

Si consiglia comunque di usare i CSS per definire un tipo di elenco, i quali danno anche la possibilità di inserire un’immagine al posto delle icone.

Gli elenchi

Parleremo ora delle tabelle.
Una tabella si crea con il tag <table>. Esistono poi i tag <tr> e <td> che devono essere l’uno annidato nell’altro, sempre nello stesso ordine dell’esempio:

<table border="1">
  <tr>
    <td>Ciao!</td>
    <td>Ciao!</td>
    <td>Ciao!</td>
    <td>Ciao!</td>
  </tr>
  <tr>
    <td>Ciao!</td>
    <td>Ciao!</td>
    <td>Ciao!</td>
    <td>Ciao!</td>
  </tr>
</table>

Le righe della tabella equivalgono al numero di <tr> presenti. Le colonne invece possono variare da riga a riga in base a quanti <td> vi sono contenuti.
Per comodità aggiungeremo un bordo alla tabella con l’attributo border del tag table, così facendo è possibile visualizzare le celle, bisogna ricordare comunque che è preferibile definire gli attributi, come in questo caso il bordo, utilizzando i CSS:

Ciao!	Ciao!	Ciao!	Ciao!
Ciao!	Ciao!	Ciao!	Ciao!

Struttura base di una tabella

Parliamo ora degli attributi colspan e rowspan, che permettono di espandere una cella in modo da farle occupare più di una colonna o riga.
Essi vanno assegnati esclusivamente al tag <td> e il valore numerico indica di quante colonne o righe deve far parte.
Ma vediamo subito un esempio con colspan per chiarire meglio:

<table border="1">
   <tr>
     <td colspan="2">Cella 1</td>
     <td>Cella 2</td>
   </tr>
   <tr>
     <td>Cella 4</td>
     <td>Cella 5</td>
     <td>Cella 6</td>
   </tr>
</table>

Che verrà visualizzato così:

Cella 1		Cella 2
Cella 4	Cella 5	Cella 6

NB: una cella è stata tolta dalla prima riga per far posto a quella che occupa lo spazio di 2!

Ora vediamo un altro esempio con l’attributo rowspan, che permette di unire due righe.

<table border="2">
   <tr>
      <td rowspan="2">Cella 1</td>
      <td>Cella 2</td>
      <td>Cella 3</td>
   </tr>
   <tr>
      <td>Cella 4</td>
      <td>Cella 5</td>
   </tr>
</table>

Che verrà visualizzato cosi:

Cella 1	Cella 2	Cella 3
	Cella 4	Cella 5

NB: un <td> è stato eliminato dalla riga (<tr>) successiva, come nel caso precedente per far posto a quello doppio!

Colspan e rowspan

Il tag form è uno dei più difficili che affronteremo durante il corso di html, presto al termine. Questo argomento verrà ripreso anche più avanti con il corso di PHP perchè permette di mandare dei dati elaborabili da una pagina php.

Il tag <form> ha due attributi obbligatori, senza i quali non potrebbe funzionare; questi sono action=”./pagina.html” che indica la pagina al quale verrà indirizzato l’utente dopo aver eseguito determinate azioni che fra poco analizzeremo e method=”POST” che ora non ci è di grande aiuto, ma verrà spiegato nel corso di PHP.

Un tag molto comodo per evidenziare la zona del form è il tag <fieldset>, che crea una cornice; a questo è poi associato un altro tag, <legend> che serve a dare un titolo a fieldset. Vi è poi un ultimo tag, <label> (etichetta in inglese) che è un contenitore di testo.
Ma vediamo ora la struttura base di un form:

<form method="POST" action="./miaPagina.hmtl" >  	
   <fieldset>
        <legend>form</legend>
        <label>contenuto form</label>
   </fieldset>      
</form>

Che verrà visualizzato cosi:

form

contenuto form

NB: <fieldset> è solamente un abbellimento grafico, serve solo per “incorniciare”, non confonderlo con il <form>.

La struttura di un <form> Ordinare con <fieldset> e <label>

I tag più importanti di un form sono invece i tag <input>, che ci consentono di inserire dei campi di vario genere con i quali l’utente può interagire per svolgere determinate azioni che saranno interpretate da PHP.
NB: questo è un tag chiuso, che deve quindi essere scritto così:

<label>Inserisci il tuo username:</label>
<input type="tipo" name="nome_del_tag" value="valore" />

La struttura del tag <input> ha degli attributi fondamentali: l’attributo type, indica di che tipo è il campo; troviamo poi gli attributi name e value la cui funzione verrà spiegata sempre nel corso di PHP.
Gli <input>

Ma analizziamo ora i principali tipi di tag input.
Con type=”text” si crea un piccolo rettangolino dove è possibile scrivere.
Con type=”password” la visualizzazione è la stessa ma il testo risulterà nascosto.
Ma vediamo ora un esempio pratico nella sua struttura:

<form method="POST" action="./pagina.html">
  <label>Username:</label>
  <input type="text" name="input" /> <br />
  <label>Password:</label>
  <input type="password" name="pass_prova" />
</form>

e visualizzazione:

Username:
Password:

Gli input di testo

Altra tipo importantissimo di input sono i bottoni. il type=”submit” è appunto un bottone che, una volta schiacciato dall’utente invierà a PHP le informazioni raccolte negli altri input tag. La struttura è la seguente:

<input type="submit" name="invia_dati" value="Invia" />

Che verrà visualizzato cosi:

Un altro bottone, type=”reset” serve a cancellare quello che avevamo scritto precedentemente negli altri tag del form:

<input type="reset" name="delete" value="cancella" />

Provatelo qui:

I bottoni

Con type=”radio” si ottengono dei bottoni circolari. Questi consentono la scelta fra più variabili e per fare in modo che si possa selezionare solamente uno è necessario assegnare lo stesso name ma diverso vaule!
Vediamo subito un esempio:

<label>Maschio</label>       <input type="radio" name="sex" value="male" />
<label>Femmina</label>       <input type="radio" name="sex" value="female" />
<label>Maggiorenne</label>   <input type="radio" name="age" value="mag18" /> 
<label>Minorenne</label>     <input type="radio" name="age" value="min18" />

Come potete notare è possibile selezionare un unico radio per ogni gruppo con attributo name uguale:
Maschio Femmina
Maggiorenne Minorenne

Il type=”checkbox” invece indica un quadratino. In un gruppo di checkbox è possibile selezionarne multipli. Vedi l’esempio:

<label>Basket:</label> <input type="checkbox" name="basket" value="basket" />
<label>Curling:</label> <input type="checkbox" name="curling" value="curling" />
<label>Hockey:</label> <input type="checkbox" name="hockey" value="hockey" />

Si possono selezionare tutti, nessuno, uno o due:
Basket:
Curling:
Hockey:

NB: bisogna specificare un name diverso per ogni checkbox in modo da non sovrascrivere i value assegnati.

Il tag <select> è un input tag che crea un menu a tendina. Diversamente dagli altri input ha una struttura normale, deve cioè essere aperto e chiuso, e al suo interno vanno inseriti tanti tag <option> quanti sono i valori possibili che può assumere. Al tag select è associato l’attributo name mentre ad option value. La struttura si presenta quindi così:

<select name="seleziona_scuola">
   <option value="tron">Tron</option>
   <option value="zanella">Zanella</option>
   <option value="depretto">De Pretto</option>
</select>

Ovvero: Tron Zanella De Pretto

Radio, checkbox e il tag <select>

TEST FINALE