Titolo: <title> Attribuisce un titolo alla pagina risultati di un motore di ricerca header del file (<head>) HTML Esempio: <head> <title> Titolo della pagina Web </title> </head> Gli elementi principali di una pagina Web 2 Tag <meta> Alice Pavarani Tag <meta>: Esempi Per inserire la descrizione: description alcune parole chiave: elementi essenziali per il <meta name= description header del file (<head>) Ha tre attributi principali: <meta name= keywords posizionamento di una pagina tra i risultati forniti da un motore di ricerca name content content= Per aggiungere le parole chiave: keywords <meta name= author content= author content= charset: specifica la codifica del documento HTML <meta charset= - 3 Alice Pavarani Formattazione del testo 4 Blocchi: <div> Il testo di una pagina HTML va inserito nel tag <body> Titoli (differenziati dalle dimensioni del carattere) da <h1>: <h1>Titolo più grande</h1> fino ad <h6>: <h6>Titolo più piccolo</h6> Paragrafi (utilizzati per separare il testo) attraverso il tag <div> Il tag <div> può contenere testo, immagini, tabelle La suddivisione della pagina in blocchi è spesso usata per permettere la formattazione omogenea di un intero blocco <p> Testo di un paragrafo </p> Al termine di ogni paragrafo il testo va a capo. Andare a capo : <br/> Inserire più spazi:   (non si tratta di un tag ma di un carattere speciale) Grassetto: <strong>Testo in grassetto</strong> Enfatizzato: <em>Testo enfatizzato</em> Sottolineato: <u>Testo sottolineato</u> Evidenziato: <mark>Testo evidenziato</mark> Per i caratteri accentati ed altri simboli è necessario utilizzare appositi caratteri speciali (http://www.caratterispecialihtml.com/) 5 Alice Pavarani Alice Pavarani Ad esempio, è possibile specificare il colore del testo contenuto in un blocco: <div style="color:#FF0000"> Tutto il testo qui in mezzo viene scritto in rosso </div> 6 Alice Pavarani Elenchi Tabelle: <table> inserendolo in tabelle tag <table> si inseriscono righe di celle, definite dal tag <tr> (table row), in cui si inseriscono le celle, definite dal tag <td> (table data) Elenchi puntati <ul> <ul> </ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> Le celle destinate a contenere il titolo sono definite dal tag <th> Elenchi numerati <ol> <ol> </ol> Il numero di celle inserite in ogni riga dovrà sempre essere lo stesso (essendo questo il numero di colonne) <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> 7 Le celle procedono da sinistra verso destra Ogni cella può contenere qualsiasi cosa (testo, immagini, link, liste, altre ) Alice Pavarani Tabelle: esempio 8 Alice Pavarani Immagini: <img> Tabella contenente 3 righe (di cui una di intestazione) e due colonne: <table> <tr> <th>Titolo colonna 1</th> <th>Titolo colonna 2</th> </tr> <tr> <td>Cella 1,1</td> <td>Cella 1,2</td> </tr> <tr> <td>Cella 2,1</td> <td>Cella 2,2</td> </tr> </table> Le immagini sono file esterni alle pagine HTML Nel codice HTML è necessario inserire un riferimento al file Si utilizzano percorsi relativi per fare riferimento ai file Il tag <img> non prevede un tag di chiusura Attributi del tag <img>: : specifica il percorso relativo del file immagine e height alt : visualizza un testo alternativo se non viene visualizzata src width Esempio: <img src= 9 Alice Pavarani Link: <a> android.jpg 10 width= height= Alice Pavarani Novità di HTML5 Per quanto riguarda alcuni dei principali tag (<table>, Il tag <a> href è sufficiente per specificare il link ad una pagina Web: <a href= index.html <a href= Altri attributi significativi del tag page di Google</a> <a>: <img>, attributi, specialmente quelli di formattazione (<align>, <border>, <bgcolor>, Molti tag una pagina (<center>, <font>, target: specifica dove aprire il link (nuova finestra, finestra download: indica che al click il contenuto a cui fa riferimento il link In componenti è affidato interamente ai fogli di stile: viene scaricato tag <a> può essere contenuto il tag <img> 11 Alice Pavarani 12 Alice Pavarani .
Scarica
