HTML

Frontend

HTML-ის კურსი

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

სწავლის მიმართულება

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

CSS (სტილების კასკადური ცხრილები) - როგორ გამოიყენოთ ის HTML დოკუმენტის გაფორმებისთვის (სტილიზირებისთვის), მაგალითად შრიფტის და მისი ზომის შეცვლა, საზღვრების და ელემენტების ჩრდილების დამატება, გვერდის დაშლა რამდენიმე სვეტად, ანიმაციის და სხვა ვიზუალური ეფექტების დასამატებლად.
JavaScript - როგორ გამოიყენოთ ვებ-გვერდებზე დინამიური ფუნქციონალურობა (თქვენი ადგილმდებარეობის განსაზღვრა და მისი გამოსახვა რუქაზე, ელემენტების შექმნა, რომლებიც გამოჩნდება/გაქრება ღილაკზე დაწკაპებისას, მომხმარებლების მონაცემების შენახვა ლოკალურად კომპიუტერში და სხვა მრავალი).

მოდულები

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

შესავალი HTML-ში

ეს მოდული მოგცემთ საფუძველს, რომელიც საშუალებას მოგცემთ გამოიყენოთ მნიშვნელოვანი ცნებები და სინტაქსი, თქვენ შეისწავლით HTML-ის გამოყენებას ტექსტზე, გაიგებთ როგორ უნდა შექმნათ ჰიპერბმულები და როგორ გამოიყენოთ ისინი ვებ-გვერდის სტრუქტუირებისთვის.

მულტიმედია და ჩაშენება

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

HTML ცხრილები

ცხრილოვანი მონაცემების წარმოდგენა ვებ-გვერდზე გასაგებ, ხელმისაწვდომი სახით შესაძლოა პრობლემად იქცეს. ეს მოდული აღწერს ცხრილოვანი განლაგების საფუძვლებს, აგრეთვე უფრო რთულ ფუნქციებს, ისეთს, როგორიც არის ხელმოწერების და რეზიუმეების რეალიზაცია.

HTML ფორმები

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

46 გაკვეთილი

კურსის პროგრამა (სილაბუსი)

საბაზისო პროგრამული უზრუნველყოფა

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

ფაილებთან მუშაობა

გაკვეთილში განხილულია ფაილებთან მუშაობის ზოგიერთი საკითხი, რომლის შესახებაც უნდა იცოდეთ, იმისათვის რომ შეძლოთ ფაილური სტრუქტურის რაციონალურად დალაგება თქვენი ვებ-საიტისთვის.

მუშაობის დაწყება HTML-თან

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

HTML ელემენტების სტრუქტურა

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

ჩადებული ელემენტები

გაკვეთილში ვისაუბრებთ ელემენტების ერთმანეთში ჩადების წესებსა და საჭიროებაზე, რიგითობაზე, ნებართვებსა და აკრძალვებზე.

ბლოკისებური და სტროფული ელემენტები

გაკვეთილში ისწავლით რას წარმოადგენენ ბლოკისებური და სტროფული ელემენტები. რატომ ეწდოებათ მათ ბლოკისებური და სტროფული. რა განსხვავებაა მათ შორის

ცარიელი ელემენტები

გაკვეთილში საუბარია ცარიელ, ანუ ცალფა ელემენტებზე, მათ დანიშნულებასა და განსაკუთრებულობაზე.

ატრიბუტები

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

ბულევური ატრიბუტები

გაკვეთილში გავიგებთ რას წარმოადგენენ ბულევური ატრიბუტები, ანუ ატრიბუტები მნიშვნელობების გარეშე.

ერთსახოვანი თუ ორსახოვანი ბრჭყალები

გაკვეთილში ახსნილია ატრიბუტების მნიშვნელობების ბრჭყალების თავისებურება. რომელი ტიპის ბრჭყალები უნდა გამოვიყენოთ და როგორ უნდა დავიცვათ მკაცრად რეკომდენდირებული სტანდარტები.

HTML დოკუმენტის სტრუქტურა

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

გამოტოვებები, სპეციალური სიმბოლოები და კომენტარების HTML-ში

გაკვეთილში განხილულია თუ რას წარმოადგენენ სპეციალური სიმბოლოები და კომენტარები HTML დოკუმენტში და როგორ ხედავენ მიმომხილველები გამოტოვებებს (spaces).

