HTML

Sull'Html
elementi essenziali

[per esempi, software per fare prove, … vedi webmaker (Thimble)]

Attraverso alcuni esempi, graduati, è illustrato come realizzare un documento in HTML (hypertext markup language: linguaggio per contrassegnare ipertesti [i contassegni sono i simboli con cui si indica che forma tipografica dare alle varie parti di un documento]). In fondo sono elencati alcuni dei comandi Html più utili.
L'uso diretto dell'Html consente di realizzare documenti molto "leggeri" (ossia che occupano poco spazio di memoria, consentono di essere spediti, letti o importati via Internet velocemente, …), leggibili con tutti i sistemi operativi (e senza richiedere applicazioni non gratuite), dimensionabili a piacere dall'utente usando il browser (in modo da facilitare la visione a seconda delle proprie capacità visive o delle esigenze: visione da video, stampa, proiezione su schermo, …), …. E, per chi sa programmare, consente di produrre uscite comprendenti comandi di formattazione in modo tale che esse possano essere inserite direttamente in documenti html (che, se vuole, poi può aprire con un elaboratore di testi e inserire in altri tipi di documenti).
La realizzazione di ipertesti usando prodotti commerciali spesso produce (volutamente) documenti leggibili decentemente solo con prodotti realizzati dalle stessa ditta (sono impiegati comandi, attributi, … che non fanno parte del linguaggio Html standard).
Un minimo di conoscenza dell'Html è poi indispensabile se si vogliono recuperare, riorganizzare, inserire direttamente o mediante collegamenti, altri materiali realizzati con tale linguaggio presenti su Internet.
Negli esempi seguenti la cella a sinistra indica come appare visualizzato da un Browser (applicazione per interpretare i documenti Html) il documento di cui in quella a destra è riportato il documento "sorgente", cioè il testo (redatto con un qualunque editor) comprendente il contenuto verbale del documento e i TAG (contrassegni), ossia i comandi racchiusi tra parentesi angolari (< e >) che contengono indicazioni sui formati in cui visualizzare il contenuto verbale, le eventuali immagini da inserire, i collegamenti ad altri documenti, …
Le parentesi quadre in grassetto ([…]) indicano parti del documento sorgente che, in un documento con quella struttura, possono essere omesse (la maggior parte dei Browser riescono a intepretare il sorgente anche in assenza di esse), ma che sarebbe meglio mettere sempre.
I comandi che delimitano la struttura generale del documento (<html>, <body>, …) sono riportati solo nei primi esempi.

Questo è un esempio. Il documento viene visualizzato con il font, ossia con il tipo di caratteri, predefinito o scelto dall'utente nelle "opzioni" (o "preferenze") del browser. [<html><head></head><body>]
Questo è un <U>esempio</U>.
Il documento viene visualizzato con il <b>font</b>, ossia con il tipo di caratteri, predefinito o scelto dall'utente nelle "opzioni" (o "preferenze") del <i><B>browser</B><I>.
[</body></html>]

(1) • Gli "a capo" presenti nel sorgente sono interpretati come uno spazio.
• Due o più spazi sono interpretati come uno spazio solo.
• I comandi <b> e </b> racchiudono parti da visualizzare in bold (grassetto); analogamente <u> e </u>, <i> e </i>, <s> e </s> comandano la visualizzazione in underline (sottolineatura), in italic (corsivo) e in stroke (barrato: es: <s>bl</s> diventa bl); i comandi possono essere nidificati, cioè inscatolati uno in un altro (come quelli che racchiudono "browser"), e scritti sia in maiuscolo che in minuscolo.
• I caratteri non standard (come "è", "e" con accento grave), che possono essere codificati in modo diverso nei vari sistemi operativi (windows, mac, unix, …), è opportuno rappresentarli con appositi simboli speciali del linguaggio Html ("è", "ò", "é", … nel caso di "è", "ò", "é", …).

Questo è un esempio.
Il documento viene visualizzato con il font scelto dall'utente nelle "opzioni" del browser. [<html>]<head><title>Esempio</title></head>[<body>]
Questo è un esempio.<br>
Il documento viene visualizzato con il <B style="font-family:arial">font</B> scelto dall'utente nelle "opzioni" del <span style="font-style:italic; color:blue; font-size:125%">browser</span>.
[</body></html>]

