La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

HTML Federica Trombettoni (SSIS IX ciclo) Liceo Scientifico Marconi – Foligno A.S. 2008/2009.

Presentazioni simili


Presentazione sul tema: "HTML Federica Trombettoni (SSIS IX ciclo) Liceo Scientifico Marconi – Foligno A.S. 2008/2009."— Transcript della presentazione:

1 HTML Federica Trombettoni (SSIS IX ciclo) Liceo Scientifico Marconi – Foligno A.S. 2008/2009

2 Federica TrombettoniHTML2 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

3 Federica TrombettoniHTML3 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);World Wide Web Consortium La versione che esamineremo è HTML 4.01 del 24 dicembre 1999

4 Federica TrombettoniHTML4 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.

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 TrombettoniHTML5

6 Tag Ogni marcatore o tag è racchiuso dalle parentesi angolari: Tag di apertura : Tag di chiusura: All'interno dei tag vi è poi il contenuto che è quello che verrà formattato secondo le regole del tag che lo comprende. Federica TrombettoniHTML6

7 Attributo e valore Un tag può assumere una forma più complessa: testo Un tag può contenere più di un attributo Federica TrombettoniHTML7

8 La sintassi dei tag I tag possono essere annidati luno dentro laltro: testo1 testo2 Federica TrombettoniHTML8

9 Struttura di una pagina HTML codice codice Federica TrombettoniHTML9

10 Struttura di una pagina HTML Il tag indica al browser che il documento è stato formattato in HTML. Il tag serve a definire l'intestazione del documento, ossia tutte quelle informazioni che servono a definire il contenuto della pagina. Federica TrombettoniHTML10

11 Struttura di una pagina HTML All'interno dei tag e è presente invece il resto del documento, il corpo della pagina, ciò che effettivamente poi verrà visualizzato sul browser. Il tag di chiusura serve invece per comunicare all'interprete che il codice HTML è terminato. Federica TrombettoniHTML11

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.. il tag seguito dal titolo che si vuole dare alla pagina e successivamente il tag di chiusura. Federica TrombettoniHTML12

13 Il Titolo della pagina Inserire qui il titolo della pagina codice Federica TrombettoniHTML13

14 I meta tag I meta tag sono dei tag speciali che posti all'interno dei tag 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 TrombettoniHTML14

15 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. Federica TrombettoniHTML15 I meta tag

16 Nome TagValoreFunzione descriptionDescrizione del sitoServe per descrivere il contenuto del sito o della pagina keywordsOgni parola chiave separata da ; Serve a dichiarare le parole chiave del sito o della pagina authorL'autore della paginaIndica l'autore della pagina ed il suo indirizzo Federica TrombettoniHTML16

17 Attributi del body - BGCOLOR L'attributo BGCOLOR imposta un colore di sfondo: E' possibile sostituire al nome in inglese, valori esadecimali: L'utilità dei colori esadecimali si ha quando non si vuole un colore standard ma sfumato o con diversa tonalità. Federica TrombettoniHTML17

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 è: Esempio 1 Federica TrombettoniHTML18

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: I colori possono esprimersi in nomi o valori esadecimali cioè white (bianco) diventa " TEXT="#FFFFFF"> Federica TrombettoniHTML19

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 dellattributo BGPROPERTIES che rende lo sfondo immobile rispetto allo scroller di pagina e và così impostato Federica TrombettoniHTML20

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 TrombettoniHTML21

22 Formattazione Testo corsivo grassetto sottolineato grandezza carattere, n va da 1 a 6 (1 max, 6 min) imposta il font, ha come attributi face, size, color per mettere del testo scorrevole Esempio 3 Federica TrombettoniHTML22

23 Paragrafi Il tag 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 allinea il testo di default sulla sinistra. Per indicare altri tipi di posizionamento si utilizza lattributo align con i valori: Federica TrombettoniHTML23

24 Paragrafi IL tag viene utilizzato per allineare il testo in posizione orizzontale a sinistra, destra e centro della pagina. Testo e immagini a sinistra Testo e immagini a destra Testo e immagini Centrate Federica TrombettoniHTML24

25 Per andare a capo si utilizza il tag, tale tag non va chiuso Le linee orizzontali sono ottime per dividere parti del documento e rendere il testo più leggibile: noshade: elimina l'effetto 3D della linea. Federica TrombettoniHTML25

26 Elenchi numerati Gli elenchi numerati si aprono con il tag poi per ogni voce dellelenco si mettono altrettanti tag : Prima Seconda Terza Esempio 4 Federica TrombettoniHTML26

