Corso HTML e CSS (Lezione 11)

Impariamo a costruire un sito Web

Lezione 11: I tag del <body> : Tag di programmazione e frames

Nel gruppo dei tag di programmazione includiamo:

<script> Definisce uno script
<noscript> E’ usato per fornire un contenuto alternativo per gli utenti che hanno gli script disabilitati.
<object> Definisce un’oggetto inserito entro una pagina html (ad esempio audio, video, flash ecc.)
<param /> Definisce un parametro per un oggetto.

Nel gruppo dei tag relativi ai frames invece sono inclusi:

<frame /> Definisce un frame (una finestra) all’interno di un frameset.
<frameset> Definisce un insieme di frames.
<noframes> E’ usato per fornire un contenuto alternativo per gli utenti il cui browser non supporta i frames.
<iframe> Usato per inserire un altro documento all’interno del documento html.

Nel primo gruppo sono inclusi quei tag che racchiudono scripts (generalmente javascript) e in generale codice di programmazione che viene eseguito lato client. Vediamoli in dettaglio:

1) <script> … </script>

Tra questi tag, come detto, andrà inserito il codice dello script.

Vediamo gli attributi che il tag <script> può avere:

Attributo Valore Descrizione Obblig./Facolt.
type MIME-type Specifica il tipo di script. Obbligatorio
charset charset Specifica la codifica utilizzata nello script esterno. Facoltativo
defer defer Specifica che lo script dovrà essere eseguito quando il parsing della pagina è terminato cioè quando tutta la pagina è stata visualizzata dal browser. Facoltativo
src URL E’ l’URL del file esterno con lo script. Facoltativo
xml:space preserve Specifica se gli spazi bianchi nel codice debbano essere preservati. Facoltativo

Questo tag non può avere alcuno degli attributi standard descritti nelle lezioni precedenti.

L’attributo type come scritto nella tabella, è obbligatorio, perché dice al browser di che tipo di script si tratta. Nell’esempio che segue potete vedere come viene usato. L’attributo src con relativo URL è facoltativo perché lo script può essere interamente riportato all’interno dei tag <script> e </script>, ma ovviamente se si trova in un altro file diventa obbligatorio fare riferimento a questo file.

Vediamo un esempio:

<script type="text/javascript">
   location.replace("http://www.weweb.in");
</script>

Con questo semplicissimo script otteniamo un redirect verso la home page di WeWeb. Se la riga di script fosse scritta in un file esterno (ad es. “redirect.js”) il richiamo avverrebbe così:

<script type="text/javascript" src="redirect.js"></script>

2) <noscript> … </noscript>

Questo tag va usato per fornire un contenuto alternativo per gli utenti che hanno gli script disabilitati
Gli attributi da usare con questo tag sono solo quelli standard:

Attributo Valore Descrizione Obblig./Facolt.
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
dir rtl
ltr
Specifica la direzione del testo (ltr o rtl) Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
lang language_code Specifica un codice linguaggio per il testo associato all’immagine. Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
title testo Titolo dato all’immagine che comparirà quando si porterà il mouse sull’immagine stessa. Facoltativo
xml:lang language_code Specifica un codice linguaggio per il testo associato all’immagine in un documento XHTML. Facoltativo

Vediamo un esempio che pensiamo sia autoesplicativo:

<script type="text/javascript">
   location.replace("http://www.weweb.in");
</script>
<noscript>Il tuo browser non supporta JavaScript!</noscript>

 

3) <object> … </object>
<param /> 

Il tag <object> va usato per definire un’oggetto inserito entro una pagina html (ad esempio audio, video, flash ecc.).

In questo modo è possibile anche inserire all’interno della pagina altro codice html.

Gli attributi sono:

