La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Introduzione al linguaggio HTML Liceo scientifico-tecnologico “M. Grigoletti” Laboratorio multimediale.

Presentazioni simili


Presentazione sul tema: "Introduzione al linguaggio HTML Liceo scientifico-tecnologico “M. Grigoletti” Laboratorio multimediale."— Transcript della presentazione:

1 Introduzione al linguaggio HTML Liceo scientifico-tecnologico “M. Grigoletti” Laboratorio multimediale

2 2 Scambio di informazioni tramite Internet Tramite Intenet è possibile accedere e scambiare informazioni (file di testo, audio, video, …) presenti su computer disseminati in tutto il mondo  Le informazioni disponibili su un computer sono organizzate come pagine, contenenti link ad altre pagine, in generale memorizzate su altri computer di Internet  Le pagine possono contenere anche immagini, tracce sonore, filmati,… Partecipano al progetto l’Università di Napoli l’Università di Pisa il Politecnico di Milano Università di Napoli Politecnico di Milano Università di Pisa ipertesto (ipermedia)

3 3 Come sono scritte le pagine? Una pagina web è scritta utilizzando il linguaggio HTML HTML = HyperText Markup Language  linguaggio per la formattazione di documenti  utilizza un insieme di simboli (markup tag) per indicare in che modo un testo deve essere formattato e visualizzato  Inventato da Tim Berners Lee (CERN)  Versione attuale: HTML 4.0

