HTML in sintesi

HTML in sintesi

 

Per visualizzare la cache             

Explorer: Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file

Mozilla: Modifica > Preferenze > Avanzate > Cache

visualizzare il codice HTML

E: Visualizza > HTML

M: Visualizza > Codice Sorgente

impostare la cache del vostro browser in modo che il file html venga ricaricato ogni volta che richiamate la pagina

E: Strumenti > Opzioni Internet > Generale > Impostazioni >

Ricerca versioni più recenti delle pagine memorizzate

all'apertura della pagina   M: Modifica > Preferenze > Avanzate > Cache >

visualizzare l'estensione del file

Strumenti > Opzioni cartella > Visualizzazione è togliere la spunta da: "Nascondi le estensioni dei file per i tipi di file conosciuti" è"Come cartella corrente"

 spazio: &nbsp

 

5 Struttura di un tag

<TAG attributi>contenuto</TAG>

<P align="right">testo</P>

<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

struttura di un attributo è: attributo="valore"

Alcuni particolari tag non hanno contenuto - questi tag non hanno neanche chiusura

<TAG attributi>

<IMG widht="20" height="20" src="/miaImmagine.gif" alt="alt">

indicano la posizione di alcuni elementi come il tag delle immagini

Questo tipo di tag viene detto "empty", cioè "vuoto"

 

Testa (<head>)

Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera

Corpo (<body>)

Qui è racchiuso il contenuto vero e proprio del documento

10 Gli elementi HTML e i fogli di stile CSS

Elementi di blocco

Sono sostanzialmente gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form

Elementi "inline"

Sono gli elementi che - non andando a capo - possono essere integrati nel testo, come i collegamenti o le immagini

Liste

Lista numerate, o non numerate

 

 

11 Impostare il colore di sfondo

 

colore

parola chiave

notazione esadecimale

arancione

orange

#FFA500

blu

blue

#0000FF

bianco

white

#FFFFFF

giallo

yellow

#FFFF00

grigio

gray

#808080

marrone

brown

#A52A2A

nero

black

#000000

rosso

red

#FF0000

verde

green

#008000

viola

violet

#EE82EE

 <body bgcolor="blue">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

12 Inserire un’immagine di sfondo

<body background="imgSfondo.gif">

L’immagine di sfondo verrà ripetuta in orizzontale e in verticale

combinare i due attributi

mentre l’immagine di sfondo viene caricata, vene comunque visualizzata una colorazione della pagina

<body bgcolor="#0000ff" background="imgSfondo.gif">

fissare lo sfondo in modo che non si ripeta

<body style="
 background-image: url(/sfondo.gif);
 background-repeat: repeat;"
>

background-repeat: no-repeat;"

fissare lo sfondo" in modo da potervi fare scorrere sopra il contenuto della pagina

<body style="
 background-image: url(/sfondo.gif);
 background-attachment:fixed;"
>

 

assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco

 

13 Eliminare i margini delle pagine

<body leftmargin="0" topmargin="0">

14 Impostare la lingua italiana.

Questo attributo non è solo una proprietà del tag body, ma può essere riferito alla maggior parte dei tag HTML che vedremo (come paragrafi, blocchi, tabelle, eccetera)

<body lang="it">

16 Impostare il colore del testo e dei link per tutta la pagina

<body text="red">

<body bgcolor="#0000ff" text="#ffffff">

 

Status i link testuali hanno diversi stati

Codifica in HTML 4.01

Descrizione

Collegamento normale

link

Normalmente il link quando si trova "a riposo" viene evidenziato in qualche maniera all'interno della pagina HTML, in modo che sia facile per l'utente individuarlo. Nell'HTML tradizionale il link è sempre sottolineato (è possibile eliminare la sottolineatura soltanto usando i CSS). Di default i link sono blu (#0000FF).

Collegamento visitato

visited

