Slik legger du til en horisontal linje i HTML

Video: Teach yourself HTML - Programming with Boris

Innhold

Trinn
Metode 1 av 2: Arbeide i HTML 4.01
Metode 2 av 2: Arbeide i CSS / HTML5

Denne artikkelen viser deg hvordan du legger til en horisontal linje i HTML. Den horisontale linjen kan brukes til å skille innhold på nettstedet. Koden for å lage linjen er ganske enkel. I HTML 4.01 er det imidlertid mulig å endre utformingen av en linje ved hjelp av interne kommandoer. I HTML5 må du bruke CSS for å style linjen.

Trinn

Metode 1 av 2: Arbeide i HTML 4.01

1 Åpne et eksisterende eller opprett et nytt HTML -dokument. HTML -dokumenter kan redigeres med et tekstredigeringsprogram som Notisblokk eller en spesialisert kodeditor som Adobe Dreamweaver. Følg disse trinnene for å åpne et HTML -dokument i programmet du ønsker:
- Åpne Notisblokk eller en annen tekst / kode -editor.
- Åpne menyen Fil.
- Klikk på Åpen.
- Velg HTML -filen.
- Klikk på Åpen
2 Velg stedet der du vil sette inn linjen. Rull ned til du finner linjen som linjen skal vises over, og flytt deretter markøren direkte til begynnelsen av linjen ved å klikke helt til venstre på linjen.
3 Legg til en tom linje. Dobbelttrykk Skriv innfor å flytte ned teksten du vil sette inn en linje før, og plasser deretter markøren på en tom linje.
4 Legg til hr> tag. Tast inn hr> til det tomme rommet i begynnelsen av linjen. stikkord hr> lar deg tegne en horisontal linje over hele siden.
5 Flytt markøren etter "hr" -taggen til en ny linje ved å trykke Skriv inn. Nå taggen hr> bør være på en egen linje.
6 Legg til attributter til den horisontale linjen (valgfritt). Legg til attributter som lengde, tykkelse, farge og justering. Omslutt dem i krøllete seler umiddelbart etter "timen". Hvis du vil legge til flere attributter, må du skille dem med et mellomrom.
- Tast inn hr size = "#">for å endre tykkelsen på linjen. Erstatt "#" med en numerisk tykkelsesverdi (for eksempel størrelse = "10").
- Tast inn hr width = "#">for å endre linjebredden. Erstatt "#" med antall piksler eller en prosentandel av sidebredden (for eksempel bredde = "200" eller bredde = "75%").
- Tast inn hr color = "#">for å endre linjefarge. Erstatt "#" med navnet på fargen eller den heksadesimale koden (for eksempel color = "red" eller color = "# FF0000").
- Tast inn hr align = "#">å justere linjen. Erstatt "#" med "høyre" (høyre), "venstre" (venstre) eller "sentrum" (midt) (for eksempel hr width = "50%" align = "center">).
7 Lagre HTML -filen. For å lagre en tekstfil som et HTML -dokument, må du endre filtypen (.txt, .docx) til ".html". Følg disse trinnene for å lagre HTML -dokumentet ditt:
- Åpne menyen Fil.
- Klikk på Lagre som.
- Skriv inn et navn på filen i Filnavn -feltet.
- Legg til .html etter filnavnet.
- Klikk på Lagre.
8 Sjekk HTML -dokumentet ditt. For å sjekke HTML-filen, høyreklikk på den og velg Åpne med. Velg deretter nettleseren din. En solid linje skal vises der du satte inn "hr" -taggen. HTML -koden vil se slik ut:

Metode 2 av 2: Arbeide i CSS / HTML5

1 Åpne et eksisterende eller opprett et nytt HTML -dokument. HTML -dokumenter kan redigeres med et tekstredigeringsprogram som Notisblokk eller en spesialisert kodeditor som Adobe Dreamweaver. Følg disse trinnene for å åpne et HTML -dokument i programmet du ønsker:
- Åpne Notisblokk eller en annen tekst / kode -editor.
- Åpne menyen Fil.
- Klikk på Åpen.
- Velg HTML -filen.
- Klikk på Åpen
2 Legg til en tittel i HTML -dokumentet. Hvis HTML -dokumentet ikke allerede har en overskrift, følger du denne fremgangsmåten for å legge til en. Overskriften må gå etter html> -taggen og før brødteksten> -taggen.
- Tast inn hode> øverst i dokumentet.
- Dobbelttrykk Skriv innfor å legge til to nye linjer.
- Tast inn / hode>for å lukke tittelen.
3 Tast inn style type = "text / css"> inne i overskriften. Stilkoden plasseres mellom de to overskriftskodene for å skape et sted hvor du kan bruke CSS til å endre HTML -designet.
- Alternativt kan du bruke et eksternt stilark. Les artikkelen "Slik setter du inn en CSS -fil i HTML»For å lære hvordan du kobler en ekstern CSS -fil til en HTML -fil.
4 Tast inn t {. Dette er CSS -taggen for styling av den horisontale linjen. Legg den til etter "style" -taggen i toppteksten eller den eksterne CSS -filen.
5 Legg til CSS -stiler for hr> -taggen. De må komme etter "hr {" -taggen. En horisontal linje kan utformes på en rekke måter. Nedenfor er noen av dem.
- Tast inn bredde: ## px;for å justere linjebredden. Erstatt "##" med linjebredden i piksler. I stedet for piksler (px) kan du bruke en prosentandel (%).
- Tast inn høyde: ## px;for å justere linjens vekt. Erstatt "##" med linjebredden i piksler.
- Tast inn bakgrunnsfarge: ##;for å angi linjefarge. Erstatt "##" med et fargenavn eller hash (#) etterfulgt av en heksadesimal fargekode.
- Tast inn margin-høyre: ## px;for å angi antall piksler fra høyre kant. Erstatt "##" med et numerisk antall piksler eller koden "auto". Skriv inn "auto" for å justere linjen til venstre eller midt.
- Tast inn margin-venstre: ## px;for å angi antall piksler fra venstre kant. Erstatt "##" med et numerisk antall piksler eller koden "auto". Skriv inn "auto" for å justere linjen til høyre eller midt.
- Tast inn margin-top: ## px; for å spesifisere den øverste polstringen for linjen. Erstatt "##" med et tall som tilsvarer polstring i piksler.
- Tast inn margin-bottom: ## px;for å spesifisere den nederste polstringen for linjen. Erstatt "##" med et tall som tilsvarer polstring i piksler.
- Tast inn kantbredde: ## px;å tegne en boks rundt streken (valgfritt). Erstatt "##" med et tall som tilsvarer bredden på grensen i piksler.
- Tast inn grensefarge: ##;for å angi kantfargen (valgfritt). Erstatt “##” med et fargenavn eller en hash (#) etterfulgt av en heksadesimal fargekode.
6 Tast inn } etter stilattributtene for å fullføre stylingen for taggen hr>.
7 Tast inn hr> hvor som helst i hoveddelen av HTML -dokumentet for å legge til en horisontal linje. CSS -stilinnstillingene blir brukt hver gang du bruker hr> -taggen i HTML -dokumentet. Koden din skal se slik ut: