Sadržaj

• Koraci
• Metoda 1 od 2: Rad u HTML 4.01
• Metoda 2 od 2: Rad u CSS / HTML5

Ovaj članak će vam pokazati kako dodati vodoravnu liniju u HTML. Vodoravna crta može se koristiti za odvajanje sadržaja na web mjestu. Kôd za stvaranje linije vrlo je jednostavan. Međutim, u HTML 4.01 moguće je promijeniti dizajn retka pomoću internih naredbi. U HTML5 -u ćete morati oblikovati liniju pomoću CSS -a.

Koraci

Metoda 1 od 2: Rad u HTML 4.01

1. 1 Otvorite postojeći ili stvorite novi HTML dokument. HTML dokumenti mogu se uređivati ​​uređivačem teksta poput Notepada ili specijaliziranim uređivačem koda kao što je Adobe Dreamweaver. Slijedite ove korake za otvaranje HTML dokumenta u programu po vašem izboru:
   • Otvorite Notepad ili neki drugi uređivač teksta / koda.
   • Otvorite izbornik Datoteka.
   • Kliknite na Otvoren.
   • Odaberite HTML datoteku.
   • Kliknite na Otvoren
2. 2 Odaberite mjesto na koje želite umetnuti liniju. Pomaknite se prema dolje dok ne pronađete liniju iznad koje bi se linija trebala pojaviti, a zatim pomaknite kursor izravno na početak tog retka tako da kliknete krajnje lijevo od tog retka.
3. 3 Dodajte prazan redak. Dvostruki dodir ↵ Unesiteza pomicanje prema dolje teksta ispred kojeg želite umetnuti redak, a zatim postavite kursor na prazan redak.
4. 4 Dodaj oznaku hr>. Unesi hr> na prazno mjesto na početku retka. Označiti hr> omogućuje vam crtanje vodoravne crte po cijeloj stranici.
5. 5 Pomaknite kursor nakon oznake "hr" u novi redak pritiskom na ↵ Unesite. Sada oznaka hr> treba biti u zasebnom retku.
6. 6 Dodajte atribute vodoravnoj liniji (izborno). Dodajte atribute kao što su duljina, debljina, boja i poravnanje. Zatvorite ih kovrčavim zagradama odmah nakon "hr". Da biste dodali više atributa, odvojite ih razmakom.
   • Unesi hr size = "#">za promjenu debljine crte. Zamijenite "#" numeričkom vrijednošću debljine (na primjer, veličina = "10").
   • Unesi hr width = "#">za promjenu širine crte. Zamijenite "#" brojem piksela ili postotkom širine stranice (na primjer, width = "200" ili width = "75%").
   • Unesi hr color = "#">za promjenu boje linije. Zamijenite "#" nazivom boje ili njezinim heksadecimalnim kodom (na primjer, color = "red" ili color = "# FF0000").
   • Unesi hr align = "#">za poravnavanje crte. Zamijenite "#" sa "desno" (desno), "lijevo" (lijevo) ili "središte" (u sredini) (na primjer, hr width = "50%" align = "center">).
7. 7 Spremite HTML datoteku. Da biste spremili tekstualnu datoteku kao HTML dokument, morate promijeniti oznaku datoteke (.txt, .docx) u ".html". Slijedite ove korake za spremanje HTML dokumenta:
   • Otvorite izbornik Datoteka.
   • Kliknite na Spremi kao.
   • Unesite naziv datoteke u polje Naziv datoteke.
   • Dodati .html iza naziva datoteke.
   • Kliknite na Uštedjeti.
8. 8 Provjerite svoj HTML dokument. Da biste provjerili HTML datoteku, desnom tipkom miša kliknite nju i odaberite Otvori s. Zatim odaberite svoj web preglednik. Puna linija trebala bi se pojaviti tamo gdje ste umetnuli oznaku "hr". HTML kod će izgledati otprilike ovako:

   ! DOCTYPE html> html> body> h1> Naslov / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Ovaj redak treba odvojiti od naslova retkom . / P1> / body> / html>

Metoda 2 od 2: Rad u CSS / HTML5