Un link è visitato, quando l'URL della pagina compare nella cronologia dell'utente. Di default i link visitati sono di color violetto (più esattamente: #800080).

Collegamento attivo

active

Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all'altra.
Con Internet Explorer è possibile vedere anche una linea tratteggiata attorno al collegamento attivo.
Un ulteriore condizione in cui un link si rileva "attivo" è quando si utilizza il tasto destro del mouse su di lui. Insomma un link è attivo quando "ha il focus".

Collegamento al passaggio del mouse

assente

Con l'HTML 4.01 al passaggio del mouse sul link si può fare ben poco, coi fogli di stile invece è possibile creare qualche effetto di visualizzazione, utilizzando la parola chiave hover " nei CSS)

per cambiare colore ai link(di default blu)

<body link="red">

Per cambiare colore ai link visitati (di default viola):

<body vlink="green">

Per cambiare colore ai link attivi:

<body alink="yellow">

La sintassi completa:

<body link=" red " alink=" yellow " vlink=" green ">

 

Abbiamo dunque tre stati canonici dei link (link a riposo, link attivo e link visitato) e una condizione aggiuntiva introdotta dai fogli di stile (status del link al passaggio del mouse):

17 tag-contenitori

I titoli: h1, h2, ..., h6

risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé

<h1>titolo 1 </h1>

<h2>titolo 2 </h2>

<h3>titolo 3 </h3>

<h4>titolo 4 </h4>

<h5>titolo 5 </h5>

<h6>titolo 6 </h6>

Il paragrafo <p>

<p>paragrafo 1</p>

Il paragrafo è l'unità di base entro cui suddividere un testo.

Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura

Il <div>

<div>Blocco di testo 1</div>

<div>Blocco di testo 2</div>

Il blocco di testo va a capo, ma - a differenza del paragrafo - non lascia spazi prima e dopo la sua apertura

Lo <span>

due <span>

<span>contenitore 1</span><span>contenitore 2</span>

elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include

Se non viene associato ad uno stile risulta praticamente invisibile

·  <p> lascia spazio prima e dopo la propria chiusura

·  <div> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo

·  <span> - essendo un elemento inline - non va a capo

Allineamento

Sintassi

Visualizzazione codice HTML

Testo allineato a sinistra

<p align="left">testo</p>

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

Testo allineato a destra

<p align="right">testo</p>

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

Testo giustificato

<p align="justify">testo</p>

Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

 

Per andare a capo all'interno di un paragrafo possiamo utilizzare il tag

<br />

per saltare una riga ne occorrono due:

<br /><br />

per tracciare una linea orizzontale

<hr noshade size="5" width="50%" align="center" />

<hr />

Noshade

Size

Width

align

evita di sfumare la linea

indica l'altezza in pixel

è la larghezza in pixel o in percentuale

l'allineamento

  

18 Scegliere lo stile (grassetto, corsivo & C.)

·                  vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag

·                  vengono definiti come logici quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del tag, e in base a questo adottano uno stile grafico

I principali stili fisici sono:

 

Codice HTML

Visualizzazione

Descrizione

<b>testo in grassetto</b>

Questo <b>testo</b> è in grassetto

Questo testo è in grassetto

Formatta il testo in grassetto

<i>testo in corsivo</i>

Questo <i>testo</i> è in corsivo

Questo testo è in corsivo

Formatta il testo in corsivo. Tuttavia bisogna evitare di evidenziare in corsivo dei blocchi di lunghezza considerevole, perché la leggibilità del corsivo nel web lascia a desiderare

<pre>testo preformattato</pre>

<pre>

PHP_FUNCTION
{
   zval **parameters;
   zval *value;
   char* str;

</pre>

PHP_FUNCTION

{

   zval **parameters;

   zval *value;

   char* str;

 

Il motore di rendering del browser restituisce il testo così come è stato inserito nel file html dall’autore stesso (preformattato quindi), senza riformattarlo.

È un tag che si usa soprattutto nella rappresentazione di codice di programmazione.

<u>testo sottolineato</u>

Questo <u>testo</u> è sottolineato

Questo testo è sottolineato

Sottolinea il testo presente nel tag.

Nel web le sottolineature del testo sono da evitare, per non confondere il lettore con i link

<strike>testo barrato</strike>

Questo <strike>testo</strike> è barrato

Questo testo è barrato

Con il testo barrato, vengono indicate (ad esempio) le correzioni

<sup>testo in apice</sup

E=mc<sup>2</sup>

E=mc2

"Superscript": indica al browser di portare il testo al di sopra della linea di scrittura. Utile per formule matematiche (ad esempio le potenze)

<sub>testo in pedice</sub>

H<sub>2</sub>O

H2O

"Subscript": indica al browser di portare il testo al di sotto della linea di scrittura (utile ad esempio per i simboli chimici)

 

Gli stili logici                            vedi lezione 18

19 Scegliere il font del testo

Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times".

si preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana", l’"Arial" o l’"Helvetica"

Per scegliere il tipo di carattere con cui un font deve essere visualizzato

<font face="Arial">testo in Arial</font>

testo in Arial

<font face="Verdana">testo in Verdana</font>

testo in Verdana

<font face="Geneva">testo in Geneva</font>

testo in Geneva

esempi di famiglie "sicure" di caratteri:

<font face="Verdana, Arial, Helvetica, sans-serif">Verdana e caratteri simili</font>

Verdana e caratteri simili

<font face="Arial, Helvetica, sans-serif">Arial e caratteri simili</font>

Arial e caratteri simili

<font face="Times New Roman, Times, serif">Times e caratteri simili</font>

Times e caratteri simili

<font face="Courier New, Courier, mono">Curier e caratteri simili</font>

Curier e caratteri simili

<font face="Georgia, Times New Roman, Times, serif">Georgia e caratteri simili </font>

Georgia e caratteri simili

<font face="Geneva, Arial, Helvetica, sans-serif">Geneva e caratteri simili</font>

Geneva e caratteri simili

<font color="blue">testo blu</font>

ovvero:

<font color="#0000FF">testo blu</font>

testo blu
ovvero
testo blu

 

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">

testo blu in Verdana

</font>

testo blu in Verdana

 

20 Scegliere il colore del testo

 

   

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">

testo blu in Verdana<br>

<font color="red">

testo rosso

</font>

</font>

testo blu in Verdana
testo rosso
o meglio ancora:
testo blu in Verdana
testo rosso

Le dimensioni del testo

l’attributo "size" del tag font

·                  valori interi da 1 a 7

·                  valori relativi alla dimensione di base del tag font (di default "3")

Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza del <font> utilizzando i segni "+" e "-".

<font size="+2">
Testo di grandezza +2 rispetto al font di base (3).<br>
Cioè font di grandezza 5.
</font>

La grandezza del font di base può anche esser cambiata

<basefont size="1">

 

È importante evitare di cadere nell’errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base

in realtà la grandezza del carattere dipende dalle impostazioni del browser dell’utente

 

21 Gli elenchi nell'HTML

Codice

Resa

Testo che precede la lista
<ol>
 <li>primo elemento</li>
 <li>secondo elemento</li>
 <li>terzo elemento</li>
</ol>
Testo che segue la lista

Testo che precede la lista

  1. primo elemento

  2. secondo elemento

  3. terzo elemento

Testo che segue la lista

 

Gli elenchi ordinati

Il tag che individua l'elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l'inclusione di un nuovo elenco all'interno di un elenco preesistente: in questo caso non viene lasciato spazio, néprima, né dopo.

 

 

 

 

 

Valore dell'attributo type

Descrizione

Codice

Resa

type="1"
(è così di default)

numeri arabi

<ol type="1">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>

  1. primo

  2. secondo

  3. terzo

type="a"

alfabeto minuscolo

<ol type="a">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>

  1. primo

  2. secondo

  3. terzo

type="A"

alfabeto maiuscolo

<ol type="A">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>

  1. primo

  2. secondo

  3. terzo

type="i"

numeri romani minuscoli

<ol type="i">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>

  1. primo

  2. secondo

  3. terzo

type="I"

numeri romani maiuscoli

<ol type="I">
 <li>primo</li>
 <li>secondo</li>
 <li>terzo</li>
</ol>

  1. primo

  2. secondo

  3. terzo

 

 

Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell'attributo type.

<ol type="a">

  <li>primo elemento

  <li>secondo elemento

  <li>terzo elemento

</ol>

  

Gli elenchi non ordinati

<ul>

  <li>primo elemento

  <li>secondo elemento

  <li>terzo elemento

</ul>

 

 

Valore dell'attributo type

Descrizione

Codice

Resa

type="disc"
(è così di default)

visualizza un "pallino" pieno.
È la visualizzazione di default

<ul type="disc">
  <li>primo</li>
  <li>secondo</li>
  <li>terzo</li>
</ul>

  • primo

  • secondo

  • terzo

type="circle"

visualizza un cerchio vuoto al proprio interno

<ul type="circle">
  <li>primo</li>
  <li>secondo</li>
  <li>terzo</li>
</ul>

 

  • primo

  • secondo

  • terzo

 

type="square"

Visualizza un quadrato pieno al proprio interno

<ul type="square">
  <li>primo
  <li>secondo
  <li>terzo
</ul>

  • primo

  • secondo

  • terzo

Liste di definizione

Gli liste di definizione sono individuati dal tag <dl>. Gli elementi dell'elenco (a differenza delle liste ordinate, e delle liste non ordinate) questa volta sono formati da due parti:

Tag

Descrizione

<dt>

definition term: indica il termine da definire. A differenza dell'elemento <li> in questo caso non c'è rientro

<dd>

definition description: è la definizione vera e propria del termine. In genere questo elemento è reso con un rientro

Codice

Resa

<p>Ecco i principali tag per delimitare il testo:</p>

<dl>
  <dt>&lt;p&gt;</dt>
  <dd>individua l'apertura di un
      nuovo paragrafo</dd>

  <dt>&lt;div&gt;</dt>
  <dd>individua l'apertura di un
      nuovo blocco di testo</dd>

  <dt>&lt;span&gt;</dt>
  <dd>individua l'apertura di un
      elemento inline, cui attribuire
      una formattazione atraverso
      gli stili</dd>
</dl>
ci sono poi altri tag che...

Ecco i principali tag per delimitare il testo:

<p>

individua l'apertura di un nuovo paragrafo

<div>

individua l'apertura di un nuovo blocco di testo

<span>

individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili

ci sono poi altri tag che...

l'attributo type è deprecato dal W3C

 

 

22 I link e l'ipertestualità

<a href="http://www.html.it/">HTML.IT</a>.

Immagine .gif, .jpg, .png

Viene visualizzata nel browser

Documento .html, .pdf, .doc

La pagina è visualizzata nel browser.
Nel caso dei documenti .doc e .pdf l'utente deve avere installato sul proprio pc l'apposito plugin (nella maggior parte dei casi è sufficiente che abbia installato rispettivamente Microsoft Word e Adobe Acrobat Reader). Se non è installato il plugin il sistema chiederà all'utente se salvare il file.

File .zip, file .exe

Viene chiesto all’utente di scaricare il file

NOTA bene: per motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dal web; l’utente dovrà sempre prima scaricarlo sul proprio PC.

specificare un indirizzo e-mail

 

Apparirà direttamente il client di posta dell’utente con l’indirizzo e-mail pre-impostato

<a href="mailto:Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.">
 Mandami una e-mail
</a>.

 

 

23 I percorsi assoluti e relativi

 

 

Percorsi relativi

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.

Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file

<a href="/paginaDaLinkare.html">collegamento alla pagina</a>

Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file

Secondo la formula:
cartella/nomeFile.html

<a href="/prima/interna/interna.html">Visita la pagina interna</a>

Per tornare su di un livello, è sufficiente utilizzare la notazione:
../nomeFile.html

../altraCartella/nuovoFile.html

Per tornare su di due livelli

<a href="/../../index.html">Visita la pagina interna</a>

<a href="/css/index.html"> è un altro modo di esprimere i percorsi assoluti all’interno del proprio sito (basta che non siano in locale)

all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa

al posto di http://www.html.it/css/index.html              si può scrivere              http://www.html.it/css/

Consigli per i nomi dei file

·       è consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un "trattino basso" (cioè "_"). Ad esempio: mio_file.html

·       maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file

riferimento (assoluto) al vostro stesso computer  <a href="file:///C|percorsonomeFile.html">testo</A> in rete non funziona

24 I link interni o ancore

è possibile far riferimento all’àncora presente all’interno del documento attraverso un link che punti ad essa:

<a href="#primo">vai al primo paragrafo</a>

il cancelletto indica che il collegamento deve cercare un àncora chiamata "primo" all’interno della pagina stessa

Se non si specifica il nome dell’àncora a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina

<a href="#">link vuoto</a>

Es.:

<a name=”parte2”></a>

<a href="/doc_y.htm#parte2">parola</a>

parte2 è la destinazione del salto all’interno del documento y parola è la parte sottolineata

Per creare un indice interno alla pagina si procede dunque in due fasi distinte:

·                  creazione dell’ancora a cui puntare (<a name="mioNome">)

·                  creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto (<a href="#mioNome">)

25 Gli attributi dei link

Target specifica in quale finestra la pagina linkata deve essere aperta

<a target="_blank" href="http://www.html.it">visita HTML.IT</a>

Title serve per specificare un testo esplicativo per l'elemento a cui l'attributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore)

L'attributo title è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto

<a title="in HTML.it puoi trovare risorse per webmaster"

    href="http://www.html.it/" target="_blank" >

    Visita HTML.it

</a>

Hreflang si indica la lingua del documento - migliora l'accessibilità del sito - utile per i motori di ricerca

<a href="http://www.w3c.org/" hreflang="eng" target="_blank">World Wide Web Consortium</a>

Accesskey scorciatoie "da tastiera"

<a href="http://www.html.it/" accesskey="h" target="_blank" >Torna all'home page di HTML.it</a>

digitando "ALT + h + invio" con Internet Explorer oppure "h + invio" con Mozilla si accede direttamente all'home page di HTML.it

Colorare i link

colorare alcuni link della pagina in modo diverso. Per farlo è sufficiente annidare il tag <font> all'interno del link

<a href="http://www.html.it/" target="_blank" ><font color="red" size="2" face="Verdana, Arial, Helvetica, sans-serif">Torna all'home page di HTML.it</font></a>

per colorare i link utilizzare i fogli di stile

Il tag <base>

Se vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag <base>, che va incluso nella head del documento

<base href="http://www.mioSitoWeb.com/miaCartella">

26 Inserire le immagini

·                  GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone

·                  JPG: è l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica

·                  PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser).

<img src="http://html.it/guide/img/guida_html/miaImmagine.gif">

Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.

è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine

Alt L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto

<img src="/logo.gif" alt="HTML.it" width="224" height="69">

longdesc (long description) permette di specificare un file con una spiegazione estesa dell’immagine

<img src="/logo.gif" alt="HTML.it" longdesc=“descrizione.html“ width="224" height="69">

dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate in modo da fornirne una spiegazione esauriente in ogni contesto

È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine

img src="/logo.gif" border="3" width="224" height="69">

i link lasciano sempre di default un bordo di un pixel attorno all’immagine

<a href=http://www.html.it target="_blank">
<img src="/logo.gif" width="224" height="69">
</a>

Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0”

<a href=http://www.html.it target="_blank">
<img src="/logo.gif" border="0" width="224" height="69">
</a>

27 Disporre le immagini in un contesto

Esempio di immagine nel testo               <p>testo… <img src="/logo.gif" width="224" height="69" border="0"> testo… </p>

immagine allineata a sinistra              <p><img src="/logo.gif" width="224"height="69"border="1"align="left"> testo…<p>

immagine allineata a destra              <p> <img src="/logo.gif" width="224" height="69" border="1" align="right"> testo… </p>

Valore di align

Visualizzazione

 

bottom

allinea la prima riga di testo sulla sinistra nella parte bassa dell'immagine (è così di default).

 

middle

allinea la prima riga di testo sulla sinistra al centro dell'immagine

 

top

allinea la prima riga di testo sulla sinistra nel lato superiore dell'immagine

 

left

 

right

 

hspace

impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda

 

vspace

 

 

 

impostiamo uno spazio orizzontale da ambo i lati

<img src="/logo.gif" width="224" height="69" hspace="20">

spazio è verticale

<img src="/logo.gif" width="224" height="69" vspace="20">

specificare il nome dell'immagine (serve in JavaScript per scambio immagini)

<img src=”miaImmagine.gif” name="logo">

28 Le mappe di immagine

·       le mappe lato client

·       le mappe lato server (non più utilizzate)

Le mappe lato-client

<img src=”miaImmagine.gif” usemap=”nomeMappa”>

Forma

Descrizione

rettangolare

<area shape="rect">

è necessario specificare alcune coordinate del rettangolo per individuare i veritici. In particolare sono da specificare (in quest’ordine):

·       la x del lato di sinistra

·       la y del lato alto

·       la x del lato destro

·       la y del lato in basso

circolare

<area shape="circle">

è necessario specificare le coordinate del centro (x e y) e la misura del raggio (in pixel)

Poligonali

<area shape="poly">

è necessario specificare tutte le coordinate del poligono a coppie

 

A questo punto non ci resta che creare la mappa:

<map name=”nomeMappa”>
…
</map>

All’interno del tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti. Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamoc reare

In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo (ed eventualmente il longdesc)

<img alt="Esempio di immagine con mappe" src="/italia.gif" width="220" height="235" border="1" usemap="#regioni">
<map name="regioni" id="regioni">
<area shape="rect" coords="14, 24, 35, 37" href="/http://www.regione.vda.it/" target="_blank" alt="Valle d'Aosta">
<area shape="circle" coords="45, 156, 29" href="/http://www.regione.sardegna.it/" target="_blank" alt="Sardegna">
<area shape="poly" coords="105, 199, …, 98, 205" href="/http://www.regione.sicilia.it/" target="_blank" alt="Sicilia">
</map>

il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0

Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull'area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi

onFocus='this.blur()'

<area shape="circle" coords="45, 156, 29" href="/http://www.regione.sardegna.it/" target="_blank" alt="Sardegna" onFocus=?this.blur()?>

TABELLE

<table>

apre la tabella

<tr>

“table row”: indica l’apertura di una riga

<td>

“table data”: indica una cella all’interno di una riga

 

30 Tabella: struttura di base

L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle

<table border=”2”>

Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione

la larghezza e l’altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser

l’eventuale larghezza specificata nelle celle della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti

Viceversa non è possibile variare arbitrariamente le dimensioni delle celle: le misure specificate nelle righe sottostanti non avranno infatti effetto

Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano che si procede verso l’interno della tabella: in un caso simile infatti “vincerebbe” il valore specificato nel tag genitore

la visualizzazione dei layout con indicazioni non corrette è a discrezione del browser

31 Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>

 

<caption>

è l’intestazione, il titolo con un commento esplicativo sulla tabella

<thead>

è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle

<tfoot>

è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme

<tbody>

è il corpo, la parte centrale con il contenuto vero e proprio della tabella

 

32 Raggruppare gli stili delle colonne              <colgroup>

non è ben interpretato da Mozilla

·                  L’attributo align può essere riferito sia a <tr>, sia a <td> e serve per definire l’allineamento dei contenuti a sinistra, a destra o al centro (left, right, center)

·                  L’attributo bgcolor può essere riferito tanto a <table>, <tr>, o <td> e – come abbiamo visto a proposito del <body> - consente di impostare un colore di sfondo

Il tag <colgroup> - la cui chiusura è facoltativa - va posto subito dopo il tag <caption> e prima di <thead>, e consente di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella.

Con l’attributo span (da non confondere con il tag <span>) possiamo impostare il numero di colonne che fanno parte del gruppo

Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <col> (che non necessita chiusura) all’interno di <colgroup>

33 Raggruppare celle con rowspan e colspan

In realtà è possibile raggruppare le celle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un’altra da 3. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne).

