Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Transcript

1 Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es: <FONT SIZE= 5 > </FONT> FACE= stile per modificare lo stile Es: <FONT FACE= Arial > </FONT> COLOR= colore per modificare il colore Es: <FONT COLOR= red > </FONT> Nulla vieta di usarli tutti assieme, es: <FONT SIZE= 5 FACE= Arial COLOR= red > </FONT> es. 17

2 Il tag <SPAN> Il tag <SPAN> è un elemento HTML neutro che consente, di applicare direttamente alcuni attributi, per esempio: STYLE= che può contenere sottoattributi come: font-size:pti. per le dimensioni Es: <SPAN STYLE= font-size:20 > </SPAN> font-family: tipo di font per lo stile Es: <SPAN STYLE= font-family: Arial > </SPAN> background: colore per il colore di sfondo Es: <SPAN STYLE= background: red > </SPAN> Color: colore per il colore del testo Es: <SPAN STYLE= color: #FFFFFF > </SPAN> Se si vuole aggiungere più sottoattributi a style, vanno separati con un ; es. 18 I colori nella pagina web Per regolare i colori dell intera pagina web si usano gli attributi di BODY: BGCOLOR= colore per il colore dello sfondo TEXT= colore per il colore del testo LINK= colore per il colore dei link ALINK= colore per il colore dei link quando vi si clicca sopra VLINK= colore per il colore dei link visitati es. 18bis

3 <OL>: elenchi numerati Per inserire una serie di voci in un elenco di punti in ordine crescente: <OL> <LI> <LI> </OL> Tag Ordered List Per ogni punto della lista: <LI> es. 19 Tipi di numerazione Di default l elenco numerato segue la numerazione standard 1, 2,. Se si vuole cambiare la numerazione si usa l attributo TYPE, assegnandogli: A = lettere maiuscole a = lettere minuscole I = numeri romani maiuscoli i = numeri romani minuscoli es. 20

4 Inizio della numerazione Se non si desidera iniziare la numerazione da 1 (o dal primo elemento per gli latri tipi): si utilizza l attributo START, assegnandogli il numero del punto di partenza (anche nel caso di numerazioni di tipo diverso) es. 21 <UL>: Elenchi puntati Quando si vuole fare un elenco senza fornire una numerazione, si utilizza il tag <UL> esattamente come per la lista ordinata: <UL> <LI> <LI> </UL> Tag Unordered List Per ogni punto della lista: <LI> es. 22

5 Simbolo dell elenco Di default nella lista puntata viene messo come simbolo un pallino a fianco di ciascun punto dell elenco. Per cambiare i simboli dell elenco si usa l attributo TYPE attribuendogli: disc (disco) circle (cerchio) square (quadrato) es. 23 Liste nidificate I due tipi di lista, possono essere entrambi nidificati: per ciascun punto della lista si può cioè creare un sottoelenco. Il metodo è lo stesso: ciascuna lista deve essere compresa tra i tag <OL> oppure <UL>, ogni punto preceduto da <LI> es. 24

6 Personalizzare gli elenchi Combinando nel tag <LI> gli attributi: TYPE= tipo di elenco VALUE= numero di punto è possibile ottenere liste personalizzate es. 25 Linee orizzontali Per inserire una linea di separazione: <HR> (3D di default) Per regolare lo spessore: <HR SIZE= numero > Per regolare la lunghezza: <HR WIDTH= numero > <HR WIDTH= % percentuale > Per ottenere una linea semplice (non 3D): <HR NOSHADE> es. 26

7 <TABLE>: le tabelle L inizio di una tabella indicato con l elemento <TABLE> e la fine con </TABLE> Se si vuole il bordo, inserire l attributo BORDER Per inserire la didascalia: <CAPTION> Iniziare ciascuna riga con <TR> Le celle di intestazione vengono marcate con <TH>, quelle di dati con <TD> es. 27 Allineamento nelle celle Normalmente i dati vengono allineati al centro Per modificare l allineamento di una cella aggiungere al tag <TD> l attributo: ALIGN= LEFT RIGHT CENTER Allineamento orizzontale VALIGN= TOP MIDDLE BOTTOM Allineamento verticale es. 28

8 Larghezza delle tabelle Per fissare la larghezza di una tabella a piacimento: <TABLE WIDTH= numero> oppure <TABLE WIDTH= %percentuale> es. 29 <IMG>: le immagini Per inserire un immagine: <IMG SRC= nome.estensione > Per allinearla al testo utilizzare l attributo ALIGN Per far comparire un bordo usare l attributo BORDER= numero es. 30

9 Immagini Per modificare le dimensioni, ci sono gli attributi: WIDTH= numero HEIGHT= numero Per inserire un immagine come sfondo: <BODY BACKGROUND= nome.estensione > es. 31 Le immagini per i siti Per recuperare delle immagini da utilizzare nelle proprie pagine web, esistono siti specializzati, come per esempio:

10 Link HREF I link si effettuano con il tag <A> Per inserire l URL usare l attributo HREF= indirizzo URL Se l URL è un indirizzo HREF= mailto:indirizzo es. 32 Anchor: l attributo NAME Spesso è comodo passare a diverse sezioni della stessa pagina attraverso un link (es: to the top) Per fare questo è necessario attribuire un etichetta ad un punto della pagina, con l attributo NAME: <A NAME= etichetta ></A> In questo caso il testo fra i tag è del tutto opzionale

11 Richiamare un etichetta Per richiamare quel punto della pagina contrassegnata da una certa etichetta: <A HREF= # etichetta > In questo modo la pagina si sposta esattamente nel punto in cui si trova l etichetta es. 33 Esercitazione Utilizzando gli elementi di HTML trattati, creare un sito web off-line con le seguenti caratteristiche: Tema trattato a scelta Home page con link Almeno 5 pagine web Uso di almeno un tipo di lista Formattazione del testo