Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

4. Suddividere In Paragrafi

Sei stato bravo ed hai creato e modificato un documento HTML, e dovresti anche sentirti a tuo agio con i processi di editing di testi e di reloading nei web browsers. Quindi ora rilassiamoci con questa veloce lezione sull'inserimento di elementi d'interruzione tra i paragrafi.

Obiettivi

Dopo questa lezione sarai in grado di:

Identificare i tag d'interruzione tra i paragrafi in HTML.
Copiare del testo da web page ed incollarlo in un altro documento.
Inserire elementi d'interruzione nel testo del tuo documento HTML e vederne le modifiche con il tuo web browser.

Lezione

Elementi D'Interruzione in HTML

Precedentemente abbiamo visto che un web browser ignora tutti i RETURN inseriti nel tuo text editor. Ma, dove un browser legge il tag paragraph, inserisce una linea vuota e comincia un nuovo paragrafo. Il codice HTML per forzare l'interruzione di un paragrafo e':

<p>

Nota che questo e' un tag speciale in quanto non necessita di un tag di chiusura; per ora non hai bisogno di usarlo:

     </p>

In una lezione successiva vedremo perche' vogliamo usare per <p> un </p> di chiusura per gli standard HTML piu' diffusi. Per adesso, a livello di codice di base, rimaniamo sul semplice.

Inoltre, i tag <h> creano automaticamente una suddivisione, cosi' e' inutile mettere un tag <p> prima di un'intestazione:

     <p>
     <h2>Blah Blah Blah Blah</h2>

Inserire Elementi D'Interruzione

Nota: Se non hai i documenti di lavoro dalla lezione precedente scaricane una copia ora.

Segui le prossime istruzioni per inserire e vedere una interruzione di paragrafo nel tuo documento HTML.

Riapri il tuo workspace (se non e' gia' aperto).
Vai alla finestra del text editor.
Apri il documento su cui stai lavorando, Volc.html, nel text editor (se non e' gia' aperto).
Per prima cosa, vogliamo spostare le frasi ("Un vulcano e' .....") in modo che esse siano sotto il titolo Introduzione. Usa il mouse per tagliare ed incollare questo testo nel posto desiderato.

Dopo queste frasi, vogliamo aggiungere un po' di testo nuovo. Ma piuttosto che riscriverlo, da questa pagina web seleziona con il mouse le parole e copia le frasi:


     I vulcani hanno fatto parte della storia della Terra 
     molto prima degli umani. Confrontando la storia dell'umanita', 
     pochi milioni di anni in tutto, con quella della Terra,
     piu' di quattro miliardi di anni.

Ora, torna al tuo documento HTML nell'editor di testo, ed incolla questo testo dopo le frasi gia' presenti sotto il titolo <h2>Introduzione</h2>.
Salva le modifiche nel text editor.
Torna al tuo web browser.
Se il documento su cui stai lavorando non e' visibile, usa il comando Apri... dal menu File per aprire il documento.
Seleziona Aggiorna dal menu File. Dovresti vedere ora le due frasi dell'Introduzione. Non vogliamo mettere una divisione tra queste frasi.
Ancora, ritorna al tuo documento nel text editor.

Dopo la seconda frase sotto <h2>Introduzione</h2>, schiaccia INVIO (non e' necessario ma rende il codice piu' leggibile mentre ci si lavora sopra), e quindi digita il tag paragraph:

<p>

Ora questa sezione dovrebbe apparire come:

  <h2>Introduzione</h2>
  Un vulcano e' un posto dove il magma,
  la roccia fusa bollente proveniente da dentro il pianeta,
  raggiunge la superficie. Puo' essere violento, 
  in una massiccia, supersonica esplosione, o piu' 
  quieto, un leggero e lento scorrere di lava.
  <p>I vulcani hanno fatto parte della storia della 
  Terra molto prima degli umani. Confrontando la storia 
  dell'umanita', pochi milioni di anni in tutto, con quella 
  della Terra, piu' di quattro miliardi di anni.

Salva le modifiche nel text editor.
Ritorna al tuo web browser ed Aggiorna il documento. Le due frasi d'introduzione dovrebbero essere paragrafi separati.

Altri tipi di break

Per separare le sezioni principali di una web page, usa la linea orizzontale od il tag hr. Questo inserisce una linea come quella che puoi vedere proprio sopra il titolo di questa sezione.

Il formato HTML e':


     <hr>

