Content

• Passos
• Mètode 1 de 2: Treballar en HTML 4.01
• Mètode 2 de 2: Treballar en CSS / HTML5

Aquest article us mostrarà com afegir una línia horitzontal en HTML. La línia horitzontal es pot utilitzar per separar el contingut del lloc. El codi per crear la línia és bastant senzill. No obstant això, a HTML 4.01, és possible canviar el disseny d'una línia mitjançant ordres internes. En HTML5, haureu d’utilitzar CSS per donar estil a la línia.

Passos

Mètode 1 de 2: Treballar en HTML 4.01

1. 1 Obriu un document existent o creeu un document HTML nou. Els documents HTML es poden editar amb un editor de text com Bloc de notes o un editor de codi especialitzat com Adobe Dreamweaver. Seguiu aquests passos per obrir un document HTML al programa que trieu:
   • Obriu el Bloc de notes o un altre editor de text / codi.
   • Obriu el menú Dossier.
   • Fer clic a Obert.
   • Seleccioneu el fitxer HTML.
   • Fer clic a Obert
2. 2 Seleccioneu la ubicació on voleu inserir la línia. Desplaceu-vos cap avall fins que trobeu la línia per sobre de la qual hauria d'aparèixer la línia i, a continuació, moveu el cursor directament al començament d'aquesta línia fent clic a l'extrem esquerre d'aquesta línia.
3. 3 Afegiu una línia buida. Doble toc ↵ Introduïuper moure cap avall el text abans del qual voleu inserir una línia i, a continuació, col·loqueu el cursor sobre una línia buida.
4. 4 Afegiu l'etiqueta hr. Entra h> a l'espai en blanc al començament de la línia. Etiqueta h> us permet dibuixar una línia horitzontal a tota la pàgina.
5. 5 Premeu el cursor després de l'etiqueta "hr" a una nova línia ↵ Introduïu. Ara l’etiqueta h> hauria d’estar en una línia separada.
6. 6 Afegiu atributs a la línia horitzontal (opcional). Afegiu atributs com ara la longitud, el gruix, el color i l'alineació. Incloeu-los en claus immediatament després de la "hr". Per afegir diversos atributs, separeu-los amb un espai.
   • Entra hr size = "#">per canviar el gruix de la línia. Substituïu "#" per un valor de gruix numèric (per exemple, mida = "10").
   • Entra h width = "#">per canviar l'amplada de la línia. Substituïu "#" pel nombre de píxels o un percentatge de l'amplada de la pàgina (per exemple, width = "200" o width = "75%").
   • Entra hr color = "#">per canviar el color de la línia. Substituïu "#" pel nom del color o el seu codi hexadecimal (per exemple, color = "vermell" o color = "# FF0000").
   • Entra hr align = "#">per alinear la línia. Substitueix "#" per "dreta" (dreta), "esquerra" (esquerra) o "central" (centre) (per exemple, hr width = "50%" align = "center">).
7. 7 Deseu el fitxer HTML. Per desar un fitxer de text com a document HTML, heu de canviar l'extensió del fitxer (.txt, .docx) a ".html". Seguiu aquests passos per desar el document HTML:
   • Obriu el menú Dossier.
   • Fer clic a Guardar com.
   • Introduïu un nom per al fitxer al camp Nom del fitxer.
   • Afegeix .html després del nom del fitxer.
   • Fer clic a Desa.
8. 8 Consulteu el vostre document HTML. Per comprovar el fitxer HTML, feu-hi clic amb el botó dret i trieu Obre amb. A continuació, seleccioneu el navegador web. Hauria d'aparèixer una línia contínua on heu inserit l'etiqueta "hr". El codi HTML tindrà un aspecte semblant a aquest:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Aquesta línia s'ha de separar de l'encapçalament per una línia . / P1> / body> / html>

Mètode 2 de 2: Treballar en CSS / HTML5