1. 1 Otvorite postojeći ili stvorite novi HTML dokument. HTML dokumenti mogu se uređivati ​​uređivačem teksta poput Notepada ili specijaliziranim uređivačem koda kao što je Adobe Dreamweaver. Slijedite ove korake za otvaranje HTML dokumenta u programu po vašem izboru:
   • Otvorite Notepad ili neki drugi uređivač teksta / koda.
   • Otvorite izbornik Datoteka.
   • Kliknite na Otvoren.
   • Odaberite HTML datoteku.
   • Kliknite na Otvoren
2. 2 Dodajte naslov svom HTML dokumentu. Ako vaš HTML dokument već nema naslov, slijedite ove korake da biste ga dodali. Naslov mora ići iza html> oznake i prije body> oznake.
   • Unesi glava> pri vrhu dokumenta.
   • Dvostruki dodir ↵ Unesiteza dodavanje dva nova retka.
   • Unesi / glava>za zatvaranje naslova.
3. 3 Unesi style type = "text / css"> unutar zaglavlja. Oznaka stila postavlja se između dvije oznake zaglavlja kako bi se stvorilo mjesto na kojem možete koristiti CSS za izmjenu HTML dizajna.
   • Alternativno, možete koristiti vanjski stilski list. Pročitaj članak "Kako umetnuti CSS datoteku u HTML»Da biste saznali kako povezati vanjsku CSS datoteku s HTML datotekom.
4. 4 Unesi hr {. Ovo je CSS oznaka za oblikovanje vodoravne crte. Dodajte ga nakon oznake "style" u zaglavlje ili vanjsku CSS datoteku.
5. 5 Dodajte CSS stilove za oznaku hr>. Moraju doći iza oznake "hr {". Vodoravna linija može se oblikovati na različite načine. Ispod je nekoliko njih.
   • Unesi širina: ## px;za podešavanje širine linije. Zamijenite "##" širinom retka u pikselima. Umjesto piksela (px), možete koristiti postotak (%).
   • Unesi visina: ## px;za podešavanje težine linije. Zamijenite "##" širinom retka u pikselima.
   • Unesi boja pozadine: ##;za navođenje boje linije. Zamijenite "##" imenom boje ili raspršivanjem (#) nakon čega slijedi heksadecimalni kôd boje.
   • Unesi margin-right: ## px;za određivanje broja piksela s desnog ruba. Zamijenite "##" brojčanim brojem piksela ili kodom "auto". Unesite "auto" da biste liniju poravnali lijevo ili središte.
   • Unesi margin-left: ## px;za određivanje broja piksela s lijevog ruba. Zamijenite "##" brojčanim brojem piksela ili kodom "auto". Unesite "auto" da biste liniju poravnali desno ili središte.
   • Unesi margin-top: ## px; za navođenje gornjeg obloga za liniju. Zamijenite "##" brojem koji odgovara padingu u pikselima.
   • Unesi margin-bottom: ## px;za navođenje donjeg obloga za liniju. Zamijenite "##" brojem koji odgovara padingu u pikselima.
   • Unesi border-width: ## px;za crtanje okvira oko crte (izborno). Zamijenite "##" brojem koji odgovara širini obruba u pikselima.
   • Unesi obrub u boji: ##;za navođenje boje obruba (izborno). Zamijenite "##" imenom boje ili raspršivanjem (#) nakon čega slijedi heksadecimalni kôd boje.
6. 6 Unesi } nakon atributa stila za dovršetak oblikovanja oznake hr>.
7. 7 Unesi hr> bilo gdje u tijelu HTML dokumenta za dodavanje vodoravne crte. Postavke CSS stila primijenit će se svaki put kada koristite oznaku hr> u svom HTML dokumentu. Vaš kod bi trebao izgledati otprilike ovako:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {width: 50%; visina: 20px; boja pozadine: crvena; margin-right: auto; margin-left: auto; margin-top: 5px; margin-bottom: 5px; širina obruba: 2px; bordura: zelena; } / style> / head> body> h1> Heading / h1> hr> p1> Ovaj redak treba odvojiti od zaglavlja vodoravnom linijom / p1> / body> / html>