HTML-lehe loomisel mängib stiil olulist rolli. Eriti kui me räägime erinevatest sümbolitest ja dekoratiivsest kujundusest: need pisiasjad aitavad muuta teie lehe “keele” kättesaadavamaks ja selgemaks ning muudavad oluliselt ka selle tajumist ja välimust tervikuna. Disaini üks olulisemaid elemente on horisontaaljoon ja siis õpime lähemalt, kuidas sellega töötada ja kuidas html-is horisontaaljoont teha.

Mis on horisontaaljoon ja milleks see on mõeldud?

Horisontaalne joon HTML-is on lehe kujunduselement, mis täidab mitmeid funktsioone:

1. Dekoratiivne. Aitab lisada lehele atraktiivsust.
2. Jagamine. Soodustab erineva tähendusega teabe tõhusat eraldamist.
3. Esiletõstmine või rõhutamine. Juhib lehekülaliste tähelepanu vajalikule ja kõige olulisemale teabele.

See on horisontaaljoon, mida peetakse paljude funktsioonide rakendamiseks kõige juurdepääsetavamaks viisiks. Seda on väga lihtne luua ja välimuselt tundub see väga tulus. Html-koodi lihtsate muudatustega saate kohandada:

• pikkus;
• laius;
• värvi omadused;
• joondus piki üht või teist serva.

Väärib märkimist, et horisontaaljoon viitab plokielementidele. See tähendab, et see võtab lehel uue rea ja sellele järgnev tekst läheb alla.

Horisontaalse joone loomine HTML-is

Joone saate määrata lihtsa sildi abil – hr kolmnurksulgudes. See on lühend sõnast "horisontaalne reegel" ja määrab klassikalised välised parameetrid. See erineb paljudest teistest selle poolest, et ei vaja sulgevat silti ja on võimeline eksisteerima iseseisvalt. Elemendi väliseid omadusi saate muuta märgendi lisaväärtuste abil:

1. Pikkus. Kui te ei soovi, et rea pikkus ulatuks üle terve lehe, saate määrata soovitud suuruse pikslites või protsentides. Seda tehakse, kasutades sildis lisasõna "width" ja jutumärkides märgi "=" järel näidatud numbrilist pikkust.

See näeb välja selline. Näiteks kui vajame pikkust 100 pikslit, määrame järgmise sildi: hr width=”100″

1. Joondamine. Joondamine on võimalik vasakule või paremale servale ning ka keskele. See omadus kehtib ainult siis, kui olete laiuse parameetri juba määranud, kuna pole võimalik joondada joont, mis katab kogu lehe. Joondamiseks määrame sildil "joondamine" täiendava atribuudi ja lisame sellele suuna: keskele - keskele, vasakule - vasakule ja paremale - paremale joondamiseks.

Valmis silt näeb sel juhul välja selline. Näiteks kui meil on vaja seada 150 piksli pikkuse horisontaaljoone keskjoondus, näeb valmis silt välja selline: hr align=”center” width=”150″.

Pange tähele, et joondusmõõdik "joondus" asetatakse 1. kohale, kuigi atribuut sõltub laiuse mõõdikust.

1. Laius. Samuti saate määrata laiuse, luues paksu või õhukese allajoone. See kriteerium ei sõltu millestki ja seda saab kasutada iseseisva kriteeriumina ilma pikkust või joondust määramata. Selle jaoks kasutame märgendis atribuuti size ja soovitud laiusega pikslites võrdne arvväärtus. Number on märgitud jutumärkides suuruse atribuudi ja sümboli “=” järel.

Seega, kui peame looma 15 piksli laiuse joone, peame looma järgmise sildi: hr size=”15″.

1. Värv. See on määratletud ka sõltumatu näitajana. Selle muutmiseks kasutage atribuuti color koos värvi nimetusega koodi kujul või inglise keeles. Värv on märgitud jutumärkides pärast sümbolit “=”.

Seega saab standardse valge joone sildi kirjutada kahel viisil: hr color=”#FFFFFF” või hr color=”white”

Musta saab luua koodi #000000 abil.

1. Pane ära vari. Kui vajate elementi, mis ei sisalda varju, peaksite kasutama sildis atribuuti noshade. Seda saab kasutada üksi või koos teiste elementidega. Seda kasutava standardrea silt näeb välja selline: hr noshade

