Guida Rapida Html

Materie:Appunti
Categoria:Informatica
Download:114
Data:23.03.2006
Numero di pagine:19
Formato di file:.doc (Microsoft Word)
Download   Anteprima
guida-rapida-html_1.zip (Dimensione: 133.78 Kb)
trucheck.it_guida-rapida-html.doc     473.5 Kb
readme.txt     59 Bytes



Testo

Per iniziare a scrivere pagine web avete bisogno di:
• uno o più browser per visualizzare le pagine
• un editor testuale per scrivere il codice HTML (potete usare il blocco note di Windows, o altri editor testuali come 1Page, che è gratuito è First Page)
• durante questo corso non utilizzeremo editor visuali: né FrontPage, né DreamWeaver, né GoLive, o altri. Su HTML.it troverete delle guide appositamente scritte per loro.
L'estensione del file
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"
Struttura di un tag
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 (), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: ). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
contenuto
Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:
testo
dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
contenuto
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:
Ecco un esempio di immagine:
come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".
Annidamento e indentazione
Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo.
Ad esempio:
contenuto 1

contenuto 2

Potremmo quindi avere ad esempio:
testo 1

testo 2

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:
testo 1 testo 2
con:

testo 1

testo 2

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:

e ci permette di "commentare" i vari punti della pagina. Ad esempio:

L’HTML è "case unsensitive", cioè indipendente dal formato. Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.
e
vengono letti allo stesso modo dal browser.
Fino a qualche tempo fa, per aumentare la leggibilità del codice, era buona norma scrivere in maiuscolo il nome del tag (es: ) e in minuscolo gli attributi (es: align="right"). Quindi:
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.
Fino a questo momento - per rendere più chiare le differenze - abbiamo utilizzato la vecchia abitudine di alternare maiuscolo e minuscolo differenziando tag e attributi, d’ora in poi invece tutta la sintassi HTML della guida sarà in minuscolo.
Struttura della pagina
Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina html.
Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del Word Wide Web Consortium che riguardano il codice HTML:
esamineremo ulteriormente questa riga nell'appendice, per ora lasciamola così.
Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:

... altri tag ...
Un documento HTML è normalmente diviso in due sezioni:
Testa ()
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 ()
Qui è racchiuso il contenuto vero e proprio del documento
Ci occuperemo in seguito della head (l'argomento verrà ripreso poi nella conclusione della guida. Per ora facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:
indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).
Nome del sito
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:


HTML.it


Qui il nostro contenuto
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:
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
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.
Approfondimenti
Nella 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ì:
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:
Ecco una tabella con la notazione di alcuni colori (molti di essi sono disponibili anche nelle varianti "dark" e "light", ad esempio: "darkblue", "lightblue"):
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
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:
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:
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 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 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:
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:
Mentre per togliere il margine con Internet Explorer:
Se avrete a che fare con pagine web di altri webmaster vi capiterà spesso di incontrare questo genere di sintassi:
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:
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 è:
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:

HTML.it

Testo di prova
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:
Il nostro testo.
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:
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:
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:
come si può vedere anche nell’esempio.
Impostare il colore del testo e dei link per tutta la pagina

