sabato 14 maggio 2011

HTML: Lezione 8 Il testo (II Parte)

Il testo e i contenitori

Il testo può essere racchiuso in appositi “contenitori” che lo rendono più ordinato e leggibile.

Titolo:

Il nostro testo può essere racchiuso tra i tag che lo identificano come titolo. I tag titolo sono 6 e si distinguono a seconda della grandezza che danno al testo. Si va dal più piccolo <h6> al più grande <h1>. Il tag titolo dà al testo il grassetto e lascia una riga vuota tra sé e il resto del testo all’interno della pagina.

Il tag titolo riveste un’importanza fondamentale per i motori di ricerca che utilizzano questa informazione per estrapolare le informazioni sul contenuto di una pagina.

Paragrafo:

Con il tag

<p> Questo è un paragrafo </p>

Con questo tag si racchiude un paragrafo di testo. Esso lascia una riga vuota dopo il tag di chiusura e una prima del tag di apertura.

Blocco di testo:

Il tag <div> manda la frase a capo ma a differenza di <p> non lascia righe vuote.

In alternativa per andare a capo dopo la fine della riga è possibile usare il tag <br />. Con due <br /> uno dopo l’altro abbiamo lo stesso effetto dopo il tag </p> ovvero lascia una riga vuota.

Infine abbiamo l’elemento <span> che racchiude un blocco di testo che non va a capo ma può essere utile per associare una parte di testo ad uno stile con i CSS. LO span è un elemento inline (vedi http://basic.html.it/guide/lezione/15/classificazione-di-elementi-e-tag-xhtml/)

All’interno dei tag contenitore è possibile inserire il tag align, ad esempio <p align =”justify”> o <div align =”center”> anche se l’uso di questi tag è deprecato ed è sostituibile con i fogli di stile.

Facciamo un esempio:

Apriamo il nostro editor di testo e scriviamo

<htm>

<head>

<title> I contenitori HTML</title>

</head>

<body>

<h1 align="center"> I CONTENITORI IN HTML</h1>

<p align="left"> Questo è il primo paragrafo del mio testo</p>

<div align="right">Questo è il mio primo blocco di testo formattato a destra</div>

<div><b>Questo è il mio secondo blocco di testo in grassetto</b>

</div>

<p>

<i><font color ="#990066" face="Arial">Secondo paragrafo in Arial e viola</font><br/>

Sono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote <br/><br/><br/>

Dopo riprendo a scrivere</i>

</p>

</body>

</html>

Il risultato sarà una cosa del tipo:

I CONTENITORI IN HTML

Questo è il primo paragrafo del mio testo

Questo è il mio primo blocco di testo formattato a destra

Questo è il mio secondo blocco di testo in grassetto

Secondo paragrafo in Arial e viola

Sono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote

Dopo riprendo a scrivere

Alla prossima....

martedì 3 maggio 2011

HTML: Lezione 7 Il testo (I parte)

Il testo

Quando scriviamo testo in un sito web è bene ricordare che esso verrà visualizzato sul pc dell’utente a seconda che egli abbia o meno gli stessi font installati sul proprio computer. Quindi se usiamo un font particolare, molto probabilmente il nostro utente non potrà visualizzarlo e lo trasformerà in uno dei font installati sul proprio pc. Quindi è inutile ricorrere a scritte troppo elaborate, se proprio lo vogliamo fare (per un logo o per il titolo della pagina) possiamo elaborare la scritta come immagine ed inserirla in questo maniera.

Vediamo i tag:

aggiungendo in <body test=""> possiamo dare un colore a tutto il testo, se non viene impostato allora sarà nero, per default.

Con il tag <basefont ="">, inserito all’interno dell’head, possiamo dare degli attributi generali al testo della pagina.

<basefont face="arial,verdana,courier" size="5" color ="#FFFFFF"> .

Vediamo cosa significa questa scritta:

Size = grandezza testo tra 1 e 7;

color = colore del testo;

face = tipo di carattere

(Questi attributi non hanno effetto sul testo contenuto in una tabella, anche se come tag è deprecato)

Fondamentali per la nostra pagina web sono i link, ovvero i collegamenti tra una pagina e l'altra. Se vogliamo far diventare la nostra frase un link dobbiamo aggiungere il tag <a href>

<a href="indirizzolink"> Clicca qui per visitare questa pagina</a>

Il nostro testo può essere formattato come solitamente facciamo con programmi come Open Office o Microsoft Word. Vediamo alcuni tag:

<b> testo in grassetto </b>
<i> testo i ncorsivo </i>
<u> testo sottolineato </u>
<strike> testo sbarrato </strike>
<sup> apice </sup>
<sub> pedice </sub>

Adesso apriamo il file salvato durante la creazione della prima tabella e diamogli un po’ di formattazione e salviamo il file come tabella formattata.html (le modifiche sono evidenziate in grassetto):

<html>

<head>

<title> La mia tabella</title>

<basefont size="7">

</head>

<body bgcolor="#000000" text="white">

Questa è la mia tabella

<tr><td colspan="2" align= "center">Prima riga larga quanto due celle</td><tr>

<tr>

<td rowspan= "2"><b> prima cella</b> seconda riga alta due righe</td>

<td> <b>seconda cella</b> seconda riga la <i>metà</i></td>

<tr>

<td><b> terza cella</b> seconda riga la <i>metà</i></td>

</tr>

</table>

</body>

</html>

Il risultato sarà una pagina con sfondo nero e scritte in bianco.

Alla prossima....