Obsah

• Kroky
• Metóda 1 z 2: Práca v HTML 4.01
• Metóda 2 z 2: Práca v CSS / HTML5

Tento článok vám ukáže, ako pridať horizontálny riadok do HTML. Vodorovnú čiaru je možné použiť na oddelenie obsahu na webe. Kód na vytvorenie riadku je pomerne jednoduchý. V HTML 4.01 je však možné zmeniť návrh čiary pomocou interných príkazov. V HTML5 budete musieť na štýl riadku použiť CSS.

Kroky

Metóda 1 z 2: Práca v HTML 4.01

1. 1 Otvorte existujúci alebo vytvorte nový dokument HTML. Dokumenty HTML je možné upravovať pomocou textového editora, ako je napríklad Poznámkový blok, alebo špecializovaného editora kódu, napríklad Adobe Dreamweaver. Pri otváraní dokumentu HTML vo vami zvolenom programe postupujte nasledovne:
   • Otvorte program Poznámkový blok alebo iný editor textu / kódu.
   • Otvorte ponuku Súbor.
   • Kliknite na Otvorené.
   • Vyberte súbor HTML.
   • Kliknite na Otvorené
2. 2 Vyberte miesto, kam chcete vložiť riadok. Posúvajte sa nadol, kým nenájdete riadok, nad ktorým by sa mal riadok zobrazovať, a potom presuňte kurzor priamo na začiatok tohto riadka kliknutím na úplný riadok vľavo.
3. 3 Pridajte prázdny riadok. Dvojité poklepanie ↵ Zadajteposuňte text nadol, pred ktorý chcete vložiť riadok, a potom umiestnite kurzor na prázdny riadok.
4. 4 Pridajte hr> značku. Zadajte hod> do prázdneho miesta na začiatku riadka. Označiť hod> umožňuje nakresliť vodorovnú čiaru po celej stránke.
5. 5 Presuňte kurzor za značkou „hr“ na nový riadok stlačením ↵ Zadajte. Teraz značka hod> by mali byť na samostatnom riadku.
6. 6 Pridajte atribúty do vodorovnej čiary (voliteľné). Pridajte atribúty, ako je dĺžka, hrúbka, farba a zarovnanie. Bezprostredne po „hodine“ ich uzatvorte do kučeravých zátvoriek. Ak chcete pridať viacero atribútov, oddeľte ich medzerou.
   • Zadajte hr size = "#">na zmenu hrúbky čiary. Nahraďte „#“ číselnou hodnotou hrúbky (napríklad veľkosť = „10“).
   • Zadajte hr width = "#">na zmenu šírky čiary. Nahraďte „#“ počtom pixelov alebo percentom šírky stránky (napríklad šírka = „200“ alebo šírka = „75%“).
   • Zadajte hr color = "#">na zmenu farby čiary. Nahraďte „#“ názvom farby alebo jej hexadecimálnym kódom (napríklad color = „red“ alebo color = „# FF0000“).
   • Zadajte hr align = "#">zarovnať čiaru. Nahraďte „#“ výrazom „vpravo“ (vpravo), „vľavo“ (vľavo) alebo „v strede“ (v strede) (napríklad hr width = "50%" align = "center">).
7. 7 Uložte súbor HTML. Ak chcete uložiť textový súbor ako dokument HTML, musíte zmeniť príponu súboru (.txt, .docx) na „.html“. Pri ukladaní dokumentu HTML postupujte takto:
   • Otvorte ponuku Súbor.
   • Kliknite na Uložiť ako.
   • Do poľa Názov súboru zadajte názov súboru.
   • Pridať .html za názvom súboru.
   • Kliknite na Uložiť.
8. 8 Skontrolujte svoj dokument HTML. Ak chcete skontrolovať súbor HTML, kliknite naň pravým tlačidlom myši a zvoľte položku Otvoriť pomocou. Potom vyberte svoj webový prehliadač. Tam, kde ste vložili značku „hr“, by sa mala objaviť plná čiara. HTML kód bude vyzerať asi takto:

   ! DOCTYPE html> html> telo> h1> nadpis / h1> hr veľkosť = "6" šírka = "50%" zarovnanie = "ľavá" farba = "zelená"> p1> Tento riadok by mal byť od nadpisu oddelený riadkom . / P1> / telo> / html>

Metóda 2 z 2: Práca v CSS / HTML5

