Conoscere HTML. Elementi HTML particolari In un documento HTML si possono inserire elementi con funzionalità particolari. 1 Il linguaggio HTML

Transcript

1 Conoscere HTML 1 Il linguaggio HTML Abbiamo visto come le informazioni che si trovano in Internet siano memorizzate in pagine web. Queste sono raggiungibili quando se ne conosce l indirizzo o tramite collegamenti ipertestuali. Le pagine possono essere scritte utilizzando differenti linguaggi. Il primo a essere stato utilizzato, il più diffuso e anche il più semplice è HTML (HyperText Markup Language). Si tratta di un linguaggio che permette la scrittura di pagine per il WWW interpretabili dai principali browser presenti sul mercato (ad esempio Internet Explorer o Mozilla Firefox). Un file HTML non è nient altro che un file di testo in cui sono contenute delle istruzioni dette tag. Il browser legge le istruzioni e modifica le caratteristiche grafiche della pagina che appare sullo schermo, cambiando ad esempio colore allo sfondo, creando una lista, visualizzando un immagine. Nel file vi saranno quindi parti di testo che andranno visualizzate e alcune istruzioni che indicano come andrà visualizzato il testo. Ad esempio, le istruzioni seguenti: <CENTER> Questo è un titolo </CENTER> andranno interpretate come: La frase Questo è un titolo andrà centrata nella riga e il risultato sarà: Questo è un titolo I componenti di una pagina web in HTML sono detti elementi. Tra gli elementi HTML vi sono: titoli di diverso livello, frasi in grassetto o corsivo, immagini, paragrafi comuni e link ipertestuali ad altre risorse. Elementi HTML particolari In un documento HTML si possono inserire elementi con funzionalità particolari quali: form per richiedere informazioni all utente; tabelle per organizzare in celle (anche con strutture complesse) lo spazio della pagina; oggetti vari, come applet Java o altri componenti eseguibili da appositi plug-in; immagini grafiche interattive (dette mappe); frame per suddividere la pagina in finestre autonomamente scorribili. Blocco note Per creare una pagina web in HTML devi utilizzare il programma Blocco note incluso tra gli accessori di Windows. 2 I tag HTML I tag HTML sono racchiusi tra un segno di minore < e un segno di maggiore >. Un elemento HTML è formato da uno o due tag. Quando, per definire un elemento, sono necessari due tag e il contenuto informativo (ad esempio il testo da visualizzare) è racchiuso tra di essi (come se fossero parentesi), i due tag vengono detti rispettivamente tag di apertura e tag di chiusura dell elemento. Il tag di apertura e quello di chiusura contengono la stessa parola chiave, ma il tag di chiusura le antepone un carattere slash (/). Nel tag di apertura possono essere specificati attributi (con la sintassi nome_attributo= valore_attributo ) che servono a fornire informazioni aggiuntive sulla natura dell elemento, su stili di rappresentazione o su collegamenti ad altri oggetti. Quando un elemento contiene solo un tag, questo sarà in tutto e per tutto un tag di apertura (eventualmente dotato di attributi) e l elemento viene allora detto vuoto, ossia privo di contenuto. 3 Un documento HTML Un documento HTML comincia sempre con il tag e finisce con il tag. Il file HTML è diviso in due parti: la prima di intestazione, la seconda con il contenuto vero e proprio. Estensione dei file HTML Il file da salvare deve avere l estensione HTM o HTML.

2 Un file HTML si presenta quindi sempre così: <BODY> HEAD (TESTA) Contiene informazioni descrittive generali come il titolo del documento e meta comandi. È la parte compresa tra i TAG e. BODY (CORPO) Contiene tutto ciò che il browser visualizzerà. È la parte compresa tra i TAG <BODY> e. All interno della TESTA è molto importante posizionare il TITOLO, che comparirà nella barra del titolo del browser. È la parte compresa tra i TAG <TITLE> e </TITLE>. 4 La tua prima pagina web Crea una pagina tramite Blocco note. Inserisci solo il testo Prima pagina e il titolo. Il codice HTML potrà essere il seguente: <TITLE> Sito di prova </TITLE> <BODY> Prima Pagina Salva il file con estensione HTM. Se lo apri nel browser, il risultato sarà il seguente: Aprire i file HTML Per aprire un file HTML basta un doppio clic sulla sua icona da Windows. Test 1 Prova a creare una pagina HTML con un titolo diverso. Test 2 Prova a creare una pagina HTML che contenga una frase diversa.

