Guida al linguaggio HTML (HyperText Markup Language)

Transcript

1 1 Guida al linguaggio HTML (HyperText Markup Language) Guida al linguaggio HTML (HyperText Markup Language) Sommario Guida al linguaggio HTML (HyperText Markup Language) Struttura di una pagina web statica HEAD BODY... 3 Esercizi: Introduzione al linguaggio HTML Gestire il testo HEADERS - Le intestazioni (titoli nella pagina) Mandare a capo il testo Creazione di un paragrafo Formattare il carattere Elenchi puntati e numerati... 7 Esercizi: la gestione dei paragrafi e del testo Gestire le immagini, effetti, suoni e altro Le immagini Altri Effetti I Suoni Tabelle HTML Bordo e dimensione delle celle Allineamenti nelle celle Esercizi: inserire tabelle, immagini, link e altro Mappe sensibili... 15

2 2 1. Struttura di una pagina web statica 1. Struttura di una pagina web statica HTML è un linguaggio di marcatura (markup) per la formattazione di pagine web. Un documento HTML è un file di testo (file ASCII) contenente dei comandi per: formattazione strutturazione del layout inserimento di parti multimediali link ipertestuali I comandi (TAG) hanno una forma sintattica particolare <nometag>informazioni </nometag> Ogni TAG può avere degli attributi, ciascuno con il suo valore <nometag attributo= valore >informazioni </ nometag > Un documento HTML è costituito da due parti: L intestazione HEAD Il corpo BODY <html> <head> descrizione delle caratteristiche del documento </head> <body> documento vero e proprio </body> </html> 1.1 HEAD Contiene informazioni molto importanti, per la maggior parte invisibili, tranne il titolo del documento che verrà visualizzato come titolo nella finestra del browser Il tag META <head><title>prima pagina web!!!</title></head> <meta name=." content= "> <head><meta name="keywords" content= master, comunicazione, corep, torino"> <meta name="description" content= master organizzato dal corep in collaborazione "> <meta name= author" content= cristina gena"></head>

3 3 1. Struttura di una pagina web statica 1.2 BODY Contiene tutto quello che verrà visualizzato secondo le direttive di formattazione all interno della pagina web. <body> corpo della pagina </body> Attributi del tag BODY Il tag BODY ha della opzioni che permettono di stabilire. <body bgcolor="colore sfondo" text="colore testo" background="pathname del file con immagine per lo sfondo" link="colore link da visitare" alink="colore link attivo vlink="colore link visitati" > Il colore può essere specificato con parole chiave: red, yellow,... codice esadecimale: Rosso Verde Blu Rosso Verde Blu vengono combinati numericamente per formare tutti i colori usando i numeri 0-9 e le lettere da A a F es. # nero es. #FFFFFF bianco es. #FF0000 rosso Questa codifica prende il nome di RGB. OSS: di default si ha sfondo bianco, testo nero, link da visitare blu, link attivi rossi, link visitati viola I PATHNAME <body background="sfondo.gif > è nella stessa cartella della pagina html <body background= img/sfondo.gif > è in una cartella img contenuta nella cartella che contiene la pagina <body background=../img/sfondo.gif > è in una cartella img che sta allo stesso livello della cartella che contiene la pagina (Sali di una cartella e riscendi) <body background=../../img/sfondo.gif > si deve salire di due livelli e riscendere

4 4 1. Struttura di una pagina web statica Esercizi: Introduzione al linguaggio HTML 1. Il linguaggio HTML é: un linguaggio di markup per la progettazione delle pagine web statiche un linguaggio di markup per la progettazione delle pagine web dinamiche un linguaggio di markup per la progettazione di database un linguaggio per creare siti web come i Social Network 2. Chi ha inventato questo linguaggio? il tuo professore di informatica la NASA il World Wide Web Consortium ARPANET 3. Un documento HTML è composto da: Un menu e un container Head e Body Footer e Body Head e Footer 4. Per assegnare uno sfondo ad una pagina web è necessario scrivere: <body bgcolor="#ff0099"> <body background="#ff0099">"> <html backgroundcolor="#ff0099">

