შესვლა

HTML › დამწყები › ტექსტი

მუქი და დახრილი ტექსტი

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#strong#em#mark#sub#sup

რას ისწავლი

  • რით განსხვავდება <strong> <b>-სგან და <em> <i>-სგან
  • როგორ მონიშნო ტექსტი, წაშლილი და დამატებული ტექსტი
  • როგორ დაწერო H₂O და x² <sub>-ით და <sup>-ით

მნიშვნელობა და გარეგნობა

HTML-ში ტექსტის მონიშვნის რამდენიმე ელემენტია და ზოგი მათგანი ერთნაირად გამოიყურება. განსხვავება მათ მნიშვნელობაშია. ეს ის იდეაა, რომელიც სათაურების თავში გაიცანი: ელემენტს იმის მიხედვით ირჩევ, რას ნიშნავს ტექსტი, და არა იმის მიხედვით, როგორ უნდა გამოიყურებოდეს.

strong და b

  • <strong> ნიშნავს: „ეს მნიშვნელოვანია, სერიოზული ან სასწრაფოა“. მაგალითად, გაფრთხილება: <strong>არ შეეხო ცხელ ქვაბს!</strong>. ეკრანის წამკითხველი ასეთ ტექსტს ზოგჯერ სხვა ტონით კითხულობს.
  • <b> ტექსტს უბრალოდ მუქად აჩვენებს დამატებითი მნიშვნელობის გარეშე: მაგალითად, საკვანძო სიტყვები სტატიის დასაწყისში ან პროდუქტის სახელი მიმოხილვაში.

ორივე ნაგულისხმევად მუქია. თუ ეჭვი გეპარება, <strong> აირჩიე: ის თითქმის ყოველთვის უფრო ზუსტია.

em და i

  • <em> (emphasis, ხაზგასმა) ცვლის წინადადების აზრს, როგორც ხმამაღლა თქმისას ხმის აწევა: მე <em>ვთქვი</em>, რომ მოვალ (და არა „მოვედი“).
  • <i> ტექსტს „სხვა ხმით“ გამოყოფს: ტერმინი, უცხო ენის სიტყვა, გემის ან წიგნის პერსონაჟის ფიქრი. მაგალითად: <i lang="la">Felis catus</i> კატის სამეცნიერო სახელია.

ორივე ნაგულისხმევად დახრილია.

რატომ ვრთულდებით ორი ერთნაირი ელემენტით? იმიტომ, რომ გვერდს არა მარტო ადამიანი „კითხულობს“. ეკრანის წამკითხველი, საძიებო სისტემა ან ბრაუზერის „კითხვის რეჟიმი“ ფერს და შრიფტს ვერ ხედავს, ელემენტის სახელს კი ხედავს. <strong> მათ ეუბნება „ეს მნიშვნელოვანია“, <b> კი არაფერს. და კიდევ: ხვალ CSS-ით შეგიძლია <em> ფერადი გახადო, დახრილის ნაცვლად. მნიშვნელობა დარჩება, გარეგნობა შეიცვლება.

სხვა მონიშვნები

  • <mark> ტექსტს ფერადად „ხაზავს“, როგორც მარკერით: ძებნის შედეგში ნაპოვნი სიტყვა ან ის, რაზეც ყურადღება უნდა მიაქციო.
  • <small> წვრილი შრიფტის ტექსტია: შენიშვნები, საავტორო უფლებები, პირობები.
  • <del> და <ins> აჩვენებს წაშლილ და დამატებულ ტექსტს: <del>50 ლარი</del> <ins>35 ლარი</ins> ფასდაკლებას გამოხატავს. წაშლილი ხაზგადასმულია, დამატებული ხაზგასმული.

ფორმულები: sub და sup

  • <sub> (subscript) ტექსტს ქვემოთ, პატარად წერს: წყლის ფორმულა H<sub>2</sub>O.
  • <sup> (superscript) ზემოთ, პატარად: x<sup>2</sup> ან 10<sup>3</sup> = 1000.

ეს ელემენტები მხოლოდ იქ გამოიყენე, სადაც ზემო ან ქვედა ინდექსი შინაარსის ნაწილია: ფორმულებში, სქოლიოების ნომრებში. ტექსტის „ასაწევად“ ლამაზი ეფექტისთვის CSS გამოიყენე.

სცადე თავად

გაუშვი და ნახე ყველა ელემენტი ერთად. მერე დაწერე წინადადება, რომელშიც <em> სიტყვის აზრს ცვლის.

HTML · სცადე თავად

ხშირი შეცდომები

  • <b> ყველგან, სადაც მნიშვნელოვანია. მნიშვნელოვან ტექსტს <strong> შეეფერება.
  • ელემენტი გარეგნობისთვის. თუ უბრალოდ მუქი შრიფტი გინდა მთელი სათაურისთვის ან ღილაკისთვის, ეს CSS-ია, არა <strong>.
  • ყველაფრის მონიშვნა. თუ აბზაცის ნახევარი <strong>-შია, აღარაფერი გამოირჩევა. მონიშნე მხოლოდ მართლა მთავარი.

სავარჯიშო

დაწერე ქიმიის გაკვეთილის შენიშვნა: აბზაცი, რომ ნახშირორჟანგის ფორმულაა CO₂ (<sub>-ით), აბზაცი, რომ 2³ = 8 (<sup>-ით), და გაფრთხილება <strong>-ით: ექსპერიმენტი მხოლოდ მასწავლებელთან ერთად!.

HTML · სცადე თავად
💡 მინიშნება

CO<sub>2</sub> და 2<sup>3</sup> = 8.

✅ ამოხსნის ნახვა
HTML
<p>ნახშირორჟანგის ფორმულაა CO<sub>2</sub>.</p>
<p>ორის მესამე ხარისხი: 2<sup>3</sup> = 8.</p>
<p><strong>ექსპერიმენტი მხოლოდ მასწავლებელთან ერთად!</strong></p>

მინი-ქვიზი

1რომელი ელემენტი ნიშნავს „ეს მნიშვნელოვანია“?

2როგორ დაწერო x²?

3რას გამოხატავს <del>50</del> <ins>35</ins>?

შეჯამება

  • <strong> მნიშვნელოვანია, <b> უბრალოდ მუქი. <em> ხაზგასმაა, <i> „სხვა ხმა“.
  • <mark> მონიშვნაა, <small> წვრილი შრიფტი, <del>/<ins> წაშლილი და დამატებული ტექსტი.
  • <sub> და <sup> ფორმულებისთვისაა: H₂O, x².
  • ელემენტს მნიშვნელობით ირჩევ, გარეგნობას CSS განსაზღვრავს.
📝 ჩემი შენიშვნა