 |  | |
|
| | |
|
| |
Per iniziare a scrivere pagine web avete bisogno di:
Aprite
una pagina con il blocco note, e salvate il file in qualche cartella del vostro
computer. Il file dovrà avere estensione "html", ad esempio miaPagina.html.
Fino a qualche tempo fa si era soliti attribuire ai file l'estensione htm, ma questo avveniva perché il dos e poi
Windows 3.1 non erano in grado di gestire i file con nomi di grandezza
superiore a 8 caratteri ed estensione superiore alle 3 lettere. Dunque .html era diventato .htm, così come .jpeg
era diventato .jpg.
Il problema delle estensioni è stato ampiamente superato sin dai tempi di
Windows 95, e di conseguenza oggi il webmaster può decidere se attribuire ai
files estensione .html o .htm. Siccome stiamo parlando di linguaggio HTML,
personalmente preferisco l'estensione .html, ma è una questione di gusti
(HTML.it, ad esempio, continua con il vecchio metodo).
Se avete dato alla pagina l'estensione .html o .htm, il browser dovrebbe essere
in grado di aprire il file in automatico cliccandoci su due volte. Per
modificare la pagina utilizzate i comandi Visualizza > HTML, cambiate
il codice, salvate, utilizzate il pulsante "aggiorna" del browser. e
dovreste visualizzare le modifiche.
Se invece il file non è associato al browser, ma continua ad apparire come
documento di testo, evidentemente questo avviene perché l'estensione non è
.html, ma .html.txt, alcuni sistemi
operativi hanno infatti la cattiva abitudine di nascondere l'estensione dei
file (con il pretesto di rendere più usabile il sistema operativo stesso).
Per visualizzare l'estensione del file in sistemi Windows andate in una
cartella e quindi:
Strumenti > Opzioni cartella > Visualizzazione
E poi togliere la spunta da:
"Nascondi le estensioni dei file per i tipi di file conosciuti"
infine premere il pulsante:
"Come cartella corrente"
Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
<TAG attributi>contenuto</TAG>
Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:
<P align="right">testo</P>
dall'esempio
è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>
Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:
<TAG attributi>
Ecco un esempio di immagine:
<IMG widht="20" height="20" SRC="miaImmagine.gif" ALT="alt">come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".
Una
caratteristica importante del codice HTML è che i tag possono essere annidati
l'uno dentro l'altro. Anzi molto spesso è necessario farlo.
Ad esempio:
Potremmo quindi avere ad esempio:
<P align="right">L'annidamento
ci permette quindi di attribuire formattazioni successive al testo che stiamo
inserendo.
Come si può vedere già nell'esempio, è una buona norma utilizzare dei caratteri
di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare
il testo ogni volta che ci troviamo in presenza di un annidamento e man mano
che entriamo più in profondità nel documento.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre
il contenuto viene spostato verso destra di un tab: non si tratta soltanto di
un fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto
anche se scorriamo in verticale il documento con il cursore.
Questa procedura si chiama indentazione, e grazie ad essa il codice HTML
risulta più leggibile. Si confronti ad esempio:
con
<P align="right">per il browser i due esempi sono equivalenti, ma per l'utente umano è evidente che la differenza è notevole: pensate ad una pagina complessa visualizzata in un unico blocco di testo: sarebbe del tutto illeggibile!
Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:
<!-- questo è un commento -->
e ci permette di "commentare" i vari punti della pagina. Ad esempio:
<!-- menu di sinistra -->
<!-- barra in alto -->
<!-- eccetera -->
|
L'HTML è "case unsensitive", cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo. <P ALIGN="RIGHT"> e <p align="right"> vengono
letti allo stesso modo dal browser. <P align="right"> Tuttavia
oggi, per analogia con l'XHTML (che è figlio
dell'XML e dell'HTML ed è "case sensitive", sensibile al
formato) è consigliabile scrivere tutto in minuscolo, per abituarsi già al
linguaggio che verrà. Maiuscolo e minuscolo, in ogni caso non costituiscono
errore. | ||
|
Struttura della pagina |
||
|
|
|
Basandoci
sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina
html. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> esamineremo
ulteriormente questa riga nell'appendice, per ora lasciamola così. <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> <html> Un documento HTML è normalmente diviso in due sezioni:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese). <title>Nome del sito</title> Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina | Guida HTML | HTML.it"). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo. Da quanto abbiamo detto la nostra prima pagina sarà questa, che è consultabile anche nell'esempio allegato: <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente. |
|
Gli elementi HTML e i fogli di stile |
|
|
|
Un altro concetto importante è che gli elementi vengono classificati nella trattazione a fogli di stile secondo tre tipologie:
La guida che state leggendo, senza entrare minuziosamente in questa classificazione, ne tiene conto, in modo da rendere più agevole il passaggio da una formattazione inserita nel codice HTML, a una formattazione che utilizzi i fogli di stile. Infatti, man mano che comincerete a costruire siti web, sentirete l'esigenza di passare a una formattazione avanzata. Le due cose tuttavia non vanno sentite in contrapposizione: i fogli di stile sono semmai un arricchimento e un'espansione del codice HTML, viceversa non è possibile apprendere i fogli di stile senza conoscere il codice HTML. ApprofondimentiNella lezione della guida CSS dedicata alla Classificazione degli elementi viene approfondito l'argomento da noi trattato. |
|
Incominciamo a vedere come ottenere la nostra prima pagina HTML nel modo in cui desideriamo visualizzarla. Se vogliamo impostare un colore di sfondo è necessario impostare il relativo attributo del tag body. Così: <body bgcolor="blue"> bgcolor sta per "background color", cioè "colore di sfondo". Molti colori sono disponibili utilizzando le corrispondenti parole chiave in inglese. Qui potete trovare un esempio della pagina con lo sfondo blu Tuttavia non è consigliabile inserire la notazione del colore facendo riferimento a questo tipo di sintassi, dal momento che non possiamo sapere esattamente a quale tonalità di colore corrisponda il blu del computer dell'utente. È preferibile in molti casi utilizzare la corrispondente codifica esadecimale del colore, che ci permette - tra le altre cose - di scegliere anche tonalità di colore non standard. Con la notazione esadecimale il nostro esempio diventa: <body bgcolor="#0000FF"> Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):
Il numero di colori che l'utente ha a disposizione dipende dalla scheda video. Oggi si va da una risoluzione minima di 256 colori a una risoluzione che prevede svariati milioni di colori. Per capire di cosa stiamo parlando, provate a visualizzare questa pagina cambiando il numero di colori visualizzati sul monitor. Per fare ciò, in Windows, andate in: Pannello di controllo > Schermo > Impostazioni e cambiate il numero dei colori, applicate i cambiameni e tornate a visualizzare la pagina. Come si vede la visualizzazione della tonalità di colore è sensibilmente diversa passando da 256 a 65.536 colori (16 bit). Poiché non c'è modo di sapere quale scheda video abbia l'utente (o come l'abbia impostata), i webdesigner per molto tempo hanno fatto riferimento alla "palette sicura" dei 256 colori che sicuramente l'utente è in grado di visualizzare. Si tratta della cosiddetta palette web safe. C'è però da dire che oramai la stragrande maggioranza dei computer è impostata per visualizzare almeno migliaia di colori, dunque l'utilizzo della palette "web safe" non è più così strettamente necessaria (lo era nei primi anni del web). |
Per inserire un'immagine come sfondo è sufficiente utilizzare la seguente sintassi:
<body background="imgSfondo.gif">
Per ora presupponiamo che l'immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, vedremo in seguito (quando parleremo delle immagini) come inserire immagini che si trovano in altre cartelle.
L'immagine di sfondo verrà ripetuta in orizzontale e in verticale.
È anche possibile combinare i due attributi, in modo che mentre l'immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina:
<body bgcolor="#0000ff" background="imgSfondo.gif">
Ecco subito un esempio di pagina impostata con lo sfondo.
È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#FFFFFF"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l'utente ha impostato nella finestra del sistema operativo: quindi se l'utente ha impostato uno sfondo nero 232b16c e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera.
Se usate Windows, per fare una prova provate a impostare diversamente il tema delle finestre. Dal pannello di controllo: Schermo > Aspetto > Combinazione e poi scegliere:
"nero 232b16c a contrasto elevato", oppure "prugna".
Infine visualizzate questa pagina - che è senza sfondo - e vedrete che la pagina HTML prenderà la colorazione che avete impostato nel tema delle finestre.
|
Eliminare i margini delle pagine |
|
|
|
Abbiamo detto all'inizio che il lavoro del webmaster consiste non soltanto nel conoscere alla perfezione il linguaggio HTML, ma soprattutto nell'essere un esperto del modo in cui i browser visualizzano le pagine. Negli esempi precedenti avrete notate che il browser - secondo l'impostazione predefinita - lascia un po' di margine tra la pagina e il bordo della finestra. Questo in alcune situazioni (ad esempio se volete disporre un logo in alto a sinistra) può dare fastidio. Per eliminare il bordo è sufficiente inserire i seguenti attributi del body: <body leftmargin="0" topmargin="0"> Questa sintassi funziona correttamente con ogni browser moderno (Internet Explorer, Netscape 6 o superiore, Mozilla, Opera), come è possibile vedere nell'esempio. Tuttavia è bene sapere che i browser nel corso degli anni hanno introdotto dei tag e degli attributi "proprietari", con lo scopo di ottenere determinati effetti di visualizzazione, o indicare in qualche modo particolare il contenuto. Questa situazione capitava soprattutto nei primi anni del web, quando Microsoft e Netscape lottavano per il predominio del mercato: in qualche misura la guerra dei browser è stata anche guerra di tag proprietari, con gravi difficoltà per gli sviluppatori che si trovavano continuamente di fronte a pagine che non venivano visualizzate allo stesso modo. Per questo motivo fino a qualche anno fa per togliere il margine con Netscape 4.x dovevate inserire: <body marginleft="0" margintop="0"> Mentre per togliere il margine con Internet Explorer: <body leftmargin="0" topmargin="0"> Se avrete a che fare con pagine web di altri webmaster vi capiterà spesso di incontrare questo genere di sintassi: <body leftmargin="0" topmargin="0" marginleft="0" margintop="0"> Questa sintassi serviva per eliminare il margine sia con Netscape 4.x, sia con Internet Explorer, specificando tutti e quattro gli attributi. Al giorno d'oggi potete invece limitarvi a scrivere: <body leftmargin="0" topmargin="0"> Fortunatamente negli ultimi anni l'ottica della guerra dei browser è cambiata, e i produttori di software sono passati dalla competizione per chi implementa nuove e fantastiche funzionalità proprietarie, al tentativo di rilasciare browser che aderiscano al meglio agli standard del W3C (non è un caso che sia la Netscape, sia la Microsoft facciano parte del consorzio), senza perdere di vista la velocità nell'effettuare il rendering della pagina. L'adesione agli standard non può che essere un bene, dal momento che potenzialmente significa per noi sviluppatori la stesura di codice "universale", che funzioni correttamente a prescindere dal browser e dalla piattaforma (speriamo). |
|
Impostare la lingua del documento |
|
|
|
Tramite l'attributo "lang" è possibile specificare ai motori di ricerca e al browser dell'utente quale lingua stiamo utilizzando. La sintassi per la lingua italiana è: <body lang="it"> 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). È importante sottolineare che questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua, ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata. Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua (e poi di doverli inserire nei motori di ricerca). Ecco il codice che esemplifica gli argomenti appresi finora in questa lezione, visualizzabile anche in questa pagina: <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> |
|
Approfondimenti: lo sfondo con i CSS |
|
|
|
Tutti gli attributi del body che abbiamo visto finora (da eccezione dell'attributo "lang") sono caratteristiche che riguardano il layout della nostra pagina HTML. Come si può vedere, con una sintassi di questo genere: <body
leftmargin="0" topmargin="0"
background="imgs/sfondo00006.gif" bgcolor="#66CCFF"
lang="it"> il layout e il contenuto sono mischiati tra loro. Gli attributi "background" e "bgcolor" sono addirittura deprecati nelle specifiche del W3C: significa che andranno perduti. In un approccio di impaginazione che utilizzi i fogli di stile, l'aspetto che riguarda la visualizzazione deve essere separato dal contenuto. Il nostro body si ridurrà quindi a qualcosa di minimale, come: <body lang="it"> mentre le regole che indicano come visualizzare lo sfondo saranno visualizzate in una locazione separata del documento. Le regole su come impostare lo sfondo con i CSS vengono spiegate dettagliatamente nella relativa lezione della guida ai CSS. I fogli di Stile sono estremamente potenti, e dando un'occhiata al link che ho segnalato poco sopra si può leggere che è anche possibile fissare lo sfondo in modo che non si ripeta: <body style="background-image: url(sfondo.gif); background-repeat: repeat;"> si tratta di una sintassi che funziona bene persino con Netscape 4.x, come si può vedere nella pagina di esempio. Oppure è possibile "fissare lo sfondo" in modo da potervi fare scorrere sopra il contenuto della pagina. La sintassi è la seguente: <body style="background-image: url(sfondo.gif); background-attachment:fixed;"> come si può vedere anche nell'esempio. |
|
Impostare il colore del testo e dei link per tutta la pagina |
|
|
Il testoSe non impostate nessun colore per il testo, di default il testo di una pagina è nero 232b16c . Tuttavia il nero 232b16c non sempre è leggibile con tutti i colori di sfondo. Immaginate ad esempio di volere utilizzare come sfondo il colore nero 232b16c : con una pagina nera e testo nero 232b16c non leggeremmo nulla! Abbiamo allora la possibilità di assegnare un colore per il testo di tutta la pagina, semplicemente utilizzando questo attributo del tag body: <body text="red"> Quindi potremo avere, ad esempio: <body bgcolor="#0000ff" text="#ffffff"> come nell'esempio consultabile in questa pagina. I linkNon c'è bisogno di spiegare che cosa siano i link: l'esperienza della navigazione nel web ci ha infatti insegnato che il link è un collegamento, un ponte tra una pagina è l'altra. Non tutti però sanno che i link testuali hanno diversi stati:
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): Anche il colore dei link di tutta la pagina può essere tramite gli attributi del body: I link secondo le impostazioni predefinite sono blu, per cambiare colore: <body link="red"> Per cambiare colore ai link visitati (di default viola): <body vlink="green"> i link visitati vengono memorizzate nella cronologia del browser, quindi se volete ripristinare il colore originario dei link, è sufficiente cancellare la cronologia. Per cambiare colore ai link attivi: <body alink="yellow"> La sintassi completa per impostare i link è quindi: <body link="red" alink="yellow" vlink="green"> |
|
Titoli, paragrafi, blocchi di testo e contenitori |
|
|
|
Nulla ci vieta di scrivere direttamente all'interno del tag body, come già abbiamo visto negli esempi precedenti, senza utilizzare nessun tag. A dire la verità è però più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo. La nostra pagina risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere la formattazione che desideriamo. Come abbiamo detto dall'inzio, i tag sono infatti dei marcatori che ci permettono di mantenere ordine nella pagina e ottenere il layout che desideriamo. I principali tag-contenitori da utilizzare per "racchiudere" il testo sono:
Le differenze tra <P>, <DIV> e <SPAN> sono quindi che: <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 Un esempio dovrebbe chiarire il tutto. Per quel che riguarda il tag heading (<h1>, ., </h6>) è da notare che la grandezza del carattere varia a seconda delle impostazioni che l'utente ha sul proprio computer. Con Internet Explorer, ad esempio, basta andare in: Visualizza > Carattere Per vedere il titolo crescere o decrescere. Allineare il testoTutti i "tag-contenitori" che abbiamo appena visto (e molti altri tag di quelli che vedremo) permettono di allineare il testo utilizzando semplicemente l'attributo align. Se avete seguito finora la presente guida, avrete anche indovinato che l'attributo "align" è disapprovato dal W3C, dal momento che per allineare il testo bisognerebbe invece utilizzare i fogli di stile. In ogni caso, vediamo come potremmo ad esempio allineare il testo di un paragrafo:
Andare a capo Per andare a capo molti webmaster utilizzando l'apertura arbitraria di paragrafi che non contengono nulla e che vengono lasciati aperti. Ad esempio: <p> <p> <p> Si tratta in buona sostanza di un errore, visto che per andare a capo esiste il tag <br> ("break", cioè "interruzione"). Per andare a capo è quindi sufficiente scrivere un <br>. Per saltare una riga ne occorrono due: <br><br> Un altro valido tag per dividere la pagina in parti è il tag <hr> ("horizontal rule"), che serve per tracciare una linea orizzontale. Ecco il tag in azione: Questo tag ha anche alcuni attributi (deprecati, perché la formattazione andrebbe fatta con i CSS): L'attributo "noshade" evita di sfumare la linea, "size" indica l'altezza in pixel, "width" è la larghezza in pixel o in percentuale, "align" l'allineamento. Con Internet Explorer si riesce persino a impostare il colore: <hr noshade size="5" width="50%" align="center" color="red"> Risultato: |
|
Scegliere lo stile (grassetto, corsivo & C.) |
|
|
|
Nella grafica cartacea con "stile di un testo" si intende la variante del "tondo", del "corsivo", o del "grassetto" di un carattere tipografico. Nel parlare di stili del testo in HTML solitamente si suddividono i tag in grado di attribuire lo stile al testo in stili fisici e stili logici: 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 Gli stili fisiciI principali stili fisici sono:
Di fatto i tag <b> e <i> sono molto utilizzati, perché consentono di cambiare lo stile del testo al volo. Gli stili logici Come abbiamo visto gli stili logici forniscono anche informazioni sul contenuto e la loro formattazione è spesso lasciata al browser con risultati a volte deludenti. Proprio per questo gli stili logici sono entrati in disuso e sono poco usati. Riportiamo di eseguito i principali stili logici, per completezza, ma non sarà necessario ricordarseli.
Approfondimenti Come si può vedere molti tag (logici e fisici) tradiscono l'origine scientifica e informatica del Web (sono presenti tag per blocchi di codice di programmazione, per definizioni, per l'indicazione delle variabili.). Sorprendentemente nessuno dei tag fisici o logici è stato dichiarato "deprecato" dal W3C, ma anzi tutti questi tag sono passati dall'HTML 3.2 originario fino all'XHTML (passando illesi attraverso l'HTML 4). Per quel che riguarda i tag fisici: a rigor di logica lo stile "grassetto" dovrebbe essere ottenuto con i fogli di stile (così come tutte le formattazioni), ma evidentemente la possibilità di ottenere un testo in grassetto semplicemente scrivendo "<b>testo</b>" è troppo comoda per poter essere considerata obsoleta. Per quel che riguarda i tag logici: in realtà questo tipo di tag offrono un ulteriore aiuto al webmaster anche in un approccio a fogli di stile. Se infatti si ha l'accortezza di ridefinire i tag all'interno della definizione degli stili, si hanno molte occasioni di utilizzare una formattazione mirate a seconda della funzione del contenuto: in quest'ottica, il fatto che alcuni tag logici non restituiscano nessun rendering particolare è addirittura un invito a ri-definire lo stile del tag. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Scegliere il font del testo |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
La presente lezione tratta la scelta del colore, delle dimensioni e del tipo di carattere del testo attraverso l'utilizzo del tag "font". Si tratta di un argomento obsoleto, perché la formattazione del testo in tutti i siti moderni viene attribuita attraverso i fogli di stile. L'utilizzo del tag <font> inoltre è disapprovato dal W3C, e dunque sta cadendo in disuso. In ogni caso si tratta di un argomento che un buon webmaster non può ignorare: come già detto per studiare i fogli di stile ci sarà tempo, e comunque è un passo che viene dopo la conoscenza dell'HTML. Il tipo di carattere (cioè il "font") che il browser visualizza di default è il "Times". Purtroppo questo carattere (ottimo per la carta stampata) non è adatto a essere visualizzato sul monitor di un computer: è una questione di "grazie" (le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire per rendere più leggibile il carattere). Dal momento che i caratteri con grazie non ottengono il risultato voluto sul monitor (quello cioè di rendere le lettere maggiormente riconoscibili e di conseguenza il testo più leggibile), ma anzi ottengono l'effetto contrario, si preferisce di solito utilizzare dei caratteri senza grazie come il "Verdana", l'"Arial" o l'"Helvetica" (si veda l'articolo I font e la tipografia del testo). Per scegliere il tipo di carattere con cui un font deve essere visualizzato è sufficiente usare la sintassi:
Tuttavia è bene sottolineare da subito che non è possibile far sì che l'utente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dell'arte l'utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo sistema: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri. Se ad esempio scarichiamo da https://font.html.it il carattere Hackers, lo scompattiamo e lo inseriamo nella cartella dei caratteri, saremo poi in grado di visualizzare sul nostro computer il testo in Hackers. Ma quando metteremo il nostro sito nel web gli utenti visualizzeranno un semplicissimo Times. Come nell'esempio sotto indicato:
Per questo motivo è bene tener conto di due accorgimenti: scegliere caratteri "sicuri" , che siano cioè senz'altro presenti sul pc dell'utente non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell'utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato "Times") Vediamo alcuni esempi di famiglie "sicure" di caratteri:
È vero: l'impossibilità di scegliere i caratteri che preferiamo limita terribilmente le nostre possibilità espressive, ma il bello di sviluppare per il web è proprio accettare di creare con delle regole ben definite, e a volte anche molto vincolanti. Per i titoli delle pagine, i menu, e quant'altro potremmo poi sempre utilizzare delle immagini con il nostro carattere tipografico preferito (ad esempio delle "gif"). | |||||||||||||||
|
Scegliere il colore del testo |
|||||||||||||||
|
|
|
Adesso che abbiamo scelto il carattere con cui scrivere il nostro testo possiamo scegliere il colore, con la sintassi:
La scelta del colore può essere effettuata nello stesso momento in cui si sceglie il tipo di carattere (dal momento che "face" e "color" sono entrambi attributi del tag "font"). La sintassi è:
Una volta scelto il colore possiamo sempre decidere di cambiarlo:
La seconda sintassi è preferibile alla precedente, perché la scelta del tipo di carattere viene effettuata una sola volta, evitando così di scrivere del codice inutile. Da notare che per evitare la ripetizione i due tag sono annidati l'uno dentro l'altro. Le dimensioni del testoLe dimensioni del testo si attribuisco mediante l'attributo "size" del tag font. Ci sono due modi per dare attribuire le dimensioni al testo tramite il tag <font>: valori interi da 1 a 7 valori relativi alla dimensione di base del tag font (di default "3") Nel caso dei valori interi, ecco la scala di grandezza:
Nel caso dei valori relativi alla dimensione di base è possibile "spostarsi" nella scala di grandezza del <font> utilizzando i segni "+" e "-". Abbiamo detto che la grandezza del font di base di default nel browser è 3. Dunque se utilizziamo un size="+2", vuol dire che la dimensione del font deve essere di 2 misure più grande della dimensione del font di base, quindi avremo un font di grandezza 5. Vediamo l'esempio:
Come si può vedere le due sintassi sono equivalenti. La grandezza del font di base può anche esser cambiata: <basefont size="1"> Come si può vedere nella pagina esemplificativa. È 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:
Anche se non è corretto farlo, Internet Explorer consente di utilizzare il tag <basefont> per impostare in una sola volta il tipo di carattere del testo e il suo colore, come si può vedere nell'esempio. Tuttavia questo tipo di trucco non funziona correttamente né con Mozilla (e quindi neanche con Netscape 6 o superiore, dal momento che eredita il motore di rendering di Mozilla), né con Opera. NOTA BENEQuando state utilizzando il tag <font> - sia che utilizziate il size i valori interi, sia che utilizziate le i valori relativi al tag di base -, in realtà la grandezza del carattere dipende dalle impostazioni del browser dell'utente (come già abbiamo visto per i tag "heading"). Con Internet Explorer ad esempio andando in: Visualizza > Carattere. Se cambiate le dimensioni del carattere, vedrete cambiare le dimensioni dei font. Questo appunto per le grandezze da 1 a 7 sono grandezze anch'esse relative. Questa caratteristica da un lato è positiva (permette di ingrandire testi piccoli), dall'altra può risultare molto fastidiosa per il webmaster. L'unico modo per fissare il carattere è (ancora una volta) quello di utilizzare i fogli di stile, esprimendo le dimensioni in pixel. |
|
Gli elenchi nell'HTML |
|
|
|
Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le "liste", che sono sostanzialmente di tre tipi:
Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell'elenco. La sintassi ha quindi questa forma: <elenco><elemento>nome del primo elemento <elemento>nome del secondo elemento </elenco> come si può
vedere, il tag che individua l'elemento della lista non ha bisogno di
chiusura (la sua chiusura, in questo caso, è opzionale). Gli elenchi ordinatiGli elenchi
ordinati sono contraddistinti dall'enumerazione degli elementi che compongono
la lista. Avremo quindi una serie progressiva ordinata e individuata da
lettere o numeri (se utilizzate un programma di videoscrittura, siete
abituati a chiamarli elenchi numerati).
<li>primo elemento <li>secondo elemento <li>terzo elemento </ol> Gli stili consentiti sono:
Gli elenchi non ordinatiGli elenchi non ordinati sono individuati dal tag <ul> ("unordered list"), e gli elementi dell'elenco sono contraddistinti anch'essi dal tag <li> (in buona sostanza si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati): <ul><li>primo elemento <li>secondo elemento <li>terzo elemento </ul> il tipo di segno grafico
utilizzato per individuare gli elementi dell'elenco di default dipende dal
browser, ma di solito è un "pallino pieno". È possibile comunque
scegliere un altro tipo di segno:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Vediamo un esempio:
|
Ovviamente la scelta del tipo di elenco attraverso l'attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c'è anche la possibilità di scegliere un'immagine (ad esempio una GIF) come segno distintivo per l'elenco puntato. Chi fosse interessato ad approfondire può consultare la relativa lezione della guida ai fogli di stile.
|
I link e l'ipertestualità |
|
|
|
Una delle caratteristiche che ha fatto la fortuna del web è l'essere costituito non da testi ma da ipertesti (un'altra delle caratteristiche che hanno fatto grande il web è senz'altro la possibilità di interagire, ma questo è un altro discorso). I link sono "il ponte" che consente di passare da un testo all'altro. In quanto tali, i link sono formati da due componenti:
Link che puntano ad altri documentiEcco la sintassi per creare un link con riferimento a un sito web: Le risorse per webmaster sono su <a href="https://www.html.it/">HTML.IT</a> Che dà come risultato: 'Le risorse per webmaster sono su HTML.IT'. Come si può intuire la testa della nostra àncora è il testo "HTML.IT", mentre la coda, cioè la destinazione (specificata dall'attributo href) è il sito web verso cui il link punta, cioè https://www.html.it. È indifferente che la destinazione dell'ancora sia una pagina HTML di un sito, un'immagine, un file pdf , un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser si comporterà in modo differente a seconda della risorsa. Ad esempio:
Potete anche specificare un indirizzo è mail. In questo caso si aprirà direttamente il client di posta dell'utente con l'indirizzo e-mail pre-impostato. La sintassi è la seguente: <a href="mailto:tuaMail@nomeTuoSito.it">Mandami un'e-mail</a>. Che dà come risultato: Mandami un'e-mail. |
|
I percorsi assoluti e relativi |
|
|
Percorsi assoluti
Poiché l'organizzazione di un sito in directory e sottodirectory è una cosa normalissima, dobbiamo imparare a muoverci tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificate. Per farlo esistono due tecniche:
Nel
caso in cui il documento a cui vogliamo puntare si trovi in una particolare
directory del sito di destinazione, con i percorsi assoluti non abbiamo che
da indicare il percorso per esteso. Leggi le risorse sui <a href="https://www.html.it/css/index.html">fogli di stile</a> Possiamo vedere chiaramente che il link indica un percorso assoluto e fa riferimento a una particolare directory. Nella fattispecie:
Insomma, per creare un collegamento assoluto è sufficiente fare riferimento all'url che normalmente vedete scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti di terze persone. Percorsi relativiSpesso vi troverete tuttavia a fare riferimento a documenti situati nel vostro stesso sito, e - se state sviluppando il sito sul vostro computer di casa (cioè "in locale") - magari non avete ancora un indirizzo web, e non sapete di conseguenza come impostare i percorsi. È utile allora capire come funzionano i percorsi relativi. I percorsi
relativi fanno riferimento alla posizione degli altri file rispetto al
documento in cui ci si trova in quel momento. <a href="paginaDaLinkare.html">collegamento alla pagina da linkare nella stessa directory della pagina presente</a> Poniamo ora di trovarci in una situazione di questo genere:
Dalla pagina "index.html" vogliamo cioè far riferimento al file "interna.html", che si trova all'interno della directory "interna", che a sua volta si trova all'interno della directory "prima". La sintassi è la seguente: <a href="prima/interna/interna.html">Visita la pagina interna</a> Vediamo adesso l'esempio opposto: dalla pagina interna vogliamo far riferimento a una pagina ("index.html") che si trova più in alto di due livelli:
<a href="../../index.html">Visita la pagina interna</a> Come si vede, con i percorsi relativi valgono le seguenti regole generali:
Grazie a questi accorgimenti potete agevolmente navigare all'interno delle directory del vostro sito: se ce ne fosse bisogno potrete per esempio tornare su di un livello rispetto alla posizione del file, scegliere un'altra cartella, e poi scegliere un altro file: ../altraCartella/nuovoFile.html Per approfondimenti potete consultare la pagina d'esempio. ApprofondimentiA volte potrete incontrare la notazione: Leggi le risorse sui <a href="/css/index.html">fogli di stile</a> Se il vostro sito è all'interno di un server Unix (ma la sintassi funziona anche in sistemi Windows, basta che non siano in locale), questa notazione non deve stupirvi: il carattere / indica la directory principale del sito, altrimenti detta "root". Dunque <a href="/css/index.html"> è un altro modo di esprimere i percorsi assoluti all'interno del proprio sito. Un'altra cosa importante da sapere è che quando metterete il vostro sito all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa. Al posto di questo: https://www.html.it/css/index.html è sufficiente indicare la directory: https://www.html.it/css/ Verificate solo con il vostro gestore dello spazio web (cioè "hosting"), se le pagine index della directory devono avere forma index.html, index.htm, index.asp, index.php, home.asp, o altro. Consigli per i nomi dei fileQuando mettere nel web il vostro sito internet, vi accorgerete che esistono due famiglie di sistemi operativi: Windows e Unix. Questi due sistemi operativi utilizzano differenti modi per gestire i file, dunque alcuni accorgimenti sono necessari:
Inoltre quando create un collegamento state attenti a non avere una notazione simile a questa: <a href="file:///C|percorso\nomeFile.html">testo</A> significa che state facendo un riferimento (assoluto) al vostro stesso computer: chiaro che quando metterete i file nel vostro spazio web, le cose non funzioneranno più. |
|
I link interni o ancore |
|
|
|
È possibile anche
creare un indice interno al documento, utilizzando le àncore. <a name="primo">Stiamo per esaminare la struttura.. Eccetera.</a> Da notare che in mancanza dell'attributo che indica il collegamento (href) le àncore non vengono viste come link, ma la loro formattazione è indistinguibile dal "normale" testo. In un ipotetico indice è allora 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 (viene cercata un'àncora il cui nome non è specificato). Questo infatti è un ottimo escamotage per creare link "vuoti" (in alcuni casi vi occorreranno). Ad esempio: <a href="#">link vuoto</a> Per creare un indice interno alla pagina si procede dunque in due fasi distinte:
È bene non confondere le due fasi. Un esempio di quanto appena esposto lo potete trovare nella pagina dell'esempio. |
TABELLA
|
|
|
|
|
|
|
|
|
GRUPPI DI RIGHE
|
Come dicevamo, la struttura delle tabelle ha letteralmente invaso le pagine HTML, che si sono riempite di <tr> e di <td>. Per portare un po' di ordine in questo caos nelle specifiche sono state introdotti dei tag (opzionali) che consentono di capire facilmente quali siano le diverse parti della tabella. Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag:
<thead>, <tfoot>, <tbody> sono tag che consentono di individuare gruppi di righe ("row group"). Da notare che - contrariamente a quello che si potrebbe pensare - il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>. L'idea di base è che il browser nell'eseguire il rendering del codice tenga conto della parte iniziale e della parte finale della tabella, e il corpo vero e proprio sia sviluppato nella sua interezza tra le due estremità. 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. Ecco comunque uno schema che riassume la struttura delle tabelle secondo l'HTML 4:
|
RAGGRUPPARE STILI DI COLONNE
|
Come è possibile
suddividere le righe di una tabella in gruppi ordinati, allo stesso modo è
possibile raggruppare gli stili delle colonne. Il tag da usare è il <colgroup>
e serve per fornire indicazioni su come le colonne debbano essere
visualizzate. Prima di vedere nel dettaglio questo tag anticipiamo due concetti che vedremo in seguito quando ci occuperemo più approfonditamente della formattazione delle tabelle e che ora ci servono per meglio comprendere l'uso di <colgroup>.
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. Per avere un layout di questo genere:
basterà allora scrivere: <table width="75%"
border="1"> come illustrato dettagliatamente in questa pagina. <colgroup> ha l'indubbio vantaggio di poter attribuire in una sola volta la formattazione a un numero elevato di colonne. Ad esempio: <colgroup span="40" align="right"> 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>. In questo caso l'attributo span va riferito a <col> e non a <colgroup>. Ad esempio: <colgroup
span="5" width="20"
bgcolor="red"></colgroup> come mostrato in dettaglio nella pagina di esempio. ApprofondimentiI tag <colgroup> e <col> in teoria supportano anche la possibilità di creare delle celle larghe proporzionalmente. Ad esempio: <colgroup width="1*"> questa sintassi dovrebbe dividere lo spazio a disposizione in tre parti e assegnare una parte alla prima cella e due parti alla seconda cella. In realtà questa sintassi non è ancora supportata da nessun browser |
RAGGRUPPARE CELLE
Finora abbiamo
immaginato le tabelle come griglie rigide, in cui il numero delle colonne era
dato come costante e non modificabile. I raggruppamenti di righe e colonne che
abbiamo esaminato finora non hanno modificato minimamente questa struttura.
In realtà è possibile raggruppare le delle 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). In questo caso si utilizza l'attributo colspan sul <td>,
specificando come valore il numero di celle che devono essere occupate. Ad
esempio:
|
|
|
|
|
|
<td colspan="2"> |
|
Il cui codice corrispondente è:
<table width="430"
border="1" bordercolor="#000000">
<tr>
<td
width="30%"> <br> <br> <br> </td>
<td
width="30%"> </td>
<td
width="30%"> </td>
</tr>
<tr>
<td><br>
<br> <br> </td>
<td colspan="2"> </td>
</tr>
</table>
Tramite l'attributo rowspan (da riferirsi sempre a <td>) è invece possibile creare delle celle che occupino più di una riga. Ad esempio:
|
|
<td rowspan='"2"> ' |
|
|
|
|
il cui codice corrispondente è:
<table width="430"
border="1" bordercolor="#000000">
<tr>
<td
width="30%"> <br> <br> <br> </td>
<td
width="30%" rowspan='"2"> </td>
<td
width="30%"> </td>
</tr>
<tr>'
<td><br>
<br> <br> </td>
<td> </td>
</tr>
</table>
Per un esempio approfondito esaminare il codice di questa pagina.
ANNIDARE TABELLE
anche possibile annidare le tabelle le une dentro le altre. Come in questo esempio:
<table width="430"
border="1">
<tr>
<td
width="50%"> </td>
<td
width="50%"> </td>
</tr>
<tr>
<td
height="24"> </td>
<td><table
width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
che dà come risultato:
|
|
|
||||||
|
|
|
Per evitare che compaiano nel layout degli spazi indesiderati è consigliabile aprire e chiudere la tabella a ridosso del tag della cella che la contiene
ATTRIBUTI DEL TAG TABLE
|
Per quel che riguarda il tag <table>, i seguenti attributi che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il contenuto:
La dimensione indicata nel cellpadding e dal cellspacing - una volta specificata - ha effetto su tutti i lati della cella. I rapporti tra gli attributi che abbiamo appena esaminato sono regolati come segue:
Con questa sintassi ad esempio si imposta una tabella con bordo di 1 pixel, senza spazio tra le celle e con il contenuto che è distanziato dai bordi della cella di 10 pixel: <table width="75%" border="1" cellpadding="10" cellspacing="0"> come si può vedere nell'esempio. per quel che riguarda l'attributo border, a partire da Internet Explorer 4 e da Netscape Navigator 6 è possibile modificare l'aspetto dei bordi esterni della tabella (tramite l'attributo frames) e delle righe fra le celle (tramite l'attributo rules). Vediamo quali sono i possibili valori e i relativi esempi:
|
ATTRIBUTI DI TABLE, TD ,TR
|
I seguenti attributi invece hanno invece valore per tutti gli elementi della tabella (<table>, <tr>, <td>), li presenteremo quindi in un medesimo contesto. DimensioniAbbiamo già esaminato gli attributi width e height che determinano la larghezza e l'altezza (in pixel o in percentuale) di tabelle, righe o celle. Lo sfondoPossiamo
assegnare un colore di sfondo tramite l'attributo bgcolor, oppure
un'immagine tramite background, come abbiamo già visto a proposito del tag <body>.
Come già nel <body> l'immagine di sfondo viene ripetuta, ed è possibile specificare entrambi gli attributi (bgcolor e background) all'interno dello stesso tag: <td width="50%" bgcolor="#0000FF" background="tabelle/sfondo.gif"> L'allineamentoL'attributo align, se riferito al tag <table>, sposta la tabella rispettivamente a sinistra (align="left" - è così di default), a destra (align="right"), o al centro (align="center") del documento. Es: <table align="right"> Se riferito a <tr> o a <td> è invece il contenuto delle celle ad essere allineato a sinistra, al centro oppure a destra. Es: <td align="right"> Allo stesso modo valign è utile per l'allineamento verticale delle celle. I valori possibili sono top (alto), middle (in mezzo - è il valore di default), bottom (in basso), baseline (alla linea di base). Es: <td height="100" valign="middle"> Colori dei bordiPer i bordi esistono gli attributi bordercolor, bordercolorlight, bordercolordark. Ad esempio: <table border="2" bordercolor="blue" bordercolorlight="#00CCFF" bordercolordark="#000099"> Questi attributi
- che consentono di creare degli effetti bellissimi - sono visualizzati
correttamente soltanto da Internet Explorer, mentre con gli altri browser
(Mozilla, Opera) verranno visualizzati in modo parziale se non scorretto. Ci sono tuttavia delle soluzioni - utilizzate dagli sviluppatori sin dall'HTML 3 - che permettono di mostrare un filetto colorato attorno alle tabelle. La tecnica di solito è quella di lasciar trasparire il colore di sfondo attraverso lo spazio fra le celle. Vediamo un esempio: <table width="450"
bgcolor="#00CCFF" cellpadding="10"
cellspacing="1"> che dà:
|
|
Se non lo vogliamo non va a capo. |
Da notare che quando una cella non viene riempita con un qualsiasi elemento
non tutti i browser visualizzeranno i bordi allo stesso modo:
<table
width="200" border="1">
<tr>
<td width="50%">
</td>
<td width="50%">contenuto
</td>
</tr>
</table>
cioè:
|
|
contenuto |
Dunque è opportuno riempire sempre le celle con qualcosa, sia pure un (è 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.
Ovviamente per ottenere il layout desiderato di bordi e tabelle sarebbe più opportuno utilizzare i fogli di stile. Ecco alcuni link interessanti: i margini, il padding, i bordi, lo sfondo.
IMPAGINARE UN LAYOUT
|
Le tabelle, grazie alle loro molteplici e multiformi caratteristiche, si sono rivelate uno strumento indispensabile non solo per impaginare i dati ma soprattutto per visualizzare i layout grafici: grazie alle tabelle è infatti possibile costruire delle griglie in cui inserire i vari contenuti di un sito e per mezzo degli sfondi, dei margini è possibile riprodurre un'impostazione accattivante. Visualizzando la
pagina dell esempio è possibile vedere il layout di HTML.it impaginato
grazie alle tabelle: questo primo esempio utilizza una tabella unica
suddivisa nelle classiche sezioni <thead>, <tbody>
e <tfoot>. È vero che l'impaginazione a tabelle ha fatto il suo tempo:
Oggi siamo in un periodo di transizione. Gli sviluppatori dai "vecchi" modi di costruire i siti web (a tabelle), dovrebbero migrare verso qualcosa di nuovo: verso un'impaginazione che utilizzi i fogli di stile e l'(x)html. L'impaginazione a tabelle rimane, tuttavia, senz'altro una pietra miliare del web. |
COMPORRE UNA PAGINA IN FRAME
frame ("riquadri")
comparvero per la prima volta con Netscape Navigator 2: si tratta della
possibilità di suddividere una medesima finestra del browser in vari riquadri
indipendenti.
Questa soluzione all'epoca si rivelò un successo, dal momento che permetteva
notevoli vantaggi:
Tutte queste caratteristiche hanno causato un vero e proprio boom dei frames, tanto che subito dopo l'invenzione della Netscape, anche Microsoft si trovò a "copiare" la possibilità di strutturare le pagine in questo modo; in seguito (con l'HTML 4) i frames divennero 232b16c una specifica ufficiale del W3C.
Per utilizzare i frame, è necessario creare una pagina che contenga la dichiarazione della struttura che vogliamo utilizzare. Vediamo subito il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Frameset//IT"
"https://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>
L'esempio completo si trova qui.
Come vi sarete
accorti, rispetto alle pagine che abbiamo studiato finora cambiano alcune cose.
In primo luogo cambia il doctype, cioè il tipo di documento di
riferimento.
All'inizio del documento al posto di questa riga:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
compare ora infatti questa dicitura:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"https://www.w3.org/TR/html4/frameset.dtd">
stiamo indicando semplice al browser che facciamo riferimento alle specifiche che servono per regolare il comportamento dei frame.
Avrete notato inoltre che scompare il tag <body> e al suo posto troviamo il tag <frameset> ("set di riquadri"), che ci permette di indicare come devono essere indicati i frames all'interno della pagina
Il tag <frameset> ha sostanzialmente due importanti attributi: rows e cols:
<frameset cols="33%, 33%,*">
<frameset rows="33%, 33%,*">
Nell'indicare la grandezza di ciascuna riga (o colonna) 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"); normalmente invece potremo esprimere la grandezza dei riquadri secondo uno dei seguenti sistemi di misura (da scegliere a nostra discrezione):
|
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. Possiamo farlo con la sintassi:
<frame src="prima.html">
come si può vedere
l'origine di ciascun frame è un documento HTML standard (come quelli che
abbiamo analizzato finora): avrà dunque la sua dichiarazione di documento, la
sua <head> e il suo <body>.
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 (che vedremo
tra poco).
Per visualizzare il codice HTML di ciascun frame è sufficiente andare nel riquadro desiderato e poi digitare il tasto destro del mouse. Quindi:
È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:
<frame id="primoRiquadro" name="primoRiquadro" src="prima.html">
la sintassi corretta per dare un nome a un frame
dovrebbe essere:
id="primoRiquadro"
tuttavia per questioni di retro-compatibilità (con Netscape 4) è oramai entrato nell'uso utilizzare anche name="primoRiquadro".
È 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. Così:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//IT"
"https://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>
L'esempio completo si trova qui.
ATTRIBUTI DEL FRAMESET
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:
|
A differenza degli attributi del tag frameset, che sono dovuti alla convenzione, i seguenti attributi del tag frame sono invece descritti nelle specifiche del W3C e permettono di modificare l'aspetto dei riquadri e il modo in cui l'utente può interagire con essi:
|
Ovviamente sarebbe meglio impostare i bordi e gli spazi tra i frame attraverso i CSS. Nella lezione dedicata ai bordi con i CSS è spiegato come fare.
|
Privacy |
Articolo informazione
Commentare questo articolo:Non sei registratoDevi essere registrato per commentare ISCRIVITI |
Copiare il codice nella pagina web del tuo sito. |
Copyright InfTub.com 2024
