კომპიუტერი და ინტერნეტი

პროგრამირება

HTML/CSS

როგორ ვისწავლოთ HTML/CSS

ავტორი: გიორგი ნემსაძე

ჰიპერტექსტური აღწერის ენა (ინგლ. HTML - Hyper Text Markup Language), ტიმ ბერნერს-ლის მიერ 1993 წელს შექმნილი აღწერის ენა განკუთვნილია ვებ–გვერდების შესაქმნელად და ინფორმაციის გასავრცელებლად ინტერნეტის საშუალებით.
ყველაფერი რასაც ჩვენ ეხლა ვხედავთ ბრაუზერში როგორ.ჯიზე (ძებნა, ინსტრუქციები, პროფილი და ა.შ.) არის HTML ტეგებისაგან აწყობილი სტრუქტურა, რომელიც გაფორმებულია CSS-ით. ვებ-პროგრამირებაში არსებობს ორი მხარე - კლიენტის და სერვერის მხარე. ჩვენ შემთხვევაში HTML და CSS არის კლიენტის მხარე, ანუ რასაც ვხედავთ გამოტანილს, უკვე დამუშავებულ ვიზუალიზაციას, ხოლო სერვერის მხარე ამ ყველაფერს ამუშავებს და გადაცემს ჩვენ საყვარელ ბროუზერს, რომ გამოგვიტანოს ეკრანზე.
იმ დროს როდესაც თქვენ შემოხვედი ამ ინსტრუქციის სანახავად, სერვერზე წარიმართა შემდეგი პროცესი:
1. თქვენ ბრაუზერის საშუალებით გადაეცით სერვერს მოთხოვნა, რომ გაჩვენოთ ინსტრუქცია HTML და CSS-ზე.
2. ჩვენმა სერვერმა, PHP პროგრამირების ენის საშუალებით დაიწყო ძებნა ბაზაში ამ ინსტრუქციის.
3. იპოვა და დაამუშავა ისევ და ისევ PHP პროგრამირების ენის მეშვეობით.
4. და ბოლოს, ეს დამუშავებული ვარიანტი (უკვე გარდაქმნილი HTML-ში) გამოუგზავნა უკან თქვენს ბრაუზერს და CSS-მა ლამაზად შეფუთა და გააფორმა.

 

საჭირო მასალები/ხელსაწყოები:

  • Notepad++

საფეხურები

  1. 1 რა არის HTML
    - HTML ითარგმნება, როგორც ჰიპერ ტექსტის აღწერის ენა (Hyper Text Markup Language).
    - HTML ფაილი წარმოადგენს თეგების საშუალებით აღწერილ ტექსტურ ინფორმაციას.
    - მარკირებული ტეგები ბრაუზერს გადასცემენ გვერდის ეკრანზე გამოტანის ინფორმაციას.
    - HTML ფაილს აქვს html, ან htm გაფართოვება.
    - HTML ფაილის შექმნა შესაძლებელია უბრალო ტექსტური რედაქტორით.
  2. 2 როგორ დავიწყოთ HTML და CSS-ის სწავლა
    1. გადმოიწერეთ და დააყენეთ პროგრამა Notepad++, რათა გაგიადვილდეთ მუშაობა
    2. New Text Document-ზე დააკლიკეთ მაუსის მარჯვენა ღილაკს და ამოირჩიეთ Edit with Notepad++
    3. მაგალითისთვის ჩაწერეთ ქვემოთ მოცემული HTML კოდი:

    <!DOCTYPE html>
    <head>
    <title>Rogor.ge - HTML და CSS დამწყებთათვის</title>
    </head>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>


    4. შენახვისთვის დააჭირეთ File -> Save as და ამოირჩიეთ Hyper Text Markup Language
    5. გახსენით შენახული ფაილი ბრაუზერით (მაუსის ორჯერ დაკლიკებით), ხოლო ძველი ფაილი (New Text Document) შეგიძლიათ წაშალოთ. ახალ ფაილზე დაეხატება ბრაუზერის ხატულა (Icon).
    6. ბრაუზერი გაჩვენებთ მიღებულ შედეგს, ისეთს როგორიც სურათშია მოცემული

  3. 3 ჩაატარეთ ექპერიმენტები
    აიღეთ და დაარედაქტირეთ წინა საფეხურში ახსნილი ახალი ფაილი, წაიკითხეთ წიგნები, სტატიები, უყურეთ ვიდეო გაკვეთილებს და რაც შეიძლება მეტი ექსპერიმენტი ატარეთ.
    დაიწყეთ სწავლა w3schools.com-დან:
    - HTML-ის გაკვეთილები
    - CSS-ის გაკვეთილები
  4. 4 დავამატოთ ცოტაოდენი CSS წინა საფეხურში შექმნილ HTML ფაილს

    <!DOCTYPE html>
    <head>
    <title>Rogor.ge - HTML და CSS დამწყებთათვის</title>
    <style type="text/css">
    h1 {
    color:red; /* ფონტის ფერი */
    }
    p {
    background-color:black; /* უკანა ფონის ფერი */
    color:white; /* ფონტის ფერი */
    }
    </style>
    </head>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>


    შეინახეთ ფაილი CTRL + S ღილაკით და დაარეფრეშეთ ბრაუზერი.
    ბრაუზერი გაჩვენებთ მიღებულ შედეგს, ისეთს როგორიც სურათშია მოცემული

  5. 5 HTML და CSS-ის მთლიანი კურსის შესწავლა, რთულია ერთ კონკრეტულ ინსტრუქციაში.
    თქვენ უკვე იცით, როგორ მუშაობს HTML, როგორ მუშაობს CSS და მათი დანიშნულება, უკვე მზად ხართ იმისთვის, რომ დაიწყოთ წიგნების კითხვა, ვიდეო გაკვეთილების ყურება და რაც მთავარია - ექსპერიმენტები.