Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4"

Antonino Turco
6 anni fa
Visualizzazioni

1 Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza <h1>, <h2>,,<hn> Paragrafi <p align= > il parametro align può assumere valori CENTER, RIGHT o LEFT se non specificato l allineamento è a sinistra Dott. Giuseppe Contissa giuseppe.contissa@unibo.it Esempio 4 Enfasi <h1>questo è un titolo principale</h1> <h2>questo è un sottotitolo</h2> <h3>questo è un sottotitolo del sottotitolo</h3> <p>oggi c'è lezione!</p> Per enfatizzare un testo si può utilizzare il tag <em></em> Il risultato dipende da come il browser interpreta il tag corsivo grassetto sottolineato Esempio 5 Inserire immagini Per inserire un immagine all interno di un documento HTML si utilizza il tag <img> E il browser che decide dove collocare l immagine Il tag non ha bisogno di chiusura

2 Proprietà delle Immagini Esempio 6 Le caratteristiche delle immagini si definiscono mediante gli attributi del tag <IMG> SRC dove risiede l immagine HEIGTH altezza in pixel WIDTH larghezza in pixel BORDER può avere due valori: 0 (nessun bordo) o 1 (con bordo) <img Src= c:/winnt/web/wallpaper/nome. Jpg width= 80 height= 8 border= 1 > Parametro ALT Contiene una breve descrizione dell immagine nel caso in cui non venga visualizzata perchè: l'indirizzo dell'immagine è sbagliato l'immagine è stata rimossa dal server l'immagine è danneggiata l'utente ha disabilitato il download delle immagini dal proprio browser l'utente sta utilizzando un browser testuale (per esempio per i non vedenti) Esempio 7 <img src="luca.png" alt="qui la foto di Luca"> Altri attributi del tag <IMG> HSPACE distanza dai lati destro e sinistro dell immagine dagli oggetti più vicini VSPACE distanza dai lati superiore e inferiore dell immagine dagli oggetti più vicini ALIGN posizione dell immagine rispetto al testo posto immediatamente prima o dopo la stessa può avere 5 valori (top, middle, bottom, left, right) Browser e immagini La maggior parte dei browser supporta i formati tradizionali JPEG (Joint Photographics Experts Group) e GIF (Graphics Interchange Format) Altri formati come BMP (BitMaP) e PNG (Portable Network Graphics) possono essere supportati La scelta è legata a questioni di prestazioni si sceglie quella che occupa meno spazio perché è più rapida da scaricare

3 Inserire un link Esempio 8 Per inserire un link in un documento HTML viene utilizzato il tag <a href= title= >Home page di Giovanni Href (HyperText Reference) è il riferimento alla pagina di destinazione Title è testo che viene visualizzato quando il mouse passa sull area di link Home page di Giovanni è il testo su cui si deve cliccare. <TITLE> Quarta lezione</title> <h1>13/3/2008</h1> <a href= Giovanni.html title= visita la pagina di Giovanni >Home page di Giovanni <a href=" Immagini e link E possibile sostituire il testo da cliccare con un immagine inserendo il tag <img> all interno del tag <a> <a href="luca.html"> <img src="images/luca.gif"> Esempio 9 <TITLE> Quarta lezione</title> <h1>13/3/2008</h1> <a href="giovanni.html">home page di Giovanni <a href="giovanni.html"> <img src="images/giovanni.jpg"> Inserire un link ad una Esempio 10 Sempre con il tag <a> è possibile inserire collegamenti ad indirizzi Cliccando sul link vieneautomaticamente aperto il programma di posta predefinito con il campo TO già impostato sull indirizzo . <body> Scrivetemi a questo indirizzo <a href= mailto:giuseppe.contissa@unibo.it >giuseppe.c ontissa@unibo.it <body>

4 Link interni al documento Esempio 10bis Il punto da raggiungere deve essere inserito nel tag <a> nel seguente modo <a NAME= ancora > Il link alla porzione di documento contraddistinta dal nome ancora si ottiene nel seguente modo <a HREF= #ancora > <p><a href="#lezione">vai alla parte dedicata alla lezione</p> <p><a name= lezione">qui si parla della lezione</p> Formattare il testo Esempio 11 Il testo può essere formattato in diverso modo a seconda del tag nel quale è inserito: tipo e grandezza <font></font> Attributi face (font) size (dimensione) e color (colore) corsivo <i></i> grassetto <b></b> sottolineato <u></u> barrato <strike></strike> lampeggiante <blink></blink> <font face="verdana" size="24 color="red">il docente di questo corso e' <i> il Dott. Giuseppe Contissa</i> <strike>il Prof.Giovanni Sartor</strike>. La lezione di oggi riguarda l'<b><u>html</u></b>. </font> Altri tag Esempio 12 Apici Per inserire un testo come apice si utilizza il tag <SUP></SUP> Pedici Per inserire un testo come pedice si utilizza il tag <SUB></SUB> Linea orizzontale Per inserire una riga orizzontale si utilizza il tag <hr> <h1>html.it e' un marchio registrato <SUP> </SUP></h1> <hr> <h2>html.it e' un marchio registrato <SUB> </SUB></h2>

5 HTML e fogli di stile Il W3C (World Wide Web Consortium) ha deprecato l uso dei tag per formattare il documento. Secondo HTML 4 la formattazione del testo è lasciata unicamente ai fogli di stile.

Documenti analoghi

Corso di HTML. Prerequisiti. Modulo L2 B3-Immagini. Creazione di pagine web Visualizzazione pagine web. M. Malatesta B3-Immagini-05 09/01/2014

Corso di HTML. Prerequisiti. Modulo L2 B3-Immagini. Creazione di pagine web Visualizzazione pagine web. M. Malatesta B3-Immagini-05 09/01/2014 Corso di HTML Modulo L2 B3-Immagini 1 Prerequisiti Creazione di pagine web Visualizzazione pagine web 2 1 Introduzione In questa Unità diamo un approfondimento dell utilizzo del tag del linguaggio HTML