Pri tvorbe HTML stránky dizajn zohráva významnú úlohu. Najmä ak hovoríme o rôznych symboloch a dekoratívnom dizajne: tieto maličkosti pomáhajú urobiť „jazyk“ vašej stránky dostupnejším a prehľadnejším, okrem toho výrazne menia jej vnímanie a vzhľad všeobecne. Jedným z najdôležitejších dizajnových prvkov je vodorovná čiara a ďalej sa podrobnejšie dozvieme, ako s ňou pracovať a ako urobiť vodorovnú čiaru v html.

Čo je vodorovná čiara a prečo je to potrebné

Vodorovná čiara v html je prvok dizajnu stránky, ktorý vykonáva množstvo funkcií:

  1. dekoratívne. Pomáha pridať stránke atraktívnosť.
  2. Delenie. Prispieva k efektívnemu oddeleniu informácií rôznych významov.
  3. Zdôrazňovanie alebo zdôrazňovanie. Upozorní návštevníkov stránky na potrebné a najdôležitejšie informácie.

Je to horizontálna čiara, ktorá sa považuje za najviac prístupným spôsobom implementovať celý rad funkcií. Vytvára sa veľmi jednoducho a navonok to vyzerá veľmi výnosne. Jednoduchými zmenami v html kóde môžete ovládať:

  • dĺžka;
  • šírka;
  • farebné charakteristiky;
  • zarovnanie na jednom alebo druhom okraji.

Stojí za zmienku, že vodorovná čiara sa vzťahuje na blokové prvky. To znamená, že zaberá nový riadok na stránke a text za ním pôjde nižšie.

Vytvorenie vodorovnej čiary v HTML

Čiaru môžete nastaviť pomocou jednoduchej značky - hr v trojuholníkových zátvorkách. Je skratka pre „Horizontal Rule“ a nastavuje klasické externé parametre. Od mnohých iných sa líši tým, že nepotrebuje uzatváraciu značku a dokáže existovať samostatne. Zmeniť vonkajšie charakteristiky prvok je možné vykonať pomocou ďalších hodnôt v značke:

  1. Dĺžka. Ak nechcete, aby dĺžka riadku pokrývala celú stranu, môžete nastaviť požadovanú veľkosť v pixeloch alebo percentách. To sa deje pomocou dodatočného slova "šírka" v značke a číselného ukazovateľa dĺžky špecifikovaného za znakom "=" v úvodzovkách.

Vyzerá to takto. Napríklad, ak potrebujeme dĺžku 100 pixelov, nastavíme nasledujúci tag: hr width="100"

  1. zarovnanie. Zarovnanie je možné na ľavom alebo pravom okraji a tiež v strede. Táto vlastnosť funguje iba ak ste už nastavili parameter šírky, pretože riadok na celú stranu nemožno zarovnať. Pre zarovnanie nastavíme dodatočný atribút v tagu "align" a pridáme k nemu smer: center - pre stred, vľavo - pre ľavé a pravé - pre pravé zarovnanie.

Hotová značka v tomto prípade bude vyzerať takto. Ak napríklad potrebujeme nastaviť zarovnanie na stred pre vodorovnú čiaru dlhú 150 pixelov, hotový tag bude vyzerať takto: hr align="center" width="150".

Všimnite si, že „align“, metrika pre zarovnanie, je nastavená na 1, aj keď atribút závisí od metriky šírky.

  1. šírka. Voliteľne môžete určiť aj šírku, čím vytvoríte tučné alebo tenké podčiarknutie. Toto kritérium na ničom nezávisí a možno ho použiť ako nezávislé bez udania dĺžky alebo zarovnania. Na tento účel používame atribút size na značke a číselnú hodnotu rovnajúcu sa požadovanej šírke v pixeloch. Číslo je uvedené v úvodzovkách za atribútom size a symbolom "=".

