Il Linguaggio HTML La produzione di pagine web. Il linguaggio HTML - Cristina Fregni Il World Wide...

Il LinguaggioHTML

La produzione di pagine web

Il linguaggio HTML - Cristina Fregni

Il World Wide Web

Il WWW è un progetto nato al CERN di Ginevra per risolvere il problema della ricerca di documenti che sono diventati disponibili a ritmo esponenziale su Internet.

I precedenti sistemi di classificazione dei documenti (Gopher e Veronica), non erano adatti ad un pubblico eterogeneo ed abituato agli ausili delle interfacce grafiche e non erano in grado di fornire strutture di ricerca sufficientemente elastiche.


Ipertesti

Nasce l’idea di utilizzare il concetto di ipertesto esteso alle risorse della Rete.

Vengono quindi riorganizzati i documenti in giganteschi ipertesti che guidano la consultazione mediante rimandi (link).

L'ipertesto può contenere, oltre agli elementi testuali, anche immagini, suoni, filmati e qualsiasi altro oggetto digitalizzabile.


Un ipertesto è un insieme di documenti che può essere consultato in modo non sequenziale, passando da un documento all’altro attraverso collegamenti (link).


Il progetto WWW ha: definito un protocollo di trasmissione

(HyperText Transfer Protocol): insieme di regole con cui i computer si trasmettono i dati;

creato un linguaggio (HyperText Markup Language);

fondato un consorzio (W3 Organization) con il compito di governare lo sviluppo futuro dello standard.


URL(Uniform Resource Locator)

E’ l’indirizzo standard (mnemonico) per individuare una risorsa (in genere un file) di Internet. Gli indirizzi vengono definiti da uno schema di indirizzamento generale della forma:Protocollo://NomeHost.NomeDominio/Percorso/NomeFile/#NomeAncora

Risorsa usata

(FILE, HTTP, FTP..)

Indica il nome simbolico del server (WWW) e il nome del dominio (gruppo di server dello stesso nodo).L'ultima parte identifica:•con due lettere la nazione di appartenenza;•con tre lettere il tipo di organizzazione cui si fa riferimento (COM, EDU, GOV).

Pathname del file Segnalibro

all’interno del file


ASSOLUTI: quando definiscono l’indirizzo completo di una risorsa. Hanno la sintassi precedentemente indicata;

RELATIVI: se descrivono la destinazione del collegamento relativamente alla posizione corrente della pagina sorgente sul server Web.

Gli URL per i collegamenti ipertestuali possono essere:


I nomi dei file

per indicare la Home Page di un sito Internet esiste un identificativo particolare: index.htm o default.htm. Se questo file è presente nella directory del sito sul server, esso viene aperto automaticamente quando l’utente specifica l’indirizzo del sito;

alcuni sistemi operativi che gestiscono i server Internet (Unix e Linux) sono case sensitive e non supportano i nomi lunghi per i file, quindi è conveniente utilizzare lettere minuscole e nomi di 8 caratteri al massimo per i file.

Sono di norma liberi ed hanno estensione .htm oppure .html è utile comunque considerare che:


I BrowsersPer poter consultare il file in formato HTML occorre uno specifico programma (BROWSER) in grado di interpretare correttamente la sintassi del linguaggio.Il compito del browser è quello di leggere gli ordini contenuti nel documento e impaginare sul monitor il documento stesso.Può capitare che browser diversi rappresentino in maniera diversa lo stesso documento, ciò può dipendere da:

una diversa interpretazione della sintassi; da errori presenti nel browser; dal mancato allineamento del browser allo standard.


L’HyperText Markup Language È un linguaggio di formazione delle pagine,

non un linguaggio di programmazione; È un linguaggio statico nato solo per

visualizzare informazioni; I documenti scritti in HTML sono normali file

di testo, visualizzabili e modificabili con semplici programmi editor;

Esistono molti editor, alcuni molto potenti, specializzati nella scrittura di documenti HTML che aiutano l'operatore nella corretta stesura dei documenti.


Gli elementi del linguaggio I file scritti in HTML hanno estensione .HTM o

.HTML; Al contenuto di questi file vengono aggiunti

dei TAG (marche, contrassegni) che consentono di impostare caratteristiche particolari per il testo contenuto tra i tag;

I tag sono racchiusi tra le parentesi angolari '<' e '>'

Esiste sempre un tag iniziale (<tag>) ed un tag finale (</tag>);


La struttura della pagina HTML

<HTML>

<HEAD>

<TITLE>La mia prima Home Page</TITLE>

</HEAD>

<BODY>

