Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Dipartimento di Matematica Università di Bari Il linguaggio HTML p. 1/3
HTML L HTML è il linguaggio (di mark-up) con cui si indica come posizionare i vari elementi in una pagina Web. Un documento html non è nient altro che un file di testo (ascii) con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all interno della pagina, su come far scorrere il testo, e altre cose di questo genere. Non essendo un linguaggio di programmazione, l HTML non ha meccanismi che consentono di prendere delle decisioni, e non è in grado di compiere delle iterazioni, né ha altri costrutti propri della programmazione. Pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione (non vengono prodotti messaggi di errore). Il linguaggio HTML p. 2/3
Browser Il Browser è il programma che serve a navigare nel Web; svolge principalmente due compiti: scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un certo indirizzo; legge i documenti scritti in html, e a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro. Esempi di browser: Explorer (windows) Netscape Mozilla, Opera, ecc. Il linguaggio HTML p. 3/3
tag All interno di ogni pagina sono presenti una serie di marcatori (TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi i simboli < e > (<TAG>). La chiusura del tag viene indicata con uno / seguito dal nome del tag (</TAG>) Il contenuto va inserito tra l apertura e la chiusura del tag medesimo <TAG> testo </TAG> Dentro il tag è possibile inserire gli attributi del tag stesso, scrivendo <TAG attr1="val1" attr2="val2">testo</tag> Esempio: <p align="right">testo</p> Il linguaggio HTML p. 4/3
tag Alcuni particolari tag (detti vuoti) non hanno contenuto perché, ad esempio, indicano la posizione di alcuni elementi. Conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque: <TAG attributi> Esempio: <IMG widht="20" height="20" src="miaimmagine.gif" alt="alt"> Il linguaggio HTML p. 5/3
annidamento, indentazione, commenti I tag possono essere annidati l uno dentro l altro. Anzi molto spesso è necessario annidarli. L annidamento permette quindi di attribuire formattazioni successive al testo che stiamo inserendo. Spazi e righe vuote non hanno significato. Buona norma (ma non è obbligatorio) è quella di utilizzare dei caratteri di tabulazione. In HTML è possibile inserire commenti mediante <!-- e --> Esempio: <!-- commento --> L HTML è case unsensitive, cioè i tag possono essere scritti in maiuscolo o minuscolo. Il linguaggio HTML p. 6/3
Struttura della pagina HTML La prima riga di una pagina HTML indica che si stanno utilizzando le specifiche del World Wide Web Consortium: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Quel che segue è normalmente diviso in due sezioni: Testa (<head>) contiene informazioni che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere, ad esempio, i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera; Corpo (<body>) racchiude il contenuto vero e proprio del documento. Il linguaggio HTML p. 7/3
head I due tag che devono essere sicuramente presenti in questa sezione sono: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). <title>nome della pagina</title> Il title contiene il titolo della pagina e compare in alto sulla barra del browser. È bene scriverlo da subito, onde evitare poi di avere pagine senza titolo. Il linguaggio HTML p. 8/3
css L HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio <p>qui il mio testo</p>) e i tag che indicano uno stile o una colorazione del contenuto (ad esempio <font color="red">, che colora il testo di rosso) si possono trovare mischiati allo stesso livello. Tuttavia vari anni di Web hanno fatto nascere l esigenza di separare il contenuto (il testo) dalla presentazione del contenuto medesimo (il colore, la dimensione del carattere, ecc.). Per farlo è necessario utilizzare i fogli di stile (detti anche CSS: "Cascading Style Sheets"). Esempio: <p class="formato"> titolo 1 </p> Il linguaggio HTML p. 9/3
css Tutto ciò che riguarda la presentazione del testo viene affidato alla classe "formato", descritta altrove del documento, o su un file separato. Dunque basta modificare la classe "formato" per cambiare l aspetto di tutte le pagine che utilizzano questa classe. Alcuni elementi riguardanti il formato (come il tag <font>) sono addirittura "deprecati" dal W3C, cioè destinati a cadere in disuso. Il linguaggio HTML p. 10/3
css Nella trattazione CSS gli elementi vengono classificati secondo tre tipologie: Elementi di blocco: sono sostanzialmente gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form. Elementi "inline": sono gli elementi che - non andando a capo - possono essere integrati nel testo, come i collegamenti o le immagini Liste: liste numerate, o non numerate Il linguaggio HTML p. 11/3
sfondo È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#ffffff"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che lšutente ha impostato nella finestra del sistema operativo. <body bgcolor="blue"> <body bgcolor="darkblue"> <body bgcolor="#0000ff"> <body background="imgsfondo.gif"> Il linguaggio HTML p. 12/3
attributi di body <body leftmargin="0" topmargin="0"> <body lang="it"> <body text="red"> <body link="red" vlink="green" alink="yellow"> Tutti gli attributi del body (ad eccezione dell attributo "lang") sono caratteristiche che riguardano il layout della pagina HTML. Quindi possono essere inseriti in un foglio di stile. Il linguaggio HTML p. 13/3
testo Per racchiudere il testo: titoli: <h1>... <h6> paragrafi: <p> blocchi di testo: <div> contenitori: <span> Per allineare il testo: <p align="left"> (o "right", "justify") Per andare a capo: <br> <hr noshade size="5" width="50%" align="center"> Il linguaggio HTML p. 14/3
stile Stili fisici: <b> grassetto <i> corsivo <pre> preformattato <u> sottolineato (da non usare) <strike> barrato <sup>, <sub> apici e pedici Stili logici: <abbr>, <acronym>, <address>, <blockquote>, <code>, <em>, <strong>, <var>... Il linguaggio HTML p. 15/3
font Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times". In genere, si preferisce però utilizzare dei caratteri senza grazie come il "Verdana", l "Arial" o l "Helvetica" <font face="arial">testo in Arial</font> Non è possibile utilizzare un carattere fantasioso creato da noi, in quanto poi dipende dal browser che interpreta la pagina. <font face="verdana, Arial, Helvetica, sans-seri <font color="blue">testo blu</font> Le dimensioni del testo si attribuisco mediante l attributo "size" del tag font (valori da 1 a 7). <font size="1">testo di grandezza 1</font> E possibile utilizzare valori relativi rispetto a quelli di default scrivendo +1, -1, ecc. La vera dimensione dipende però dal browser. Il linguaggio HTML p. 16/3
elenchi In HTML le liste sono di tre tipi: <ol> elenchi ordinati <ul> elenchi non ordinati <dl> elenchi di definizioni I primi due funzionano allo stesso modo: <elenco> <li> nome del primo elemento</li> <li> nome del secondo elemento</li> </elenco> Il linguaggio HTML p. 17/3
elenchi <ol type="a"> oppure "A", "1", "i", "I" <ul type="disc"> oppure "circle", "square" Elenchi di definizioni: <dl> <dt> definition term</dt> <dd> definition description</dd> </dl> Il linguaggio HTML p. 18/3
link I link sono l oggetto principale delle pagine HTML in quanto trasformano semplici testi in ipertesti. Sono costituiti da due parti: il contenuto (che nasconde il collegamento) la risorsa (verso cui si punta) La pagina web del corso è <a href= "http://www.dm.uniba.it/ amodio/labmatinf.html" >questa</a>. Il linguaggio HTML p. 19/3
link La destinazione può essere un altra pagina HTML, un immagine, un file pdf, un file zip, o un file exe. Può anche essere un indirizzo e-mail. In questo caso è necessario scrivere <a href="mailto:tuamail@nometuosito.it"> Mandami una e-mail </a>. I percorsi possono essere assoluti o relativi, nel caso il link punti a qualcosa all interno dello stesso sito. Per il nome del file evitare di lasciare spazi. Piuttosto utilizzare l underscore. Il linguaggio HTML p. 20/3
link interni E possibile anche creare un indice interno al documento, utilizzando le ancore. Ciascuna ancora può avere infatti un nome: <a name="primo">questo è il punto di partenza </a> Da notare che in mancanza dell attributo che indica il collegamento (href) le ancore non vengono viste come link. In un ipotetico indice è allora possibile far riferimento all ancora presente all interno del documento attraverso un link <a href="#primo">vai al primo paragrafo</a> Il cancelletto indica che il collegamento deve cercare un ancora chiamata "primo" all interno della pagina stessa. Il linguaggio HTML p. 21/3
link (attributi) target finestra nella quale aprire la pagina linkata (target="_blank" fa riferimento ad una pagina nuova) title testo esplicativo del link hreflang lingua del documento accesskey scorciatoie da tastiera Il linguaggio HTML p. 22/3
tabelle I tag necessari per creare una tabella sono: <table> apre la tabella <tr> indica l apertura di una riga <td> indica una cella all interno di una riga Attributi dei tre tag: border="2" width="75%" oppure width="150" height="250" (non sempre funziona) Il linguaggio HTML p. 23/3
gruppi di righe nella tabella Questi tag, nel caso, vanno inseriti in quest ordine: <caption> l intestazione o il titolo <thead> la riga iniziale (all interno si usa <th> per specificare i singoli elementi; in questo caso il contenuto è automaticamente centrato e in grassetto) <tfoot> la riga finale <tbody> il corpo Per la formattazione della tabella, usare l attributo align="..." all interno di <div> Il linguaggio HTML p. 24/3
attributi di table cellaspacing="50" distanza in pixel tra le celle cellpadding="50" distanza in pixel o percentuale tra il contenuto ed il bordo di una cella frame="above" (oppure "void", "hsides", "lhs", "box", ecc. ) indica la visualizzazione del bordo della tabella rules="rows" (oppure "none", "all", ecc. ) riferito anche a <tr> e <td> indica la visualizzazione del bordo delle celle Il linguaggio HTML p. 25/3
formattazione della tabella Per uniformare la formattazione di una colonna, si utilizza il tag <colgroup>. Attributi: align="left" (oppure "right", "center") e valign="top" (oppure "bottom", "middle", "baseline"), riferiti anche a <tr> e <td>, indicano l allineamento orizzontale e verticale bgcolor="blue" e background="sfondo.gif", riferiti anche a <table>, <tr> e <td> indicano il colore ed un immagine di background width="100" o in percentuale indica la larghezza span="2" indica il numero di colonne a cui è riferita la formattazione Il linguaggio HTML p. 26/3
esempio <table width="75%" border="1"> <caption> <div align="center"> <b>fatturato dell azienda XYZ</b></div> </caption> <colgroup bgcolor="#00ffcc" width="20%" align="right"></colgroup> <colgroup span="2" bgcolor="#33ccff" width="30%" align="center"> Il linguaggio HTML p. 27/3
esempio <thead> <tr> <th>mesi di attività</th> <th>fatturato da attività 1 (in euro)</th> <th>fatturato da attività 2 (in euro)</th> </tr> </thead> eccetera... </table> Il linguaggio HTML p. 28/3
raggruppare celle Le tabelle sono molto usate sia per impaginare i dati che per creare i layout grafici delle pagine web. L alternativa alle tabelle è quella di usare frames o linguaggi pi u evoluti dell HTML. Per raggruppare le celle all interno delle colonne si può usare <td colspan="2">. Analogamente tramite <td rowspan="2"> è possibile creare delle celle che occupino più di una riga. Infine, per creare tabelle più particolari, è possibile annidare le tabelle una dentro l altra. Esempio Il linguaggio HTML p. 29/3
frame I frame (riquadri) permettono di suddividere lo schermo in sottofinestre indipendenti. Presentano alcuni vantaggi: non bisogna ricaricare di volta in volta tutta la pagina, ma solo il frame nuovo chi scrive la pagina, non deve replicare contenuti comuni su più pagine (ora in frame diversi) può essere comodo avere sempre "a vista" un menù di navigazione Esempio: Pagina web del XVIII Congresso dell UMI Il linguaggio HTML p. 30/3
struttura di un file con frame <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/tr/html4/frameset.dtd"> <html> <head>... </head> <frameset rows="50%,50%" cols="50%,50%"> <frame src="prima.html"> <frame src="seconda.html">... <noframes> <a href="senzaframe.html">versione senza frame</a> </noframes> </frameset> </html> Il linguaggio HTML p. 31/3
struttura di un file con frame cambia la prima riga scompare il tag <body> che viene sostituito dal tag <frameset> la pagina non ha contenuti, ma solo link ad altre pagine che contengono i vari frame Attributi di <frameset> sono rows e cols. I valori permettono di avere frames con dimensione fissa, percentuale e proporzionale. Esempi <frameset rows="150,*" cols="100,200,*"> <frameset rows="20%,80%" cols="25%,25%,50%"> <frameset rows="1*,3*" cols="3*,2*,1*"> Il linguaggio HTML p. 32/3
frame annidati È possibile annidare diversi frames l uno dentro l altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset. Esempio: <frameset rows="15%,70%,15%"> <frame src="11.html"> <frameset cols="25%,50%,25%"> <frame src="21.html"> <frame src="22.html"> <frame src="23.html"> </frameset> <frame src="12.html">... Il linguaggio HTML p. 33/3
attributi Il tag <frameset> non dovrebbe avere attributi, anche se sono in genere supportati) frameborder e bordercolor. Il tag <frame> ha invece diversi attributi: <frame src="prima.html" id="riquadro" name="riquadro"> serve a dare un nome (name ha senso solo per retro-compatibilità con vecchi browser). scrolling="auto" (anche "yes" e "no") noresize frameborder="0" (anche "1" che sta per sì) marginwidth="50" marginheight="50" Il linguaggio HTML p. 34/3
target dei link L attributo target serve a specificare la destinazione del link <a href="paginadalinkare.html" target="nomedelframe"> Ci sono poi delle "parole chiave" che ci consentono di ricaricare i link in destinazioni predefinite: target="_blank" (in una nuova finestra) target="_self" (nel frame stesso, default) target="_parent" (nel frameset precedente a quello corrente) target="_top" (nella finestra originale, cancellando ogni struttura a frame) Il linguaggio HTML p. 35/3
noframes e iframe Un tempo il tag noframes serviva nel caso in cui il browser non era in grado di visualizzare la struttura a frames. Attualmente non ha più questa funzione ma serve in quanto i motori di ricerca "catturano" il contenuto del <noframes> come descrizione di un sito. Il tag <iframe> serve ad aprire nuovi frame "al volo". Ad esempio: <iframe src="newpag.html" width="300" height="300"> Contenuto alternativo per i browser che non leggono iframe. </iframe> Anche in questo caso al posto di un contenuto alternativo conviene scrivere una descrizione del frame. Il linguaggio HTML p. 36/3
form Il tag <form> serve ad introdurre dei dati tramite una pagina web. L HTML da solo non è però in grado di gestire questi dati. Per questo scopo è necessario introdurre altri linguaggi (ad esempio il PHP o il JavaScript). Il linguaggio HTML p. 37/3