Formattazione Testo

Il testo di un qualsiasi tag può essere formattato in diversi modi: grassetto, corsivo, sbarrato, posizionato sopra o sotto, sottolineato e così via...scopriamo come è possibile farlo in HTML 5.

e sono entrambi utilizzati per scrivere in grassetto, la differenza è che strong definisce che il testo è importante, lo stesso discorso può essere fatto per e per il corsivo con em che sta per Emphasized (mettere in evidenza) che viene utilizzato per enfatizzare appunto qualcosa.

viene utilizzato per sottolineare un testo inserendogli un colore di sfondo giallo.

rende il testo più piccolo.

<del> rende il testo “cancellato”, come si faceva a scuola quando si scriveva una parola e poi la si correggeva sbarrandola e inserendo accanto quella giusta. Viene utilizzato spesso quando si scrive magari un articolo o qualcosa che poi viene scoperto essere sbagliato, piuttosto che eliminare il testo si racchiude in un del e poi si scrive dopo la frase corretta.

<ins>Inserisce una riga sotto la parola per renderla più visibile e dimostrare che quella parola o frase è stata aggiunta in un secondo momento.

e inseriscono la parola sopra (sup) o sotto(sub) rispetto al resto del testo, vengono spesso utilizzati quando si scrivono formule matematiche, chimiche o logaritmi.

Alcuni esempi:


<p>Mi chiamo<b> Vincenzo</b></p>
<p>Amo<strong>l’HTML</strong></p>
<p>Questo testo è in <i>corsivo</i></p>
<p>Amo studiare <em>l’informatica</em></p>
<p><mark>L’HTML</mark> è molto facile da imparare</p>
<p>Questo testo è <small>piccolo</small></p>
<p>Ho <del>sbagliato</del><ins>detto la cosa giusta</ins></p>
<p>La formula dell'acqua è H<sub>2</sub>O</p>
<p> 10<sup>2</sup> è uguale a 100.</p>

Mi chiamo Vincenzo

Amo l’HTML

Questo testo è in corsivo

Amo studiare l'informatica

L’HTML è molto facile da imparare

Questo testo è piccolo

Ho ~~sbagliato~~detto la cosa giusta

La formula dell’acqua è H₂O

10² è uguale a 100.

Come scrivere una poesia

Se volete inserire una poesia in una pagina html rispettando i vari spazi bianchi utilizzando il tag otterrete un testo scritto in una singola riga, il perché è abbastanza chiaro perché per saltare una riga c’è bisogno del tag . Ma piuttosto che inserire ad ogni riga, si può utilizzare il tag <pre> per inserire un testo pre-formattato che rispetti gli spazi bianchi e gli spazi inseriti in esso.

Ad esempio, il sabato del villaggio famosissima di Leopardi:


<pre>    
La donzelletta vien dalla campagna,
In sul calar del sole,
Col suo fascio dell'erba; e reca in mano
Un mazzolin di rose e di viole,
Onde, siccome suole,
Ornare ella si appresta
Dimani, al dì di festa, il petto e il crine.
</pre>

Citazioni

Come inserire citazioni nella propria pagina web, se la frase che stiamo citando è molto breve possiamo usare il tag <q> altrimenti se è più di una riga utilizzeremo <blockquote>, ecco alcuni esempi:


<p> Da Amleto di Shakespeare: <q>Essere, o non essere, questo è il problema<q> </p>

Questa è la citazione del testo dell’Amleto:


<blockquote>
Essere, o non essere, questo è il problema: se sia più nobile nella mente soffrire i colpi di fionda e i dardi dell’oltraggiosa fortuna o prendere le armi contro un mare di affanni e, contrastandoli, porre loro fine? 
</blockquote>

Provate a scrivere citazioni utilizzando il tag q per una frase su una singola riga e il blockquote per frasi con più righe.

Ecco il risultato degli esempi precedenti:

Da Amleto di Shakespeare: Essere, o non essere, questo è il problema

Essere, o non essere, questo è il problema: se sia più nobile nella mente soffrire i colpi di fionda e i dardi dell’oltraggiosa fortuna o prendere le armi contro un mare di affanni e, contrastandoli, porre loro fine?

Abbreviazioni

Quando si scrivono delle sigle e si vuole spiegare tramite il browser cosa significa la sigla si usa il tag <abbr>, eccone qui un esempio:


<p> Conoscere la <abbr title= “Ottimizzazione Motori di Ricerca”>SEO</abbr> migliora la visibilità del tuo sito web.</p>

Se vedete il risultato posizionando il puntatore del mouse sul testo vi apparirà il testo racchiuso nel title:

Conoscere la SEO migliora la visibilità del tuo sito web.

Contatti

Per scrivere le informazioni personali dell’autore del sito o di un utente iscritto possiamo usare il tag <address> per inserire indirizzo, telefono, sito web ecc..

Per la pubblicazione di un commento ad esempio:


<address> 
Scritto da Mario Rossi. <br />
via tal dei tali numero, 1 <br />
Roma, <br />
</address>

Titoli film, canzoni, programmi

Quando si vuole inserire titoli di pubblicazioni, che siano film, canzoni, programmi, si usa il tag <cite>, questo tag viene inserito anche per indicare il link della citazione nel tag <blockquote>


<p> La canzone più famosa dei Queen è <cite>Bohemian Rhapsody</cite></p>
<blockquote cite=”sito web”> Citazione..</blockquote>

Scrivere da destra a sinistra

Se per qualche motivo dovete scrivere in una lingua che ha come allineamento da destra a sinistra come l’arabo potete utilizzare il tag <bdo> e aggiungere l’attributo dir= “rtl” (right to left, da destra a sinistra)


<bdo dir=”rtl”> Questo testo è scritto da destra a sinistra</bdo>

E il risultato è il seguente:

Questo testo è scritto da destra a sinistra

Commenti

A volte può essere utile inserire un commento, ad esempio per dividere le varie sezioni della pagina o commentare alcuni passaggi per poterseli ricordare meglio. Utilissimo l’utilizzo di commenti soprattutto all’inizio quando iniziate a scrivere in html per impare più velocemente i tag.

ad esempio:


<!DOCTYPE html> <!-- Questo indica che stiamo utilizzando HTML5 -->
<html>
<head><!-- Inizio Head-->
<title>Titolo</title>
</head<!-- Chiudi Head-->
<body>
</body>
</html>

Prev 3/6 Next