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>
<meta name ="robots" content ="index, follow">
<meta name= "keywords" content ="il testo in htm, i tag <p> <div> <br/> in html, html, corso html, i tag contenitori">
<meta name ="description" content ="il teto in html">
</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>
<hr noshade size="3" width="70%" align="center" />
</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 violaSono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote
Dopo riprendo a scrivere
Alla prossima....
Nessun commento:
Posta un commento