Benvenuti alla mia guida sulle principali funzioni dell'html. Posso immaginare che chi si avvicina per la prima volta a questo meraviglioso standard che ha permesso la visualizzazione di informazioni in formato ipermediale e ipertestuale, si potrà sentire un pò scoraggiato al vedere tutto l'insieme di comandi e sfaccettature che contiene e soprattutto di fronte all'evoluzione cui mese dopo mese è sottoposto. Tuttavia è bene rassicurare l'utente sul fatto che in commercio si trovano ormai programmi che consentono di realizzare pagine web senza scrivere una riga di codice come Microsoft Front Page, Netscape Composer (integrato nel nuovo Communicator) o ancora Corel Web Designer, come anche il più sofisticato Dreamweaver della Macromedia; anche se, e il professionista lo sa bene, per una maggiore personalizzazione è bene conoscere i tag dell'html. Questo è tutto. Buon divertimento! Cos'è l'HTML?HTML sta per Hypertext Markup Language. Consiste in una serie di codici che vengono inseriti in un documento e poi interpretati da un browser come Netscape o Internet Explorer. I file HTML sono facilmente riconoscibili dalla loro estensione, html appunto. Utilizzando un browser come Netscape puoi vedere i codici della pagina che visualizzi semplicemente scegliendo la voce del munù VIEW, e poi SOURCE... Un documento HTML deve avere necessariamente una forma di base perchè sia riconosciuto dal browser.
Da questo primo esempio puoi già capire le cose principali. I codici di apertura sono chiusi dentro un segno di minore e un segno di maggiore (< >), nei codici di chiusura è incluso uno slash dopo il segno di minore (</ >). D'ora in poi chiameremo questi codici "tags" Per esempio, un documento HTML viene aperto dal tag <HTML> e chiuso dal tag </HTML>. ColoriI colori e le immagini di background sono controllate dal tag <BODY> (corpo appunto). Tu puoi controllare il colore del background, del testo e dei links usando il tag <BODY>. Per il controllo dei colori il tag <BODY> deve essere scritto così: <BODY yyyyy="#xxxxxx"> Dove al posto di "yyyyyy" puoi inserire "bgcolor", "text", "link", "vlink" o "alink" rispettivamente: colore del background, colore del testo, del link, del link visitato o del link attivo. Al posto di "xxxxxx" devi inserire invece il valore relativo al colore che hai scelto. Eccoti alcuni esempi dei valori che puoi utilizzare:
Questi valori rappresentano il valore esadecimale delle combinazioni fra il rosso, il verde e il blu. Capite benissimo che non posso elencare tutte le altre combinazioni giacchè le possibili sfumature sono quasi infinite, tuttavia posso indirizzarvi presso il convertitore di colori esadecimali. Ad ogni modo ricorda che spesso si impara dall'esempio altrui, dunque se vedi in un'altra pagina un colore che ti piace, dai un'occhiata al source e troverai il valore che ti interessa. Esempio: <BODY BGCOLOR="#0000FF" text="#FFFFFF" link="#FFFFFF" vlink="#CC9999"> In questo caso l'output della nostra pagina avrà il colore di background blu, quello del testo bianco, quello del link bianco e quello del link visitato grigio. Linee orizzontaliPuoi inserire una linea orizzontale nel tuo documento facendo uso del tag <hr>. Un esempio lo trovi qui in basso: Naturalmente puoi avere più controllo sulla linea che inserisci, facendo seguire ad hr la voce size puoi stabilirne la grandezza, con la voce align l'allineamento, con widht lo spessore. Puoi creare persino una linea nera aggiungendo NOSHADE. Esempio: <hr size=10 align=left noshade width=50%> qui sotto il risultato: Liste puntatePuoi creare liste puntate utilizzando il tag <ul> (unordered list). Esempio: <ul> La lista apparirà in questo modo:
Lista NumerataPuoi creare liste numerate usando il tag <ol> (ordered list). Il formato è: <ol> <li> Esempio: <ol> la lista apparirà così:
Lista di definizioniIl modo migliore per capire cosa sia una lista di definizioni è quello di osservare questo esempio:
Questo è il codice di quello che avete appena visto sopra: <dl> HeadersIl browser riconosce sei livelli di headers (titoli). <h1>Geocities
</h1> apparirà così: GeocitiesGeocities 2Geocities 3Geocities 4Geocities 5Geocities 6Testo centratoPuoi centrare il testo chiudendolo nel tag <CENTER>. Esempio: questa linea <center> Ciao mondo</center> apparirà così Ciao mondo Se più di una linea di testo viene chiusa all'interno del tag <center> le altre risulteranno centrate, ricordiamo dunque di chiudere il tag (</center>) quando desideriamo che il nostro testo ritorni alla formattazione di default. Bold e italicsPuoi assegnare la formattazione di grassetto (bold) o di corsivo (italic) al testo chiudendolo nel tag <b> per il grassetto e <i> per il corsivo. <b> Bold </b> appare così: Bold <i> Italic </i> appare così: Italic <b><i> Bold e italic </i></b> appare così: Bold e italic Paragrafi e interruzioni di lineaIl browsers non rispetta il modo in cui tu formatti un testo, se dai un invio scende di un paragrafo e ignora gli spazi fra le parole che siano superiori ad uno. Se non dai istruzioni specifiche la tua linea di testo continuerà a scorrere per tutta la lunghezza della finestra del browser con le complicazioni che è facile immaginare se l'utente imposta una alta risoluzione di schermo. Il tag <br> ti permette di impostare la fine di una linea di testo e l'inizio di una nuova linea appena sotto. Il tag <p> ti permette di definire la fine di una linea di testo, l'inserimento di una linea bianca e l'inizio di una nuova linea appena un paragrafo sotto da quella appena scritta. Testo preformattatoUno dei limiti dell'html è stato il non poter disporre il testo come lo si voleva. Fortunatamente un tag <PRE> seguito dal testo, ed un tag </PRE> alla fine risolvono questo problema. Il tuo testo apparirà nel font typewriter (macchina da scrivere) e potrai mettere tutti gli spazi che vuoi, potrai portare a capo senza che scenda un intero paragrafo e così via. Esempio: C'era freddo laggiù nessuno osava pronunciare una parola la stanza era piccola e la gente si riscaldava alitandosi addosso Fai lampeggiare un testoIl codice: <blink>Brillo!</blink> apparirà così:
Crea un link all'interno della stessa pagina (bookmark)Chi ha dimestichezza con il proprio browser sa che i bookmarks (segnalibro) sono una raccolta di link, che l'utente imposta a seconda dei suoi gusti, che ti permettono di saltare da una pagina all'altra con la comodità di non dover digitare l'indirizzo, e quindi ricordarlo o appuntarlo. Qui parliamo di un altro tipo di bookmark: le pagine html possono infatti superare di gran lunga come lunghezza quella visibile a schermo, pertanto può essere necessario fare dei link all'interno della stessa pagina che permettano all'utente di saltare su determinati argomenti presenti nella stessa pagina. Un esempio è in questa stessa pagina, questo link infatti conduce al target (obiettivo) index che sta in alto alla pagina e sotto il quale, in questo caso specifico, si trovano degli altri link che conducono ad altrettanti target all'interno di questa pagina (un esempio è il titolo di questa sessione, scegliendo l'opzione view source del vostro browser potete accorgervi di quanti bookmark o target ci sono all'interno della pagina). Per impostare dei link di questo tipo devi compiere due operazioni:
La parte relativa al "hotlink_testo" apparirà sottolineata e nel colore che hai impostato nel tag <body link=#xxxxxx>. Quando l'utente cliccherà sull'hotlink, il browser lo farà saltare al "target_testo"... per comodità è consigliabile usare lo stesso nome del target_testo per il target_nome_qui . Crea un link ad una pagina del tuo serverAltrettanto semplice è creare un hyperlink che permetta al browser di far saltare l'utente ad una risorsa locata nel tuo stesso server. Eccoti un esempio: <a href="percorso_e_nome del file">hyperlink testo </a> Se il file che devi chiamare è nella tua stessa directory non è necessario specificare il percorso, al contrario, se il file è posizionato su un'altra directory devi digitare il relativo percorso seguito dal nome del file. Per esempio, se il file "randone.gif" è collocato nella directory "nicola" il tag da usare sarà <a href="nicola/randone.gif">. Se l'hyperlink è collocato invece in una sottodirectory di nicola il tag dovrà essere scritto in questo modo <ahref="../randone.gif">: i due puntini indicano al browser che il file si trova una cartella più in basso. Questo è un esempio di hyperlink ad un'immagine che si trova nella stessa directory di questa pagina: <a href="menu.gif"> Apri menu.gif </a> Prova il risultato del tag qui sotto e poi utilizza il bottone Back del tuo browser per tornare a questo documento. Salta ad un documento in un altro sistemaCreare un hotlink che salti da una pagina di una sistema a quella di un altro è come creare un semplice link sullo stesso server, solo devi specificare l'URL completo della pagina cui devi fare un link. Supponiamo di non trovarci sul server di Geocities e di voler fare un link ad una pagina su Geocities: <a href="http://www.geocities.com/HeartLand/Meadows/3591/" Vai a Ragusa on line </a> Inserisci delle immagini all'interno della tua paginaPuoi inserire delle immagini all'interno della tua pagina, sia che esse siano collocate nella tua stessa directory, sia che stiano da qualche altra parte della rete. Il formato dei file immagine deve essere compatibile con quello che leggono i browser. Io consiglio GIF o JPG. Un esempio del tag che ti consente di posizionare delle immagini all'interno della tua pagina è il seguente: <img src="nicobanner.gif" align=bottom> Questo tag informerà il browser di caricare l'immagine nicobanner.gif e di posizionarla nel punto in cui la si richiede, l'esito in basso:
Naturalmente puoi controllare la posizione dell'immagine utilizzando il tag <imgsrc> in combinazione col tag <center>. Qui in basso l'output di un esempio di tag <imgsrc> combinato con il tag <center>:
Puoi linkare l'immagine che mostri ad una risorsa particolare e usare il tag <imgsrc> in combinazione con altri:
In basso il codice responsabile: <center><a href="../indexit.htm"><img src="../nicobanner.gif" border="0" width="400" height="40"></a><br> <font color="#808080"><strong>Nico Home Page</strong></font><center> In preparazione... tabelle, frame, forms, tag embed, java script e applet Indirizzi utiliPer più informazioni sull'html prova questi links Muy Bien... se avete già guardato la sezione dedicata all'FTP dei vostri files potete dare un'occhiata ai modi con cui potete interagire col server di Geocities per costruire forms di contatto (feedback), per inserire contatori e guestbook.
| ||||||||||