(2) • I tag "html" delimitano l'intero documento sorgente, i tag "head" ("intestazione") delimitano la parte del sorgente in cui sono contenute informazioni o comandi riferiti all'intero documento, i tag "body" delimitano il "corpo" del documento in senso stretto. In questo caso nell'intestazione è specificato il titolo del documento, che apparirà nella barra del titolo del browser e, a richiesta, nelle pagine stampate del documento.
• <br> comanda l"a capo".
• In gran parte dei tag può essere inserito l'"attributo" style che consente di aggiungere specificazioni sul formato. Nell'esempio, per la parola "font" in grassetto viene aggiunta la specificazione di usare il font Arial.
• Il comando <span> serve, essenzialmente, a utilizzare direttamente l'attributo "style"; nell'esempio si comanda la visualizzazione di "browser" in stile corsivo, colore blu e dimensioni aumentate del 25% rispetto alle dimensioni standard.
• Se si vuole applicare qualche formattazione particolare a tutto il documento si può usare il tag <BODY STYLE=…>.

Questo è un esempio
x² sta per x·x.
Questa è una abbreviazione. <head><title>Esempio</title><style>
.tit {font-style:italic; color:blue; font-size:125%; font-weight:bold}
.var {font-style:italic; font-weight:bold}
.def {text-decoration:underline}
SUP {font-size:70%} </style></head>
<span class=tit>Questo è un esempio</span><br>
    <span class=var>x</span><sup>2</sup> sta per <span class=var>x·x</span>.<br>
    Questa è una <span class=def>abbreviazione</span>.

(3) • Il comando <style> all'intero dell'intestazione consente di dare un nome (a piacere) a una o più specificazioni del formato che poi possono essere richiamate con l'attributo class; questo consente di dare una cosiddetta forma logica alla formattazione, nel senso che, ad es., se con "tit", "var", … pensiamo di indicare il modo in cui formattare tutti le parti del documento che svolgono la "funzione" di titolo, variabile, … possiamo (se volessimo cambiare il modo di indicare i titoli, le variabili, …) intervenire solo sull'intestazione; se invece usassimo solo <b>, <i> …, cioè comandi di formattazione fisica, dovremmo invece intervenire uno per uno su tutti i titoli, le variabili, … presenti nel documento.
• Il comando <style> può essere impiegato anche per specificare il formato definito da altri comandi; nell'esempio viene specificato che il comando <sup>, che indica la scrittura ad "apice", utilizzi dimensioni ridotte del 30% rispetto a quelle che normalmente esso impiega.
•   rappresenta lo spazio (o "spazio unificatore", "no breaking space": due parole unite con esso non vengono visualizzate su due righe diverse); viene usato spesso per realizzare spaziature più ampie di quella, unitaria, realizzabile impiegando uno o più spazi standard; nell'esempio è impiegato per ottenere un rientro di 4 spazi dal margine sinistro; · è il pallino a mezza altezza; simboli speciali devono essere impiegati per i caratteri impiegati per descrivere i comandi (ad es. > < & sono indicati > < &)

Esempi:

testo centrato testo centrato testo centrato testo centrato

testo allineato a sinistra testo allineato a sinistra testo allineato a sinistra testo allineato a sinistra

testo allineato a destra testo allineato a destra testo allineato a destra

testo giustificato testo giustificato testo giustificato testo giustificato testo giustificato testo giustificato
<p>Esempi:</p>
<p style="text-align:center; margin-bottom:0.5ex">testo centrato testo centrato testo centrato testo centrato</p>
<p style="margin-top:0">testo allineato a sinistra testo allineato a sinistra testo allineato a sinistra testo allineato a sinistra</p>
<p style="text-align:right; margin-right:15mm; margin-bottom:0">testo allineato a destra testo allineato a destra testo allineato a destra</p>
<p style="text-align:justify; margin-left:4%; margin-right:4%; margin-top:30px; font-size:3mm">testo giustificato testo giustificato testo giustificato testo giustificato testo giustificato testo giustificato</p>

(4) • Il comando <p> consente di organizzare il testo in paragrafi; inserendo attributi si possono modificare le impostazioni standard (che prevedono allineamento a sinistra e distanza tra un paragrafo e l'altro maggiore di quella che usualmente c'è tra una riga e la successiva). Piuttosto che introdurre elementi di formattazione direttamente all'interno del comando (come viene fatto negli esempi) conviene richiamare stili che si sono definiti nell'intestazione (per risparmiare memoria, facilitare le modifiche, …): vedi punto (3).
• Gli esempi mostrano anche diversi modi di indicare le distanze: usando come unità di misura il millimetro (mm), il pixel (px), … o usando unità relative: il carattere x del font corrente (ex), la larghezza del paragrafo (sottointesa dopo il "4%" di "margin"), ….
• Vai qui se vuoi vedere come introdurre dei cambi pagina nella stampa (non nella visualizzazione) dei documenti.

