Informatica di Base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Informatica di Base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05"

Ottaviano Magni
5 anni fa
Visualizzazioni

1 Informatica di Base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1

2 Che cos è l HTML? Hyper Text Markup Language Definisce le caratteristiche stilistiche di un documento, non è programmazione! Le pagine HTML vengono visualizzate tramite un apposito programma: il browser! I browser più noti sono:» Microsoft Internet Explorer ( Netscape Navigator ( 2

3 Come si edita una pagina in HTML? Si può utilizzare un qualsiasi word processor (Blocco Note, WordPad). Si salva la pagina in modalità Solo Testo ed estensione.html Noi utilizzeremo Blocco Note (Menù Avvio Programmi Accessori) 3

4 Il documento HTML I comandi HTML (tag) hanno una forma base: <COMANDO> </COMANDO> Convenzione: HTML non è case-sensitive, ma i comandi sono sempre maiuscoli! Ad alcuni comandi si aggiungono gli attributi: <COMANDO ATTRIBUTO= valore > 4

5 Il primo documento HTML <HTML> Una pagina html </HTML> Potenzialmente un documento html può essere scritto tutto su una sola linea, ma non sarebbe chiaro! 5

6 Intestazione, titolo e corpo della pagina Intestazione: <HEAD> </HEAD> Informazioni destinate al client Titolo (all interno dell HEAD): <TITLE> </TITLE> Titolo della pagina Corpo: <BODY> </BODY> Corpo della pagina 6

7 Esempio 1 <HTML> <HEAD> <TITLE> La mia prima pagina in html </TITLE> </HEAD> <BODY> </BODY> </HTML> 7

8 Esempio 2 <HTML> <HEAD> <TITLE> La mia prima pagina in html </TITLE> </HEAD> <BODY> Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita. </BODY> </HTML> 8

9 Dimensione dei font Ci sono a disposizione 6 diverse grandezze per il testo: <H + numero> 1 Carattere più grande... 6 Carattere più piccolo 9

10 Esempio 3 <HTML> <HEAD> <TITLE> La mia prima pagina in html </TITLE> </HEAD> <BODY> <H1> La Divina Commedia </H1> <H2> di Dante Alighieri </H2> <H4> Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita. <H4> </BODY> </HTML> 10

11 La divisione in paragrafi A capo: <BR> Ritorno a capo Paragrafo: <P> utilizzato all inizio di un nuovo paragrafo,ritorno a capo del testo lasciando una riga vuota 11

12 La divisione in paragrafi Linea divisoria: <HR> linea di separazione tra diversi paragrafi. Attributi: SIZE = numero di pixel di lunghezza WIDTH = pixel o percentuale della larghezza ALIGN = left o right o center 12 NOSHADE = elimina la tridimensionalità

13 Esempio 4 <HTML> <HEAD> <TITLE> La mia prima pagina in html </TITLE> </HEAD> <BODY> <H1>La Divina Commedia</H1> <HR WIDTH= 50% ALIGN= left SIZE="5"> <H2>di Dante Alighieri</H2> <P> Nel mezzo del cammin di nostra vita, <BR> mi ritrovai per una selva oscura, <BR> che la diritta via era smarrita. <BR> </P> <P> Ahi, quanto a dir qual'era, è cosa dura, <BR> esta selva selvaggia, aspra e forte, <BR> ché nel pensier rinnova la paura. <BR> </P> </BODY> </HTML> 13

14 La divisione in paragrafi Testo preformattato: <PRE> inserisce delle porzioni di testo così come sono formattate 14

15 Stile del testo Stili:»<U> introduce la sottolineatura»<b> introduce il grassetto»<i> introduce il corsivo»<s> introduce una riga sui caratteri»<big> fa apparire più grandi i caratteri»<small> fa apparire più piccoli i caratteri 15

16 Allineamento del testo Allineamento: ALIGN = right o left o center allinea titoli e paragrafi <CENTER> </CENTER> allinea il contenuto al centro 16

17 Esempio 5 <HTML> <HEAD> <TITLE> La mia prima pagina in html </TITLE> </HEAD> <BODY> <CENTER> <H1> <I> La Divina Commedia </I> </H1> <HR ALIGN= center SIZE="5"> </CENTER> <H2> <U> di Dante Alighieri </U> </H2> <P> <BIG><CENTER> Nel mezzo del cammin di nostra vita,<br> mi ritrovai per una selva oscura,<br> che la diritta via era smarrita.<br> </P> <P> Ahi, quanto a dir qual'era, è cosa dura,<br> esta selva selvaggia, aspra e forte,<br> ché nel pensier rinnova la paura.<br> </CENTER> </P> </BIG> </BODY> </HTML> 17

18 Inseriamo il colore Colore di sfondo: <BODY BGCOLOR= colore > il colore di sfondo può essere espresso a parole o in esadecimale. Es. <BODY BGCOLOR= orange > <BODY BGCOLOR= #00FF00 > 18

19 Inseriamo il colore Colore del testo: <FONT COLOR= colore > </FONT> il colore del testo può essere espresso a parola o in esadecimale. Colore dei links: <BODY LINK = VLINK = ALINK = > il colore viene espresso in esadecimale 19

20 Esempio 6 <HTML> <HEAD> <TITLE> La mia prima pagina in html </TITLE> </HEAD> <BODY BGCOLOR="#20B2AA"> <CENTER> <FONT COLOR="orange"> <H1><I>La Divina Commedia</I></H1> <HR ALIGN= center SIZE="5"> </CENTER> <H2><U>di Dante Alighieri</U></H2> <P><BIG><CENTER> </FONT> <FONT COLOR="#DEB887"> Nel mezzo del cammin di nostra vita,<br> mi ritrovai per una selva oscura,<br> che la diritta via era smarrita.<br> </P> <P> Ahi, quanto a dir qual'era, è cosa dura,<br> esta selva selvaggia, aspra e forte,<br> ché nel pensier rinnova la paura.<br> </FONT> </CENTER> </P></BIG> </BODY> </HTML> 20

21 Le liste non ordinate Semplici elenchi preceduti da un pallino: <UL> </UL> segnala l inizio della lista <LI> precede ogni voce Attributi: <UL TYPE= simbolo > disc(standard), square(quadrato pieno), circle(quadrato vuoto). 21

22 Le liste ordinate Elenchi dove ogni voce è preceduta da un numero progressivo: <OL> </OL> segnala l inizio della lista <LI> precede ogni voce Attributo: <OL TYPE = simbolo > 1(numeri), a(lettere minuscole), A(lettere maiuscole), i(numeri romani minuscoli), I(numeri romani maiuscoli) 22

23 Esempio 7 <BODY> <H3>Lista non ordinata</h3> <BR><BR> <UL TYPE= circle > <LI> Prima voce <LI> Seconda voce <LI> Terza voce </UL> <BR><BR> <H3>Lista ordinata</h3> <BR><BR> <OL TYPE= I > <LI> Prima voce <LI> Seconda voce <LI> Terza voce </OL> </BODY> 23

24 Collegamenti esterni Si ancora il collegamento alla pagina: <A HREF= url da collegare > </A> la scritta collocata all interno dei tag di apertura e di chiusura è ciò che apparirà effettivamente sulla pagina Web come collegamento. l URL può essere assoluto o relativo 24

25 Collegamenti interni Il collegamento: <A HREF = #nome_ancora >Testo</A> L ancora: <A NAME = nome_ancora >Testo</A> Al click sul collegamento ci si sposta alla porzione di testo ove è situata l ancora (all interno della medesima pagina!!) 25

26 Collegamenti Collegamento a un indirizzo <A HREF = mailto:nome@provider.it > Scrivetemi! </A> Il browser dell utente si predispone a spedire un messaggio all indirizzo indicato dal collegamento. 26

27 Esempio 8 <BODY> <H3>Programma dei corsi del primo anno - Multidams</H3> <BR><BR> <A HREF= #infbase >Informatica di base</a> <BR> <A HREF= #infgr >Informatica grafica</a> <BR><BR> <A NAME= infbase >Informatica di base</a> <BR> Il corso di informatica di base <BR> <A HREF= >Pagina web del corso</a> <BR><BR> <A HREF= mailto:docente@infbase.it > del docente</a> </BODY> 27

28 Inserire un immagine Inserimento di un immagine: <IMG SRC = nome_file.est > Attributi: ALT = stringa che appare passando sopra all immagine o al suo posto nei browser non grafici. ALIGN = disposizione della figura nella pagina (top, bottom e middle). 28

29 Trasformare l immagine in un collegamento E possibile rendere un immagine un collegamento ipertestuale: è sufficiente aggiungere, di seguito al tag <A>, il comando <IMG SRC = img > 29

30 Dimensione e bordi delle immagini Dimensione: attributi HEIGHT e WIDTH del tag IMG Bordo: attributo BORDER = num del tag IMG BORDER = 0 bordo assente 30

31 Esempio 9 <BODY> <IMG SRC= es6.jpg BORDER= 5 HEIGHT= 60% WIDTH= 45% ALT= L attributo ALT di quest immagine > </BODY> 31

32 Esercizio Creare una pagina Biblioteca con: Titolo principale: La mia biblioteca on-line Sfondo nero, testo azzurro 3 links che portano a tre pagine diverse (definire attributi LINK e VLINK): Romanzi gialli Romanzi d avventura Romanzi fantasy Al fondo della pagina, centrato e in grassetto, c è un mailto al vostro indirizzo 32

33 Creare la pagina Gialli (raggiungibile mediante il link precedentemente creato) con: Titolo: I Romanzi Gialli, in giallo appunto su sfondo nero. Più in basso, un elenco (ordinato) di 3 autori (Christie, Doyle, Simenon) utilizzati come collegamenti interni a 3 sezioni che riassumono l opera degli autori. Ogni sezione ha come titoletto il nome dell autore ed è separata dalla altre da una linea. Al termine di ogni sezione, allineato a destra è presente un link che porta alla pagina dedicata al relativo autore. 33

34 Creare la pagina Christie (raggiungibile mediante il link della relativa sezione) con: Titolo: Agatha Christie, colori a scelta per sfondo e testo. Poco sotto, centrata, con bordo n 2, una fotografia della autrice con dimensioni e attributo ALT definito: La foto è un link al sito ufficiale della autrice ( La pagina è composta da un elenco (non ordinato) di titoli che conducono ognuno alle relative pagine. 34

Documenti analoghi

Le liste non ordinate

Le liste non ordinate Semplici elenchi preceduti da un pallino: segnala l inizio della lista precede ogni voce Attributi: disc(standard), square(quadrato pieno), circle(quadrato