4 4 Come sono visualizzate le pagine? Utilizzando un programma browser o navigator (es.: Netscape, Explorer, …) un browser  recupera la pagina corrispondente ad un certo indirizzo (es:  interpreta il testo e lo formatta  visualizza la pagina sullo schermo in generale un browser è in grado di richiamare software per trasferire file, visualizzare filmati, ascoltare musica, …

5 5 Un primo esempio di documento HTML Esempio 1 Primi passi in HTML Sto scrivendo la mia prima pagina web. E’ molto semplice, ma per iniziare va bene. Imparerò a realizzare pagine più complesse. Documento HTML: un testo in cui compaiono dei tag del linguaggio HTML Tag o markup: una stringa di caratteri racchiusa tra ; fornisce al browser indicazioni su struttura e formattazione del testo Un documento HTML è scritto, mediante un editor, in un file con estensione.html o.htm esempio1.htm

6 6 I primi tag - indicano al browser che il file contiene un documento HTML - delimitano la parte del documento HTML che contiene il titolo - delimitano il titolo del documento HTML  il titolo è una sorta di identificativo del documento (compare nelle liste di bookmark, è ustato dai motori di ricerca, …)  è visualizzato nella barra superiore della finestra del browser e non all’interno della finestra stessa

7 7 I primi tag (cont.) - delimitano il contenuto del documento (ciò che è mostrato all’interno della finestra del browser) - delimitano un heading (ad es. un titolo), cioè un testo che deve essere mostrato usando caratteri più grandi e/o in grassetto  esistono vari livelli di heading (H1, H2, …, H6 – grandezza decrescente) - delimitano un paragrafo  un browser ignora qualsiasi indentazione o linea bianca nel testo; senza il documento diventa un unico paragrafo, senza andate a capo, etc.  il tag può essere omesso - genera una interruzione di linea NOTA: in HTML non si fa distinzione tra maiuscole e minuscole

8 8 Il testo - permette di cambiare il tipo di carattere Per default il testo è scritto in Times New Romans Prova testo. Prova testo. SIZE varia tra 1 e 7

9 9 Formattazione dei caratteri - corsivo - grassetto - typewriter - sottolineato - riduce le dimensioni del carattere - aumenta le dimensioni del carattere

10 10 Struttura di un documento HTML Un documento HTML consta di due parti fondamentali:  intestazione: contiene informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella finestra del browser (delimitata da )  corpo : contiene tutti gli elementi che devono essere visualizzati dal browser (testo, immagini, applet Java, …) (delimitato da )

11 11 Doctype e meta tag Esempio 2 Primi passi in HTML Sto scrivendo la mia prima pagina web. E’ molto semplice, ma per iniziare va bene. Imparerò a realizzare pagine più complesse. esempio2.htm

12 12 Doctype e meta tag (cont.) - fornisce informazioni al server web che ospita la pagina; è opzionale, se c'è è il primo elemento del documento  HTML PUBLIC – il documento è pubblico  IETF - il tipo HTML pubblico è gestito dalla Internet Engineering Task Force  DTD HTML versione di HTML supportata: 4.0  IT - lingua del documento: italiano - fornisce informazioni sul documento, utilizzate, ad esempio, dai motori di ricerca; va scritta all'interno dell'intestazione del documento  xxx indica quale tipo di informazione è fornito da yyy (parole chiave, descrizione del documento, editor usato per scriverlo, autore, …)

13 13 …………… Primi passi in HTML Sto scrivendo la mia prima pagina web. E’ molto semplice, ma per iniziare va bene. Imparerò a realizzare pagine più complesse. Corpo: tag e attributi esempio3a.htm esempio3b.htm Primi passi in HTML

14 14 Corpo: tag e attributi (cont.) Il tag può avere attributi che definiscono impostazioni generali per la visualizzazione del documento. Esempio:  BGCOLOR="yellow" - imposta il giallo come colore di sfondo E' possibile sostituire al nome in inglese un valore esadecimale  BGCOLOR="#FFFF00" (yellow ="#FFFF00")  TEXT="blue" - imposta il blu come colore del testo  BACKGROUND="sfondo2.gif" - imposta come sfondo l'immagine sfondo.gif

15 15 Corpo: tag e attributi (cont.) Analogamente:, - indicano che il testo o il paragrafo delimitato deve avere l'allineamento specificato (xxx = left, right, center) - produce una linea orizzontale; la linea può essere modificata definendo i suoi attributi ( COLOR, SIZE, WIDTH, …) è equivalente a

16 16 Formattazione dei caratteri …………… Un altro passo con HTML Formattazione dei caratteri Questa frase è visualizzata in corsivo. Questa, invece, in grassetto. E questa? Ho scelto font, grandezza, colore …………… esempio4.htm

17 17 Elenchi …………… Elenco numerato prima voce seconda voce terza voce Elenco non numerato prima voce seconda voce terza voce …………… esempio5.htm

18 18 Elenchi (cont.) - delimita un elenco numerato - delimita un elenco non numerato - individua una voce di un elenco (numerato o non numerato) Il tipo di numerazione o di punto elenco può essere definito con l'attributo TYPE="x"  Elenco numerato: x = A, a, I, i  Elenco non numerato: x = disc, circle, square esempio6.htm

19 19 Elenchi (cont.) …………… intestazione: contiene informazioni necessarie al browser per una corretta interpretazione del documento, ma non visualizzate nella finestra del browser corpo: contiene tutti gli elementi che devono essere visualizzati dal browser (testo, immagini, applet Java, …) …………… esempio7.htm - delimita un elenco di definizioni - specifica il "termine da definire" - specifica la definizione

20 20 Inserimento di immagini …………… Bla bla bla bla Una nota immagine di Capri: i faraglioni. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. Bla bla bla bla Capri: i faraglioni Una nota immagine di Capri: i faraglioni. Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. ……………… esempio8.htm

21 21 Inserimento di immagini (cont.) - inserisce l'immagine faraglioni.gif Alcuni attributi di IMG:  ALT – commento all'immagine, didascalia  WIDTH, HEIGHT – larghezza e altezza del'immagine (pt)  BORDER – spessore del contorno dell'immagine  VSPACE, HSPACE – distanza del testo dall'immagine (verticale, orizzontale)  ALIGN – posizione dell'immagine rispetto al testo (top, middle, bottom, left, right) I browser riconoscono numerosi formati grafici. Tra i più diffusi: GIF e JPEG

22 22 Link …………… Dipartimento di Matematica, Seconda Università di Napoli ……………… "Clicca" su Esempio 8 ……………… "Clicca" qui per inviare un messaggio esempio9a.htm - inserisce un collegamento (hyperlink o ancoraggio) ad ancora Possibili valori di ancora:  un indirizzo http  un file locale  un indirizzo di (preceduto dalla stringa mailto:)

23 23 Link (cont.) ……………… Vai alla sezione 2 ……………… Sezione2 Bla bla bla bla ……………… esempio9b.htm E' possibile inserire un link ad un punto della medesima pagina (link interno): il link rimanda al punto della pagina contrassegnato da

24 24 ……………… Dipartimento di Matematica, Seconda Università di Napoli ……………… "Clicca" su Esempio 8 ……………… "Clicca" qui per inviare un messaggio ……………… Link e colori E' possibile modificare i colori di default dei link:  LINK – colore di un link non ancora visitato  ALINK – colore di in link attivo  VLINK – colore di un link visitato esempio9c.htm

25 25 Tabelle ………… riga 1, col 1 riga 1, col 2 riga 2, col 1 riga 2, col 2 ………… esempio10.htm - delimita una tabella BORDER – definisce il bordo esterno (BORDER=0 – nessun bordo) - delimita una riga - delimita un campo

26 26 Tabelle: alcuni attributi ………… riga 1, col. 1 riga 1, col. 2 riga 2, col. 1 riga 2, col. 2 ………… esempio10a.htm WIDTH, HEIGHT – larghezza, altezza complessiva (pt o % della pagina) CELLSPACING, CELLPADDING – distanza tra i campi (pt) HEIGHT –altezza riga (pt o %) WIDTH – larghezza (pt o %) VALIGN, ALIGN – posizione del testo in direzione vertic. e orizz.

27 27 Frame ………… ………… Questo è il frame denominato sx, in cui è caricato il file frame1.htm ………… esempio11.htm ………… Questo è il frame denominato dx, in cui è caricato il file frame2.htm ………… frame1.htm frame2.htm

28 28 Frame (cont.) File principale: - racchiude il codice che richiama e gestisce i frame ROWS – numero di frame orizzontali e loro grandezza (pt o %; * = spazio rimanente) COLS – numero di frame verticali e loro grandezza (pt o %; * = spazio rimanente) - individua il frame NAME – nome del frame SRC – file da caricare nel frame Per creare una pagina divisa in frame sono necessari più file HTML:  un file per ogni frame (frame1.htm, frame2.htm)  un file principale, che gestisce i precedenti (esempio11.htm) I file da caricare nei frame sono usuali file HTML

29 29 Frame: alcuni esempi ………… ………… …………

30 30 Frame: alcuni attributi  – elimina il bordo del frame  – impedisce il ridimensionamento del frame da parte del visitatore della pagina web  – rende le barre di scorrimento dei frame sempre visibili (mai visibili, visibili solo se servono)  – specifica la distanza, x, del contenuto del frame dai margini superiore e inferiore del farme stesso  – specifica la distanza, y, del contenuto del frame dai margini laterali del frame stesso

31 31 ………… ………… "Clicca" qui per caricare una nuova pagina in questo frame. "Clicca" qui per caricare una nuova pagina nell'altro frame. ………… framedx.htm Frame e link esempio12.htm - carica newpage.htm nello stesso frame - carica newpage.htm nel frame denominato dx

32 32 Editor HTML = un programma per la creazione e la gestione di pagine web, dotato di una interfaccia "user-friendly" che rende più agevole o "nasconde" l'inserimento di comandi HTML Alcuni esempi  1st Page 2000 (Envsoft)  Front Page (Microsoft)  Dreamweaver (Macromedia)

33 33 Alcuni riferimenti   HTMLPrimer.html 


Scaricare ppt "Introduzione al linguaggio HTML Liceo scientifico-tecnologico “M. Grigoletti” Laboratorio multimediale."

Presentazioni simili


Annunci Google