Questa è la prima pagina web

</BODY>

</HTML>

<b> testo o elementi ulteriori </b>

PAGINA

WEB

intestazione

corpo

posizione errata


Intestazione

Contiene notizie dichiarative, informative o di impostazione globale del documento.

Questa sezione inizia sempre con il tag <HEAD> e termina con </HEAD>.


HEAD

Il tag TITLE I tag META I CSS (Cascade Style Sheet) o fogli di stile Codice di programmazione Javascript,

VBScript, PHP, ASP…

In questo tag vi sono informazioni di impostazione della finestra e può contenere:


TITLE

L’elemento <TITLE>…</TITLE> viene visualizzato solitamente dai browser nella barra del titolo della finestra;

In caso di salvataggio dell’URL il tag TITLE dà il nome al collegamento;

Viene utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare le parole chiave.

Ad ogni pagina web può essere associato un titolo che ne descrive il contenuto.


I tag META

I tag META sono stati creati per descrivere il documento agli occhi degli spider, i software usati dai motori di ricerca per indicizzare le pagine e inserirle, pronte per essere recuperate nei database.

Attraverso questi tag il motore di ricerca ha le informazioni necessarie per catalogare la pagina.


KEYWORDS

<META name=“keywords” Content=“keyword1, keyword2, …”>

Le parole chiave sono i termini che descrivono il contenuto della pagina, sono quelli che l’utente inserisce come chiave di ricerca.

È attraverso questi termini che la pagina potrà essere trovata.

DESCRIPTION

<META name=“description” content=“descrizione della pagina”>

Questa frase apparirà (nella maggior parte dei motori di ricerca) come titolo alla fine della ricerca.

Attraverso queste parole l’utente deciderà se visitare o meno la nostra pagina.


AUTHOR

<META name=“author” content=“Nome Cognome”>

Poco usato, ma previsto dal W3C, per segnalare l’autore della pagina html, spesso contiene anche l’indirizzo e-mail, l’homepage, l’URL e altre informazioni.

GENERATOR

<META name=“generator” content=“blocco note di Win98”>

Non indispensabile, indica il nome del software usato per costruire la pagina. Tutti i programmi che aiutano a costruire una pagina HTML si auto-inseriscono in questo tag.


I formati delle immagini

GIF(Graphics Intercanghe Format), formato usato per le immagini grafiche, utilizzato anche per comporre brevi sequenze di immagini (GIF animate);

JPG(Joint Photographic Experts Group), formato utilizzato per le immagini di tipo fotografico;

PNG(Portable Network Graphics), formato di compressione di immagini destinato a sostituire il formato GIF rispetto al quale presenta miglioramenti e maggiore compressione.

Le immagini utilizzate nelle pagine web devono avere i seguenti formati:


La rappresentazione dei colori

Il linguaggio HTML utilizza una combinazione dei tre colori fondamentali RGB (Red, Green, Blue) per l’impostazione dei colori nei vari elementi delle pagine. Tali colori vengono indicati attraverso 3 numeri, compresi ciascuno tra 0 e 255, che specificano la gamma cromatica del rosso, del verde e del blu. I valori devono essere scritti in formato esadecimale e quindi variano da 00 a FF. Ad esempio:

nero 00 00 00bianco FF FF FFrosso FF 00 00verde 00 FF 00blu 00 00 FF

E’ possibile usare anche un nome simbolico corrispondente al valore esadecimale utilizzando un’apposita tabella.

I commenti

Per documentare il codice della pagina HTML, in vista di successive revisioni, l’autore può inserire commenti che vengono ignorati dal browser. Le righe di commento sono delimitate dalla coppia di tag: <!-- … --!>.

I commenti possono essere formati da una o più righe.


Corpo

Contiene il documento vero e proprio con tutti gli elementi caratteristici di un ipertesto.

Inizia sempre con il tag <BODY> e termina con </BODY>, tutto ciò che viene scritto all’esterno dei due tag non verrà visualizzato.


BODY

A questo tag si possono aggiungere attributi per l’impostazione dei colori di pagina e testo:

Attributi di BODY Imposta...

BGCOLOR=“rrggbb” il colore dello sfondo;

BACKGROUND=“URL-file-immagine” una immagine di sfondo;

LINK=“rrggbb” il colore del link

VLINK=“rrggbb” il colore del link visitato;

ALINK=“rrggbb” il colore del link attivo;

TEXT=“rrggbb” il colore del testo;


Il testo

L’inserimento di testo si effettua digitando una o più frasi all’interno del corpo della pagina e completandolo con i tag di formattazione.

