![How To Add Horizontal Line In HTML - html Coding Horizontal Line | HTML tutorials Tags| Lecture 4](https://i.ytimg.com/vi/PFIX7YiFH_U/hqdefault.jpg)
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 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 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 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 Dodaj oznako hr>. Vnesite hr> na prazen prostor na začetku vrstice. Oznaka hr> omogoča risanje vodoravne črte po celotni strani.
5 Premaknite kazalec za oznako "hr" v novo vrstico s pritiskom na ↵ Vnesite. Zdaj oznaka hr> mora biti v ločeni vrstici.
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 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 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 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 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 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 Vnesite hr {. To je oznaka CSS za oblikovanje vodoravne črte. Dodajte ga za oznako "style" v glavi ali zunanji datoteki CSS.
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 Vnesite } po atributih sloga za dokončanje oblikovanja oznake hr>.
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>