HTML

HYPERTEXT MARKUP LANGUAGE

INTRODUZIONE
ORGANIZZAZIONE DI UN SITO
STRUTTURA ED ELEMENTI BASE:

scrivimi

Per avere il resto del manuale inviami un messaggio e lo riceverai interamente a casa tua. Puoi scegliere di ricevere anche sessioni specifiche.

Specifica  nell'oggetto: Corso HTML.

Contattami per avere  ulteriori informazioni o per risolvere eventuali problemi e dubbi.

 

TESTA

CORPO

COLORI E LISTE

TABELLE

IMMAGINI

VIDEO IN LINEA

AUDIO IN LINEA

COLLEGAMENTI IPERTESTUALI

ANCORE

FRAMES

INTRODUZIONE  

Due concetti fondamentali: multimedia e ipertesto

Tra i diversi aspetti innovativi di World Wide Web, i più notevoli sono decisamente l'organizzazione ipertestuale e la possibilità di trasmettere informazioni integralmente multimediali.

In primo luogo è bene distinguere il concetto di multimedialità da quello di ipertesto. I due concetti sono spesso confusi, ma mentre il primo si riferisce agli strumenti della comunicazione, il secondo riguarda la sfera più complessa dell'organizzazione dell'informazione.

Con multimedialità ci si riferisce alla possibilità di utilizzare contemporaneamente, in uno stesso messaggio comunicativo, più media e più linguaggi.

I documenti multimediali sono oggetti informativi complessi e di grande impatto. Ma più che nella possibilità di integrare in un singolo oggetto diversi media, il nuovo orizzonte, aperto dalla comunicazione su supporto digitale, risiede nella possibilità di dare al messaggio una organizzazione molto diversa da quella a cui siamo abituati da ormai molti secoli. E' in questo senso che la multimedialità informatica si intreccia profondamente con gli ipertesti, e con l'interattività. Vediamo dunque cosa si intende con il concetto di ipertesto.

In primo luogo, per comprendere cosa sia un ipertesto è opportuno distinguere tra aspetto logico-astratto, e aspetto pratico-implementativo. Dal punto di vista logico un ipertesto è un sistema di organizzazione delle informazioni (testuali, ma non solo) in una struttura non sequenziale, bensì reticolare.

Nella cultura occidentale, a partire dall'invenzione della scrittura alfabetica, e in particolare da quella della stampa, l'organizzazione dell'informazione e la corrispondente fruizione della stessa, è essenzialmente basata su un modello lineare sequenziale, su cui si può sovrapporre al massimo una struttura gerarchica. Per capire meglio cosa intendiamo basta pensare ad un libro, il tipo di documento per eccellenza della modernità: un libro è una sequenza lineare di testo, eventualmente organizzato come sequenza di capitoli, che a loro volta possono essere organizzati in sequenze di paragrafi, e così via.

Un ipertesto invece si basa su un'organizzazione reticolare dell'informazione, ed è costituito da un insieme di unità informative (i nodi) e da un insieme di collegamenti (detti nel gergo tecnico link) che da un blocco permettono di passare ad uno o più altri blocchi.

Le informazioni, che sono collegate tra loro nella rete, non sono solo documenti testuali, ma in  generale informazioni veicolate da media differenti (testi, immagini, suoni, video). L'ipertesto diventa multimediale, e viene definito ipermedia.

Il lettore non è vincolato dalla sequenza lineare dei contenuti di un certo documento, ma può muoversi da una unità testuale ad un'altra (o ad un blocco di informazioni veicolato ad un altro medium) costruendosi ogni volta un proprio percorso di lettura.

Naturalmente i vari collegamenti devono essere collegati in punti in cui il riferimento ad altre informazioni sia semanticamente rilevante: per un approfondimento, per riferimento tematico, per contiguità analogica. In caso contrario si rischia di rendere inconsistente l'intera base informativa, o di far smarrire il lettore in peregrinazioni prive di senso.

Dal punto di vista dell'implementazione concreta, un ipertesto digitale si presenta come un documento elettronico in cui alcune porzioni di testo o immagini presenti sullo schermo, evidenziate attraverso artefici grafici (icone, colore, tipo e stile del carattere), rappresentano i diversi collegamenti disponibili nella pagina.

Questi funzionano come dei "pulsanti" che attivano il collegamento e consentono di passare, sullo schermo, al documento di destinazione.

L'incontro tra ipertesto, multimedialità e interattività rappresenta dunque la nuova frontiera delle tecnologie comunicative. Si tratta di un settore nel quale vi sono state negli ultimi anni innovazioni di notevole portata.

Il World Wide Web è una di queste innovazioni: si tratta infatti di un sistema ipermediale; con la particolarità che i diversi nodi della rete ipertestuale sono distribuiti sui vari host che costituiscono Internet.

Attivando un singolo link si può passare a un documento che si trova su un qualsiasi computer della rete.

Origini ed evoluzione