Il testo
Se non impostate nessun colore per il testo, di default il testo di una pagina è nero.
Tuttavia il nero non sempre è leggibile con tutti i colori di sfondo. Immaginate ad esempio di volere utilizzare come sfondo il colore nero: con una pagina nera e testo nero 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:
Quindi potremo avere, ad esempio:
come nell’esempio consultabile in questa pagina.
I link
Non 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:
Status
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.
Non si tratta di una caratteristica particolarmente utile oggi, ma quando i modem avevano una velocità molto inferiore a quella odierna, vedere un link "attivo" era comunque un’indicazione sul fatto che qualcosa stava avvenendo.
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
non presente
("hover" nei CSS)
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.
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:
Per cambiare colore ai link visitati (di default viola):
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:
La sintassi completa per impostare i link è quindi:
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:
Nome tag
Visualizzazione codice
Descrizione
titolo 1
titolo 2
titolo 3
titolo 4
titolo 5
titolo 6
titolo 1
titolo 2
titolo 3
titolo 4
titolo 5
titolo 6
"H" sta per "heading", cioè titolo: le grandezze previste sono sei. Dall’, che è il più importante, si va via via degradando fino all’ .
Il tag (sia esso h1 o h6) risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé. Si tratta dunque di un elemento di blocco.
paragrafo
Esempio:
paragrafo 1
paragrafo 2
paragrafo 1
paragrafo 2
Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag lascia una riga vuota prima della sua apertura e dopo la sua chiusura.
Blocco di testo
Esempio:
blocco 1
blocco 2
blocco 1
blocco 2
Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.
contenitore
Esempio:
contenitore 1
contenitore 2
contenitore 3
contenitore 1 contenitore 2 contenitore 3
Lo span è un contenitore generico che può essere annidato (ad esempio) all’interno dei DIV.
Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.
Avrete modo di utilizzare lo soprattutto quando incomincerete ad usare i fogli di stile.
Le differenze tra , e sono quindi che:
• lascia spazio prima e dopo la propria chiusura
• non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo
• -essendo un elemento inline - non va a capo
Un esempio dovrebbe chiarire il tutto.
Per quel che riguarda il tag heading (, …, ) è 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 testo
Tutti 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:
Allineamento
Sintassi
Visualizzazione codice HTML
Testo allineato a sinistra
testo
Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
Testo allineato a destra
testo
Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
Testo giustificato
testo
Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
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:
Si tratta in buona sostanza di un errore, visto che per andare a capo esiste il tag
("break", cioè "interruzione").
Per andare a capo è quindi sufficiente scrivere un
. Per saltare una riga ne occorrono due:
Un altro valido tag per dividere la pagina in parti è il tag ("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:
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 fisici
I principali stili fisici sono:
Codice HTML
Visualizzazione
Descrizione
testo in grassetto
Esempio:
Questo testo è in grassetto
Questo testo è in grassetto
Formatta il testo in grassetto.
testo in corsivo
Esempio:
Questo testo è 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.
Meglio limitarsi a poche parole.
testo preformattato
Esempio:
PHP_FUNCTION
{
zval **parameters;
zval *value;
char* str;
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.
testo sottolineato
Questo testo è sottolineato
Esempio:
Questo testo è 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.
testo barrato
Esempio:
Questo testo è barrato
Questo testo è barrato
Con il testo barrato, vengono indicate (ad esempio) le correzioni.
testo in apice
Esempio:
E=mc2
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)
testo in pedice
Esempio:
H2O
H2O
"Subscript": indica al browser di portare il testo al di sotto della linea di scrittura (utile ad esempio per i simboli chimici)
Di fatto i tag e 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.
Codice HTML
Visualizzazione
Descrizione
abbreviazione view frame source
È possibile anche individuare un frame in modo più preciso, assegnandogli un nome:
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”.
Frameset annidati
È possibile annidare diversi frames l’uno dentro l’altro. In questo caso, al posto di uno dei tag è sufficiente includere le indicazioni del nuovo frameset. Così:


HTML.it









Qui può essere indicato il link a
una versione del sito che non utilizzi un layout a frame

L’esempio completo si trova qui.
ATTRIBUTI DEL FRAMESET
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:
L’attributo frameborder (di default impostato a “yes”) permette di specificare se nel frameset devono essere presenti i bordi.
L'esempio è qui
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
bordercolor permette di specificare il colore dei bordi del frameset. L'esempio è qui
Attributi dei frame
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:
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
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
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
marginheight e marginwidth permettono di impostare la distanza verticale (marginheigth) e orizzontale (marginwidth) tra i bordi del frame e il suo contenuto.
L'esempio è qui
Approfondimenti
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.

Esempio