Ak teda chceme vytvoriť čiaru so šírkou 15 pixelov, musíme vytvoriť nasledujúci tag: hr size="15".

  1. Farba. Je tiež nastavený ako nezávislý indikátor. Na jej zmenu použite atribút farba v kombinácii s názvom farby vo forme kódu alebo on anglický jazyk. Farba je uvedená v úvodzovkách za symbolom "=".

Značka pre štandardnú bielu čiaru teda môže byť napísaná dvoma spôsobmi: hr color="#FFFFFF" alebo hr color="white"

Čierna farba môže byť vytvorená pomocou kódu #000000.

  1. Odložiť tieň. Ak potrebujete prvok, ktorý neobsahuje tieň, potom by sa mal v značke použiť atribút noshade. Môže byť použitý samostatne alebo v kombinácii s inými prvkami. Značka pre štandardný riadok, ktorý ho používa, bude vyzerať takto: hr noshade

Vytvorte vodorovnú čiaru s videom

A ak chcete získať informácie vo viac vizuálnom formáte, pozrite si nasledujúce video, ktoré podrobne popisuje možnosti práce s vodorovnou čiarou.

Po určení požadovaných rozmerov vodorovnej čiary môžete stránky lokality usporiadať tak, aby boli informácie štruktúrované a vizuálne dobre tvarované. Návštevníkom to uľahčuje vnímanie prezentovaných informácií a odlíšenie vašej stránky od ostatných.

Úloha

Na stránke urobte vodorovnú čiaru.

Riešenie

vodorovné čiary dobré použiť na oddelenie jedného bloku textu od druhého. Malý text s vodorovnými čiarami nad a pod priťahuje pozornosť čitateľa viac ako normálny text.

S visačkou

môžete nakresliť vodorovnú čiaru, ktorej vzhľad závisí od použitých atribútov, ako aj od prehliadača. Značka je blokový prvok, takže riadok vždy začína na Nový riadok a po ňom sa všetky prvky zobrazia na ďalšom riadku. S mnohými atribútmi značiek
riadok vytvorený prostredníctvom tohto tagu je ľahko spravovateľný. Ak navyše spojíte silu štýlov, pridanie riadku do dokumentu sa zmení na jednoduchú úlohu.

Predvolená linka

zobrazené sivou farbou as efektom hlasitosti. Tento typ linky nie vždy zodpovedá dizajnu stránky, takže túžba vývojárov zmeniť farbu a ďalšie parametre linky prostredníctvom štýlov je pochopiteľná. Prehliadače však majú k tomuto problému nejednoznačné prístupy, kvôli ktorým budete musieť použiť niekoľko vlastností štýlu naraz. Najmä staršie verzie internetový prehliadač Prieskumník používa vlastnosť color pre farbu čiary a ostatné prehliadače používajú farbu pozadia . Ale to nie je všetko, nezabudnite zadať hrúbku čiary (vlastnosť výšky) inú ako nulu a odstráňte rám okolo čiary nastavením vlastnosti border na hodnotu none. Spojením všetkých vlastností pre výber hodín dostaneme univerzálne riešenie pre populárne prehliadače (príklad 1).

Príklad 1. Vodorovná čiara

HTML5 CSS 2.1 IE Cr Op Sa Fx

Farba vodorovnej čiary

Textový reťazec

Výsledok tento príklad znázornené na obr. jeden.

Ryža. 1. Farebná vodorovná čiara

Zdravím všetkých čitateľov. Z času na čas majstri čelia problému, ako urobiť vodorovnú alebo zvislú čiaru pomocou HTML alebo pomocou pomocou CSS. To je to, o čom vám dnes poviem.

Riadky v CSS

Existuje niekoľko spôsobov, ako vytvoriť čiary. Jedným z týchto spôsobov je Použitie CSS. Presnejšie s pomocou Borderu. Pozrime sa na príklad.

A tu je výsledok.

Horizontálne a vertikálna čiara s css.