Cominciamo richiamando alcune nozioni che abbiamo già introdotto. HTML sta per Hyper Text Markup Language, ovvero "linguaggio per la marcatura degli ipertesti": una particolare applicazione di un potente metalinguaggio orientato alla descrizione di complesse strutture informative, lo Standard Generalized Markup Language.

HTML in sostanza è un linguaggio composto d'istruzioni (che definiamo tag o marcatori) che vanno inserite all'interno del testo da impaginare. Tali istruzioni informeranno il browser, ad esempio, su quale parte del testo sia il titolo, quale parte vada interpretata come link ipertestuale, in che punto della pagina vadano visualizzate le immagini (e quali immagini occorra visualizzare), e così via. In termini tecnici i marcatori descrivono gli elementi di cui un documento è composto.

Sia il testo, sia i marcatori vanno memorizzati nel semplice formato ASCII. Se ad esempio stiamo utilizzando un qualsiasi word processor (per es. Word Pad) per creare pagine HTML, dobbiamo ricordarci si salvare il file in modalità "solo testo", e non nel formato proprietario del word processor utilizzato. Un documento HTML è dunque un unico file ASCII che include sia il contenuto che vogliamo far visualizzare al browser, sia le istruzioni HTML usate per spiegare al programma come visualizzare quel contenuto.

Il linguaggio HTML descrive la struttura di un documento, ma non ne definisce il suo aspetto sullo schermo, che dipende invece da una molteplicità di fattori, quali la piattaforma usata dal client, il browser, la risoluzione dello schermo.

Non si devono pertanto progettare pagine sulla base del loro aspetto su un determinato computer o un determinato browser. Le pagine devono essere visibili nel maggior numero di browser, dunque ci si deve concentrare nella realizzazione di contenuti chiari, ben strutturati, facili da leggere e da comprendere

Sviluppato per la prima volta nei laboratori del CERN, l'HTML ha subito una veloce evoluzione. Questa ha determinato il diffondersi di diverse versioni de linguaggio, che coesistono con una serie di estensioni introdotte unilateralmente dalle maggiori aziende produttrici di browser, talvolta non compatibili tra loro. Attualmente la versione ufficiale dello standard è quella denominata HTML 4.0, e tutti i browser più recenti condividono la capacità di interpretare in modo coerente la maggior parte delle istruzioni specificate in questo standard.

Lo sviluppo di HTML

L'organo ufficiale del linguaggio HTML è il World Wide Web Consortium (E3C) , che è affiliato con Internet Engineering Task Force (IETF). Il W3C ha pubblicato molte versioni delle specifiche HTML, tra cui HTML 2.0, HTML 3.0, HTML 3.2. e la più recente HTML 4.0. Nel frattempo , i produttori di browser, come Netscape e Microsoft, hanno spesso sviluppato delle proprie "estensioni" HTML al di fuori degli standard in corso e le hanno incorporate nei loro browser. In  alcuni casi, come il comando <CENTER> di Netscape, queste estensioni sono diventate lo standard de facto adottato dagli altri produttori di browser.

L'HTML 2.0, che codifica lo stato attuale HTML, dal giugno 1994, è lo standard di base che tutti i browser, inclusi quelli di testo, dovrebbe supportare L'HTML 2.0 rispecchia la concezione originale HTML ovvero un linguaggio di markup indipendente dallo strumento per visualizzare la struttura delle informazioni, invece di specificare esattamente come le pagine devono essere visualizzate.

Nel mese di maggio 1996, W3C ha rilasciato la bozza di HTML 3.2, che è stata realizzata per riflettere e standardizzare le soluzioni generalmente utilizzate. Perciò HTML 3.2 include i comandi HTML 3.0 che sono stati adottati dagli sviluppatori di browser come Netscape e Microsoft, come pure le estensioni di HTML più diffuse nel suo Position Statement on HTML.

I comandi della versione attuale, HTML 4.0, è supportata dai principali browser.

L'editor utilizzato

Esistono essenzialmente due categorie di editor HTML: editor orientati al codice, ed editor WYSIWYG (What You See Is What You Get, cioè "ciò che vedi è ciò che ottieni").

Gli editor "orientati al codice" permettono di evitare la digitazione di ogni singolo marcatore grazie a pulsanti e menu a tendina. Il testo da impaginare appare misto alle istruzioni HTML, ed ha perciò un aspetto poco familiare per il neofita, ma spesso e preferito perché consente un controllo minuto sul contenuto della pagina. Con simili editor, non v'è dubbio che programmi di questo tipo facilitino notevolmente la realizzazione di pagine Web, specialmente per i più esperti.

Grazie agli editor HTML con modalità WYSIWYG, invece, si potrebbero addirittura creare pagine HTML senza conoscerne la sintassi. Infatti il codice resta invisibile all'utente che interviene sul documento come se fosse un normale testo.

Uno degli più potenti e completi editor HTML in commercio attualmente è HotDog della Sausage Software. E' un programma shareware scaricabile dal suo sito:http://www.sausage.com.


ORGANIZZAZIONE DI UN SITO  

