HTML მოკლედ

7/16/2026

აქ მოცემულია თქვენს მიერ ჩამოთვლილი HTML ელემენტების მოკლე განმარტებები და ერთიანი კოდის მაგალითი, სადაც ყველა ერთად არის გამოყენებული. ბოლოს დამატებითი მარტივი ელემენტებიც გირჩევთ.

ელემენტების მოკლე განმარტება

<html> – მთელი HTML დოკუმენტის ძირეული (root) ელემენტი. მასში ყველაფერი თავსდება.
<head> – დოკუმენტის "სათაური" ნაწილი. შეიცავს მეტამონაცემებს (კოდირება, სათაური, სტილები), რომლებიც ბრაუზერში არ ჩანს.
<body> – დოკუმენტის "სხეული". აქ თავსდება მთელი ხილული შიგთავსი (ტექსტები, სურათები, ღილაკები).
<p> – აბზაცი (Paragraph). ტექსტის ლოგიკური ბლოკი, რომელიც ერთმანეთისგან ავტომატურად აშორებს ზღვრებს.
<br> – ხაზის იძულებითი გადატანა (Line Break). არ საჭიროებს დახურვის ტეგს, გადააქვს ტექსტი ახალ ხაზზე.
<a> – ჰიპერბმული (Anchor). გამოიყენება სხვა გვერდზე ან რესურსზე გადასასვლელად (href ატრიბუტით).
<img> – სურათის ჩასმა (Image). src-ით მიუთითებთ ფაილის მისამართს, alt-ით – ალტერნატიულ აღწერას.
<h1> – <h6> – სათაურები. h1 ყველაზე მაღალი (მთავარი) დონეა, h6 – ყველაზე დაბალი.
<table> – ცხრილი. მასში მონაცემები ილაგება სტრიქონებად (<tr>) და უჯრებად (<td>).
<ul> – დაუნომრავი (მარკერებიანი) სია. თითოეული ელემენტი ფორმატდება <li>-თი.
<ol> – დანომრილი (რიცხვებიანი) სია. თითოეული ელემენტი ასევე <li>-თი.
<li> – სიის ცალკეული წევრი (List Item), რომელიც მხოლოდ <ul>-ის ან <ol>-ის შიგნით იწერება.
<style> – CSS სტილების კონტეინერი. იწერება <head>-ში და აღწერს ელემენტების ვიზუალურ დიზაინს.

ერთიანი მაგალითი (ყველა ელემენტი ერთ გვერდზე)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ჩემი პირველი გვერდი</title>
    <!-- style ელემენტი: გვერდის ფონი და ცხრილის საზღვრები -->
    <style>
      body { background: #f4f4f4; font-family: Arial; }
      table, td { border: 1px solid black; border-collapse: collapse; padding: 6px; }
    </style>
  </head>
  <body>

    <!-- სათაურები h1 - h2 -->
    <h1>მთავარი სათაური</h1>
    <h2>ქვესათაური</h2>

    <!-- p აბზაცი და br ხაზის გადატანა -->
    <p>ეს არის პირველი აბზაცი. <br>ეს ტექსტი უკვე ახალ ხაზზეა br-ის დახმარებით.</p>

    <!-- a - ბმული -->
    <a href="https://example.com">ეს არის ბმული</a>

    <!-- img - სურათი -->
    <img src="https://via.placeholder.com/80" alt="მაგალითი სურათი">

    <!-- ul - დაუნომრავი სია -->
    <ul>
      <li>პუნქტი პირველი</li>
      <li>პუნქტი მეორე</li>
    </ul>

    <!-- ol - დანომრილი სია -->
    <ol>
      <li>პირველი ნაბიჯი</li>
      <li>მეორე ნაბიჯი</li>
    </ol>

    <!-- table - ცხრილი -->
    <table>
      <tr>
        <td>უჯრა 1</td>
        <td>უჯრა 2</td>
      </tr>
      <tr>
        <td>უჯრა 3</td>
        <td>უჯრა 4</td>
      </tr>
    </table>

  </body>
</html>

სხვა მარტივი და ძირითადი ელემენტები, რომელთა დამატებაც ღირს

<div> – ბლოკური კონტეინერი. ყველაზე გავრცელებული ელემენტი განყოფილებებისა და სექციების დასაჯგუფებლად.
<span> – ხაზოვანი კონტეინერი. გამოიყენება ტექსტის მცირე ნაწილის (მაგ., ერთი სიტყვის) შეღებვის ან სტილიზაციისთვის.
<strong> – ტექსტის გაძლიერება (ბრაუზერში ცხიმიანად – მსხვილი ჩანს).
<em> – ტექსტის ემფაზია (ბრაუზერში დახრილად – იტალიკად ჩანს).
<hr> – ჰორიზონტალური გამყოფი ხაზი (თემატური გადასვლისთვის).
<input> – შეყვანის ველი (მაგ., ტექსტის, პაროლის ან ღილაკისთვის), რომელიც ფორმებში გამოიყენება.

მაგალითი ამ დამატებითი ელემენტების გამოყენებისა:

<div>
  <span style="color:red;">წითელი</span> და <strong>მსხვილი</strong> ტექსტი.
  <hr>
  <input type="text" placeholder="შეიყვანეთ ტექსტი">
  <em>დახრილი ტექსტი</em>
</div>

Search This Blog

HTML მოკლედ

ელემენტების მოკლე განმარტება

ერთიანი მაგალითი (ყველა ელემენტი ერთ გვერდზე)

სხვა მარტივი და ძირითადი ელემენტები, რომელთა დამატებაც ღირს

Comments

კომენტარი

Popular posts from this blog

თხა და გიგო (ზღაპარი)

@ მეილის ნიშნის ისტორია

🐈 სკრეჩით და 🐍 პითონით პროგრამირება პედაგოგებისთვის (3პ+AI)