Čiary v CSS je možné kresliť pomocou operátora Border. Ak chcete iba obdĺžnik s pevnou šírkou okraja, môžete jednoducho použiť tento operátor a zadať mu hodnotu. Napríklad border:5px solid #000000; znamená, že okraje rámčeka majú šírku 5 pixelov v čiernej farbe.

Ak však potrebujete nastaviť nie všetky hranice, ale iba niektoré, musíte presne špecifikovať, ktoré hranice sú potrebné a akú hodnotu bude mať každá z nich. Toto sú operátori:

  • border-top - nastavuje hodnotu horného okraja
  • border-bottom - nastavuje hodnotu spodného okraja
  • border-left - nastaví hodnotu ľavého okraja
  • border-right - nastavuje hodnotu pravého okraja.

Vertikálna a vodorovná čiara v HTML

Riadky môžete vytvárať aj v samotnom HTML. Na tento účel môžete použiť značku hr.

V tomto prípade sa nakreslí vodorovná čiara s výškou jeden pixel a plnou šírkou.

Ale tento tag, môžete nastaviť niektoré hodnoty.

  • šírka– nastavuje hodnotu šírky čiary.
  • farba- nastavuje farbu čiary.
  • Zarovnať- nastavuje zarovnanie vľavo, na stred, vpravo
  • veľkosť– nastavuje hodnotu hrúbky čiary v pixeloch.

Pomocou značky hr môžete tiež nastaviť zvislú čiaru. Ale v tomto prípade sa budete musieť opäť uchýliť k štýlom.

V tomto prípade bude zvislá čiara nakreslená s výškou sto pixelov, hrúbkou jedného pixelu a päť pixelov odsadených.

Záver.

Teraz už viete, ako môžete nastaviť zvislú a vodorovnú čiaru. Linky je možné nastaviť ako na bežných stránkach, s pomocou HTML a nastaviť na webe, ktorý používa CMS, napríklad WordPress, ale v tomto prípade budete musieť prepnúť do režimu HTML.

No, ak máte ďalšie otázky, opýtajte sa ich v komentároch.

Zdalo by sa, prečo by mohli byť potrebné štyri metódy? Takmer každý človek totiž používa jednu metódu, na ktorú je zvyknutý. Napríklad som niekoľkokrát stlačil Shift a pomlčkovú klávesu, a tak sa objavila vodorovná čiara.

Ale čo ak to má za následok bodkovanú čiaru, ale vy potrebujete plnú čiaru?
- S najväčšou pravdepodobnosťou je kláves Shift na klávesnici chybný. Tu je niekoľko ďalších spôsobov, ako pomôcť.

3.
4.
5.

Možno najviac obvyklým spôsobom urobiť čiaru v programe Word znamená použiť niekoľko klávesov na klávesnici.

I Tenká, hrubá, dvojitá, bodkovaná čiara pomocou klávesnice

Nižšie je nákres klávesnice s anglickým rozložením, ale bez ruského, ale na tom nezáleží, pretože nás zaujímajú iba tri klávesy: Shift, pomlčka a Enter.

Ryža. 1. Tri klávesy na klávesnici: Shift, pomlčka a Enter pre súvislú vodorovnú čiaru vo Worde

Pomocou týchto troch kláves môžete v programe Word nakresliť súvislú vodorovnú čiaru: prerušovanú alebo plnú, tenkú alebo hrubú, dlhú alebo krátku.

1) Niekoľkonásobným stlačením tlačidla „-“ (pomlčka). Word editor dostaneme bodkovanú čiaru ľubovoľnej dĺžky.

Robiť tenký dlhý riadok na celú šírku stránky:

  • Na klávesnici nájdeme kláves „pomlčka“ (napravo od klávesu „nula“, v zelenom rámčeku na obr. 1).
  • Z nového (!) riadku v programe Word stlačte tento kláves niekoľkokrát: -
  • Potom stlačte tlačidlo "Enter" (). Niekoľko vytlačených čiarok sa zrazu zmení na súvislú vodorovnú tenkú čiaru po celej šírke strany.