Attributo Valore Descrizione Obblig./Facolt.
align top
bottom
middle
left
right
Deprecated. Non usare
URL Specifica una lista di URL ad archivi che si riferiscono all’oggetto. Gli URL sono separati da uno spazio. Obbligatorio
border pixels Deprecated. Non usare
classid class_ID Definisce il clsid come definito nel registro di Windows per l’oggetto da incorporare. Facoltativo
codebase URL Dice dove trovare il codice per l’oggetto. Facoltativo
codetype MIME_type Specifica il MIME_type a cui si riferisce il clsid Obbligatorio
data URL Specifica l’URL della risorsa usata dall’oggetto Obbligatorio
declare declare Specifica che l’oggetto deve solo essere dichiarato e non creato. Facoltativo
height pixels Altezza in pixels dell’oggetto. Facoltativo
hspace pixels Deprecated. Non usare
name name Specifica il nome dell’oggetto. Facoltativo
standby text Definisce un testo da mostrare quando si sta caricando l’oggetto (es. Loading…). Obbligatorio
type MIME_type Specifica il MIME_type dell’oggetto specificato dall’attributo data. Obbligatorio
usemap #mapname Specifica il nome di un’immagine lato client da usarsi insieme all’oggetto. Facoltativo
vspace pixels Deprecated. Non usare
width pixels Larghezza in pixels dell’oggetto. Facoltativo

Inoltre può anche avere gli attributi standard, già più volte visti incluso tabindex.

Il tag <param /> come detto definisce un parametro per un oggetto incorporato nella pagina html.

I parametri dipendono dall’oggetto che si deve incorporare.  Gli attributi di param sono:

Attributo Valore Descrizione Obblig./Facolt.
name nome Specifica il nome del parametro. Obbligatorio
type MIME_type Specifica il MIME_type del parametro dell’oggetto. Facoltativo
value testo Specifica il valore di un elemento di input. Facoltativo
valuetype data
ref
object
Specifica il tipo del valore. Facoltativo
id id Specifica un id univoco per l’elemento. Facoltativo

Come esempio vediamo i parametri che si possono usare quando si incorpora un viseo flash. In questo caso il parametro “movie” è obbligatorio ed indica l’URL del file swf (es. <param name=”movie” value=”miovideo.swf” />); altri parametri sono:

  • play – Valori: true, false. Se omesso il filmato parte subito.
  • loop – Valori: true, false. Default: true. Il filmato viene eseguito all’infinito.
  • menu – Valori: true, false. Rende disponibili i controlli del video se true.
  • quality – Valori: low, autolow, autohigh, medium, high, best. Qualità del video.
  • scale – Valori: showall, noborder, exactfit, noscale. Specifica come il filmato debba essere presentato nella finestra.
    • showall (default): mantiene l’aspetto originale senza distorsioni
    • noborder: scala il file SWF per riempire tutta l’area. Se occorre vengono tagliate alcune parti.
    • Exactfit: l’intero file verrà contenuto nell’area di display, nel caso con distorsioni..
    • Noscale: vengono mantenute le dimensioni originali. Possibile taglio delle parti esterne del video.
  • salign – Possibili valori: l, t, r, tl, tr.
  • wmode – Valori: window, direct, opaque, transparent, gpu. Ima Window Mode property:
    • window – Il filmato èmostrato in una finestra.
    • direct – Il filmato è inviato direttamente allo schermo. Consigliato.
    • opaque – Nasconde il background.
    • transparent – Lo sfondo del filmato è trasparente.
    • gpu – Usa accelerazione hardware su alcuni devices.
  • bgcolor – [hexadecimal RGB value] nel formato #RRGGBB.
  • base – [base directory] o [URL]. Specifica l’ URL base usato per risolvere tutti i path relativi.
  • allowFullScreen – Valori: true or false.
  • fullScreenAspectRatio – Valori: portrait or landscape.
  • flashvars – Coppie nome=valore separate da &

Vediamo un esempio:

	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1240" height="700" id="CP_flash-object">
		<param name="movie" value="portesaintlouis.swf" />
		<param name="quality" value="high" />
		<param name="scale" value="default" />
		<param name="wmode" value="direct" />
		<param name="swfliveconnect" value="true" />
		<!--[if !IE]>-->
		<object type="application/x-shockwave-flash" data="portesaintlouis.swf" width="1240" height="700">
			<param name="quality" value="best" />
			<param name="scale" value="default" />
			<param name="wmode" value="direct" />
			<param name="swfliveconnect" value="true" />
		</object>
		<!--<![endif]-->
	</object>

Due parole di commento:

  • Lo statement  <!–[if !IE]>–> viene inserito per la diversa sintassi da usare per IE e per gli altri browsers. Per ora fidatevi. Tenete conto che la parte inclusa tra questo statement e <!–<![endif]–> è quella che sarà usata dai browsers diversi da Internet Explorer.
  • Il <param name=”swfliveconnect” value=”true” /> è un parametro che non abbiamo visto nella lista sopra riportata, ma viene raccomandato da Adobe per i browser basati su Nescape.
  • Il risultato sarà:

