HTML

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 30

HTML გაკვე ლები T

შესავალი

 HTML არის სტანდარტული მარკირების ენა ვებ – გვერდების შესაქმნელად.


 HTML ნიშნავს Hyper Text Markup Language.
 HTML აღწერს ვებ – გვერდის სტრუქტურას.
 HTML შედგება მთელი რიგი ელემენტებისგან.
 HTML ელემენტები ეუბნება ბრაუზერს, როგორ აჩვენოს შინაარსი.
 HTML ელემენტები ასახავს შინაარსის ნაწილებს, როგორიცაა "ეს არის სათაური", "ეს
არის აბზაცი", "ეს არის ბმული" და ა.შ.

1 – მარტივი HTML დოკუმენტი


Example (მაგალითი):

 Example Explained (მაგალითი ახსნილი):


 <!DOCTYPE html> დეკლარაცია განსაზღვრავს, რომ ეს დოკუმენტი HTML5
დოკუმენტია; <! DOCTYPE> წარმოადგენს დოკუმენტის ტიპს და ეხმარება
ბრაუზერებს ვებ – გვერდების სწორად ჩვენებაში.
 <html> ელემენტი არის HTML გვერდის ძირეული ელემენტი, ეს მხოლოდ
ერთხელ უნდა გამოჩნდეს, გვერდის ზედა ნაწილში (ნებისმიერი HTML ტეგის წინ).
 <head> ელემენტი შეიცავს მეტა ინფორმაციას HTML გვერდის შესახებ
 <title> ელემენტი განსაზღვრავს სათაურს HTML გვერდისთვის (რომელიც
ნაჩვენებია ბრაუზერის სათაურის ზოლში ან გვერდის ჩანართში)
 <body> ელემენტი განსაზღვრავს დოკუმენტის კორპუსს და არის კონტეინერი ყველა
ხილული შინაარსისთვის, როგორიცაა სათაურები, აბზაცები, სურათები,
ჰიპერბმულები, ცხრილები, სიები და ა.შ. შემდეგ, <body> ელემენტის შიგნით არის
კიდევ ორი ელემენტი: <h1> და <p>:
 <h1> ელემენტი განსაზღვრავს დიდ სათაურს
 <p> ელემენტი განსაზღვრავს აბზაცს
2 – HTML basic (HTML საფუძვლები)
HTML დოკუმენტები:
 ყველა HTML დოკუმენტი უნდა დაიწყოს დოკუმენტის ტიპის დეკლარაციით: <!
DOCTYPE html>.
 თავად HTML დოკუმენტი იწყება <html> და მთავრდება </ html> - ით.
<html> ელემენტის შიგნით არის <body> ელემენტი
 HTML დოკუმენტის ხილული ნაწილი არის <body> - სა და </ body> - ს შორის.

HTML Headings (HTML სათაურები):


 HTML სათაურები განისაზღვრება <h1> დან <h6> თეგებით.
 <h1> განსაზღვრავს ყველაზე მნიშვნელოვან სათაურს.
 <h6> განსაზღვრავს ყველაზე ნაკლებად მნიშვნელოვან სათაურს:
Example:

შენიშვნა: ბრაუზერები ავტომატურად დაამატებენ თეთრ ადგილს (მინდორს) სათაურის წინ


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

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


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

შენიშვნა: გამოიყენეთ HTML სათაურები მხოლოდ სათაურებისთვის. არ გამოიყენოთ


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

Bigger Headings: (უფრო დიდი სათაურები)


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

HTML Paragraphs (HTML პარაგრაფები):


აბზაცი ყოველთვის იწყება ახალ სტრიქონზე და, როგორც წესი, წარმოადგენს ტექსტის
ბლოკს.
HTML აბზაცები განისაზღვრება თეგით <p>:

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


ნიშანი. example:
<p>This is a paragraph.
<p>This is another paragraph.

HTML display (html ეკრანი)


 თქვენ არ შეგიძლიათ დარწმუნებული იყოთ, თუ როგორ გამოჩნდება HTML.

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


შედეგებს.

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

 გვერდის ჩვენებისას ბრაუზერი ავტომატურად ამოიღებს დამატებით სივრცეებს და


სტრიქონებს.
Example:

HTML Horizontal Rules (HTML ჰორიზონტალური წესები):


 <hr> ტეგი განსაზღვრავს თემატურ წყვეტს HTML გვერდზე და ყველაზე ხშირად
ნაჩვენებია როგორც ჰორიზონტალური წესი.
 <hr> ელემენტი გამოიყენება HTML გვერდზე შინაარსის გამოსაყოფად (ან ცვლილების
დასადგენად):
Examle:

<hr> ტეგი ცარიელი ნიშანია, რაც ნიშნავს, რომ მას არ აქვს ბოლო ნიშანი. (ერთით ჩამოწევა
დაბლა)

HTML Line Break (HTML ხაზის დარღვევები)


 HTML <br> ელემენტი განსაზღვრავს ხაზის წყვეტს.
 გამოიყენეთ <br> თუ გსურთ ხაზის გაწყვეტა (ახალი სტრიქონი) ახალი აბზაცის
დაწყების გარეშე. Example:

<br> ნიშანი არის ცარიელი ნიშანი, რაც ნიშნავს, რომ მას არ აქვს ბოლო ნიშანი.