Tramite l’attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga

34 Annidare tabelle

È anche possibile annidare le tabelle le une dentro le altre

Per evitare che compaiano nel layout degli spazi indesiderati è consigliabile aprire e chiudere la tabella a ridosso del tag della cella che la contiene

35 Attributi del tag table

La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata – ha effetto su tutti i lati della cella

border

(che abbiamo già visto) specifica la larghezza dei bordi di una tabella (in pixel)

cellspacing

specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri

cellpadding

indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla

 

è possibile modificare l’aspetto dei bordi esterni della tabella (tramite l’attributo frames) e delle righe fra le celle (tramite l’attributo rules).

esempio

spiegazione

<table border="1" frame="above">

(nelle pagine di esempio qui a fianco le righe interne tra le celle sono state azzerate per facilitare la comprensione, dunque ci troveremo nella situazione in cui rules="none")

Il bordo della tabella è presente:

·                  void: in nessun lato. È il valore di default

·                  above: solo nel lato superiore

·                  below: solo nel lato inferiore

·                  hsides: solo nei lati superiore e inferiore

·                  vsides: solo a sinistra e a destra

·                  lhs: solo nel lato sinistro (left-hand side)

·                  rhs:solo nel lato destro (right hand side).

·                  box: in tutti e quattro i lati

·                  border: in tutti e quattro i lati

<table border="1" rules="rows">

(nelle pagine di esempio qui a fianco i bordi esterni della tabella sono stati azzerati per facilitare la comprensione, dunque ci troveremo nella situazione in cui frame="void")

Le righe interne alle celle sono presenti:

·                  none: da nessuna parte. È il valore di default

·                  groups: le righe separano i gruppi (siano essi gruppi di righe: <thead>, <tfoot>, <tbody> - o gruppi di colonne: <colgroup>)

·                  rows:le righe separano i vari <tr>

·                  cols:le righe separano le colonne

·                  all:le righe separano tanto i <tr>, quanto le colonne

36 Attributi di <table>, <tr>, <td>

Dimensioni: attributi width e height

Lo sfondo: sfondo bgcolor              immagine background

L’allineamento: align

riferito al tag <table>

<table align=”left”> sposta la tabella a sinistra (default)

<table align=”right”> sposta la tabella a destra

Se riferito a <tr> o a <td>

è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra

valign è utile per l’allineamento verticale delle celle

<td height=”100” valign=”middle”>
contenuto
</td>

top (alto)

middle (in mezzo – è il valore di default)

bottom (in basso)

baseline (alla linea di base)

 

Colori dei bordi              bordercolor, bordercolorlight, bordercolordark              visualizzati correttamente soltanto da Internet Explorer

quando una cella non viene riempita con un qualsiasi elemento non tutti i browser visualizzeranno i bordi allo stesso modo

è opportuno riempire sempre le celle con qualcosa, sia pure un &nbsp; (è la notazione per indicare un “non-breaking space”, cioè uno "spazio che non va a capo"), o un <br>. Attenzione che questi caratteri speciali prendono le dimensioni del tag <font> all’interno di cui sono contenuti.

Con Netscape 4 per ottenere la visualizzazione desiderata è spesso necessario introdurre una gif trasparente di 1 pixel x 1 pixel (detta “shim”) come sfondo della cella

Per individuare facilmente i gruppi di righe

<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe (“row group”).

il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>

Un’altra particolarità è che le celle all’interno del tag <thead> possono essere indicate con <th> (“table header”), al posto del consueto <td> (“table data”), in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato

37 Impaginare un layout con le tabelle

38 Comporre una pagina in frame

·                  Per prima cosa creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare

·                  cambia il doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

·                  scompare il tag <body>              al suo posto troviamo il tag <frameset>

<frameset>

Esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>HTML.it</title>
</head>

<frameset rows="50%,50%" cols="50%, 50%">
 <frame src="/prima.html">
 <frame src="/seconda.html">
 <frame src="/terza.html">
 <frame src="/quarta.html">

 <noframes>
  <p>Qui può essere indicato il link a
   <a href="/senzaFrame.html"> una versione del sito</a>
   che non utilizzi un layout a frame
  </p>
 </noframes>

