Come Inserire una Linea Orizzontale in HTML

Scarica PDF
Co-redatto da Lo Staff di wikiHow

Scarica PDF

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
Metodo 1 di 2:

HTML 4.01

Scarica PDF
  1. Immagine titolata 658928 1 1
    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.
  2. Immagine titolata 658928 2 1
    2
    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.
  3. Immagine titolata 658928 3 1
    3
    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.
  4. Immagine titolata 658928 4 1
    4
    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.
  5. Immagine titolata 658928 5 1
    5
    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.
  6. Immagine titolata 658928 6 1
    6
    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">).
  7. Immagine titolata 658928 7 1
    7
    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.
  8. Immagine titolata 658928 8 1
    8
    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>
    Pubblicità
Metodo 2
Metodo 2 di 2:

CSS/HTML5

Scarica PDF
  1. Immagine titolata 658928 9 1
    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.
  2. Immagine titolata 658928 10 1
    2
    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.
  3. Immagine titolata 658928 11 1
    3
    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.
  4. Immagine titolata 658928 12 1
    4
    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.
  5. Immagine titolata 658928 13 1
    5
    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.
  6. Immagine titolata 658928 14 1
    6
    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.
  7. Immagine titolata 658928 15 1
    7
    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>
    Pubblicità

wikiHow Correlati

Hackerare
Come
Hackerare
Impostare la Larghezza e l'Altezza di un Immagine in HTML
Come
Impostare la Larghezza e l'Altezza di un Immagine in HTML
Aggiungere un Link a un'Immagine
Come
Aggiungere un Link a un'Immagine
Aprire un File XML
Come
Aprire un File XML
Diventare un Hacker
Come
Diventare un Hacker
Compilare un Programma C Utilizzando il Compilatore GNU GCC
Come
Compilare un Programma C Utilizzando il Compilatore GNU GCC
Compilare ed Eseguire un Programma Java Utilizzando il Prompt dei Comandi
Come
Compilare ed Eseguire un Programma Java Utilizzando il Prompt dei Comandi
Digitare un TrattinoIl modo migliore per Digitare un Trattino
Creare un Virus
Come
Creare un Virus
Come
Aprire i File .DLL
Aprire un File '.Dat'
Come
Aprire un File '.Dat'
Come
Inserire gli Spazi in HTML
Usare Notepad++
Come
Usare Notepad++
Reimpostare la Password dell'Utente SA in SQL Server
Come
Reimpostare la Password dell'Utente SA in SQL Server
Pubblicità

Riferimenti

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ http://www.myhtmltutorials.com/line.html
  3. ↑ https://www.w3schools.com/TAGS/tag_hr.asp
  4. ↑ https://love2dev.com/blog/html-horizontal-line/

Informazioni su questo wikiHow

Lo Staff di wikiHow
Co-redatto da:
Lo Staff di wikiHow
Staff di wikiHow - Redazione
Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.

Il Content Management Team di wikiHow controlla con cura il lavoro dello staff di redattori per assicurarsi che ogni articolo incontri i nostri standard di qualità. Questo articolo è stato visualizzato 26 088 volte
Categorie: Programmazione
In altre lingue
Questa pagina è stata letta 26 088 volte.

Hai trovato utile questo articolo?

Pubblicità