Anatomia di un sito web
Un sito web, così come noi lo vediamo nel browser, è il risultato di un'interpretazione. E' l'interpretazione che il browser dà di un codice scritto con un editor di testo o prodotto da un programma per la realizzazione di pagine web. Un sito, quindi, non è altro che un insieme di righe di codice, appartenenti a più linguaggi, di programmazione o meno.
Il linguaggio base è l'HTML (HyperText Markup Language), un linguaggio di marcatura, anche se ora è più utilizzato l'XTML (eXtensible HyperText Markup Language). Si definisce linguaggio di marcatura un linguaggio che utilizza dei marcatori, ossia delle espressioni codificate. Altri linguaggi affiancano l'HTML nello sviluppo di un sito internet. I fogli di stile, o CSS (Cascading Style Sheet), sono utilizzati per la rappresentazione delle pagine, ossia per stabilire le regole di tipografia di una pagina (famiglia, colore e grandezza del testo, colore ed effetti dei link, dimensioni di tabelle e contenitori, come div e paragrafi, ecc.); il linguaggio javascript, un linguaggio di programmazione, è utilizzato per soddisfare diverse esigenze, come ad esempio un'immagine che cambia al passaggio del mouse, o le news scorrevoli, ecc.; il linguaggio php (PHP: Hypertext Preprocessor) è un altro linguaggio di programmazione, utilizzato per realizzare pagine web dinamiche (come ne vediamo nei siti di commercio elettronico) e per altre applicazioni.
Questa premessa è per chiarire che diversi linguaggi intervengono nello sviluppo e nella realizzazione di un sito web, che le pagine che noi comunemente vediamo in rete sono il risultato di un lavoro di scrittura di codice (oltre, ovviamente, ad un lungo lavoro progettuale, alla preparazione della grafica e alla scrittura dei contenuti) eseguito dietro le quinte.
Analizziamo adesso tutte le parti, in ordine di apparizione, che compongono un sito internet, una sorta di anatomia del codice che viene scritto per essere interpretato dal browser di navigazione.
La definizione del tipo di documento o DTD
Il primo elemento che deve apparire all'interno del codice HTML di una pagina web è la definizione del tipo di documento, o DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> In base a questa definizione sappiamo che la pagina web è scritta utilizzando l'XHTML 1.0. Ma a che scopo inserire questa definizione? La DTD stabilisce il linguaggio da utilizzare all'interno della pagina e quindi quali elementi possono essere consentiti e quali no.
Nell'HTML, ad esempio, il codice da scrivere per l'inserimento di un'immagine è:
<img src="">
Nell'XHTML, invece, il codice diventa:
<img src="" /> ossia il tag img viene chiuso.
L'elemento <html>
Questo elemento delimita l'intero documento, ossia l'intera pagina web. Viene scritto subito dopo la DTD e la sua chiusura, , viene inserita a fine pagina, come ultimo elemento.
L'elemento <head>
Successivamente viene racchiusa nel tag una serie di informazioni che riguardano la pagina web. Queste informazioni sono fornite mediante l'uso di altri tag o marcatori. Parlerò dei principali, senza dilungarmi su tutti quelli realmente esistenti.
<title>Titolo pagina</title> rappresenta il titolo della pagina, importantissimo ed utile per i motori di ricerca. E' il titolo che leggiamo in alto nel browser quando apriamo un sito, è il titolo che leggiamo nei risultati che ci restituisce un motore di ricerca a seguito di una nostra richiesta.
I meta tag o metadati
Danno informazioni agli utenti e ai motori di ricerca sulla pagina web in questione.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> stabilisce la codifica dei caratteri, ossia l'insieme di lettere e simboli utilizzati in un sistema di scrittura. La codifica iso-8859-1 ci dice che le lettere accentate, ad esempio, non devono essere scritte servendosi degli appositi tasti della tastiera, altrimenti il rischio è che, se il server riceve una tabella codici diversa o se il browser è impostato per una tabella codici diversa, le lettere accentate non si vedranno, potrebbero essere sostituite da strani simboli. La lettera è, ad esempio, dovrà essere scritta è
<meta name="description" content="Descrizione pagina"/> la descrizione di una pagina web, altro meta tag importante. La descrizione fornisce informazioni, sia agli utenti che ai motori di ricerca, sul contenuto della pagina web. Leggiamo la descrizione della pagina sotto al titolo nei risultati che otteniamo in seguito ad una ricerca.
<link rel="stylesheet" href="stile.css" media="screen" type="text/css" /> Il tag link stabilisce una relazione fra la pagina web e un altro file. In questo caso la relazione è fra la pagina web ed il foglio di stile. Tutte le regole stabilite all'interno del foglio di stile chiamato stile.css, tramite il tag link, sono ora applicate alla pagina web.
Il corpo della pagina web
Dopo il tag <head>, che abbiamo visto fornire informazioni di tipo tecnico sulla pagina web, informazioni non visibili a livello macroscopico nella pagina visualizzata, passiamo ad analizzare il tag body, ossia il vero corpo della pagina web, tutte quelle informazioni, quindi, visibili all'utente nel momento in cui entra in una pagina web.
Il tag <body> va aperto dopo la chiusura del tag head, ossia dopo , e va chiuso, col tag , subito prima del tag .
Che cosa troveremo al suo interno? L'impaginazione del sito.
Innanzitutto ci sarà, o meglio ci dovràessere, un contenitore, ossia un elemento che contiene paragrafi, elenchi, menu di navigazione, immagini, video, ecc., tutto ciò che abbiamo intenzione di inserire nella nostra pagina.
Spesso si usano le tabelle per impaginare un sito, ed ecco che potremmo leggere nel codice una situazione come questa:
<table cellpadding="0" cellspacing="0"> <tr> <td><img src="img/logo.gif" alt="logo"></td> </tr> </table>
o, meglio, se si utilizzano i contenitori generici div:
<div id="logo"><img src="img/logo.gif" alt="logo"></div>
L'uso dei div, anziché delle tabelle, alleggerisce il peso della pagina ed aumenta la sua accessibilità.
All'interno del contenitore inseriremo un menu di navigazione, che potrà essere, secondo le nostre esigenze, orizzontale o laterale, o anche composto (uno o più menu orizzontali uniti a uno o più menu laterali).
Quindi ci sarà il vero e proprio contenuto della pagina, quindi una serie di paragrafi, tramite il tag <p>, di titoli, i tag <h1>, <h2>, ecc., di eventuali elenchi, i tag <ul> e/o <ol>, altri div contenitori per inserire immagini, video, box di testo o altro, moduli di invio email, col il tag <form> ed altri tag ad esso associati.
La disposizione di tutti gli elementi che dovranno comparire all'interno di una pagina web deve essere decisa in fase progettuale.
Un esempio di pagina web dal vivo
Ecco un esempio di pagina web, sfoltita al massimo per semplificare il concetto. Ho inserito dei commenti, tramite le righe <!-- commento -->, che realmente si possono trovare in una pagina web e che non vengono lette dal browser. Sono utili per separare i vari elementi di una pagina.
<!-- Definizione del tipo di documento o DTD -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- delimitazione dell'intera pagina -->
<html>
<!-- testata della pagina -->
<head>
<!-- titolo della pagina -->
<title>Titolo pagina</title>
<!-- codifica dei caratteri -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- descrizione della pagina -->
<meta name="description" content="Descrizione pagina%u201D />
<!-- link al foglio di stile della pagina -->
<link rel="stylesheet" href="stile.css" media="screen" type="text/css" />
<!-- fine della testata della pagina -->
</head>
<!-- corpo della pagina -->
<body>
<!-- contenitore in cui inserire menu, paragrafi, immagini, ecc. -->
<div id="contenitore">
<!-- logo del sito -->
<div id="logo"><img src="img/logo.gif" alt="logo"></div>
<!-- contenitore del menu di navigazione -->
<div id="menu">
<!-- menu di navigazione -->
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="chisiamo.htm">Chi siamo</a></li>
<li><a href="prodotti.htm">Prodotti</a></li>
<li><a href="servizi.htm">Servizi</a></li>
</ul>
<!-- fine del contenitore del menu di navigazione -->
</div>
<!-- contenitore del contenuto, in cui inserire paragrafi, titoli, immagini, ecc. -->
<div id="contenuto">
<!-- titolo della pagina, ripete il titolo scritto nel tag title -->
<h1>Benvenuti nel mio sito</h1>
<!-- sottotitolo della pagina, dà ulteriori informazioni sulla pagina -->
<h2>Sito aziendale</h2>
<!-- inizio del paragrafo -->
<p>
<!-- fotografia dell'azienda -->
<img src="img/foto.jpg" alt="foto" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus massa ut nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque consequat. Maecenas ultrices, purus non vehicula venenatis, metus urna varius tellus, quis eleifend nulla est nec dui. Praesent at sem vel diam iaculis volutpat. Donec mattis. Praesent odio. Cras tristique nibh in urna. Cras quis metus sed libero pretium tempor. Integer ac nunc nec sapien porttitor consequat. Cras pharetra. </p>
<!-- fine del contenuto -->
</div>
<!-- fine del contenitore -->
</div>
<!-- fine del corpo della pagina -->
</body>
<!-- chiusura dell'intera pagina -->
</html>
Ora è chiaro cosa si nasconde all'interno di un sito internet, che non è soltanto ciò che si vede nel browser, ma è soprattutto una lunga lista di righe di codice, che interagiscono fra di esse per poter essere interpretate dai browser di navigazione ed offrire a noi utenti informazioni, sotto forma di testo, immagini, video, animazioni.
Informazioni sull'Autore
Daniele Imperi - web designer
Fonte: Article-Marketing.it