Il testo di un documento HTML è visualizzato dal browser in modo da riempire lo spazio disponibile sullo schermo (word-wrapping).

Il browser quindi non riconosce più di uno spazio o i ritorni a capo utilizzati durante l’editing del testo.


I caratteri speciali

Carattere Codice

spazio

virgolette "

è &egrave

È &Egrave

é &eacute

minore <

maggiore >

Per inserire caratteri speciali e simboli particolari (es.: <, >, segni e accenti aggiunti agli altri caratteri per motivi di pronuncia) in modo che siano visualizzati da tutti i browser, si impiegano le character entity dell’HTML, ad esempio:


I paragrafi <BR>: inserisce un ritorno a capo per l’interruzione della

riga;

<P ALIGN=LEFT|CENTER|RIGHT>…</P>: specifica l’inizio di un nuovo paragrafo creando una porzione di testo

separata dalle altre da una riga di spazio ; <PRE>…</PRE>”: permette l’inserimento di testo

preformattato, cioè che viene visualizzato esattamente come scritto nel file HTML;

<HR ALIGN=LEFT|CENTER|RIGHT SIZE=n WIDTH=n|n%

NOSHADE>: inserisce una riga orizzontale;


La formattazione del testo

<B>…</B>: per il grassetto (Bold); <I>…</I>: per il testo in corsivo (Italic); <U>...</U>: per il sottolineato (Underline); <Hn>...</Hn>: permette di impostare i titoli. Vi sono sei

livelli di intestazione che vanno da n=1, per il primo livello (con maggiore dimensione di carattere), fino a n=6 per il sesto livello.

Solitamente è necessario differenziare le dimensioni dei caratteri per distinguere il titolo dal resto del testo o per definire sottotitoli o elementi testuali evidenziati. HTML dispone dei seguenti tag:


Font dei caratteri

L’HTML permette di definire il font di un testo racchiudendolo nei tag <FONT>…</FONT> e specificando i suoi attributi, descritti nella tabella seguente:

Attributi di FONT Definisce..

FACE=“font” il tipo di font da applicare. Se il font non è installato nel computer, il browser utilizza quello predefinito.

SIZE=“n”le dimensioni indicate in modo assoluto da “1” a “7”, o relativo aumentando (+n) o diminuendo (-n) il valore di default (in genere 4).

COLOR=“rrggbb” il colore con il formato RGB.


Le liste

E’ possibile definire due diversi tipi di liste che vengono classificati in elenchi puntati:

Elenco non ordinato

(unordered list)

Elenco numerato

(ordered list)

<UL>

<LI>primo punto</LI>

<LI>secondo punto</LI>

</UL>

<OL>

<LI>primo punto</LI>

<LI>secondo punto</LI>

</OL>


Visualizzazione di immagini

Per includere un’immagine nel documento si deve usare il tag:

<IMG SRC=“URL-file-immagine” Attributi>

L’URL può essere assoluto o relativo.

Il file immagine è memorizzato separatamente dal documento HTML.

In genere tutte le immagini di un sito web vengono inserite in una apposita cartella (images).


Attributi di IMG

Definisce…

WIDTH=“nn” e

HEIGHT=“nn”

la larghezza e l’altezza occupate dall’immaginenella pagina. Vengono indicate in pixel oppure in percentuale (“n%”) rispetto allo schermo.

ALT

(ALTernate text)

il testo visualizzato: durante il download del file; in caso di mouseover; al posto dell’immagine quando non viene visualizzata.

BORDER=“n” la larghezza del bordo in pixel.

ALIGN=

RIGHT|LEFTcome è visualizzato il testo intorno all’immagine.


I collegamenti ipertestuali

La principale caratteristica di un ipertesto è la possibilità di consultare il documento in modo non sequenziale attraverso l’uso di collegamenti ad altri oggetti o pagine.

Con i link si effettuano riferimenti a file remoti (esterni) o ad altre parti del documento stesso (interni).

Il link appare sulla pagina come un’immagine, un’animazione o semplicemente un testo di norma evidenziato con sottolineatura e colore diverso, inoltre passando su di esso il puntatore del mouse si trasforma in mano indicando che si può attivare il link premendo con il tasto del mouse.


I link esterni

Sono collegamenti ad altri documenti HTML, oggetti multimediali o servizi Internet. Per realizzare un link si utilizza il tag:

<A HREF=“URL”>descrizione</A>

Documento a cui si vuole fare

riferimento

Testo/immagine che permette di

collegarsi al documento di

riferimento


Oggetto URL

File nella stessa directory dello stesso server