3 Formattare un documento HTML 1 Il linguaggio HTML Esiste una serie di comandi utilizzabili per modificare la modalità di visualizzazione del testo all interno della pagina, operando prevalentemente sulle dimensioni, i formati e i colori. <H1></H1>.<H6></H6> Serve a stabilire la dimensione del carattere; il numero associato alla lettera H indica il livello di dimensione (1 è il più grande, 6 è il più piccolo). (n = 1,2,3,4,5,6,7) Indica la dimensione del testo, n indica il livello di dimensione (1 è il più piccolo, 7 è il più grande). Formatta il testo in grassetto. Formatta il testo in corsivo (italic). Formatta il testo in sottolineato. <CENTER></CENTER> Centra nella pagina il testo e le eventuali immagini. <BLINK></BLINK> Fa lampeggiare il testo. Indica il colore da applicare ai caratteri (viene utilizzato il codice RGB esadecimale). Porta a capo il testo che segue (tag non accoppiato). Porta a capo lasciando lo spazio di una riga vuota. <BODY BGCOLOR= #xxyyzz > Permette di colorare lo sfondo della pagina (viene utilizzato il codice RGB alfanumerico). <BODY TEXT= #xxyyzz > Permette di colorare il testo (viene utilizzato il codice RGB alfanumerico). 2 La tua seconda pagina web Ora creiamo una pagina HTML per mostrare come si usano tutti i tag che abbiamo appena descritto. Crea una pagina tramite l editor Blocco note.dovrai creare una pagina con il titolo ( Sito di prova ). Sotto il titolo è inserita una semplice scritta ( Prima Pagina ) centrata, in grassetto e sottolineata. Seguono poi due righe nelle quali compaiono caratteri di dimensioni, colori, tipi differenti. I colori Ecco una tabella con la notazione di alcuni dei principali colori e la loro numerazione esadecimale. È comunque possibile utilizzare, per i principali colori, anche la parola chiave corrispondente. Colore Parola Notazione chiave esadecimale arancione orange #FFA500 blu blue #0000FF bianco white #FFFFFF giallo yellow #FFFF00 grigio gray # marrone brown #A52A2A nero black # rosso red #FF0000 verde green # viola violet #EE82EE Il numero di colori che l utente ha a disposizione dipende dalla scheda video del computer. Oggi si va da una risoluzione minima di 256 colori a svariati milioni di colori. Estensione dei file HTML Il file da salvare deve avere l estensione HTM o HTML.

4 3 Centrare il titolo Cominciamo centrando il titolo e formattandolo in neretto sottolineato. Aggiungiamo anche un commento che descriva meglio che cosa stiamo facendo. Il codice HTML potrà essere il seguente: <TITLE> Sito di prova </TITLE> <BODY> <CENTER> Seconda Pagina </CENTER> Salva il file con estensione HTM. Aprendolo nel browser vedrai quanto mostrato nella figura. Aprire un file HTML Per far aprire dal browser un file HTML basta fare doppio clic sull icona del file in Windows. 4 Modificare i caratteri Adesso scriviamo delle parole con dimensioni di caratteri differenti. Il codice HTML potrà essere il seguente: <TITLE> Sito di prova </TITLE> <BODY>  <CENTER> Seconda Pagina </CENTER>  <H6>Sto</H6> <H5>imparando</H5> <H4>qualcosa di</h4> <H3>molto</H3> <H2>molto</H2> <H1>divertente</h1>  Sto imparando qualcosa di molto molto divertente Test 1 Prova a creare una pagina HTML con un titolo e i tuoi pensieri su Internet. Test 2 Scrivi alcuni pensieri su questo corso utilizzando diversi titoli.