1. 1 Otvorte existujúci alebo vytvorte nový dokument HTML. Dokumenty HTML je možné upravovať pomocou textového editora, ako je napríklad Poznámkový blok, alebo špecializovaného editora kódu, napríklad Adobe Dreamweaver. Pri otváraní dokumentu HTML vo vami zvolenom programe postupujte nasledovne:
   • Otvorte Poznámkový blok alebo iný editor textu / kódu.
   • Otvorte ponuku Súbor.
   • Kliknite na Otvorené.
   • Vyberte súbor HTML.
   • Kliknite na Otvorené
2. 2 Pridajte do dokumentu HTML názov. Ak váš dokument HTML ešte nemá nadpis, pridajte ho podľa týchto pokynov. Nadpis musí byť za značkou html> a pred značkou body>.
   • Zadajte hlava> v hornej časti dokumentu.
   • Dvojité poklepanie ↵ Zadajtepridať dva nové riadky.
   • Zadajte / hlava>na zatvorenie názvu.
3. 3 Zadajte style type = "text / css"> vnútri hlavičky. Značka štýlu je umiestnená medzi dve značky nadpisov, aby sa vytvorilo miesto, kde môžete pomocou CSS upraviť dizajn HTML.
   • Prípadne môžete použiť externý list štýlov. Prečítajte si článok „Ako vložiť súbor CSS do HTML»Naučte sa, ako prepojiť externý súbor CSS so súborom HTML.
4. 4 Zadajte hod {. Toto je značka CSS na úpravu vodorovnej čiary. Pridajte ho za značku „style“ do hlavičky alebo externého súboru CSS.
5. 5 Pridajte štýly CSS pre značku hr>. Musia prísť za značkou „hr {“. Horizontálnu čiaru je možné štylizovať rôznymi spôsobmi. Nasleduje niekoľko z nich.
   • Zadajte šírka: ## px;na úpravu šírky čiary. Nahraďte „##“ šírkou riadka v pixeloch. Namiesto pixelov (px) môžete použiť percento (%).
   • Zadajte výška: ## px;na úpravu hrúbky vlasca. Nahraďte „##“ šírkou riadka v pixeloch.
   • Zadajte farba pozadia: ##;určiť farbu čiary. Nahraďte „##“ názvom farby alebo hodnotou hash (#), za ktorou nasleduje hexadecimálny kód farby.
   • Zadajte okraj-vpravo: ## px;na určenie počtu pixelov od pravého okraja. Nahraďte „##“ číselným počtom pixelov alebo kódom „auto“. Zadajte „auto“ a zarovnajte čiaru doľava alebo do stredu.
   • Zadajte okraj-vľavo: ## px;na určenie počtu pixelov od ľavého okraja. Nahraďte „##“ číselným počtom pixelov alebo kódom „auto“. Zadajte „auto“ a zarovnajte čiaru doprava alebo do stredu.
   • Zadajte margin-top: ## px; na určenie horného polstrovania pre riadok. Nahraďte „##“ číslom zodpovedajúcim výplni v pixeloch.
   • Zadajte margin-bottom: ## px;na zadanie dolného polstrovania pre riadok. Nahraďte „##“ číslom zodpovedajúcim výplni v pixeloch.
   • Zadajte šírka orámovania: ## px;nakresliť rámček okolo čiary (voliteľné). Nahraďte „##“ číslom zodpovedajúcim šírke okraja v pixeloch.
   • Zadajte farba orámovania: ##;na zadanie farby orámovania (voliteľné). Nahraďte „##“ názvom farby alebo hodnotou hash (#), za ktorou nasleduje hexadecimálny kód farby.
6. 6 Zadajte } po atribútoch štýlu dokončite štýl pre značku hr>.
7. 7 Zadajte hod> kdekoľvek v tele dokumentu HTML pridáte vodorovnú čiaru. Nastavenia štýlu CSS sa použijú pri každom použití značky hr> v dokumente HTML. Váš kód by mal vyzerať takto:

   ! DOCTYPE html> html> head> style type = "text / css"> hr {šírka: 50%; výška: 20px; farba pozadia: červená; okraj-vpravo: auto; okraj-vľavo: auto; okraj hore: 5 pixelov; okrajové dno: 5 pixelov; šírka orámovania: 2px; farba okraja: zelená; } / style> / head> body> h1> Heading / h1> hr> p1> Tento riadok by mal byť oddelený od nadpisu vodorovnou čiarou / p1> / body> / html>