Sommario Allineamento ( ) Immagini ( ) Link ( ). Allineamenti Oltre a posso usare per allineare...

Sommario

Allineamento (<div>)

Immagini (<img>)

Link (<a>)

Allineamenti Oltre a <p> posso usare per allineare testo

ed immagini un altro tag:

<div align=“”>align = “center” o “left” o “right”

Nota: Tag di chiusura Tag con attributi

<div align=“center”>

<html> <head> </head> <body>Stiamo facendo unesercitazione sullaformattazione del testo<div align="center"> Testo che sto allineando.</div> </body></html>

Differenza tra <p> e <div>

<div>: un BR <p>: due BR

Immagini

Non possono mancare le immagini in una bella pagina Web

I formati leciti in HTML sono: JPG (o jpeg) PNG GIF

Formato consigliato JPG perché più veloce da caricare

TAG <IMG> Sintassi:

<img src = “pathaaaaaa.bbb”> Semantica:

img = comunico al browser che inserisco un immagine.

src = (source) attributo necessario per identificare l’immagine da inserire.

aaaaaa = nome dell’immagine

bbb = estensione dell’immagine

Attributo SRC (I)

Richiede non solo il nome dell’immagine ma anche dove poterla trovare nel PC dove risiede la pagina Web

Vediamo come si fa ad indicare al browser il percorso (path) da seguire per trovare l’immagine che vogliamo inserire ….

Attributo SRC (II)

Oltre ad un percorso (assoluto o relativo) posso anche specificare un URL valido, cioè un indirizzo di un sito Internet che contiene l’immagine.

<img src=“http://web-link.it/web.gif”>

Nota:

L’immagine sarà visibile solo se siete collegati in

rete e solo se l’immagine non viene spostata.

Attributi IMG (I)Attributi

src Visto!

alt Testo che viene visualizzato passando sull’immagine con il puntatore del mouse.

align Allineamento right (destra), left (sinistra), middle (nel mezzo), top (sopra), bottom (sotto).

heigth Altezza dell’immagine. Definita in termini di pixel o di percentuale dello spazio da utilizzare.

width Larghezza dell’immagine. Definita in termini di pixel o di percentuale dello spazio da utilizzare.

border Spessore del bordo dell’immagine. Definita in termini di pixel.

Attributi IMG (II)

Attributihspace

*

Spazio laterale destro e sinistro dal testo, da un’altra immagine, dal bordo di una tabella … Definito in termini di pixel.

vspace

*

Spazio laterale sopra e sotto dal testo, da un’altra immagine, dal bordo di una tabella … Definito in termini di pixel.

Esempio Alt<html><head><title>Prova</title></head><body bgcolor="#ffffcc">

<img src="leoncini.jpg" alt =“Sono bellissimi”>

</body></html>

Sono bellissimi

Esempio HeightPercentuale

<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni.

<img src="leoncini.jpg" height =“50%">

</body></html>

Pixel<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni.

<img src="leoncini.jpg" height =“256">

</body></html>

Esempio WidthPercentuale

<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni.

<img src="leoncini.jpg" width =“20%">

</body></html>

Pixel<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni. <img src="leoncini.jpg" width =“256"></body></html>

Esempio senza border<html>

<head>

<title>

Prova

</title>

</head>

<body bgcolor="#ffffcc">

<img src="leoncini.jpg" >

</body>

</html>

Esempio con border<html><head><title>Prova</title></head><body bgcolor ="#ffffcc">

<img src="leoncini.jpg" border ="5">

</body></html>

Esempio Align (I)<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni.

<img src="leoncini.jpg" align ="top">

</body></html>

Esempio Align (II)<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni.

<img src="leoncini.jpg" align =“bottom">

</body></html>

Esempio Align (III)<html><head><title>Prova</title></head><body bgcolor="#ffffcc">Questi sono due bei gattoni.

<img src="leoncini.jpg" align =“middle">

</body></html>

Link

Definizione1

Un link è una connessione tra più risorse

Web.

Definizione2

Pensando ad una connessione uno a uno

un link connette due punti (dette anchors).

Chiarimenti

Connessione = relazione stretta tra più elementi.

Connessione uno a uno = relazione stretta tra due elementi.

Anchors = i due “punti” connessi.dove con punti intendo risorse web qualsiasi

(un immagine, un video, un HTML, testo …)

Tag <A>