The Poem Problem (ლექსის პრობლემა)


ეს ლექსი გამოჩნდება ერთ სტრიქონზე:

გამოსავალი - HTML <pre> ელემენტით:


 HTML <pre> ელემენტი განსაზღვრავს წინასწარ ფორმატირებულ ტექსტს.
 <pre> ელემენტის შიგნით ტექსტი ნაჩვენებია ფიქსირებული სიგანის შრიფტით
(ჩვეულებრივ კურიერი) და ის ინახავს როგორც სივრცეებს, ასევე ხაზების წყვეტებს:

HTML Links (HTML ბმულები)


Example:

 ბმულის დანიშნულება მითითებულია href ატრიბუტში.


 ატრიბუტები გამოიყენება HTML ელემენტების შესახებ დამატებითი ინფორმაციის
მისაღებად.
 ატრიბუტების შესახებ მეტს შეიტყობთ შემდეგ თავში.

HTML Images (HTML სურათები)


HTML სურათები განისაზღვრება თეგით <img>.
საწყისი ფაილი (src), ალტერნატიული ტექსტი (alt), სიგანე და სიმაღლე მოცემულია როგორც
ატრიბუტები.
Example:

3 – HTML Elements (HTML ელემენტები)


HTML ელემენტი არის ყველაფერი დაწყებული ტეგიდან ბოლო ტეგამდე:
<tagname> Content goes here...</tagname>
Nested HTML Elements (ჩასმული HTML ელემენტები)
 HTML ელემენტების ჩასმა შესაძლებელია (ეს ნიშნავს, რომ ელემენტები შეიძლება
შეიცავდეს სხვა ელემენტებს).
 HTML ყველა დოკუმენტი შედგება წყობილი HTML ელემენტებისგან.
 შემდეგი მაგალითი შეიცავს ოთხ HTML ელემენტს (<html>, <body>, <h1> და <p>):
Example:

Empty HTML Elements (ცარიელი HTML ელემენტები)


 შინაარსის გარეშე HTML ელემენტებს ცარიელ ელემენტებს უწოდებენ.
 <br> ნიშანი განსაზღვრავს ხაზის წყვეტას და არის ცარიელი ელემენტი დახურვის
ნიშნის გარეშე: example:

HTML is Not Case Sensitive (HTML არ არის მგრძნობიარე)


HTML ტეგები არ არის მგრძნობიარე ასოებით: <P> ნიშნავს იგივე, რაც <p>.
HTML სტანდარტი არ საჭიროებს მცირე ზომის თეგებს, მაგრამ W3C გირჩევთ გამოიყენოთ
მცირე ასოები HTML– ით და ითხოვს ამას მცირე ზომისთვის უფრო მკაცრი დოკუმენტის
ტიპებისთვის, როგორიცაა XHTML.

HTML Tag Reference (HTML საკვანძო ცნობარი)


<html> განსაზღვრავს HTML დოკუმენტის ფესვს
<body> განსაზღვრავს დოკუმენტის ორგანოს
<h1> to <h6> განსაზღვრავს HTML სათაურებს

4 - HTML Attributes (HTML ატრიბუტები)


HTML ატრიბუტები გთავაზობთ დამატებით ინფორმაციას HTML ელემენტების
შესახებ.
 HTML ყველა ელემენტს შეიძლება ჰქონდეს ატრიბუტები
 ატრიბუტები გთავაზობთ დამატებით ინფორმაციას ელემენტების შესახებ
 ატრიბუტები ყოველთვის მითითებულია საწყისი თეგში
 ატრიბუტები ჩვეულებრივ გვხვდება სახელის / მნიშვნელობის წყვილებში,
როგორიცაა: name = "მნიშვნელობა"

Href ატრიბუტი
<a> ტეგი განსაზღვრავს ჰიპერბმულს. Href ატრიბუტი განსაზღვრავს იმ გვერდის
URL- ს, სადაც მიდის ბმული:
<a href="https://www.w3schools.com">Visit W3Schools</a>

Src ატრიბუტი
<img> ტეგი გამოიყენება სურათის HTML გვერდზე ჩასასმელად. Src ატრიბუტი
განსაზღვრავს სურათის გზას, რომელიც გამოისახება:
<img src="img_girl.jpg">

Src ატრიბუტში URL მითითების ორი გზა არსებობს:


1. აბსოლუტური URL - ბმული გარე სურათზე, რომელიც განთავსებულია სხვა
ვებსაიტზე. მაგალითი: src =
https://www.w3schools.com/images/img_girl.jpg
2. შედარებითი URL - ბმული იმ სურათზე, რომელიც განთავსებულია ვებსაიტზე. აქ
URL არ შეიცავს დომენის სახელს. თუ URL იწყება ხაზმოჭრის გარეშე, ეს იქნება
ამჟამინდელი გვერდის შესაბამისი. მაგალითი: src = "img_girl.jpg". თუ URL
იწყება ასახვით, ეს იქნება დომენის შესაბამისი. მაგალითი: src = "/ images /
img_girl.jpg".

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

რჩევა:
თითქმის ყოველთვის საუკეთესოა ნათესავი URL- ების გამოყენება. ისინი არ
დაირღვევა, თუ დომენს შეცვლით.

width და height ატრიბუტები


