Post on 02-May-2015
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:debole@iei.pi.cnr.it">
Email</a>. </body></html>
Href - Mailto (II)
Posso spedire un email con soggetto predefinito.<a href="mailto:debole@iei.pi.cnr.it?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”