Horisontaalse joone loomine video abil

Ja kui soovite saada teavet visuaalsemas vormingus, vaadake järgmist videot, mis kirjeldab üksikasjalikult horisontaaljoonega töötamise võimalusi.

Olles kindlaks määranud horisontaaljoone vajalikud mõõtmed, saate kujundada veebisaidi lehed selliselt, et teave oleks struktureeritud ja visuaalselt pädev. See aitab külastajatel esitatud teavet hõlpsamini tajuda ja tõstab teie saidi teiste seast esile.

Ülesanne

Tehke lehele horisontaalne joon.

Lahendus

Horisontaalsed read sobivad hästi ühe tekstiploki teisest eraldamiseks. Väike tekst horisontaalsete joontega üla- ja alaosas tõmbab lugeja tähelepanu rohkem kui tavaline tekst.

Sildi kasutamine

---

saate joonistada horisontaalse joone, mille välimus sõltub kasutatavatest atribuutidest, samuti brauserist. Silt viitab plokielementidele, nii et rida algab alati uuelt realt ja pärast seda kuvatakse kõik elemendid järgmisel real. Tänu paljudele sildi atribuutidele

---

selle sildi kaudu loodud rida on lihtne hallata. Kui ühendada ka stiilide jõud, muutub rea lisamine dokumendile lihtsaks ülesandeks.

Vaikimisi rida

---

kuvatakse halli värvi ja helitugevuse efektiga. Seda tüüpi joon ei sobi alati saidi kujundusega, seega on arendajate soov muuta joone värvi ja muid parameetreid stiilide kaudu. Siiski on brauserites sellele probleemile erinevaid lähenemisviise, mistõttu peate korraga kasutama mitut stiiliatribuuti. Eelkõige kasutavad Internet Exploreri vanemad versioonid joonevärvi atribuuti color, samas kui teised brauserid kasutavad taustavärvi . Kuid see pole veel kõik, peate määrama joone paksuse (kõrguse atribuudi) väärtuseks nullist erinev ja eemaldama joone ümber oleva raami, määrates piiri atribuudi väärtuseks None. Pannes kõik tunnivalija atribuudid kokku, saame populaarsete brauserite jaoks universaalse lahenduse (näide 1).

Näide 1: Horisontaalne joon

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Tekstistring

---

Selle näite tulemus on näidatud joonisel fig. 1.

Riis. 1. Värviline horisontaaljoon

Näib, miks võib olla vaja nelja meetodit? Peaaegu iga inimene kasutab ju üht meetodit, millega ta on harjunud. Näiteks vajutasin mitu korda Shift ja kriipsu klahvi ja nii sain horisontaalse joone.

Aga mis siis, kui tulemuseks on punktiirjoon, kuid vajate kindlat joont?
- Tõenäoliselt on klaviatuuri Shift klahv vigane. Siin tulevad appi teised meetodid.

Võib-olla on kõige tavalisem viis Wordis rea loomiseks kasutada klaviatuuril paari klahvi.

I Õhuke, paks, topelt, punktiirjoon, kasutades klaviatuuri

Allpool on pilt ingliskeelse paigutusega, kuid ilma venekeelse paigutuseta klaviatuurist, kuid see ei oma tähtsust, sest meid huvitavad ainult kolm klahvi: Shift, dash ja Enter.

Riis. 1. Kolm klahvi klaviatuuril: tõstuklahv, sidekriips ja sisestusklahv Wordis pideva horisontaalse rea jaoks

Nende kolme klahviga saate Wordis joonistada pideva horisontaalse joone: punktiir või pidev, õhuke või paks, pikk või lühike.

1) Kui vajutate Wordi redaktoris mitu korda klahvi "-" (kriips), kuvatakse mis tahes pikkusega punktiirjoon.

Tegema õhuke pikk rida kogu lehe laiuses:

• Leiame klaviatuurilt klahvi “kriips” (nullklahvist paremal, joonisel 1 rohelises raamis).
• Wordi uuel (!) real vajutage seda klahvi mitu korda: -
• Ja seejärel vajutage klahvi "Enter" (). Mõned prinditud kriipsud muutuvad ootamatult pidevaks horisontaalseks õhukeseks jooneks kogu lehe laiuse ulatuses.