რა დევს head-ში

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

meta მონაცემები

გაკვეთილში ახსნილია რას წარმოადგენენ meta მონაცემები. რისთვის გამოიყენება ისინი და რატომ არის მნიშვნელოვანი მათი გამოყენება

აიქონების დამატება

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

CSS-სა და JavaScript-ის დაკავშირება. HTML-ის ძირითადი ენა

გაკვეთილში ორი თემაა განხილული: როგორ უნდა დავაკავშიროთ CSS და JavaScript ფაილები დოკუმენტთან და რას ნიშნავს HTML-ის ძირითადი ენა.

ტექსტის რედაქტირების საფუძვლები HTML-ში

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

რაში გვჭირდება HTML სტრუქტურა

გაკვეთილში ახსნილია თუ რა მნიშვნელოვანი როლი ენიჭება სტრუქტურას HTML დოკუმენტში. რატომ არის ასე მნიშვნელოვანი და რა ზეგავლენა აქვს სემანტიკაზე.

რაში გვჭირდება სემანტიკა

გაკვეთილში ახსნილია სემანტიკის, სემანტიკური კოდის მნიშვნელოვანება. რატომ უნდა დავიცვათ სემანტიკა და რაში გვჭირდება ის.

სიები

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

აქცენტი და მნიშვნელოვანება

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

ტექსტის განვითარებული ფორმატირება

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

ციტატები

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

აბრევიატურები

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

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

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

ზე-სტროფის და ქვე-სტრფის ინდექსები

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

კომპიუტერული კოდის წარმოდგენა

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

დროისა და თარიღის განლაგება

გაკვეთილში განხილულია როგორ უნდა განათავსოთ დრო და თარიღი სემანტიკურად. რომელი ელემენტები გამოიყენება დროის და თარიღის განსალაგებლად ვებ-დოკუმენტში

დოკუმენტისა და ვებ-საიტის სტრუქტურა

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

HTML შემცველობის სტრუქტურირებისთვის

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

HTML სტრუქტურა: პრაქტიკული გაკვეთილი

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

დეტალურად HTML ელემენტების შესახებ

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

არასემანტიკური შეფუთვები

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

სტროფის გადატანა და ჰორიზონტალური გამყოფი

გაკვეთილში ახსნილია როგორ ხდება იძულებით სტროფის გადატანა და ჰორიზონტალურად კონტენტის გამოყოფა.

ჰიპერბმულების შექმნა

ამ გაკვეთილიდან იწყება ჰიპერბმულების (ლინკების) შექმნის შესწავლა. რას წარმოადგენს ჰიპერბმული, როგორ იქმნება ის და რა როლს თამაშობს ვებ-საიტების არსებობაში.

URL მისამართები და გზები

გაკვეთილში ახსნილია განსხვავება URL მისამართებსა და გზებს შორის, რომლები ყალიბდება ჰიპერბმულის ელემენტის მეშვეობით ვებ-გვერდზე.

დოკუმენტის ფრაგმენტები. ატრიბუტი download

გაკვეთილში ახსნილია როგორ უნდა შევქმნათ ჰიპერბმულები დოკუმენტის ფრაგმენტებზე გადასასვლელად.

გამოსახულებები HTML-ში

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

ალტერნატიული ტექსტი

გაკვეთილში განხილულია ალტერნატიული ტექსტის დამატების მნიშვნელოვანება გამოსახულების დამატებისას.

სიფართე და სიმაღლე

გაკვეთილში განხილულია გამოსახულების სიფართისა და სიმაღლის თვისებები. როგორ ხდება მათი მითითება.

გამოსახულების სათაური

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

გამოსახულებაზე სტრუქტურის მიცემა და სათაურის დაყენება

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

ელემენტი <video>

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

რამდენიმე ფორმატის მხარდაჭერა

გაკვეთილში ახსნილია როგორ ხდება ვიდეო ფაილის რამდენიმე ფორმატის მხარდაჭერა. როგორ შეიძლება თავი დავიზღვიოთ სხვადასხვა მიმომხილველების სხვადასხვა ვერსიებში.

ელემენტის <video> სხვა მონაცემები

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

ელემენტი <audio>

გაკვეთილში ახსნილია რას წარმოადგენს ელემენტი <audio>, როგორ ხდება აუდიო ფაილების დამატება გვერდზე.