“nome-file.htm”

Sito internet remoto “http://indirizzo-internet”

Invio di messaggio di posta elettronica

“mailto:nomeutente@dominio

L’URL si può riferire ad oggetti diversi:

Pagina1 HTML

Pagina2 HTML

Sito web remoto

Gestore posta

elettronica


I link interni

Sono collegamenti ad una determinata posizione dello stesso documento HTML.

Vengono utilizzati quando i documenti da visualizzare sono molto lunghi.

Si inseriscono specifiche ‘ancore’ per muoversi in modo mirato all’interno del documento garantendo una migliore leggibilità del documento stesso.


L’ancora dovrà essere definita all’interno dello stesso documento con l’attributo:

<A NAME= “nome”>

Ancora a cui si vuole fare riferimento all’interno del documento

Testo/immagine che permette di collegarsi al punto di riferimento

nel documento

I link interni si indicano con il tag:

<A HREF= “#nome”>descrizione</A>

Ancora a cui si fa riferimento nel documento


Doc1

<A NAME=“inizio”>

<A HREF=”doc2.htm#primo”>…</A>

<A HREF=”#fine”>Vai alla fine</A>

<A NAME=“fine”>

<A HREF=”#inizio”>Torna su</A>

Doc2

<A NAME=“primo”>

I link possono anche essere fatti ad un punto specifico di un altro documento.


Le Tabelle

organizzare i dati in modo ordinato inserendoli in una griglia;

creare layout di pagina complessi, posizionando i diversi oggetti multimediali in posizioni individuate dalle righe e colonne della tabella stessa.

Nelle pagine web sono impiegate per:


Nell’HTML, la descrizione di una tabella è racchiusa nel tag:

<TABLE> … </TABLE>

e nei seguenti elementi annidati, che ne definiscono le componenti (righe e colonne):

Tag annidato in TABLE Delimita all’interno della tabella…

<TR>…</TR>(Table Row)

una singola riga

<TD>…</TD>(Table Data)

Una singola cella all’interno di una riga

<TH>…</TH>(Table Heading)

L’intestazione di una colonna


Il formato di una tabella può essere modificato mediante gli attributi principali elencati di seguito:

Attributo Imposta…

BORDER=“n”il bordo della tabella, “n” ne definisce lo spessore, quando è 0 la tabella risulta senza bordi.

BORDERCOLOR e BGCOLOR=“rrggbb”

il colore dei bordi e quello interno della tabella.

ALIGN=

RIGHT|CENTER|LEFTl’allineamento della tabella nella finestra.

WIDTH=“nn”(%) la larghezza della tabella in pixel o in percentuale.

CELLSPACING=n lo spazio tra le celle.

CELLPADDING=n lo spazio all’interno delle celle.


Anche il formato delle celle (definite con i tag <TD> e <TH>) può essere modificato mediante gli attributi:

Attributo Imposta…BORDERCOLOR e

BGCOLOR=“rrggbb”il colore dei bordi e quello interno della cella.

ALIGN=

RIGHT|CENTER|LEFTl’allineamento orizzontale del testo nella cella.

VALIGN=

TOP|MIDDLE|BOTTOMl’allineamento verticale del testo nella cella.

WIDTH=“nn”(%) la larghezza della cella in pixel o in percentuale.

COLSPAN=“n” e

ROWSPAN=“n”l’unione in orizzontale o verticale delle celle, “n” ne indica il numero.


I Moduli

Sono contenitori di elementi HTML che realizzano una Interfaccia Grafica per l’Utente (GUI) e gli permettono di interagire con il sistema

In questo modo l’utente può operare scelte, fornire risposte, inserire dati .


L’interazione tramite i form avviene attraverso due fasi:

creazione del form con i suoi elementi e attributi per ricevere i dati in input;

elaborazione dei dati che può avvenire: direttamente sul client tramite programmi di scripting;

al momento della sottomissione del form, quando i dati vengono inviati ad un programma di script del server.


Per inserire un form si usa il tag doppio:

<FORM> elementi form </FORM>

i cui attributi, descritti nella tabella seguente, specificano il tipo di comunicazione tra il browser e i programmi eseguiti sul server.Attributo Definisce…

NAME=“nome” l’identificatore del modulo.

ACTION=“URL” l’URL del programma che elabora i dati o un indirizzo di e-mail.

METHOD=

“GET|POST”

il metodo di trasmissione dei dati tra browser e server. “GET” – tutti i dati dei campi del modulo sono trasmessi in un’unica variabile stringa (query_string), lunga al massimo 256 caratteri, aggiungendoli all’URL dello script;“POST” – i dati vengono inviati al server in modo autonomo nel corpo del messaggio HTTP per diventare l’input dell’applicazione remota.


