HTML

HyperText Mark Language

HTML არის Front-endის ერთ-ერთი ძირითადი ენა,

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

იმისათვის რომ დავიწყოთ კოდის წერა აუცილებელია

კომპიუტერში დაინსტარირებული გვქონდეს Visual Studio
Code

1. შევქმნათ ფოლდერი

2. გავხსნათ VSCode და დავაჭიროთ File >>> Open

Folder >>> New Folder >>> Select Folder

3. მაუსი წაიღეთ მარცხნივ და დააჭირეთ

New File-ის იკონს

4. შევქმნათ ფაილი index.html

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

შეგიძლიათ თქვენი პირველი კოდი დაწეროთ!
 HTML ჩონჩხი

იმისათვის რომ რასაც დაწერთ HTMLში გამოიტანოს ვებ

გვერდზე ჯერ აუცილებელია ჩონჩი დაიწეროს

HTMLში სინტაქსი იწერება

გამხსნელი < და /> დამხურავი ტეგით

რაც ზემოთ სურათში არის აღწერილი დაწერეთ თქვენს HTML

ფაილში კომენტარების (!--) გარეშე და ყოველი ტეგის დახურვის
შემდეგ გამოიყენეთ Space ღილაკი კლავეატურაზე!

გახსოვდეთ კოდში შეტანილი ყოველი ცვლილების და

დასეივების მერე მნიშვნელოვანია რომ დაარეფრეშოთ თქვენი
ბრაუზერი!
 H ტეგი

ვებგვერდებზე სტუმრობის დროს ყოველ ჯერზე გადააწყდებით

ტექსტს დიდი ასოებით, რომელიც არის ვებგვერდის რაღაცა
მნიშვნელოვანი ინფორმაციის სათაური რომელიც იწერება H
ტეგში

შედეგი ბრაუზერში

როგორც ხედავთ <h1></h1> ზომით დიდია დანარჩენ h-ებზე ანუ

h1 ბევრად მნიშვნელოვანია ვიდრე h2 და თავად h2 კი
მნიშვნელოვანია h3ზე და ასე შემდეგ დანარჩენ h ტეგებზე
 P ტეგი

ვებგვერდზე უშუალოდ ჩვეულებრივი ტექსტის გამოტანა

ხდება პარაგრაფის დაწერით <p></p>

შედეგი ბრაუზერში

ასევე შესაძლებელი არის პარაგრაფის გასტილვა

<b></b> აბოლდებს ტექსტს ანუ უფრო მუქს ხდის

<i><i/> ტექსტს გვერდულად დახრის

<u><u/> ტექსტს გაუკეთებს ქვემოთ ხაზს

მაგალითისთვის

შედეგი ბრაუზერში
 სიის დაწერა

<ul>
<li></li>
</ul>

ვებგვერდზე რომ გამოვიტანოთ სია ჯერ აუცილებელია

დავწეროთ <ul></ul> ტეგი და მის შიგნით <li></li> ტეგი

ტეგი ul ახერხებს სიის ორგანიზაციას რომ li ტეგი იყოს

მწყობრად დაწყობილი

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

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

შედეგი ბრაუზერში
 Hyperlink
დაკლიკვის შემთხვევაში სხვა ვებგვერდზე გადასვლა
<a href = “> </a>

1. ფოლდერში შევქმნათ ახალი HTML ფაილი სახელად

home.html
2. შემდეგ index.htmlში გადავდივართ და ვწერთ:

შედეგი ბრაუზერში

href არის უშუალოდ ატრიბუტი რომელიც

პასუხისგებელია დაკლიკვის დროს მომხმარებელი სხვა
ვებგვერდზე გადაამისამართოს

3. Index.html ფაილში დაწერილ a ტეგის hrefში ჩაწერეთ <a

href = " home.html "> </a>
4. დააწექით Ctrl + S დაარეფრეშეთ ბრაუზერი და ვებგვერდზე
დააწექით a ტეგს რომ ნახოთ შედეგი

DIV
Div ტეგს ხშირად მოიხსენიებენ როგორც კონტეინერს რომელიც
აერთიანებს HTML ელემენტებს ერთად როგორც ერთ სექციად
რომელიც გასტილვაც შესაძლებელია CSSით

შედეგი ბრაუზერში