2) Keď stlačíte Shift a "-" (pomlčka) súčasne, NIE pomlčka sa vytlačí, ale podčiarkovník _________. Takto môžete kdekoľvek v dokumente vytvoriť súvislú čiaru ľubovoľnej dĺžky.

Ryža. 2. Tenká a hrubá vodorovná čiara vo Worde

Teraz tlačíme hustý vodorovná čiara po celej šírke stránky:

  • Opäť nájdeme rovnaký pomlčkový kľúč, rovnako ako Kláves Shift(doľava alebo doprava, ako chcete). Stlačte Shift, podržte a nepustite.
  • A teraz z nového (!) riadku niekoľkokrát kliknite na pomlčku (napríklad 3-4 krát) (bez uvoľnenia Shift): ___. Uvoľnite Shift.
  • Teraz stlačte kláves Enter. Uvidíte hrubú vodorovnú plnú čiaru.

Zhrňme si niektoré výsledky vo forme tabuľky:

(Kliknutím zväčšíte) Riadky vo Worde pomocou klávesnice

­­­­­­­­­­­­­­­­­­­­­

II Riadok v programe Word pomocou tabuľky

Vodorovnú čiaru možno získať pomocou tabuľky s jednou bunkou (1x1), v ktorej je farebný iba horný alebo spodný okraj (bude viditeľný) a ostatné tri strany tabuľky majú nenatreté okraje (budú neviditeľné) .

Umiestnime kurzor na miesto, kde má byť riadok. AT horné menu Kliknutie na slovo:

  • Vložte (1 na obr. 3),
  • Tabuľka (2 na Obr. 3),
  • Jedna bunka (3 na obr. 3).

Ryža. 3. Ako vložiť tabuľku 1x1 do Wordu (z jednej bunky)

Výsledkom je tabuľka jednej veľkej bunky (1x1):

Zostáva v tabuľke 1x1 na troch stranách, aby sa odstránili okraje. Pre to

  • prejdite na kartu „Domov“ (1 na obr. 4),
  • vedľa "Písmo" nájdeme "Odsek" a okraje (2 na obr. 4),
  • odstráňte všetky okraje kliknutím na „No border“ (3 na obr. 4),
  • zvoľte "Horný okraj" alebo "Dolný okraj" (4 na obr. 4).

Ryža. 4. Ako odstrániť výber okrajov v tabuľke programu Word (urobiť okraje neviditeľnými)

Jasne to ukazujem vo videu (na konci článku).

Mimochodom, na obr. 3 ukazuje, že existuje jednoduchší spôsob. Môžete umiestniť kurzor na začiatok riadku v programe Word a kliknúť na „Vodorovná čiara“ (5 na obr. 4):

III Čiara vo Worde kreslením

Vložiť (1 na obr. 5) - Tvary (2 na obr. 5) je ďalší spôsob, ako získať vodorovnú čiaru vo Worde.

Aby bola čiara striktne vodorovná, podržte stlačený kláves Shift a súčasne nakreslite čiaru.

Ryža. 5. Ako nakresliť čiaru vo Worde

IV Riadok v programe Word pomocou klávesnice na obrazovke

Ak chcete nájsť klávesnicu na obrazovke, do vyhľadávania zadáme frázu „klávesnica na obrazovke“, ďalšie podrobnosti pre Windows 7 a Windows 8.

V systéme Windows 10 môžete klávesnicu na obrazovke nájsť aj zadaním výrazu „klávesnica na obrazovke“ do panela vyhľadávania.

Ryža. 6. Klávesnica na obrazovke

Vodorovnú čiaru vytvoríme rovnako ako v prvej verzii s bežnou klávesnicou. Na klávesnica na obrazovke budete potrebovať tri tlačidlá: pomlčka, shift a enter.