Sintassi

<A attr1=“val1” attrn=“valn” > Testo (o altro) da visualizzare per permettere all’utente della pagina di accedere al link

</A>

Nota: - tag di chiusura

- attributi

Anchors

In HTML definisco le anchorsUna di partenzaUna di arrivo

Partenza Arrivo

Con lo stesso TAG <A>

Attributi <A>

Attributiname Definisce l’anchor come il punto di arrivo

href Definisce l’anchor come il punto di partenza

title Informazioni sul link visualizzate quando il mouse passa sul link

Nota: come “alt” per le immagini.

Tag <A> (Partenza)

Definisco un anchor di partenza usando il tag <A> usando l’attributo href (hyperlink reference)

Es:

<A href =“l’oggetto destinazione”>

Tag <A> (Arrivo)

Definisco un anchor di arrivo usando il tag <A> con l’attributo name

Es:

<A name =“nome dell’oggetto”>

Attributo NAME Serve a dare un nome univoco al punto di

arrivo della mia connessione.

Es:<A name=“ancora1”>

Questa è l’ancora1

</A>

<A name=“ancora2”>

Questa è l’ancora2

</A>

Sono in cima alla pagina

Sono a metà della pagina

Ho la possibilità di

“linkare” queste due porzioni di

testo

Attributo href Serve a creare la vera e propria

connessione con UN punto di arrivo

Es:

<A href =“puntoDiArrivo”>

Testo da cliccare per raggiungere pDA

</A>

Valori di HREF

HREF può assumere tre possibili valori:

un path (assoluto o relativo) un URL un nome di ancora preceduto dal

carattere #

HREF - path Il punto di arrivo può essere un’altra

pagina html oppure un immagine oppure

un video sul vostro PC di cui dovete specificare il path.

Es:

<A href=“Prima.htm”>

Vai alla mia prima pagina

</A>

HREF - URL

Il punto di arrivo può essere un’altra pagina html oppure un immagine oppure

un video, di cui dovete specificare l’URL.

Es:

<A href=“http://www.repubblica.it”>

Consulta repubblica

</A>

Href - Mailto (I) Posso avere un link che

permette di spedire un email.

<html><head><title> Prova </title></head><body bgcolor="#ffffcc"><a href="mailto:[email protected]">

Email</a>. </body></html>

Href - Mailto (II)

Posso spedire un email con soggetto predefinito.<a href="mailto:[email protected]?subject=Ciao">

Email</a>.

HREF – ancora (I) Il punto di arrivo può essere un’ancora

nella medesima pagina html

Es:<A href=“#pizza”>

Guarda qui.

</A>

E da qualche altra parte nella pagina avrò

<A name=“pizza”>

E adesso ???

</A>

Ipertesto

HREF – ancora (II)

Alcuni browser sono nei confronti dei nomi delle ancore

Case-sensitive (NN) Case-insensitive (IE)

Fate attenzione alle maiuscole/minuscole

Es: pizza ≠ Pizza ≠ PIZZA ….

Attributo title

Come per “alt” del tag <img> posso visualizzare delle informazioni sul link

<html><head><title>Prova</title></head><body bgcolor="#ffffcc"><A href ="./chapter2.html" title ="Link alcapitolo due del libro della giungla">

Capitolo Due</A>. </body></html>

Link al capitolo due del libro della giungla

Immagini - Link

Posso fare in modo di accedere a destinazione tramite un immagine.

Definisco l’immagine come il punto di partenza in questo modo:

<a href =“Destinazione”>

<img src=“Img.jpg”>

</a>

Esempio

<a href="http://www.repubblica.it">

<img src="002.jpg">

</a>

<BODY>: Colore LINK<body link=“#111111” vlink=“#111111” alink=“#111111”>

Altri TAGAltro testo …..Tutto il contenuto del documento HTML

</body>

Attributi

LINK Definisce il colore del testo dei link

Esempio: link =“#FFFFFF”VLINK Definisce il colore del testo dei link già visitati

Esempio: vlink =“#FFFFFF”ALINK Definisce il colore del testo dei link attivi

Esempio: alink =“#FFFFFF”

Sommario Allineamento ( ) Immagini ( ) Link ( ). Allineamenti Oltre a posso usare per allineare...

Documents

Transcript of Sommario Allineamento ( ) Immagini ( ) Link ( ). Allineamenti Oltre a posso usare per allineare...