Questo articolo è stato co-redatto da Travis Boylls. Travis Boylls è uno Scrittore ed Editor esperto di Tecnologia che collabora con wikiHow. Ha esperienza in scrittura di articoli relazionati alla tecnologia, fornitura di software per il servizio clienti e progettazione grafica. È specializzato in piattaforme Windows, macOS, Android, iOS e Linux. Ha studiato graphic design al Pikes Peak Community College.
Questo articolo è stato visualizzato 7 381 volte
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]
Passaggi
Metodo 1 di 2:
HTML 4.01
-
1Apri 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:Pubblicità
- 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.
- 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">).
- 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.
<!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 di 2:
CSS/HTML5
-
1Apri 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:Pubblicità
- 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.
- 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.
- 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.
- 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.
<!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>