2) Kui vajutate samaaegselt klahvi Shift ja "-" (kriips), siis EI prindita kriipsu, vaid alljoont _________. Nii saate teha suvalise pikkusega pideva rea ​​kõikjal dokumendis.

Riis. 2. Õhuke ja paks horisontaaljoon Wordis

Nüüd trükime rasva horisontaaljoon kogu lehe laiuses:

• Taas leiame sama "kriipsu" klahvi ja ka Shift-klahvi (vasakul või paremal, nagu soovite). Vajutage tõstuklahvi, hoidke all ja ärge laske lahti.
• Ja nüüd klõpsake uuel (!) realt mitu korda (näiteks 3–4 korda) mõttekriipsu (tõstuklahvi mitte vabastades): ___. Vabastage Shift.
• Nüüd vajutage sisestusklahvi. Näete paksu horisontaalset pidevat joont.

Horisontaalne õhuke, paks, punktiirjoon ja topeltjoon Wordis klaviatuuri abil

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

II rida Wordis tabeli abil

Horisontaalse joone saab ühe lahtri (1x1) tabeli abil, milles on värvitud ainult ülemine või alumine ääris (nähtav) ja ülejäänud kolm tabeli külge on värvimata ääristega (need jäävad nähtamatuks) .

Asetage kursor kohta, kus joon peaks olema. Klõpsake Wordi ülemises menüüs:

• Sisestage (1 joonisel 3),
• Tabel (2 joonisel 3),
• Üks lahter (3 joonisel 3).

Riis. 3. Kuidas lisada Wordi 1x1 tabelit (ühest lahtrist).

Tulemuseks on ühe suure lahtri (1x1) tabel:

Jääb üle vaid 1x1 tabelis äärised kolmest küljest eemaldada. Selle jaoks

• minge vahekaardile "Kodu" (1 joonisel 4),
• siis "Font" kõrval leiame "Lõige" ja äärised (2 joonisel 4),
• eemaldage kõik äärised, klõpsates nuppu "Piirideta" (3 joonisel 4),
• valige "Ülemine ääris" või "Alumine ääris" (4 joonisel 4).

Riis. 4. Kuidas eemaldada Wordi tabelist ääriste valik (muuta äärised nähtamatuks)

Näitan seda selgelt videos (artikli lõpus).

Muide, joonisel fig. 3 on selge, et on olemas lihtsam viis. Saate asetada kursori Wordis rea algusesse ja klõpsata "Horizontal Line" (5 joonisel 4):

III rida Wordis joonist kasutades

Insert (1 joonisel 5) - Kujundid (2 joonisel 5) - see on veel üks viis horisontaalse joone saamiseks Wordis.

Joone rangelt horisontaalseks hoidmiseks hoidke all tõstuklahvi ja tõmmake joon samal ajal.

Riis. 5. Kuidas Wordis joont tõmmata

IV rida Wordis ekraaniklaviatuuri abil

Windows 10 puhul leiate ka ekraaniklaviatuuri, tippides otsinguribale "ekraaniklaviatuur".

Riis. 6. Ekraaniklaviatuur

Loome horisontaalse joone samamoodi nagu tavalise klaviatuuriga esimeses variandis. Ekraaniklaviatuuril on vaja kolme nuppu: kriips, tõstuklahv ja sisestus.

1 kriips ja sisestus

Wordi uuel real klõpsake mitu korda mõttekriipsu (1 joonisel 6) ja vajutage sisestusklahvi. Saate õhukese horisontaalse joone.

2 Tõstuklahv, kriips ja sisestus

Wordi uuel real klõpsake esmalt klahvi Shift (2 joonisel 6), seejärel Dash (1 joonisel 6). Saate allajoone. Kordame seda veel 2 korda ja seejärel vajutage sisestusklahvi. Selle tulemusena näeme paksu horisontaalset joont.

Mõnede saidi eriti oluliste elementide rõhutamiseks ei teeks paha kasutada kõikvõimalikke selleks ette nähtud CSS-i stiile ja atribuute. Loomulikult ei pea te teksti pärast liiga palju muretsema ja seda esile tõstma, näiteks paksus või kaldkirjas, muutma tausta või tegema teksti ümber raami. Kuid üks esitatud meetoditest ei ole alati sobiv. Oletame, et teil on tekst, mis tuleb selle semantilise koormuse eripära tõttu jagada. Siin tulevad appi HTML ja CSS omadused.