foto
<p style="text-align:center">
<b>foto</b><img src=freccia.gif><img src=../foto/pc.jpg><br>
<!devo ricordarmi di cercare una foto migliore>
<img src=http://macosa.dima.unige.it/om/voci/radecnu/conta.gif>
</p>

(5) • Il comando <img> consente di inserire immagini, specificando dopo "src=" il nome del file (di tipo GIF, PNG o JPG) che la rappresenta, eventualmente preceduto dal percorso per arrivare dalla posizione del documento html alla cartella che contiene tale file.
• Nel caso di "pc.jpg" il percorso è indicato con "../foto/": il file è nella cartella "foto" che è contenuta nella cartella che contiene quella in cui sta il documento html (".." indica che occorre risalire alla cartella contenitore); nel caso di "conta.gif" il percorso inizia con "http://": l'immagine viene reperita tramite Internet, in una cartella del sito "macosa.dima.unige.it" (http: hypertext transfer protocol).
• Nel sorgente è stato inserito un commento, ossia una frase, racchiusa tra <! e >, che il browser non interpreta; la frase può servire all'utente per ricordarsi qualcosa che deve fare o le motivazioni di scelte operate, o per dare qualche indicazione, anche ad altre persone, ad es. su modalità di stampa, possibilità di modifica, …. Può servire anche per disattivare temporaneamente pezzi di sorgente; in questi casi, per evitare che il primo ">" incontrato nel pezzo di codice che si vuole nascondere sia interpretato come "fine del commento", si possono usare i tag "" al posto di "<!" e" >".

x x x x x
<HEAD>
<LINK href="../om/voci/macosa.css" rel="stylesheet" type="text/css">
</HEAD>
<P class="cen bgcolce mag cou">
<b class=s-4>x</b> <b class=s-2>x</b> <b class=s2>x</b> <b class=s4>x</b> <b class=s6>x</b>
</P>

(6) • Il comando <link> nell'intestazione di un documento html consente di indicare al browser collegamenti con altri documenti a cui riferirsi per recuperare informazioni o con cui condividere spazi e tempi di visualizzazione o …. Nel caso dell'esempio è indicato il collegamento a un foglio di stile (stylesheet) di tipo CSS (text/css), ossia a un documento in cui sono contenute delle definizioni di stili del tutto analoghe a quelle che si possono inserire con il comando <STYLE>. Il collegamento è indicato dall'attributo href (hypertext reference); in questo caso il foglio di style è macosa.css, e viene indicato il percorso per raggiungerlo.
• In macosa.css è semplicemente contenuto un elenco di definizioni come quelle comprese tra <style> e </style> dell'esempio (3); in particolare sono definiti "cen" (allineamento centrato), "bgcolce" (background - sfondo - di colore celeste), "mag" (colore magenta), "cou" (carattere Courier), "s-4", … "s6" (dimensioni via via crescenti dei caratteri).
• Si noti che dopo "class=" si possono inserire più nomi di stili separandoli con uno spazio (e racchiudendoli tra una coppia di doppie virgolette, "…", in modo da delimitare tutto ciò che va inteso come valore da assegnare a "class"); nel caso dell'esempio allo stesso paragrafo vengono applicati, in ordine, 4 stili (in questo caso l'ordine è indifferente, ma in qualche caso cambiando l'ordine l'effetto può cambiare).
• CSS sta per "cascading style sheets" (fogli di stile a cascata), nel senso che in un documento possono essere caricati più fogli di stile, così come con "class" possono essere richiamati più stili, e che questi vengono utilizzati "a cascata": il browser cerca le informazioni in modo ordinato nelle diverse definizioni di stili caricate o richiamate.

– "Gli Oggetti Matematici"
– Premi su "" per attivare i seguenti collegamenti:
inizio documento
indice dettagliato di "Matematica e Calcolatore"   <a href=../om/index.html>"Gli Oggetti Matematici"</a><br>
  Premi su "<img src=freccia.gif>" per attivare i seguenti collegamenti:<br>
  <a href=#inizio><img src=freccia.gif border=0></a> inizio documento<br>
  <a href=../mat/mc/indice.htm#ind2><img src=freccia.gif border=0></a> indice dettagliato di "Matematica e Calcolatore"