Div ტეგი არარის უნიკალური ანუ მისი მრავალჯერ გამოყენება

თავისუფლად შესაძლებელია ასევე შეგიძლიათ Div ტეგის
შიგნით მრავალი divი დაწეროთ

Title
Titleის წინახსენებული ელემენტებისგან განსხვავებით
body ტეგის ნაცვლად headში იწერება და
გამოისახება ბრაუზერის ტაბში სათაურად

შედეგი ბრაუზერში

სურათის შემოტანა
<img src = “”>

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

ფოლდერში სადაც HTML ფოლდერი გაქვთ და body ტეგის
შიგნით ჩაწერეთ <img src="" />ეს და src ანუ წყაროს შიგნით
ჩაწერეთ სურათის სახელი

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

შეგიძლიათ ჩათვალოთ რომ Front-endის ელემენტალური
markupის წარმოდგენის საშუალება გაქვთ
 CSS
Cascading Style Sheets

Front-End დეველოპინგში CSS არის პასუხისმგებელი HTMLის

ელემენტებისთვის: ფერის მიცემა, ფონტის გაზრდა, ელემენტის
გადაადგილება, Divების განლაგება, სიგრძესა და სიმაღლის
გაზრდა და კიდევ მრავალი სხვა!

ჩვენს ვებგვერდზე არსებობს CSSის შემოტანის ორი საშუალება

არსებობს

1. HTMLში Head ტეგის შიგნით titleის ქვემოთ დავწეროთ

ტეგი <style> </style> და მის შიგნით დავწეროთ CSS
ბრძანებები ამას ქვია ენის ადგილობრივად შემოტანა
2. ჩვენს ფოლდერში სადაც HTML ფაილი გვაქვს შევქმნათ
ახალი CSSისთვის განკუთვნილი ფაილად სახელად
style.css და HTML ფაილის head ტეგში ჩაწერეთ ესეთი
ბრძანება : <link rel="stylesheet" href="style.css">

ამას ეწოდება ფაილის გარედან შემოტანა რაც ბევრად

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

CSSში არსებობს უამრავი ტექსტის გაცენტრების საშუალება

მათ შორის დამწყებისთვის ყველაზე მისაღები არის
text-align: center
CSS
HTML

შედეგი ბრაუზერში

როგორც ხედავთ თუ CSSის წყარო სწორდ არის დაწერილი head

ტეგში მაშინ თავისუფლად შეგვიძლია იმას რაც body ტეგის
შიგნით წერია CSSით მივწვდეთ და მისი საწყისი ფორმა
შევცვალოთ ბრძანებით რომელიც style.cssში არის დაწერილი
 ტექსტის ფერის შეცვლა

color: (და ნებისმიერი ფერი რაც გაგიხარდებათ);

შედეგი ბრაუზერში

ტექსტის უკანა ფონის გაფერადება

background-color: (და ნებისმიერი ფერი რაც გაგიხარდებათ);

შედეგი ბრაუზერში
 ტექსტის ფონტის გაზრდა

font-size: px;

შედეგი ბრაუზერში

როგორც სურათში ხედავთ CSSში რაღაცის

ზომაში გასაზრდელად ვიყენებთ პიქსელებს
(px) ან % მაგრამ შესაჩვევად (px) უკეთესია
 ჩარჩო

border: 1px solid black

ჩარჩოს გაკეთება არის ერთ-ერთი უნიკალური თვისება CSSის

რომ შექმნათ პირველი ბორდერი აუცილებელია ჯერ HTMLში
შექმნათ div ტეგი:

შემდგომ მივმართოთ CSSში ჩვენ divს და დავუწეროთ ასეთი

ბრძანება:

ბრაუზერში ასეთ გრძელი ხაზის შედეგს მიიღებთ:

ამის გამოსწორება შეგვიძლია სიგანისა და სიგრძის გაწერით:

და ბრაუზერში მივიღებთ ასეთ შედეგს:
 Width - სიგანე
Height - სიგრძე

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

მოახერხოთ გააფერადოთ და გადაადგილოთ კიდევაც ასეთი ბრძანებით
CSSში:

(CSSში გადაადგილება არის პირიქით)

ზემოთხსენებული ბრძანებების წარმატებულად ათვისების

