Innehåll

• Steg
• Metod 1 av 2: Arbeta i HTML 4.01
• Metod 2 av 2: Arbeta i CSS / HTML5

Den här artikeln visar hur du lägger till en horisontell linje i HTML. Den horisontella linjen kan användas för att separera innehåll på webbplatsen. Koden för att skapa raden är ganska enkel. Men i HTML 4.01 är det möjligt att ändra utformningen av en rad med interna kommandon. I HTML5 måste du använda CSS för att utforma raden.

Steg

Metod 1 av 2: Arbeta i HTML 4.01

1. 1 Öppna ett befintligt eller skapa ett nytt HTML -dokument. HTML -dokument kan redigeras med en textredigerare som Anteckningar eller en specialiserad kodredigerare som Adobe Dreamweaver. Följ dessa steg för att öppna ett HTML -dokument i det program du väljer:
   • Öppna Anteckningar eller annan text- / kodredigerare.
   • Öppna menyn Fil.
   • Klicka på Öppen.
   • Välj HTML -filen.
   • Klicka på Öppen
2. 2 Välj den plats där du vill infoga raden. Rulla ner tills du hittar raden ovanför vilken raden ska visas, och flytta sedan markören direkt till början av raden genom att klicka längst till vänster på raden.
3. 3 Lägg till en tom rad. Dubbelklicka ↵ Angeför att flytta ner texten före vilken du vill infoga en rad och placera sedan markören på en tom rad.
4. 4 Lägg till hr> tagg. Stiga på hr> till det tomma utrymmet i början av raden. Märka hr> låter dig rita en horisontell linje över hela sidan.
5. 5 Flytta markören efter "hr" -taggen till en ny rad genom att trycka på ↵ Ange. Nu taggen hr> bör vara på en separat linje.
6. 6 Lägg till attribut till den horisontella linjen (valfritt). Lägg till attribut som längd, tjocklek, färg och inriktning. Omslut dem i lockiga hängslen omedelbart efter "timmen". För att lägga till flera attribut, separera dem med ett mellanslag.
   • Stiga på hr size = "#">för att ändra tjockleken på linjen. Ersätt "#" med ett numeriskt tjockleksvärde (till exempel storlek = "10").
   • Stiga på hr bredd = "#">för att ändra linjebredden. Ersätt "#" med antalet pixlar eller en procentandel av sidbredden (till exempel bredd = "200" eller bredd = "75%").
   • Stiga på hr color = "#">för att ändra linjens färg. Ersätt "#" med namnet på färgen eller dess hexadecimala kod (till exempel color = "red" eller color = "# FF0000").
   • Stiga på hr align = "#">för att justera linjen. Ersätt "#" med "höger" (höger), "vänster" (vänster) eller "mitt" (mitt) (t.ex. timbredd = "50%" align = "center">).
7. 7 Spara HTML -filen. För att spara en textfil som ett HTML -dokument måste du ändra filtillägget (.txt, .docx) till ".html". Följ dessa steg för att spara ditt HTML -dokument:
   • Öppna menyn Fil.
   • Klicka på Spara som.
   • Ange ett namn för filen i fältet Filnamn.
   • Lägg till .html efter filnamnet.
   • Klicka på Spara.
8. 8 Kontrollera ditt HTML -dokument. För att kontrollera HTML-filen, högerklicka på den och välj Öppna med. Välj sedan din webbläsare. En heldragen linje ska visas där du infogade "hr" -taggen. HTML -koden kommer att se ut ungefär så här:

   ! DOCTYPE html> html> body> h1> Rubrik / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Denna rad bör skiljas från rubriken med en rad . / P1> / body> / html>

Metod 2 av 2: Arbeta i CSS / HTML5

1. 1 Öppna ett befintligt eller skapa ett nytt HTML -dokument. HTML -dokument kan redigeras med en textredigerare som Anteckningar eller en specialiserad kodredigerare som Adobe Dreamweaver. Följ dessa steg för att öppna ett HTML -dokument i det program du väljer:
   • Öppna Anteckningar eller annan text- / kodredigerare.
   • Öppna menyn Fil.
   • Klicka på Öppen.
   • Välj HTML -filen.
   • Klicka på Öppen
2. 2 Lägg till en titel till ditt HTML -dokument. Om ditt HTML -dokument inte redan har en rubrik följer du dessa steg för att lägga till en. Rubriken måste gå efter html> -taggen och före body> -taggen.
   • Stiga på huvud> högst upp i dokumentet.
   • Dubbelklicka ↵ Angeför att lägga till två nya rader.
   • Stiga på / huvud>för att stänga titeln.
3. 3 Stiga på style type = "text / css"> inuti rubriken. Stiltaggen placeras mellan de två rubriktaggarna för att skapa en plats där du kan använda CSS för att ändra HTML -designen.
   • Alternativt kan du använda ett externt formatmall. Läs artikeln "Hur man sätter in en CSS -fil i HTML»För att lära dig hur du länkar en extern CSS -fil till en HTML -fil.
4. 4 Stiga på hr {. Detta är CSS -taggen för styling av den horisontella linjen. Lägg till den efter "style" -taggen i din rubrik eller externa CSS -fil.
5. 5 Lägg till CSS -format för taggen hr>. De måste komma efter taggen "hr {". En horisontell linje kan utformas på olika sätt. Nedan följer några av dem.
   • Stiga på bredd: ## px;för att justera linjebredden. Ersätt "##" med radbredden i pixlar. I stället för pixlar (px) kan du använda en procentsats (%).
   • Stiga på höjd: ## px;för att justera linjevikten. Ersätt "##" med radbredden i pixlar.
   • Stiga på bakgrundsfärg: ##;för att ange linjens färg. Ersätt "##" med ett färgnamn eller hash (#) följt av en hexadecimal färgkod.
   • Stiga på marginal-höger: ## px;för att ange antalet pixlar från högerkant. Ersätt "##" med ett numeriskt antal pixlar eller koden "auto". Ange "auto" för att justera linjen till vänster eller mitt.
   • Stiga på marginal-vänster: ## px;för att ange antalet pixlar från vänster kant. Ersätt "##" med ett numeriskt antal pixlar eller koden "auto". Ange "auto" för att justera linjen till höger eller mitt.
   • Stiga på marginal-topp: ## px; för att ange den övre vadderingen för linjen. Ersätt "##" med ett nummer som motsvarar vadderingen i pixlar.
   • Stiga på marginal-botten: ## px;för att ange den nedre vadderingen för raden. Ersätt "##" med ett nummer som motsvarar vadderingen i pixlar.
   • Stiga på kantbredd: ## px;att rita en ruta runt linjen (valfritt). Ersätt "##" med ett tal som motsvarar bredden på gränsen i pixlar.
   • Stiga på gräns färg: ##;för att ange kantfärg (valfritt). Ersätt “##” med ett färgnamn eller hash (#) följt av en hexadecimal färgkod.
6. 6 Stiga på } efter stilattributen för att slutföra stylingen för taggen hr>.
7. 7 Stiga på hr> var som helst i HTML -dokumentets kropp för att lägga till en horisontell linje. CSS -stilinställningarna tillämpas varje gång du använder taggen hr> i ditt HTML -dokument. Din kod ska se ut ungefär så här:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; höjd: 20px; bakgrundsfärg: röd; marginal-höger: auto; marginal-vänster: auto; marginal-topp: 5px; marginal-botten: 5px; kantbredd: 2px; kantfärg: grön; } / style> / head> body> h1> Rubrik / h1> hr> p1> Denna rad ska separeras från rubriken med en horisontell linje / p1> / body> / html>