</frameset>
</html>

Rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne

<frameset cols="33%, 33%,*">

 
 

 

Cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe

<frameset rows="33%, 33%,*">

possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”);

dimensione fissa

Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri:

<frameset rows="150,*" cols="100,200,*">

L’altezza della 1a riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina

percentuale

Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale:

<frameset rows="20%,80%" cols="25%,25%,50%">

come si può vedere la prima riga occupa il 20% dell’altezza, la seconda il rimanente 80%.

Le 3 colonne si dividono la larghezza: la prima colonna occupa il 25%, la seconda nuovamente il 25%, la terza il 50% dello spazio

proporzionale

In questo caso la ripartizione è proporzionale: <frameset rows="1*,3*" cols="3*,2*,1*">

·                  per ciò che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3

·                  per ciò che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1

 

Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame

<frame src="/prima.html">

Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi

individuare un frame in modo più preciso, assegnandogli un nome: id=”primoRiquadro” oppure per retro compatibilità

<frame id=”primoRiquadro” name=”primoRiquadro” src="/prima.html">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>HTML.it</title>
</head>
 <frameset rows="15%,70%,15%">
                <frame src="11.html">
                            <frameset cols="25%,50%,25%">
                            <frame src="/21.html">
                            <frame src="/22.html">
                            <frame src="/23.html">
</frameset>

  <frame src="/12.html">

 <noframes>
 <p>Qui può essere indicato il link a <a href="/senzaFrame.html"> una versione del sito</a> che non utilizzi un layout a frame</p>  </noframes>
</frameset>
</html>

Frameset annidati:

È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset

39 Attributi dei frames per la visualizzazione

Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la visualizzazione. Alcuni attributi tuttavia sono entrati nell’uso e sono correttamente supportati dai browser attuali

Attributi del frameset

<frameset frameborder="no" cols="25%,75%">

L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi.

L'esempio è qui

<frameset framespacing="20" border=”20” cols="25%,75%">

framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel

Per mantenere la compatibilità con Internet Explorer 4 (che non legge l’attributo border), di solito si specificano sia il framespacing, sia il border.
L'esempio è qui

<frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%">

bordercolor permette di specificare il colore dei bordi del frameset.
L'esempio è qui

 

Attributi dei frame

<frame src=”prima.html” scrolling=”no”>
<frame src=”prima.html” scrolling=”auto”>

L’attributo scrolling (di default impostato a “yes”) indica se si vuol consentire all’utente di poter scorrere il frame oppure no.

Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice, come si può vedere nell’esempio.
L'esempioè qui

scrolling può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario

<frame src=”prima.html” scrolling=”no”>
<frame src=”prima.html” scrolling=”no” noresize>

noresize impedisce al singolo frame di essere ridimensionato.
L'esempio è qui

Se usato in unione con scrolling=”no”,di fatto “blocca” il contenuto del frame.
L'esempio è qui

Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti

<frame src=”prima.html” frameborder=”0”>

frameborder conesente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes").

Se frameborder è impostato a “0” i bordi non sono visibili
L'esempio è qui

Attenzione però a come impostate i bordi nei vari frame, dal momento che i bordi di frame adiacenti non sempre vanno d’accordo(provate)

Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset>

<frame marginwidth="50" marginheight="50" src="/prima.html">

marginheight e marginwidth permettono di impostare la distanza erticale (marginheigth) e orizzontale (marginwidth) ra i bordi del frame e il suo contenuto.
L'esempio è qui

40 I link in un frameset e il tag noframes

con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno

<a href=”paginaDaLinkare.html” target=”nomeDelFrame”>

“parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite:

target=”_blank”

Apre il link in una nuova finestra, senza nome
L'esempio è qui

target=”_self”

Apre il link nel frame stesso (è così di default) L'esempio è qui

target=”_parent”

Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore)
L'esempioè qui

Il comportamento di “_parent” è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset, come nell’esempio: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link.

target=”_top”

Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame.
L'esempio è qui

(si noti la differenza con “_parent”).

Più esattamente il documento viene carictao nella parte piùalta ("top") della struttura, ed è questo il motivoper cui il frameset stesso viene annullato e sostituito dal contenutodel link.

il tag <base> che ci consente di specificare la destinazione dei tutti link in una sola volta. Il tag va inserito nella pagina contenente i link

<base target=”_blank”>

<base href=”http://www.html.it” target=”_blank”>              imposta un percorso predefinito di default

Questa sintassi indica che l’indirizzo di base per i percorsi della pagina è http://www.html.it e che tutti i link vanno aperti in una nuova pagina

Il tag noframes

41 L'iframe

è possibile creare un frame al volo grazie a questo tag

Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame>

<iframe src="http://pro.html.it" width="300" height="300">
  Contenuto alternativo per i browser che non leggono gli iframe.
</iframe>

43 Impaginare a livelli con i CSS

I Moduli (forms)

44 Struttura del tag form

Includere elementi multimediali e script

52 Premessa: il tag object

 




 



 






 





 



I tags MARQUEE

Il testo si sposta una sola volta e si ferma

<marquee align="middle" behavior="slide" direction="left" scrolldelay="5">Il vostro testo qui</marquee>

SCROLL VERSO SINISTRA

<marquee align="middle" behavior="slide" direction="right" scrolldelay="5">Il vostro testo qui</marquee>

SCROLL VERSO DESTRA

Scroll ripetuto all' infinito

<marquee align="middle" direction="right"scrolldelay="5">Il vostro testo qui</marquee>

SCROLL VERSO DESTRA

<marquee align="middle" direction="left"scrolldelay="5">Il vostro testo qui</marquee>

SCROLL VERSO SINISTRA

Movimento alternato destra e sinistra

<marquee align="top" behavior="alternate" scrolldelay="5">Il vostro testo qui</marquee>

SCROLL ALTERNATO

Marquee con Link

<font face="Comic Sans MS" size="4"><b><marquee height="30" scrollamount="5" scrolldelay="60" width="100%" style="font-family: Comic Sans MS; font-size: 10pt; color: #66FF66"><a target="top" href="http://www.webdesigns.it"> http://www.webdesigns.it</marquee></b></font></a>

http://www.webdesigns.it

Marquee all' interno di una tabella

<table border="1" cellpadding="2" width="100%" cellspacing="0"><tr><td align="center">
<marquee behavior="alternate" height="30" scrollamount="5" scrolldelay="100" width="100%">Il vostro testo qui </marquee></td></tr></table>

Il vostro testo qui

Scroll verso l' alto e verso il basso

<marquee align="middle" scrollamount="1" height="100" width="100%" direction="up"scrolldelay="1">Il vostro testo qui</marquee>

Il vostro testo qui                            scorre verso l’alto

<marquee align="middle" scrollamount="1" height="100" width="100%" direction="down"scrolldelay="1">Il vostro testo qui</marquee>

Il vostro testo qui                            scorre verso il basso

Testo con sfondo colorato

<marquee bgcolor="#99FFCC" width="100%">Il vostro testo qui</marquee>
<marquee bgcolor="#009933" width="100%" direction="right">Il vostro testo qui</marquee>
<marquee bgcolor="#99FFCC" width="50%">Il vostro testo qui</marquee>
<marquee bgcolor="#009933" width="50%" direction="right">Il vostro testo qui</marquee>

Nero/verde chiaro verso sinistra

Nero/verde scuro verso destra

Nero/verde chiaro verso sinistra rettangolo più corto

Nero/verde scuro verso destra rettangolo più corto

Scroll di immagine con Link

   

<marquee scrollamount="2" behavior="scroll"><a href="http://www.webdesigns.it"><img src="/vostraimmagine.gif" border="0" width="159" height="41"></a></marquee>

Cambiamo la velocità ( compresa tra 1 - 999 )

   

<marquee behavior="scroll" direction="left" scrollamount="1">Il vostro testo qui</marquee>

Il vostro testo qui                            lento

<marquee behavior="scroll" direction="left" scrollamount="3">Il vostro testo qui</marquee>

Scroll delle immagini verso l' alto o verso il basso
Provate a modificare i parametri scrollamount e scrolldelay per ottenere effetti personalizzati

   

<MARQUEE scrollamount=1 scrolldelay=1 direction="up" width="100%" height=100 align="middle"><img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>

verso l’alto

<MARQUEE scrollamount=1 scrolldelay=1 direction="down" width="100%" height=100 align="middle"><img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>

verso il basso

Scroll delle immagini verso destra o sinistra

<MARQUEE scrollamount=1 scrolldelay=1 direction=left width="100%" height=100 align="middle"><<img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>

verso sinistra

<MARQUEE scrollamount=1 scrolldelay=1 direction=right width="100%" height=100 align="middle"><img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>

verso destra

<table align="center" border="1" width="360" background="ciel2.jpg" height="300">
<tr>
<td>
<p><MARQUEE direction=UP width="400" height=300><img src="/Layer Balloons.gif" width="315" height="315" border="0"></MARQUEE></p>
</td>
</tr>
</table

<table align="center" border="1" width="400" background="ciel2.jpg" height="300">
<tr>
<td >
<p><MARQUEE direction=right width="400" height=120><img src="/pelican.gif" width="70" height="70" border="0"></MARQUEE></p>
</td>
</tr>
</table>



HTML in sintesi

