If you're seeing this message, it means we're having trouble loading external resources on our website.

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

რა ვისწავლოთ შემდეგ

გილოცავთ HTML-ისა და CSS-ის საფუძვლების შესწავლას! თქვენ ახლა ბევრი რამ გესმით ვებგვერდებისა და მის შესახებ, რასაც ინტერნეტში ხედავთ. წესით, უნდა შეგეძლოთ ამ ვებგვერდის ნახვისას HTML-ის ტეგებისა და CSS-ის თვისებების შემჩნევა.
კიდევ ძალიან ბევრი რამის გაკეთება შეგიძლიათ HTML–ისა და CSS-ის ცოდნის გასაღრმავებლად. გააგრძელეთ კითხვა!

მეტი HTML ტეგი

  • ფორმის ტეგები: არსებობს რამდენიმე ტეგი, რომლებიც გამოიყენება ვებ ფორმების დასამზადებლად, როგორიცაა <button>-ები და <input>-ები. ისინი, ზოგადად, გამოიყენება მონაცემთა სერვერთან საკომუნიკაციოდ, რასაც ხანის აკადემიაზე არ ვრთავთ. მათი გამოყენება აგრეთვე შეიძლება თამაშების დასაწერად JS-თან, რასაც ვასწავლით HTML/JS კურსში. ისწავლეთ მეტი ფორმის ტეგებზე ამ სლაიდებით. ისწავლეთ სერვერის მხარის ენები, როგორიცაა PHP, Python, Ruby Codecademy-ზე.
  • Iframe-ები: <iframe> ტეგი გამოიყენება სხვა ვებგვერდის თქვენსაში ჩასასმელად და მოსახერხებელია ისეთ შემთხვევებში, როგორიცაა Youtube-ის ვიდეოების ჩასმა, Google-ის რუკების ჩასმა და ა.შ. ხანის აკადემიაზე ეს ტეგი ამჟამად გათიშულია უსაფრთხოებისა და მოდერირების მიზეზებით, მაგრამ მათი გამოცდა სხვაგან შეგიძლიათ. ისწავლეთ მეტი ამ სლაიდებით.
  • მულტიმედია ტეგები: <audio> და <video> ტეგებს აქვთ თანამედროვე ბრაუზერების მხარდაჭერა, როგორც აუდიოსა და ვიდეოს ჩართვის გზებს ვებგვერდებზე. როგორც <iframe> ტეგი, ისინიც გათიშულია ხანის აკადემიაზე, მაგრამ მათი გამოყენება შესაძლებელია სხვაგან. ისწავლეთ მეტი ამ სლაიდებით.
  • ახალი სემანტიკური ტეგები: ბოლო წლებში, როგორც „HTML5"-ის სპეციფიკაციის ნაწილი, ბრაუზერებმა დეველოპერებისთვის დაამატეს ახალი სემანტიკური ტეგები <div>-ების ნაცვლად გამოსაყენებლად, როდესაც საჭიროა, მაგალითად: <article>, <aside>, <nav> და ა.შ. აი, ბევრი სტატია მათ შესახებ აქ, მათ შორის ეს მოსახერხებელი ბლოკ-სქემა, რომელიც დაგეხმარებათ, მიხვდეთ, როდის გამოიყენოთ ისინი.

CSS-ის მეტი სელექტორი და თვისება

ამ ყველაფრის ცდა შეგიძლიათ ხანის აკადემიაზე:
  • CSS3: ჩვენ გავიარეთ CSS, რომელსაც წლობით ჰქონდა მხარდაჭერა ბრაუზერებში, მაგრამ არსებობს CSS–ის ბევრი თვისება და სელექტორი, რომლებსაც „CSS3"–ის სპეციფიკაციებს ეძახიან და ბრაუზერები განუწყვეტლივ ამატებენ მათ მხარდაჭერას ახალი ვერსიების გამოსვლის პარალელურად. შეგიძლიათ, ისწავლოთ მეტი ამ CSS3 სელექტორების სლაიდებში და CSS3-ის თვისებების სლაიდებში. აუცილებლად იხილეთ caniuse.com, რათა ნახოთ, რას აქვს მხარდაჭერა თითოეულ ბრაუზერში.
  • მედია მოთხოვნები: ეს არის ტექნიკა, რომელიც საშუალებას გაძლევთ, მიუთითოთ კონკრეტული CSS კონკრეტული სიტუაციებისათვის, მაგალითად, მაშინ, როცა თქვენს ვებგვერდს გახსნიან მცირე ზომით ან მაშინ, როდესაც მას ბეჭდავენ. ისწავლეთ მეტი W3C-დან.
  • CSS–ის სამუშაო გარსები: სამუშაო გარსი არის CSS–ის წესებისა და კლასების კრებული და ბევრი დეველოპერი იყენებს CSS–ის სამუშაო გარსებს CSS-ის უფრო სწრაფად დასაწერად. ყველაზე პოპულარულია Twitter Bootstrap, მაგრამ აგრეთვე არსებობს ZURB foundation, Pure CSS, Topcoat, და სხვა.

JS-ის გამოყენება ვებგვერდებზე

ვებგვერდების ინტერაქტიულად გადასაქცევად ვებ დეველოპერები იყენებენ JavaScript–ს მომხმარებლიდან მიღებულ მოვლენებზე რეაგირებისთვის და სერვერებიდან მონაცემთა დინამიურად შემოსაყვანად. ამ ყოველივეს აკეთებენ <script> ტეგის HTML–ში ჩასმით და ამ ტეგებში JavaScript–ის ჩასმით. მათი JS კოდი შემდეგ იყენებს „DOM API"–ს, ფუნქციათა სიმრავლეს, რომლებსაც ბრაუზერები ხელმისაწვდომს ხდიან ყველა ვებგვერდზე, რათა დეველოპერებს მისცენ წვდომა და მანიპულირების საშუალება ამ გვერდზე.
ეს იმას ნიშნავს, რომ თუ გსურთ, ისწავლოთ, როგორ გახადოთ ვებგვერდები ინტერაქტიული, თქვენ დაგჭირდებათ როგორც JavaScript-ის საფუძვლების შესწავლა (რისი გაკეთებაც შეგიძლიათ აქ, ხანის აკადემიაზე), ასევე DOM API-ის შესწავლა (რისი გაკეთებაც შეგიძლიათ ჩვენს კურსში).

ვებგვერდების შექმნა ხანის აკადემიის გარეთ

ჩვენ გვიყვარს თქვენი ვებგვერდების კეთებისა და თქვენი ნასწავლის სხვებთან გაზიარების პროცესის ყურება, მაგრამ ჩვენ აგრეთვე ვფიქრობთ, რომ კარგი იდეაა კოდის რედაქტირების სხვა გარემოების მოსინჯვა და იმ ფუნქციონალებით სარგებლობა, რომლებიც ჩვენ არ გვაქვს ჩართული. თუ გსურთ კოდის წერის ბრაუზერში გაგრძელება (განსაკუთრებით იმ შემთხვევაში, თუ ChromeBook-ზე ხართ), შეგიძლიათ, სცადოთ JSBin.com, JSFiddle.net, Cloud9 IDE, ან Mozilla Thimble.
თუ გსურთ, წეროთ კოდი ბრაუზერის გარეთ, თქვენ უნდა გადმოწეროთ IDE და შეინახოთ ვებგვერდები, როგორც „.html" ფაილები. პოპულარული IDE-ებია Notepad++ (მხოლოდ Windows-ზე), SublimeText, Adobe Brackets, Coda, და TextWrangler.

ვებგვერდების ჰოსტინგი სერვერზე

ჩვენ უზრუნველვყოფთ თქვენ მიერ შექმნილი ვებგვერდების ჰოსტინგს აქ, ხანის აკადემიაზე, ჩვენს საკუთარ სერვერზე, თუმცა კარგი იქნება, თუ თქვენს საკუთარ ვებ პრეზენტაციას შექმნით.
პირველ რიგში თქვენ უნდა მოძებნოთ კომპანია, რომელიც განახორციელებს თქვენი საიტის ჰოსტინგს. არსებობს სხვადასხვა მოქნილობის, დონის და ფასის მქონე მრავალი ჰოსტინგის პროვაიდერი.
თქვენ, ასევე, უნდა შექმნათ დომეინის სახელი, მაგალითად „mycoolname.com", რათა თქვენი ვებსაიტი იყოს თქვენი პიროვნების ნაწილი. ზოგჯერ თქვენ შეგიძლიათ, გააკეთოთ ეს თქვენი ჰოსტინგ პროვაიდერის საშუალებით, მაგრამ უფრო ხშირად ამისთვის თქვენ გამოიყენებთ დომეინის განსხვავებულ რეგისტრატურას. გაიგეთ მეტი სლაიდებიდან.
როდესაც გექნებათ ვებ ჰოსტი, თქვენ შეძლებთ სერვერზე საკუთარი ფაილების ატვირთვას. ამისათვის შეგიძლიათ, გამოიყენოთ FTP კლიენტი, როგორიცაა FileZilla. ეს პროგრამა პირდაპირ გაკავშირებთ სერვერთან და გაძლევთ საშუალებას, ათვალიეროთ, გადმოწეროთ და ატვირთოთ ფაილები სერვერზე. ასევე შეგიძლიათ, დაუკავშირდეთ სერვერს SSH-ის საშუალებით და პირდაპირ დაარედაქტიროთ ფაილები მასზე.

გააგრძელეთ სწავლა

HTML-ი და CSS-ი მუდამ იცვლებიან, რადგან ბრაუზერები ძალიან ხშირად უშვებენ გაუმჯობესებებს და ვებ დეველოპმენტით დაკავებული საზოგადოება საკმაოდ აქტიურია. ინფორმირებულად ყოფნის ჩვენი საყვარელი გზაა frontend focus-ის გამოწერა. ეს საინფორმაციო პროექტი მოიცავს სტატიებისა და დემოების ბმულებს. რა თქმა უნდა, თუ რაიმე ახლის შესწავლა გსურთ, უნდა გამოსცადოთ ის და გაიგოთ, თუ როგორ მუშაობს ეს სიახლე სინამდვილეში.
ვარჯიში, ვარჯიში და კიდევ ერთხელ ვარჯიში!

გსურთ, შეუერთდეთ დისკუსიას?

პოსტები ჯერ არ არის.
გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.