Esempio
<p>
<img src="andromeda.gif"
alt="La galassia di Andromeda"
width="321"
height="321" />
</p>
<p>
<img src="andromeda.gif"
alt="Andromeda"
width="100"
height="80"
style="text-align:right" />
</p>
Il testo effettivo del documento va collocato nel corpo, cioè nella sezione racchiusa da <body>...</body>.
Lo stile tipografico del corpo del documento va specificato nella sezione di stile o in un file *css.
Il testo ASCII del documento va suddiviso in blocchi omogenei, delimitati da appositi marcatori.
Nel marcatore di apertura di ogni blocco può esserci una specificazione di stile in linea.
Ad esempio:
<p style="font-size:150%;color:maroon">Questo è un paragrafo</p>.
Questo è un paragrafo
I blocchi di testo di uso più frequente sono:
Per questi blocchi, come per <body>, è bene dichiarare il formato tipografico nella sezione <style>, derivandone eventualmente classi particolari.
Tra due blocchi il testo può essere segmentato da linee orizzontali, segnalate dal marcatore vuoto <hr /> (horizontal rule);
<hr /> può essere modulato con l'attributo style.
Esempio:
<hr style="background-color:red; color:red; position: absolute; left:50px; width:50%; height:8px" /> .
I paragrafi sono blocchi elementari di testo generico e sono delimitati dai marcatori
<p>...</p>.
I paragrafi sono separati l'uno dall'altro da un'andata a capo seguita da un'interlinea.
Il browser ignora le 'andate a capo' eventualmente presenti in un blocco del sorgente e visibili nell'editor di testo e
visualizza il testo a seconda dello spazio disponibile e delle indicazioni tipografiche di stile; quindi, in linea di massima, è
da evitare nella redazione del sorgente HTML, l'uso del trattino di andata a capo.
Per forzare comunque la fine della riga si usa il marcatore vuoto <br /> (break).
Per ottenere paragrafi di formato speciale si può usare l'attributo style oppure definire classi apposite di <p> nella sezione <style>.
Esempio:
<p>Questo è un paragrafo.</p>
<p style="font-family:fixedsys">Questo è un paragrafo di codice</p>.
Questo è un paragrafo.
Questo è un paragrafo di codice.
Per saltare più righe tra due paragrafi si può usare <p> </p> (not breaking space)
I marcatori di titolo sono speciali tipi di paragrafi di caratteristiche predefinite per default.
I titoli sono delimitati da marcatori di forma <hn>... </hn> con n da 1 a 6.
Nell'assetto di default le dimensioni dei caratteri sono decrescenti dal formato maggiore h1 a quello minore h6.
Tuttavia nella sezione style o nel file *.css i formati dei titoli possono essere ridefiniti a piacere.
Esempio
<h1>Questo è un titolo grande</h1>
<h2>Questo è un titolo un po' più piccolo</h2>
<h3>Questo è un titolo ancora un po' più piccolo</h3>
I paragrafi di una pagina possono essere raggruppati in sezioni, eventualmente dotate di titolo, con l'uso dei marcatori <section>... </section>.
Esempio.
<h1>Teoremi di Euclide.</h1> <section> <h2>Primo Teorema</h2> <p><b>Primo enunciato</b>:In un triangolo rettangolo il quadrato costruito su un cateto è equivalente al rettangolo avente per dimensioni l'ipotenusa e la proiezione di quel cateto sull'ipotenusa stessa.</p> <p><b>Secondo enunciato</b>: In un triangolo rettangolo il cateto è medio proporzionale tra l'ipotenusa e la proiezione del cateto stesso sull'ipotenusa.</p> </section> <section> <h2>Secondo Teorema</h2> <p><b>Primo enunciato</b>: In un triangolo rettangolo, il quadrato costruito sull'altezza relativa all'ipotenusa è equivalente al rettangolo che ha per lati le proiezioni dei due cateti sull'ipotenusa.</p> <p><b>Secondo enunciato</b>: In un triangolo rettangolo, l'altezza relativa all'ipotenusa è medio proporzionale tra le proiezioni dei due cateti sull'ipotenusa.</p> </section>
Primo enunciato: In un triangolo rettangolo il quadrato costruito su un cateto è equivalente al rettangolo avente per dimensioni l'ipotenusa e la proiezione di quel cateto sull'ipotenusa stessa.
Secondo enunciato: In un triangolo rettangolo il cateto è medio proporzionale tra l'ipotenusa e la proiezione del cateto stesso sull'ipotenusa.
Primo enunciato:In un triangolo rettangolo, il quadrato costruito sull'altezza relativa all'ipotenusa è equivalente al rettangolo che ha per lati le proiezioni dei due cateti sull'ipotenusa.
Secondo enunciato: In un triangolo rettangolo, l'altezza relativa all'ipotenusa è medio proporzionale tra le proiezioni dei due cateti sull'ipotenusa.
Un blocco rigido è una porzione di testo sorgente visualizzata dal browser con la stessa disposizione tipografica che ha nel sorgente.
Per delimitare i gruppi rigidi si usano i marcatori <pre>... </pre> (preformatted).
Ad esempio, per scrivere una funzione Javascript con le doverose indentazioni:
<pre>
function Ipotenusa(a,b)
{
sq = a*a+b*b;
return Math.sqrt(sq);
}
</pre>
function Ipotenusa(a,b)
{
sq = a*a+b*b;
return Math.sqrt(sq);
}
Particolari parole o sequenze di parole (brani) all'interno di un blocco possono assumere un aspetto tipografico diverso da quello definito nel caso generale in <style> per quel blocco usando specifici marcatori di forma tipografica:
<b>... </b> (bold) per avere il carattere neretto.
<i>... </i> (italic) per avere il carattere corsivo.
Neretto e corsivo possono essere usati in coppia per avere il neretto corsivo.
Esempio
<p>Questo è un paragrafo <b><i>speciale </b></i></p>.
Questo è un paragrafo speciale
Per avere esponenti o deponenti (apici o pedici) si usano i marcatori
<sup>... </sup> per avere un esponente
<sub>... </sub> per avere un deponente
Esempio
<p>x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup>.
x12 + x22
Per caratterizzare in modo più vario un brano di un blocco si usa il marcatore
<span style="...">...</span>.
Esempio
<p>Questo bisogna studiarlo <span style="color:red; font-size:200%">BENE!</span></p>.
E` bene definire in <style> o, meglio ancora, in un file CSS, varie classi di <span>: queste classi potranno essere usate nel marcatore di apertura al posto di style.
Esempio
<p>Questo bisogna studiarlo <span class="rosso_grande">BENE!</span></p>.
in entrambi i casi si può ottenere
Questo bisogna studiarlo BENE!
Una suddivisione è una zona di testo, solitamente costituita da vari blocchi, caratterizzata da particolari aspetti tipografici, come ad esempio, colore, margini o sfondo diversi da quelli dichiarati in <style> per <body>.
Per delimitare le suddivisioni si usano i marcatori <div>... </div>.
Nel marcatore di apertura si possono specificare gli attributi di stile ma è bene dichiararli nella sezione <style> di <head> o in un file CSS, ricavando eventualmente classi particolari.
Esempio
<div style="position:relative; left:20%; width:60%; text-align:center; background-color:darkgray; color:white"> <p>Questa è una suddivisione larga il 60% rispetto a body e centrata in esso</p> <p>con sfondo darkgray e testo bianco centrato nella suddivisione.</p> </div>
Questa è una suddivisione larga il 60% rispetto a body e centrata in esso
con sfondo darkgray e testo bianco centrato nella suddivisione.
Le liste sono costituite da una colonna di righe allineate, puntate o numerate.
Per ottenere una lista puntata si usano i marcatori <ul>... </ul>.
Per ottenere una lista numerata si usano i marcatori <ol>... </ol>.
Le righe delle liste sono comprese tra i marcatori <li>... </li>.
Esempi
<ul> <li>Roma</li> <li>Milano</li> <li>Torino</li> <li>Firenze</li> <li>Venezia</li> </ul>
<ul style="list-style-type:square"> <li>Roma</li> <li>Milano</li> <li>Torino</li> <li>Firenze</li> <li>Venezia</li> </ul>
<ol> <li>Roma</li> <li>Milano</li> <li>Torino</li> <li>Firenze</li> <li>Venezia</li> </ol>
<ol style="list-style-type:lower-alpha"> <li>Roma</li> <li>Milano</li> <li>Torino</li> <li>Firenze</li> <li>Venezia</li> </ol>
| valore | descrizione |
|---|---|
| circle | cerchietto vuoto |
| disc | cerchietto pieno |
| square | quadratino |
| decimal | numeri decimali |
| decimal-leading-zero | numeri decimali con zeri iniziali (01, 02, 03, ecc.) |
| lower-alpha | lettere latine minuscole |
| lower-greek | lettere greche minuscole |
| lower-latin | lettere latine minuscole |
| lower-roman | numeri romani minuscoli |
| upper-alpha | lettere latine maiuscole |
| upper-latin | lettere latine maiuscole |
| upper-roman | numeri romani maiuscoli |
| inherit | una lista annidata in un'altra ne eredita lo stile |
Per costruire una tabella di dati ordinati in righe e colonne si usano i marcatori
Per non avere un risultato caotico bisogna che il numero di celle nelle righe (intestazione e generica) sia uguale.
Per ognuno dei marcatori di apertura possono essere scritte apposite indicazioni di stile sia nella sezione <style> che in linea.
Esempio:
<table
style="position: relative; width:40%; left:30%; background-color:bisque;color:maroon;
border-style:solid; border-color:blue; text-align:left">
<caption style="color:sienna; font-weight:bold;font-size:150%">
Regioni e capoluoghi
</caption>
<thead>
<tr>
<th style="width:5%">ord</th>
<th style="width:50%">regione</th>
<th style="width:45%">capoluogo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lazio</td>
<td>Roma</td>
</tr>
<tr>
<td>2</td>
<td>Lombardia</td>
<td>Milano</td>
</tr>
<tr>
<td>3</td>
<td>Piemonte</td>
<td>Torino</td>
</tr>
<tr>
<td>4</td>
<td>Toscana</td>
<td>Firenze</td>
</tr>
<tr>
<td>5</td>
<td>Veneto</td>
<td>Venezia</td>
</tr>
</tbody>
</table>
| ord | regione | capoluogo |
|---|---|---|
| 1 | Lazio | Roma |
| 2 | Lombardia | Milano |
| 3 | Piemonte | Torino |
| 4 | Toscana | Firenze |
| 5 | Veneto | Venezia |
Le tabelle possono essere vantaggiosamente usate per suddividere un documento in colonne o in grandi riquadri. Ad esempio una tabella con un'unica riga molto alta e due colonne rende possibili questi effetti
<table cellspacing="8" cellpadding="8"">
<tbody>
<tr>
<td style="width:50%">
<p>Questo potrebbe essere un lunghissimo testo da scrivere
nella prima colonna.</p>
<p>Si può proseguire quanto si vuole.</p>
</td>
<td style="width:50%">
<p>Questo potrebbe essere un lunghissimo testo da scrivere
nella seconda colonna.</p>
<p>Si può proseguire quanto si vuole.</p>
</td>
</tr>
</tbody>
</table>
|
Questo potrebbe essere un lunghissimo testo da scrivere nella prima colonna. Si può proseguire quanto si vuole. |
Questo potrebbe essere un lunghissimo testo da scrivere nella seconda colonna. Si può proseguire quanto si vuole. |
Per inserire un'immagine grafica in un blocco di un documento HTML, si usa la sintassi:
<img src="figura.gif" alt="..." width="150" height="100" />
L'attributo src indica il file (o URL) che contiene il codice dell'immagine. L'attributo alt indica una scritta sostitutiva dell'immagine, se questa non viene trovata, e comunque una didascalia che descrive l'immagine.
L'attributo alt è obbligatorio in HTML. Gli attributi width e height sono fortemente incoraggiati. Inoltre il tag img è un tag vuoto che va chiuso con la barra (/>).
Se si vuole un'mmagine incorniciata:
<img src="figura.gif"
alt="..."
width="150"
height="100"
style="border-style:solid; border-width:1" />
Esempio
<p>
<img src="andromeda.gif"
alt="La galassia di Andromeda"
width="321"
height="321" />
</p>
<p>
<img src="andromeda.gif"
alt="Andromeda"
width="100"
height="80"
style="text-align:right" />
</p>
Se si vuole che tutto lo sfondo della finestra del documento attivo sia riempito da
un'immagine si può inserire l'attributo in <body>
nel seguente modo
<body style="background-image:url('figura.gif')">
È possibile visualizzare uno o più documenti all'interno di un documento principale con l'uso dei marcatori
<iframe src="documento2.htm" width="xx" height="yy" >...</iframe>
Esempio:
<p class="centrato"> <iframe src="andromeda0.html" width="300" height="300" ></iframe></p>
Esempi sull'uso dei frames per gestire applicazioni grafiche (canvas, oggetti, animazioni) sono visibili alla pagina JS - 11 e seguenti di questo sito.