Come Creare un Riquadro con Testo all'Interno in HTML

L'HyperText Markup Language (HTML) è il linguaggio più comunemente usato per creare la struttura e il contenuto delle pagine web. L'HTML contiene una vasta gamma di elementi che permettono agli utenti di generare link, immagini, paragrafi, intestazioni e molto altro. Questi elementi vengono aggiunti a una pagina attraverso l'uso di set specifici di caratteri, noti come tag. Una volta compresa la combinazione di elementi e tag richiesta, creare un blocco di testo circondato da un riquadro in HTML è un'operazione rapida.

Passaggio 1

Apri la pagina web che vuoi modificare e visualizza il suo codice HTML. Se usi un editor di testo, apri semplicemente la pagina nel programma e scorri verso il basso finché non raggiungi la sezione della pagina dove appariranno il riquadro e il testo. Se usi un programma visivo per siti web, come Microsoft Expression Web o Adobe Dreamweaver, apri la pagina e poi clicca sull'area dove vuoi aggiungere il riquadro e il testo. Dopo averlo fatto, cambia la modalità di visualizzazione in "Visualizzazione codice" per vedere l'HTML che controlla il comportamento della pagina.

Passaggio 2

Premi il tasto "Invio" per creare una riga vuota nel tuo codice HTML.

Passaggio 3

Copia e incolla le seguenti tre righe di codice sulla riga vuota creata nel passaggio precedente:

<div style="width:500px; border:2px solid black; padding:10px">
<p>Un blocco di testo del paragrafo va qui</p>
</div>

Passaggio 4

Regola i parametri del codice aggiunto nel passaggio precedente, secondo necessità. Modifica la larghezza, la dimensione del bordo, lo stile del bordo e il colore del bordo modificando i valori "500px", "2px", "solid" e "black" nella prima riga del codice. Modifica la quantità di spazio attorno al testo modificando il valore "10px" nella seconda riga del codice. Modifica il testo situato tra i tag di apertura "<p>" e chiusura "</p>" per adattarlo alle esigenze della tua pagina.

Passaggio 5

Salva la pagina e poi aprila in un browser web. Il codice che hai inserito e modificato nei due passaggi precedenti aggiunge un riquadro largo 500 pixel con bordo nero, che circonda un blocco di testo del paragrafo.