5 Pagine web multimediali ed elenchi 1 Colorare lo sfondo Per fare in modo che lo sfondo sia colorato, basta definire il BODY della pagina specificando un colore di sfondo. Ricorda che per indicare il colore puoi usare la codifica esadecimale oppure il nome corrispondente in inglese. Il codice HTML potrà essere il seguente: <TITLE> Sito di prova </TITLE> <BODY BGCOLOR = orange >  <CENTER> Terza Pagina ABBIAMO COLORATO LO SFONDO DELLA PAGINA </CENTER> 2 Pagine con immagini Il linguaggio HTML permette la gestione delle immagini all interno della pagina. Nel seguito, con l indicazione immagine.gif si intende l indirizzo del file che contiene l immagine. Bisogna fare attenzione al formato dell immagine, poiché alcuni formati non sono supportati da tutti i browser. I formati più diffusi sono GIF e JPG. <IMG SRC= immagine.gif > Permette di inserire un immagine nella pagina. <IMG SRC= immagine.gif ALIGN=top bottom middle> Permette di inserire un immagine nella pagina, disposta secondo il parametro ALIGN (in alto, in basso o al centro). Copyright Quando si utilizza un immagine da inserire su Internet, occorre assicurarsi che non vi siano problemi di copyrigth (diritti di autore).

6 <IMG SRC= immagine.gif ALT= testo > Permette di visualizzare il valore di ALT se l immagine non viene visualizzata o quando si passa sull immagine con il mouse. <BODY BACKGROUND= immagine.gif > Permette di utilizzare un immagine come sfondo di tutta la pagina. 3 Inserire immagini Creiamo ora una pagina HTML in cui inseriamo un immagine al centro con un leggero bordo. Inseriamo anche un immagine come sfondo. Crea una pagina tramite l editor Blocco note, con il titolo ( Pagina con sfondo ), nella quale è definita un immagine come sfondo. Al centro del video è visualizzata un immagine che ha un leggero bordo (border="1"). Per l immagine sono state definite le dimensioni in altezza e in larghezza. È necessario avere le due immagini disponibili nella stessa directory in cui si salva il sorgente. Ecco il codice HTML: <html> <head> <title>pagina con sfondo</title> </head>  <body background="backgrnd.gif"> sito di prova sto imparando qualcosa di divertente  <img src="immagine.gif" width="173" height="144" border="1" > </body> </html> Dimensioni delle immagini Non inserire mai immagini che siano troppo pesanti, cioè che occupino troppi byte, perché richiedono parecchio tempo per il trasferimento. Un immagine che occupi circa 100 Kbyte è già di buona qualità per la pubblicazione su un sito. Immagini come sfondo L immagine usata come sfondo viene trattata ciclicamente, nel senso che, se è più piccola dello spazio disponibile, viene ripetuta fino a riempire completamente lo sfondo. Salva il file con estensione HTM. Se lo apri nel browser, il risultato sarà il seguente: Puoi verificare il risultato del tuo lavoro scaricando dal sito del libro il file SITODIPROVA.HTM e confrontandolo con il tuo. Altezza e profondità delle immagini Anche se questi parametri non sono obbligatori, è comunque bene inserirli perché in questo modo il browser predispone lo spazio necessario a ospitare l immagine rendendo più veloce il trasferimento della pagina.