Per visualizzare la cache    
Explorer: Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file
Mozilla: Modifica > Preferenze > Avanzate > Cache
visualizzare il codice HTML
E: Visualizza > HTML
M: Visualizza > Codice Sorgente
impostare la cache del vostro browser in modo che il file html venga ricaricato ogni volta che richiamate la pagina
E: Strumenti > Opzioni Internet > Generale > Impostazioni >
Ricerca versioni più recenti delle pagine memorizzate
all'apertura della pagina   M: Modifica > Preferenze > Avanzate > Cache >
visualizzare l'estensione del file
Strumenti > Opzioni cartella > Visualizzazione  togliere la spunta da: "Nascondi le estensioni dei file per i tipi di file conosciuti" "Come cartella corrente"

5 Struttura di un tag
<TAG attributi>contenuto</TAG>
<P align="right">testo</P>
<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>
struttura di un attributo è: attributo="valore"
Alcuni particolari tag non hanno contenuto - questi tag non hanno neanche chiusura
<TAG attributi>
<IMG widht="20" height="20" src="/miaImmagine.gif" alt="alt">
indicano la posizione di alcuni elementi come il tag delle immagini
Questo tipo di tag viene detto "empty", cioè "vuoto"

Testa (<head>)
Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera
Corpo (<body>)
Qui è racchiuso il contenuto vero e proprio del documento

10 Gli elementi HTML e i fogli di stile CSS
Elementi di blocco
Sono sostanzialmente gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo, come i paragrafi, le tabelle, le form
Elementi "inline"
Sono gli elementi che - non andando a capo - possono essere integrati nel testo, come i collegamenti o le immagini
Liste
Lista numerate, o non numerate


11 Impostare il colore di sfondo

<body bgcolor="blue">










assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco

