Hvernig á að bæta láréttri línu við HTML

Höfundur: Virginia Floyd
Sköpunardag: 14 Ágúst 2021
Uppfærsludagsetning: 1 Júlí 2024
Anonim
Hvernig á að bæta láréttri línu við HTML - Samfélag
Hvernig á að bæta láréttri línu við HTML - Samfélag

Efni.

Þessi grein mun sýna þér hvernig á að bæta við láréttri línu í HTML. Hægt er að nota lárétta línu til að aðgreina efni á vefnum. Kóðinn til að búa til línuna er frekar einfaldur. Hins vegar, í HTML 4.01, er hægt að breyta hönnun línu með innri skipunum. Í HTML5 þarftu að nota CSS til að stíla línuna.

Skref

Aðferð 1 af 2: Vinna í HTML 4.01

  1. 1 Opnaðu núverandi eða búðu til nýtt HTML skjal. Hægt er að breyta HTML skjölum með textaritli eins og Notepad eða sérhæfðum kóða ritstjóra eins og Adobe Dreamweaver. Fylgdu þessum skrefum til að opna HTML skjal í forritinu að eigin vali:
    • Opnaðu Notepad eða annan texta / kóða ritstjóra.
    • Opnaðu matseðilinn Skrá.
    • Smelltu á Opið.
    • Veldu HTML skrána.
    • Smelltu á Opið
  2. 2 Veldu staðsetningu þar sem þú vilt setja línuna inn. Skrunaðu niður þar til þú finnur línuna fyrir ofan sem línan ætti að birtast og færðu síðan bendilinn beint að upphafi þeirrar línu með því að smella lengst til vinstri á þeirri línu.
  3. 3 Bættu við tómri línu. Tvíklikka Sláðu inntil að færa textann sem þú vilt setja línu á undan og setja bendilinn á tóma línu.
  4. 4 Bættu við hr> merki. Koma inn hr> í eyða bilið í upphafi línunnar. Merki hr> gerir þér kleift að teikna lárétta línu yfir alla síðuna.
  5. 5 Færðu bendilinn á eftir „hr“ merkinu í nýja línu með því að ýta á Sláðu inn. Nú merkið hr> ætti að vera á sérstakri línu.
  6. 6 Bættu eiginleikum við lárétta línuna (valfrjálst). Bættu við eiginleikum eins og lengd, þykkt, lit og röðun. Lokaðu þeim í hrokkið axlabönd strax eftir „hr“. Til að bæta við mörgum eiginleikum, aðskildu þá með bili.
    • Koma inn hr stærð = "#">að breyta þykkt línunnar. Skipta „#“ út fyrir númerþykktargildi (til dæmis stærð = „10“).
    • Koma inn hr breidd = "#">að breyta línubreiddinni. Skiptu út „#“ fyrir fjölda pixla eða hlutfall af breidd síðunnar (til dæmis breidd = „200“ eða breidd = „75%“).
    • Koma inn hr color = "#">að breyta línulit. Skiptu út „#“ með nafni litarins eða sextölu kóða hans (til dæmis litur = „rauður“ eða litur = „# FF0000“).
    • Koma inn hr align = "#">að stilla línuna. Skipta út „#“ fyrir „hægri“ (hægri), „vinstri“ (vinstri) eða „miðju“ (miðju) (til dæmis, hr breidd = "50%" align = "miðja">).
  7. 7 Vista HTML skrána. Til að vista textaskrá sem HTML skjal verður þú að breyta skráarviðbótinni (.txt, .docx) í ".html". Fylgdu þessum skrefum til að vista HTML skjalið þitt:
    • Opnaðu matseðilinn Skrá.
    • Smelltu á Vista sem.
    • Sláðu inn heiti fyrir skrána í reitnum Skráarheiti.
    • Bæta við .html á eftir skráarnafninu.
    • Smelltu á Vista.
  8. 8 Athugaðu HTML skjalið þitt. Til að athuga HTML skrána, hægrismelltu á hana og veldu Opna með. Veldu síðan vafrann þinn. Heil lína ætti að birtast þar sem þú settir inn „hr“ merkið. HTML kóðinn mun líta svona út:

      ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Þessi lína ætti að aðskilja frá fyrirsögninni með línu . / P1> / body> / html>

