HTML. I tag HTML (parte 1)

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "HTML. I tag HTML (parte 1)"

Maria Capelli
7 anni fa
Visualizzazioni

1 HTML I tag HTML (parte 1)

2 I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML <tag> Formato e possono essere tag di apertura: <tag> tag di chiusura: </tag> Schema di annidamento rigoroso (un tag aperto all interno di un altro tag deve essere chiuso prima del tag di chiusura del tag più esterno) 2

3 I tag HTML: attributi e contenuto Attributi definiscono le impostazioni relative al tag Posti immediatamente dopo il nome del tag Seguiti dall argomento da attribuirvi: <tag attributo= argomento > Gli attributi possono essere: attributi standard: specificano le proprietà di un tag (dimensioni, link ) attributi di evento: specificano il comportamento da adottare in determinate situazioni (es. evento di click del mouse) Contenuto del tag è il testo inserito tra il tag di apertura e quello di chiusura 3

4 Titolo: <title> Titolo della pagina Visibile nella barra del titolo del browser e nei risultati di un motore di ricerca Inserito nell header del file (<head>) Esempio: <head> <title> Titolo della pagina Web </title> </head> 4

5 Tag <meta> Aggiunge l autore, una breve descrizione per la pagina o alcune parole chiave Inserito nell header del file (<head>) Ha tre attributi principali: name content charset: specifica la codifica del documento HTML <meta charset= UTF-8 > <meta charset= ISO > 5

6 Tag <meta>: Esempi Per inserire la descrizione: description <meta name= description content= La descrizione /> Per aggiungere le parole chiave: keywords <meta name= keywords content= parole,chiave /> Per definire l autore : author <meta name= author content= Nome Autore /> 6

7 Formattazione del testo Il testo di una pagina HTML va inserito nel tag <body> Titoli (in base alla dimensione del carattere) da <h1> fino ad <h6> <h1>titolo più grande</h1> <h6>titolo più piccolo</h6> Paragrafi <p> Testo di un paragrafo </p> Al termine di ogni paragrafo il testo va a capo. Andare a capo <br/> Inserire più spazi &nbsp (non è un tag ma un carattere speciale) Per i caratteri accentati ed altri simboli è necessario utilizzare appositi caratteri speciali ( 7

8 Formattazione del testo Grassetto: <strong>testo in grassetto</strong> Enfatizzato: <em>testo enfatizzato</em> Sottolineato: <u>testo sottolineato</u> Evidenziato: <mark>testo evidenziato</mark> 8

9 Immagini: <img> Inserire immagini in una pagina Web Le immagini sono file esterni alle pagine HTML Nel codice HTML si fa riferimento al file dell immagine Utilizzando percorsi relativi 9

10 Immagini: <img> Il tag <img> non prevede un tag di chiusura Attributi del tag <img>: src : specifica il percorso relativo del file immagine width e height : larghezza ed altezza dell immagine alt : testo alternativo che viene mostrato se non viene visualizzata correttamente l immagine Esempio: <img src= immagini/android.jpg width= 400 height= 600 > 10

11 Link: <a> Creare un collegamento ipertestuale (link) tra pagine Web L attributo href specifica il link ad una pagina Web: <a href= index.html >Torna alla Home</a> <a href= >Home page di Google</a> Altri attributi significativi del tag <a>: target: specifica dove aprire il link (nuova finestra, finestra corrente, ) download: al click il contenuto a cui il link fa riferimento viene scaricato All interno del tag <a> può essere contenuto il tag <img> per rendere un immagine cliccabile <a href= index.html > <img src= fotohome.jpg > </a> 11

12 Blocchi: <div> Suddividere il codice HTML in blocchi o sezioni Il tag <div> può contenere testo, immagini, tabelle ecc E spesso usato per permettere la formattazione omogenea di un intero blocco 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> 12

Documenti analoghi

HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte

HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo