Come Inserire una Linea Orizzontale in HTML

Scritto in collaborazione con: Lo Staff di wikiHow

In questo Articolo:HTML 4.01 CSS/HTML5 Riferimenti

Questo articolo spiega come inserire una linea orizzontale all'interno di una pagina web utilizzando il codice HTML. Questo elemento grafico può essere utilizzato per separare i contenuti visualizzati all'interno di una pagina o di un sito web. Il codice da usare per creare una linea orizzontale è molto semplice. Tuttavia, in base alla versione di HTML che stai usando, puoi inserire la linea di codice per tracciare una linea orizzontale direttamente all'interno del codice sorgente della pagina (HTML 4.01) oppure puoi utilizzare i fogli di stile CSS (HTML5).^[1]

Metodo 1
HTML 4.01

1

Apri un file HTML esistente oppure creane uno nuovo. I documenti HTML possono essere modificati utilizzando qualsiasi editor di testo, per esempio "Blocco note". In alternativa, puoi utilizzare un editor professionale per la programmazione, come Adobe Dreamweaver. Segui queste istruzioni per aprire il file HTML da modificare all'interno del programma che hai scelto di usare:

Avvia il programma "Blocco note" o l'editor che preferisci;
Clicca sul menu File;
Clicca sulla voce Apri;
Seleziona il file HTML da aprire;
Clicca sul pulsante Apri.

Seleziona il punto del documento in cui vuoi inserire la linea orizzontale. Scorri il contenuto del file finché non individui la riga della pagina sopra la quale vuoi inserire la linea di separazione, quindi clicca sul punto posto all'estrema sinistra di quest'ultima, proprio dove inizia il testo.

Crea una nuova riga vuota. Premi due volte il tasto Invio in modo da spostare il testo verso il basso e creare lo spazio necessario per inserire il nuovo codice. A questo punto, sposta il cursore del mouse dove inizia la nuova riga di testo vuota.

Inserisci il tag "<hr>". Digita il codice <hr> all'inizio della nuova riga di testo che hai appena creato. Il tag <hr> è il codice che indica al browser di tracciare una linea orizzontale per tutta la larghezza della pagina.

Sposta il cursore del testo su una nuova riga. Premi il tasto Invio. In questo modo, il tag <hr> che hai inserito nel passaggio precedente dovrebbe occupare una sola riga del documento.

Aggiungi gli attributi per modificare lo stile della linea orizzontale (facoltativo). Se lo desideri, puoi personalizzare l'aspetto della linea orizzontale che hai creato utilizzando alcuni attributi, come "length" (lunghezza), "width" (ampiezza), "color" (colore) e "alignment" (allineamento). Inserisci i seguenti attributi all'interno delle parentesi angolari del tag "hr" subito dopo quest'ultimo. Puoi utilizzare contemporaneamente più attributi separandoli con uno spazio vuoto.^[2]

Digita il codice <hr size="[num]"> per modificare lo spessore della linea. Sostituisci il parametro "[num]" con il valore che indica lo spessore desiderato (per esempio size="10").
Digita il codice <hr width="[num]"> per modificare la lunghezza della linea. Sostituisci il parametro "[num]" con il valore che indica la lunghezza desiderata (per esempio width="200" o width="75%").
Digita il codice <hr color="[num]"> per modificare il colore che avrà la linea. Sostituisci il parametro "[num]" con il nome o il codice esadecimale del colore che vuoi utilizzare (per esempio color="red" o color="#FF0000")
Digita il codice <hr align="[code]"> per indicare come allineare la linea all'interno della pagina. Sostituisci il parametro "[code]" con il valore "right" (destra), "left" (sinistra) o "center" (centro) (per esempio <hr width="50%" align="center">).

Salva le modifiche apportate al file HTML. Per salvare un documento di testo in formato HTML, devi sostituire l'estensione del file (per esempio .txt o .docx) con l'estensione ".html". Segui queste istruzioni per salvare un file HTML:

Clicca sul menu File;
Clicca sulla voce Salva con nome;
Assegna un nome al file digitandolo all'interno del campo di testo "Nome file";
Aggiungi l'estensione .html alla fine del nome del file;
Clicca sul pulsante Salva.

Testa la funzionalità del file HTML. Per visualizzare il risultato dei tuoi sforzi, seleziona il file HTML con il tasto destro del mouse e scegli l'opzione Apri con dal menu contestuale che apparirà. A questo punto, scegli il browser internet che vuoi usare per visualizzare il documento HTML. Dove hai inserito il tag "hr" all'interno del codice sorgente HTML verrà visualizzata una linea orizzontale. Il codice HTML completo di una pagina di esempio dovrebbe apparire così:^[3]

<!DOCTYPE html>
<html>
<body>

<h1>Questa è un'intestazione di pagina</h1>

<hr size="6" width="50%" align="left" color="green">

<p1>Questo è un paragrafo di testo che è stato separato dal titolo utilizzando una linea orizzontale.</p1>

</body>
</html>

Metodo 2
CSS/HTML5

1

Apri un file HTML esistente oppure creane uno nuovo. I documenti HTML possono essere modificati utilizzando qualsiasi editor di testo, per esempio "Blocco note". In alternativa, puoi utilizzare un editor professionale per la programmazione, come Adobe Dreamweaver. Segui queste istruzioni per aprire il file HTML da modificare all'interno del programma che hai scelto di usare:

Avvia il programma "Blocco note" o l'editor che preferisci;
Clicca sul menu File;
Clicca sulla voce Apri;
Seleziona il file HTML da aprire;
Clicca sul pulsante Apri.

Aggiungi la sezione "head" al documento HTML. Se il codice sorgente in oggetto non presenta una sezione "head", segui queste istruzioni per crearla. La sezione "head" va inserita dopo il tag "<html>" e prima della sezione "<body>".

Digita il tag <head> all'inizio del documento;
Premi due volte il tasto Invio per creare due righe di testo vuote;
Digita il tag di chiusura </head> per completare la sezione.

Inserisci il codice <style type="text/css"> all'interno della sezione "head" del file. Il tag "style" va inserito all'interno dei due tag che delimitano la sezione "head". In questo modo creerai la sezione in cui potrai inserire il codice CSS per formattare lo stile e l'aspetto della pagina HTML.

In alternativa, puoi utilizzare un foglio di stile esterno al documento. Leggi questo articolo per scoprire come utilizzare un foglio di stile CSS esterno all'interno di un file HTML.

Digita il codice hr {. Si tratta del tag CSS che verrà utilizzato per formattare l'aspetto e lo stile delle linee orizzontali. Inseriscilo all'interno della sezione "head" del documento HTML, dopo il tag "style". Se hai scelto di utilizzare un foglio CSS esterno, dovrai creare la sezione "hr" all'interno di quest'ultimo.

Aggiungi gli attributi relativi allo stile e all'aspetto che dovrà avere la linea orizzontale. Inseriscili all'interno della sezione "<hr>". Tutti i parametri vanno inseriti dopo il tag "hr {". Puoi modificare l'aspetto di una linea orizzontale in molti modi diversi. Di seguito trovi alcuni esempi:

Aggiungi il codice width: ##px; per impostare la lunghezza della linea. Sostituisci il parametro "##" con il valore, espresso in pixel, che indica la lunghezza della linea. In questo caso puoi anche usare una percentuale (%) anziché i pixel (px).
Usa l'attributo height: ##px; per specificare lo spessore della linea. Sostituisci il parametro "##" con il valore, espresso in pixel, che indica lo spessore della linea.
Aggiungi il parametro background-color: ##; per impostare il colore della linea. Sostituisci il parametro "##" con il nome del colore da usare oppure con il codice esadecimale corrispondente. In quest'ultimo caso, dovrai aggiungere il simbolo "#" prima del codice del colore.
Usa l'attributo margin-right: ##px; per lasciare uno spazio vuoto fra il margine destro e la linea orizzontale. Sostituisci il parametro "##" con il numero di pixel o con il valore "auto". Se usi l'attributo "auto", la linea verrà allineata a sinistra o al centro della pagina.
Aggiungi l'attributo margin-left: ##px; per lasciare uno spazio vuoto fra il margine sinistro e la linea orizzontale. Sostituisci il parametro "##" con il numero di pixel o con il valore "auto". Se usi l'attributo "auto", la linea verrà allineata a destra o al centro della pagina.
Aggiungi il codice margin-top: ##px; per lasciare uno spazio vuoto fra il limite superiore della sezione che contiene la linea orizzontale e quest'ultima. Sostituisci il parametro "##" con il numero di pixel che desideri.
Usa l'attributo margin-bottom: ##px; per lasciare uno spazio vuoto fra il limite inferiore della sezione che contiene la linea orizzontale e quest'ultima. Sostituisci il parametro "##" con il numero di pixel che desideri.
Aggiungi il codice border-width: ##px; per creare un bordo attorno alla linea orizzontale (opzionale). Sostituisci il parametro "##" con il numero di pixel relativi allo spessore del bordo.
Usa l'attributo border-color: ##; per impostare un colore per il bordo (opzionale). Sostituisci il parametro "##" con il nome del colore da usare oppure con il codice esadecimale corrispondente. In quest'ultimo caso dovrai aggiungere il simbolo "#" prima del codice del colore.

Dopo aver inserito tutti gli attributi di stile che desideri, chiudi la sezione con il simbolo }. In questo modo la sezione del foglio CSS relativa all'elemento <hr> sarà completa.

Adesso usa il tag <hr> in qualsiasi punto della sezione "body" del codice sorgente HTML della pagina. In questo modo verrà tracciata una linea orizzontale nel punto indicato. Tutti gli attributi di stile che hai aggiunto nella sezione CSS del codice sorgente verranno utilizzati per formattare l'aspetto di tutte le linee indicate con il tag <hr>.^[4] A questo punto il tuo codice HTML dovrebbe essere simile al seguente:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

hr {
width: 50%;
height: 20px;
background-color: red;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;
border-width: 2px;
border-color: green;
}

</style>

</head>
<body>

<h1>Questa è un'intestazione di pagina</h1>

<hr>

<p1>Questo è un paragrafo di testo che è stato separato dal titolo utilizzando una linea orizzontale.</p1>

</body>
</html>

Riferimenti

Informazioni sull'Articolo

Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.

Categorie: Programmazione

In altre lingue:

English: Insert a Line in HTML, العربية: إدراج خط في لغة إتش تي إم إل, ไทย: ใส่เส้นนอนใน HTML, Português: Inserir Uma Linha em HTML, Français: insérer une ligne en HTML, Tiếng Việt: Chèn đường thẳng trong HTML, 中文: 在HTML中插入一行, Русский: добавить горизонтальную линию в HTML, Nederlands: Een horizontale lijn maken in HTML, Español: insertar una línea en HTML