შესვლა

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

ციტატა და კოდი

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#blockquote#q#code#pre#kbd

რას ისწავლი

  • როგორ ჩასვა გრძელი და მოკლე ციტატა
  • როგორ მიუთითო ნაწარმოების სახელი
  • როგორ აჩვენო კოდი და კლავიატურის ღილაკები

გრძელი ციტატა: blockquote

როცა სხვის ტექსტს რამდენიმე წინადადებით იმეორებ, მას <blockquote>-ში ჩასვამ. ბრაუზერი ასეთ ციტატას ცალკე ბლოკად, შეწეულად აჩვენებს:

HTML
<blockquote cite="https://ka.wikipedia.org/wiki/ვეფხისტყაოსანი">
  <p>რასაცა გასცემ, შენია, რაც არა, დაკარგულია.</p>
</blockquote>
<p>— შოთა რუსთაველი, <cite>ვეფხისტყაოსანი</cite></p>

cite ატრიბუტში შეგიძლია მიუთითო წყაროს მისამართი. ის ეკრანზე არ ჩანს, მაგრამ ბრაუზერებსა და პროგრამებს ეუბნება, საიდან არის ციტატა. ავტორის სახელი ციტატის გარეთ, ჩვეულებრივ ტექსტად წერია.

<blockquote>-ის შიგნით ჩვეულებრივ აბზაცები (<p>) დგას: ციტატა შეიძლება რამდენიმე აბზაცისგან შედგებოდეს. სხვისი სიტყვების ციტირებისას ყოველთვის მიუთითე ავტორი და წყარო. ეს პატივისცემის ნიშანია და მკითხველსაც ეხმარება, ორიგინალი თვითონ იპოვოს.

მოკლე ციტატა: q

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

HTML
<p>მასწავლებელმა თქვა: <q>შეცდომა სწავლის ნაწილია</q>, და ყველამ შვებით ამოისუნთქა.</p>

ნაწარმოების სახელი: cite

ცალკე ელემენტი <cite> წიგნის, ფილმის, სიმღერის ან თამაშის სახელს აღნიშნავს: <cite>დათა თუთაშხია</cite>. ნაგულისხმევად ის დახრილად ჩანს. ყურადღება: <cite> ნაწარმოების სახელისთვისაა და არა ადამიანის სახელისთვის. თუ წიგნის ავტორი გინდა აღნიშნო, ის ჩვეულებრივ ტექსტად დაწერე, <cite>-ის გარეთ.

კოდი ტექსტში: code

როცა ტექსტში პროგრამის კოდის ნაწილს ახსენებ, ჩასვი ის <code>-ში. ბრაუზერი მას თანაბარი სიგანის შრიფტით აჩვენებს, რომ ჩვეულებრივი ტექსტისგან გამოირჩეოდეს:

HTML
<p>ეკრანზე დასაბეჭდად გამოიყენე <code>console.log()</code>.</p>

კოდის ბლოკი: pre და code ერთად

რამდენიმე ხაზიანი კოდისთვის <pre> და <code> ერთად გამოიყენება: <pre> ინარჩუნებს შეწევებს და ახალ ხაზებს, <code> კი ამბობს, რომ შიგნით კოდია:

HTML
<pre><code>for (let i = 1; i &lt;= 3; i++) {
  console.log(i);
}</code></pre>

ყურადღება მიაქციე &lt;-ს: ეს „ნაკლებობის“ ნიშანი <-ია. HTML-ში < ახალ ტეგს იწყებს, ამიტომ ტექსტად საჩვენებლად სპეციალური ჩანაწერი სჭირდება. ამ სპეციალურ სიმბოლოებს შემდეგ თავში დაწვრილებით ისწავლი.

კლავიატურის ღილაკები: kbd

<kbd> (keyboard) ღილაკებს აღნიშნავს, რომლებიც მომხმარებელმა უნდა დააჭიროს: შესანახად დააჭირე <kbd>Ctrl</kbd> + <kbd>S</kbd>. ის ინსტრუქციებში და თამაშების მართვის აღწერაში ძალიან გამოგადგება.

ეს გვერდიც, რომელსაც ახლა კითხულობ, ზუსტად ამ ელემენტებით არის აწყობილი: ტექსტში ჩასმული კოდი <code>-შია, კოდის ბლოკები <pre><code>-ში. გახსენი DevTools (F12) და შეამოწმე.

სცადე თავად

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

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

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

  • ბრჭყალები <q>-ში ხელით. ბრაუზერი თვითონ ამატებს, ამიტომ ორმაგი ბრჭყალები მიიღებ.
  • <blockquote> შეწევისთვის. ის მხოლოდ ციტატებისთვისაა. შეწევა CSS-ის საქმეა.
  • < კოდში. <pre>-ის შიგნითაც < ტეგს იწყებს. ტექსტად საჩვენებლად დაწერე &lt;.

სავარჯიშო

დაწერე პატარა ინსტრუქცია: სათაური როგორ შევინახო ფაილი, აბზაცი, რომ შესანახად Ctrl და S უნდა დააჭირო (<kbd>-ით), და აბზაცი, რომ ფაილის სახელი უნდა იყოს index.html (<code>-ით). ბოლოს დაამატე მოკლე ციტატა <q>-ით: მთავარია, ხშირად შეინახო.

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

ღილაკები: <kbd>Ctrl</kbd> + <kbd>S</kbd>. ფაილის სახელი: <code>index.html</code>.

✅ ამოხსნის ნახვა
HTML
<h1>როგორ შევინახო ფაილი</h1>
<p>დააჭირე <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>ფაილს დაარქვი <code>index.html</code>.</p>
<p>ბიტის რჩევა: <q>მთავარია, ხშირად შეინახო</q>.</p>

მინი-ქვიზი

1რომელი ელემენტი გამოიყენო რამდენიმე წინადადებიანი ციტატისთვის?

2რას აღნიშნავს <cite>?

3როგორ აჩვენო < ნიშანი კოდის ბლოკში?

შეჯამება

  • <blockquote> გრძელი ციტატაა, <q> მოკლე, ბრჭყალებს ბრაუზერი ამატებს.
  • <cite> ნაწარმოების სახელია.
  • <code> კოდია ტექსტში, <pre><code> კოდის ბლოკი შეწევებით.
  • <kbd> კლავიატურის ღილაკებია. < კოდში იწერება როგორც &lt;.
📝 ჩემი შენიშვნა