5 5 1. Struttura di una pagina web statica <html bgcolor="#ff0099"> 5. I colori nel web sono rappresentati: con codifica decimale con nomi italiani stabiliti da HP utilizzando il modello RGB utilizzando il modello CMYK 6. I tag meta servono per: specificare il tipo di carattere da utilizzare all'interno della pagina web specificare il colore di sfondo di una pagina web elogiare l'autore del documento indicare le parole chiave contenute ai motori di ricerca 7. Un browser é: il programma utilizzato dai computer client per interpretare il linguaggio HTML un programma per creare pagine web un programma per scrivere codice HTML un programma per rendere un computer in grado di ospitare un sito web 8. Cosa vuol dire che HTML è un linguaggio case unsensitive? che è del tutto indifferente scrivere i tag in maiuscolo o in minuscolo che è necessario scrivere i tag in maiuscolo che è necessario scrivere i tag in minuscolo che tag scritti in maiuscolo o in minuscolo non hanno lo stesso significato 9. Un documento HTML dovrà rispettare alcune delle seguenti regole, indica quali. i tag vanno annidati correttamente l'estensione deve essere.html i tag possono essere inventati dal programmatore i tag vanno indentati cioè rientrati se stanno all'interno di altri tag tutti tag devono avere un tag di apertura e uno di chiusura per inserire dei caratteri accentati all'interno di un tag è necessario utilizzare un particolare codice

6 6 2. Gestire il testo 2. Gestire il testo 2.1 HEADERS - Le intestazioni (titoli nella pagina) <h1> titolo1 </h1>... <h6> titolo6 </h6> OSS: H1,..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi,..., H6 a caratteri piccoli 2.2 Mandare a capo il testo <br> a capo senza saltare una riga 2.3 Creazione di un paragrafo <p> testo del paragrafo e/o immagini </p> Crea un paragrafo e manda a capo saltando una riga il tag <p> possiede un attributo align per l'allineamento del testo nel paragrafo <p align= left > testo allineato a sinistra </p> <p align= right > testo allineato a destra </p> <p align= center > testo allineato al centro </p> L allineamento al centro si può ottenere anche con il tag <center> testo da centrare </center> HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi. Ma XHTML si!! HTML non è sensibile agli spazi e alle linee vuote 2.4 Formattare il carattere <font> </font> Questo tag supporta 3 attributi size per cambiare la dimensione color per cambiare il colore face per cambiare il font <font size= 5 color="red" face= Courier New, Courier, mono >Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier </font> Le dimensioni dei caratteri vanno da 1 (piccolo) a 7 (grande) <font size= +1 > dim+1 del carattere stabilito prima</font> Esistono vari modi per cambiare il formato dei caratteri: 1) Stili fisici; 2) Stili Logici

7 7 2. Gestire il testo STILI FISICI <b> testo </b> <i> testo </i> <u> testo </u> testo in grassetto testo in corsivo testo sottolineato (sconsigliato..) STILI LOGICI <STRONG> testo </STRONG> {grassetto} <EM> testo </EM> {emphasized (corsivo)} <CODE> testo </CODE> {per codice di computer (font con caratteri a grandezza fissa)} INDICI E PEDICI a<sub> 1 </SUB> produce a 1 b<sup> 2 </SUP> produce b Elenchi puntati e numerati Può essere utile poter costruire liste di elementi. HTML fornisce 2 tag per creare le liste LISTE NON NUMERATE <ul> unordered list LISTE NUMERATE <ol> ordered list 1) Liste non numerate: <UL> Il menu prevede due primi: <ul> <li> penne all arrabbiata </li> <li> lasagne al forno </li> </ul> <ul> supporta l attributo type per modificare l aspetto del punto elenco <ul type= disc > <ul type= circle > <ul type= square > 2) Liste numerate:<ol> Il menu prevede due primi: <ol> <li> penne all arrabbiata </li> <li> lasagne al forno </li> </ol> Produce Il menu prevede due primi 1. penne all arrabbiata 2. lasagne al forno Attributi di <ol> type={1,a,a,i,i} start=numero

8 8 2. Gestire il testo Il menu prevede due primi <ol type= i start= 3 > <li> penne all arrabbiata </li> <li> lasagne al forno </li> </ol> Produce: Il menu prevede due primi iii penne all arrabbiata iv lasagne al forno Esercizi: la gestione dei paragrafi e del testo 1. il codice HTML <p align="center"><b>...</b></p> crea un paragrafo allineato al centro e in corsivo crea un paragrafo allineato al centro e in grassetto crea un paragrafo allineato al centro con un bordo intorno crea un paragrafo allineato al centro e sottolineato 2. Il codice <font size="5" face="arial" color="red">...</font> crea un paragrafo di dimensione 5, colore rosso e carattere Arial formatta il testo contenuto in Arial, dimensione 5 e colore rosso crea un paragrafo rosso e in grassetto formatta in Arial colore rosso il testo in esso contenuto 3. il codice <p align="justify">...</p> crea un paragrafo allineato al centro crea un paragrafo allineato a destra crea un paragrafo il cui testo è allineato al margine destro e sinistro crea un paragrafo che sintatticamente è corretto 4. I marcatori h1, h2,... h6 hanno il compito di: formattare i titoli all'interno di un documento, h1 è la dimensione più grande. formattare i titoli all'interno di un documento, h6 è la dimensione più grande. creare una intestazione di pagina per scrivere il proprio nome e cognome creare linee orizzontali nella pagina web 5. Il tag <br> serve per: creare una riga in una tabella mandare a capo il testo del paragrafo tornare alla pagina precedente inserire una citazione all'interno del documento