7 4 Link ipertestuali I link permettono il collegamento di una pagina con un altra di cui è indicato l indirizzo (URL). Questo può corrispondere a una pagina WWW o a un file presente nello stesso computer. <A HREF= >Collegamento</A> Permette di inserire un collegamento con la pagina di cui viene indicato l indirizzo, e questo verrà attivato premendo la parola indicata come Collegamento. <A HREF= #xxx >Collegamento</A> Permette di inserire un collegamento (ancora esterna) con l etichetta presente nella pagina di cui viene indicato l indirizzo, e questo verrà attivato premendo la parola indicata come Collegamento. <A HREF= #xxx >Collegamento</A> Permette di inserire un collegamento (ancora interna) con l etichetta presente nella stessa pagina attualmente visualizzata, e questo verrà attivato premendo la parola indicata come Collegamento. <A HREF= ><IMG SRC= immagine.gif ></A> In questo caso il collegamento viene attivato con un clic sull immagine immagine.gif. <A NAME= xxx ></A> Definisce un etichetta a cui i collegamenti specificati in HREF possono fare riferimento. Verifica dei link Prima di inserire un link, occorre verificare sempre che esista e che non vi siano problemi ad accedervi. 5 Una pagina con dei link Crea ora una pagina HTML in cui inserirai un link a un sito esterno e un link al fondo della pagina stessa. Per il collegamento al fondo della pagina devi creare un ancora a cui darai un nome (in questo caso fondo ).Il riferimento sarà a questo nome. Per il collegamento a un sito esterno basta indicare come riferimento l URL del sito stesso. La pagina da creare tramite l editor Blocco note è la seguente: <html> <head> <title>pagina con link interni ed esterni </title> </head> <body> USO I COLLEGAMENTI <ul> <li><a HREF= #fondo >Vado subito al fondo della pagina </A></li> <li><a HREF= >Collegamento a un sito </A></li> </ul> <img src= funtoys.jpg style= width: 420px; height: 480px > <A NAME= fondo ></A> FONDO PAGINA <img src= funtoys2.jpg style= width: 420px; height: 480px > </body> </html> Puoi scaricare dal sito del libro il file COLLEGAMENTI.HTM e provare ad aprirlo.

8 6 Utilizzare le liste Esiste la possibilità di creare degli elenchi (liste) numerati e non, anche su più livelli. <UL></UL> Racchiude le voci della lista (non numerata) facendole rientrare a sinistra. <LI></LI> Fa precedere ogni voce della lista da un pallino o da un numero. Se non è indicato il fine tag </LI>della voce della lista, viene inviato mandando automaticamente a capo il testo. <OL></OL> Simile a <UL>, ma gli elementi <LI> interni generano un numero progressivo. <DL></DL> Racchiude gli elementi di una Definition List. <DD> Indica l inizio di una definizione, cioè un piccolo paragrafo che spiega il significato dell elemento della lista. Una pagina con una lista Crea ora una pagina HTML in cui inserirai una lista con l elenco dei regali che desideri per il tuo compleanno. Utilizza l editor Blocco note. La pagina ha il titolo ( Per il mio compleanno ) e come colore di sfondo il giallo chiaro (identificato con il codice RGB esadecimale "#FFFFC0"). Inserisci una lista ordinata per elencare i regali desiderati: per ogni elemento della lista definisci il colore e la dimensione del carattere. Ecco il codice HTML: <head> <title>per il mio compleanno</title> </head>  <body bgcolor= #FFFFC0 > sito di prova cosa desidero per il mio compleanno  <ul> <li>un libro di Ken Follet</li> <li>un CD di Vasco Rossi</li> <li>una chitarra</li> </ul> </body></html> Salva il file con estensione HTM. Se lo apri nel browser, il risultato sarà il seguente: Liste numerate e non L unica differenza nell usare una lista numerata oppure non numerata è nel tag iniziale: <UL> (lista non numerata) oppure <OL> (lista numerata). Test 1 Prova a rifare l esercizio del Sito di prova inserendo immagini diverse in posizioni diverse. Test 2 Crea una pagina HTML con l immagine della tua scuola e il link al suo sito. Test 3 Crea una pagina HTML con l elenco dei tuoi compagni di classe. Test 4 Crea una pagina HTML con l elenco numerato dei tuoi amici. 7 Lista numerata Se vuoi che la lista sia numerata basterà sostituire il tag <UL> con il tag <OL>. Prova a modificare l esempio precedente inserendo una lista numerata. Per rendere originale la pagina, modifica anche il tipo di carattere. Puoi esaminare un esempio di pagina con lista numerata scaricando dal sito del libro il file COMPLEANNO2.HTM.