Gli elementi dei moduli

Per inserire un campo in un modulo si deve annidare nell’elemento FORM il tag singolo

<INPUT>

con i principali attributi descritti di seguito:

Attributo Definisce…

NAME=“nome”il nome per richiamare l’oggetto durante l’elaborazione dei dati.

VALUE=“valore” il valore iniziale del campo.

TYPE=

“TEXT|PASSWORD|HIDDEN

|CHECKBOX|RADIO

|BUTTON|SUBMIT|RESET”

il tipo di funzionalità svolta dall’oggetto-campo.


Caselle di Testo

Valore TYPE

Caselle di testo

FunzioniAspetto nel

Browser

TEXT a singola lineaInput di una stringa digitata dall’utente nel browser

PASSWORD passwordInput di dati nascosti durante la digitazione

HIDDEN nascoste

Invio di parametri al server definiti dal programmatore nell’attributo VALUE e non visualizzati all’utente

Hanno la funzione di raccogliere i dati digitati dall’utente, possono essere dei seguenti tipi:


Pulsanti di Comando

Valore TYPE

Pulsante L’evento click():Aspetto nel

Browser

BUTTON normaledeve definirlo il programmatore con un linguaggio di script

SUBMIT invio dei datiprovoca l’invio dei dati dal browser al programma del server web

RESETcancellazione

datiprovoca la cancellazione di tutti i dati digitati

Permettono di eseguire alcune azioni associate al loro evento predefinito (click) e dispongono di funzionalità diverse:


Caselle di Selezione ePulsanti di Opzione

Valore TYPE

Campo L’evento click():Aspetto nel

Browser

CHECKBOXcasella di selezione

provoca la selezione della casella

RADIOpulsante di

opzione

causa la scelta del pulsante eliminando la selezione negli altri

Permettono all’utente di fare più (checkbox) o una sola scelta (radio button) all’interno di voci predefinite. Si devono utilizzare i seguenti valori degli attributi:


Caselle di selezione e pulsanti di opzione devono essere inseriti in un gruppo di campi individuato da un insieme di tag <INPUT> separati, ma con valore dell’attributo NAME comune. In entrambi i controlli: il valore inviato al server è definito

dall’attributo VALUE; la presenza dell’attributo CHECKED,

determina una selezione di default.


Caselle di riepilogo

Consentono di definire una lista mediante l’elemento doppio

<SELECT>…</SELECT>

che include un elenco di valori inseriti nei tag singoli <OPTION>.


il dato trasmesso al server è quello impostato dal programmatore nell’attributo VALUE di OPTION, sulla base della scelta fatta dall’utente nella lista;

per impostare un elemento come selezionato, si deve aggiungere a OPTION l’attributo SELECTED;

per poter scegliere più di una voce occorre aggiungere a SELECT l’attributo MULTIPLE.

In questo tipo di controllo:


Aree di Testo

Permettono di far inserire testo all’utente come all’interno di un editor, ammettendo quindi la composizione di un testo su più righe. Si definisce con il tag doppio:

<TEXTAREA>…</TEXTAREA>


Attributo Definisce…

NAME il nome per richiamare l’oggetto durante l’elaborazione dei dati.

ROWS=“n” il numero di righe visibili.

COLS=“n” la larghezza in caratteri.

WRAP=

“virtual/off”se il testo va a capo automaticamente o solo quando l’utente preme INVIO.

Gli attributi che si possono utilizzare nell’area di testo sono indicati nella seguente tabella:


Formattazione di un FormIl formato di un modulo può essere modificato inserendo nella sua definizione i tag o attributi descritti nella tabella seguente:

Inserire… Per…. <FIELDSET>

<LEGEND>Etichetta cornice</LEGEND>

Elementi del form da raggruppare

</FIELDSET>

raggruppare un insieme di elementi del form in una cornice.

<LABEL FOR=IDControllo>

Valore etichetta </LABEL>

inserire un’etichetta. Si associa a un altro controllo mediante gli attributi ID del campo e della label.

TABINDEX

determinare l’ordine di input dei dati. L’attributo va inserito nel tag <INPUT>. Il valore 1 determina il campo con il focus.

Il Linguaggio HTML La produzione di pagine web. Il linguaggio HTML - Cristina Fregni Il World Wide...

Documents

Transcript of Il Linguaggio HTML La produzione di pagine web. Il linguaggio HTML - Cristina Fregni Il World Wide...