HTML Gli elementi principali di una pagina Web. Titolo: 2  Attribuisce un titolo alla pagina  Il titolo è visibile nella “barra del titolo” del browser.

Presentazione sul tema: "HTML Gli elementi principali di una pagina Web. Titolo: 2  Attribuisce un titolo alla pagina  Il titolo è visibile nella “barra del titolo” del browser."— Transcript della presentazione:

1 HTML Gli elementi principali di una pagina Web

2 Titolo: 2  Attribuisce un titolo alla pagina  Il titolo è visibile nella “barra del titolo” del browser e nei risultati di un motore di ricerca  Si inserisce nell’header del file ( )  Esempio: Alice Pavarani Titolo della pagina Web

3 Tag 3  Aggiunge l’autore, una breve descrizione per la pagina o alcune parole chiave: elementi essenziali per il posizionamento di una pagina tra i risultati forniti da un motore di ricerca  Si inserisce nell’header del file ( )  Ha tre attributi principali:  name  content  charset : specifica la codifica del documento HTML Alice Pavarani

4 Tag : Esempi 4  Per inserire la descrizione: description  Per aggiungere le parole chiave: keywords  Per definire l’autore : author Alice Pavarani

5 Formattazione del testo 5  Il testo di una pagina HTML va inserito nel tag  Titoli (differenziati dalle dimensioni del carattere) da : Titolo più grande fino ad : Titolo più piccolo  Paragrafi (utilizzati per separare il testo) Testo di un paragrafo Al termine di ogni paragrafo il testo va a capo.  Andare a capo (all’interno di uno stesso paragrafo) :  Inserire più spazi: &nbsp (non si tratta di un tag ma di un carattere speciale)  Grassetto: Testo in grassetto  Enfatizzato: Testo enfatizzato  Sottolineato: Testo sottolineato  Evidenziato: Testo evidenziato  Per i caratteri accentati ed altri simboli è necessario utilizzare appositi caratteri speciali (http://www.caratterispecialihtml.com/)http://www.caratterispecialihtml.com/ Alice Pavarani

6 Blocchi: 6  E’ possibile suddividere il codice HTML in blocchi o sezioni attraverso il tag  Il tag può contenere testo, immagini, tabelle ecc…  La suddivisione della pagina in blocchi è spesso usata per permettere la formattazione omogenea di un intero blocco  Ad esempio, è possibile specificare il colore del testo contenuto in un blocco: Tutto il testo qui in mezzo viene scritto in rosso Alice Pavarani

7 Elenchi 7  E’ possibile organizzare il testo in elenchi  Elenchi puntati  Elenchi numerati Elemento 1 Elemento 2 Elemento 3 Elemento 1 Elemento 2 Elemento 3 Alice Pavarani

8 Tabelle: 8  E’ possibile organizzare il testo per righe e colonne inserendolo in tabelle  All’interno del tag si inseriscono righe di celle, definite dal tag (table row), in cui si inseriscono le celle, definite dal tag (table data)  Le celle destinate a contenere il titolo sono definite dal tag  Il numero di celle inserite in ogni riga dovrà sempre essere lo stesso (essendo questo il numero di colonne)  Le righe procedono dall’alto verso il basso  Le celle procedono da sinistra verso destra  Ogni cella può contenere qualsiasi cosa (testo, immagini, link, liste, altre tabelle…) Alice Pavarani

9 Tabelle: esempio 9  Tabella contenente 3 righe (di cui una di intestazione) e due colonne: Titolo colonna 1 Titolo colonna 2 Cella 1,1 Cella 1,2 Cella 2,1 Cella 2,2 Alice Pavarani

10 Immagini: 10  E’ possibile inserire immagini all’interno di una pagina Web  Le immagini sono file esterni alle pagine HTML  Nel codice HTML è necessario inserire un riferimento al file contenente l’immagine  Si utilizzano percorsi relativi per fare riferimento ai file  Il tag non prevede un tag di chiusura  Attributi del tag :  src : specifica il percorso relativo del file immagine  width e height : specificano larghezza ed altezza dell’immagine  alt : visualizza un testo alternativo se non viene visualizzata correttamente l’immagine  Esempio: Alice Pavarani

11 Link: 11  E’ possibile creare un collegamento ipertestuale (link) tra una pagina Web ed un’altra  Il tag con l’attributo href è sufficiente per specificare il link ad una pagina Web: Torna alla Home Home page di Google  Altri attributi significativi del tag :  target : specifica dove aprire il link (nuova finestra, finestra corrente,…)  download : indica che al click il contenuto a cui fa riferimento il link viene scaricato  All’interno del tag può essere contenuto il tag per rendere un’immagine cliccabile Alice Pavarani

12 Novità di HTML5 12  Per quanto riguarda alcuni dei principali tag (,, …) in HTML5 non sono più supportati diversi loro attributi, specialmente quelli di formattazione (,,, …)  Molti tag inerenti “l’aspetto” del testo o degli elementi di una pagina (,, …) non sono più supportati Alice Pavarani