შემთხვევაში შესაძლებელია უკვე markupის აწყობდა და რჩევა სანამ
სრულფასოვანი ვებგვერდის აწყობას შეუდგები HTML და css
selectorებზე მოიძიე ინფორმა
 JS
Javascript

Javascriptი არის Front-end დეველოპერისთვის ყველაზე

მნიშვნელოვანი ენა რადგან მისი წყალობით შესაძლებელია
ვებგვერდზე უნივერსალური ფუნქციების გაკეთება და სწორედ
Javascriptი ცოდნა არის დღევანდელ ბაზარზე ყველაზე მოთხოვნადი
ენა

CSSის მსგავსად ჯავასკრიპტის შემოტანა HTMLში ორი გზა

არსებობს:
1. ადგილობრივად რაც ნიშნავს body ტეგის შიგნით ვწერთ
<script></script> ელემენტს და მის შიგნით JS ბრძანებებს
2. ფოლდერში სადაც გვაქვს ჩვენი HTML ფაილი შევქმნათ JSთვის
განკუთვნილი ფაილი script.js და HTML ფაილის head ტეგის
შიგნით დავწეროთ:
<script src = "script.js" defer><script> რომ მოხდეს HTMLში
JSის ჩატვირთვა
 ცვლადები

ჯავასკრიპტში არსებობს ცვლადის დაწერის 3 საშუალება

var (რომელიც ძველ ჯავასკრიპტში გამოიყენებენ)

let (რომელიც თანამედროვე ჯავასკრიპტში გამოიყენებენ)
const (გამოიყენება ისეთ ცვლადებისთვის როდესაც საწყისად
მივანიჭებთ რაღაცას და არ ვაპირებთ მის შეცვლას)

ჯავასკრიპტში შედეგის გამოტანა შესაძლებელია

console.log() ის დაწერით
მაგალითისთვის:

ჯავასკრიპტში მიღებული შედეგები რომ

შევამოწმოთ გახსენით თქვენი HTML ფაილი დააწექით
მარჯვენა მაუსის ღილაკს inspect element >>> console და
მანდ შეძლებ დასეივების შემდეგ შედეგის ნახვას
 ოპერატორები

1. + მიმატება
2. - გამოკლება
3. / გაყოფა
4. * გამრავლება
5. % ნაშთის ამოღება
6. შედარების ოპერატორები მაგალითად
( 2 == 2 ) დააბრუნებს trueს
( 2 == ‘2’ ) დააბრუნებს trueს
( 2 == 3 ) დააბრუნებს falseს

თითოეულის გამოსაცდელად შექმენით 2 let ცვლადი და

მათი ერთ ცვლადში შეჯამებით console.log()ის მეშვეობით
ნახეთ შედეგი
ცვლადების მნიშვნელობა შეიძლება იყოს რამდენიმე ტიპის,
ესენია:

1. number - ანუ ციფრი მაგალითად let = x 3

2. string - სიტყვა რომელსაც აქვს “” ბრჭყალები
მაგალითად = “mawoni”
3. boolean - ბულიანი მნიშვნელობა არის true ან false არ
ჭირდება ბრჭყალები მაგალითად let x = true let y =
false
4. array(ქართულად მასივს ეძახიან) - ეს ელემენტი
აიღწერება ასე: ვწერთ ამ სიმბოლოს [] და მის შიგნით
რამდენიმე სიტყვას რომელსაც მძიმით გამოვყოფთ
მაგალითისთვის let z = [ 1, “kefiri”, 2, 3, “andaza”]
გაითვალისწინეთ მასივიდან ათვლა იწყება 0დან
5. object - ობიექტში ძირითადად ინახება იუზერების
მონაცემებები მაგალითად let b = {

username : ‘’lanista”,
password : “lanista123”,
age : 23,
 }
if/else

if - შემოგვაქვს პირობა და თუ შესრულდა მის შიგნით რაც

წერია ის იმუშავებს
else - ან თუ არ შესრულდა მოცემული პირობა ამოაგდებს
იმას რაც ერრორის ამღნიშვნელია

ზემოთხსენებული საფუძვლების წარმატებად შესწავლის

შემთხვევაში თამამად შეგიძლია გამოაცხადო რომ
Junior Front-end დეველოპერი ლეველზე ხარ