Volendo potete scaricare il file swf da qui.

Vediamo ora i tag dei frames ricordando però che possono essere usati solo nel DTD frameset, tranne iframe che può essere usato anche nel document type transitional.

4) <frameset> … </frameset>
<frame />
<noframes> … </noframes>

Il tag  frame definisce una finestra all’interno di un frameset (insieme di frames).

Gli attributi che <frameset> può avere sono:

Attributo Valore Descrizione Obblig./Facolt.
cols pixels
%
*
Specifica numero e grandezza delle colonne del frameset. Facoltativo
rows pixels
%
*
Specifica numero e grandezza delle righe del frameset. Facoltativo

e tra gli attributi standard solamente:

Attributo Valore Descrizione Obblig./Facolt.
class classname Attribuisce uno stile abbinando una classe. Vedremo successivamente con i CSS Facoltativo
id id Specifica un id univoco per l’elemento. Vedremo successivamente con i CSS Facoltativo
style elemento di stile Attribuisce un elemento di stile senza far ricorso ad un foglio CSS. Vedremo successivamente. Facoltativo
title testo Specifica informazioni aggiuntive relative all’elemento. Facoltativo

Gli attributi di <frame> sono invece:

Attributo Valore Descrizione Obblig./Facolt.
frameborder 0
1
Specifica se ci deve essere un bordo attorno al frame. 1 = Yes Facoltativo
longdesc URL Collegamento ad una pagina che contiene una descrizione estesa del contenuto del frame. Facoltativo
marginheight pixels Specifica i margini top e bottom del frame Facoltativo
marginwidth pixels Specifica i margini sinistro e destro del frame Facoltativo
name nome Nome del frame. Facoltativo
noresize noresize Specifica che il frame non può essere ridimensionato Facoltativo
scrolling yes
no
auto
Specifica se aggiungere una scrollbar. Facoltativo
src URL Collegamento al contenuto da mostrare nel frame. Facoltativo

Inoltre frame può avere gli attributi standard visti per frameset.

<noframes>, analogamente a quanto visto per <noscript>, viene usato per un testo alternativo per i browsers che non supportano i frames. Può avere gli stessi attributi standard visti per noscript.

Un esempio di uso dei frames è il seguente:

<frameset cols="25%,50%,25%">
  <frame src="primo_frame.htm" />
  <frame src="secondo_frame.htm" />
  <frame src="terzo_frame.htm" />
  <noframes><body>Il tuo browser non supporta i frames</body>
  </noframes>
</frameset>

Ricordiamo ancora che non possono essere usati né con il DTD Traditional né con il DTD Strict.

 

5) <iframe> … </iframe>

<iframe> è usato per definire un frame inline cioè un documento incorporato nel documento corrente. A differenza di frame può essere usato nei documenti di tipo Traditional, ma non Strict.

Gli attributi possibili sono:

Attributo Valore Descrizione Obblig./Facolt.
frameborder 0
1
Specifica se ci deve essere un bordo attorno all’ iframe. 1 = Yes Facoltativo
longdesc URL Collegamento ad una pagina che contiene una descrizione estesa del contenuto dell’ iframe. Facoltativo
marginheight pixels Specifica i margini top e bottom dell’ iframe Facoltativo
marginwidth pixels Specifica i margini sinistro e destro dell’ iframe Facoltativo
name nome Nome dell’ iframe. Facoltativo
height noresize Altezza dell’iframe Facoltativo
width noresize Larghezzadell’iframe Facoltativo
scrolling yes
no
auto
Specifica se aggiungere una scrollbar. Facoltativo
src URL Collegamento al contenuto da mostrare nell’ iframe. Facoltativo

Inoltre iframe può avere gli attributi standard visti per frame e per frameset.

Un classico esempio di iframe è il codice per inserire il likebox di Facebook:

<iframe src=”//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.weweb.in&amp;send=false&amp;layout=standard&amp;width=250&amp;
show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;
appId=xxxxxxxxxxxxxxx” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;
width:250px; height:35px;” allowTransparency=”true”></iframe>

Verrà mostrato il box:

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.