(7) • Mentre <IMG> e <LINK> indicano collegamenti gestiti automaticamente dal browser, <A> indica collegamenti (link, in inglese) attivabili dall'utente, con il mouse (con dei "clic") o con la tastiera (usando più volte il tasto di tabulazione e, infine, quando si è evidenziato il testo o l'immagine su cui si cliccherebbe con il mouse, il tasto "a capo").
• Qui sono illustrate le forme più comuni di questo comando: quelle per comandare la visualizzazione di un altro documento html al posto dell'attuale. Il testo o l'immagine racchiusa tra i tag <A> e </A> (se si tratta di un testo, esso appare evidenziato in colore diverso e/o sottolineato, o in altri modi, a seconda delle impostazioni del browser) è ciò su cui occorre cliccare (o procedere coi tasti "tab" e "enter" come detto sopra); ciò che segue "href=" - vedi (6) - è l'indirizzo del documento che deve subentrare.
• Nel secondo link "href=#inizio" non rimanda ad un altro documento, ma a un punto particolare del documento corrente, punto che (nel sorgente) è indicato con <A name=inizio></A> e, in questo caso, è collocato all'inizio del documento. Un uso tipico di questo tipo di indirizzo è quello per realizzare un indice di un documneto o rimandi a punti precedenti, a note o approfondimenti presenti nello stesso documento.
• Nell'ultimo link, invece, è presente l'indirizzo di un altro documento immediatamente seguito da "#ind2": il documento che subentra apparirà visualizzato a partire dal punto che nel sorgente è indicato con <A name=ind2></A>.
•  rappresenta il tratto di lunghezza media ( è il tratto lungo); i caratteri speciali hanno tutti un nome "numerico", come questi, e a volte un nome alternativo "alfabetico"; ad esempio è e   sono alternative alfabetiche ai nomi &#132 e  .
• Per aprire un documento in un'altra finestra clicca il link col pulsante destro del mouse e aziona il comando "apri il collegamento in un'altra finestra".

A B C X 121 315 619 Y 999 567 321

2 A ------ B + 3C 2 A —————— B + 3C

<pre> A B C X 121 315 619 Y 999 567 321</pre> <pre style="line-height:0.7"> 2 A ------ B + 3C 2 A  B + 3C</pre>

(8) • <PRE> (testo preformattato) è un utilissimo tag che fa sì che quanto racchiuso tra esso e il tag di chiusura </PRE> sia visualizzato con un font monospazio (come Courier, i cui caratteri occupano tutti lo stesso spazio) tenendo conto degli spazi e degli a-capo presenti nel documento sorgente. Consente di realizzare facilmente tabelle (ad es. con un copia-incolla dall'output di un programma), come quella nel primo esempio.
• Può anche consentire di realizzare facilmente formule, come nel secondo esempio, in cui si è aggiunta la specificazione di fare le righe alte 0.7 volte l'altezza standard.
• La seconda versione, più bella, dello stesso termine è stata ottenuta sostituendo alla fine "-" con "—" (che ha nome "&#151").
• Nel realizzare formule sono utili anche i tag <NOBR> e </NOBR> (no break): il testo compreso tra essi non viene spezzato in assenza di un esplicito <br>, ma viene eventualmente trasferito tutto in una nuova riga. Ciò può essere utile, per esempio, per impedire che "5+F(2+x)" venga spezzato in "5+F" alla fine di una riga e "(2+x)" all'inizio della successiva.

A B

X 121 315

Y 999 567

A B

X
121 315

999 567

Y

<table border=1 align=center>
<tr align=center><td></td><td>A</td><td>B</td></tr>
<tr align=center><td>X</td><td>121</td><td>315</td></tr>
<tr align=center><td>Y</td><td>999</td><td>567</td></tr>
</table>
<table cellpadding=0 cellspacing=0 align=center>
<tr align=center><td></td><td>A</td><td>B</td></tr>
<tr align=center>
<td>X </td>
<td colspan=2 rowspan=2>
<table border=1 cellpadding=4 cellspacing=0>
<tr><td>121</td><td>315</td></tr>
<tr><td>999</td><td>567</td></tr>
</table></td></tr>
<tr align=center><td>Y </td></tr>
</table>

(9) • <TABLE> (tabella) è il comando (insieme ad <A>) decisamente più utile e caratteristico dell'Html. Consente di realizzare tabelle, organizzare testi su più colonne, collocare in modo opportuno immagini, …. Il primo esempio mostra una semplice tabella. I tag TR delimitano una riga (row), i tag TD delimitano una cella (ossia un dato) all'interno di una riga. Gli attributi BORDER=1 e ALIGN=center di TABLE specificano che ci deve essere un bordo, di spessore 1 pixel, e che la tabella essere equidistante dai margini sinistro e destro. L'attributo ALIGN=center di TR specifica che nelle celle della riga i dati devono essere allineati al centro (l'attributo potrebbe essere inserito sulle singole celle).
• Nel secondo esempio si ha una tabella inscatolata nell'altra: una tabella senza bordo ha nella prima riga come dati uno spazio, A e B; nella seconda ha X e poi una cella che abbraccia (span) due spazi in orizzontale (col) e due in verticale (row) e contiene una tabella 2 per 2 con bordo; la terza riga ha come dati solo Y in quanto la parte rimanente è stata occupata dalla cella della riga superiore.
• L'attributo cellspacing determina lo spazio tra il bordo di una cella e quello dell'altra; riducendolo a 0 i bordi vengono uniti; l'attributo cellpadding determina lo spazio tra il dato e il bordo della cella.
• Volendo, si può ricorre a tag e attributi ulteriori che consentono di realizzare le intestazioni delle tabelle in modo differente da come abbiamo fatto nel secondo esempio.
• Nel documento sorgente si possono aggiungere spazi bianchi e a-capo (senza influire sulla visualizzazione finale da parte del browser) per facilitare la preparazione/rilettura del codice: si vedano quelli impiegati per evidenziare la nidificazione delle tabelle.