Aðferð 2 af 2: Vinna í CSS / HTML5

  1. 1 Opnaðu núverandi eða búðu til nýtt HTML skjal. Hægt er að breyta HTML skjölum með textaritli eins og Notepad eða sérhæfðum kóða ritstjóra eins og Adobe Dreamweaver. Fylgdu þessum skrefum til að opna HTML skjal í forritinu að eigin vali:
    • Opnaðu Notepad eða annan texta / kóða ritstjóra.
    • Opnaðu matseðilinn Skrá.
    • Smelltu á Opið.
    • Veldu HTML skrána.
    • Smelltu á Opið
  2. 2 Bættu titli við HTML skjalið þitt. Ef HTML skjalið þitt er ekki þegar með fyrirsögn skaltu fylgja þessum skrefum til að bæta því við. Fyrirsögnin verður að fara á eftir html> merkinu og á undan body> merkinu.
    • Koma inn höfuð> efst í skjalinu.
    • Tvíklikka Sláðu innað bæta við tveimur nýjum línum.
    • Koma inn / höfuð>að loka titlinum.
  3. 3 Koma inn stílgerð = "texti / css"> inni í hausnum. Stílmerkið er sett á milli fyrirsagnamerkjanna tveggja til að búa til stað þar sem þú getur notað CSS til að breyta HTML hönnuninni.
    • Að öðrum kosti getur þú notað ytra stílblað. Lestu greinina „Hvernig á að setja CSS skrá inn í HTML»Til að læra hvernig á að tengja ytri CSS skrá við HTML skrá.
  4. 4 Koma inn klst {. Þetta er CSS merkið til að hanna lárétta línu. Bættu því við eftir „style“ merkinu í hausnum þínum eða ytri CSS skránni.
  5. 5 Bættu CSS stíl við hr> merkið. Þeir verða að koma á eftir „hr {“ merkinu. Hægt er að stíla lárétta línu með margvíslegum hætti. Hér að neðan eru nokkrar þeirra.
    • Koma inn breidd: ## px;til að stilla línubreiddina. Skiptið „##“ út fyrir línubreiddina í pixlum. Í stað pixla (px) geturðu notað prósentu (%).
    • Koma inn hæð: ## px;að stilla línuþyngdina. Skiptið „##“ út fyrir línubreiddina í pixlum.
    • Koma inn bakgrunns litur: ##;að tilgreina línulit. Skiptu „##“ út fyrir litaheiti eða kjötkássa (#) og síðan á hexadecimal litakóða.
    • Koma inn framlegð-hægri: ## px;til að tilgreina fjölda pixla frá hægri brún. Skiptu út „##“ fyrir númera pixla eða kóða „sjálfvirkt“. Sláðu inn „sjálfvirkt“ til að stilla línuna til vinstri eða miðju.
    • Koma inn framlegð-vinstri: ## px;til að tilgreina fjölda pixla frá vinstri brún. Skipta út „##“ fyrir númera pixla eða kóða „sjálfvirkt“. Sláðu inn „sjálfvirkt“ til að stilla línuna til hægri eða miðju.
    • Koma inn framlegð: ## px; að tilgreina efsta bólstrun fyrir línuna. Skiptið „##“ út fyrir númer sem samsvarar bólstrun í pixlum.
    • Koma inn framlegð-botn: ## px;að tilgreina botnfóðringuna fyrir línuna. Skiptið „##“ út fyrir númer sem samsvarar bólstrun í pixlum.
    • Koma inn landamærisbreidd: ## px;að teikna kassa utan um línuna (valfrjálst). Skiptið „##“ út fyrir númer sem samsvarar breidd landamæranna í pixlum.
    • Koma inn border-litur: ##;til að tilgreina jaðarlitinn (valfrjálst). Skiptu „##“ út fyrir litaheiti eða kjötkássa (#) og síðan á hexadecimal litakóða.
  6. 6 Koma inn } eftir stíleiginleikum til að ljúka stíl fyrir hr> merkið.
  7. 7 Koma inn hr> hvar sem er í meginmáli HTML skjalsins til að bæta við láréttri línu. CSS stílstillingunum verður beitt í hvert skipti sem þú notar hr> merkið í HTML skjalinu þínu. Kóðinn þinn ætti að líta svona út:

      ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; hæð: 20px; bakgrunnslitur: rauður; framlegð-hægri: sjálfvirk; framlegð-vinstri: sjálfvirk; framlegð: 5px; framlegð-botn: 5px; landamærisbreidd: 2px; jaðarlitur: grænn; } / style> / head> body> h1> Heading / h1> hr> p1> Þessi lína ætti að aðskilja frá fyrirsögninni með láréttri línu / p1> / body> / html>