Creazione di pagine per Internet Brevi note a cura di Emanuele Lana

Presentazione sul tema: "Creazione di pagine per Internet Brevi note a cura di Emanuele Lana"— Transcript della presentazione:

1 Creazione di pagine per Internet Brevi note a cura di Emanuele Lana elana@alfainfo.it

2 Argomenti definizione di HTML i tag i collegamenti ipertestuali gli elenchi puntati e numerati le immagini

3 Che cos'è l'HTML HTML: Hyper Text Markup Language Un file HTML è un file di testo che contiene dei tag I tag indicano al web browser come visualizzare la pagina Un file HTML deve avere l'estensione htm o html Un file HTML può essere creato usando un semplice editor di testo, per es. il Blocco note

4 La mia prima pagina HTML Elenco dei corsi Elenco dei corsi 2006-2007 Italiano:...

5 Funzionamento della pagina Il primo tag è. Segnala al browser che inizia un documento HTML. L'ultimo tag della pagina è. Segnala al browser che finisce un documento HTML. Il testo contenuto tra il tag e il tag è l'informazione dell'intestazione (header). Questo testo non sarà visualizzato nella pagina del browser. Il testo tra i tag e identifica il titolo del documento. Esso viene visualizzato nel titolo della finestra del browser. Il testo compreso tra e è il corpo principale della pagina ed è visualizzato dal browser. Il testo tra e sarà visualizzato in grassetto.

6 I tag sono usati per marcare gli elementi HTML sono racchiusi tra i caratteri solitamente si usano in coppia, come i tag e il primo di una coppia è definito tag di apertura, il secondo tag di chiusura possono essere scritti in maiuscolo o minuscolo: ha lo stesso significato di

7 Gli elementi Esempio di elemento: Programma dell'anno L'elemento: comincia con un tag di apertura: finisce con un tag di chiusura: il contenuto è: Programma dell'anno lo scopo del tag b è indicare al browser che quel testo dev'essere visualizzato in grassetto b sta per bold

8 Gli attributi dei tag forniscono ulteriori informazioni all'elemento il tag definisce la parte di testo che rappresenta il contenuto della pagina l'attributo bgcolor imposta il colore di sfondo di tutta la pagina: colore verde per tutta la pagina bg sta per background

9 I principali tag Livelli di titolo: da a, dove è il più importante, il meno importante. Divina commedia Inferno Canto I h sta per heading Paragrafi:... Interruzioni di riga: NB: Il tag non ha tag di chiusura Commenti:

10 Collegamenti ipertestuali consentono la navigazione tra le pagine possono essere associati a: testo, solitamente sottolineato immagini si riconoscono perché, posizionandosi sopra, il puntatore del mouse da freccia diventa una "manina" cliccando sul testo o sull'immagine, la finestra del browser visualizzerà un nuovo contenuto

11 Il tag viene usato per creare un collegamento a un'altra risorsa (pagina HTML, file di Word, file AVI, file PDF ecc.) con l'attributo href indica la posizione del file Esami con l'attributo target indica in quale finestra del browser aprire la destinazione Esami viene aperta una nuova finestra del browser in cui sarà visualizzato il contenuto della pagina esami.html con l'attributo title visualizza una descrizione quando si posiziona sopra il mouse Esami

12 Elenchi numerati vengono definiti ordinati (ordered list): 1. leggere il materiale 2. preparare una sintesi in Word 3. inviare l'allegato al docente leggere il materiale preparare una sintesi in Word inviare l'allegato al docente li sta per list item

13 Elenchi puntati vengono definiti non ordinati (unordered list):  latino  italiano  geografia latino italiano geografia li sta per list item

14 Dimensioni del testo assoluta espressa in punti, per es. 12 pt se l'utente modifica la dimensione carattere del browser, non cambia la dimensione del testo relativa 3 equivale a circa 12 pt se l'utente modifica la dimensione carattere del browser, cambia la dimensione del testo ciao!

15 Colori Tabella colori con nome: www.molly.com/molly/webdesign/136_colors.html Tabella colori esadecimali www.molly.com/molly/webdesign/colorchart.html combinazioni RGB (red, green, blue) valore colore (0-255) trasformato in esadecimale

16 Le immagini una pagina HTML può visualizzare immagini le immagini sono salvate in file diversi da quello che contiene il testo e ha estensione HTML se in una pagina HTML compare un'immagine, in realtà si tratta di due file: uno contiene il vero e proprio contenuto (il testo), l'altro è l'immagine

17 Questione di pixel la dimensione dell'immagine può essere misurata in pixel: per es. 246 x 307 (larghezza per altezza)

18 Editing immagini Modifiche http://www.snipshot.com http://www.picresize.com Creazione http://cooltext.com

19 Il tag le immagini sono definite dal tag img NB il tag img non ha tag di chiusura. per visualizzare l'immagine, il tag img ha bisogno dell'attributo src L'indirizzo dell'attributo src indica la posizione in cui si trova l'immagine, in questo caso nella cartella che ha nome images. l'attributo alt visualizza una descrizione quando si passa sopra l'immagine con il mouse (cfr. attributo title per tag a) src sta per search

20 Le tabelle sono uno dei possibili strumenti per impostare il layout della pagina consentono la disposizione di testo e immagini la larghezza può essere assoluta (pixel) o in percentuale della pagina titolo linkcontenutobanner

21 I tag,, esempio di tabella con 2 righe e 2 colonne tr sta per table row (riga) td sta per table data (cella)

22 Riferimenti Il materiale è stato liberamente adattato da: http://www.w3schools.com Tra i numerosi siti di riferimento per guide, software ecc.: http://www.html.it http://www.html.it

23 Modelli impostazione pagina con elementi standard (layout, colori, link principali) salvataggio come modello di FrontPage creazione nuova pagina basata sul modello

24 Presentazione convegno pagina default organizzazione (chi siamo) dove siamo (mappa) contatti (link di posta elettronica) argomento sessioni