Contenuto

• Passi
• Metodo 1 di 2: Lavorare in HTML 4.01
• Metodo 2 di 2: Lavorare in CSS/HTML5

Questo articolo ti mostrerà come aggiungere una linea orizzontale in HTML. La linea orizzontale può essere utilizzata per separare i contenuti del sito. Il codice per creare la linea è abbastanza semplice. Tuttavia, in HTML 4.01, è possibile modificare il design di una linea utilizzando i comandi interni. In HTML5, dovrai usare i CSS per modellare la linea.

Passi

Metodo 1 di 2: Lavorare in HTML 4.01

1. 1 Apri un documento esistente o crea un nuovo documento HTML. I documenti HTML possono essere modificati con un editor di testo come Blocco note o un editor di codice specializzato come Adobe Dreamweaver. Segui questi passaggi per aprire un documento HTML nel programma che preferisci:
   • Apri Blocco note o un altro editor di testo/codice.
   • Apri il menu File.
   • Clicca su Aprire.
   • Seleziona il file HTML.
   • Clicca su Aprire
2. 2 Seleziona la posizione in cui desideri inserire la linea. Scorri verso il basso fino a trovare la riga sopra la quale dovrebbe apparire, quindi sposta il cursore direttamente all'inizio di quella riga facendo clic sull'estrema sinistra di quella riga.
3. 3 Aggiungi una riga vuota. Doppio tap Entraper spostare in basso il testo prima del quale si desidera inserire una riga, quindi posizionare il cursore su una riga vuota.
4. 4 Aggiungi hr> tag. accedere h> nello spazio vuoto all'inizio della riga. Etichetta h> consente di tracciare una linea orizzontale sull'intera pagina.
5. 5 Spostare il cursore dopo il tag "hr" su una nuova riga premendo Entra. Ora il tag h> dovrebbe essere su una linea separata.
6. 6 Aggiungi attributi alla linea orizzontale (opzionale). Aggiungi attributi come lunghezza, spessore, colore e allineamento. Racchiudili tra parentesi graffe subito dopo "hr". Per aggiungere più attributi, separali con uno spazio.
   • accedere hr size = "#">per modificare lo spessore della linea. Sostituisci "#" con un valore di spessore numerico (ad esempio, size = "10").
   • accedere hr larghezza = "#">per modificare la larghezza della linea. Sostituisci "#" con il numero di pixel o una percentuale della larghezza della pagina (ad esempio, larghezza = "200" o larghezza = "75%").
   • accedere hr color = "#">per cambiare il colore della linea. Sostituisci "#" con il nome del colore o il suo codice esadecimale (ad esempio color = "red" o color = "# FF0000").
   • accedere hr align = "#">per allineare la linea. Sostituisci "#" con "destra" (destra), "sinistra" (sinistra) o "centro" (centro) (ad esempio, hr width = "50%" align = "center">).
7. 7 Salva il file HTML. Per salvare un file di testo come documento HTML, è necessario modificare l'estensione del file (.txt, .docx) in ".html". Segui questi passaggi per salvare il tuo documento HTML:
   • Apri il menu File.
   • Clicca su Salva come.
   • Immettere un nome per il file nel campo Nome file.
   • Aggiungere .html dopo il nome del file.
   • Clicca su Salva.
8. 8 Controlla il tuo documento HTML. Per controllare il file HTML, fai clic destro su di esso e scegli Apri con. Quindi seleziona il tuo browser web. Dovrebbe apparire una linea continua dove hai inserito il tag "hr". Il codice HTML sarà simile a questo:

   DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Questa riga deve essere separata dall'intestazione da una linea . / P1 > / corpo> / html>

Metodo 2 di 2: Lavorare in CSS/HTML5