27 Elenchi numerati Prima Seconda Terza Esempio 5 Federica TrombettoniHTML27

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 poi per ogni voce dellelenco si mettono altrettanti tag : Prima Seconda Terza Federica TrombettoniHTML28

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: quello di default Esempio 6 Federica TrombettoniHTML29

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 che sta per ancora, inteso come ancoraggio tra più pagine. Federica TrombettoniHTML30

31 Link esterni La sintassi per un link esterno cioè un collegamento con un altro sito o con unaltra pagina dello stesso sito è la seguente: Visita il mio sito 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 TrombettoniHTML31

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 è: Clicca qui per andare allEsempio6 Esempio 7 Federica TrombettoniHTML32

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: Vai al paragrafo 2 questo è il punto del documento che hai raggiunto e cioè il paragrafo 2 Esempio 8 Federica TrombettoniHTML33

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: Parola da visualizzare Ecco un esempio: Invia Mail Esempio 9 Federica TrombettoniHTML34

35 Attributi dei link AttributoValoreSignificato linkQualsiasi coloreIndica il colore di tutti i link presenti nella pagina alinkQualsiasi coloreIndica tutti i link attivi vlinkQualsiasi coloreIndica tutti i link già visitati titleQualsiasi lettera/parolaIl 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 TrombettoniHTML35

36 Attributi dei link Esempio riepilogativo sui link e sugli attributi: Esempio 10 Federica TrombettoniHTML36

37 Immagini La sintassi di base per inserire un'immagine all'interno di una pagina web è la seguente: AttributoSignificato borderidentifica il bordo che a 0 non è presente, salendo con i numeri aumenta di spessore titletesto informativo, visualizzato posizionando il cursore sopra l'immagine widthforza la dimensione della foto in larghezza, riducendo i tempi di caricamento heightforza la dimensione della foto in altezza, riducendo i tempi di caricamento Federica TrombettoniHTML37

38 Immagini Esempio 11 Federica TrombettoniHTML38 AttributoSignificato hspacedefinisce la distanza dai lati destro e sinistro dell'immagine degli oggetti più vicini vspacedefinisce la distanza dai lati superiore e inferiore dell'immagine degli oggetti più vicini alignDefinisce la posizione dell'immagine rispetto al testo altpermette di specificare un testo alternativo, descrittivo dell'immagine

39 Suoni Per inserire un suono (.wav-.mp3-.mpeg-.mdi) si usa il tag e con LOOP indichiamo il numero delle volte che il file audio deve essere ripetuto. Ecco la sintassi: Per rendere possibile l'apertura automatica di un files audio si deve usare il tag. Ecco la sintassi: Federica TrombettoniHTML39

40 Filmati Per inserire filmati (.avi) si utilizza il tag. Ecco la sintassi: Federica TrombettoniHTML40

41 Tabelle Il tag usato per la creazione delle tabelle è in coppia con il suo tag di chiusura. E' tra questi due tag che si devono inserire righe e celle, le prime si creano attraverso il tag (Table Row); le seconde, attraverso il tag (Table Data). Se si vuole creare una cella d'intestazione con il contenuto in neretto e centrato si può usare il tag (Table Header). Il tag permette di aggiungere una descrizione alla tabella (una sorta di didascalia) che supporta l'attributo align. Federica TrombettoniHTML41

42 Tabelle Nome Cognome Classe Federica Trombettoni A042 Federica TrombettoniHTML42

43 Tabelle Federica TrombettoniHTML43

44 Attributi delle tabelle Esempio 12 Federica TrombettoniHTML44 AttributoSignificato borderStabilisce la dimensione del bordo esterno alla tabella. Il valore di default è 0 (ossia assente). widthStabilisce la larghezza della tabella heigthStabilisce la lunghezza della tabella cellspacingStabilisce la spaziatura tra le celle cellpaddingStabilisce la spaziatura tra il testo e la cella che lo contiene

45 Attributi delle celle Federica TrombettoniHTML45 AttributoSignificato alignallinea il testo della cella a destra (right), sinistra (left) e centrato (center). valignallinea il testo della cella sul margine superiore (top), sul margine inferiore (bottom) e in mezzo (middle) colspanindica che la cella si espande su più colonne rowspanindica che la cella si espande su più righe

46 Attributi delle celle Esempio 13 Federica TrombettoniHTML46 AttributoSignificato heightstabilisce laltezza della cella widthstabilisce la larghezza della cella bgcolordefinisce il colore di sfondo di una cella backgrounddefinisce un immagine come sfondo di una cella


Scaricare ppt "HTML Federica Trombettoni (SSIS IX ciclo) Liceo Scientifico Marconi – Foligno A.S. 2008/2009."

Presentazioni simili


Annunci Google