Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row

Transcript

1 TAG FONDAMENTALI Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag <h1>, tag <h2>,.tag<h6> : per definire le intestazioni (i titoli) e la loro dimensione; si utilizzano per i titoli, applicano per default il grassetto, vanno a capo prima e dopo il testo e lasciano un interlinea maggiore sopra e sotto Esempio <h1>questo è un titolo </h1> Tag <p> : per determinare l inizio di un paragrafo; come i titoli H, vanno a capo prima e dopo il testo e lasciano un interlinea maggiore sopra e sotto Esempio <p> Questo è un paragrafo </p> Tag <img> : (senza tag di chiusura) per inserire un immagine attraverso il suo attributo src= percorso e nome dell immagine da visualizzare ( src sta per source) Si può aggiungere l attributo title= testo (descrizione che appare come etichetta al passaggio del mouse sopra l immagine) Esempio <img src= immagini/sole.jpg title= il tramonto > Tag <ul> (che sta per unordered list, ovvero elenco non ordinato o puntato); il tag si chiude con </ul>. Tra il tag di apertura e il tag di chiusura vanno inseriti i tag <li> per specificare le singole voci di elenco. Il simbolo dell elenco puntato per default è il punto nero Esempio <ul > </ul> Tag <ol> (che sta per ordered list, ovvero elenco ordinato); il tag si chiude con </ol>. Tra il tag di apertura e il tag di chiusura vanno inseriti i tag <li> per specificare le singole voci di elenco Il simbolo dell elenco ordinato per default è il numero a partire da 1 Esempio <ol > </ol> Gli elenchi si possono annidare Tag <A HREF> per inserire un collegamento ipertestuale. (la A sta per Anchor) ha bisogno di un tag di apertura e chiusura e al suo interno è possibile inserire testo, immagini o altri elementi che fungono da parola calda o immagine cliccabile L attributo HREF (abbreviazione di Hypertext Reference) specifica la pagina da aprire. L attributo target specifica in quale finestra aprire il link (il default è nella stessa finestra, se si vuole aprire una nuova finestra bisogna impostare target: _blank ) Esempio <a href="pagina.html target= _blank > Visita HTML.it </A> Tag <map> Le immagini cliccabili suddivise in regioni vengono chiamate immagini mappate. Per ottenere un immagine mappata bisogna aggiungere l attributo sema al tag <img> Successivamente occore definire la mappa elencando con il tag <map name="nome"> che chiude con </map> Tra il tag di apertura e il tag di chiusura occorre definire tutte le aree cliccabili tramite il tag <area> che non va chiuso. Nel tag <area> va indicata la forma con SHAPE, le coordinate della forma con COORDS, la pagina da aprire con HREF, e opzionale la didascalia con TITLE Le forme possono essere: RECT, CIRCLE, POLY. Le coordinate sono numeri che esprimono i pixel sull immagine

2 RECT è un rettangolo e ha bisogno delle coordinate del punto in alto a sinistra e quelle del punto in basso a destra. Quindi 4 numeri. CIRCLE è un cerchio e ha bisogno delle coordinate del centro e la misura del raggio. Quindi 3 numeri POLY è un poligono irregolare, si adatta a qualsiasi forma e ha bisogno delle coordinate di punto importante che si trova sul perimetro della forma. Quindi 2 numeri per ogni punto individuato. Esempio <img src= italia.jpg usempa=#italia> <map name=italia> <area shape=rect coords= 230,450,670,560 href= lazio.html title= Vai al Lazio > <area shape=circle coords= 450,340,50 href= umbria.html title= Vai all Umbria > </map> Tag <table> Le tabelle contengono righe e le righe contengono celle: <table> </table> tag di apertura e chiusura per def. una tabella <th></th> (sta per table header, cioè intestazione di tabella) tag di apertura e chiusura per def le celle che servono da intestazioni; per default il contenuto viene scritto centrato in grassetto <tr> </tr> (sta per table row, cioè riga di tabella) tag di apertura e chiusura per def. una riga <td> </td> (sta per table data, cioè dati di tabella )tag di apertura e chiusura per def. le singole celle Nelle tabelle si possono accorpare delle celle poste vicine orizzontalmente usando colspan= Oppure celle poste vicine verticalmente usando rowspan= Esempio <table> <tr> <th colspan=4>orario piscina</th> <</tr> <tr> <td>ora</td><td>lunedi></td><td>mercoledi</td><td>venerdi</td> </tr> <tr> <td>16,00</td><td>hidrobyke</td><td>acquagim</td><td>nuoto</td> </tr> </table>

3 CSS. Caratteristiche grafiche di stile Si inseriscono nel tag <style>, che è nel tag <head> Si richiama il tag e tra parentesi graffe si elencano le proprietà seguite dal valore. Oppure si richiama la classe o l id assegnato ad un tag proprietà per gestire lo sfondo di pagina o di tabella o di qualsiasi altro tag background-color background-image background-repeat background-attachment un qualunque colore nome un'immagine url( ) repeat-x. L'immagine viene ripetuta solo in orizzontale repeat-y. L'immagine viene ripetuta solo in verticale no-repeat. L'immagine non viene ripetuta. scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling pagina fixed. L'immagine rimane fissa mentre il documento scorre background-position proprietà di base per tutti i testi color font-family font-size font-weight font-style text-align text-decoration top, left,bottom,right, center, oppure bottom left, top right, ecc Colore espresso in inglese o RGB o codice esadecimale (#) un singolo font indicato numero espresso in pt (punti) o px (pixel) normal. Valore di default. (400) bold. grassetto bolder più grassetto lighter. Più fine normal: il testo mantiene il suo aspetto normale italic: corsivo left right center -justify none. underline. Il testo sarà sottolineato overline Il testo avrà una linea superiore line-through. Il testo sarà attraversato da una linea orizzontale

4 proprietà per i bordi da applicare a table, td, th Border- color Border-style Border-width (spessore) Border-collapse Proprietà per simbolo utilizzato con elenchi puntati list-style-type un qualunque colore none. L'elemento non presenta alcun bordo e lo spessore equivale a 0. Dotted (punteggiato) ; dashed (tratteggiato) ; solid (linea singola continuia); double (doppia linea); inset; (incassato) outset (rilievo) Un valore uin pixel Collapse (bordi sovrapposti) separate (bordi disgiunti) Disc, square, circle Proprietà per simbolo utilizzato con elenchi ordinati list-style-type Stati di un link Decimal Upper-alpha (lettera alfabetica maiuscola) Lower-alpha (lettera alfabetica minuscola) Upper-roman (numero romano maiuscolo) Lower-roman (numero romano minuscolo) A:link A:visited A:hover Proprietà delle immagini Stato normale Stato link visitato Al passaggio del mouse Valori border Crea un bordo intorno all immagine Solid, none float Permette di specificare l'allineamento dell'immagine rispetto alla riga di testo successiva Left, rigth, none padding viene adoperato nelle immagini flottanti, cioè quelle immagini allineate con left e right e servono ad impostare nell ordine degli spazi verticali orizzontali, destro e sinistro img{float: left; padding: 25px 10px 35px 5px;}

5 fra il testo e l'immagine stessa Width height Lunghezza e altezza dell immagine img{ width: 114px; height: 75px; }