I tag di formattazione
I tag di formattazione del documento HTML sono sempre i tag previsti dalla versione 4 e sono rimasti immutati.
E’ importante notare che la formattazione del documento HTML possiede diversi elementi di formattazione quali i paragrafi, i caratteri, e altri elementi che saranno esaminati nelle prossime lezioni.
E’ importante inoltre notare che i tag conferiscono al documento l’impaginazione e che molti elementi di layout alla lunga devono essere definiti nei fogli di stile CSS, per uniformare tutti i documenti che fanno parte di un progetto.
tag di paragrafo
Il tag di paragrafo è “<p>” con la relativa chiusura e possiede diversi attributi fra i quali spicca l’attributo “align” che definisce l’allineamento del testo nel paragrafo che come i normali documenti di scrittura può essere allineato a sinistra, al centro e destra.
E’ possibile definire un paragrafo con colore di sfondo utilizzando l’attributo “sytle=background-colore: colore;” ed è possibile fissare anche la larghezza del paragrafo in pixel, in em o in unità percentuale.
Alcuni esempi:
Codice HTML
<p align="left">Paragrafo allineao a sinistra</p>
<p align="center">Paragrafo allineato al centro</p>
<p align="righe">Paragrafo allineato a destra</p>
<p align="left" style="background-color:red; width=25%;">Paragrafo rosso di larghezza 25%</p>Anteprima
Paragrafo allineao a sinistra
Paragrafo allineato al centro
Paragrafo allineato a destra
Paragrafo rosso di larghezza 25%
Tag di titolo
I tag per il titolo sono <h1>, ..<h6> con le relative chiusure che diminuiscono la loro altezza al crescere della cifra. Anche i titolo possiedono attributi di stile.
Codice
<h1>Tutolo 1</h1>
<h2>Titolo 2</h2>
<h3>Titolo 2</h3>
<h4>Titolo 2</h4>
<h5>Titolo 2</h5>
<h6>Titolo 2</h6>
<br>
<h3 style="background-color: yellow; color:red;">Titolo 3 colore rosso sfondo giallo</h3>Anteprima
Tutolo 1
Titolo 2
Titolo 2
Titolo 2
Titolo 2
Titolo 2
Titolo 3 colore rosso sfondo giallo
Il tag <br> è inserito per dare un “a capo” riga.
Tag di font
Il font possiede una famiglia, un colore e una dimensione che può essere fissata in pixel, em, o in unità relative con n>=1. L’unità em è relativa alla dimensione fissa del font di base ovvero la dimensione predefinita del font nel body del documento o fissata dallo sviluppatore.
Ad esempio se il body prevede un font di 12 px, il valore 2em corrisponde a 2x12px=24px.
I font hanno anche delle variazioni di stile corsivo <i>…</i>, <b>…</b> grassetto da un utilizzare meglio <em>…</em> e sottolineato <u>….</u>.
Per i font è possibile utilizzare dei font incorporati o collegati mediante dei file esterni.
Negli esempi che seguono utilizziamo un’unità relativa con valori numeri 1…n come per i titoli che sono in rapporto alla dimensione fissata per il body o in base alla dimensione predefinita. Per le altre unità di misura conviene riferire le caratteristiche nel foglio di stile CSS o in stili in linea nel documento.
Ecco un codice di esempio per il tag font:
<font size="5" color="red">Testo di dimensione 2 di colore rosso</font>
<br><font size="+3"><font face="Verdana">Font a dimensione +3 di font </font>Font a dimensione +3 di font Verdana
Il tag per i link
Come ultimo tag da esaminare il tag <a> per la creazione di link ipertestuali interni (ancore) o esterni.
La sintassi prevede la forma semplificata:
<a href=”url” title=”nota da visualizzare quando la manina è sopra il link” target=”_self | blank | _parent”>Testo link</a>
L’attributo target indica la pagina di destinazione “blank” nuova pagina, “self” la stessa finestra dove è aperta la pagina da cui parte il link e “parent” nel caso di pagine con frame.