Cos'è un sito Web
XHTML

~ Indice ~

• L'ipertesto
• Elementi di orientamento per l'utente
• Il browser
• Il linguaggio html
  • I marcatori
  • I tags

• L'architettura di una pagina web
  • L'indentazione
  • La head
  • Il body
  • Il Doctype
• La finestra del browser
• I commenti al codice
• La Formattazione del testo
  • Gli attributi ai tags
  • I percorsi (path)

I tags

l'xhtml esige che i tag siano sempre chiusi, nonostante la benevolenza di alcuni browser che permettono una corretta visualizzazione benché questi non siano chiusi

vediamo due tipi di tag

• - a coppie (sono la maggior parte dei tag)
  • <a> riferimento </a>
  • <p> paragrafo </p>
  • ...
• - singoli
  • <br />
  • <hr />
  • ...

gli elementi e l'indentazione

elementi in linea:

• <a> </a>
• <em> </em>
• <strong> </strong>

elementi di blocco

• <div> </div>
• <p> </p>
• <ul>
  | <li> primo elemento lista
  | </li>
  | <li>secondo elemento lista
  | </li>
  </ul>
  

Tag particolari

Gli elenchi

possono essere di due tipi:
- ordinati
- non ordinati

Gli elenchi ordinati

hanno un puntatore di tipo alfanumerico, la sintassi sarà:

<ol>   <li> numero uno </li>   <li> numero due </li> </ol>

Gli elenchi non ordinati

hanno un puntatore di tipo grafico, la sintassi sarà:

<ul>   <li> questo </li>   <li> quello </li> </ul>

Definition list

Se intendiamo articolare una lista di definizioni, utilizzeremo gli elementi dl, dt e dd dove dl è il contenitore degli elementi dt e dd. È particolarmente usato nei dizionari o quando l'autore intede spiegare un termine dettagliatamente.
Il tag dt contiente il termine che intendiamo definire, mentre nel tag dd diamo la descrizione del termine.

Sintassi:
<dl>
<dt>Dweeb
<dd>young excitable person who may mature into a <EM>Nerd</EM> or <EM>Geek</EM>

<dt>Hacker
<dd>a clever programmer

<dt>Nerd
<dd>technically bright but socially inept person

</dl>

L'architettura di una pagina web

Sarebbe un buon uso pensare al documento xhtml come un insieme di blocchi al cui interno stanno altri elementi.

All'interno di questa struttura di scatole cinesi, si raccomanda di non dimenticare il rapporto genitore-figlio, importante per non generare errori in fase di validazione, così come per lo sviluppo di pagine dinamiche attraverso l'uso di DOM

