INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema editoriale. La maggior parte dei tag è composta da un comando di apertura e da un comando di chiusura (riconoscibile per la presenza di uno slash: /) e si comporta come se fosse composto da una coppia di parentesi: ogni tag aperto deve essere chiuso, altrimenti la modifica si trasmette a tutto il testo che segue. È possibile applicare più tag ad uno stesso testo ma, come per le coppie di parentesi, è necessario che i comandi di apertura e chiusura si susseguano nell ordine corretto, secondo questa struttura: {[(TESTO)]}. Il primo tag aperto sarà l ultimo ad essere chiuso. Alcuni tag per essere attivati necessitano di un ulteriore strumento, l attributo, che specifica l azione da compiere sul testo da modificare. Un tag può essere definito attraverso un solo attributo o più di uno; l attributo compare nel solo comando di apertura del tag. All interno del comando di apertura, tra un attributo e l altro dev essere lasciato uno spazio. Il testo modificato dal tag è racchiuso tra il comando di apertura e quello di chiusura (nelle istruzioni che seguono, sarà indicato come TESTO), senza spazi tra tag e testo. Il TESTO corrisponde alla parola o alle parole che diventeranno cliccabili ed è sempre possibile correggerlo. Non deve mai mancare: se non viene scritto niente tra i due comandi di un tag html, l utente non avrà nulla da cliccare. Nell usare i tag, rispetta spazi, simboli e la composizione dei tag complessi. Non tralasciare parti di codice per questioni estetiche: il rischio è sempre che il tuo pubblico non riesca ad accedere alle informazioni ed ai materiali che gli vuoi proporre. I TAG HTML DI BASE (in Gestione Pagine: modalità Testo o HTML) TAG AZIONE Tag per la gestione di paragrafi <br> Manda il testo a capo. 1 (eccezione: non prevede il comando di chiusura) <hr> <p>testo</p> Es. <p align="right">questo testo è allineato a destra.</p> Crea una linea orizzontale. (eccezione: non prevede il comando di chiusura) Racchiude un paragrafo a cui si vuole applicare il medesimo allineamento. L attributo che gestisce 1 Nello strumento Gestione pagine dev essere posizionato un <br> all inizio del testo in tutti i layout delle famiglie 3.xx e 4.xx. In seguito non deve mai essere usato, se è selezionata la modalità testo (in nessun layout). Deve sempre essere inserito al termine di ogni riga di testo, invece, nel campo della spalla (in tutti i layout). 2 L attributo justify, che giustifica il testo, è sconsigliato: chi ha problemi di lettura su schermo trova ancor più difficoltosa la lettura di testi giustificati. Redazione Web di Ateneo 1
Questo testo è allineato a destra. l allineamento è align="...", i cui possibili valori sono: left, right o center 2 (a sinistra, a destra o centrato). Tag di formattazione del testo <b>testo</b> Applica il grassetto al testo. 3 <i>testo</i> <font>testo</font> Es. Questa parola è <font size="4" color="red">rossa</font>. Questa parola è rossa. Applica il corsivo al testo. Modifica il tipo di font (carattere tipografico) predefinito. Suoi attributi possibili: color="...", che gestisce il colore del testo. Per rendere più evidente un informazione urgente o particolarmente importante, è possibile applicare il colore rosso alle parole, inserendo tra le virgolette il valore red ; il colore predefinito è nero; 4 size="...", che gestisce la dimensione del font ed i cui valori possibili per i nostri siti web sono numeri da 1 a 3, a grandezza crescente; la dimensione predefinita è 2. <!-- TESTO --> Il tag del commento nasconde il testo compreso tra il comando di apertura e quello di chiusura. (eccezione: prima e dopo il TESTO va messo uno spazio) Attenzione: non può esserne usato uno all interno di un altro. Tag per la creazione di link <a href=" ">TESTO</a> <a href="http:// ">TESTO</a> Rende link il TESTO che racchiude. A seconda del tipo di indirizzo indicato tra i doppi apici, si otterrà un diverso effetto. L attributo href=" " è obbligatorio e riporta l indirizzo al quale vogliamo condurre l utente. Link ad una pagina web. 5 Cliccando sul testo reso link, 3 Non più di 5 parole per ogni paragrafo di testo sono sufficienti ad indicare l argomento. Evidenziare intere frasi o paragrafi, li rende leggibili con maggior difficoltà. 4 N.B.: l uso del colore blue è fortemente sconsigliato nei testi. In Internet questo codice grafico suggerisce agli utenti la presenza di un link: se cliccando non saranno portati su un altra pagina, si convinceranno che qualcosa non funziona. 5 Per la distinzione tra link interno e link esterno, vedi i Suggerimenti, in coda a questa guida tecnica. In ogni caso, dimentica l esistenza degli omonimi pulsanti del sistema editoriale: creano codice errato. Redazione Web di Ateneo 2
Es. <a href="http://www.miur.it">www.miur.it</a> www.miur.it l utente viene condotto alla pagina collegata. <a href="mailto:...@...">testo</a> Es. <a href="mailto:nome@blabla.it">nome@blabla.it</a> nome@blabla.it Tag per l inserimento di immagini 6 <img src=" "> Es. Qui c è un immagine: <img src="/uninsubria/allegati/pagine/12950/icona.gif" border="0" align="0"> Qui c è un immagine: Link ad un indirizzo e-mail. Cliccando sul testo reso link (nome della persona, dell ufficio o, meglio, l indirizzo e-mail stesso), all utente viene creato un nuovo messaggio con il destinatario già impostato su quell indirizzo. Permette l inserimento su una pagina web di un immagine precedentemente caricata come allegato sul sito. (eccezione: non prevede il comando di chiusura) Suoi attributi sono: src="...". Obbligatorio, riporta l indirizzo al quale è caricata l immagine da pubblicare; align="...". Obbligatorio, gestisce l allineamento dell immagine ed i cui possibili valori sono left o right (a sinistra o a destra); border="...". Obbligatorio, gestisce il bordo dell immagine ed i cui valori possibili sono i numeri 0 oppure 1; hspace="...". Non obbligatorio, gestisce la quantità di spazio orizzontale tra immagine e testo, sui due lati. I valori consigliati sono numeri compresi tra 1 e 10; vspace ="...". Non obbligatorio, gestisce la quantità di spazio verticale tra immagine e testo, sopra e sotto. I valori consigliati sono numeri compresi tra 1 e 10. 6 Questo tag può essere usato soltanto dagli uffici Orientamento, Segreterie Studenti, Relazioni Internazionali; dagli altri, solo dietro autorizzazione. Tutte immagini non autorizzate pubblicate dagli altri uffici saranno eliminate. Redazione Web di Ateneo 3
I TAG HTML COMPLESSI (in Gestione Pagine: solo modalità HTML. Sulle HPD: l uso delle tabelle è fortemente sconsigliato, perché consuma un eccessivo numero dei caratteri disponibili) TAG Tag per la creazione di elenchi AZIONE Sono tag complessi, perché si compongono di più tag semplici annidati l uno nell altro e possono essere usati soltanto se completi. 7 Per comporre un elenco devi: 1. aprire e chiudere il tag relativo all elenco che vuoi attivare (elenco puntato <ul> o numerato <ol>); 2. all interno dei comandi di apertura e chiusura dell elenco, aprire e chiudere il tag relativo a ciascuno dei tuoi punti elenco (<li>); 3. all interno dei comandi di apertura e chiusura di ciascun punto elenco, scrivere le tue informazioni, formattate con tutti i tag necessari. Gli elenchi comprendono nella propria struttura uno stacco di una riga dal testo che li precede e di una dal testo che li segue. <ul> </ul> Es. Questo è un elenco puntato: <ul> <li>primo punto elenco</li> <li>secondo punto elenco</li> </ul> Elenco puntato (lista non ordinata). Questi comandi indicano soltanto il punto d inizio e di conclusione dell elenco: devono racchiudere i tag necessari per ogni punto elenco. Questo è un elenco puntato: primo punto elenco secondo punto elenco <ol>... </ol> Es. Questo è un elenco numerato: <ol type="a"> <li>primo punto elenco</li> <li>secondo punto elenco</li> </ol> Questo è un elenco numerato: a. primo punto elenco b. secondo punto elenco Elenco numerato (lista ordinata). Questi comandi indicano soltanto il punto d inizio e di conclusione dell elenco: devono racchiudere i tag necessari per ogni punto elenco. L attributo che gestisce il tipo di numerazione desiderata è type="...", i cui possibili valori sono: 1 (numeri arabi), A (lettere maiuscole), a (lettere minuscole), I (numeri romani maiuscoli) o i (numeri romani minuscoli). 7 Se non scrivo il tag dell elenco, sul mio computer potrebbe funzionare tutto correttamente, ma poiché uso codice HTML errato, sul computer di qualche altro utente, soprattutto se esterno all Ateneo, alcune informazioni saranno mostrate nel modo sbagliato o non saranno mostrate affatto. Redazione Web di Ateneo 4
<li>testo</li> Indica il punto elenco, puntato o numerato. Dev essere racchiuso tra i comandi di apertura e di chiusura del tag che indica la presenza di un elenco. Tag per la creazione di tabelle 8 Sono tag complessi, perché si compongono di più tag semplici annidati l uno nell altro e possono essere usati soltanto se completi. Se non scrivi tutte le parti e non chiudi tutti i tag aperti, la tabella non riuscirà. Per creare una tabella devi: 1. aprire e chiudere il tag relativo alla tabella (<table>); 2. all interno dei comandi di apertura e chiusura della tabella, aprire e chiudere il tag relativo a ciascuna delle righe che vuoi creare (<tr>); 3. all interno dei comandi di apertura e chiusura delle righe, aprire e chiudere il tag relativo a ciascuna delle celle (<td>) 4. all interno dei comandi di apertura e chiusura di ciascuna cella, scrivere le tue informazioni, formattate con tutti i tag necessari. Es. <table border="1" style="font-size: 100%;" cellspacing="10" align="center"> <tr> <td align="center">cella 1</td> <td>cella 2</td> </tr> <tr> <td>cella 3</td> <td>cella 4</td> </tr> </table> cella 1 cella 2 cella 3 cella 4 Attributi del tag <table> sono: border="...". Obbligatorio, gestisce il bordo dell immagine ed i suoi valori consigliati sono i numeri 0 (nessun bordo) oppure 1 (linea sottile); style="font-size: %;". Non obbligatorio, gestisce la dimensione del testo di tutta la tabella. Il valore 100% fa sì che il testo nella tabella abbia la stessa dimensione del testo della pagina; valori più bassi riducono la dimensione, valori più alti l accrescono; align="...". Non obbligatorio, gestisce l allineamento orizzontale della tabella rispetto allo spazio in cui si trova. Suoi possibili valori sono center, left o right (centrata, a sinistra o a destra). Se non uso questo attributo, la tabella viene automaticamente allineata a sinistra; cellspacing ="...". Non obbligatorio, gestisce la quantità di spazio tra i bordi delle celle ed il testo contenuto. I valori possibili sono numeri da 0 in su. 8 Per usare questi tag, nel campo di testo di una pagina (strumento Gestione pagine ) dev essere attivata la modalità HTML. Redazione Web di Ateneo 5
Attributo del tag <td> è: align="...". Non obbligatorio, gestisce l allineamento orizzontale del testo rispetto allo spazio della cella. Suoi possibili valori sono center, left o right (centrata, a sinistra o a destra). Se non uso questo attributo, il testo viene automaticamente allineato a sinistra. SUGGERIMENTI E DETTAGLI I LINK 1.1 Link interno, link ad allegati e link esterno Il tag che crea i link è uno soltanto ed è presentato più sopra. A seconda del tipo d indirizzo indicato tra i doppi apici, però, si potrà portare l utente su pagine web dei siti del nostro Ateneo o di siti esterni o, ancora, far aprire un documento allegato. 1.1.1 Link interno <a href="/pls/uninsubria/consultazione.mostra_pagina?id_pagina=...">testo</a> Permette di collegare le pagine web presenti sul sito di Ateneo, sui siti di Facoltà o di Dipartimento. Questo collegamento funziona soltanto all interno del nostro sistema editoriale, che gestisce la pubblicazione delle Home Page Docenti ed il sito dell Ateneo. Puoi digitare l indirizzo della pagina, oppure, più semplicemente, copiarlo dalla barra dell indirizzo del browser e cancellare successivamente la parte: http://www.uninsubria.it Al posto dei puntini, come ultimo elemento dell indirizzo è, in genere, indicato un numero: il codice ID della pagina che si vuole collegare; esso è visibile durante la navigazione, come ultimo elemento dell indirizzo. Un esempio di link interno: Per informazioni sulle procedure di iscrizione, visitate le pagine della <a href="/pls/uninsubria/consultazione.mostra_pagina?id_pagina=200"> Segreteria Studenti</a> Link interno. Per informazioni sulle procedure di iscrizione, visitate le pagine della Segreteria Studenti. 1.1.2 Link a un documento allegato <a href="/uninsubria/allegati/pagine/0000/nomefile.fff" target="_blank">testo</a> Dopo aver caricato alcuni documenti nel sistema editoriale potresti avere la necessità di renderli disponibili su un unica pagina web al tuo pubblico. Purtroppo, il layout xx.09 usato per caricare i Redazione Web di Ateneo 6
documenti ha il difetto di mostrare un solo link, quindi devi applicare alla pagina un altro layout e poi scrivere i link che permetteranno al tuo pubblico di scaricare o aprire gli allegati. 9 La struttura-base del link è quella riportata sopra. Puoi scrivere l indirizzo del documento: in penultima posizione dev essere indicato il codice ID della pagina sulla quale il documento è caricato, mentre in ultima posizione dev essere scritto il nome esatto del tuo file, completo dell estensione. Quando attivi il link ad un allegato è meglio far aprire il documento in una nuova finestra del browser 10, attraverso l attributo target="..." del tag <a>: il valore "_blank", provoca l apertura del documento in una nuova finestra del browser. Questo, il codice: Leggi l <a href="/uninsubria/allegati/pagine/3412/intro_html.pdf " target="_blank">guida all HTML</a> (file PDF; 85 Kb) Apre il documento in una nuova finestra. Leggi l (file PDF; 85 Kb) Indica sempre il tipo di file e la sua dimensione. Se devi creare il collegamento ad un allegato disponibile su un altro sito web, non rifare il lavoro già fatto da altri: crea un link esterno che porti l utente sulla pagina dell altro sito web dove il documento è disponibile. Cerca di non creare mai un collegamento che apra direttamente un file altrui: se il documento sarà aggiornato, rischi che il tuo pubblico continui ad accedere alla vecchia versione. 1.1.3 Link esterno <a href="http://www..." target="_blank">testo</a> Con la denominazione link esterno intendiamo un collegamento diretto alla pagina di un sito web non prodotto attraverso il sistema editoriale dell'università (sito di Ateneo, siti di Facoltà, Dipartimento o Istituto), ad es.: il sito dell e-learning, pagine personali di un docente pubblicate su un altro server, siti di altre università, il sito del MIUR. Quando attivi un link esterno è meglio far aprire la pagina in una nuova finestra del browser, attraverso l attributo target="..." del tag <a>: il valore "_blank", provoca l apertura della pagina in una nuova finestra del browser. Questo, il codice: <a href="http://www.miur.it" target="_blank">www.miur.it</a> Apre la pagina in una nuova finestra. www.miur.it 1.2 Indirizzi nascosti o a vista. Quando crei un link ad una pagina web o ad un indirizzo e-mail hai due scelte possibili: lasciare l indirizzo visibile oppure nasconderlo, rendendo cliccabili altre parole. L effetto è questo: 9 Trovi la procedura dettagliata sulla guida Allegare più documenti ad una pagina web, disponibile all indirizzo: www.uninsubria.it/web/rwc/guide. 10 Internet Explorer, Firefox di Mozilla, Opera, Redazione Web di Ateneo 7
<a href="http://www.uninsubria.it">università degli Studi dell Insubria</a> <a href="http://www.uninsubria.it">www.uninsubria.it</a> Indirizzo di pagina nascosto: Università degli Studi dell Insubria Indirizzo di pagina a vista: www.uninsubria.it <a href="mailto:nome@blabla.it">nome Cognome</a> Indirizzo e-mail nascosto: Nome Cognome <a href="mailto:nome@blabla.it">nome@blabla.it</a> Indirizzo e-mail a vista: nome@blabla.it 1.2.1 Collegamenti a pagine web. Se il link è all interno di un paragrafo e porta all approfondimento di un argomento specifico, è preferibile nascondere l indirizzo alla vista e favorire la semplicità di lettura. Es. Le date degli appelli d esame saranno pubblicate presso le pagine della Facoltà. Eventualmente, è possibile lasciare l indirizzo a vista indicandolo tra parentesi. Se il link è diretto alla home page di un sito web, è preferibile lasciarlo a vista: - all interno di un paragrafo, tra parentesi: Es. Sul sito web dell Università degli Studi dell Insubria (www.uninsubria.it) sono disponibili informazioni e contatti pubblicati dagli uffici. - al termine di una frase: Es. Per approfondimenti, visita il sito dell Università degli Studi dell Insubria: www.uninsubria.it Se decidi di lasciare a vista l indirizzo di un sito, ricorda di cancellare http:// dal testo cliccabile: l utente lo ricorderà più facilmente. 1.2.2 Collegamenti a indirizzi e-mail. Per quanto riguarda le e-mail, è preferibile lasciare l indirizzo a vista: l utente lo ricorderà più facilmente. A volte, però, si decide di non mostrare l indirizzo per questioni di estetica della pagina: la resa grafica in qualche caso viene infatti ritenuta migliore, se gli indirizzi e-mail sono nascosti sotto il nome della persona o dell ufficio. È comunque importante tenere presente che le pagine web vengono anche stampate al fine di salvare le informazioni e riutilizzarle in seguito. In questo caso, è preferibile che gli indirizzi, soprattutto se e-mail, siano pubblicati a video: saranno presenti anche sulla stampa della pagina. Se, invece, gli indirizzi sono stati nascosti, la stampa presenterà soltanto testo. Redazione Web di Ateneo 8