Kuidas CSS-i abil teksti rida teha

Plaanide elluviimiseks peame ühendust võtma style.css faili, olles sinna kirjutanud vastava omaduse piir. Selle tulemusel ilmub rida teksti kohale, alla või konkreetsele küljele. Rea kuvamise eest vastutavad omakorda mitmed omadused, nimelt:

- piiripealne– horisontaalne joon teksti kohal;

- piir-parem– vertikaalne joon, mis asub tekstist paremal;

- ääris-alumine– teksti all paiknev horisontaaljoon;

- piir-vasak– vasakul asuv vertikaaljoon.

Kuidas teha rida html-is

CSS-i atribuute kasutades saate HTML-koodi redigeerides määrata kõik vajalikud väärtused. Selleks peate minema saidi haldusosasse. Valige üks avaldatud materjalidest, lülitage tekstiredaktor HTML-koodi redigeerimisrežiimi ja sisestage CSS-i atribuudid. Näidist saab näha allpool.

Käskude lühikirjeldus

- laius- joone pikkus;

- tahke- pidev joon;

- täpiline- punktiirjoon.

Stiilide sügavamaks mõistmiseks soovitan seda lugeda.

On vaja mõista, et saidi koodi muutmise protsessis loetletakse atribuudid, mis määravad joone tüübi, selle paksuse ja värvi, eraldatuna tühikuga.

Sellel meetodil on mitmeid eeliseid:

Lai valik võimalusi, mille abil saate teha peaaegu iga joont.

Lihtne teha kõiki vajalikke muudatusi otse HTML-koodis. See lihtsustab kogenematute saidiehitajate ülesannet oluliselt.

Kuidas teha HTML-märgendi abil sirget horisontaaljoont

---

Esimese asjana juhin teie tähelepanu sellele, et sellel sildil ei ole hoolimata kõigist html-i peensustest ja põhimõtetest sulgevat silti. Seda saab kasutada kõikjal html-koodis, siltide vahel Ja

.

Sildi atribuudid

---

- laius– vastutab liini pikkuse eest. Saab määrata kas protsentides või pikslites.

- suurus- joone paksus. Määratud pikslites.

- värvi– määrab joone värvi.

- joondada– joonte joondamise eest vastutav atribuut. Meeskond omakorda on temaga seotud.

Põhimõtteliselt kasutatakse horisontaalseid jooni veebisaidi HTML-lehtede kaunistamiseks, andes neile atraktiivsema välimuse. Kuid nad suudavad ka visuaalselt eristada teavet külgnevatest jaotistest, lisades lugejatele selle uurimisel mugavust. Põhimõtteliselt tõmmake horisontaalsed jooned sinna, kus neid vajate, see on kõik.

Kuidas joonistada horisontaalset joont?

HTML-i horisontaaljoonte joonistamiseks on spetsiaalne silt

---

. Ja ta on blokeerida silt, see tähendab, et see loob reavahetused enne ja pärast iseennast, nii et rida jõuab alati eraldi reale. Seetõttu saab seda määrata ainult selliste siltide sees, mis võivad sisaldada näiteks plokielemente või

. Aga siin ma olen

---

ei saa olla sisu, kuna sellel lihtsalt pole sulgevat silti, mis tähendab, et see on tühi.

HTML-i horisontaaljoonte joonistamise näide

---

Lõik.

Lõik.

---

Lõik.

Tulemus brauseris

Lõik.

Lõik.

Lõik.

Nagu näete, on jooned väga õhukesed, ebaatraktiivsed ja tõmmatud kogu saadaolevale laiusele, nii et nüüd õpime, kuidas neid atraktiivsemaks muuta.

Kuidas muuta horisontaaljoonte värvi, paksust ja laiust?

HTML-i vanemates versioonides on silt

---

seal olid spetsiaalsed atribuudid, millega sai muuta horisontaaljoonte värvi, paksust ja laiust. Need on vastavalt värv, suurus ja laius. Kuid uutes versioonides loobuti neist CSS-i (Cascading Style Sheets) kasuks, nii et nagu võite arvata, kasutame taas oma lemmikstiili atribuuti. Üldine süntaks on:

---