Proviamo subito! Metti un tag hr sopra l'intestazione Introduzione. Questo ti aiutera' a separare le frasi aperte di questa lezione dalle porzioni che seguiranno.

E finalmente, c'e' il tag <br> tag che forza il testo ad una nuova linea come il tag <p>, ma senza l'inserimento di una riga vuota. Puoi usare questo tag quando fai liste di oggetti, mentre scrivi versi di un poema, etc. Confronta le differenze tra l'uso del tag <br> e <p> in questi due esempi:

Paragrafi Soli Tag <p>

HTML Risultato

E quindi, possiamo vedere in un colpo d'occhio lo scopo ultimo dei tag di paragrafo. <p> Andando avanti... <p> piu' tag scrivi e meglio ti senti?

E quindi, possiamo vedere in un colpo d'occhio lo scopo ultimo dei tag di paragrafo.
Andando avanti...
piu' tag scrivi e meglio ti senti?

Tag <p> e tag <br>

HTML Risultato

E quindi, possiamo vedere in<br> un colpo d'occhio lo scopo ultimo <br> dei tag di paragrafo. <p> Andando avanti... <br> piu' tag scrivi <br> e meglio ti senti?

E quindi, possiamo vedere in
un colpo d'occhio lo scopo ultimo
dei tag di paragrafo.
Andando avanti...
piu' tag scrivi
e meglio ti senti?

Il tag <br> puo' essere usato per diversi stili estetici per le tue intestazioni di paragrafo. Se noti, i tag header, <h1>, <h2>, ..., inseriscono automaticamente uno spazio bianco sopra e sotto il testo del titolo stesso. Alcuni autori di web page preferiscono uno stile che riesca a controllare questo spazio bianco.

Titolare Sezioni con Header

HTML Risultato

ed alla fine non e' servito a niente. <h4>Il Nuovo Editto Del Formaggio</h4> In seguito, sir Longhorn dichiaro' che tutti i produttori di formaggio
avrebbero dovuto possedere il
certificato prima di cominciare la produzione.

ed alla fine non e' servito a niente.
Il Nuovo Editto Del Formaggio
In seguito, sir Longhorn dichiaro' che tutti i produttori di formaggio avrebbero dovuto possedere il certificato prima di cominciare la produzione.

Titolare Sezioni con tag <b> e <br>
NOTA! Il tag <b> e' discusso nella prossima lezione, ma tutto cio' che fa non e' altro che rendere il testo in grassetto.

HTML Risultato

ed alla fine non e' servito a niente. <p> <b>Il Nuovo Editto Del Formaggio</b><br> In seguito, sir Longhorn dichiaro' che tutti i produttori di formaggio
avrebbero dovuto possedere il
certificato prima di cominciare la produzione.

ed alla fine non e' servito a niente.
Il Nuovo Editto Del Formaggio
In seguito, sir Longhorn dichiaro' che tutti i produttori di formaggio avrebbero dovuto possedere il certificato prima di cominciare la produzione.

Le differenze potrebbero sembrare poco importanti ora come ora, ma aprono la strada a possibilita' che impareremo ad utilizzare nel momento in cui ci avventureremo nella creazione di testi di diverso colore e misura per i nostri titoli di paragrafo. Per esempio, dai un'occhiata ad alcune Web Page Che Non Sembrano Web Page

Controlla il tuo Lavoro

Se vuoi, confronta la tua web page con questo esempio. Se il tuo documento risulta diverso da questo, ricontrolla come hai digitato le interruzioni di paragrafo, <p>, nel text editor. Assicurati di averle inserite come insegnato nella sezione Inserire Elementi D'Interruzione della presente lezione.

Verifica

Qual e' il tag HTML per la suddivisione in paragrafi?
Quali passi hai compiuto per inserire una suddivisione di paragrafo nel tuo documento?
Come hai visualizzato e visto le modifiche nel tuo web browser?
* Domanda Extra : Quale porta ad una linea orizzontale, un tag <hr>? un tag <br>?

Pratica Indipendente

Usa i tag <p>, <hr>, <br> per creare paragrafi o sezioni nel tuo documento personale.

Prossimamente....

Ti ricordi il tuo primo carattere?
Parliamo di come apportare Stile... al tuo testo.

VAI A.... | Indice Delle Lezioni | indietro: "Intestazioni" | avanti: "Testo Stiloso" |

Writing HTML: Lezione 4: Suddividere In Paragrafi
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The Internet Connection at MCLI is Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing HTML