Sommario Allineamento ( ) Immagini ( ) Link ( ). Allineamenti Oltre a posso usare per allineare testo ed immagini un altro tag: align = center o left.

Presentazione sul tema: "Sommario Allineamento ( ) Immagini ( ) Link ( ). Allineamenti Oltre a posso usare per allineare testo ed immagini un altro tag: align = center o left."— Transcript della presentazione:

1 Sommario Allineamento ( ) Immagini ( ) Link ( )

2 Allineamenti Oltre a posso usare per allineare testo ed immagini un altro tag: align = center o left o right Nota: Tag di chiusura Tag con attributi

3 Stiamo facendo un esercitazione sulla formattazione del testo Testo che sto allineando.

4 Differenza tra e : un BR : due BR

5 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

6 TAG Sintassi: Semantica: img = comunico al browser che inserisco un immagine. src = (source) attributo necessario per identificare limmagine da inserire. aaaaaa = nome dellimmagine bbb = estensione dellimmagine

7 Attributo SRC (I) Richiede non solo il nome dellimmagine 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 limmagine che vogliamo inserire ….

8 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 limmagine. Nota: Limmagine sarà visibile solo se siete collegati in rete e solo se limmagine non viene spostata.

9 Attributi IMG (I) Attributi srcVisto! altTesto che viene visualizzato passando sullimmagine con il puntatore del mouse. alignAllineamento right (destra), left (sinistra), middle (nel mezzo), top (sopra), bottom (sotto). heigthAltezza dellimmagine. Definita in termini di pixel o di percentuale dello spazio da utilizzare. widthLarghezza dellimmagine. Definita in termini di pixel o di percentuale dello spazio da utilizzare. borderSpessore del bordo dellimmagine. Definita in termini di pixel.

10 Attributi IMG (II) Attributi hspace * Spazio laterale destro e sinistro dal testo, da unaltra immagine, dal bordo di una tabella … Definito in termini di pixel. vspace * Spazio laterale sopra e sotto dal testo, da unaltra immagine, dal bordo di una tabella … Definito in termini di pixel.

11 Esempio Alt Prova <img src="leoncini.jpg" alt =Sono bellissimi> Sono bellissimi

12 Esempio Height Percentuale Prova Questi sono due bei gattoni. Pixel Prova Questi sono due bei gattoni.

13 Esempio Width Percentuale Prova Questi sono due bei gattoni. Pixel Prova Questi sono due bei gattoni.

14 Esempio senza border Prova

15 Esempio con border Prova

16 Esempio Align (I) Prova Questi sono due bei gattoni.

17 Esempio Align (II) Prova Questi sono due bei gattoni.

18 Esempio Align (III) Prova Questi sono due bei gattoni.

19 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).

20 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 …)

21 Tag Sintassi Testo (o altro) da visualizzare per permettere allutente della pagina di accedere al link Nota: - tag di chiusura - attributi

22 Anchors In HTML definisco le anchors Una di partenza Una di arrivo PartenzaArrivo Con lo stesso TAG

23 Attributi nameDefinisce lanchor come il punto di arrivo hrefDefinisce lanchor come il punto di partenza titleInformazioni sul link visualizzate quando il mouse passa sul link Nota: come alt per le immagini.

24 Tag (Partenza) Definisco un anchor di partenza usando il tag usando lattributo href (hyperlink reference) Es:

25 Tag (Arrivo) Definisco un anchor di arrivo usando il tag con lattributo name Es:

26 Attributo NAME Serve a dare un nome univoco al punto di arrivo della mia connessione. Es: Questa è lancora1 Questa è lancora2 Sono in cima alla pagina Sono a metà della pagina Ho la possibilità di linkare queste due porzioni di testo

27 Attributo href Serve a creare la vera e propria connessione con UN punto di arrivo Es: Testo da cliccare per raggiungere pDA

28 Valori di HREF HREF può assumere tre possibili valori: un path (assoluto o relativo) un URL un nome di ancora preceduto dal carattere #

29 HREF - path Il punto di arrivo può essere unaltra pagina html oppure un immagine oppure un video sul vostro PC di cui dovete specificare il path. Es: Vai alla mia prima pagina

30

31 HREF - URL Il punto di arrivo può essere unaltra pagina html oppure un immagine oppure un video, di cui dovete specificare lURL. Es: Consulta repubblica

32

33 Href - Mailto (I) Posso avere un link che permette di spedire un email. Prova Email.

34 Href - Mailto (II) Posso spedire un email con soggetto predefinito. Email.

35 HREF – ancora (I) Il punto di arrivo può essere unancora nella medesima pagina html Es: Guarda qui. E da qualche altra parte nella pagina avrò E adesso ???

36 Ipertesto

37 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 ….

38 Attributo title Come per alt del tag posso visualizzare delle informazioni sul link Prova <A href ="./chapter2.html" title ="Link al capitolo due del libro della giungla"> Capitolo Due. Link al capitolo due del libro della giungla

39 Immagini - Link Posso fare in modo di accedere a destinazione tramite un immagine. Definisco limmagine come il punto di partenza in questo modo:

40 Esempio

41 : Colore LINK Altri TAG Altro testo ….. Tutto il contenuto del documento HTML 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