Kako HTML dodati vodoravno črto

Avtor: Virginia Floyd
Datum Ustvarjanja: 14 Avgust 2021
Datum Posodobitve: 1 Julij. 2024
Anonim
How To Add Horizontal Line In HTML -  html Coding Horizontal Line  |  HTML tutorials Tags| Lecture 4
Video.: How To Add Horizontal Line In HTML - html Coding Horizontal Line | HTML tutorials Tags| Lecture 4

Vsebina

Ta članek vam bo pokazal, kako dodati vodoravno črto v HTML. Vodoravno črto lahko uporabite za ločevanje vsebine na spletnem mestu. Koda za ustvarjanje vrstice je precej preprosta. Vendar pa je v HTML 4.01 mogoče spremeniti obliko vrstice z uporabo notranjih ukazov. V HTML5 boste morali za oblikovanje vrstice uporabiti CSS.

Koraki

Metoda 1 od 2: Delo v HTML 4.01

  1. 1 Odprite obstoječi ali ustvarite nov dokument HTML. Dokumente HTML lahko urejate z urejevalnikom besedil, kot je Notepad, ali specializiranim urejevalnikom kod, kot je Adobe Dreamweaver. Če želite odpreti dokument HTML v izbranem programu, sledite tem korakom:
    • Odprite Beležnico ali drug urejevalnik besedil / kod.
    • Odprite meni mapa.
    • Kliknite na Odprto.
    • Izberite datoteko HTML.
    • Kliknite na Odprto
  2. 2 Izberite mesto, kamor želite vstaviti vrstico. Pomaknite se navzdol, dokler ne najdete vrstice, nad katero bi se morala prikazati črta, nato pa premaknite kazalec neposredno na začetek vrstice s klikom na skrajno levo od te vrstice.
  3. 3 Dodajte prazno vrstico. Dvakrat se dotaknite ↵ Vnesite, da se pomaknete navzdol po besedilu, pred katero želite vstaviti vrstico, nato pa kazalec postavite na prazno vrstico.
  4. 4 Dodaj oznako hr>. Vnesite hr> na prazen prostor na začetku vrstice. Oznaka hr> omogoča risanje vodoravne črte po celotni strani.
  5. 5 Premaknite kazalec za oznako "hr" v novo vrstico s pritiskom na ↵ Vnesite. Zdaj oznaka hr> mora biti v ločeni vrstici.
  6. 6 Vodoravni črti dodajte atribute (neobvezno). Dodajte atribute, kot so dolžina, debelina, barva in poravnava. Takoj po "hr" jih zavijte v zavite oklepaje. Če želite dodati več atributov, jih ločite s presledkom.
    • Vnesite hr size = "#">spremeniti debelino črte. Zamenjajte "#" s številsko vrednostjo debeline (na primer velikost = "10").
    • Vnesite hr width = "#">spremenite širino črte. Zamenjajte "#" s številom slikovnih pik ali odstotkom širine strani (na primer width = "200" ali width = "75%").
    • Vnesite hr color = "#">spremenite barvo črte. Zamenjajte "#" z imenom barve ali njene šestnajstiške kode (na primer color = "red" ali color = "# FF0000").
    • Vnesite hr align = "#">za poravnavo črte. Zamenjaj "#" z "desno" (desno), "levo" (levo) ali "na sredini" (na sredini) (na primer hr width = "50%" align = "center">).
  7. 7 Shranite datoteko HTML. Če želite besedilno datoteko shraniti kot dokument HTML, morate razširitev datoteke (.txt, .docx) spremeniti v ».html«. Za shranjevanje dokumenta HTML sledite tem korakom:
    • Odprite meni mapa.
    • Kliknite na Shrani kot.
    • V polje Ime datoteke vnesite ime datoteke.
    • Dodaj .html za imenom datoteke.
    • Kliknite na Shrani.
  8. 8 Preverite svoj dokument HTML. Če želite preveriti datoteko HTML, jo kliknite z desno miškino tipko in izberite Odpri z. Nato izberite svoj spletni brskalnik. Tam, kjer ste vstavili oznako "hr", bi se morala pojaviti črta. Koda HTML bo videti nekako tako:

      ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> To vrstico je treba ločiti od naslova s ​​črto . / P1> / body> / html>

