Laboratorio di Informatica di Base Laboratorio di Informatica di Base Laurea in Informatica Multimediale Docente: Andrea Fusiello profs.sci.univr.it/~fusiello.

Presentazione sul tema: "Laboratorio di Informatica di Base Laboratorio di Informatica di Base Laurea in Informatica Multimediale Docente: Andrea Fusiello profs.sci.univr.it/~fusiello."— Transcript della presentazione:

1 Laboratorio di Informatica di Base Laboratorio di Informatica di Base Laurea in Informatica Multimediale Docente: Andrea Fusiello profs.sci.univr.it/~fusiello Lucidi a cura di Carlo Drioli, Barbara Oliboni e Andrea Fusiello Lezione 5

2 HyperText Markup Language

3 Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized Markup Language) Gli ipertesti del Web sono scritti in HTML HTML non è un linguaggio di programmazione HTML non è case sensitive: non distingue i caratteri minuscoli da quelli maiuscoli allinterno dei TAG. HTML è un linguaggio di marcatura che permette di descrivere come il contenuto di un documento verrà presentato

4 File HTML Un documento HTML è un file in formato testo che ha estensione.html o.htm Il file HTML che contiene un documento è formato dal contenuto del documento più la marcatura La marcatura descrive il modo in cui il contenuto verrà presentato File HTML = contenuto + marcatura

5 File HTML (2) I documenti HTML si possono creare con degli editor di testo (p.es. emacs) I browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione (marcatura)

6 HTML: concetti generali La marcatura prevede luso di etichette dette TAGS I TAG racchiudono il testo di cui definiscono la formattazione testo Il significato di un tag può essere modificato tramite attributi testo

7 Struttura del documento File HTML, struttura generale: intestazione + corpo Intestazione: … contiene informazioni sul documento: titolo … Corpo: … contiene il testo del documento e i tag per la resa visiva

8 Struttura del documento: TAG

9 Formattazione del testo grassetto prova corsivo prova sottolineato prova prova

10 Formattazione del testo Dimensioni: prova prova Colore: prova

11 Lettere accentate à à è è ì ì ò ò ù ù é è Esempio: Il giudizio &egrave Il giudizio è pi&ugrave che buono più che buono

12 Codifica dei colori ColorColor HEXColor RGB #000000rgb(0,0,0) #FF0000rgb(255,0,0) #00FF00rgb(0,255,0) #0000FFrgb(0,0,255) #FFFF00rgb(255,255,0) #00FFFFrgb(0,255,255) #FF00FFrgb(255,0,255) #C0C0C0rgb(192,192,192) #FFFFFFrgb(255,255,255) La codifica dei colori segue una notazione esadecimale per la combinazione dei colori rosso (Red), verde (Green) e blu (Blue) (RGB). Il valore minimo è 0 (hex #00), il massimo è 255 (hex #FF).

13 Titoli I livelli di titolazione sono 6: Livello 1 (massimo) Titolo livello 1 Livello 2 Titolo livello 2 … Livello 6 (minimo) Titolo livello 6 Titolo di livello1 Titolo di livello2 Titolo di livello 6

14 Paragrafi In HTML il comando Invio non ha significato: il browser legge la sequenza di parole senza badare alle interruzioni di linea. Questo è un paragrafo Questo è un paragrafo

15 Interruzione di linea Per interrompere una linea in un punto desiderato si usa il TAG : Questo è un paragrafo Questo è un paragrafo

16 Testo formattato prova Per rendere visibili spazi aggiunti nel documento HTML ed interruzioni di linea si usa: prova

17 Liste non numerate uno due uno due

18 Liste numerate uno due 1.uno 2.due

19 Collegamenti ipertestuali verso altri documenti Visita la pagina del Corso di Laboratorio di Informatica di Base Corso di Laboratorio di Informatica di Base

20

21 Collegamenti ipertestuali sullo stesso documento Indice Lezione 5 … Lezione 5 Indice Lezione 5 Lezione 5

22 Tabelle Per definire una tabella: … Per definire la didascalia della tabella (o titolo): … Per specificare una riga dentro la tabella: … Per definire una cella di intestazione: … Per definire una cella per i dati: …

23 Tabelle: esempio 1 Risultati esame Nome Voto Mario Rossi 28 Lucia Verdi 30

24 Tabelle: esempio 2 cella 1 cella 2 cella 3 cella 4

25 Immagini Foto di Lenna a colori

26 Elaborazione di immagini: Netpbm Materiale di riferimento: http://netpbm.sourceforge.net/doc/http://netpbm.sourceforge.net/doc/

27 Elaborazione di immagini: Netpbm Netpbm è un pacchetto di programmi grafici e librerie di programmazione. I programmi di Netpbm sono semplici blocchi costitutivi di base. Non usano interfaccie grafiche e non richiedono input allutente (modo batch invece che interattivo). I programmi di Netpbm leggono in ingresso un file di input e producono un file di output (di solito stdin e stdout). Per questo sono particolarmente adatti a sfruttare a pieno il meccanismo di convogliamento (piping) della shell di unix.

28 Elaborazione di immagini: Netpbm Tutti i programmi lavorano con un insieme di formati per immagini chiamati formati "netpbm" formats. Questi sono pbm (immagini b/n), pgm (immagini a scale di grigi), ppm (immagini a colori)pbmpgmppm Questi tre sono anche indicati con il nome collettivo di "pnm". Ci sono programmi Netpbm che convertono da pnm verso qualunque formato (gif,jpeg,tiff, png …) e viceversa. Quindi si possono usare i programmi Netpbm per lavorare con qualunque formato.

29 Netpbm: esempi Ecco un esempio di comando che converte tutti i file PNG presenti in una cartella in JPEG: for i in *.png; do pngtopnm $i | ppmtojpeg >`basename $i.png`.jpg; done Ecco un esempio che produce una versione rimpicciolita (thumbnail) di ogni immagine JPEG presente in una cartella: for i in *.jpg; do jpegtopnm $i | pnmscale -xsize=50 -ysize=50 | ppmtojpeg >`basename $i.jpg`_t.jpg; done

30 Visualizzatori per immagini Lavorando con le immagini è necessario poterle visualizzare. Netpbm non ha un suo visualizzatore, ma ne esistono diversi (ppmsvgalib, zgv, xloadimage, xli, gqview, qiv). Nel nostro laboratorio possiamo usare xli.