style="background:color" >- joone (või õigemini selle tausta) värv.

---

style="height:size" >- joone paksus.

---

style="width:size" >- joone laius.

---

stiil= "taust: värv; kõrgus: suurus; laius: suurus"> - või saate määrata kõik parameetrid korraga, lihtsalt ärge unustage semikoolonit (;).

Värvi saab määrata selle ingliskeelse nimega või värvi HEX-koodiga, millele eelneb räsi (#). Noh, te teate seda juba õppetunnist alates muuta teksti ja tausta värvi.

Kuid me räägime lähemalt suuruse muutmisest. Nagu mäletate õppetund fontide muutmise kohta, on CSS-is umbes kümme mõõtühikut, kuid joone laius saab määrata ainult pikslites (px) ja protsentides (%) ning paksusüldiselt ainult pikslites. Kui panete muud mõõtühikud, siis pole viga, vaid brauserid lihtsalt ignoreerivad neid.

Kui määrate mõõtmed pikslites, sõltub joone paksus ja laius selle monitori eraldusvõimest, millelt teie saiti vaadatakse (mida suurem on ekraani eraldusvõime, seda õhem ja kitsam joon).

Nagu ma juba ütlesin, saab protsentides määrata ainult joone laiuse. Protsendisuurused sõltuvad alati ja arvutatakse selle emakonteineri elemendi suuruse põhjal, milles silt asub

---

. Sel juhul võetakse vanema mõõtmed 100%. Näiteks kui paneme sildi

---

style="width:50%" > sisemine element

, siis olenemata sellest, kuidas me muudame brauseriakna suurust või monitori eraldusvõimet, on joone laius alati pool ploki laiusest

.

Horisontaalsete joonte värvi, paksuse ja laiuse muutmise näide.

---

---

---

---

Tulemus brauseris

Horisontaalsete joonte asukoha muutmine

Kui muudate horisontaaljoone laiust, näete selgelt, et brauserid asetavad selle alati keskele. Kui soovite selle asukohta muuta, kasutage lihtsalt sees

---

joonda atribuut järgmiste väärtustega:

• Keskus- joon on joondatud keskele (vaikeväärtus).
• vasakule- surub vastu vasakut serva.
• õige- vajutab paremale servale.

Horisontaalsete joonte joondamise näide.

---

---

---

Tulemus brauseris

Kuidas eemaldada raami ümbert joont?

Vaadake selle õppetunni esimest näidet. Mis värvi need jooned teie arvates on? Kuid see pole tõsi. Need on läbipaistvad, nagu kõik leheelemendid, millel pole taustavärvi määratud! Ei usu mind? Seejärel vaadake näidet, kus muutsime joonte värvi. Kõige esimese puhul me ei määranud värvi, vaid suurendasime ainult selle suurust ja kas see joon pole läbipaistev? Nii et!

Nüüd ma selgitan. Vaikimisi joonistavad brauserid joonte ümber raamid, mis loovad kolmemõõtmelise efekti. Seega, kui me horisontaaljoonte paksust ei suurenda, näitavad brauserid meile ainult neid kaadreid, kuna joone enda paksus on 0 pikslit.

Rea ümbert äärise eemaldamiseks, mis sageli välimust rikub, rakendame uuesti stiiliatribuuti. Ja see on kirjutatud nii:

---

Kodutöö.

1. Loo artiklite, jaotiste ja alajaotiste pealkirjad. Asetage need kõik keskele.
2. Määrake kogu lehe font Arial ja pealkirjade jaoks Courier.
3. Olgu kogu lehe fondi suurus 85% brauseri vaikesuurusest. Ja pealkirjadel on vastavalt 145%, 125% ja 110% lehe fondi suurusest.
4. Kirjutage esimese pealkirja alla lõik, teise alla pikk tsitaat ja kolmanda alla luuletus. Ja luuletus olgu lehe keskel.
5. Kolm paksus kirjas sõna tsitaadis.
6. Joonistage artikli pealkirja alla kolme piksli paksune horisontaalne punane joon üle kogu lehe laiuse.
7. Joonistage luuletuse üla- ja alaossa ühe piksli suurused mustad jooned. Olgu ülemise rea laius ligikaudu võrdne salmi laiusega ja alumine - poole väiksem.
8. Eemaldage joontelt mittevajalikud raamid.