codice html su sfondo blu formattato

Tutorial HTML: Struttura Base Il Paragrafo – Lezione 2

Bentornati al Corso base di Html!

Nella precedente lezione abbiamo visto come viene creata la struttura di una pagina web ed abbiamo inserito un semplice elemento di testo al suo interno.

Invece di un unico elemento di testo avremmo potuto inserire molti più contenuti, ma il testo ed i vari elementi che compongono la pagina, hanno bisogno di essere formattati in modo da essere visualizzati al meglio dal browser.

In questa seconda lezione impareremo come formattare gli elementi all’interno di una pagina html.

Il Paragrafo di Testo

Iniziamo aprendo l’editor html che abbiamo scelto nella lezione precedente insieme alla pagina creata ed posizionatevi con il cursore nel punto in cui avete inserito l’elemento paragrafo

book-paragraph

per la precisione fra la lettera p ed la chiusura della parentesi immediatamente a destra.>
Ora digitiamo uno spazio vuoto ed inseriamo l’attributo align=”xxxxx dove xxxxx e uno dei seguenti validi attributi: center, left, right, justify.
Questi attributi servono 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>

Possiamo vederne il risultato effettivo salvando la nostra pagina html ed aprendola con qualunque browser web.

A questo punto ricapitolando abbiamo definito un paragrafo utilizzando il tag <p> e gli abbiamo aggiunto un attributo align ed un valore center, il testo cosi dichiarato all’interno dei tag di apertura e chiusura e stato allineato al centro della larghezza pagina.
Di seguito alcuni esempi utilizzando tutti gli attributi validi ricordandovi che di default senza alcun attributo il testo si allinea a sinistra.

Questo paragrafo è allineato a sinistra.

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

Questo paragrafo e allineato al centro.

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

Questo paragrafo invece e allineato a destra.

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

Questo paragrafo invece è allineato al centro con giustificazione

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

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.

La Sintassi

In questa guida che tratta le basi è sufficiente capire il meccanismo ed la gerarchia.

 Quali attributi utilizzare e come combinarli dipenderà soltanto dalla vostra creatività.

Attenzione: A livello di sintassi, nell’Html il segno di uguale = e le doppie virgolettexxx che devono essere scritte senza spazi vuoti, è tassativo ed e buona regola abituarsi fin da subito dato che tutti gli attributi che andremo ad affrontare ed imparare fanno uso di queste regole.

 Sicuramente avrete provato a digitare del testo ma vi siete accorti 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> senza tag di chiusura oppure semplicemente chiudendo il paragrafo in corso <p>testo paragrafo</p>  ed aprendone un’altro <p>nuovo paragrafo</p>, sicuramente vi siete accorti  che inserendo più spazi vuoti fra una parola e l’altra il risultato non cambia, questo perchè nell’html gli spazi in più vengono ignorati per lasciare il posto ad un solo spazio.

Più avanti quando parleremo del Design ed la 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 INSIRIRE LE IMMAGINI!

 Fino ad allora… Buon studio e Buona giornata a tutti.

Category:
  Guide PC
this post was shared 0 times
 1200
})(jQuery);