13 Eliminare i margini delle pagine
<body leftmargin="0" topmargin="0">
14 Impostare la lingua italiana.
Questo attributo non è solo una proprietà del tag body, ma può essere riferito alla maggior parte dei tag HTML che vedremo (come paragrafi, blocchi, tabelle, eccetera)
<body lang="it">
16 Impostare il colore del testo e dei link per tutta la pagina
<body text="red">
<body bgcolor="#0000ff" text="#ffffff">
Status i link testuali hanno diversi stati
Codifica in HTML 4.01
Descrizione
Collegamento normale
link
Normalmente il link quando si trova "a riposo" viene evidenziato in qualche maniera all'interno della pagina HTML, in modo che sia facile per l'utente individuarlo. Nell'HTML tradizionale il link è sempre sottolineato (è possibile eliminare la sottolineatura soltanto usando i CSS). Di default i link sono blu (#0000FF).
Collegamento visitato
visited
Un link è visitato, quando l'URL della pagina compare nella cronologia dell'utente. Di default i link visitati sono di color violetto (più esattamente: #800080).
Collegamento attivo
active
Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all'altra.
Con Internet Explorer è possibile vedere anche una linea tratteggiata attorno al collegamento attivo.
Un ulteriore condizione in cui un link si rileva "attivo" è quando si utilizza il tasto destro del mouse su di lui. Insomma un link è attivo quando "ha il focus".
Collegamento al passaggio del mouse
assente
Con l'HTML 4.01 al passaggio del mouse sul link si può fare ben poco, coi fogli di stile invece è possibile creare qualche effetto di visualizzazione, utilizzando la parola chiave hover" nei CSS)
per cambiare colore ai link(di default blu)
<body link="red">
Per cambiare colore ai link visitati (di default viola):
<body vlink="green">
Per cambiare colore ai link attivi:
<body alink="yellow">
La sintassi completa:
<body link="red" alink="yellow" vlink="green">

Abbiamo dunque tre stati canonici dei link (link a riposo, link attivo e link visitato) e una condizione aggiuntiva introdotta dai fogli di stile (status del link al passaggio del mouse):

17 tag-contenitori

I titoli: h1, h2, ..., h6
risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé
<h1>titolo 1 </h1>
<h2>titolo 2 </h2>
<h3>titolo 3 </h3>
<h4>titolo 4 </h4>
<h5>titolo 5 </h5>
<h6>titolo 6 </h6>
Il paragrafo <p>
<p>paragrafo 1</p>
Il paragrafo è l'unità di base entro cui suddividere un testo.
Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura
Il <div>
<div>Blocco di testo 1</div>
<div>Blocco di testo 2</div>
Il blocco di testo va a capo, ma - a differenza del paragrafo - non lascia spazi prima e dopo la sua apertura
Lo <span>
due <span>
<span>contenitore 1</span><span>contenitore 2</span>
elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include
Se non viene associato ad uno stile risulta praticamente invisibile

<p> lascia spazio prima e dopo la propria chiusura
<div> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo
<span> - essendo un elemento inline - non va a capo

Allineamento
Sintassi
Visualizzazione codice HTML
Testo allineato a sinistra
<p align="left">testo</p>
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
Testo allineato a destra
<p align="right">testo</p>
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
Testo giustificato
<p align="justify">testo</p>
Nel mezzo del cammin di nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita


Per andare a capo all'interno di un paragrafo possiamo utilizzare il tag
<br />
per saltare una riga ne occorrono due:     
<br /><br />
per tracciare una linea orizzontale
<hr noshade size="5" width="50%" align="center" />
<hr />
Noshade
Size
Width

align
evita di sfumare la linea
indica l'altezza in pixel
è la larghezza in pixel o in percentuale
l'allineamento




18 Scegliere lo stile (grassetto, corsivo & C.)
vengono definiti come fisici quei tag che definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag
vengono definiti come logici quei tag che forniscono anche informazioni sul ruolo svolto dal contenuto del tag, e in base a questo adottano uno stile grafico

I principali stili fisici sono:

Codice HTML
Visualizzazione
Descrizione
<b>testo in grassetto</b>
Questo <b>testo</b> è in grassetto
Questo testo è in grassetto
Formatta il testo in grassetto
Il tag b è deprecato dal W3C
indicare una parola in "grassetto" cioè evidenziata - ma solo graficamente! - rispetto al resto del testo
<strong>      </strong>

Formatta il testo in grassetto
strong trasmette al lettore (ma anche ai motori di ricerca) un’importanza significativa rispetto al resto del contenuto testuale
<i>testo in corsivo</i>
Questo <i>testo</i> è in corsivo
Questo testo è in corsivo
Formatta il testo in corsivo. Tuttavia bisogna evitare di evidenziare in corsivo dei blocchi di lunghezza considerevole, perché la leggibilità del corsivo nel web lascia a desiderare
<pre>testo preformattato</pre>
<pre>
PHP_FUNCTION
{
   zval **parameters;
   zval *value;
   char* str;
</pre>
PHP_FUNCTION
{
   zval **parameters;
   zval *value;
   char* str;

Il motore di rendering del browser restituisce il testo così come è stato inserito nel file html dall’autore stesso (preformattato quindi), senza riformattarlo.
È un tag che si usa soprattutto nella rappresentazione di codice di programmazione.
<u>testo sottolineato</u>
Questo <u>testo</u> è sottolineato
Questo testo è sottolineato
Sottolinea il testo presente nel tag.
Nel web le sottolineature del testo sono da evitare, per non confondere il lettore con i link
<strike>testo barrato</strike>
Questo <strike>testo</strike> è barrato
Questo testo è barrato
Con il testo barrato, vengono indicate (ad esempio) le correzioni
<sup>testo in apice</sup
E=mc<sup>2</sup>
E=mc2
"Superscript": indica al browser di portare il testo al di sopra della linea di scrittura. Utile per formule matematiche (ad esempio le potenze)
<sub>testo in pedice</sub>
H<sub>2</sub>O
H2O
"Subscript": indica al browser di portare il testo al di sotto della linea di scrittura (utile ad esempio per i simboli chimici)

Gli stili logici        vedi lezione 18

19 Scegliere il font del testo
Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times".
si preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana", l’"Arial" o l’"Helvetica"

Per scegliere il tipo di carattere con cui un font deve essere visualizzato
<font face="Arial">testo in Arial</font>
testo in Arial
<font face="Verdana">testo in Verdana</font>
testo in Verdana
<font face="Geneva">testo in Geneva</font>
testo in Geneva

esempi di famiglie "sicure" di caratteri:
<font face="Verdana, Arial, Helvetica, sans-serif">Verdana e caratteri simili</font>
Verdana e caratteri simili
<font face="Arial, Helvetica, sans-serif">Arial e caratteri simili</font>
Arial e caratteri simili
<font face="Times New Roman, Times, serif">Times e caratteri simili</font>
Times e caratteri simili
<font face="Courier New, Courier, mono">Curier e caratteri simili</font>
Curier e caratteri simili
<font face="Georgia, Times New Roman, Times, serif">Georgia e caratteri simili </font>
Georgia e caratteri simili
<font face="Geneva, Arial, Helvetica, sans-serif">Geneva e caratteri simili</font>
Geneva e caratteri simili





20 Scegliere il colore del testo

<font face="Verdana, Arial, Helvetica, sans-serif" color="blue">
testo blu in Verdana<br>
<font color="red">
testo rosso
</font>
</font>

testo blu in Verdana
testo rosso
o meglio ancora:
testo blu in Verdana
testo rosso










Le dimensioni del testo
l’attributo "size" del tag font
valori interi da 1 a 7
valori relativi alla dimensione di base del tag font (di default "3")
Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza del <font> utilizzando i segni "+" e "-".
<font size="+2">
Testo di grandezza +2 rispetto al font di base (3).<br>
Cioè font di grandezza 5.
</font>
La grandezza del font di base può anche esser cambiata
<basefont size="1">


È importante evitare di cadere nell’errore di pensare che la dimensione relativa faccia riferimento al precedente tag font. La dimensione relativa fa sempre riferimento alla dimensione del font di base

in realtà la grandezza del carattere dipende dalle impostazioni del browser dell’utente


21 Gli elenchi nell'HTML
Gli elenchi ordinati
Il tag che individua l'elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l'inclusione di un nuovo elenco all'interno di un elenco preesistente: in questo caso non viene lasciato spazio, néprima, né dopo.

Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell'attributo type.
<ol type="a">
  <li>primo elemento
  <li>secondo elemento
  <li>terzo elemento
</ol>




















Gli elenchi non ordinati

<ul>
  <li>primo elemento
  <li>secondo elemento
  <li>terzo elemento
</ul>

















Liste di definizione
Gli liste di definizione sono individuati dal tag <dl>. Gli elementi dell'elenco (a differenza delle liste ordinate, e delle liste non ordinate) questa volta sono formati da due parti:
Tag
Descrizione
<dt>
definition term: indica il termine da definire. A differenza dell'elemento <li> in questo caso non c'è rientro
<dd>
definition description: è la definizione vera e propria del termine. In genere questo elemento è reso con un rientro


Codice

Resa
<p>Ecco i principali tag per delimitare il testo:</p>

<dl>
  <dt>&lt;p&gt;</dt>
  <dd>individua l'apertura di un
      nuovo paragrafo</dd>

  <dt>&lt;div&gt;</dt>
  <dd>individua l'apertura di un
      nuovo blocco di testo</dd>

  <dt>&lt;span&gt;</dt>
  <dd>individua l'apertura di un
      elemento inline, cui attribuire
      una formattazione atraverso
      gli stili</dd>
</dl>
ci sono poi altri tag che...



<dl>
  <dt><p></dt>
  <dd>individua l’apertura di un
      nuovo paragrafo</dd>

<dt><div></dt>
  <dd>individua l’apertura di un
      nuovo blocco di testo</dd>

<dt><span></dt>
  <dd>individua l’apertura di un
      elemento inline, cui attribuire
      una formattazione atraverso
      gli stili</dd>
</dl>
ci sono poi altri tag che…
Ecco i principali tag per delimitare il testo:



    <p>
individua l'apertura di un nuovo paragrafo


<div>
individua l'apertura di un nuovo blocco di testo


<span>
individua l'apertura di un elemento inline, cui attribuire una formattazione atraverso gli stili
ci sono poi altri tag che...

l'attributo type è deprecato dal W3C


22 I link e l'ipertestualità

<a href="http://www.html.it/">HTML.IT</a>.













Percorsi relativi
I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento.

Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file
<a href="/paginaDaLinkare.html">collegamento alla pagina</a>
Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file
Secondo la formula:
cartella/nomeFile.html
<a href="/prima/interna/interna.html">Visita la pagina interna</a>
Per tornare su di un livello, è sufficiente utilizzare la notazione:
../nomeFile.html
../altraCartella/nuovoFile.html
Per tornare su di due livelli
<a href="/../../index.html">Visita la pagina interna</a>


<a href="/css/index.html"> è un altro modo di esprimere i percorsi assoluti all’interno del proprio sito (basta che non siano in locale)

all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa
al posto di http://www.html.it/css/index.html    si può scrivere    http://www.html.it/css/

Consigli per i nomi dei file
è consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un "trattino basso" (cioè "_"). Ad esempio: mio_file.html
maiuscole e minuscole possono fare la differenza (in ambiente Unix spesso la fanno), quindi controllate il modo in cui avete scritto i file

riferimento (assoluto) al vostro stesso computer  <a href="file:///C|percorsonomeFile.html">testo</A> in rete non funziona

24 I link interni o ancore

è possibile far riferimento all’àncora presente all’interno del documento attraverso un link che punti ad essa:
<a href="#primo">vai al primo paragrafo</a>
il cancelletto indica che il collegamento deve cercare un àncora chiamata "primo" all’interno della pagina stessa

Se non si specifica il nome dell’àncora a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina
<a href="#">link vuoto</a>
Es.:
<a name=”parte2”></a>
<a href="/doc_y.htm#parte2">parola</a>
parte2 è la destinazione del salto all’interno del documento y parola è la parte sottolineata


Per creare un indice interno alla pagina si procede dunque in due fasi distinte:
creazione dell’ancora a cui puntare (<a name="mioNome">)
creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto (<a href="#mioNome">)


25 Gli attributi dei link

Target
specifica in quale finestra la pagina linkata deve essere aperta
è possibile specificare che la pagina sia aperta in una nuova finestra:
<a target="_blank" href="http://www.html.it">visita HTML.IT</a>
Title serve per specificare un testo esplicativo per l'elemento a cui l'attributo è riferito (il title si può infatti utilizzare anche per elementi differenti dalle ancore)
L'attributo title è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto
<a title="in HTML.it puoi trovare risorse per webmaster"
    href="http://www.html.it/" target="_blank" >
    Visita HTML.it
</a>

Hreflang si indica la lingua del documento - migliora l'accessibilità del sito - utile per i motori di ricerca
<a href="http://www.w3c.org/" hreflang="eng" target="_blank">World Wide Web Consortium</a>
Accesskey scorciatoie "da tastiera"

<a href="http://www.html.it/" accesskey="h" target="_blank" >Torna all'home page di HTML.it</a>
digitando "ALT + h + invio" con Internet Explorer oppure "h + invio" con Mozilla si accede direttamente all'home page di HTML.it

Colorare i link
colorare alcuni link della pagina in modo diverso. Per farlo è sufficiente annidare il tag <font> all'interno del link
<a href="http://www.html.it/" target="_blank" ><font color="red" size="2" face="Verdana, Arial, Helvetica, sans-serif">Torna all'home page di HTML.it</font></a>
per colorare i link utilizzare i fogli di stile

Il tag <base>
Se vogliamo far riferimento a un differente percorso per tutti i percorsi relativi, possiamo farlo specificandolo grazie al tag <base>, che va incluso nella head del documento
<base href="http://www.mioSitoWeb.com/miaCartella">


26 Inserire le immagini

GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone
JPG: è l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica
PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser).

<img src="http://html.it/guide/img/guida_html/miaImmagine.gif">
Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.
è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine
Alt L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto

<img src="/logo.gif" alt="HTML.it" width="224" height="69">
longdesc (long description) permette di specificare un file con una spiegazione estesa dell’immagine
<img src="/logo.gif" alt="HTML.it" longdesc=“descrizione.html“ width="224" height="69">
dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate in modo da fornirne una spiegazione esauriente in ogni contesto
È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine
img src="/logo.gif" border="3" width="224" height="69">
i link lasciano sempre di default un bordo di un pixel attorno all’immagine


<a href=http://www.html.it target="_blank">
<img src="/logo.gif" width="224" height="69">
</a>
Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0”
<a href=http://www.html.it target="_blank">
<img src="/logo.gif" border="0" width="224" height="69">
</a>



27 Disporre le immagini in un contesto
Esempio di immagine nel testo     <p>testo… <img src="/logo.gif" width="224" height="69" border="0"> testo… </p>

immagine allineata a sinistra    <p><img src="/logo.gif" width="224"height="69"border="1"align="left"> testo…<p>
immagine allineata a destra    <p> <img src="/logo.gif" width="224" height="69" border="1" align="right"> testo… </p>

 impostiamo uno spazio orizzontale da ambo i lati
<img src="/logo.gif" width="224" height="69" hspace="20">

spazio è verticale
<img src="/logo.gif" width="224" height="69" vspace="20">

specificare il nome dell'immagine (serve in JavaScript per scambio immagini)
<img src=”miaImmagine.gif” name="logo">




28 Le mappe di immagine
le mappe lato client
le mappe lato server (non più utilizzate)

Le mappe lato-client
<img src=”miaImmagine.gif” usemap=”nomeMappa”>
 A questo punto non ci resta che creare la mappa:

<map name=”nomeMappa”>
…
</map>

All’interno del tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti. Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamoc reare

In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo (ed eventualmente il longdesc)

<img alt="Esempio di immagine con mappe" src="/italia.gif" width="220" height="235" border="1" usemap="#regioni">
<map name="regioni" id="regioni">
<area shape="rect" coords="14, 24, 35, 37" href="http://www.regione.vda.it/" target="_blank" alt="Valle d'Aosta">
<area shape="circle" coords="45, 156, 29" href="http://www.regione.sardegna.it/" target="_blank" alt="Sardegna">
<area shape="poly" coords="105, 199, …, 98, 205" href="http://www.regione.sicilia.it/" target="_blank" alt="Sicilia">
</map>
il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0

Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull'area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi
onFocus='this.blur()'
<area shape="circle" coords="45, 156, 29" href="http://www.regione.sardegna.it/" target="_blank" alt="Sardegna" onFocus=?this.blur()?>


TABELLE
30 Tabella: struttura di base

L’attributo border permette di specificare di quanti pixel deve essere il bordo delle tabelle
<table border=”2”>

Possiamo specificare la larghezza e l'altezza delle tabelle tramite gli attributi width e height che possono essere riferiti a tutti e tre i tag (<table>, <tr>, <td>). Il valore di questi attributi può essere specificato con una larghezza fissa (in pixel: in questo caso basta indicare un numero intero), oppure in percentuale (il numero deve essere allora seguito dal simbolo “%”): in questo caso la tabella si adatta secondo lo spazio a disposizione

la larghezza e l’altezza globali della tabella sono espresse nel tag <table>, mentre la larghezza delle varie celle viene espressa nei <td> della prima riga. L’altezza in percentuale non sempre è visualizzata correttamente da tutti i browser
l’eventuale larghezza specificata nelle celle della prima riga avrà effetto dunque anche sulle celle delle righe sottostanti
Viceversa non è possibile variare arbitrariamente le dimensioni delle celle: le misure specificate nelle righe sottostanti non avranno infatti effetto
Le dimensioni espresse non devono tuttavia essere in contraddizione ma mano che si procede verso l’interno della tabella: in un caso simile infatti “vincerebbe” il valore specificato nel tag genitore
la visualizzazione dei layout con indicazioni non corrette è a discrezione del browser


31 Creare gruppi di righe: <caption>, <thead>, <tfoot>, <tbody>


















32 Raggruppare gli stili delle colonne    <colgroup>
non è ben interpretato da Mozilla

L’attributo align può essere riferito sia a <tr>, sia a <td> e serve per definire l’allineamento dei contenuti a sinistra, a destra o al centro (left, right, center)
L’attributo bgcolor può essere riferito tanto a <table>, <tr>, o <td> e – come abbiamo visto a proposito del <body> - consente di impostare un colore di sfondo

Il tag <colgroup> - la cui chiusura è facoltativa - va posto subito dopo il tag <caption> e prima di <thead>, e consente di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella.
Con l’attributo span (da non confondere con il tag <span>) possiamo impostare il numero di colonne che fanno parte del gruppo

Se si preferisce attribuire più esplicitamente lo stile ad una colonna si può usare il tag <col> (che non necessita chiusura) all’interno di <colgroup>


33 Raggruppare celle con rowspan e colspan
In realtà è possibile raggruppare le celle all'interno delle colonne in modo da avere ad esempio una riga da 2 colonne e un’altra da 3. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne).

Tramite l’attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga


34 Annidare tabelle
È anche possibile annidare le tabelle le une dentro le altre
Per evitare che compaiano nel layout degli spazi indesiderati è consigliabile aprire e chiudere la tabella a ridosso del tag della cella che la contiene


35 Attributi del tag table
La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata – ha effetto su tutti i lati della cella
è possibile modificare l’aspetto dei bordi esterni della tabella (tramite l’attributo frames) e delle righe fra le celle (tramite l’attributo rules).

esempio
spiegazione
<table border="1" frame="above">
(nelle pagine di esempio qui a fianco le righe interne tra le celle sono state azzerate per facilitare la comprensione, dunque ci troveremo nella situazione in cui rules="none")
Il bordo della tabella è presente:
void: in nessun lato. È il valore di default
above: solo nel lato superiore
below: solo nel lato inferiore
hsides: solo nei lati superiore e inferiore
vsides: solo a sinistra e a destra
lhs: solo nel lato sinistro (left-hand side)
rhs:solo nel lato destro (right hand side).
box: in tutti e quattro i lati
border: in tutti e quattro i lati
<table border="1" rules="rows">
(nelle pagine di esempio qui a fianco i bordi esterni della tabella sono stati azzerati per facilitare la comprensione, dunque ci troveremo nella situazione in cui frame="void")
Le righe interne alle celle sono presenti:
none: da nessuna parte. È il valore di default
groups: le righe separano i gruppi (siano essi gruppi di righe: <thead>, <tfoot>, <tbody> - o gruppi di colonne: <colgroup>)
rows:le righe separano i vari <tr>
cols:le righe separano le colonne
all:le righe separano tanto i <tr>, quanto le colonne


36 Attributi di <table>, <tr>, <td>
Dimensioni: attributi width e height

Lo sfondo: sfondo bgcolor    immagine background

L’allineamento: align
riferito al tag <table>

<table align=”left”> sposta la tabella a sinistra (default)
<table align=”right”> sposta la tabella a destra
Se riferito a <tr> o a <td>
è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra
valign è utile per l’allineamento verticale delle celle
<td height=”100” valign=”middle”>
contenuto
</td>
top (alto)
middle (in mezzo – è il valore di default)
bottom (in basso)
baseline (alla linea di base)

Colori dei bordi    bordercolor, bordercolorlight, bordercolordark    visualizzati correttamente soltanto da Internet Explorer

quando una cella non viene riempita con un qualsiasi elemento non tutti i browser visualizzeranno i bordi allo stesso modo
è opportuno riempire sempre le celle con qualcosa, sia pure un &nbsp; (è la notazione per indicare un “non-breaking space”, cioè uno "spazio che non va a capo"), o un <br>. Attenzione che questi caratteri speciali prendono le dimensioni del tag <font> all’interno di cui sono contenuti.
Con Netscape 4 per ottenere la visualizzazione desiderata è spesso necessario introdurre una gif trasparente di 1 pixel x 1 pixel (detta “shim”) come sfondo della cella


Per individuare facilmente i gruppi di righe
<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe (“row group”).
il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>

Un’altra particolarità è che le celle all’interno del tag <thead> possono essere indicate con <th> (“table header”), al posto del consueto <td> (“table data”), in questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato



37 Impaginare un layout con le tabelle



38 Comporre una pagina in frame
Per prima cosa creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare
cambia il doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">
scompare il tag <body>    al suo posto troviamo il tag <frameset>

<frameset>
Esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT" "http://www.w3.org/TR/html4/frameset.dtd">

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>HTML.it</title>
</head>

<frameset rows="50%,50%" cols="50%, 50%">
 <frame src="/prima.html">
 <frame src="/seconda.html">
 <frame src="/terza.html">
 <frame src="/quarta.html">
 
 <noframes>
  <p>Qui può essere indicato il link a
   <a href="/senzaFrame.html"> una versione del sito</a>
   che non utilizzi un layout a frame
  </p>
 </noframes>

</frameset>
</html>
Rows permette di specificare il numero e la grandezza delle righe, nel caso in cui venga omesso, significa che ci troviamo di fronte a una struttura a colonne
<frameset cols="33%, 33%,*">

Cols permette di specificare il numero e la grandezza delle colonne e, nel caso in cui venga omesso significa che ci troviamo di fronte una struttura a righe
<frameset rows="33%, 33%,*">


possiamo poi lasciare che una o più righe si auto-dimensionino, occupando tutto lo spazio che rimane, in questo caso utilizzeremo l’asterisco (“wild card”);

dimensione fissa
Questa sintassi crea un frameset di 2 righe con 3 colonne ciascuna, per un totale di 6 riquadri:
<frameset rows="150,*" cols="100,200,*">
L’altezza della 1a riga è di 150 pixel, mentre la seconda si adatta al resto della pagina. Le tre colonne sono larghe rispettivamente: 100 pixel, 200 pixel, e la terza colonna si adatta al resto della pagina
percentuale
Questa sintassi crea un frameset che si adatta alla risoluzione. La grandezza dei riquadri è espressa in percentuale:
<frameset rows="20%,80%" cols="25%,25%,50%">
come si può vedere la prima riga occupa il 20% dell’altezza, la seconda il rimanente 80%.
Le 3 colonne si dividono la larghezza: la prima colonna occupa il 25%, la seconda nuovamente il 25%, la terza il 50% dello spazio
proporzionale
In questo caso la ripartizione è proporzionale: <frameset rows="1*,3*" cols="3*,2*,1*">
per ciò che riguarda le righe: l’altezza viene suddivisa in 4 parti (1+3); la prima riga ne occupa 1 parte e la seconda riga ne occupa 3
per ciò che riguarda le colonne: l’altezza viene suddivisa in 6 parti (3+2+1); la prima colonna occupa 3 parti, la seconda riga ne occupa 2 e la terza 1



Una volta creata la nostra griglia con il tag <frameset>, incrociando le righe e le colonne, dobbiamo specificare dove si trova il file di origine di ciascun frame
<frame src="/prima.html">
Se le dimensioni del riquadro non sono sufficienti a mostrare il documento nella sua interezza, il frame avrà delle barre di scorrimento, a meno che non sia stato esplicitamente specificato il contrario negli attributi

individuare un frame in modo più preciso, assegnandogli un nome: id=”primoRiquadro” oppure per retro compatibilità
<frame id=”primoRiquadro” name=”primoRiquadro” src="/prima.html">

Frameset annidati:
È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag <frame> è sufficiente includere le indicazioni del nuovo frameset















39 Attributi dei frames per la visualizzazione
Il tag frameset non ha (secondo le specifiche ufficiali) attributi per la visualizzazione. Alcuni attributi tuttavia sono entrati nell’uso e sono correttamente supportati dai browser attuali
Attributi del frameset
<frameset frameborder="no" cols="25%,75%">
L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi.
L'esempio è qui
<frameset framespacing="20" border=”20” cols="25%,75%">
framespacing funziona solo con Internet Explorer e permette di impostare lo spazio tra un frame e l’altro. Di fatto equivale all’attributo border, che permette di specificare lo spessore dei bordi in pixel
Per mantenere la compatibilità con Internet Explorer 4 (che non legge l’attributo border), di solito si specificano sia il framespacing, sia il border.
L'esempio è qui
<frameset border="10" framespacing="10" bordercolor=”#FF0000” cols="25%,75%">
bordercolor permette di specificare il colore dei bordi del frameset.
L'esempio è qui

Attributi dei frame
<frame src=”prima.html” scrolling=”no”>
<frame src=”prima.html” scrolling=”auto”>
L’attributo scrolling (di default impostato a “yes”) indica se si vuol consentire all’utente di poter scorrere il frame oppure no.
Nel caso sia impostato a “no”, il frame non ha la barra di scorrimento anche nel caso in cui il contenuto della pagina HTML vado oltre la cornice, come si può vedere nell’esempio.
L'esempioè qui
scrolling può anche essere impostato ad “auto”. In questo caso la barra di scorrimento compare in automatico, ma solo se necessario
<frame src=”prima.html” scrolling=”no”>
<frame src=”prima.html” scrolling=”no” noresize>
noresize impedisce al singolo frame di essere ridimensionato.
L'esempio è qui
Se usato in unione con scrolling=”no”,di fatto “blocca” il contenuto del frame.
L'esempio è qui
Un uso maldestro di questa tecnica potrebbe però impedire all'utente la corretta visualizzazione dei contenuti
<frame src=”prima.html” frameborder=”0”>
frameborder conesente di far apparire o meno i bordi del frame (i valori ammessi sono "0" e "1", ovvero "no" e "yes").
Se frameborder è impostato a “0” i bordi non sono visibili
L'esempio è qui
Attenzione però a come impostate i bordi nei vari frame, dal momento che i bordi di frame adiacenti non sempre vanno d’accordo(provate)
Questo attributo permette di specificare un valore differente da quello impostato nel frameborder del <frameset>
<frame marginwidth="50" marginheight="50" src="/prima.html">
marginheight e marginwidth permettono di impostare la distanza erticale (marginheigth) e orizzontale (marginwidth) ra i bordi del frame e il suo contenuto.
L'esempio è qui


40 I link in un frameset e il tag noframes
con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno
<a href=”paginaDaLinkare.html” target=”nomeDelFrame”>

“parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite:

target=”_blank”
Apre il link in una nuova finestra, senza nome
L'esempio è qui
target=”_self”
Apre il link nel frame stesso (è così di default) L'esempio è qui
target=”_parent”
Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore)
L'esempioè qui
Il comportamento di “_parent” è particolarmente evidente in una struttura annidata in cui alcune pagine HTML contengono a loro volta dei frameset, come nell’esempio: in questo caso viene caricato il contenuto del link nel frameset immediatamente precedente alla pagina del link.
target=”_top”
Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame.
L'esempio è qui
(si noti la differenza con “_parent”).
Più esattamente il documento viene carictao nella parte piùalta ("top") della struttura, ed è questo il motivoper cui il frameset stesso viene annullato e sostituito dal contenutodel link.


il tag <base> che ci consente di specificare la destinazione dei tutti link in una sola volta. Il tag va inserito nella pagina contenente i link
<base target=”_blank”>
<base href=”http://www.html.it” target=”_blank”>    imposta un percorso predefinito di default
Questa sintassi indica che l’indirizzo di base per i percorsi della pagina è http://www.html.it e che tutti i link vanno aperti in una nuova pagina

Il tag noframes



41 L'iframe
è possibile creare un frame al volo grazie a questo tag
Possiamo specificare la larghezza e l’altezza del tag, mentre gli attributi di visualizzazione sono gli stessi del tag <frame>
<iframe src="http://pro.html.it" width="300" height="300">
  Contenuto alternativo per i browser che non leggono gli iframe.
</iframe>


43 Impaginare a livelli con i CSS


I Moduli (forms)
44 Struttura del tag form

Includere elementi multimediali e script
52 Premessa: il tag object





















I tags MARQUEE

Il testo si sposta una sola volta e si ferma

<marquee align="middle" behavior="slide" direction="left" scrolldelay="5">Il vostro testo qui</marquee>
SCROLL VERSO SINISTRA
<marquee align="middle" behavior="slide" direction="right" scrolldelay="5">Il vostro testo qui</marquee>
SCROLL VERSO DESTRA
Scroll ripetuto all' infinito

<marquee align="middle" direction="right"scrolldelay="5">Il vostro testo qui</marquee>
SCROLL VERSO DESTRA
<marquee align="middle" direction="left"scrolldelay="5">Il vostro testo qui</marquee>
SCROLL VERSO SINISTRA
Movimento alternato destra e sinistra

<marquee align="top" behavior="alternate" scrolldelay="5">Il vostro testo qui</marquee>
SCROLL ALTERNATO
Marquee con Link

<font face="Comic Sans MS" size="4"><b><marquee height="30" scrollamount="5" scrolldelay="60" width="100%" style="font-family: Comic Sans MS; font-size: 10pt; color: #66FF66"><a target="top" href="http://www.webdesigns.it"> http://www.webdesigns.it</marquee></b></font></a>
http://www.webdesigns.it
Marquee all' interno di una tabella

<table border="1" cellpadding="2" width="100%" cellspacing="0"><tr><td align="center">
<marquee behavior="alternate" height="30" scrollamount="5" scrolldelay="100" width="100%">Il vostro testo qui </marquee></td></tr></table>

Scroll verso l' alto e verso il basso

<marquee align="middle" scrollamount="1" height="100" width="100%" direction="up"scrolldelay="1">Il vostro testo qui</marquee>
Il vostro testo qui        scorre verso l’alto
<marquee align="middle" scrollamount="1" height="100" width="100%" direction="down"scrolldelay="1">Il vostro testo qui</marquee>
Il vostro testo qui        scorre verso il basso
Testo con sfondo colorato

<marquee bgcolor="#99FFCC" width="100%">Il vostro testo qui</marquee>
<marquee bgcolor="#009933" width="100%" direction="right">Il vostro testo qui</marquee>
<marquee bgcolor="#99FFCC" width="50%">Il vostro testo qui</marquee>
<marquee bgcolor="#009933" width="50%" direction="right">Il vostro testo qui</marquee>
Nero/verde chiaro verso sinistra
Nero/verde scuro verso destra
Nero/verde chiaro verso sinistra rettangolo più corto
Nero/verde scuro verso destra rettangolo più corto

Scroll di immagine con Link
<marquee scrollamount="2" behavior="scroll"><a href="http://www.webdesigns.it"><img src="/vostraimmagine.gif" border="0" width="159" height="41"></a></marquee>

Cambiamo la velocità ( compresa tra 1 - 999 )
<marquee behavior="scroll" direction="left" scrollamount="1">Il vostro testo qui</marquee>
Il vostro testo qui        lento
<marquee behavior="scroll" direction="left" scrollamount="3">Il vostro testo qui</marquee>

Scroll delle immagini verso l' alto o verso il basso
Provate a modificare i parametri scrollamount e scrolldelay per ottenere effetti personalizzati
<MARQUEE scrollamount=1 scrolldelay=1 direction="up" width="100%" height=100 align="middle"><img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>
verso l’alto
<MARQUEE scrollamount=1 scrolldelay=1 direction="down" width="100%" height=100 align="middle"><img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>
verso il basso
Scroll delle immagini verso destra o sinistra

<MARQUEE scrollamount=1 scrolldelay=1 direction=left width="100%" height=100 align="middle"><<img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>
verso sinistra
<MARQUEE scrollamount=1 scrolldelay=1 direction=right width="100%" height=100 align="middle"><img src="/vostraimmagine.gif" width="95" height="99" border="0"></MARQUEE>
verso destra


<table align="center" border="1" width="360" background="ciel2.jpg" height="300">
<tr>
<td>
<p><MARQUEE direction=UP width="400" height=300><img src="/Layer Balloons.gif" width="315" height="315" border="0"></MARQUEE></p>
</td>
</tr>
</table
<table align="center" border="1" width="400" background="ciel2.jpg" height="300">
<tr>
<td >
<p><MARQUEE direction=right width="400" height=120><img src="/pelican.gif" width="70" height="70" border="0"></MARQUEE></p>
</td>
</tr>
</table>

Codice

Resa

Testo che precede la lista
<ol>
 <li>primo elemento</li>
 <li>secondo elemento</li>
 <li>terzo elemento</li>
</ol>
Testo che segue la lista

Testo che precede la lista

  1. primo elemento

  2. secondo elemento

  3. terzo elemento

Testo che segue la lista

 

Valore dell'attributo type

Descrizione

Codice

Resa

type="disc"
(è così di default)

visualizza un "pallino" pieno.
È la visualizzazione di default

<ul type="disc">
  <li>primo</li>
  <li>secondo</li>
  <li>terzo</li>
</ul>

  • primo

  • secondo

  • terzo

type="circle"

visualizza un cerchio vuoto al proprio interno

<ul type="circle">
  <li>primo</li>
  <li>secondo</li>
  <li>terzo</li>
</ul>

  • primo

  • secondo

  • terzo

type="square"

Visualizza un quadrato pieno al proprio interno

<ul type="square">
  <li>primo
  <li>secondo
  <li>terzo
</ul>

  • primo

  • secondo

  • terzo

 

  • primo

  • secondo

  • terzo