9 9 2. Gestire il testo 6. Per scrivere 5 alla seconda nel linguaggio HTML devi scrivere: 5<br>2 5<br>2</br> 5<pow>2 5<sup>2</sup> 7. Per inserire all'interno del documento HTML dei commenti visibili solo al programmatore bisogna scrivere <comment>...</comment>.  <c>...</c> <?-- questo è un commento--> 8. Per inserire in un documento HTML il simbolo di maggiore occorre scrivere: > < & à 9. L'attributo size del tag font: range permette di modificare la dimensione del carattere da 1 a 7 permette di modificare la dimensione del carattere con un valore da -7 a 7 è obbligatorio quando si utilizza il tag font non è supportato da tutti i browser se non è specificato assegna di default la dimensione 3 che corrisponde a 12 punti tipografici assegna il valore intero più vicino compreso nel range anche se viene inserito un valore diverso dal

10 10 3. Gestire le immagini, effetti, suoni e altro 3. Gestire le immagini, effetti, suoni e altro 3.1 Le immagini Fino ad ora abbiamo visto come si può formattare il testo. HTML permette di inserire immagini usando il tag <img> l'immagine deve essere memorizzata su un file a parte. I browser supportano formati quali GIF, JPEG, BITMAP, PNG. il tag <img> ha vari attributi <img > src= pathname o URL dell'immagine align= left right {allineamento} alt= text {testo alternativo all'immagine} border= numero {larghezza in pixel del bordo} height= numero {altezza in pixel} width= numero {larghezza in pixel} hspace= numero {spazio orizzontale intorno all'immagine} vspace= numero {spazio verticale intorno l'immagine} ATTENZIONE! per centrare l immagine si può usare il tag <center>: <center><img scr= crifla.jpg ></center> 3.2 Altri Effetti Linee orizzontali Per separare parti di testo si può usare il tag <hr> che produce Questo tag ha tre opzioni <hr size= numero {spessore in pixel} width= numero numero% {larghezza in pixel o in percentuale} align={left right} {allineamento} color= codice esadecimale/colore > Testo lampeggiante (SOLO CON NETSCAPE!!!) Testo, in qualunque forma, che lampeggia in fase di visualizzazione <blink> questo testo lampeggia </blink> testo scorrevole (SOLO CON EXPLORER!!!) <marquee> testo che scorre </marquee> Commenti Può essere utile inserire dei commenti nel documento che non sono visualizzati dal browser

11 11 3. Gestire le immagini, effetti, suoni e altro 3.3 I Suoni È possibile associare suoni alla presentazione di una pagina usando il tag <bgsound> Anche i suoni devono essere memorizzati su file a parte che possono essere di vari formati.au,.wav,.mp3, MIDI (.mid) 3.4 Tabelle HTML Vengono usati 3 elementi diversi per costruire una tabella: 1. il tag di apertura <table> e il tag di chiusura </table> iniziano e terminano la tabella. 2. è la sigla delle parole inglesi "table row" (cioè, riga della tabella) e inizia e termina una riga orizzontale. 3. <td> è la sigla delle parole inglesi "table data" (cioè, dati della tabella). Questo tag inizia e termina ogni cella della riga della tua tabella. Ecco un primo esempio di tabella: <table border="1"> <td>prima cella</td> <td>seconda cella</td> <td>terza cella</td> <td>quarta cella</td> </table> Bordo e dimensione delle celle L attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle. Ad esempio: <table border="2"> Possiamo specificare la larghezza e l altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>,, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo % ): in questo caso la tabella si adatta secondo lo spazio a disposizione. <table width="300" height="200" border="1"> <td>prima cella</td> <td>seconda cella</td> <td>terza cella</td> <td>quarta cella</td>

12 12 3. Gestire le immagini, effetti, suoni e altro </table> Che viene visualizzato così: prima cella seconda cella terza cella quarta cella Oppure: <table width="75%" border="1"> <td width="25%">prima cella</td> <td width="75%">seconda cella</td> <td width="25%">terza cella</td> <td width="75%">quarta cella</td> </table> Che viene visualizzato così: prima cella seconda cella terza cella quarta cella Allineamenti nelle celle Ci sono due attributi per le tabelle: align: specifica l'allineamento orizzontale di tutta la tabella, in una riga o in una singola cella. Per esempio, sinistro, centro o destro. valign: specifica l'allineamento verticale del contenuto di una cella. Per esempio, alto, mezzo o basso. <td align="right" valign="top">cell 1</td> I valori possibili sonotop (alto), middle (in mezzo è il valore di default), bottom (in basso), baseline (alla linea di base). In realtà è possibile raggruppare le delle all interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un altra da 3. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne). In questo caso si utilizza l attributo colspan sul <td>, specificando come valore il numero di celle che devono essere occupate. Ad esempio: <td colspan= 2 >

