HTML
Il linguaggio HTML L'HTML (HyperText Markup Language) è il linguaggio che permette di scrivere pagine Web che saranno interpretate e presentate all'utente da un browser. Non è un linguaggio di programmazione in quanto non consente la scrittura di programmi in grado di essere eseguiti da un computer. E' un linguaggio di marcatura, ossia un linguaggio che consente di descrivere la struttura di documenti mediante un comune testo in cui vengono inseriti "parti di codice" (denominati marcatori). I documenti accessibili tramite Web sono quindi dei normali file di testo detti 'sorgenti HTML'. Hanno estensione .html o .htm e possono essere creati utilizzando un qualsiasi editor di testo o uno dei numerosi programmi dedicati presenti sul mercato.
I marcatori html sono detti TAG ed hanno nomi diversi a seconda della loro funzione. I tag vanno inseriti tra parentesi angolari (<TAG>), nella chiusura il nome del tag viene preceduto da uno slash "/". Quindi: </TAG>. Il contenuto (a cui deve essere applicato quel Tag) va inserito tra l'apertura e la chiusura del tag medesimo. Struttura di un tag : < TAG attributi>contenuto</TAG> A ciascun attributo viene assegnato un valore secondo la sintassi: <TAG attributo1="valore1" attributo2="valore2">contenuto</TAG> Alcuni TAG non prevedono chiusura e qualcuno può anche non prevedere contenuto (ad es. il TAG che consente di inserire un’immagine). I TAG possono essere scritti in maiuscolo o in minuscolo perché l'HTML è "case unsensitive", cioè indipendente dal formato.
Struttura di un documento HTML <HEAD> <TITLE> Titolo del documento </TITLE> …. </HEAD> <BODY> Corpo del documento </BODY> </HTML>
Tutto quanto viene visualizzato nella pagina Web viene scritto nel Tag BODY Attributi del tag BODY BGCOLOR Colore dello sfondo del documento BACKGROUND nome e localizzazione dell'immagine usata come sfondo TEXT Colore del testo del documento
Esempio: <body text="#000000" link="#663300" vlink="#663300" alink="#663300" background="../imgs/sfondo.jpg"> testo del documento </body> Alcuni colori SRGB: Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Gray = "#808080" White = "#FFFFFF" Yellow = "#FFFF00" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Per i colori si usa la sintassi: #RRGGBB dove RR, GG e BB sono numeri di due cifre in notazione esadecimale che rappresentano rispettivamente i valori delle componenti rossa, verde e blu del colore. Con questa notazione (denominata SRGB) è possibile rappresentare 16777216 colori
7 Saperi Storici e Nuove Tecnologie Paragrafi I paragrafi vengono definiti mediante il Tag p. Esempio: <p>Questo e' il primo paragrafo di un testo che mostra come avviene la formattazione in HTML.</p> <p> Secondo paragrafo</p> <p>Terzo paragrafo</p> Questo codice inserito nel “body“ produce il seguente risultato: Questo e' il primo paragrafo di un testo che mostra come avviene la formattazione in HTML. Secondo paragrafo Terzo paragrafo Formattazione dei documenti attributi di p: align consente di indicare l'allineamento del contenuto del paragrafo e può assumere i seguenti valori: Left per allineamento a sinistra (default), center per avere il testo centrato right per allineamento a destra, justify per la ‘giustificazione’ del testo Sintassi: <p align="left">
8 Saperi Storici e Nuove Tecnologie Ritorno a capo Per forzare un ritorno a capo in un documento HTML è sufficiente utilizzare l'elemento br, Questo e' il primo paragrafo di un testo che mostra come avviene <br> la formattazione in HTML. Questo e' il primo paragrafo di un testo che mostra come avviene la formattazione in HTML. Intestazioni In HTML esistono 6 livelli di intestazioni specificati mediante gli elementi Hi (con i che può assumere i valori da 1 a 6). <H1>Titolo 1</H1> Titolo 1 <H2>Titolo 2</H2> Titolo 2 <H3>Titolo 3</H3> Titolo 3 <H4>Titolo 4</H4> Titolo 4 <H5>Titolo 5</H5> Titolo 5 <H6>Titolo 6</H6> Titolo 6 Attributi di H: align che può assumere gli stessi valori indicati per il tag <p>
9 Saperi Storici e Nuove Tecnologie Stile dei caratteri b Grassetto i Corsivo u Sottolineato strike Depennato sup testo ad apice sub testo a pedice Combinando i tag è possibile combinarne gli effetti. Dimensione, colore e tipo dei caratteri vengono gestiti dal tag font I tag font riconosce i seguenti attributi: size che consente di impostare la dimensione dei caratteri esplicitamente (size="n") color che consente di specificare il colore dei caratteri face che consente di specificare il tipo di carattere da utilizzare Esempio: <font size=“3" face="Arial,Verdana“ color=“red”>Testo di prova</font> Restituisce: Testo di prova Esiste un tag di preformattazione ”pre” che forza il browser a rispettare le sequenze di caratteri del codice ASCI. Tutto ciò che è scritto tra <pre> e </pre> viene visualizzato dal browser così come scritto nella pagina html
10 Saperi Storici e Nuove Tecnologie Allineamento e raggruppamento di intere parti di un documento si utilizzano gli elementi div e center. div permette di specificare l'allineamento degli elementi in esso contenuti mediante l'attributo align (che ha lo stesso significato dell'attributo align di p Sintassi: <div align=rigth> teso testo </div> center, invece, risulta essere equivalente a div align="center". <center> testo testo testo </center> Una linea orizzontale come separatore Si scrive il tag <hr> nel punto in cui si vuole inserire la riga. Hr non necessita del tag finale. Attributi: size per specificare lo spessore in pixel della linea width per specificare la lunghezza della linea in pixel o in percentuale di finestra align per specificare l'allineamento della linea e può assumere i valori: left, rigth o center rispettivamente per l’allineamento a sinistra, a destra o centrato noshade disabilita l'effetto in rilievo Esempio: <HR SIZE=30 WIDTH=250>
11 Saperi Storici e Nuove Tecnologie Il Tag Head Viene aperto subito dopo l'apertura del tag <HTML>, quindi è il primo elemento letto dal browser, e racchiude l'intestazione vera e propria del documento, cioè tutte le informazioni necessarie al browser, al Webserver ed ai motori di ricerca. Tra i Tag utilizzati all’interno: “TITLE” per dare il titolo alla pagina che verrà visualizzato dai browser nell'intestazione in alto a sinistra . <HEAD> <TITLE> Titolo del documento</TITLE> </HEAD> I META tag, stringhe di codice. Ad es.: Le "keywords" sono le parole chiave che descrivono il contenuto di una pagina web, servono per far individuare ai motori di ricerca le proprie pagine web (dopo aver segnalato il sito ai vari motori di ricerca). <META name="keywords" Content=" parola1,parola2,…"> i termini sono separati da virgole <META name="description" content="La mia prima home page"> che apparirà alla fine della ricerca. <META NAME="ROBOTS" CONTENT="FOLLOW,INDEX"> per indicizzare le pagine nei motori di ricerca. <META name="author" content="Nome Cognome"> Riguarda l'autore della pagina web. <META name="GENERATOR" content="Blocco note di Windows"> Per indicare con che tipo di editor si sono create le pagine.
12 Saperi Storici e Nuove Tecnologie Liste ordinate (tag ol) e Liste non ordinate (tag ul) In entrambi i casi gli elementi delle liste vengono specificati mediante il Tag li (il cui tag finale è opzionale). Esempio di lista ordinata: <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li>Elemento 4</li> <li>Elemento 5</li> </ol> Esempio di lista non ordinata: <ul> </ul> 1. Elemento 1 2. Elemento 2 3. Elemento 3 4. Elemento 4 5. Elemento 5 • Elemento 1 • Elemento 2 • Elemento 3 • Elemento 4 • Elemento 5
13 Saperi Storici e Nuove Tecnologie È possibile annidare liste, ossia creare liste all'interno di altre liste. Quando si annidano liste dello stesso tipo il browser utilizzerà contrassegni diversi per gli elementi dei vari livelli. In ogni caso ogni livello sarà più indentato del precedente. Esempio: Orario di apertura <UL> <LI>Lunedì-Venerdì <LI>9.00-20.00 </UL> <LI>Sabato-Domenica <LI>9.00-13.00 Attributo del tag <li> è ‘type’, che può assumere i valori: disc (pallino nero, default), circle (pallino bianco) e square (quadratino). Sintassi: <LI type=circle> elemento1 <\li> Liste annidate • Lunedì-Venerdì o 9.00-20.00 •Sabato-Domenica o 9.00-13.00
14 Saperi Storici e Nuove Tecnologie Inserimento di immagini in pagine HTML Nel punto in cui si vuole inserire l’immagine si inserisce il Tag img secondo la sintassi: <img src=“nomeimmagine.gif"> Non necessita alcun tag di chiusura. Gli attributi possibili per img sono: SRC il cui valore è il nome del file immagine completo di path assoluto o relativo per identificare in modo univoco il file. ALIGN per indicare l'allineamento dell'immagine rispetto al testo: Left e right (per l’allineamento a sinistra e a destra) oppure Top, Bottom o middle per avere il testo allineato rispettivamente in alto, in basso o al centro rispetto all’immagine. WIDTH permette di specificare una larghezza per l'immagine(pixel). HEIGHT permette di specificare una altezza (pixel). HSPACE permette di inserire dello spazio tra l'immagine ed il testo lateralmente. VSPACE permette di inserire dello spazio tra l'immagine ed il testo sopra e sotto l'immagine. ALT permette di visualizzare un testo al posto dell'immagine se questa per varie ragioni risulta non visualizzabile, ad esempio se viene usato un browser di tipo testuale o un programma del tipo utilizzato da disabili. USEMAP permette che parti diverse dell'immagine puntino a documenti diversi, mediante l’uso di coordinate. BORDER permette di visualizzare un bordo intorno all'immagine (se l'immagine è un link), può assumere anche il valore zero.
15 Saperi Storici e Nuove Tecnologie Formati delle immagini Formato GIF (Graphics Interchange Format) Supporta immagini contenenti fino a 256 colori scelti tra i vari milioni possibili. E’ poco compresso ma permette un’ottima risoluzione. Permette di creare immagini con sfondo trasparente e includere in un unico file più immagini in modo da creare animazioni. Formato JPG (Joint Photographer's Experts Group) E’ un formato molto più compresso, quindi occupa meno memoria, con grandi vantaggi per la trasmissione e per l’archiviazione. La risoluzione è meno buona delle GIF. Sintassi: <img src=“smile.gif" width="31" height="31" border="0">
16 Saperi Storici e Nuove Tecnologie Inserimento di tabelle in una pagina HTML Tag per inserire una tabella: <table> ... </table> Tra <table> e </table> si inseriscono altri tag <TR></TR> identificano inizio e fine di ogni riga della tabella <TD></TD> identificano inizio e fine di ogni singola cella <TH></TH> identificano l'intestazione della tabella. Viene associato questo tag ad ogni termine utilizzato per identificare un insieme di dati (riga o colonna) inseriti nella tabella. Esempio: <table border=1> <tr> <th>Studenti</th><th>maschi</th><th>femmine</th> <th>Italiani<th><td>120</td><td>65</td> <th>Stranieri<th><td>17</td><td>13</td> <th>Totale<th><td>137</td><td>78</td> </table> Totale 137 78 Stranieri 17 13 Italiani 120 65 Studenti maschi femmine
17 Saperi Storici e Nuove Tecnologie Attributi dell'elemento TR (attributi di ciascuna cella per tutta la riga): ALIGN Per l’allineamento orizzontale del contenuto di una cella; (valori: LEFT, CENTER e RIGHT) VALIGN Posiziona, verticalmente, il contenuto di una cella; (valori: TOP, MIDDLE e BOTTOM). Bgcolor e background sfondo colorato o un’immagine di base nella riga Attributi degli elementi TH e TD: NOWRAP La presenza di questo attributo impedisce al testo di suddividersi su due righe. ROWSPAN Dispone la cella su più righe. COLSPAN Dispone la cella su più colonne. ALIGN Posiziona, orizzontalmente, il contenuto di una cella; (possibili valori: LEFT, CENTER e RIGHT) VALIGN Posiziona, verticalmente, il contenuto di una cella; (possibili valori: TOP, MIDDLE e BOTTOM) WIDTH Specifica, in pixel, le dimensioni della cella in larghezza. HEIGHT Specifica, in pixel, le dimensioni della cella in altezza. Bgcolor e background sfondo colorato o un’immagine di base nella cella. Attributi dell'elemento TABLE (agiscono sull’intera tabella): ALIGN Specifica la posizione della tabella nella pagina, i possibili valori sono LEFT (default), RIGHT e CENTER. WIDTH Specifica la dimensione della tabella in pixel o in percentuale. BORDER Indica lo spessore del bordo della tabella; il valore di default è BORDER=0. CELLSPACING Specifica, in pixel, lo spazio tra le celle. CELLPADDING Specifica, in pixel, lo spazio tra il contenuto di una cella ed il suo bordo. Bgcolor e background per avere uno sfondo colorato o un’immagine di base.
18 Saperi Storici e Nuove Tecnologie Un link HTML è un collegamento tra un documento o una sua componente ed una qualsiasi risorsa accessibile tramite la rete. Viene definito tramite il Tag a (<a> … </a>) Attributi del Tag a href specifica la URL dell’elemento destinazione [es.: <a href=“http://www.unina.it”>Ateneo Federico II</a> crea un link al sito d’Ateneo] target può assumere i valori: _self individua lo stesso frame in cui si trova il link _parent nel caso di frameset annidati, individua il frameset in cui inviare il link _top individua il frameset di più alto livello e cioè l'intera area di visualizzazione del browser _blank forza l'apertura di una nuova finestra in cui aprire il documento Sintassi: <a href=“http://www.unina.it” target=“_blank”> Ateneo Federico II </a> Puntamenti a parti di una pagina web name consente di definire un anchor di destinazione all'interno di una pagina [es.: link ad un punto X di un documento: nel punto X si introduce l'ancora con il comando: <a name="ancora"></a> il link diventa: <a href="nome_del_documento.html#ancora">testo<a> ... LINK
19 Saperi Storici e Nuove Tecnologie L’uso dei frame consente di dividere la finestra del browser in diverse aree e visualizzare in ciascuna di esse una pagina web diversa. In questo modo si può mantenere il contenuto fisso in una parte (ad es. un menù) e visualizzare i cambiamenti di contenuto nell'altro frame. Quindi i frames non sono altro che pagine web, cioè più file html che vengono gestiti da un file principale. Prima di tutto bisogna impostare questo file e poi gli altri files che compongono il frame. La sintassi per dividere in due frames la pagina è la seguente (in un file HTML senza il tag BODY) : <FRAMESET> <FRAME> </FRAMESET> Attributi dell’elemento FRAMESET: ROWS Definisce la suddivisione in righe della finestra in pixel o in percentuale COLS Definisce la suddivisione in colonne della finestra in pixel o in percentuale BORDERCOLOR Definisce il colore in RGB del bordo delle finestre
20 Saperi Storici e Nuove Tecnologie Attributi dell’elemento FRAME: BORDERCOLOR Definisce il colore in RGB del bordo delle finestre BORDER Indica la presenza o meno del bordo delle finestre (default YES) MARGIN Permette la gestione dei margini MARGINWIDTH Indica il valore dei margini destro e sinistro MARGINHEIGHT Indica il valore dei margini alto e basso SRC Indica l’indirizzo HTTP del documento che deve essere visualizzato in quel frame NAME Indica il nome della finestra SCROLLING Indica la possibilità di far scorrere il testo (i valori sono YES, NO, AUTO) NORESIZE Non dà all’utente la possibilità di modificare le misure delle finestre La presenza dell’attributo NAME è di fondamentale importanza: infatti, è così possibile specificare in quale finestra del browser vogliamo che il file in questione appaia. Pagina divisa in due frame verticali <html> <head><title>Corso di Perfezionamento</title></head> <frameset cols="180,*" border="0" framespacing="0" frameborder="NO"> <frame src="pages/sx.html" name="sx" noresize> <frame src="pages/dx.html" name="dx" noresize> </frameset> </html> Le dimensioni sono in pixel, dando il valore * per l'ultima colonna gli si assegna la rimanente porzione dell'area di visualizzazione
21 Saperi Storici e Nuove Tecnologie FORM (documento o modulo che permette di inviare dati inseriti dagli utenti ad un data base collegata) <FORM> e </FORM> Attributi: ACTION Indica la URL del programma CGI (o altro linguaggio di script inserito nel linguaggio HTML) al quale il server passerà i dati di ingresso inseriti dall’utente. METHOD Indica il metodo con il quale i dati vengono inviati. I metodi possibili sono: GET (default), POST, HEAD, PUT, DELETE, LINK, UNLINK I più usati sono GET e POST. In particolare POST è il metodo più adatto ad inviare dati di una certa lunghezza, mentre GET, per ragioni pratiche, non invia al server più di 256 byte di informazione Tra i Tag <FORM> e </FORM> si inserisce un insieme di "controlli", come caselle di testo, bottoni, pulsanti, menu a tendina, … Ciascuno di questi controlli viene creato tramite la tag <INPUT>, che possiede vari attributi: INPUT Specifica un campo nel quale l'utente inserisce i propri dati da inviare al server ed ha come attributi TYPE (dopo) VALUE Valore assegnato. Per un campo di testo, è il valore iniziale o di default che viene mostrato. Se invece il campo è una casella (CHECKBOX, RADIO), VALUE è il valore inviato al server se le casella viene selezionata dall'utente.
22 Saperi Storici e Nuove Tecnologie type può assumere i seguenti valori: text (controllo per l'immissione di stringhe) crea un'area ipertestuale in cui l'utente può inserire testo. (default) password (controllo per l'immissione di password) crea un campo di testo ove i caratteri immessi vengono visualizzati con asterischi(*). checkbox (controllo di tipo checkbox) crea una casella la cui selezione da parte dell'utente dà origine, nei dati trasmessi, ad una assegnazione NAME = VALUE radio (controllo di tipo radio button) crea una serie di caselle ipertestuali con selezionamento esclusivo. Ognuna di queste caselle ha lo stesso NAME delle altre e un VALUE particolare. hidden (controllo nascosto) crea un campo nascosto per l'utente, può costituire l'informazione di "stato" per il server, cioè un’nformazione che non deve essere modificata dal client reset (controllo di tipo reset) cancella tutti i dati impostati nei campi dall'utente e li riporta ai loro valori iniziali o di default submit (controllo di tipo submit) dà l'istruzione di invio dati. Premendo tale pulsante, l'utente invia al server tutti i dati che egli ha impostato nei campi.