25 A + B = X

———

4

25 A + B = X

———

4

{ x + 2y = 12

3x – y = 8

<table cellpadding=0 cellspacing=0>
<tr align=center><td rowspan=3>25 </td><td>A + B</td><td rowspan=3> = X</td></tr>
<tr align=center style="line-height:0.25"><td></td></tr>
<tr align=center><td>4</td></tr>
</table>
<table border=1 cellspacing=0 cellpadding=5 align=center>
<tr><td>
<table cellpadding=0 cellspacing=0>
<tr><td rowspan=2 style="font-size:210%">{</td>
<td valign=bottom>x + 2y = 12</td></tr>
<tr><td valign=top>3x – y = 8</td></tr>
</table></td></tr>
</table>

(10) • La formula in alto è stata realizzata con una tabella usando opportunamente COLSPAN e ROWSPAN, e regolando l'altezza di una cella (line-heigth). La successiva riproduzione della formula evidenzia la struttura della tabella.
• L'esempio finale è un riquadro centrato realizzato con una tabella che contiene a opportuna distanza (cellpadding=5) una tabella con cui è stato realizzato un sistema di due equazioni.

Abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg

Bcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg

Cdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg

<table align=right width=80%>
<tr valign=top>
<td width=20%><img src=attenz.gif></td>
<td bgcolor=aqua><b>A</b>bcdefg abcdefg ... abcdefg</td></tr>
<tr><td colspan=2 bgcolor=red style="font-size:20%"> </td></tr>
<tr valign=top>
<td><img src=attenz.gif></td>
<td bgcolor=yellow><b>B</b>cdefg abcdefg ... abcdefg</td></tr>
<tr><td colspan=2 bgcolor=#80FF00 style="font-size:20%"> </td></tr>
<tr valign=top>
<td><img src=attenz.gif></td>
<td bgcolor=silver><b>C</b>defg abcdefg ... abcdefg</td></tr>
</table>

(11) • Questo esempio illustra un altro dei possibili impieghi di <TABLE>: la realizzazione di elenchi. Esistono dei tag specifici per la realizzazione di elenchi (vedi punto 12), ma l'impiego delle tabelle consente di gestire meglio dimensioni, strutture e aspetto complessivo degli elenchi. Volendo si possono definire degli appositi stili (da richiamare e inserire nei comandi per la gestione delle tabelle) per realizzare diverse tipologie di elenco.
• L'attributo width, se il valore dell'ampiezza è specificato con una percentuale, quando è applicato alla tabella calcola la percentuale rispetto alla larghezza della pagina (o alla larghezza della parte del documento in cui la tabella è inserita, che, ad es. potrebbe essere la cella di una tabella più grande); quando è applicato a una cella, calcola la percentuale rispetto alla larghezza della tabella; è sufficiente introdurre WIDTH in una sola riga: la stessa ampiezza viene applicata alle corrsipondenti celle delle altre righe (nell'esempio la dimensione della colonna che contiene le "mani" è stata definita una sola volta).
• Il colore dello sfondo delle tabelle è stato introdotto con l'attributo (applicabile sia a TABLE che a TR e TD) bgcolor; in alcuni casi il colore è stato indicato con un nome (alcuni dei nomi usabili: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua), in un altro caso nel modo standard, ossia nella forma #RRGGBB dove R, G e B sono cifre esadecimali (0, 1, …, F) che rappresentano le "quantità" di rosso (red), verde (green) e blu (blue) da comporre (i valori sono da intendere in 255-esmi: si va da 00₁₆ a FF₁₆, che è il numero che precede 100₁₆ = 16² = 256); nel caso dell'esempio #80FF00 è un "verde prato" ottenuto mettendo insieme mezzo rosso (80₁₆ = 8·16 = 128), tutto il verde (FF₁₆ = 255) e niente blu. I nomi "alfabetici" non sono accettati da tutti i browser. [clicca qui per qualche es. di codice di colore].

introduzione

l'attività
prima fase
seconda fase

bilancio
<ol>
<li>introduzione</li>
<li>l'attività
<ol type=A><li>prima fase</li><li>seconda fase</li></ol>
</li>
<li>bilancio</li>
</ol>

(12) • A volte può essere utile ricorre a comandi specifici per gli elenchi invece che a quelli per le tabelle, ad es. nel caso di elenchi numerati che si vogliono man mano aggiornare senza ribattere il numero d'ordine. Il comando <ol> (ordered list), con i tag <li> per delimitare le varie voci (item) dell'elenco, automaticamente aggiorna la numerazione, che, attraverso l'attributo type, può essere realizzata anche in forma letterale, maiuscola, come nell'esempio, o minuscola (gli amanti del genere, possono usare la numeriazione romana, mettendo "I" invece di "A").
• Come si vede dall'esempio, anche gli elenchi, come le tabelle, possono essere nidificati.
• Analogamente ad <ol> si può usare <ul> (unordered list) che realizza liste senza numeri d'ordine: al loro posto vengono usati dei pallini; usando gli attributi "type=square" e "type=circle" si possono far usare al loro posto dei quadretti vuoti (cosa utile per realizzare un questionario con risposte da barrare o crocettare) o dei cerchietti vuoti.

1) {x R : x 0} = (–,0)(0,)
2) x (x+1) = (x+1)^1/2
3) x 0
4) x > 0 <==> ¬ x < 0