13 13 3. Gestire le immagini, effetti, suoni e altro Il cui codice corrispondente è: <table width= 430 border= 1 bordercolor= # > <td width= 30% > </td> <td width= 30% > </td> <td width= 30% > </td> <td> </td> <td colspan= 2 align= center valign= middle > <b><td colspan= 2 ></b> </td> </table> Tramite l attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga. Ad esempio: <td rowspan= 2 > il cui codice corrispondente è: <table width= 430 border= 1 bordercolor= # > <td width= 30% > </td> <td width= 30% rowspan= 2 align= center valign= middle > <b><tdrowspan= 2 ></b> </td> <td width= 30% > </td> <td> </td> <td> </td> </table> Esercizi: inserire tabelle, immagini, link e altro 1. Scrivendo il codice seguente <center><img scr= fiore.jpg ></center>: viene inserita una immagine nella pagina web e viene centrata viene inserito un link ad una immagine all'interno della pagina web e viene centrato viene generato un errore perché il tag img necessita di un tag di chiusura è un semplice commento quindi non viene visualizzato niente all'interno della pagina web

14 14 3. Gestire le immagini, effetti, suoni e altro 2. Quale dei seguenti codici permette di visualizzare una descrizione dell'immagine inserita <img src="fiore.jpg" alt="pianta ERBACEA PERENNE A FOGLIE DENTATE CON FIORITURA A GRUPPETTI CON FIORI PICCOLI BIANCHI"> <img src="fiore.jpg" align="pianta ERBACEA PERENNE A FOGLIE DENTATE CON FIORITURA A GRUPPETTI CON FIORI PICCOLI BIANCHI"> <img src="fiore.jpg" src="pianta ERBACEA PERENNE A FOGLIE DENTATE CON FIORITURA A GRUPPETTI CON FIORI PICCOLI BIANCHI"> <img src="fiore.jpg" hspace="pianta ERBACEA PERENNE A FOGLIE DENTATE CON FIORITURA A GRUPPETTI CON FIORI PICCOLI BIANCHI"> 3. Il codice HTML per creare una tabella con 3 righe e 2 colonne è: <table><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></t r></table> <table><td>...</td><td>...</td></table> <table><td><td>...</td><td>...</td>...</td></table> > <table><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></table 4. Per creare un elenco puntato dei colori primari devi scrivere: <ol><li>rosso</li><li>giallo</li><li>blu</li></ol> <li>rosso Giallo Blu</li> <ul><li>rosso</li><li>giallo</li><li>blu</li></ul> <li>rosso</li><li>giallo</li><li>blu</li> 5. Per creare un elenco numerato dei colori del semaforo devi scrivere: <ol><li>rosso</li><li>arancione</li><li>verde</li></ol> <ul><li>rosso</li><li>arancione</li><li>verde</li></ul> <li>rosso</li><li>arancione</li><li>verde</li> <li>rosso Arancione Verde</li> 6. Per inserire un link a Google all'interno di una pagina web devi scrivere: <a href=" qui</a> </link href=" <a href=" qui</a> <link href=" qui</link>

15 15 4. Mappe sensibili 7. Per mettere un bordo ad una tabella è possibile utilizzare l'attributo: border con valore maggiore di zero nel tag table contorn con valore maggiore di zero nel tag table border con valore maggiore di zero nel tag tr border con valore maggiore di zero nel tag td 8. L'attributo align del tag img serve per: allineare l'immagine rispetto ai margini del documento allineare l'immagine rispetto al testo del documento allineare un paragrafo rispetto ai margini allineare un paragrafo rispetto al testo del documento 9. Nel tag td è possibile usare i seguenti attributi per espandere una cella su più righe o su più colonne: colspan rowspan cellspacing width height 4. Mappe sensibili Il link possono essere rappresentati da mappe sensibili cioè immagini utilizzate per effettuare collegamenti ipertestuali multipli. La mappa è suddivisa in aree ciascuna contenente un collegamento. <IMG SRC= foto.jpg USEMAP= #mappa_scelta WIDTH= 160 HEIGHT= 180 > <MAP NAME= mappa_scelta > <AREA SHAPE= CIRCLE COORDS= 60, 78, 46 HREF= xxx.html > <AREA SHAPE= RECT COORDS= 106, 1, 159, 179 HREF= yyy.html > </MAP> Per il cerchio bisogna indicare come coordinate la x e la y del centro e il raggio.