1. 1 Apri un documento esistente o crea un nuovo documento HTML. I documenti HTML possono essere modificati con un editor di testo come Blocco note o un editor di codice specializzato come Adobe Dreamweaver. Segui questi passaggi per aprire un documento HTML nel programma che preferisci:
   • Apri Blocco note o un altro editor di testo/codice.
   • Apri il menu File.
   • Clicca su Aprire.
   • Seleziona il file HTML.
   • Clicca su Aprire
2. 2 Aggiungi un titolo al tuo documento HTML. Se il tuo documento HTML non ha già un'intestazione, segui questi passaggi per aggiungerne una. L'intestazione deve andare dopo il tag html> e prima del tag body>.
   • accedere testa> nella parte superiore del documento.
   • Doppio tap Entraper aggiungere due nuove righe.
   • accedere / testa>per chiudere il titolo.
3. 3 accedere tipo di stile = "testo / css"> all'interno dell'intestazione. Il tag di stile viene posizionato tra i due tag di intestazione per creare un luogo in cui è possibile utilizzare i CSS per modificare il design HTML.
   • In alternativa, puoi usare un foglio di stile esterno. Leggi l'articolo "Come inserire un file CSS in HTML»Per imparare a collegare un file CSS esterno a un file HTML.
4. 4 accedere ora {. Questo è il tag CSS per lo stile della linea orizzontale. Aggiungilo dopo il tag "stile" nell'intestazione o nel file CSS esterno.
5. 5 Aggiungi stili CSS per il tag hr>. Devono venire dopo il tag "hr {". Una linea orizzontale può essere stilizzata in vari modi. Di seguito sono alcuni di loro.
   • accedere larghezza: ## px;per regolare la larghezza della linea. Sostituisci "##" con la larghezza della linea in pixel. Invece dei pixel (px), puoi usare una percentuale (%).
   • accedere altezza: ## px;per regolare lo spessore della linea. Sostituisci "##" con la larghezza della linea in pixel.
   • accedere colore di sfondo: ##;per specificare il colore della linea. Sostituisci "##" con un nome di colore o un cancelletto (#) seguito da un codice colore esadecimale.
   • accedere margine destro: ## px;per specificare il numero di pixel dal bordo destro. Sostituisci "##" con un numero numerico di pixel o il codice "auto". Immettere "auto" per allineare la linea a sinistra o al centro.
   • accedere margine sinistro: ## px;per specificare il numero di pixel dal bordo sinistro. Sostituisci "##" con un numero numerico di pixel o il codice "auto". Immettere "auto" per allineare la linea a destra o al centro.
   • accedere margine superiore: ## px; per specificare l'imbottitura superiore per la linea. Sostituisci "##" con un numero corrispondente al padding in pixel.
   • accedere margine inferiore: ## px;per specificare l'imbottitura inferiore per la linea. Sostituisci "##" con un numero corrispondente al padding in pixel.
   • accedere larghezza del bordo: ## px;per disegnare un riquadro attorno alla linea (opzionale). Sostituisci "##" con un numero corrispondente alla larghezza del bordo in pixel.
   • accedere colore del bordo: ##;per specificare il colore del bordo (opzionale). Sostituisci "##" con un nome di colore o un cancelletto (#) seguito da un codice colore esadecimale.
6. 6 accedere } dopo gli attributi style per completare lo stile per il tag hr>.
7. 7 accedere h> ovunque nel corpo del documento HTML per aggiungere una linea orizzontale. Le impostazioni dello stile CSS verranno applicate ogni volta che utilizzi il tag hr> nel documento HTML. Il tuo codice dovrebbe assomigliare a questo:

   DOCTYPE html > html > head > style type = "text/css" > hr {width: 50%; altezza: 20px; colore di fondo: rosso; margine destro: auto; margine sinistro: auto; margine superiore: 5px; margine inferiore: 5px; larghezza del bordo: 2px; colore del bordo: verde; } /style>/head> body> h1> Heading / h1> hr> p1> Questa riga deve essere separata dall'intestazione da una linea orizzontale / p1> / body> / html>