1. 1 Obriu un document existent o creeu un document HTML nou. Els documents HTML es poden editar amb un editor de text com ara Bloc de notes o un editor de codi especialitzat com Adobe Dreamweaver. Seguiu aquests passos per obrir un document HTML al programa que trieu:
   • Obriu el Bloc de notes o un altre editor de text / codi.
   • Obriu el menú Dossier.
   • Fer clic a Obert.
   • Seleccioneu el fitxer HTML.
   • Fer clic a Obert
2. 2 Afegiu un títol al vostre document HTML. Si el vostre document HTML encara no té cap títol, seguiu aquests passos per afegir-ne un. L'encapçalament ha d'anar després de l'etiqueta html> i abans de l'etiqueta body>.
   • Entra cap> a la part superior del document.
   • Doble toc ↵ Introduïuper afegir dues línies noves.
   • Entra / cap>per tancar el títol.
3. 3 Entra style type = "text / css"> dins de la capçalera. L'etiqueta d'estil es col·loca entre les dues etiquetes d'encapçalament per crear un lloc on podeu utilitzar CSS per modificar el disseny HTML.
   • Com a alternativa, podeu utilitzar un full d’estil extern. Llegeix l'article "Com inserir un fitxer CSS a HTML»Per obtenir informació sobre com enllaçar un fitxer CSS extern amb un fitxer HTML.
4. 4 Entra h {. Aquesta és l'etiqueta CSS per a l'estil de la línia horitzontal. Afegiu-lo després de l'etiqueta "style" a la capçalera o al fitxer CSS extern.
5. 5 Afegiu estils CSS per a l'etiqueta hr>. Han de venir després de l'etiqueta "hr {". Una línia horitzontal es pot dissenyar de diverses maneres. A continuació es mostren alguns d’ells.
   • Entra amplada: ## px;per ajustar l'amplada de la línia. Substitueix "##" per l'amplada de la línia en píxels. En lloc de píxels (px), podeu utilitzar un percentatge (%).
   • Entra alçada: ## px;per ajustar el pes de la línia. Substitueix "##" per l'amplada de la línia en píxels.
   • Entra color de fons: ##;per especificar el color de la línia. Substituïu "##" per un nom de color o hash (#) seguit d'un codi de color hexadecimal.
   • Entra marge-dreta: ## px;per especificar el nombre de píxels de la vora dreta. Substituïu "##" per un nombre numèric de píxels o el codi "automàtic". Introduïu "automàtic" per alinear la línia a l'esquerra o al centre.
   • Entra marge-esquerra: ## px;per especificar el nombre de píxels de la vora esquerra. Substituïu "##" per un nombre numèric de píxels o el codi "automàtic". Introduïu "automàtic" per alinear la línia a la dreta o al centre.
   • Entra margin-top: ## px; per especificar el farciment superior de la línia. Substituïu "##" per un número corresponent al farciment en píxels.
   • Entra marge-fons: ## px;per especificar el farciment inferior de la línia. Substituïu "##" per un número corresponent al farciment en píxels.
   • Entra ample de vora: ## px;per dibuixar un quadre al voltant de la línia (opcional). Substituïu "##" per un número que correspongui a l'amplada de la vora en píxels.
   • Entra color de la vora: ##;per especificar el color de la vora (opcional). Substituïu "##" per un nom de color o hash (#) seguit d'un codi de color hexadecimal.
6. 6 Entra } després dels atributs d'estil per completar l'estil de l'etiqueta hr>.
7. 7 Entra h> a qualsevol part del cos del document HTML per afegir una línia horitzontal. La configuració de l'estil CSS s'aplicarà cada vegada que utilitzeu l'etiqueta hr> al document HTML. El vostre codi hauria de ser semblant a aquest:

   ! DOCTYPE html> html> head> style type = "text / css"> h {width: 50%; alçada: 20 px; color de fons: vermell; marge-dreta: automàtic; marge-esquerra: automàtic; marge superior: 5 px; marge-fons: 5 px; amplada de la vora: 2 px; color de la vora: verd; } / style> / head> body> h1> Heading / h1> hr> p1> Aquesta línia s'ha de separar del títol per una línia horitzontal / p1> / body> / html>