La regola d'oro dell'xhtml è pensare in maniera architettonica, per esempio nella realtà non potremmo mai immaginare che una stanza contenga un intero edificio, o un piano.
Così gli elementi in linea non potranno contenere degli elementi di blocco al proprio interno.
Immaginiamo, per esempio, il body del nostro documento come fosse un edificio molto grande, che al suo interno ha, a partire dalla cima, una soffita, tanti appartamenti centrali, il garage: tutte queste strutture o ali del palazzo potrebbero essere i nostri div, vale a dire dei contenitori generali che definiscono l'identità della struttura.
All'interno di queste macrostrutture ci possono essere dei piani (per esempio i paragrafi, oppure degli stessi div) ed all'interno dei piani degli appartamenti (corpo del testo in grassetto, corsivo all'interno di un paragrafo) oppure delle scale o ascensori, le cui porte saranno i tag <a> </a> che danno l'ipertestualità e la possibilità di passare da una pagina ad un'altra (link) o da un paragrafo all'altro del documento attraverso delle ancore.

Questo intende essere solo un esempio per apprezzare al meglio l'architettura che un documento deve avere, non si possono infatti collocare dei div all'interno di un paragrafo e via dicendo (elementi di blocco all'interno di elementi in linea).
Passiamo all'analisi di una pagina in xhtml: una buona regola, per rendere il nostro codice leggibile, sia da noi stessi in un secondo momento, che per gli altri sviluppatori è l'indentazione.

L'Indentazione è un piccolo artificio grafico che ci permette di visualizzare il codice in maniera ottimale per capirne le gerarchie, basta infatti apporre una tabulazione (tasto tab, che riconosciamo sulla tastiera con due frecce) o dove ciò non fosse possibile con qualche spazio (solitamente 4).
Un documento ben indentato è così leggibile nella sua architettura già dal primo impatto visivo, alcuni editor ci permettono anche di visualizzare una specie di ramificazione tra i tag, così come disegnata sotto.

Doctype
<html>
|
|  <head>
|  |
|  |   <title>
|  |   | Titolo pagina
|  |   </title>
|  |
|  </head>
| 
|  <body>
|  | 
|  |   <div>
|  |   |   <p>
|  |   |   | testo
|  |   |   </p>
|  |   </div>
|  |
|  </body>
</html>

La <head>

Nella head sono contenute delle metainformazioni sul documento e sul sito, normalmente non visualizzabili, sono destinate a motori di ricerca o agli sviluppatori

Gli elementi della head

• <title> 

  - serve per dare un nome alla pagina, solitamente è visualizzato nel bordo superiore della finestra del browser

• <meta> 

  - i meta tags forniscono una serie di informazioni non visualizzate nell'output della pagina, ma utilizzate dai motori di ricerca e contengono informazioni per gli sviluppatori, tra questi possiamo ricordare:
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <meta name="author" content="arums" />
  • <meta name="copyright" content="Ogni immagine o scritto codesente in questo sito sprovvisto di link diretto o di fonte è rilasciato sotto licenza Creative Commons (http://creativecommons.org/licenses/by-nc-sa/2.5/it/)">
  • <meta name="robots" content="index, follow">
  • <meta name="keywords" content="lista parole chiave, separate da una virgola">

• <link> 

  - il tag link ci permette di far riferimento ad un altro documento che servirà per apparentare per esempio un foglio di stile al nostro file xhtml

  <link href="home.css" rel="stylesheet" type="text/css" />

  ricordiamo che un altro modo per inserire il codice css nella nostra pagina (nel caso in cui: si riferisse ad una sola pagine, il codice fosse molto corto dunque non andrebbe a pesare troppo sulla pagina xhtml) è l'utilizzo del

  <style type="text/css"> body { background: red; } </style>

  .

Il <body>

Il corpo del documento conterrà tutte le informazioni consultabili.
Sopra abbiamo visto gli esempi di un contenitore <div>, con all'interno un paragrafo <p> che contiene del testo.

Il Doctype. Alcune noterelle riguardo il linguaggio xml.

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

Cosa significa questo pasticcio di tag?

In realtà questo è un tag xml che vie preposto all'inizio del nostro documento html per spiegare l'identità del documento, la "grammatica" che verrà seguita e collegarlo alla grammatica ufficiale xhtml redatta dal W3.

Il W3 è un organismo internazionale che si occupa di standardizzare le regole di formattazione dei contenuti web.
L'xml è un metalinguaggio (in soldoni un linguaggio che può crearne altri) che permette di definire i contenuti di un qualsiasi testo, negli ultimi anni è andato sviluppandosi sempre di più, permettendo la configurazione di contenuti, dati, etc. attraverso grammatiche definite a livello internazionale.

Con questa semplice riga noi attestiamo che il nostro documento è di tipo Xhtml e che segue la rigida grammatica STRICT (esistono altre grammatiche più permissive, ma al momento il web sta volgendo nel seguire questa), ciò significa che il nostro documento sarà completamente accessibile.

Nota sull'accessibilità: un vecchio documento html, con la presenza di tabelle per l'impaginazione grafica o permissività quali la non chiusura dei tag, rendeva ardua, se non inafferrabile, la lettura e renderizzazione del documento, oltre la mancanza di standard definiti, per applicazioni quali gli screen reader, lo stesso si può dire oggi per tutti quegli apparecchi (palmari, cellulari etc) che necessitano di chiare regole per la formattazione dei testi.

Da notare nella finestra del browser

• * la barra del titolo nella finestra
• * la cronologia del browser (per firefox ctrl+h)
• * la barra degli indirizzi del browser
• * il documento xhtml (per firefoz ctrl+u)

Scrivere un commento:

<!-- commento -- > (in xhtml)
/* commento */ (nei css)

La Formattazione del testo:

La categoria dei titoli va da h1 a h6, secondo delle grandezze predefinite, produce un ritorno a capo.

il codice: come far visualizzare nella pagina i cosiddetti caratteri speciali.

Tutti i caratteri che conosciamo (già dall'epoca in cui dalla dattilografia si doveva passare all'informatica) possiedono un codice che lo identifica univocamente, con lo sviluppo delle tecnologie ed il livello internazionale di queste si è dovuto pensare a come poter codificare tutti i caratteri che debbono essere disponibili non solo in varie lingue, ma anche in molti alfabeti differenti.

Per l'html potremmo usare un codice particolare, che si può trovare in rete digitando su un motore di ricerca codice ascii o html, per esempio, come abbiamo visto i tag che contengono il testo nelle pagine html sono caratterizzati dall'essere inseriti all'interno di due simboli < minore e > maggiore, per poter visualizzare questi simboli sarà necessario usare un codice particolare che faccia capire al browser che intendiamo il simbolo vero e proprio e non stiamo aprendo semplicemente un tag.

Per far ciò, con l'esempio di sopra digiteremo nel nostro codice xhtml &lt; &gt;

Gli attributi ai tags

Molti tags possono avere degli attributi (uno o più d'uno) che servono per introdurre parametri che ci serviranno a specificare l'uso di quel tag.

Al parametro è associato un valore, facciamo un esempio pratico:
<nometag nomeattributo="valore"> Contenuto </nometag>
<div id="contenitore"> Ecco il contenuto! </div>

l'identità del div sopra citato è contenitore, con questo attributo potremo in seguito rielaborare l'aspetto grafico di quel particolare div attraverso i css.

I percorsi (path)

Abbiamo accennato, durante la descrizione del significato dei linguaggi di mark-up alla caratteristica dell'ipertesto, passiamo ora a spiegare come poter connettere, linkare, testi differenti. Il nostro testo, necessiterà, laddove riterremo necessario apporre il link, vale a dire il collegamento ipertestuale, del tag <a>, così espresso:
<a> segui questo link </a>
cliccando sul testo "segui questo link" l'utente sarà reindirizzato ad un'altra pagina.
esprimeremo l'indirizzo a cui deve puntare il testo attraverso l'attributo href
potremo comunque avere nel nostro testo diversi tipi di link:

Interni ed esterni

Collegamenti esterni.

<a href="http://www.esempio.org"> Link </a>
<a href="L:percorso_assoluto_di_un file a partire dalla radice"> Link </a>
<a href="/percorso_relativo_di_un file"> Link </a>

Ricordare che è una buona norma evitare gli spazi nel denominare file etc.

tornare indietro (salire) di una cartella in un percorso relativo:
href="..\pagina1.html"

Collegamenti interni.

Potremmo avere un documento molto lungo oppure semplicemente diviso in sezioni, un indice gioverebbe alla comprensibilità e dunque necessiteremmo dei collegamenti interni al testo che leghino il punto dell'indice alla sezione interessata.
In questo caso ci vengono incontro le ancore interne. Per utilizzarle scriveremo il codice
<a href="#sezione_2">Clicca per andare alla sezione 2</a> <a name="sezione_2">Sezione 2 </a>