<img> ტეგი ასევე უნდა შეიცავდეს სიგანე და სიმაღლის ატრიბუტებს, რომლებიც
განსაზღვრავს სურათის სიგანეს და სიმაღლეს (პიქსელებში):
Example: <img src="img_girl.jpg" width="500" height="600">

alt ატრიბუტი

 Alt: ატრიბუტი არის HTML ატრიბუტი, რომელიც გამოიყენება HTML და XHTML


დოკუმენტებში ალტერნატიული ტექსტის (alt ტექსტი) დასაზუსტებლად, რომელიც
უნდა გაეცნოს იმ ელემენტის გამოყენებას, როდესაც ის გამოიყენება. ... ყველა სურათს
უნდა ჰქონდეს alt ატრიბუტი, რომ იყოს ხელმისაწვდომი ყველასთვის (მაგ.
ბრმისთვისაც), მაგრამ ის არ შეიცავს ტექსტს.
 საჭირო alt ატრიბუტი განსაზღვრავს სურათის ალტერნატიულ ტექსტს, თუ სურათის
ჩვენება შეუძლებელია. Alt ატრიბუტი გთავაზობთ სურათის ალტერნატიულ
ინფორმაციას, თუ მომხმარებელი რაიმე მიზეზით ვერ ხედავს მას (ნელი კავშირის
გამო, ამიტომ გამოიყენებს ეკრანის წამკითხველს.
Example:
<img src="img_girl.jpg" alt="Girl with a jacket" width="200" height="200">>

Example: 2
იხილეთ, თუ რა მოხდება, თუ ჩვენ ვცდილობთ გამოვსახოთ არარსებული სურათი:
<img src="img_typo.jpg" alt="Girl with a jacket">

style ატრიბუტი (სტილის)


სტილის ატრიბუტი გამოიყენება ელემენტის სტილის დასმატებლად, როგორიცაა ფერი,
შრიფტი, ზომა და სხვა.
Example 1:

Example 2:
 HTML ელემენტის სტილის დაყენება შეიძლება განხორციელდეს სტილის
ატრიბუტით.
 HTML სტილის ატრიბუტს აქვს შემდეგი სინტაქსი: <tagname style="property:value;">
 property არის css-ის თვისება; value არის CSS-ის მნიშვნელობა.

Background Color (Ფონის ფერი)


CSS ფონის ფერის თვისება განსაზღვრავს ფონის ფერს HTML ელემენტისთვის.
Example1:

Example2: დააყენეთ ფონის ფერი ორი განსხვავებული ელემენტისთვის:

Text Color (ტექსტის ფერი)


CSS ფერის თვისება განსაზღვრავს ტექსტის ფერს HTML ელემენტისთვის:
Example:

Fonts (შრიფტები)
CSS შრიფტის ოჯახის თვისება განსაზღვრავს შრიფტს, რომელიც გამოიყენება HTML
ელემენტისთვის:
Example:

 verdana და courier - ნიშნავს შრიფტის სტილს

Text Size (ტექსტის ზომა)


CSS შრიფტის ზომა განსაზღვრავს ტექსტის ზომას HTML ელემენტისთვის:
Example:

Text Alignment (ტექსტის გასწორება)


CSS ტექსტის გასწორების თვისება განსაზღვრავს ტექსტის ჰორიზონტალურ
გასწორებას HTML ელემენტისთვის:
Example:

თავის რეზიუმე:
 გამოიყენეთ style ატრიბუტი HTML ელემენტების სტილისთვის
 გამოიყენეთ background-color ფონის ფერისთვის
 გამოიყენეთ color ტექსტური ფერებისათვის
 გამოიყენეთ font-family ტექსტის შრიფტებისთვის
 გამოიყენეთ font-size ტექსტის ზომისთვის
 გამოიყენეთ text-align ტექსტის გასწორებისთვის

lang – ატრიბუტი (ენის)


თქვენ ყოველთვის უნდა მიუთითოთ ენის ატრიბუტი <html> ტეგისთვის, ვებგვერდის
ენის გასაცხადებლად. ეს მიზნად ისახავს საძიებო სისტემებისა და ბრაუზერების
დახმარებას.

შემდეგ მაგალითში მითითებულია ინგლისური, როგორც ენა:


<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
ქვეყნის კოდები ასევე შეიძლება დაემატოს ენის კოდს lang ატრიბუტში. ასე რომ,
პირველი ორი სიმბოლო განსაზღვრავს HTML გვერდის ენას, ხოლო ბოლო ორი
სიმბოლო განსაზღვრავს ქვეყანას.

შემდეგ მაგალითში მითითებულია ინგლისური, როგორც ენა, ხოლო შეერთებული


შტატები, როგორც ქვეყანა:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Title ატრიბუტი (სათაური)


სათაურის ატრიბუტი განსაზღვრავს დამატებით ინფორმაციას ელემენტის შესახებ.
სათაურის ატრიბუტის მნიშვნელობა ნაჩვენები იქნება, როგორც ინსტრუქცია, როდესაც
ელემენტის თაგუნას გადააადგილებთ:
Example:

განმარტება: როდესაც მაუსის ღილაკს მივიტანთ „The title Attribute”-თან, გამოჩნდება


ისე, როგორც ფოტოზეა ასახული: I’m a header

1. ჩვენ გთავაზობთ: ყოველთვის გამოიყენოთ მცირე ატრიბუტები


2. HTML სტანდარტი არ საჭიროებს მცირე ატრიბუტების სახელებს.

3. სათაურის ატრიბუტი (და ყველა სხვა ატრიბუტი) შეიძლება დაიწეროს დიდი ან


პატარა ასოებით, როგორიცაა სათაური ან TITLE.

4. ამასთან, W3C გირჩევთ მცირე ატრიბუტებს HTML– ში და მოითხოვს მცირე


ატრიბუტებს

5. ჩვენ გთავაზობთ: ყოველთვის ციტირებით ატრიბუტის მნიშვნელობები


6. HTML სტანდარტი არ საჭიროებს ატრიბუტის მნიშვნელობების ციტირებას.

7. ამასთან, W3C გირჩევთ შეთავაზებებს HTML ფორმატში და ითხოვს ფასთა


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

Example:
Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

ზოგჯერ გიწევთ ბრჭყალების გამოყენება. ეს მაგალითი არ აჩვენებს სწორად


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

Single or Double Quotes? (ერთი ან ორმაგი შეთავაზებები?)

 ატრიბუტის მნიშვნელობების გარშემო ორმაგი ციტატები ყველაზე ხშირად გვხვდება


HTML– ში, მაგრამ ასევე შეიძლება გამოყენებულ იქნას ცალკეული ციტატები.

 ზოგიერთ სიტუაციაში, როდესაც ატრიბუტის ღირებულება თავისთავად შეიცავს


ორმაგ ბრჭყალებს, აუცილებელია ცალკეული ბრჭყალების გამოყენება:
<p title='John "ShotGun" Nelson'>
ან პირიქით: <p title="John 'ShotGun' Nelson">

განმარტება: 1 - როდესაც მაუსის პწიჩკას მივიტანთ Beka with double quotes-თან,


დაეწერება ასე:

ხოლო თუ მივიტანთ პწიჩკას Ani 2 with single quotes -თან, მაშინ:


Chapter Summary (თავის შეჯამება)
 HTML ყველა ელემენტს შეიძლება ჰქონდეს ატრიბუტები
 <a> href ატრიბუტი განსაზღვრავს იმ გვერდის URL- ს, რომელზეც მიდის ბმული
 <img> src ატრიბუტი განსაზღვრავს სურათის გზას, რომელიც გამოისახება
 <img> - ის სიგანე და სიმაღლე ატრიბუტებს უზრუნველყოფს სურათების ზომის
ინფორმაციას
 <img> alt ატრიბუტი გთავაზობთ სურათის ალტერნატიულ ტექსტს
 სტილის ატრიბუტი გამოიყენება ელემენტის სტილის დასამატებლად, როგორიცაა
ფერი, შრიფტი, ზომა და სხვა
 <html> ტეგის ატრიბუტი აცხადებს ვებ – გვერდის ენას
 სათაურის ატრიბუტი განსაზღვრავს დამატებით ინფორმაციას ელემენტის შესახებ

4 – HTML Text Formatting (HTML ტექსტის ფორმატირება)


HTML შეიცავს რამდენიმე ელემენტს სპეციალური მნიშვნელობის ტექსტის
დასადგენად.
ფორმატირების ელემენტები შექმნილია სპეციალური ტიპის ტექსტის სანახავად:
 <b> - სქელი ტექსტი
 <strong> - მნიშვნელოვანი ტექსტი
 <i> - დახრილი ტექსტი
 <em> - ხაზგასმული ტექსტი
 <mark> - მონიშნული ტექსტი
 <small> - უფრო პატარა ტექსტი
 <del> - წაშლილი ტექსტი
 <ins> - ჩასმული ტექსტი
 <sub> - ქვენაწერი ტექსტი
 <sup> - ზედწერილი ტექსტი

HTML <b> და <strong> ელემენტები:


HTML <b> ელემენტი განსაზღვრავს სქელ ტექსტს, ყოველგვარი ზედმეტი
მნიშვნელობის გარეშე. Example:

HTML <strong> ელემენტი განსაზღვრავს ტექსტს ძლიერი მნიშვნელობით. შინაგანი


შინაარსი, როგორც წესი, ნაჩვენებია სქელით.

HTML <i> and <em> ელემენტები


 HTML <i> ელემენტი განსაზღვრავს ტექსტის ნაწილს ალტერნატიული ხმით ან
განწყობით. შინაგანი შინაარსი, როგორც წესი, ნაჩვენებია დახრილი.

 რჩევა: <i> ნიშანს ხშირად იყენებენ ტექნიკური ტერმინის, სხვა ენის ფრაზის,
აზრის, გემის სახელის და ა.შ. Example:

 HTML <em> ელემენტი განსაზღვრავს ხაზგასმულ ტექსტს. შინაგანი შინაარსი,


როგორც წესი, ნაჩვენებია დახრილი.
 რჩევა: ეკრანის მკითხველი გამოთქვამს სიტყვებს <em> აქცენტით, ვერბალური
სტრესის გამოყენებით. Example:

HTML <small> ელემენტი


HTML <small> ელემენტი განსაზღვრავს პატარა ტექსტს:

HTML <mark> ელემენტი


HTML <mark> ელემენტი განსაზღვრავს ტექსტს, რომელიც უნდა იყოს
მარკირებული ან
მონიშნული:

HTML <del> ელემენტი


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

HTML <ins> ელემენტი


HTML <ins> ელემენტი განსაზღვრავს ტექსტს, რომელიც ჩასმულია დოკუმენტში.
ჩვეულებრივ, ბრაუზერები ხაზს უსვამენ ჩასმულ ტექსტს:

HTML <sub> ელემენტი


HTML <sub> ელემენტი განსაზღვრავს ქვენაწერის ტექსტს.
 ხელნაწერის ტექსტი ჩნდება სიმბოლოს ნახევარი ნორმალური ხაზის
ქვემოთ და ზოგჯერ მოცემულია უფრო მცირე შრიფტით.
 ხელნაწერის ტექსტი შეიძლება გამოყენებულ იქნას ქიმიური
ფორმულებისათვის, მაგალითად H2O:
HTML <sup> ელემენტი
 HTML <sup> ელემენტი განსაზღვრავს ზედა ტექსტს.
 ზედა ტექსტის ტექსტი ჩვეულებრივ სტრიქონზე მაღალი სიმბოლოს
ნახევარში ჩანს და ზოგჯერ უფრო მცირე შრიფტით არის გადმოცემული.
 ზედწერილი ტექსტი შეიძლება გამოყენებულ იქნას სქოლიოებისთვის,
როგორიცაა WWW [1]:

5 – HTML Quotation and Citation Elements


HTML ციტირება და ციტირების
ელემენტები
ამ თავში გავეცნობით <blockquote>, <q>, <abbr>, <address>, <cite> და <bdo>
HTML ელემენტებს.
Example:

აქ არის ციტატა http://www.worldwildlife.org/who/index.html WWF ვებსაიტიდან:


თითქმის 60 წლის განმავლობაში WWF იცავდა ბუნების მომავალს. მსოფლიო წამყვანი კონსერვაციული
ორგანიზაცია, WWF მუშაობს 100 ქვეყანაში და მას მხარს უჭერს მილიონზე მეტი წევრი შეერთებული შტატების
ქვეყნებში და დაახლოებით ხუთი მილიონი მსოფლიოში.

HTML <blockquote> ციტატებისთვის


 HTML <blockquote> ელემენტი განსაზღვრავს განყოფილებას, რომელიც ციტირებულია
სხვა წყაროდან.

 ბრაუზერები, როგორც წესი, <blockquote> ელემენტებს აჩერებენ.


Example:

HTML <q> მოკლე ციტირებისთვის


HTML <q> ტეგი განსაზღვრავს მოკლე ციტატას.
ჩვეულებრივ, ბრაუზერები ბრჭყალებს ჩასვამენ ბრჭყალის გარშემო.
Example:

HTML <abbr> შემოკლებებისთვის


 HTML <abbr> ტეგი განსაზღვრავს აბრევიატურას ან შემოკლებას, როგორიცაა "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".
 მარკირების აღნიშვნას შეუძლია სასარგებლო ინფორმაცია მისცეს ბრაუზერებს,
მთარგმნელობით სისტემებსა და საძიებო სისტემებს.
 რჩევა: გამოიყენეთ გლობალური სათაურის ატრიბუტი ელემენტის მაუსის
გადაადგილებისას აჩვენეთ აბრევიატურის აღწერა.

HTML <address> (მისამართი) საკონტაქტო ინფორმაციისთვის


 HTML <address> ტეგი განსაზღვრავს დოკუმენტის ან სტატიის ავტორის/მფლობელის
საკონტაქტო ინფორმაციას.
 საკონტაქტო ინფორმაცია შეიძლება იყოს ელ.ფოსტის მისამართი, URL, ფიზიკური
მისამართი, ტელეფონის ნომერი, სოციალური მედიის სახელური და ა.
 ტექსტი <address> ელემენტში ჩვეულებრივ დახრილია და ბრაუზერები ყოველთვის
დაამატებენ ხაზის წყვეტს <address> ელემენტამდე და მის შემდეგ.
Example:

HTML <cite> სამუშაოს სათაურისთვის


 HTML <cite> ტეგი განსაზღვრავს შემოქმედებითი ნაწარმოების სათაურს (მაგ. წიგნი,
ლექსი, სიმღერა, ფილმი, ნახატი, ქანდაკება და სხვა).
 შენიშვნა: პირის სახელი არ არის ნაწარმოების სათაური.
 <cite> ელემენტის ტექსტი, ჩვეულებრივ, დახრილი უნდა იყოს.
Example:

შენიშვნა: შეიძლება <cite> ელემენტის მაგივრად შეიძლება გამოიყენო <i> ელემენტი,


(ტექსტის დახრისათვის) მაგრამ ეს არ იქნება მართებული, რადგან საიტის მომხმარებელს,
რომელსაც აინტერესებს ინფორმაცია ობიექტის შესახებ, უნდა იცოდეს, რომ ეს
ნაწარმოების სათაურია.
ქვემოთ მოყვანილია მაგალითი, inspect –დან , რომელიც აღნიშნავს რომ ეს <city>
ელემენტია. Example:
HTML <bdo> ორმხრივი გადატვირთვისთვის
 BDO ნიშნავს Bi-Directional Override.
 HTML <bdo> ტეგი გამოიყენება ტექსტის ამჟამინდელი მიმართულების გადასალახად:
Example:

წარწერა <p> კოდში:


 თუ თქვენი ბრაუზერი მხარს უჭერს ორმხრივი გადახედვას (bdo), შემდეგი
სტრიქონი დაიწერება მარჯვნივ მარცხნივ (rtl):
 ეს სტრიქონი დაიწერება მარცხნიდან მარჯვნივ

წარწერა <bdo> ში:


 ეს სტრიქონი დაიწერება მარცხნიდან მარჯვნივ

6 – HTML Comments (HTML კომენტარები)


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

HTML Comment Tags (HTML კომენტარის ტეგები)


თქვენ შეგიძლიათ დაამატოთ კომენტარები თქვენს HTML წყაროს შემდეგი
სინტაქსის გამოყენებით. Example:

 გაითვალისწინეთ, რომ საწყის ტეგში არის ძახილის წერტილი (!), მაგრამ არა ბოლოში.
 კომენტარებით შეგიძლიათ განათავსოთ შეტყობინებები და შეხსენებები თქვენს HTML
კოდში.
 კომენტარები ასევე კარგია HTML- ის გამართვისთვის, რადგან შეცდომების მოსაძებნად
შეგიძლიათ კოდის HTML ხაზების კომენტარი ერთ ჯერზე გააკეთოთ. Example:
7 – HTML Colors (HTML ფერები)
HTML ფერები განსაზღვრულია წინასწარ განსაზღვრული ფერის სახელებით, ან RGB,
HEX, HSL, RGBA ან HSLA მნიშვნელობებით.
RGB – Red, Green, Blue; (ეს ნიშნავს, რომ არსებობს 256 x 256 x 256 = 16777216 შესაძლო ფერები!)
RGBA – Red, Green, Blue, Alpha;
HEX – Hexadecimal(თექვსმეტობითი) მითითებულია: #RRGGBB, სადაც RR (წითელი), GG (მწვანე) და BB
(ლურჯი) თექვსმეტობითი რიცხვები განსაზღვრავს ფერის კომპონენტებს.
HSL – Hue, Saturation, Lightness (ელფერი, გაჯერება, სიმსუბუქე)
HSLA – Hue, Saturation, Lightness, Alpha

Color Names (ფერის სახელები)


HTML- ში ფერის დადგენა შესაძლებელია ფერის სახელის გამოყენებით:
Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray და სხვა.
Example:

 HTML მხარს უჭერს 140 სტანდარტულ ფერის სახელს.

Background Color (ფონის ფერი)


თქვენ შეგიძლიათ დააყენოთ ფონის ფერი HTML ელემენტებისთვის:
Example:
Text Color (ტექსტის ფერი)
შეგიძლიათ დააყენოთ ტექსტის ფერი:

Border Color (საზღვრის ფერი)


თქვენ შეგიძლიათ დააყენოთ საზღვრების ფერი:

Color Values (ფერის ღირებულებები)


 HTML– ში ფერების დაზუსტება შესაძლებელია RGB მნიშვნელობების, HEX
მნიშვნელობების, HSL მნიშვნელობების, RGBA მნიშვნელობებისა და HSLA
მნიშვნელობების გამოყენებით.

 შემდეგ სამ <div> ელემენტს აქვს ფონის ფერი მითითებული RGB, HEX და HSL
მნიშვნელობებით:

 შემდეგ ორ <div> ელემენტს აქვს ფონის ფერი მითითებული RGBA და HSLA


მნიშვნელობებით, რაც ალფა არხს მატებს ფერს (აქ ჩვენ გვაქვს 50% გამჭვირვალობა):

Example:
8 – HTML Styles – CSS (Cascading Style Sheets)
 CSS ნიშნავს კასკადური სტილის ცხრილებს.
 CSS ზოგავს ბევრ სამუშაოს. მას შეუძლია გააკონტროლოს ერთდროულად
მრავალი ვებ გვერდის განლაგება.

რა არის CSS?
Cascading Style Sheets (CSS) გამოიყენება ვებ – გვერდის განლაგების ფორმატისთვის.
CSS– ით თქვენ შეგიძლიათ აკონტროლოთ ფერი, შრიფტი, ტექსტის ზომა,
ელემენტებს შორის მანძილი, როგორ არის განლაგებული ელემენტები, ფონის
სურათები ან ფონის ფერები. უნდა გამოიყენოთ, სხვადასხვა
ჩვენებები სხვადასხვა მოწყობილობებისთვის და ეკრანის ზომებისთვის
გაცილებით მეტი!

რჩევა: სიტყვა cascading ნიშნავს, რომ სტილი, რომელიც გამოიყენება მშობლის


ელემენტზე, ასევე ვრცელდება მშობლის ყველა შვილის ელემენტზე. ასე რომ, თუ
Body Text -ის ფერს დააყენებთ "ლურჯად", სხეულის ყველა სათაური, აბზაცი
და ტექსტის სხვა ელემენტებიც ერთსა და იმავე ფერს მიიღებს (თუ სხვა რამეს არ
მიუთითებთ)!

CSS - ის გამოყენება
CSS შეიძლება დაემატოს HTML დოკუმენტებს 3 გზით:
 (Inline) ხაზში - სტილის ატრიბუტის გამოყენებით HTML ელემენტებში
 (Internal) შიდა - <head> განყოფილებაში <style> ელემენტის გამოყენებით
 (External) გარე - <link> ელემენტის გამოყენებით გარე CSS ფაილთან
დასაკავშირებლად

Inline CSS
 inline CSS გამოიყენება უნიკალური სტილის გამოყენებისთვის ერთ HTML
ელემენტზე.
 inline CSS იყენებს HTML ელემენტის სტილის ატრიბუტს.
 შემდეგი მაგალითი ადგენს <h1> ელემენტის ტექსტის ფერს ლურჯად, ხოლო <p>
ელემენტის ტექსტს ფერს წითლად:
Example:

Internal CSS
 internal CSS გამოიყენება სტილის განსაზღვრისათვის ერთი HTML გვერდისთვის.
 Internal CSS განისაზღვრება HTML გვერდის <head> განყოფილებაში, <style>
ელემენტში.
 შემდეგი მაგალითი ადგენს ყველა <h1> ელემენტის (იმ გვერდზე) ტექსტის ფერს
ლურჯად, ხოლო ყველა <p> ელემენტის ტექსტის ფერს წითლად. გარდა ამისა,
გვერდი ნაჩვენები იქნება "ფხვნილისფერი" ფონის ფერით:
Example:

External CSS
 external სტილის ფურცელი გამოიყენება სტილის განსაზღვრისათვის მრავალი
HTML გვერდისთვის.
 external სტილის ფურცლის გამოსაყენებლად, დაამატეთ მას ბმული თითოეული
HTML გვერდის <head> განყოფილებაში:
 გარე სტილის ფურცლის დაწერა შესაძლებელია ტექსტის ნებისმიერ
რედაქტორში. ფაილი არ უნდა შეიცავდეს HTML კოდს და უნდა იყოს შენახული
css გაფართოებით.
 აი, როგორ გამოიყურება "styles.css" ფაილი:

უკეთ რომ გავიგოთ მოვიყვან მაგალითს:


 ვქმნით css ფაილს, სახელწოდებით styles.css (სახელს არ აქვს დიდი
მნიშნველობა, მთავარია ბოლოში იყოს .css
 შეგვყავს "styles.css" ფაილის კოდი (რაც ფოტოზეა მითითებული) შემდეგ HTML
გვერდის <head> განყოფილებაში ვწერთ ასე: <link rel="stylesheet" href="styles.css">
rel ატრიბუტში ვწერთ, რომ ეს style(css) ფაილია. (sheet ნიშნავს - ფურცელს); href
ატრიბუტში (მისამართში) ვწერთ ფაილის დასახელებას!

რჩევა: გარე სტილის ფურცლით შეგიძლიათ შეცვალოთ მთელი ვებ – გვერდის


სახე, ერთი ფაილის შეცვლით!

CSS Colors, Fonts and Sizes (CSS ფერები, შრიფტები და ზომები)


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

 CSS ფერის თვისება განსაზღვრავს გამოსაყენებელ ტექსტის ფერს.


 CSS font-family თვისება განსაზღვრავს გამოსაყენებელ შრიფტს.
 CSS შრიფტის ზომის თვისება განსაზღვრავს გამოსაყენებელი ტექსტის ზომას.
Example:

CSS Border (CSS საზღვარი)


 CSS საზღვრის თვისება განსაზღვრავს საზღვარს HTML ელემენტის გარშემო.
 რჩევა: თქვენ შეგიძლიათ განსაზღვროთ საზღვარი თითქმის ყველა HTML
ელემენტისთვის.
Example: (Use of CSS border property:)

CSS Padding (CSS შევსება)


CSS შევსების თვისება განსაზღვრავს შევსებას (სივრცეს) ტექსტსა და საზღვარს
შორის.
Example: (Use of CSS border and padding properties:)

CSS Margin (CSS ზღვარი)


CSS margin თვისება განსაზღვრავს ზღვარს (სივრცეს) საზღვრის გარეთ.
Example: (Use of CSS border and margin properties:)
Link to External CSS (ბმული გარე CSS– ზე)
გარე სტილის ფურცლების მითითება შესაძლებელია სრული URL– ით ან მიმდინარე
ვებ – გვერდის მიმართ ბილიკით.

Example: ეს მაგალითი იყენებს სრულ URL- ს სტილის ფურცელზე დასაკავშირებლად:

Example: ეს მაგალითი უკავშირდება სტილის ფურცელს, რომელიც მდებარეობს html საქაღალდეში


მიმდინარე ვებ გვერდზე:

Example: ეს მაგალითი უკავშირდება სტილის ფურცელს, რომელიც მდებარეობს იმავე საქაღალდეში,


როგორც მიმდინარე გვერდი:

Chapter Summary:
 გამოიყენეთ HTML სტილის ატრიბუტი შიდა სტილისთვის
 გამოიყენეთ HTML <style> ელემენტი შიდა CSS განსაზღვრისათვის
 გამოიყენეთ HTML <link> ელემენტი, რომ მიმართოთ გარე CSS ფაილს
 გამოიყენეთ HTML <head> ელემენტი <style> და <link> ელემენტების შესანახად
 გამოიყენეთ CSS ფერის თვისება ტექსტის ფერებისთვის
 გამოიყენეთ CSS font-family თვისება ტექსტის შრიფტებისთვის
 გამოიყენეთ CSS შრიფტის ზომის თვისება ტექსტის ზომისთვის
 გამოიყენეთ CSS სასაზღვრო თვისება საზღვრებისთვის
 გამოიყენეთ CSS შევსების თვისება საზღვრის შიგნით სივრცისათვის
 გამოიყენეთ CSS ზღვრის თვისება საზღვრის გარეთ სივრცისათვის
9 - HTML Links (HTML ლინკები)
Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links – Hyperlinks (HTML ბმულები - ჰიპერბმულები)


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

HTML Links – Syntax (HTML ბმულები - სინტაქსი)


 HTML <a> ტეგი განსაზღვრავს ჰიპერბმულს. მას აქვს შემდეგი სინტაქსი:
<a href="url">link text</a>
 <a> ელემენტის ყველაზე მნიშვნელოვანი ატრიბუტია href ატრიბუტი, რომელიც
მიუთითებს ბმულის დანიშნულებაზე.
 ბმულის ტექსტი არის ნაწილი, რომელიც ხილული იქნება მკითხველისთვის.
 ბმულის ტექსტზე დაწკაპუნებით, მკითხველი გაიგზავნება მითითებულ URL
მისამართზე.
Example: ეს მაგალითი გვიჩვენებს, თუ როგორ უნდა შეიქმნას ბმული W3Schools.com– ზე:

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


 უნახავი ბმული არის ხაზგასმული და ლურჯი
 მონახულებული ბმული ხაზგასმულია და მეწამული
 აქტიური ბმული არის ხაზგასმული და წითელი

რჩევა: ბმულები, რა თქმა უნდა, შეიძლება სტილიზებული იყოს CSS– ით, რომ მიიღოთ
სხვა სახე!

HTML Links - The target Attribute (HTML ბმულები - სამიზნე ატრიბუტი)


 ნაგულისხმევად, დაკავშირებული გვერდი გამოჩნდება ბრაუზერის მიმდინარე
ფანჯარაში. ამის შესაცვლელად, თქვენ უნდა მიუთითოთ ბმულის სხვა სამიზნე.
 target ატრიბუტი განსაზღვრავს სად გახსნას დაკავშირებული დოკუმენტი.
 target ატრიბუტს შეიძლება ჰქონდეს ერთი შემდეგი მნიშვნელობა:
 _self - ნაგულისხმევი. ხსნის დოკუმენტს იმავე ფანჯარაში/ჩანართში, რომელზეც
დააწკაპუნეთ
 _blank - ხსნის დოკუმენტს ახალ ფანჯარაში ან ჩანართში
 _parent - ხსნის დოკუმენტს მშობლის ჩარჩოში
 _ top - ხსნის დოკუმენტს ფანჯრის მთელ სხეულში
Example: რჩევაა გამოიყენეთ target = "_ blank" დაკავშირებული დოკუმენტის გასახსნელად
ბრაუზერის ახალ ფანჯარაში ან ჩანართში:

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

2. უკეთ, რომ გაერკვეთ, თუ რას ნიშნავს სამიზნე ატრიბუტი „target“, ამისათვის


გამოიყენეთ ყველა სამიზნე:
target="_blank"
target="_self"
target="_parent"
target="_top"
შემდეგ კი გადადით ბმულზე!

3. გახსენით ყველა გარე ბმული ახალ ჩანართში JavaScript– ით!


თქვენ არ გჭირდებათ ხელით დაამატოთ target = "_ blank" თქვენი საიტის თითოეულ
ბმულს. თუ ბევრს დაუკავშირებთ (რაც თქვენ უნდა გააკეთოთ), ადვილია
დაამატოთ JavaScript კოდი თქვენს საიტზე და ყველა გარე ბმული ავტომატურად
გადააქციოთ _ ცარიელ ბმულებად.

Absolute URLs vs. Relative URLs (აბსოლუტური მისამართები შედარებითი


მისამართების წინააღმდეგ)
 ორივე ქვემოთ მოყვანილი მაგალითი იყენებს აბსოლუტურ URL- ს (სრული ვებ
მისამართს) href ატრიბუტში.
 ადგილობრივი ბმული (ბმული იმავე ვებსაიტზე)
მითითებულია ნათესავი URL- ით ("https: // www" ნაწილის გარეშე)
Example:

HTML Links - Use an Image as a Link (გამოიყენეთ სურათი, როგორც ბმული


 ბმულის სახით სურათის გამოსაყენებლად, უბრალოდ ჩადეთ <img> ტეგი
<a> ტეგის შიგნით. Example:

განმარტება:
 როდესაც ფოტოს დავკლიკავთ გადაგვაგდებს ლინკზე „html Tutorial -ის.
 Default.asp ნიშნავს საიტის გვერდის მისამართს, ამ მომეტში www.w3schools.com ის;
Default.asp შემოკლებული ლინკია. ასე მაგალითად:

როგორც ხედავთ w3school.com –ის ბოლოში წერია /html/default.asp, ამის მაგივრად


შეგვიძლია კოდში ჩავწეროთ <a href="/css/default.asp "> და გადაგვაგდებს აქ:
2 – HTML Editors (HTML რედაქტორები) - შემდეგში

You might also like