Metoda 2 od 2: Delo v CSS / HTML5

  1. 1 Odprite obstoječi ali ustvarite nov dokument HTML. Dokumente HTML lahko urejate z urejevalnikom besedil, kot je Notepad, ali specializiranim urejevalnikom kod, kot je Adobe Dreamweaver. Če želite odpreti dokument HTML v izbranem programu, sledite tem korakom:
    • Odprite Beležnico ali drug urejevalnik besedil / kod.
    • Odprite meni mapa.
    • Kliknite na Odprto.
    • Izberite datoteko HTML.
    • Kliknite na Odprto
  2. 2 Dodajte naslov dokumentu HTML. Če vaš dokument HTML še nima naslova, sledite tem korakom, da ga dodate. Naslov mora iti za oznako html> in pred oznako body>.
    • Vnesite glava> na vrhu dokumenta.
    • Dvakrat se dotaknite ↵ Vnesitedodati dve novi vrstici.
    • Vnesite / glava>zapreti naslov.
  3. 3 Vnesite style type = "text / css"> znotraj glave. Slogna oznaka je postavljena med obe oznaki naslova, da ustvarite mesto, kjer lahko s CSS spremenite obliko HTML.
    • Lahko pa uporabite tudi zunanjo slogovno listo. Preberi članek "Kako vstaviti datoteko CSS v HTML»Naučite se povezati zunanjo datoteko CSS z datoteko HTML.
  4. 4 Vnesite hr {. To je oznaka CSS za oblikovanje vodoravne črte. Dodajte ga za oznako "style" v glavi ali zunanji datoteki CSS.
  5. 5 Dodajte sloge CSS za oznako hr>. Priti morajo za oznako "hr {". Vodoravno črto lahko oblikujete na različne načine. Spodaj jih je nekaj.
    • Vnesite širina: ## px;prilagodite širino črte. Zamenjaj "##" s širino črte v pikslih. Namesto slikovnih pik (px) lahko uporabite odstotek (%).
    • Vnesite višina: ## px;za prilagoditev teže črte. Zamenjaj "##" s širino črte v pikslih.
    • Vnesite Barva ozadja: ##;za določitev barve črte. Zamenjajte »##« z imenom barve ali razpršilcem (#), ki mu sledi šestnajstiška barvna koda.
    • Vnesite margin-right: ## px;določite število slikovnih pik od desnega roba. Zamenjajte "##" s številskim številom slikovnih pik ali kodo "auto". Vnesite "auto", da poravnate črto levo ali na sredino.
    • Vnesite margin-left: ## px;določite število slikovnih pik od levega roba. Zamenjajte "##" s številskim številom slikovnih pik ali kodo "auto". Vnesite "auto", da poravnate črto desno ali sredi.
    • Vnesite margin-top: ## px; za določitev zgornjega oblazinjenja vrstice. Zamenjajte "##" s številko, ki ustreza oblazinjenju v slikovnih pikah.
    • Vnesite margin-bottom: ## px;za določitev spodnjega oblazinjenja vrstice. Zamenjajte "##" s številko, ki ustreza oblazinjenju v pikslih.
    • Vnesite robna širina: ## px;narisati okvir okoli črte (neobvezno). Zamenjajte "##" s številko, ki ustreza širini obrobe v slikovnih pikah.
    • Vnesite barva obrobe: ##;za določitev barve obrobe (neobvezno). Zamenjajte »##« z imenom barve ali razpršilcem (#), ki mu sledi šestnajstiška barvna koda.
  6. 6 Vnesite } po atributih sloga za dokončanje oblikovanja oznake hr>.
  7. 7 Vnesite hr> kjer koli v telesu dokumenta HTML, da dodate vodoravno črto. Nastavitve sloga CSS bodo uporabljene vsakič, ko v dokumentu HTML uporabite oznako hr>. Vaša koda bi morala izgledati nekako tako:

      ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; višina: 20px; barva ozadja: rdeča; desni rob: samodejno; margin-left: samodejno; margin-top: 5px; rob-dno: 5px; robna širina: 2px; barva obrobe: zelena; } / style> / head> body> h1> Heading / h1> hr> p1> To vrstico je treba ločiti od naslova z vodoravno črto / p1> / body> / html>