{x <img src=epsilon.gif> <b>R</b> : x <img src=div.gif> 0} = (<img src=inf.gif>,0)<img src=union.gif>(0,<img src=inf.gif>)
x <img src=frecciax.gif> <img src=rad.gif>(x+1) = (x+1)<sup>1/2</sup>
x <img src=magug.gif> 0
x <u>></u> 0 <span style="font-family:courier new; font-size:small; letter-spacing:-0.33ex"><==></span> ¬ x < 0

5) {x R : x ≠ 0} = (–∞,0) U (0,∞)
6) x √(x+1)
7) x ≥ π <==> π ≤ x

{x <img src=epsilon.gif> <b>R</b> : x ≠ 0} = (∞,0)<span style="font-family:arial; font-size:75%"> U </span>(0,∞)
x <img src=frecciax.gif> √(x+1)
x ≥ π <span style="font-family:courier new; font-size:small; letter-spacing:-0.33ex"><==></span> π ≤ x

(13) • Per realizzare simboli matematici non standard si possono usare diverse soluzioni:
• usare apposite immagini GIF (non quelle che crea automaticamente Word - o un'applicazione simile - quando si chiede di salvare un documento in formato Html: i simboli vengono mal posizionati, lo stesso simbolo viene memorizzato con file diversi tutte le volte che viene impiegato in un documento, …).
• trasformare la formula: rappresentando la radice come potenza (es. 2), trasformare un "maggiore o eguale" nella negazione di un "minore" (es. 4).
• ricorrere a qualche "trucco", come la realizzazione del "se e solo se" con <, = e > (eventualmente "appiccicati" riducendo lo spazio tra essi) o del "maggiore o eguale" come > sottolineato (es. 4).
•L'Html si sta arricchendo di nuovi simboli matematici, che sono accettati dalle versioni più recenti dei browser più diffusi; ad es., se hai un browser non troppo vecchio, dovresti vedere in 5) la rappresentazione di e mediante ≠ e ∞, in 6) la rappresentazione di mediante √, in 7) quella di e con ≥ e ≤. Anche le lettere greche possono essere introdotte direttamente con dei simboli specifici, come accade per "pi greca" in 7). Per un elenco di questi simboli vedi il collegamento in fondo a questo documento. Vedi anche il successivo punto (17).
• Si possono usare anche font dalle linee di spessore costante (sans serif), come Arial, per creare simboli, ad es. quello di unione come in 5).

<FRAMESET COLS="30%,70%">
<FRAME SRC="indice.htm" RESIZE SCROLLING="no" NAME="ind">
<FRAME SRC="premes.htm" RESIZE SCROLLING="auto" NAME="cont">
</FRAMESET>
sorgente di "indice.htm":
<p style="text-align:center; font-family:Helvetica; font-weight:bold">UNITA' 2<br>numero 2</p>
<p><a href=premes.htm target=cont>premessa</p>
<p><a href=at1.htm target=cont>attività 1</p>
<p><a href=at2.htm target=cont>attività 2</p>
<p><a href=bilancio.htm target=cont>bilancio</p>