Come i metodi di comunicazione tradizionali, la scrittura e la progettazione di pagine Web  richiedono una certa dose di pianificazione e di riflessione per evitare di immettere testo e grafica e di collegare l'uno all'altra in modo confuso.

Inoltre le pagine Web male organizzate risultano anche difficili da revisionare e da espandere.

Gli elementi sui quali riflettere prima di iniziare a sviluppare una pagina web di particolare importanza sono:

·      Conoscere i concetti di presentazione Web, sito Web, pagina Web e home page;

·      Pensare al tipo di informazioni (contenuti) che si desidera rendere disponibili nel Web;

·      Decidere gli obiettivi della presentazione;

·      Organizzare il contenuto in argomenti principali;

·       Creare una struttura generale per pagine e argomenti.

Innanzi tutto si deve conoscere un po’ della terminologia che ci si troverà ad utilizzare. Si deve conoscere il significato dei seguenti termini e il modo in cui questi si applicano al lavoro che si sta sviluppando per il Web:

Ë   Presentazione Web;

Ë   Sito Web;

Ë   Pagina Web;

Ë   Home page.

Una pagina Web è formata da una o più pagine Web contenenti testo e grafica, collegate fra loro in modo logico; tali pagine, prese globalmente, presentano tutte le informazioni richieste o creano un effetto di completezza.

Ogni presentazione Web è memorizzata in un sito Web che corrisponde a una macchina collegata in rete.

Una pagina Web è un singolo elemento di una presentazione. A differenza delle pagine cartacee , le pagine Web possono avere qualsiasi lunghezza. L e pagine Web sono anche chiamate documenti Web. Entrambi i termini fanno riferimento allo stesso oggetto. Una pagina Web corrisponde a un file su disco che viene fornito dal server Web remoto e viene formattato dal browser sul sistema locale.

Si può chiamare home page la pagina Web che viene caricata nel momento in cui vi avvia il browser oppure quando si sceglie il pulsante "Home" o "Pagina iniziale" del browser. Ogni browser ha la propria home page che, normalmente corrisponde al sito presso il quale è stato sviluppato il browser.

Per chi pubblica pagine nel Web, il termine "home page" ha un significato completamento diverso. I questo caso la home page rappresenta la prima pagina o la pagina di livello superiore di una presentazione Web; in pratica è il punto di ingresso che conduce alle altre pagine e dunque è la prima pagina che viene normalmente caricata da un lettore.

Normalmente la home page contiene una panoramica dei contenuti della presentazione. Se i contenuti sono sufficientemente  compatti, si può includere il tutto in un'unica pagina e in questo caso la home page e la presentazione Web saranno in pratica la stessa cosa.    

 STRUTTURA ED ELEMENTI DI BASE  

Struttura generale di un documento HTML

Testa e corpo

 

Ogni documento HTML è composto essenzialmente da due parti:

 

<HTML>

<HEAD>

<TITLE> Titolo del documento</TITLE>

</HEAD>

<BODY>

Testo del documento, immagini, links, ecc.

</BODY>

</HTLM>

TESTA  

Nella “testa” confluiscono tutte le specificazioni primarie per il documento, quelle che forniscono le informazioni immediate e il primo utilizzo per il client e per l’utente al fine di identificare il contenuto del documento.

Soltanto alcuni elementi possono far parte della testa:

²     <HTML>….</HTML>

Include l’intero documento.

²     <HEAD>….</HEAD>

Include la parte di intestazione del documento. I comandi che seguono sono tutti inseriti al suo interno.

²     <TITLE>….>/TITLE>

Indica il titolo del documento che viene usato nella finestra di intestazione. Questo è uno dei comandi indispensabili per ogni documento in HTML.

META

Con l’elemento META fornisce un ulteriore modo di inserire informazioni riguardanti il documento. I browser o i server utilizzano le informazioni che questo elemento fornisce per indicizzare, catalogare e identificare meta-informazioni sul documento.

Ö  E’ possibile specificare l’autore del documento in modo che venga utilizzato per l’indicizzazione della pagina:

<META HTTP-EQUIV=”Reply-to” CONTENT=”pavan@collegno.to.it (Pavan Paolo)>

 

Ö  Per specificare delle parole chiave per l’operatore di indicizzazione delle pagine da parte dei motori di ricerca.

<META HTTP-EQUIV=”Keywords” CONTENT=”HTML,Geologia,Java….”>

E’ possibile usare l’attributo NAME al posto di HTTP-EQUIV per:

ü      Per specificare il tipo di contenuto della pagina.

<META NAME=”resources-types” Content=”document”>

ü      Per inserire una breve descrizione del documento che verrà mostrata assieme al titolo del documento.

<META NAME=”description” Content=”inserire una descrizione del documento”>

ü      Per specificare il contenuto (temi)  della pagina.

<META  NAME=”Keywords” CONTENT=”HTML,Geologia,Java….”>

ü      Per specificare il programma che ha generato il documento:

<META NAME=”GENERATOR” Content=”Microsoft FrontPage 2.0”>