Abbiamo visto nella lezione precedente, come creare la struttura della nostra prima pagina web inserendo al suo interno una qualunque scritta generica, allo stesso identico modo avremo potuto scrivere un intero libro se solo avessimo voluto fare quello, ma un testo ha bisogno di essere formattato per essere facilmente leggibile ed è proprio di questo che ci occuperemo in questa lezione.

Aprite il vostro editor, qualunque esso sia, richiamate la pagina che avevate precedentemente salvato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui avevate inserito l'elemento paragrafo <p> e precisamente fra la lettera p e la chiusura della parentesi angolare immediatamente a destra.>

Digitate uno spazio vuoto ed inserite l'attributo align="xxx" dove xxx è uno dei seguenti validi attributicenterleftrightjustify. Questi servono rispettivamente per allineare il testo al centro, al margine sinistro, al margine destro, giustificato per entrambi i margini.

Se avete eseguito correttamente le istruzioni dovreste avere qualcosa di questo tipo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
<p align="center">Ecco la mia prima pagina in html destinata al web.</p>
  </body>
</html>

questo il risultato:

Ecco la mia prima pagina in html destinata al web.

Abbiamo definito un paragrafo con il tag <p> gli abbiamo dato come attributo align e come valore center il testo così dichiarato è stato allineato al centro della larghezza pagina. Questi sotto gli esempi e relativo risultato adoperando tutti i possibili attributi di allineamento: leftrightcenterjustify,(senza alcun attributo, per default, il testo si allinea a sinistra). Gli esempi sono due per ogni combinazione, uno da HTML e l'altro dalla dichiarazione di style CSS. Producono lo stesso risultato, in alcuni casi potrebbe essere più semplice, o soltanto più pratico, definire gli attributi da html, dipenderà da voi, dal tipo di pagina che intendete realizzare e a chi questa si dovrà rivolgere.

 


 

<p align="left">Questo paragrafo è allineato a sinistra.</p>

 

Questo paragrafo è allineato a sinistra.

 

<p style="text-align: left;">Questo paragrafo è allineato a sinistra.</p>

 

Questo paragrafo è allineato a sinistra.

 


 

<p align="right">Questo paragrafo invece è allineato a destra.</p>

 

Questo paragrafo invece è allineato a destra.

 

<p style="text-align: right;">Questo paragrafo invece è allineato a destra.</p>

 

Questo paragrafo invece è allineato a destra.

 


 

<p align="center">Questo paragrafo è allineato al centro.</p>

 

Questo paragrafo è allineato al centro.

 

<p style="text-align: center;">Questo paragrafo è allineato al centro.</p>

 

Questo paragrafo è allineato al centro.

 


 

<p align="justify">Questo paragrafo è allineato al centro con giustificazione.</p>

 

Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ? Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi vuoti fra le parole.

 

<p style="text-align: justify;">Questo paragrafo è allineato al centro con giustificazione.</p>

 

Questo paragrafo invece è allineato al centro con giustificazione, che cosa è la giustificazione ? Guardate attentamente i due margini, destro e sinistro, come potete notare il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge in automatico degli spazi vuoti fra le parole.

 


 

In questa guida che tratta le basi è sufficiente capire il meccanismo, poi quali attributi e come combinarli dipenderà soltanto da voi. Vi ricordo a questo proposito anche le guide HTML e CSS.
Vediamo la sintassi dei due metodi adoperati, per html il segno di uguale = e le doppie virgolette " " che devono essere scritte senza spazi vuoti. Per CSS i due punti : ed il punto e virgola ; che separa più di una sola dichiarazione. Tutti gli attributi che incontreremo fanno uso di queste regole, per cui abituatevi ad usarle in modo corretto fin da subito.

Digitando del testo vi accorgerete che, a differenza dei normali editor di testo, ogni volta che volete tornare a capo non basta la semplice pressione del tasto invio. Nelle pagine web per tornare a capo si fa uso dell'elemento <br> oppure chiudendo il paragrafo ed aprendone uno nuovo </p><p> Vi accorgerete anche che inserendo più spazi vuoti fra una parola e l'altra questi non produrranno alcun spostamento perchè ignorati per lasciare il posto ad un solo spazio.

Provate per rendervene conto. Più avanti nella lezione dedicata alla cosmesi del testo vedremo come fare questa ed altre operazioni che in html hanno regole ben precise e del tutto diverse da quelle usate per una normale scrittura di testi.

Per questa lezione credo possa bastare... Avete imparato a creare una pagina web e ad introdurvi del testo, nella prossima lezione vedremo come inserire le immagini.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Di Redazione

La nostra redazione è costantemente impegnata nel ricercare fonti attendibili e produrre contenuti informativi, guide e suggerimenti utili gratuiti per i lettori di questo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

NON seguire questo link o sarai bannato dal sito!