Sommario Allineamento Immagini Link (<div>) (<img>) (<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 un esercitazione sulla formattazione 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) Attributi hspace * 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 Sono bellissimi <html> <head> <title> Prova </title> </head> <body bgcolor="#ffffcc"> <img src="leoncini.jpg" alt =“Sono bellissimi”> </body> </html> Esempio Height Percentuale Pixel <html> <head> <title> Prova </title> </head> <body bgcolor="#ffffcc"> Questi sono due bei gattoni. <img src="leoncini.jpg" height =“50%"> </body> </html> <html> <head> <title> Prova </title> </head> <body bgcolor="#ffffcc"> Questi sono due bei gattoni. <img src="leoncini.jpg" height =“256"> </body> </html> Esempio Width Percentuale <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 anchors Una di partenza Una di arrivo Partenza Arrivo Con lo stesso TAG <A> Attributi <A> Attributi name 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 al capitolo 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 TAG Altro 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”
Scarica