(14) • I tag <FRAMESET> e <FRAME> consentono di dare una struttura (frame) alla finestra suddividendola in colonne e/o in righe. Nell'esempio la finestra viene suddivisa in due colonne, una larga 3/7 dell'altra, entrambe ridimensionabili col mouse (resize), quella a sinistra non scorrevole (scrolling=no), quella a destra scorrevole. All'avvio nella sottofinestra sinistra (a cui viene dato nome "ind") viene visualizzato il file indice.htm, in quella destra ("cont") il file premes.htm.
• Nell'esempio fatto, la sottofinestra a sinistra è usata come indice o sintesi del discorso sviluppato in una sequenza di documenti man mano richiamati sull'altra sottofinestra mediante dei link gestibili col mouse. Sopra è riprodotto anche il sorgente di indice.htm. Nei tag <A> l'attributo target (bersaglio) specifica che, cliccando, il documento collegato viene lanciato nella sottofinestra destra, a cui si è dato nome "cont", non nella stessa sottofinestra da cui viene richiamato. Se si fosse messo "target=_top" sarebbe stato visualizzato a piena finestra, senza suddivisioni. Con "target=_blank" sarebbe stato visualizzato in una nuova finestra. Con "target=_NomeQualunque" sarebbe stato visualizzato nella finestra di nome "NomeQualunque", che se non esiste già sarebbe stata creata.
• Questo attributo ("target=_blank" o "target=_NomeQualunque") può essere inserito in ogni comando <A …> quando si vuole che il collegamento venga aperto in una nuova finestra automaticamente, senza comandarne l'apertura dal [menu "File" del] browser o usando le opzioni attivabili col pulsante destra del mouse). Conviene usare un attributo del tipo "target=_Nome" se non si vuole invadere lo schermo di troppe finestre, nei casi in cui non si voglia mantenere per usi successivi la presenza del documento a cui ci si collega; si tenga però presente che se uso "target=_Nome" per aprire un documento e la finestra "Nome" è già stata creata da un altro link ed è ora in secondo piano, non la vedo; a ciò si può ovviare inserendo nel documento a cui ci si collega l'opzione onLoad='window.focus()' nel tag <body>: <body onLoad='window.focus()'>; tale opzione può essere inserita anche in <frameset ...> nel caso di un documento che inizi con questo tag.
• I frame sono comodi e facili da usare per presentazioni di argomenti da visualizzare sia su schermo che con un proiettore (per cambiare la dimensione dei caratteri basta agire sul menu di visualizzazione del Browser). Si ottengono documenti che, rispetto a presentazioni realizzate con specifiche applicazioni (come l'attualmente "di moda" PowerPoint), sono più flessibili, più leggeri, inseribili e consultabili velocemente da Internet, e non necessitano il possesso di prodotti commerciali (che per altro non girano su tutte le piattaforme).
• Si può creare un documento che riindirizzi automaticamente ad un altro; basta che il suo contenuto sia il seguente perché esso, dovunque sia collocato, apra la pagina principale del sito dell'Università di Genova:
<head><script>
window.location='http://www.unige.it'
</script> </head>

<hr><span style="font-size:40%">
<hr size=1 noshade width=90%> 
<hr size=1 noshade width=90%> 
<hr size=1 noshade width=90%> 
<hr size=1 noshade width=50% align=left>
</span><span style="font-size:80%"> 
<hr size=1 noshade width=50% align=left></span>

(15) • Il tag <HR> introduce una linea orizzontale ombreggiata. L'attributo noshade elimina l'ombreggiatura, con size è possibile definire lo spessore della linea, con altri attributi è possibile modificarne la largezza e stabilire il tipo di allineamento. <HR> è utile, oltre che per separare sezioni di un documento, per costruire "righe" per le risposte in testi di esercizi, schede, …. Per determinare la distanza tra una riga e l'altra si può introdurre uno spazio bianco ( ) e definirne opportunamente le dimensioni.

A

B

%
10 20 30 40 50 100

<table cellpadding=0 cellspacing=0 width=100% align=center>
<tr><td width=5%>A</td><td>
<table cellpadding=0 cellspacing=0 border=1 width=58% bgcolor=#60c000><tr><td> </td></tr></table>
</td></tr>
<tr><td>B</td><td>
<table cellpadding=0 cellspacing=0 border=1 width=42% bgcolor=#f00000><tr><td> </td></tr></table>
</td></tr>
<tr><td></td></tr>
<tr><td>%</td><td>
<table cellpadding=0 cellspacing=0 border=1 width=100%><tr align=right style="font-size:60%"><td width=10%>10</td><td width=10%>20</td><td width=10%>30</td><td width=10%>40</td><td width=60%>100</td></tr></table>
</td></tr>
</table>

(16) • Usando tabelle è facile anche realizzare istogrammi dalle dimensioni dinamiche (cioè che si adattano alle dimensioni che l'utente, durante la lettura, dà alla finestra del browser) e che sono incorporati nel documento, senza link a file di immagini. Nell'esempio soprastante i rettangoli che formano l'istogramma sono realizzati come tabelle con bordo aventi sfondo colorato (e dimensionate con width) che a loro volta sono celle della seconda colonna di una tabella contenitore; sulla prima colonna sono messe le didascalie. In questo esempio è stata inserita un'ultima colonna che funge da "scala". • Il dimensionamento dei font può essere impiegato per modificare lo spessore delle righe, ossia delle colonne dell'istogramma, come è stato fatto per la riga usata per rappresentare la scala: mettendo <TD style="font-size:50%"> </TD> al posto di <TD> </TD> si ottengono colonne dell'istogramma spesse la metà.

lim_x→∞ ∫_a^{^x} sin(1/t) dt lim<sub> x→∞</sub> <span style="font-size:130%">∫</span><span style="letter-spacing:-0.25em"><sub>a</sub><sup><sup>x</sup></sup></span> sin(1/t) dt

(17) • Una formula ottenuta usando caratteri speciali matematici accettati dai browser più recenti (vedi anche il precedente punto (13); per dettagli vedi il collegamento alla fine di questo documento) e comandi per retrocedere caratteri in modo da realizzare una doppia indiciatura (apici e pedici verticalmente allineati); i comandi per spostare caratteri a volte su Mac non funzionano. Altri due esempi:

F_n³ x^– 1^·500 F<span style={letter-spacing:-0.35em}><sub>n</sub><sup>3</sup></span>
     
<span style={letter-spacing:-0.43em}>x<b><sup></sup></b></span>
     
1<sup style="font-size:72%; font-weight:bold">·</sup>500

_

F(x) =

{

cos(x) se x ≥ 0

x²+1 se x < 0

_
F(x) =

{
cos(x) se x ≥ 0
x²+1 se x < 0

<table cellpadding=0 cellspacing=0><tr>
<td>
<table cellpadding=0 cellspacing=0><tr style="line-height:1"><td>_</td></tr>
<tr style="line-height:1"><td>F(x) = </td></tr>
<tr style="line-height:1"><td> </td></tr></table>
</td>
<td style="font-family:courier new; font-size:300%">{</td>
<td>
<table cellpadding=0 cellspacing=0>
<tr><td>cos(x)  </td><td style="background:yellow">se x ≥ 0</td></tr>
<tr><td>x<sup>2</sup>+1</td><td>se x < 0</td></tr>
</table>
</td></tr></table>

(18) • Altri esempi d'uso di tabelle (inscatolate); per le parentesi graffe si potrebbero usare anche caratteri speciali (in questo caso ⎧ , ⎨ e ⎩), visualizzati solo dai browser più recenti; per dettagli vedi: caratter.htm.

• L'Html è in continua evoluzione. Qui ne abbiamo descritto elementi essenziali che sono ormai standard. Per informazioni su sviluppi e per ulteriori dettagli si può vedere il sito http://www.w3.org.
• Per un esempio di foglio di stile - vedi (6) - ed esempi di specificazioni di stile realizzabili con l'attributo "style": macosa.css.
• Per qualche simbolo come immagine GIF: SimboliGif.
• Per caratteri speciali e simboli: caratter.htm.
• Esempi di comandi per link agli Oggetti Matematici.

Se vuoi esercitarti nella preparazione di materiale ipertestuale, clicca QUI

lim_x→∞ ∫_a^{^x} sin(1/t) dt	lim<sub> x→∞</sub> <span style="font-size:130%">∫</span><span style="letter-spacing:-0.25em"><sub>a</sub><sup><sup>x</sup></sup></span> sin(1/t) dt
(17) • Una formula ottenuta usando caratteri speciali matematici accettati dai browser più recenti (vedi anche il precedente punto (13); per dettagli vedi il collegamento alla fine di questo documento) e comandi per retrocedere caratteri in modo da realizzare una doppia indiciatura (apici e pedici verticalmente allineati); i comandi per spostare caratteri a volte su Mac non funzionano. Altri due esempi:
F_n³ x^– 1^·500	F<span style={letter-spacing:-0.35em}><sub>n</sub><sup>3</sup></span>       <span style={letter-spacing:-0.43em}>x<b><sup></sup></b></span>       1<sup style="font-size:72%; font-weight:bold">·</sup>500