1 Pomlčka a Enter

Z nového riadku vo Worde niekoľkokrát kliknite na pomlčku (1 na obr. 6) a stlačte Enter. Dostanete tenkú vodorovnú čiaru.

2 Shift, pomlčka a Enter

Z nového riadku vo Worde kliknite najprv na Shift (2 na obr. 6), potom na pomlčku (1 na obr. 6). Získajte podčiarknutie. Takže opakujte ešte 2 krát a potom stlačte Enter. V dôsledku toho uvidíme hrubú vodorovnú čiaru.

Ak chcete zdôrazniť niektoré z najdôležitejších prvkov stránky, nebolo by na škodu použiť všetky druhy a za predpokladu, že toto CSS štýly a vlastnosti. Samozrejme, s textom sa nemôžete príliš trápiť a zvýrazniť ho napríklad tučným písmom alebo kurzívou, zmeniť pozadie alebo urobte rám okolo textu. Ale nie vždy je jedna z prezentovaných metód vhodná. Povedzme, že máte text, ktorý je potrebné oddeliť vzhľadom na špecifiká jeho sémantického zaťaženia. Tu prichádzajú na rad vlastnosti HTML a CSS.

Ako urobiť riadok v texte pomocou CSS

Aby sme dosiahli náš cieľ, musíme sa obrátiť na súbor style.css, a to tak, že do nej zapíšeme zodpovedajúcu vlastnosť hranica. To spôsobí, že sa nad, pod alebo na určitej strane textu objaví riadok. Na druhej strane existuje niekoľko vlastností zodpovedných za zobrazenie riadku, a to:

- okrajový vrch– vodorovná čiara umiestnená nad textom;

- hranica-pravá- zvislá čiara umiestnená napravo od textu;

- okraj-dole– vodorovná čiara umiestnená pod textom;

- hranica-vľavo je vertikálna čiara vľavo.

Ako urobiť riadok v html

Použitím vlastnosti css všetky potrebné hodnoty môžete nastaviť úpravou HTML kódu. Ak to chcete urobiť, prejdite do administratívnej časti stránky. Vyberte jeden z publikovaných materiálov, prepnite textový editor do režimu úpravy kódu HTML a pridať vlastnosti CSS. Ukážku si môžete pozrieť nižšie.



Ako urobiť bodkovanú alebo rovnú čiaru?



Napísaním týchto vlastností budete schopní zdôrazniť dôležitosť prezentovaného materiálu, odseku alebo nadpisu?


Stručné vysvetlenie príkazov

- šírka- dĺžka čiary;

- pevný- plná čiara;

- bodkovaný- bodkovaná čiara.

Pre hlbšie pochopenie štýlov odporúčam prečítať si toto.

Musíte pochopiť, že v procese vykonávania zmien v kóde lokality sú vlastnosti, ktoré určujú typ čiary, jej hrúbku a farbu, uvedené s medzerou.

Táto metóda má niekoľko výhod:

Široká škála možností, s ktorými vytvoríte takmer akýkoľvek vlasec.

Jednoduchosť vykonávania všetkých potrebných zmien priamo v kóde HTML. To výrazne zjednodušuje úlohu pre neskúsených tvorcov stránok.

Ako urobiť rovnú vodorovnú čiaru pomocou značky HTML

Prvá vec, na ktorú by som vás chcel upozorniť, je, že táto značka, napriek všetkým jemnostiam a princípom html, nemá uzatváraciu značku. Dá sa použiť kdekoľvek html kód, medzi značkami a.

Atribúty značky

- šírka- zodpovedá za dĺžku vlasca. Dá sa zadať ako percentá aj ako pixely.

- veľkosť- hrúbka čiary. Špecifikované v pixeloch.

- farba– určuje farbu čiary.

- zarovnať– atribút zodpovedný za zarovnanie čiar. Tým sa naňho obratom vzťahuje.