Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Liceo Scientifico Marconi – Foligno
HTML Federica Trombettoni (SSIS IX ciclo) Liceo Scientifico Marconi – Foligno A.S. 2008/2009
2
HTML HTML HTML è l'acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") e non è un linguaggio di programmazione È un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina Federica Trombettoni HTML 2 Prof.ssa Federica Trombettoni 2
3
HTML L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML (il W3C: World Wide Web Consortium) ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); La versione che esamineremo è HTML 4.01 del 24 dicembre 1999 Federica Trombettoni HTML 3
4
HTML HTML L'ideazione e nascita dell'HTML sono merito di due fisici del CERN di Ginevra, Tim Berners-Lee e Robert Caillau, che nel 1989 ebbero l'idea di creare un sistema di informazioni collegate tra di loro accessibile attraverso la rete in uso al centro stesso. Federica Trombettoni HTML 4 Prof.ssa Federica Trombettoni 4
5
HTML Una pagina HTML è un documento di testo contenente codice HTML ed avente le seguenti estensioni: .htm o .html. Un documento html può essere scritto o con un normale editor di testo (blocco note di windows) o con un editor html (Frontpage o Dreamweaver) Federica Trombettoni HTML 5
6
Tag Ogni marcatore o tag è racchiuso dalle parentesi angolari:
Tag di apertura : <tag > Tag di chiusura: </tag> All'interno dei tag vi è poi il contenuto che è quello che verrà formattato secondo le regole del tag che lo comprende. Federica Trombettoni HTML 6
7
Attributo e valore Un tag può assumere una forma più complessa:
<tag attributo=“valore”…> testo </tag> Un tag può contenere più di un attributo Federica Trombettoni HTML 7
8
La sintassi dei tag I tag possono essere annidati l’uno dentro l’altro: <tag1 attributo1=“valore” ..> testo1 <tag2 attributo2=“valore” …> testo2 </tag2> </tag1> Federica Trombettoni HTML 8
9
Struttura di una pagina HTML
<head> codice </head> <body> </body> </html> Federica Trombettoni HTML 9
10
Struttura di una pagina HTML
Il tag <html> indica al browser che il documento è stato formattato in HTML. Il tag <head> serve a definire l'intestazione del documento, ossia tutte quelle informazioni che servono a definire il contenuto della pagina. Federica Trombettoni HTML 10
11
Struttura di una pagina HTML
All'interno dei tag <body> e </body> è presente invece il resto del documento, il corpo della pagina, ciò che effettivamente poi verrà visualizzato sul browser. Il tag di chiusura </html> serve invece per comunicare all'interprete che il codice HTML è terminato. Federica Trombettoni HTML 11
12
Il Titolo della pagina Per far sì che venga visualizzato un titolo del documento nella barra del titolo del browser è sufficiente inserire all'interno dei tag <head>..</head> il tag <title>seguito dal titolo che si vuole dare alla pagina e successivamente il tag di chiusura </title>. Federica Trombettoni HTML 12
13
Il Titolo della pagina <html> <head> <title>
Inserire qui il titolo della pagina </title> </head> <body> codice </body> </html> Federica Trombettoni HTML 13
14
I meta tag I meta tag sono dei tag speciali che posti all'interno dei tag <head></head> permettono di definire il contenuto della pagina web, in modo, ad esempio, da rendere l'indicizzazione da parte dei motori di ricerca più rapida ed efficace. Federica Trombettoni HTML 14
15
I meta tag I meta tag non producono alcun tipo di effetto grafico nella visualizzazione della pagina. I meta tag sono costituiti da due parti: Nome del meta tag Valore del meta tag <meta name="nome meta tag“ content="valore del meta tag">. Federica Trombettoni HTML 15
16
I meta tag Nome Tag Valore Funzione description Descrizione del sito
Serve per descrivere il contenuto del sito o della pagina keywords Ogni parola chiave separata da ; Serve a dichiarare le parole chiave del sito o della pagina author L'autore della pagina Indica l'autore della pagina ed il suo indirizzo Federica Trombettoni HTML 16
17
Attributi del body - BGCOLOR
L'attributo BGCOLOR imposta un colore di sfondo: <BODY BGCOLOR="black"> E' possibile sostituire al nome in inglese, valori esadecimali: <BODY BGCOLOR="#000000"> L'utilità dei colori esadecimali si ha quando non si vuole un colore standard ma sfumato o con diversa tonalità. Federica Trombettoni HTML 17
18
Attributi del body - BACKGROUND
BACKGROUND visualizza sullo sfondo un'immagine .gif o .jpg. Esempio: prendiamo un'immagine chiamiamola ad esempio sfondo.jpg e la mettiamo nella stessa directory del documento(nella stessa cartella dove si trova la pagina web in costruzione). La sintassi è: <BODY BACKGROUND="sfondo.gif"> Esempio 1 Federica Trombettoni HTML 18
19
Attributi del body - TEXT
Il colore di default del testo del documento è nero. Grazie all'attributo TEXT è possibile assegnare al testo un colore diverso dal nero: <BODY BACKGROUND="sfondo.jpg" TEXT="white"> I colori possono esprimersi in nomi o valori esadecimali cioè white (bianco) diventa " TEXT="#FFFFFF"> Federica Trombettoni HTML 19
20
Attributi del body - BGPROPERTIES
Se la pagina è tanto lunga da attivare lo scroller laterale, l'immagine scorre insieme alla pagina per questo abbiamo bisogno dell’attributo BGPROPERTIES che rende lo sfondo immobile rispetto allo scroller di pagina e và così impostato <BODY BACKGROUND="sfondo.jpg" BGPROPERTIES="fixed"> Federica Trombettoni HTML 20
21
Attributi del body – LINK – ALINK -VLINK
Il colore dei link, di default blue, si imposta con LINK=“colore”. Il colore dei link cliccati si imposta con ALINK=“colore”. Il colore dei link visitati si imposta con VLINK=“colore”. Esempio 2 Federica Trombettoni HTML 21
22
Formattazione Testo <I></I> corsivo
<B></B> grassetto <U></U> sottolineato <Hn></Hn> grandezza carattere, n va da 1 a 6 (1 max, 6 min) <FONT></FONT> imposta il font, ha come attributi face, size, color <MARQUEE></MARQUEE> per mettere del testo scorrevole Esempio 3 Federica Trombettoni HTML 22
23
Paragrafi Il tag <P> definisce un nuovo paragrafo del testo indicando al browser che lo stesso deve rimanere su una nuova riga ed essere posizionato a destra, a sinistra o al centro. Il tag <P> allinea il testo di default sulla sinistra. Per indicare altri tipi di posizionamento si utilizza l’attributo align con i valori: <P ALIGN=“left”> <P ALIGN=“right”> <P ALIGN=“center”> Federica Trombettoni HTML 23
24
Paragrafi IL tag <DIV> viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. <DIV ALIGN=“left”>Testo e immagini a sinistra</DIV> <DIV ALIGN=“right”>Testo e immagini a destra</DIV> <DIV ALIGN=“center”>Testo e immagini Centrate</DIV> Federica Trombettoni HTML 24
25
<BR> <HR>
Per andare a capo si utilizza il tag <BR>, tale tag non va chiuso Le linee orizzontali sono ottime per dividere parti del documento e rendere il testo più leggibile: <HR align="CENTER" size="3" width="200" color="Red" noshade> noshade: elimina l'effetto 3D della linea. Federica Trombettoni HTML 25
26
Elenchi numerati Gli elenchi numerati si aprono con il tag <OL></OL> poi per ogni voce dell’elenco si mettono altrettanti tag <LI>: <OL> <LI>Prima <LI>Seconda <LI>Terza </OL> Esempio 4 Federica Trombettoni HTML 26
27
Elenchi numerati <OL type=“A”> <LI>Prima
<LI>Seconda <LI>Terza </OL> <OL type=“a”> <OL type=“I”> <OL type=“i”> Esempio 5 Federica Trombettoni HTML 27
28
Elenchi puntati Gli elenchi puntati sono simile agli altri elenchi di indicizzazione solo che non seguono una struttura gerarchica. Gli elenchi puntati si aprono con il tag <UL></UL> poi per ogni voce dell’elenco si mettono altrettanti tag <LI>: <UL> <LI> Prima <LI> Seconda <LI> Terza </UL> Federica Trombettoni HTML 28
29
Elenchi puntati Se non stabilito diversamente l'elenco crea una serie di pallini. Come per gli elenchi numerati anche in questo caso è possibile indicare diversi tipi di elenco: <UL TYPE=disc> quello di default <UL TYPE=circle> <UL TYPE=square> Esempio 6 Federica Trombettoni HTML 29
30
Collegamenti ipertestuali
I collegamenti ipertestuali sono la base del web, un ipertesto è un modo di formattare documenti in forma non sequenziale. Internet è nato ed è diventato grande grazie alla teoria ipertestuale, ovvero alla possibilità offerta agli utenti di poter navigare comodamente tra le pagine di un sito e di raggiungere altri siti con un semplice click su quello che viene definito, appunto, collegamento ipertestuale o link. In HTML i link si generano col tag <a> che sta per ancora, inteso come ancoraggio tra più pagine. Federica Trombettoni HTML 30
31
Link esterni La sintassi per un link esterno cioè un collegamento con un altro sito o con un’altra pagina dello stesso sito è la seguente: <A HREF=" il mio sito</A> In questo caso cliccando sul testo "Visita il mio sito" (compreso tra i tag A in apertura e chiusura) si raggiunge l'URL indicato dall'attributo HREF. Federica Trombettoni HTML 31
32
Link esterni HREF può puntare a un collegamento esterno (come l'esempio sopra) o ad un collegamento ad un altro documento dello stesso sito. Per esempio, se creiamo una pagina Esempio7.html e vogliamo inserire un link alla pagina Esempio6.html presente nella stessa cartella, il codice corretto è: <A HREF=" Esempio6.html ">Clicca qui per andare all’Esempio6</A> Esempio 7 Federica Trombettoni HTML 32
33
Link interni I collegamenti interni o àncore sono collegamenti che non rimandano a una pagina esterna come abbiamo visto in precedenza, bensì a un contenuto disponibile nella stessa pagina. La sintassi è la seguente: <a href="#paragrafo2">Vai al paragrafo 2</a> <a name="paragrafo2">questo è il punto del documento che hai raggiunto e cioè il paragrafo 2</a> Esempio 8 Federica Trombettoni HTML 33
34
Posta Elettronica Attraverso un link è anche possibile aprire automaticamente il programma di posta elettronica predefinito con il campo A: già impostato sul destinatario. Ecco la sintassi: <a href="mailto:indirizzo mail">Parola da visualizzare</a> Ecco un esempio: <a Mail</a> Esempio 9 Federica Trombettoni HTML 34
35
Attributi dei link Attributo Valore Significato link Qualsiasi colore
Indica il colore di tutti i link presenti nella pagina alink Indica tutti i link attivi vlink Indica tutti i link già visitati title Qualsiasi lettera/parola Il valore dell'attributo title verrà mostrato quando il cursore sarà sopra il link. Serve per spiegare dove porterà il link. target _blank (apre in una nuova pagina) o _main (aperto nella stessa pagina) Determina come verrà visualizzata la risorsa del link: o nella stessa pagina o in una nuova finestra Federica Trombettoni HTML 35
36
Attributi dei link Esempio riepilogativo sui link e sugli attributi:
Federica Trombettoni HTML 36
37
Immagini La sintassi di base per inserire un'immagine all'interno di una pagina web è la seguente: <img src="url dell'immagine" alt="testo alternativo"> Attributo Significato border identifica il bordo che a 0 non è presente, salendo con i numeri aumenta di spessore title testo informativo, visualizzato posizionando il cursore sopra l'immagine width forza la dimensione della foto in larghezza, riducendo i tempi di caricamento height forza la dimensione della foto in altezza, riducendo i tempi di caricamento Federica Trombettoni HTML 37
38
Immagini Esempio 11 Attributo Significato hspace
definisce la distanza dai lati destro e sinistro dell'immagine degli oggetti più vicini vspace definisce la distanza dai lati superiore e inferiore dell'immagine degli oggetti più vicini align Definisce la posizione dell'immagine rispetto al testo alt permette di specificare un testo alternativo, descrittivo dell'immagine Federica Trombettoni HTML 38
39
Suoni Per inserire un suono (.wav-.mp3-.mpeg-.mdi) si usa il tag <BGSOUND> e con LOOP indichiamo il numero delle volte che il file audio deve essere ripetuto. Ecco la sintassi: <BGSOUND SRC="suono.mid" LOOP=INFINITE> Per rendere possibile l'apertura automatica di un files audio si deve usare il tag <EMBED>. Ecco la sintassi: <EMBED SRC="suono.mid“ > Federica Trombettoni HTML 39
40
Filmati Per inserire filmati (.avi) si utilizza il tag <img>.
Ecco la sintassi: <img dynsrc=“file_video.avi”> Federica Trombettoni HTML 40
41
Tabelle Il tag usato per la creazione delle tabelle è <table> in coppia con il suo tag di chiusura </table>. E' tra questi due tag che si devono inserire righe e celle, le prime si creano attraverso il tag <tr> (Table Row); le seconde, attraverso il tag <td> (Table Data). Se si vuole creare una cella d'intestazione con il contenuto in neretto e centrato si può usare il tag <th> (Table Header). Il tag <caption> permette di aggiungere una descrizione alla tabella (una sorta di didascalia) che supporta l'attributo align. Federica Trombettoni HTML 41
42
Tabelle <table> <tr> <th>Nome</th>
<th>Cognome</th> <th>Classe</th> </tr> <td>Federica</td> <td>Trombettoni</td> <td>A042</td> </table> Federica Trombettoni HTML 42
43
Tabelle Federica Trombettoni HTML 43
44
Attributi delle tabelle
Esempio 12 Attributo Significato border Stabilisce la dimensione del bordo esterno alla tabella. Il valore di default è 0 (ossia assente). width Stabilisce la larghezza della tabella heigth Stabilisce la lunghezza della tabella cellspacing Stabilisce la spaziatura tra le celle cellpadding Stabilisce la spaziatura tra il testo e la cella che lo contiene Federica Trombettoni HTML 44
45
Attributi delle celle Attributo Significato align
allinea il testo della cella a destra (right), sinistra (left) e centrato (center). valign allinea il testo della cella sul margine superiore (top), sul margine inferiore (bottom) e in mezzo (middle) colspan indica che la cella si espande su più colonne rowspan indica che la cella si espande su più righe Federica Trombettoni HTML 45
46
Attributi delle celle Esempio 13 Attributo Significato height
stabilisce l’altezza della cella width stabilisce la larghezza della cella bgcolor definisce il colore di sfondo di una cella background definisce un immagine come sfondo di una cella Federica Trombettoni HTML 46
Presentazioni simili
