პროექტი: პირადი გვერდი

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

რას ააწყობ

საიტი სამი გვერდით, ერთ საქაღალდეში:

my-site/
  index.html      ← ჩემ შესახებ
  hobby.html      ← ჩემი ჰობი
  contact.html    ← კონტაქტი
  css/
    style.css
  images/
    (შენი სურათები)

მოთხოვნები

ყველა გვერდზე:

• სრული ჩონჩხი: <!DOCTYPE html>, lang="ka", charset, viewport, უნიკალური <title>;
• ერთნაირი <header> მენიუთი (<nav>, სია, aria-current მიმდინარე გვერდზე);
• <main> ერთი <h1>-ით;
• ერთნაირი <footer>;
• CSS ფაილის მიერთება <link>-ით.

index.html — ჩემ შესახებ:

• რამდენიმე აბზაცი შენზე (მხოლოდ სახელი ან მეტსახელი, პირადი მონაცემების გარეშე);
• სულ მცირე ერთი სურათი <figure>-ში, კარგი alt-ით და წარწერით;
• სია: „სამი ფაქტი ჩემ შესახებ“.

hobby.html — ჩემი ჰობი:

• სულ მცირე ორი <section>, თითო ჰობი, თავისი <h2>-ით;
• დანომრილი სია (მაგალითად, „როგორ დავიწყე“ ან „ჩემი ტოპ-3“);
• ცხრილი <caption>-ით და <thead>-ით (მაგალითად, „ჩემი ვარჯიშის კვირა“ ან „წაკითხული წიგნები“).

contact.html — კონტაქტი:

• ფორმა: სახელი, ელფოსტა, შეტყობინება (<textarea>), ყველა ველი <label>-ით, required სავალდებულოებზე;
• radio ჯგუფი <fieldset>-ით და <legend>-ით (მაგალითად, „რაზე გვწერ?“: კითხვა, იდეა, სხვა);
• ღილაკი type="submit".

ნაბიჯი 1: ჩონჩხი და მენიუ

დაიწყე ერთი გვერდით. ააწყე სრული ჩონჩხი და <header>, <main>, <footer>. როცა მზადაა, დააკოპირე ის ორ სხვა ფაილში და შეცვალე <title>, <h1> და aria-current-ის ადგილი.

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ჩემ შესახებ — ნინის საიტი</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <strong>ნინის საიტი</strong>
      <nav aria-label="მთავარი მენიუ">
        <ul>
          <li><a href="index.html" aria-current="page">ჩემ შესახებ</a></li>
          <li><a href="hobby.html">ჰობი</a></li>
          <li><a href="contact.html">კონტაქტი</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>გამარჯობა, მე ვარ ნინი!</h1>
    </main>
    <footer>
      <p>© 2026 ნინი</p>
    </footer>
  </body>
</html>

ნაბიჯი 2: შინაარსი

შეავსე სამივე გვერდი მოთხოვნების მიხედვით. სურათები images/ საქაღალდეში შეინახე, მარტივი სახელებით. თუ საკუთარი სურათი არ გაქვს, შენით დახატე და გადაიღე, ან გამოიყენე სურათი, რომლის გამოყენებასაც ავტორი ნებას რთავს.

ნაბიჯი 3: საკონტაქტო ფორმა

<form action="/contact" method="post">
  <p>
    <label for="name">სახელი</label>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="email">ელფოსტა</label>
    <input type="email" id="email" name="email" required>
  </p>
  <fieldset>
    <legend>რაზე გვწერ?</legend>
    <label><input type="radio" name="topic" value="question" checked> კითხვა</label>
    <label><input type="radio" name="topic" value="idea"> იდეა</label>
    <label><input type="radio" name="topic" value="other"> სხვა</label>
  </fieldset>
  <p>
    <label for="message">შეტყობინება</label><br>
    <textarea id="message" name="message" rows="4" required></textarea>
  </p>
  <button type="submit">გაგზავნა</button>
</form>

ფორმა შენს კომპიუტერზე ვერსად გაიგზავნება: მონაცემების მისაღებად სერვერის პროგრამა გჭირდება, რომელსაც მოგვიანებით ისწავლი. ამ პროექტში მთავარია, რომ ფორმა სწორად იყოს აგებული.

ნაბიჯი 4: ცოტა ფერი

css/style.css-ში ჩაწერე CSS ფაილის თავიდან ნასწავლი რამდენიმე წესი: შრიფტი, ფონი, სათაურების ფერი. საიტი მაშინვე „გაცოცხლდება“. დიზაინს ნამდვილად CSS-ის კურსში შეუდგები.

ნაბიჯი 5: შემოწმება

1. გაიარე სამივე გვერდი და დააჭირე ყველა ბმულს.
2. შეამოწმე თითოეული გვერდი validator.w3.org-ზე და გაასწორე ყველა შეცდომა.
3. გაიარე საიტი მხოლოდ კლავიატურით: Tab და Enter.
4. შეამოწმე, რომ საიტზე არ არის პირადი მონაცემები.

გააუმჯობესე

თუ მოთხოვნები შეასრულე, აირჩიე ერთი ან მეტი დამატებითი გამოწვევა:

• სარჩევი „ჰობის“ გვერდზე, ღუზებით თითოეულ <section>-ზე, და ბმული „↑ ზემოთ“.
• <aside> „იცოდით?“ ფაქტით რომელიმე გვერდზე.
• „გადადი შინაარსზე“ ბმული ყველა გვერდის თავში.
• გამოქვეყნება მშობელთან ან მასწავლებელთან ერთად, GitHub Pages-ზე ან სხვა უფასო სერვისზე.

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

• სამი გვერდი, ერთნაირი მენიუთი და ძირით, ყოველი უნიკალური სათაურით.
• ყველა მოთხოვნილი ელემენტი: figure, სიები, section-ები, ცხრილი caption-ით, ფორმა label-ებით და fieldset-ით.
• ვალიდატორი შეცდომას არ აჩვენებს, ყველა ბმული მუშაობს.
• საიტი კლავიატურით სრულად სამართავია და პირად მონაცემებს არ შეიცავს.

ეს საიტი შენი პირველი პორტფოლიოა. როცა CSS-ს და JavaScript-ს ისწავლი, მას დაუბრუნდები და ლამაზ, ცოცხალ საიტად აქცევ: HTML ჩონჩხი უკვე მზადაა.