0. შესავალი

მომხმარებელი და სერვერი

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

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

მაგიური WWW :)

კლიენტისა და მომხმარებლის ურთიერთობა მიმდინარეობს სივრცეში, რომელსაც შემოკლებით ხშირად უწოდებენ ვებ-ს (იგივე WWW ანუ World Wide Web ანუ მსოფლიო ქსელი), ვები არის ინფორმაციული სისტემა, რომელშიც დოკუმენტებისა და სხვადასხვა წყაროების იდენტიფიცირება ხდება რესურსების მაჩვენებლების (URL, იგივე Uniform Resource Locators) მეშვეობით. URL შეიძლება გამოიყურებოდეს ასე: https://www.example.com/

***

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

• ინტერნეტ-კავშირი - საშუალებას გვაძლევს გავცვალოთ ინფორმაცია სერვერთან. მაგალითად ვნახოთ თუ რა გააზიარა ჩვენმა მეგობარმა ფეისბუქზე :)) ან ავტვირთოთ პროფილის ფოტო.
• IP მისამართი - ანუ ინტერნეტ-პროტოკოლის მისამართი, ციფრული ნიშნული, რომელიც განსაზღვრულია ინტერნეტთან დაკავშირებული ყველა მოწყობილობისათვის. IP მისამართს აქვს ორი ძირითადი ფუნქცია: სერვერისა და ქსელური მოწყობილობების იდენტიფიცირება და ადგილმდებარეობების იდენტიფიცირება.
• HTTP - ინგლისურად: Hypertext Transfer Protocol, ანუ ჰიპერტექსტების ტრანსფერების, გაცვლა-გამოცვლის პროტოკოლი, ინსტრუქცია, წესდება. ჰიპერტექსტის უკან მოიაზრება ის ინფორმაცია, რომელსაც მომხმარებელი ღებულობს სერვერიდან ან აგზავნის სერვერზე.
• DNS - ინგლისურად : Domain Name System ანუ დომენთა დასახელებების სისტემა. კომპიუტერული სივრცე, რომელიც გამოიყენება დომენების შესახებ ინფორმაციის მისაღებად. DNS წააგავს ტელეფონის ნომრების წიგნაკს :)) როდესაც მომხმარებელი ბრაუზერში კრეფს რომელიმე საიტის მისამართს, ბრაუზერი DNS-ში ამოწმებს თუ რომელი IP მისამართი შეესაბამება ამ საიტს, რადგან მან ზუსტად უნდა იცოდეს სად გააგზავნოს HTTP მოთხოვნები.

მაშ ასე, მას შემდეგ რაც მომხმარებელმა ბრაუზერში აკრიფა ვებ-გვერდის მისამართი, იკვრება შემდეგი ჯაჭვი :

• ბრაუზერი აკითხავს DNS სერვერს და გებულობს ვებ-გვერდის ზუსტ მდებარეობას, მისამართს.
• ამის შემდეგ ბრაუზერი სერვერზე აგზავნის HTTP მოთხოვნას და თხოვს მას რომ მომხმარებელს გაუგზავნოს საიტის ასლი, ამ ინფორმაციის გაცვლა/გამოცვლა ხდება ინტერნეტისა და ჩვენი კომპიუტერის ან მობილურის IP მისამართის მეშვეობით.
• თუ სერვერი დაეთანხმება მომხმარებლის მოთხოვნას, მის პასუხს ექნება სტატუსი '200 OK', რაც ნიშნავს იმას, რომ ყველაფერი რიგზეა და მომხმარებელს შეუძლია მიიღოს მოთხოვნის შესაბამისი პასუხი. ამის შემდეგ სერვერი ბრაუზერს უგზავნის ვებ-გვერდის ჩატვირთვისათვის აუცილებელ ფაილებს.
• ბრაუზერი აერთიანებს ამ ფაილებს და მომხმარეელს უხსნის ვებ-გვერდს.

1. რა არის HTML ?

HTML - Hypertext Markup Language, ანუ ჰიპერტექსტის ნიშნულების ენა, რომელიც 1993 წელს შექმნა ინგლისელმა მეცნიერმა ტიმ ბერნერს ლიმ (იგი შესულია ცოცხალი გენიოსების მსოფლიო ასეულში).

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

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

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

მოვიყვანოთ html სტრუქტურის უმარტივესი მაგალითი : <!DOCTYPE html>
<html>
<head>
<title>გვერდის სათაური</title>
</head>
<body>
<h1>სათაური</h1>
<p>პარაგრაფი.</p>
</body>
</html>

• <!DOCTYPE html> არის ბრაუზერის ინსტრუქცია იმის შესახებ თუ HTML-ის რომელ ვერსიას იყენებს გვერდი
• <html> არის HTML გვერდის ძირი ელემენტი
• <head> ელემენტი შეიცავს მეტაინფორმაციას გვერდის შესახებ
• <title> ელემენტი განსაზღვრავს გვერდის სათაურს
• <body> ელემენტი განსაზღვრავს მომხმარებლისთვის ხილვად გვერდის კონტენტს
• <h1> ელემენტი განსაზღვრავს დიდი შრიფტით დაწერილ სათაურს
• <p> ელემენტი განსაზღვრავს პარაგრაფს

HTML ნიშნულები ანუ იარლიყები

ჰიპერტექსტის ფრაზების ანუ ელემენტების მოსანიშნად გამოიყენება HTML იარლიყები, ნიშნულები. გამოყენების სინტაქსი ასეთია : <ნიშნული>შიგთავსი მოთავსდება აქ...</ნიშნული> პირველ ნიშნულს ეწოდება 'გამხსნელი ნიშნული', მეორეს - 'დამხურავი ნიშნული' და მისი დასახელების წინ გამოიყენება "/" სიმბოლო.

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

ბრაუზერში გამოჩნდება მხოლოდ <body> სექციაში მოთავსებული შიგთავსი

<!DOCTYPE> დეკლარაცია

<!DOCTYPE> დეკლარაცია განსაზღრავს დოკუმენტის ტიპს და ბრაუზერს ეხმარება სწორად გამოიტანოს გვერდი. მისი მითითება ხდება მხოლოდ ერთხელ დოკუმენტის დასაწყისში. <!DOCTYPE> დეკლარაცია არ არის ასოთა რეგისტრის მიმართ მგრძნობიარე.

HTML ვერსიები

ვერსია	წელი
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

2. პირველი HTML გვერდი ბრაუზერში

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



შემდეგ შევინახოთ ფაილი : File > Save as. მივუთითოთ სახელი "index.htm" (ფაილის გაფართოება შეიძლება იყოს .html-იც, ეს არაფერს შეცვლის) და განვსაზღვროთ კოდირება UTF-8 (რომელიც არის უპირატესი კოდირება html ფაილებისათვის). აგრეთვე დარწმუნებულები უნდა ვიყოთ რომ ფაილის ტიპად მითითებულია All files.



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

3. HTML ატრიბუტები

HTML ატრიბუტები განსაზღვრავენ, მიუთითებენ დამატებით ინფორმაციას HTML ელემენტების შესახებ. ნებისმიერ HTML ელემენტს შეიძლება გააჩნდეს ატრიბუტი, მათი მითითება ხდება გამხსნელ ანუ საწყის ტეგში, ატრიბუტების წარმოდგენა ხდება 'სახელი=მნიშვნელობა' წყვილის სახით : <ნიშნული ატრიბუტის_ახელი="ატრიბუტის მნიშვნელობა"></ნიშნული>
კონკრეტული მაგალითი :
<p id="paragraph"></p>

lang ატრიბუტი

lang ატრიბუტი განსაზღვრავს დოკუმენტის ენას, მისი მითითება ხდება <html> ტეგში. <!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>


title ატრიბუტი

მოყვანილ მაგალითში title ატრიბუტი ემატება <p> ელემენტს, ატრიბუტის მნიშვნელობა გამოჩნდება ელემენტთან მაუსის მიტანისას <p title="ატრიბუტი">
   ეს პარაგრაფია
</p>

href ატრიბუტი

HTML ბმულების განსაზღვრა ხდება <a> ნიშნულის მეშვეობით. ბმულის მისამართი კი განისაზღვრება href ატრიბუტით <a href="https://www.w3schools.com">ბმული</a>

alt ატრიბუტი

alt ატრიბუტის მეშვეობით ხდება ალტერნატიული ვარიანტის განსაზღვრა იმ შემთხვევისათვის თუ რაიმე მიზეზის გამო სურათი არ ჩაიტვირთება.

ასოთა რეგისტრი

HTML5-ში არ არის აუცილებელი მაინცდამაინც პატარა ან დიდი ასოებით ჩაიწეროს ატრიბუტები, მაგალითად title ატრიბუთი შეიძლება ჩაიწეროს როგორც TITLE. თუმცა მაინც რეკომენდებულია რომ HTML-თან მუშაობისას გამოვიყენოთ პატარა ასოთა რეგისტრი.

ატრიბუტთა მნიშვნელობა და ბრჭყალები

HTML5-ში არ არის აუცილებელი რომ ატრიბუტთა მნიშვნელობების მითითებისას გამოვიყენოთ ბრჭყალები, მაგალითად ბმულის მისამართი შეიძლება ჩაიწეროს ასეც <a href=https://www.w3schools.com>ბმული</a> თუმცა არის შემთხვევები როცა ბრჭყალების გამოყენება აუცილებელია, მაგალითად თუ ატრიბუტის მნიშვნელობა შედგება რამოდენიმე სიტყვისაგან <p title="About W3Schools">

ორმაგი და ჩვეულებრივი ბრჭყალები

ზოგიერთ შემთხვევაში როდესაც ატრიბუტის მნიშვნელობა თავად შეიცავს ორმაგ ბრჭყალებს, ატრიბუტის მნიშვნელობა უნდა ჩაისვას ჩვეულებრივ ბრჭყალებში <p title='John "ShotGun" Nelson'> ან პირიქით <p title="John 'ShotGun' Nelson">

4. სათაურები

სათაურები განისაზღვრება <h1> დან <h6>-მდე ტეგებით (ინგ: heading - სათაური). მათ შორის განსხვავება შრიფტის ზომაშია : <h1>სათაური 1</h1>
<h2>სათაური 2</h2>
<h3>სათაური 3</h3>
<h4>სათაური 4</h4>
<h5>სათაური 5</h5>
<h6>სათაური 6</h6>

სათაური 1

სათაური 2

სათაური 3

სათაური 4

სათაური 5

სათაური 6

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

ჰორიზონტალური ხაზები - hr

ინგ: horizontal rule - ჰორიზონტალური ხაზი.

ჰორიზონტალური ხაზები გვერდის შიგთავსში ხშირად გამოიყენება მაგალითად თემატური, შინაარსობვრივი წყვეტებისას : <h1>სათაური 1</h1>
<hr>
<h2>სათაური 2</h2>

სათაური 1

---

სათაური 2

<head> ელემენტი

<head> არის კონტეინერი სადაც თავსდება მეტაინფორმაცია გვერდის შესახებ. ამ კონტეინერში განთავსებული ინფორმაცია მომხმარებლისთვის უხილავია. <!DOCTYPE html>
<html>

<head>
   <title>გვერდის სათაური</title>
   <meta charset="UTF-8">
</head>

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

როგორ ვნახოთ გვერდის HTML წყარო ?

გვერდის HTML წყაროს სანახავად გვერდზე უნდა დავაჭიროთ მარჯვენა მაუსს და ავირჩიოთ "View Page Source" (Chrome-ში) ან "View Source" (IE-ში), ან რაიმე ამის მსგავსი სხვა ბრაუზერებში. ამის შედეგად გაიხსნება გვერდის HTML წყაროს შემცველი ახალი გვერდი.

5. პარაგრაფები

ინგ: paragraph - პარაგრაფი, აბზაცი

პარაგრაფის განსასაზღვრავად გამოიყენება <p> ნიშნული, ბრაუზერი ავტომატურად ამატებს ცარიელ სივრცეს პარაგრაფის წინ და მის შემდეგ. <p>ეს არის პარაგრაფი</p>

ახალი ხაზი ტექსტში

ინგ: line break - ხაზის 'გატეხვა', გაყოფა

ტექსტში ახალ ხაზზე გადასასვლელად გამოიყენება <br> ელემენტი. ახალ ხაზზე გადასვლა არ ნიშნავს ახალი პარაგრაფის შექმნას.

<p>
    ეს არის პარაგრაფის პირველი ხაზი <br>
    ეს არის პარაგრაფის მეორე ხაზი
</p>
                

<pre> ელემენტი

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

მე რა გამგე ვარ მაგისა,

დიაცს მუდამაც უხდება

გლოვა ვაჟკაცის კარგისა...

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

  იტირე?-მადლი გიქნია,

  მე რა გამგე ვარ მაგისა,

  დიაცს მუდამაც უხდება

  გლოვა ვაჟკაცის კარგისა...

6. ტექსტის ფორმატირება

ტესქსტის დაფორმატების ელემენტებია :

• <b> - მუქი ტექსტი
• <strong> - მნიშვნელოვანი ტექსტი
• <i> - კურსივირებული ტექსტი
• <em> - ხაზგასმული (შინაარსობრივი თვალსაზრისით) ტექსტი
• <mark> - მონიშნული ტექსტი
• <small> - ტექსტი პატარა შრიფტით
• <del> - ხაზგადასმული ტექსტი
• <sub> - a_b
• <sup> - a^b

7. ტექსტის ციტირება

<q> ელემენტი

ინგ : quotation - ციტატა; ციტირება, ციტატების მოყვანა;

<q> ელემენტი () გამოიყენება მოკლე ციტატების ჩასაწერად, ბრაუზერები, როგორც წესი, <q> ელემენტში მოთავსებულ ტექსტს სვამენ ბრჭყალებში <p>ნაწარმოები იწყება ასე: <q>სახლი, რომელშიც თამაზ იაშვილი ცხოვრობს, სოლოლაკში დგას, სულ განაპირას.</q></p> შედეგი იქნება

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

<blockquote> ელემენტი

<blockquote> ელემენტი განსაზღვრავს განყოფილებას, არეს სადაც თავსდება სხვა ტექსტებისაგან გამოყოფილი ტექსტი, ციტატა. <p>ნაწარმოების მოკლე აღწერა:</p>
<blockquote cite="http://www.myexample.ge/index.html">
თამაზ იაშვილი ფენომენალური ნიჭის მქონე ახალგაზრდა მათემატიკოსია, მაგრამ სრულიად უმწეოა პრობლემების წინაშე და არ შეუძლია ბრძოლა საკუთარი ადგილის დასამკვიდრებლად. ოთარ ნიჟარაძე, ამ მხრივ, მისი სრული ანტიპოდია და ერთგვარი აზარტითაც კი იბრძვის როგორც თავისი, ისე მისი მეგობრის, თამაზ იაშვილის გაქნილი და სახიფათო მტრების წინააღმდეგ. ამ ორი მეგობრის თავგადასავლების ფონზე გვიხატავს გურამ ფანჯიკიძე იმდროინდელი საზოგადოების ცხოვრებას.
</blockquote> შედეგი იქნება

ნაწარმოების მოკლე აღწერა:

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

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

<abbr> ელემენტი

<abbr> ელემენტი განსაზღვრავს აბრევიატურებს, მათი გამოყენება ეფეტქურტს ხდის საძიებო სისტემებისა და მთარგმნელი სისტემების მუშაობას. <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<address> ელემენტი

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

რედაქთორი : ნ. ჭყოიძე,
მისამართი :
რუსთაველის ქ, 52,
თბილისი,
საქართველო.

<cite> ელემენტი

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

<bdo> ელემენტი

<bdo> (Bi-Directional Override) ელემენტის დახმარებით ტექსტი შეიძლება განისაზღვროს, ჩაიწეროს ორნგვარად: მარცხნიდან მარჯვნივ, ან მარჯვნიდან მარცხნივ. მიმართულებას განსაზღვრავს dir (Directional - მიმართული, მიმმართველი) ატრიბუტი, მისი შესაძლო მნიშვნელობებია ltr (left to right ანუ მარცხნიდან მარჯვნივ) და rtl (right to left ანუ მარჯვნიდან მარცხნივ).

dir="ltr"

<bdo dir="ltr">ეს ტექსტი ჩაიწერება მარცხნიდან მარჯვნივ</bdo> შედეგი ეს ტექსტი ჩაიწერება მარცხნიდან მარჯვნივ

dir="rtl"

<bdo dir="rtl">ეს ტექსტი ჩაიწერება მარჯვნიდან მარცხნივ</bdo> შედეგი ეს ტექსტი ჩაიწერება მარჯვნიდან მარცხნივ

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

<kbd> ელემენტი

<kbd> ელემენტი (Keyboard) გამოიყენება კლავიატურაზე აკრეფილი კომბინაციების ტექსტად ფორმატირებისათვის <p>შესანახად დააჭირეთ <kbd>Ctrl + S</kbd></p> შედეგი იქნება

შესანახად დააჭირეთ Ctrl + S

<samp> ელემენტი

<samp> ელემენტი გამოიყენება გამოთვლითი სისტემის ან პროგრამის მიერ დაბრუნებული შეტყობინების დასაფორმატებლად <p>დაფიქსირდა შეცდომა : <samp>Access denied for user 'test'@'localhost' (using password: YES) except root user</samp></p> შედეგი იქნება

დაფიქსირდა შეცდომა : Access denied for user 'test'@'localhost' (using password: YES) except root user

<code> ელემენტი

<code> ელემენტი გამოიყენება კომპიუტერული კოდის ციტირებისათვის, დაფორმატებისათვის <code>
   if(a>=0){
     echo "არაუარყოფითია";
   }
   else{
     echo "უარყოფითია";
   }
</code> შედეგი იქნება if(a>=0){ echo "არაუარყოფითია"; } else{ echo "უარყოფითია"; } უნდა აღინიშნოს, რომ <code> ელემენტი არ ინახავს გამოტოვებულ ადგილებსა და ახალ ხაზებს, ამისათვის მას უნდა დავახმაროთ <pre> ელემენტი <code>
<pre>
   if(a>=0){
     echo "არაუარყოფითია";
   }
   else{
     echo "უარყოფითია";
   }
<pre> </code> ახლა უკვე შედეგი იქნება

if(a>=0){
  echo "არაუარყოფითია";

}
else{
  echo "უარყოფითია";
}

<var> ელემენტი

ინგ: variable - ცვლადი;

<var> გამოიყენება ცვლადების განსასაზღვრავად აინშტაინმა დაწერა : <var>E</var> = <var>mc</var><sup>2</sup>. შედეგი იქნება აინშტაინმა დაწერა : E = mc2.

8. კომენტარები

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

პირობითი კომენტარები

პირობითი კომენტარების სინტაქსი ასეთია <!--[if IE 9]>
.... HTML კოდი აქ ....
<![endif]--> პირობით კომენტარებში მითითებული კოდი იმუშავებს მხოლოდ Internet Explorer-ის გამოყენებისას.

9. ბმულები

ინგ: anchor - წამყვანი (html-ში ელემენტი, რომელც ასოცირდება სხვაგან წაყვანასთან, სხვაგან გადასვლასთან);

იშვიათია ვებ-გვერდი სადაც არ გამოიყენებოდეს ბმულები, მათი საშუალებით მომხმარებელს შეუძლია ერთი გვერდიდან სხვა გვერდზე გადასვლა. როგორც ადრე ვთქვით ბმულებს განსაზღვრავს <a> ნიშნული :

<p>
    ინფორმაციის მოსაძიებლად ეწვიეთ <a href="https://www.google.com/">Google</a>-ს
</p>
                

href ატრიბუტი მიუთითებს ბმულის დანიშნულების ადგილს. ტექსტი "Google" კი არის ბმულის ხილვადი ნაწილი. შედეგი იქნება :

ინფორმაციის მოსაძიებლად ეწვიეთ Google-ს

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

<p>
    ინფორმაციის მოსაძიებლად დააწექით ლოგოს : 
    <a href="https://www.google.com/">
        <img src="images/gl.png">
    </a>
</p>
                

შედეგი იქნება :

ინფორმაციის მოსაძიებლად დააწექით ლოგოს :

ლოკალური ბმულები

ლოკალურია ბმული თუ ის იმავე ვებ-გვერდზე გადადის სადაც განთავსებულია (წინააღმდეგ შემთხვევაში ბმული არის აბსოლიტური). მათი URL-ის (Uniform Resource Locator ანუ საინფორმაციო რესურსის მაჩვენებელი) განსაზღვრა ხდება "http://www...." წინსართის გარეშე <a href="https://www.w3schools.com/html/">HTML გაკვეთილი</a> <!-- აბსოლიტური ბმული -->
<a href="html_images.asp">HTML სურათები</a> <!-- ლოკალური ბმული ბმული -->

ატრიბუტი target

ატრიბუტი target განსაზღვრავს თუ სად უნდა გაიხსნას ბმულის URL-ში მითითებული გვერდი, ატრიბუტმა შეიძლება მიიღოს შემდეგი მნიშვნელობები

• _blank - გვერდი გაიხსნება ახალ ფანჯარაში
• _self - გვერდი გაიხსნება იმავე ფანჯარაში (ეს არის ატრიბუტის ნაგულისხმევი მნიშვნელობა)
• _parent - გვერდი გაიხსნება მშობელ ფრეიმში
• _top - გვერდი დაიკავებს დოკუმენტის მთლიან შიგთავსს
• framename - გვერდი გაიხსნება სახელდებულ ფრეიმში

ატრიბუტი download

ატრიბუტი download მიუთითებს რომ როდესაც მომხმარებელი დააწვება ბმულს, უნდა გადმოიწეროს ბმულის სამიზნე. ატრიბუტი გამოიყენება მხოლოდ მაშინ თუ მითითებულია href ატრიბუტი. ატრიბუტის მნიშვნელობა იქნება გადმოწერილი ფაილი, მნიშვნელობების განსაზღრისას არ არსებობს არანაირი შეზღუდვა, ბრაუზერი ავტომატურად დაადგენს ფაილის გაფართოებას (.img, .pdf, .txt, .html და ა.შ) და მიაწერს მას ფაილის დასახელებას. თუ გვსურს რომ წინასწარ განვსაზღვროთ გადმოწერილი ფაილის დასახელება მაშინ უნდა მივუთითოთ download ატრიბუტის მნიშვნელობა

<a href="images/HTML5.png" download="html5_logo">

    <img src="images/HTML5.png" alt="html5">

</a>
                

შედეგი იქნება :

10. სურათები

ინგ: image - სურათი;

სურათების განსაზღვრა ხდება <img> ნიშნულის დახმარებით. ამ ნიშნულს დამხურავი ნიშნული </img> არ აქვს და შეიცავს მხოლოდ ატრიბუტებს. src ატრიბუტი განსაზღვრავს სურათის მისამართს, წყაროს (ინგ: source - წყარო) : <img src="url" alt="some_text">

alt ატრიბუტი

alt ატრიბუტი განსაზღვრავს ალტერნატიულ ტექსტს რომელიც გამოიყენება იმ შემთხვევაში თუ სურათი არ ჩაიტვირთება სხვადსხვა მიზეზის გამო (ნელი ინტერნეტი, src ატრიბუტის არასწორი მნიშვნელობა და ა.შ)



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

HTML ეკრანის წამკითხავები

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

სურათები სხვა საქაღალდიდან

სასურველი და რეკომენდებულია, რომ სურათები მოთავსდეს ხოლმე ცალკე საქაღალდეში, ასეთ შემთხვევაში საქაღალდის სახელი უნდა შევიტანოთ სურათის URL-ში <img src="/images/html5.gif" alt="HTML5 Icon">

სურათი როგორც რუკა

html-ში შესაძლებელია სურათის დაყოფა არეებად და შემდეგ ამ არეების ბმულებად გამოყენება. ამისათვის გამოიყენება <map> ნიშნული, იგი თავის მხრივ მოიცავს რამოდენიმე <area> ტეგს რომელიც განსაზღვრავს ზემოთხსენებულ არეებს. <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
   <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
   <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
   <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

11. ცხრილები

ცხრილების განსაზღვრა ხდება <table> ნიშნულის გამოყენებით. ცხრილის ყოველი სტრიქონი, რიგი განისაზღვრება <tr> ნიშნულით (table row), ცხრილის სათაური სტრიქონი განისაზღვრება <th> ნიშნულით (table heading). ნაგულისხმეობის პრინციპით th სტრიქონის ტექსტები მუქია და ცენტრისკენ გასწორებული. ცხრილის უჯრების განსაზღვრა კი ხდება <td> ნიშნულით (table data). <table style="width:100%">
   <tr>
     <th>Firstname</th>
      <th>Lastname</th>
     <th>Age</th>
   </tr>
   <tr>
     <td>Jill</td>
     <td>Smith</td>
     <td>50</td>
     </tr>
   <tr>
     <td>Eve</td>
     <td>Jackson</td>
     <td>94</td>
   </tr>
</table>

rowspan და colspan ატრიბუტები

rowspan ატრიბუტი განსაზღვრავს თუ რამდენ სტრიქონს, რიგს უნდა მოიცავდეს კონკრეტული უჯრა, ანუ ერთდროულად რამდენი სტრიქონის ანუ რიგის "წევრი" უნდა იყოს. row ნიშნავს რიგს, span ნიშნავს სიგანეს, განს, გაჭიმვას, აქედან გამომდინარე rowspan გულისხმობს თუ რამდენ სტრიქონზე უნდა გაიჭიმოს უჯრა. მაგალითად ეს უჯრა მოიცავს 3 სტრიქონს, რიგს


ანალოგიურად მუშაობს colspan ატრიბუტი მხოლოდ სვეტებზე. col არის column-ის შემოკლებული ვარიანტი, column ნიშნავს სვეტს, აქედან გამომდინარე colspan გულისხმობს თუ რამდენ სვეტზე უნდა გაიჭიმოს უჯრა. მაგალითად ეს უჯრა მოიცავს 2 სვეტს

caption ატრიბუტი

caption ატრიბუტი განსაზღვრავს ცხრილის სათაურს (Caption - სათაური; ტიტრი, წარწერა ეკრანზე). <table style="width:100%">
<caption>ცხრილის სათაური</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

<colgroup> ელემენტი

<colgroup> ელემენტი გამოიყენება ცხრილის სვეტის ან სვეტების მოსანიშნად მათი შემდგომი დაფორმატებისათვის. <colgroup უნდა მოთავსდეს <table> ელემენტში <caption> ელემენტის შემდეგ და <thead>, <tbody>, <tfoot> და <tr> ელემენტების წინ. colgroup ელემენტით მონიშნული სვეტების ცალ-ცალკე მოსანიშნად გამოიყენება <col> ნიშნული <table>
   <colgroup>
     <col span="2" style="background-color:red">
     <col style="background-color:yellow">
   </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Title</th>
     <th>Price</th>
   </tr>
   <tr>
     <td>3476896</td>
     <td>My first HTML</td>
     <td>$53</td>
   </tr>
</table>

<thead>, <tbody>, და <tfoot> ელემენტები

<thead>, <tbody>, და <tfoot> ელემენტები გამოიყენება ცხრილის ფრაგმენტების ფორმატირებისათვის, ცხრილის ტანი იყოფა ნაწილებად: სათაური, ტანი და ძირი.

12. სიები

დაუნომრავი სიები

დაუნომრავი სიები იწყება <ul> ელემენტით (Unordered List), მის კონკრეტულ პუნქტებს კი განსაზღვრავს <li> ნიშნული (List item ანუ სიის ელემენტი, პუნქტი). პუნქტების მონიშვნა ხდება პატარა შავი წრეებით : <ul>
   <li>ყავა</li>
   <li>ჩაი</li>
   <li>რძე</li>
</ul> შედეგი :

• ყავა
• ჩაი
• რძე

პუნქტის ნიშნულების იერსახის მითითება შესაძლებელია css list-style-type თვისების მეშვეობით, მისი მნიშვნელობებია :

მნიშვნელობა	აღწერა
disc	პატარა შავი წრეები (ნაგულისმეობის პრინციპი)
circle	პატარა წრეები
square	პატარა კვადრატები
none	პუნქტებს არ ექნებათ ნიშნულები

მაგალითად : <ul style="list-style-type : square;">
   <li>ყავა</li>
   <li>ჩაი</li>
   <li>რძე</li>
</ul>

დანომრილი სიები

დანომრილი სიები იწყება <ol> ელემენტით (Ordered List), მის კონკრეტულ პუნქტებს კი განსაზღვრავს <li> ნიშნული. ამ დროს ხდება სიის პუნქტების გადანომრვა. <ol> ტეგს აქვს type ატრიბუტი რომელიც განსაზღვრავს გადანომრვის წესებს, ამ ატრიბუტის შესაძლო მნიშვნელობებია :

ტიპი	აღწერა
type="1"	გადაინომრება ციფრებით (ნაგულისმეობის პრინციპი)
type="A"	გადაინომრება დიდი ლათინური ასოებით
type="a"	გადაინომრება პატარა ლათინური ასოებით
type="I"	გადაინომრება დიდი რომაული ციფრებით
type="i"	გადაინომრება პატარა რომაული ციფრებით

reversed ატრიბუტი

reversed ატრიბუტი ol სიას გადანომრავს უკუმიმართულებით : <ol reversed>
   <li>HTML5</li>
   <li>CSS3</li>
   <li>Javascript</li>
</ol> შედეგი იქნება

1. HTML5
2. CSS3
3. Javascript

start ატრიბუტი

start ატრიბუტი განსაზღვრავს თუ რომელი რიცხვიდან დაიწყოს სიის გადანომრვა : <ol start="10">
   <li>HTML5</li>
   <li>CSS3</li>
   <li>Javascript</li>
</ol> შედეგი იქნება

10. HTML5
11. CSS3
12. Javascript

აღწერითი სიები

აღწერითი სია არის ტერმინების სია რომელსაც თან ახლავს ამ ტერმინთა აღწერები. ასეთ სიას განმსაზღვრავს <dl> ნიშნული (Description List), ტერმინის დასახელებას განსაზღვრავს <dt> ნიშნული, ტერმინის აღწერას კი <dd> ნიშნული : <dl>
   <dt>ყავა</dt>
   <dd>- ცხელი სასმელი</dd>
   <dt>ლუდი</dt>
   <dd>- ცივი სასმელი</dd>
</dl> შედეგი იქნება

ყავა
    - ცხელი სასმელი
ლუდი
    - ცივი სასმელი
                

13. ბლოკები

ნებისმიერ HTML ელემენტს, ნაგულისხმეობის პრინციპით ახასიათებს ერთ-ერთი გამოსახვითი მახასიათებელი შემდეგი ორიდან: ბლოკური (block) ან ხაზსშიდა (inline).

ბლოკური ელემენტები

ბლოკური ტიპის ელემენტი ყოველთვის იწყება ახალი ხაზიდან და იკავებს მთელ ხაზს, მაგალითად <div>, <h1> - <h6>, <p>, <form>

ხაზსშიდა ელემენტები

ხაზისშიდა ელემენტი არ იწყება ახალი ხაზიდან და სიგანითაც იკავეებენ იმდენს რამდენიც აუცილებელია, მაგალითად <span>, <a>, <img>

<div> ელემენტი

ინგ: divided - გამოყოფილი; division - დაყოფა 2) განყოფილება;

<div> ელემენტი არის ერთ-ერთი ყველაზე ხშირად გამოყენებადი, ბლოკური ტიპის სექციის განმსაზღვრელი კონტეინერი. მას არ აქვს აუცილებლად მისათითებელი ატრიბუტები მაგრამ ხშირად ეთითება class და style ატრიბუტები <div style="background-color:black;color:white;padding:20px;">
   <h2>London</h2>
   <p> London is the capital city of England. It is the most populous city in the United Kingdom.</p>
</div>

<span> ელემენტი

<span> ელემენტი ხშირად გამოიყენება ტექსტის კონტეინერად გადასაქცევად, იგი არის ხაზსშიდა ტიპის სექციის განმსაზღვრელი კონტეინერი, მას არ აქვს აუცილებლად მისათითებელი ატრიბუტები მაგრამ ხშირად ეთითება class და style ატრიბუტები <h1>ჩემი <span style="color:red">სიახლის</span> სათაური</h1>

14. <iframe>

<iframe> ნიშნული გამოიყენება ვებ-გგვერდში სხვა გვერდის მოსათავსებლად. გამოყენების სინტაქსი ასეთია <iframe src="URL" height="200" width="300" style="border:none;"></iframe> src ატრიბუტი განსაზღვრავს ჩადგმული გვერდის url-ს.

<iframe> როგორც ბმულის სამიზნე

<iframe> შეიძლება გამოყენებულ იქნეს როგორც ბმულის სამიზნე. რაც ნიშნავს იმას რომ ბმულზე მითითებული href მისამართი გაიხსნება მითითებულ ფრეიმში <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

15. Javascript

ნიშნული <script> გამოიყენება კლიენტის მხარის სკრიპტის (JavaScript) განსასაზღვრავად. <script> ელემენტი შეიცავს სკრიპტებს ან უკავშირდება გარე სკრიპტს src ატრიბუტის მეშვეობით. <script src="js/scripts.js"></script>

<noscript> ნიშნული

<noscript> ნიშნულის დახმარებით ხდება ალტერნატიული შიგთავსის განსაზღვრა იმ შემთხვევაში თუ მომხმარებლის ბრაუზერი ვერ აღიქვამს კლიენტის მხარის სკრიპტებს <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

16. გზები ფაილებამდე

გზა ფაილამდე აღწერს ფაილის მდებარეობას ვებ-გვერდის საქაღალდეთა სისტემაში. ეს გზები გამოიყენება მაშინ როდესაც გვჭირდება გარე ფაილები მაგალითად სურათები, css ფაილები, javascript ფაილები და ა.შ

აბსოლიტური გზები

აბსოლიტური გზა ფაილამდე არის - ინტერნეტში განთავსებული ფაილის სრული URL-მისამართი <img src="https://www.w3schools.com/images/picture.jpg" alt="მთა">

დამოკიდებულებითი გზები

დამოკიდებულებითი გზები ფაილამდე გზას მიუთითებენ მიმდინარე გვერდიდან გამომდინარე. ამ მაგალითში გზა მიუთითებს images საქაღალდეში არსებულ ფაილამდე, საქაღალდე კი განთავსებულია გვერდის საქაღალდეების იერარქიის ძირში <img src="/images/picture.jpg" alt="მთა"> ამ მაგალითში გზა მიუთითებს images საქაღალდეში არსებულ ფაილამდე, საქაღალდე კი განთავსებულია მიმდინარე საქაღალდეში, ანუ იმ საქაღალდეში სადაც მიმდინარე გვერდია <img src="images/picture.jpg" alt="მთა"> ამ მაგალითში გზა მიუთითებს images საქაღალდეში არსებულ ფაილამდე, საქაღალდე კი განთავსებულია იერარქიულად ერთი საფეხურით ზემოთ ვიდრე მიმდინარე საქაღალდეა <img src="../images/picture.jpg" alt="მთა">

რეკომენდაცია

სასურველია გამოვიყენოთ დამოკიდებულებითი გზები, ამ დროს გვერდის მუშაობა არ საჭიროებს ძირითადი URL-დან გასვლას, ყველა ბმული იმუშავებს საერთო დომენის ფარგლებში.

17. <head> სექცია

<head> ელემენტი არის კონტეინერი სადაც მიეთითება მეტაინფორმაცია გვერდის შესახებ. იგი მოთავსებულია <html> და <body> ტეგებს შორის. HTML მეტაინფორმაციას მომხმარებლისთვის უხილავია, იგი როგორც წესი განსაზღვრავს დოკუმენტის სათაურს, ენკოდინგს, სტილებს, ბმულებს, სკრიპტებს და სხვა მეტაინფორმაციებს.

<title> ელემენტი

<title> ელემენტი განსაზღვრავს დოკუმენტის სათაურს და მისი მითითება აუცილებელია ყველა HTML/XHTML დოკუმენტში რადგან ამას დიდი მნიშვნელობა აქვს საძიებო სისტემებისათვის და არა მარტო.

<style> ელემენტი

<style> ელემენტი გამოიყენება მიმდინარე გვერდის სტილების განსასაზღვრავად.

<link> ელემენტი

<link> ელემენტი გამოიყენება გარე css ფაილებთან დასაკავშირებლად <link rel="stylesheet" href="mystyle.css">

<meta> ელემენტი

<meta> ელემენტის დახმარებით ხდება კოდირების, გვერდის აღწერის, სიტყვა-გასაღებების, გვერდია ავტორის დსა სხვა მეტაინფორმაციის განსაზღვრა, მეტაინფორმაცია არის ბრაუზერთა ინსტრუქცია გვერდის გამოსასახავად, მას აგრეთვე იყენებენ საძიებო სისტემები (სიტყვ-აგასაღებებს). <meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

<script> ელემენტი

<script> ელემენტი გამოიყენება კლიენტის მხარის სკრიპტის - javascript-ის განსასაზღვრავად. ეს მაგალითი ჩაწერს "გამარჯობა !" - ს HTML ელემენტში რომლის id="demo" <script>
   function myFunction {
     document.getElementById("demo").innerHTML = "გამარჯობა !";
   }
</script>

18. გვერდის დაგეგმარება

ხშირია რამდენიმე სვეტის შემცველი ვებ-გვერდები, გვერდის დაგეგმარებისა და განყოფილებების დასალაგებლად HTML5-ში გვხვდება ახალი ელემენტები

• <header> - განსაზღვრავს დოკუმენტის ან სექციის ქუდს
• <nav> - განსაზღვრავს კონტეინერს ნავიგაციის ბმულებისათვის
• <section> - განსაზღვრავს სექციას დოკუმენტში
• <article> - განსაზღვრავს დამოუკიდებელ, ავტონომიურ არტიკლს
• <aside> - განსაზღვრავს გვერდის შიგთავსის გვერდითა არეს
• <footer> - განსაზღვრავს გვერდის ან სექციის ძირს
• <details> - განსაზღვრავს დამატებით დეტალებს
• <summary> - განსაზღვრავს <details> ელემენტის ქუდს

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

არსებობს გვერდის დაგეგმარების ოთხი გზა, რომლებსაც აქვთ თავისი დადებითი და უარყოფითი მხარეები:

• HTML ცხრილები
• CSS float თვისება
• CSS ფრეიმვორკები
• CSS flexbox ანუ მოქნილი შიგთავსი

HTML ცხრილები

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

CSS ფრეიმვორკები

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

CSS float თვისება

CSS float ანუ მცურავი ელემენტების გამოყენება საკმაოდ ხშირია გვერდების დაგეგმარებისას. თუმცა ახასიათებს ერთი ნაკლი: ელემენტები მკაცრად მიმაგრებულია გვერდის html ნაკადთან რამაც შესაძლოა შეამციროს გვერდის მოქნილობა და ერთი ელემეტის წაშლის შემდდეგ შესაძლებელია მოხდეს ისე რომ ბევრი ელემეტისათვის დაგვჭირდეს float თვისებების მნიშვნელობების თავიდან განსაზღვრა.

CSS flexbox ანუ მოქნილი შიგთავსი

Flexbox ეს არის დაგეგმარების ახალი რეჟიმი css3-ში. მისი გამოყენება გარანტიაა იმისა რომ გვერდის ელემენტები კორექტულად გამოისახებიან ეკრანისა და ბრაუზერის ზომების შეცვლისას. მისი ნაკლი ისაა რომ IE10 და უფრო ძველი ვერსიები ვერ აღიქვამენ.

19. რეაგირებადი ვებ-დიზაინი (RWD ანუ Responsive Web Design)

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

დაწვრილებითი ინფორმაციისათვის იხილეთ CSS ცნობარი.

20. რეზერვირებული სიმბოლოები

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

შედეგი	აღწერა	სახელი	კოდი
	ცარიელი სივრცე, არა ახალი ხაზი (Non-Breaking Space)	 	 
<	ნაკლებობის ნიშანი (less than)	&lt;	&#60;
>	მეტობის ნიშანი (greater than)	&gt;	&#62;
&	ამპერსანდი	&amp;	&#38;
"	ორმაგი ბრჭყალი	&quot;	&#34;
'	ერთმაგი ბრჭყალი	&apos;	&#39;
¢	ცენტი	&cent;	&#162;
£	ფუნტი	&pound;	&#163;
¥	იენი	&yen;	&#165;
€	ევრო	&euro;	&#8364;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;

21. კოდირება

სიმბოლოთა კოდირება

ASCII (American Standard Code for Information Interchange) იყო სიმბოლოთა კოდირების პირველი სტანდარტი. მასში განსაზღვრული იყო 127 რიცხვით-ასოითი სიმბოლო როგორებიცაა ციფრები (0-9), ინგლისური ასოები (A-Z) და სპეციალური სიმბოლოები როგორებიცაა ! $ + - ( ) @ < > . ANSI (Windows-1252) იყო Windows-ის ორიგინალი კოდირება, იგი მოიცავდა 256 სხვადასხვა ენკოდინგს. ISO-8859-1 იყო ნაგულისხმევი კოდირება HTML4-სათვის. იგიც მოიცავდა 256 სხვადასხვა ენკოდინგს. როგორც ვხედავთ ორივე მათგანის შესაძლებლობები შეზღუდულია და ამიტომ HTML5-ში სიმბოლოთა კოდირება ხდება UTF-8(Unicode)-ით, იგი მოიცავს მსოფლიოში არსებულ თითქმის ყველა სიმბოლოს.

charset ატრიბუტი

იმისათვის რომ HTML გვერდი სწორად გაიხსნას ბრაუზერმა უნდა იცოდეს სიმბოლოთა რომელი ნაკრები, რომელი კოდირებაა გამოყენებული გვერდში. HTML5-ში ამის განსაზღვრა ხდება ასე <meta charset="UTF-8">

22. URL

URL არის იგივე ვებ-მისამართი, URL-მისამართი შეიძლება შედგებოდეს სიტყვებისაგან (example.com) ან მოიცავდეს ინტერნეტ-პროტოკოლს IP-ს (192.68.20.50). მომხმარებლისათვის ყველაზე ადვილი მოსახმარი რა თქმა უნდა სიტყვიერი URL-ებია.

URL - Uniform Resource Locator ანუ საინფორმაციო რესურსის მაჩვენებელი

ბრაუზერი სწორედ URL-ის მეშვეობით ითხოვს გვერდებს სერვერისაგან, URL არის დოკუმენტის ან ინფორმაციის მისამართი. მისი გამოყენების სინტაქსი ასეთია სქემა://პრეფიქსი.დომენი:პორტი/გზა/ფაილი კონკრეტული მაგალითი კი ასეთი https://www.example.com/html/index.php

• სქემა - განსაზღვრავს ინტერნეტ-სერვისის ტიპს (ყველაზე ხშირად არის http ან https)
• პრეფიქსი - განსაზღვრავს დომენის პრეფიქსს (http-სთვის არის www)
• დომენი - განსაზღვრავს ინტერნეტ დომენის სახელს (მაგ: example.ge)
• პორტი - განსაზღვრავს პორტის ნომერს ჰოსტისათვის (http-სთვის არის 80)
• გზა - განსაზღვრავს გზას სერვერზე (თუ მითითებული არაა: საიტის ძირი დირექტორია)
• ფაილი - განსაზღვრავს დოკუმენტის ან წყაროს სახელს

ხშირად გამოყენებადი სქემები

სქემა	სრული სახელი	გამოყენება
http	HyperText Transfer Protocol	იყენებს ვებ-გვერდების უმრავლესობა. დაუშიფრავი
https	Secure HyperText Transfer Protocol	იყენებენ დაცული ვებ-გვერდები. დაშიფრული
ftp	File Transfer Protocol	ფაილების გადმოწერა ან ატვირთვა
file		ფაილი კომპიუტერში

URL კოდირება

URL-მისამართის გაგზავნა, მოთხოვნა შესაძლებელია მხოლოდ ASCII სიმბოლოთა ნაკრებით. თუ URL შეიცავს ისეთ სიმბოლოებს რომლებიც არ არის ASCII-ში მაშინ URL კონვერტირდება და ასეთი სიმბოლოები იცვლე "%" ნიშნით რომელსაც მოჰყვება ტექვსმეტობითი რიცხვები. URL არ შეიძლება შეიცავდეს ცარიელ ადგილს, როგოგორც წესი ცარიელი ადგილები იცვლება "+" ნიშნით ან "%20"-ით.

23. XHTML

რა არის XHTML ?

• XHTML ანუ EXtensible HyperText Markup Language (Extensible - განვრცობადი; სხვადასხვაგვარად გასაგები, მრავალმნიშვნელოვანი).
• XHTML თითქმის იდენტურია HTM-ისა
• XHTML არის უფრო მკაცრი ენა ვიდრე HTML
• XHTML XML აპლლიკაციად განხილული HTML
• XHTML-ს აღიქვამს ყველა ძირითადი ბრაუზერი

განსხვავებები HTML-სა და XHTML-ს შორის

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

• XHTML DOCTYPE მითითება არის აუცილებელი
• აუცილებელია <html> ელემენტის xmlns ატრიბუტის მითითება
• <html>, <head>, <title>, და <body> ელემენტების განსაზღვრა არის აუცილებელი

XHTML ელემენტები

• XHTML ელემენტების ერთმანეთში ჩადგმა ხდება მკაცრად განსაზღვრული წესებით
• XHTML ელემენტები ყოველთვის უნდა დაიხუროს
• XHTML ელემენტები უნდა ჩაიწეროს პატარა ასოებით
• XHTML დოკუმენტს უნდა ჰქონდეს ერთი ძირი ელემენტი

XHTML ატრიბუტები

• ატრიბუტების დასახელებები უნდა ჩაიწეროს პატარა ასოებით
• ატრიბუტების მნიშვნელობები უნდა მოთავსდეს ბრჭყალებში
• ატრიბუტების მინიმიზაცია აკრძალულია
  <input name="name" type="checkbox" checked />
  ამ ჩანაწერის ნაცვლად უნდა მიეთითოს შემდეგნაირად
  <input name="name" type="checkbox" checked="checked" />

<!DOCTYPE ....> მითითება აუცილებელია

XHTML დოკუმენტს უნდა გააჩნდეს XHTML DOCTYPE დეკლარაცია. აუცილებელია აგრეთვე <html>, <head>, <title> და <body> ელემენტების მითითება, ხოლო <html> ელემენტს უნდა მიეთითოს xmlns ატრიბუტი. ქვემოთ მოყვანილია მაგალითი აუცილებელი მინიმუმ ტეგებით <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Title of document</title>
</head>

<body>
   შიგთავსი
</body>

</html>

ელემენტების ერთმანეთში მოთავსება

html-ში მიღებულია ასეთი ჩანაწერი <b><i>This text is bold and italic</b></i> xhtml-ში კი უნდა ჩაიწეროს აუცილებლად ასე <b><i>This text is bold and italic</i></b> ანუ ელემენტები უნდა დაიხუროს იმავე თანმიმდევრობით რა თანმიმდევრობითაც გაიხსნება.

xhtml-ში ელემენტები აუცილებლად უნდა დაიხუროს

უნდა დაიხუროს თუნდაც ისეთი ტეგები რომლებსაც საერთოდ არ გააჩნიათ დამხურავი ნაწილები ახალი ხაზზე გადასვლა <br />
ჰორიზონტალური ხაზი <hr />
სურათი <img src="happy.gif" alt="Happy face" />


როგორ გადავიყვანოთ HTML XHTM-შიL

1. დავამატოთ XHTML <!DOCTYPE> ყველა გვერდის პირველ ხაზად
2. დავამატოთ xmlns ატრიბუტი html ატრიბუტს ყველა გვერდზე
3. ყველა ელემენტი ჩავწეროთ პატარა ასოებით
4. დავხუროთ ყველა ელემენტი
5. ყველა ელემენტის ყველა ატრიბუტი ჩავწეროთ პატარა ასოებით
6. ატრიბუტის მნიშვნელობები მოვაქციოთ ბრჭყალებში

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

24. HTML ფორმები

HTML <form> ელემენტი განსაზღვრავს ფორმას, ფორმა კი გამოიყენება, შემდგომი დამუშავების მიზნით მომხმარებლის მიერ შეყვანილი ინფორმაციის შესაკრებად. <form>
   .
   ფორმის ელემენტები
   .
</form>

<input> ელემენტი

<input> ელემენტი არის ფორმის ყველაზე მნიშვნელოვანი ელემენტი. ის შეიძლება რამდენიმენაირად გამოისახოს type ატრიბუტის დახმარებით. მოვიყვანოთ ამ ატრიბუტის შესაძლო მნიშვნელობებიდან რამოდენიმეს მაგალითი

ტიპი	აღწერა
<input type="text">	განსაზღვრავს ერთხაზიან ტექსტური ტიპის ინფორმაციის შესაყვან ველს
<input type="radio">	განსაზღვრავს გადამრთველ ღილაკს (იმისათვის რათა ბევრი ვარიანტიდან ამოირჩეს ერთი მნიშვნელობა)
<input type="submit">	განსაზღვრავს გასაგზავნ ღილაკს (გამოიყენება ფორმის გასაგზავნად)

ტექსტური ველი

<input type="text"> განსაზღვრავს ერთხაზიან ველს ტექსტური ტიპის ინფორმაციის შესაყვანად. <form>
   სახელი:
   <input type="text" name="firstname">
   გვარი:
   <input type="text" name="lastname">
</form> შედეგი იქნება

სახელი:

გვარი:

გადამრთველი ღილაკები

<input type="radio"> განსაზღვრავს გადამრთველი ღილაკებს. მათი საშუალებით ხერხდება რამოდენიმე ვარიანტიდან ერთ-ერთის არჩევა <form>
   <input type="radio" name="gender" value="male" checked> მამრობითი
   <input type="radio" name="gender" value="female"> მდედრობითი
</form> შედეგი იქნება

მამრობითი
მდედრობითი

გასაგზავნი ღილაკები

<input type="submit"> განსაზღვრავს ღილაკს რომლის მეშვეობითაც ფორმაში აკრეფილი ინფორმაცია იგზავნება ფორმის დამმუშავებელთან, ფორმის დამმუშავებელი არის სერვერული სკრიპტების შემცველი ფაილი რომელიც უზრუნველყოფს მიღებული ინფორმაციის დამუშავებას. დამმუშავებლის განსაზღვრა ხდება ფორმის action ატრიბუტით. თუ action ატრიბუტი არ არის მითითებული მაშინ ინფორმაცია იგზავნება იმავე გვერდზე რომელზეც ფორმაა, იმისათვის რათა ველში აკრეფილი ინფორმაცია გაიგზავნოს, ამ ველს უნდა ჰქონდეს სახელი. სახელს განსაზღვრავს name ატრიბუტი. <form action="/action_page.php">
   სახელი:
   <input type="text" name="firstname" value="Mickey">
   გვარი:
   <input type="text" name="lastname" value="Mouse">

   <input type="submit" value="გაგზავნა">
</form> შედეგი იქნება

სახელი:

გვარი:

რა არის HTTP ?

HTTP არის აბრევიატურა - Hypertext Transfer Protocol, და შინაარსობრივად არის სერვერსა და მომხმარებელს შორის ინფორმაციის, ჰიპერტექსტის გაცვლის გზა. მისი მუშაობის პრინციპი ანუ პროტოკოლი დაფუძნებულია "მოთხოვნა/პასუხი" პრინციპზე. არსებობს მოთხოვნის გაგზავნის, ყველაზე ხშირად გამოყენებადი ორი ხერხი: GET და POST. სერვერზე მოთხოვნა იგზავნება როდესაც მომხმარებელი აწვება html ფორმის გასაგზავნ ღილაკს.

GET და POST მეთოდები

ნაგულისმეობის პრინციპით ფორმებიდან ინფორმაციის გაგზავნის მეთოდი არის GET, ამ დროს გაგზავნილი ინფორმაციის ნახვა შესაძლებელია გტვერდის URL-ში /action_page.php?firstname=Mickey&lastname=Mouse GET მეთოდით გაგზავნილი ინფორმაცია ხილვადია ყველასათვის (ცვლადთა დასახელებები და მნიშვნელობები მოთავსებულია URL-ში), GET-ს აგრეთვე აქვს გასაგზავნი ინფორმაციის მოცულობის ლიმიტი - დაახლოებით 2000 სიმბოლო, ერთის მხრივ რადგან ცვლადები მოთავსებულია URL-ში, შესაძლებელია გვერდის ჩანიშნვა (bookmark), ეს კი ზოგიერთ შემთხვევაში ხელსაყრელია. GET შეიძლება გამოვიყენოთ არასაიდუმლო ინფორმაციის გასაგზავნად, მაგრამ არამც და არამც არ შეიძლება მისი გამოყენება პაროლის ან სხვა მნიშვნელოვანი ინფორმაციების გაგზავნისას.

რაც შეეხება POST მეთოდს :

POST მეთოდით გაგზავნილი ინფორმაცია სხვებისათვის უხილავია (ყველა სახელი/მნიშვნელობა ჩადებულია HTTP მოთხოვნის ტანში), ამასთანავე ამ ინფორმაციის მოცულობა შეუზღუდავია.

მონაცემთა დაჯგუფება <fieldset> ელემენტით

<fieldset> ელემენტი გამოიყენება ერთმანეთთან დაკავშირებული მონაცემების დასაჯგუფებლად, ამ მეთოდით დაჯგუფებული ინფორმაციის სათაურს კი განსაზღვრავს <legend> ელემენტი <form action="/action_page.php">
   <fieldset>
     <legend>პერსონალური ინფორმაცია:
     სახელი:
     <input type="text" name="firstname" value="Mickey">
     გვარი:
     <input type="text" name="lastname" value="Mouse">

     <input type="submit" value="გაგზავნა">
   </fieldset>
</form> შედეგი იქნება :

პერსონალური ინფორმაცია:

სახელი:

გვარი:

25. ფორმის ელემენტები

<select> ელემენტი

<select> ელემენტი განსაზღვრავს ჩამოსაშლელ სიას, სიის ასარჩევ ელემენტებს განსაზღვრავს <option> ნიშნული :

<select name="cities">
    <option value="თბილისი">თბილისი</option>
    <option value="სოხუმი">სოხუმი</option>
    <option value="ბათუმი">ბათუმი</option>
    <option value="ცხინვალი">ცხინვალი</option>
</select>
                

შედეგი იქნება : თბილისი სოხუმი ბათუმი ცხინვალი თუ გსურს რომ რომელიმე მნიშვნელობა ავტომატურად აირჩეს, მას უნდა დავურთოთ selected ატრიბუტი : <option value="ცხინვალი" selected>ცხინვალი</option>

<textarea> ელემენტი

<textarea> ელემენტი განსაზღვრავს ინფორმაციის შესაყვან მრავალხაზიან ველს: <textarea name="message" rows="10" cols="30">
ტექსტი ...
</textarea>
შედეგი იქნება : ტექსტი ... rows ატრიბუტი განსაზღვრავს ტექსტური არის ხილვადი ხაზების რაოდენობას. cols ატრიბუტი კი განსაზღვრავს ტექსტური არის ხილვად სიგანეს. ხილვად სიგანეში და ხილვად ხაზებში იგულისხმება აკრეფილი ტექსტის ინ ნაწილი რომელიც ჰორიზონტალური და ვერტიკალური 'სქროლის' გარეშე გამოჩნდება არეში.

<button> ელემენტი

<button> ელემენტი განსაზღვრავს ღილაკებს. <button type="button" onclick="alert('გამარჯობა !')">დააჭირეთ მაუსი</button> შედეგი იქნება : დააჭირეთ მაუსი

ფორმის ელემენტები HTML5-ში

HTML5 <datalist> ელემენტი

<datalist> ელემენტი არის input და select ელემენტების შერწყმა, <input> ელემენტის list ატრიბუტი უნდა მიმართავდეს <datalist> ელემენტის id ატრიბუტს : <input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>
შედეგი იქნება :

HTML5 <output> ელემენტი

<output> ელემენტი წარმოადგენს გამოთვლის შედეგს (მაგ: სკრიპტის გამოთვლის შედეგს) <form action="/action_page.php" oninput="x.value=parseInt(a.value)">
   0<input type="range" id="a" name="a" value="50">100
   =
   <output name="x" for="a"></output>
   <br>
   <input type="submit">
</form> შედეგი იქნება :

0100 =

<meter> ელემენტი

<meter> ელემენტი ვიზუალურად განსაზღვრავს სკალარულ მაჩვენებელს ან წილად ნაწილს განსაზღვრული დიაპაზონის ფარგლებში. <meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter> შედეგი იქნება : 2 out of 10
60%

ატრიბუტი	მნიშვნელობა	აღწერა
form	form_id	განსაზღვრავს ერთ ან რამდენიმე ფორმას რომლებსაც მიეკუთვნება <meter> ელემენტი
high	რიცხვი	ატრიბუტი high განსაზღვრავს დიაპაზონს, რომელში მოხვედრილი meter ატრიბუტის მნიშვნელობა ითვლება მაღალ მაჩვენებლად.
low	რიცხვი	ატრიბუტი low განსაზღვრავს დიაპაზონს, რომელში მოხვედრილი meter ატრიბუტის მნიშვნელობა ითვლება დაბალ მაჩვენებლად.
max	რიცხვი	განსაზღვრავს <meter> ელემენტის მაქსიმალურ მნიშვნელობას
min	რიცხვი	განსაზღვრავს <meter> ელემენტის მინიმალურ მნიშვნელობას
optimum	რიცხვი	განსაზღვრავს <meter> ელემენტის ოპტიმალურ მნიშვნელობას
value	რიცხვი	განსაზღვრავს <meter> ელემენტის მიმდინარე მნიშვნელობას

<progress> ელემენტი

<progress> ელემენტი ვიზუალურად წარმოადგენს დასახული ამოცანის შესრულების პროგრესს, მაგალითად ფაილის გადმოწერის პროგრესს. <progress value="22" max="100"> შედეგი იქნება : იმისათვის რათა ამოცანის შესრულების პროგრესი სრულად ავსახოთ, <progress> ელემენტი უნდა გამოვიყენოთ Javascript-თან ერთად.

26. ფორმის ელემენტების ტიპები

<input type="password">

<input type="password"> ველი გამოიყენება პაროლის ასაკრეფად, მასში შეყვანილი ტექსტი შენიღბულია, სიმბოლოების მაგივრად ჩანს ფიფქები : <input type="password" name="psw"> შედეგი იქნება :

<input type="reset">

<input type="reset"> განსაღვრავს ღილაკს რომელიც საშუალებას გვაძლევს გავაუქმოთ ფორმის ელემენტებში აკრეფილი ინფორმაცია და ფორმა დავაბრუნოთ საწყის მდგომარეობაში.

სახელი:

გვარი:

<input type="checkbox">

<input type="checkbox"> ელემენტი მომხმარებელს საშუალებას აძლევს აირჩიოს ერთი ან მეტი ვარიანტი რამოდენიმე ჩამოთვლილი ვარიანტიდან. <form>
   <input type="checkbox" name="vehicle1" value="CSS"> CSS <br>
   <input type="checkbox" name="vehicle2" value="HTML"> HTML
</form> შედეგი იქნება :

   CSS
   HTML

HTML5 ფორმის ელემენტების ტიპები

<input type="color">

<input type="color"> ელემენტი განსაზღვრავს ფერთა პალიტრის შემცველ ველს აირჩიეთ ფერი:
<input type="color" name="favcolor">
შედეგი იქნება : აირჩიეთ ფერი:

value ატრიბუტის მეშვეობით შესაძლებელია წინასწარ ავარჩიოთ რომელიმე ფერი

<input type="date">

<input type="date"> ელემენტი განსაზღვრავს ველს რომლიდანაც შესაძლებელია თარიღის მითითება <input type="date" name="bday"> შედეგი იქნება : აგრეთვე შესაძლებელია დროის ინტერვალის შეზღუდვა min და max ატრიბუტების მეშვეობით : <form>
   აირჩიეთ თარიღი 1980-01-01-მდე:
   <input type="date" name="bday" max="1979-12-31">
   აირჩიეთ თარიღი 2000-01-01-დან:
   <input type="date" name="bday" min="2000-01-02">
</form> შედეგი იქნება :

აირჩიეთ თარიღი 1980-01-01-მდე:
აირჩიეთ თარიღი 2000-01-01-დან:

<input type="email">

<input type="email"> ელემენტი განსაზღვრავს ველს, რომელშიც უნდა აიკრიფოს მხოლოდ ელ_ფოსტის მისამართები. არასწორი მისამართის აკრეფისას მოხდება ავტომატური ვალიდაცია. <input type="email" name="email">

E-mail:

<input type="number">

<input type="number"> განსაზღვრავს ველს სადაც მხოლოდ ციფრების შეყვანაა შესაძლებელი. აგრეთვე შესაძლებელია რიცხვებზე შეზღუდვების დაწესება რიცხვი (1-დან 5-ის ჩათვლით): <input type="number" name="quantity" min="1" max="5"> შედეგი იქნება : რიცხვი (1-დან 5-ის ჩათვლით):

28. ფორმის ელემენტების ატრიბუტები

value ატრიბუტი

value ატრიბუტი განსაზღვრავს შესაყვანი ველის საწყის მნიშვნელობას <input type="text" name="firstname" value="HTML5"> შედეგი :

disabled ატრიბუტი

disabled ატრიბუტი მიუთითებს, რომ ფორმის ელემენტი გამორთულია და მასთან ვერ ვიმუშავებთ, ფორმის გაგზავნისას ამ ელემენტების მნიშვნელობები არ იგზავნება სახელი: <input type="text" name="firstname" value="John" disabled>
შედეგი იქნება : სახელი:

size ატრიბუტი

size ატრიბუტი განსაზღვრავს თუ რამდენი სიმბოლო დაეტევა ველში, თუ მითითებულია მაგალითად size="10" ეს ნიშნავს რომ ველს ექნება სიგანე რომელიც დაიტევს 10 სიმბოლოს, თუმცა ეს არ ნიშნავს რომ 10 სიმბოლოზე მეტს ვერ ავკრეფთ, უბრალოდ გამოჩნდება ბოლოს შეყვანილი სიმბოლოები და თავიდან შეყვანილები დაიმალება <input type="text" name="firstname" value="John" size="10"> შედეგი იქნება :

maxlength ატრიბუტი

maxlength ატრიბუტი განსაზღვრავს შესაყვანი ინფორმაციის სიმბოლოთა მაქსიმალურ რაოდენობას, მაგალითად ამ ველში 10 სიმბოლოზე მეტს ვერ შევიყვანთ : <input type="text" name="firstname" maxlength="10"> შედეგი იქნება :

HTML5 ატრიბუტები

autocomplete ატრიბუტი

autocomplete ატრიბუტს აქვს ორი შესაძლო მნიშვნელობა on და off ანუ ჩართული და გამორთული, თუ ატრიბუტი ჩართულია ბრაუზერი ავტომატურად ასრულებს ტექსტის შეყვანას ამ ველში მომხმარებლის მიერ უკვე აკრეფილი ინფორმაციების საფუძველზე, შესაძლებელია რომ ეს ატრიბუტი ჩავურთოთ მთლიან ფორმას და გამოვურთოთ კონკრეტულ ელემენტებს ან პირიქით : <form action="/action_page.php" autocomplete="on">
   სახელი:<input type="text" name="fname">
   გვარი: <input type="text" name="lname">
   ელ_ფოსტა: <input type="email" name="email" autocomplete="off">
   <input type="submit">
</form>

novalidate ატრიბუტი

novalidate ატრიბუტი არის <form> ელემენტის ატრიბუტი. თუ ფორმას მითითებული აქვს ეს ატრიბუტი მაშინ ინფორმაციის გაგზავნის შემდეგ არ მოხდება ამ ინფორმაციის ვალიდაცია : <form action="/action_page.php" novalidate>
   ელ_ფოსტა: <input type="email" name="user_email">
   <input type="submit">
</form>

autofocus ატრიბუტი

თუ ელემენტს მითითებული აქვს autofocus ატრიბუტი მაშინ იგი ავტომატურად ღებულობს ფოკუსს როდესაც გვერდი ჩაიტვირთება : სახელი:<input type="text" name="fname" autofocus>

form ატრიბუტი

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

მოყვანილ მაგალითში inpu ელემენტი არის id="form1" ფორმის გარეთ, თუმცა მაინც მისი საკუთრებაა :

<form action="/action_page.php" id="form1">
   სახელი: <input type="text" name="fname">
   <input type="submit" value="გაგზავნა">
</form>

გვარი: <input type="text" name="lname" form="form1">

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

height და width ატრიბუტები განსაზღვრავენ <input type="image"> ელემენტის სიგანეს და სიმაღლეს. <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

min და max ატრიბუტები

min და max ატრიბუტები განსაზღვრავენ input ელემენტის მინიმალურ და მაქსიმალურ მნიშვნელობებს, ეს ატრიბუტები მუშაობენ შემდეგი ტიპის input ელემენტებთან : number, range, date, datetime-local, month, time and week. <input type="number" name="quantity" min="1" max="5"> შედეგი იქნება :

multiple ატრიბუტი

multiple ატრიბუტი მომხმარებელს საშუალებას აძლევს დააფიქსიროს ერთზე მეტი მნიშვნელობა ერთ <input> ელემენტში, ეს ატრიბუტი მუშაობს შემდეგი ტიპის input ელემენტებთან: email და file, მოყვანილი მაგალითი საშუალებას მოგვცემს ასატვირთად ავარჩიოთ რამოდენიმე სურათი ერთდროულად : <input type="file" name="img" multiple>

pattern ატრიბუტი

pattern ატრიბუტი განსაზღვრავს რეგულარულ გამოსახულებას <input> ელემენტისათვის, ამ ელემენტში შეყვანილი ინფორმაცია გაიფილტრება აღნიშნული რეგულარული გამოსახულების მიხედვით. ატრიბუტი ეთითება შემდეგი ტიპის input ელემენტებს : text, search, url, tel, email და password. მოყვანილ შემთხვევაში შეგვიძლია ავკრიფოთ მხოლოდ სამი ასო (ციფრები და სპეციალური სიმბოლოები არა) : ქვეყნის კოდი: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="ქვეყნის კოდი სამი ასო"> შედეგი იქნება :

ქვეყნის კოდი:

placeholder ატრიბუტი

placeholder ატრიბუტი წარმოადგენს მითითებას იმის შესახებ თუ რა ტიპის ინფორმაცია უნდა შევიყვანოთ ამა თუ იმ ველში (მაგ: სავარაუდო მნიშვნელობა ან ჩაწერის ფორმატი). ეს მითითება ველში ჩანს მანამ სანამ მომხმარებელი დაიწყებს ინფორმაციის აკრეფას, ატრიბუტი მუშაობს შემდეგი ტიპის input ელემენტებთან : text, search, url, tel, email და password. <input type="text" name="fname" placeholder="სახელი"> შედეგი იქნება :

required ატრიბუტი

required ატრიბუტი მიუთითებს, რომ ველი აუცილებლად უნდა შეივსოს ფორმის გაგზავნამდე, ატრიბუტი მუშაობს შემდეგი ტიპის input ელემენტებთან : text, search, url, tel, email, password, date pickers, number, checkbox, radio და file. სახელი: <input type="text" name="usrname" required> შედეგი იქნება :

სახელი:

step ატრიბუტი

step ატრიბუტი განსაზღვრავს შესაძლო რიცხვით ინტერვალებს <input> ელემენტისათვის, მაგალითად თუ step="3", შესაძლო მნიშვნელობები იქნება -3, 0, 3, 6 და ა.შ.

ამ ატრიბუტის გამოყენება შესაძლებელია max და min ატრიბუტებთან ერთად. ატრიბუტი მუშაობს შემდეგი ტიუპის input ელემენტებთან : number, range, date, datetime-local, month, time და week.

<input type="number" name="points" step="3"> შედეგი იქნება :

readonly ატრიბუტი

readonly ატრიბუტი განსაზღვრავს უნდა იყოს თუი არა მხოლოდ წაკითხვადი input ველი ან textarea. თუ ამ ელემენტებს ეს ატრიბუტი აქვთ მითითებული მაშინ მათში რაიმეს ჩაწერა შეუძლებელია. <input type="text" name="country" value="Georgia" readonly>
შედეგი იქნება :


HTML5

1. შესავალი

DOCTYPE დეკლარაცის მითითება HTML5-ისათვის საკმაოდ ადვილია <!DOCTYPE html> აგრეთვე ადვილია კოდირების განსაზღვრა <meta charset="UTF-8">

HTML5-ის უმარტივესი სინტაქსი

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>დოკუმენტის სათაურიt</title>
</head>

<body>
  დოკუმენტის შიგთავსი......
</body>

</html>

ახალი ელემენტები HTML5-ში

HTML5-ში დამატებულია ახალი ელემენტები, სემანტიკური ელემენტები, მაგ: <header>, <footer>, <article>, <section>. ელემენტთა ატრიბუტები, მაგ: number, date, time, calendar, range. გრაფიკული ელემენტები, მაგ: <svg> და <canvas>. მულტიმედიური ელემენტები, , მაგ: <audio> და <video>.

HTML5-ში აგრეთვე შესაძლებელია საკუთარი ელემენტების დამატებაც <myElement> ჩემი ელემენტი </myElement> IE 9 და უფრო ძველი ვერსიებისათვის აუცილებელია head განყოფილებაში <script>document.createElement("myElement")</script> ინსტრუქციის მითითება.

როგორც ყოველთვის - პრობლემა Internet Explorer :/

IE8 (და უფრო ძველი ვერსიები) უგულებელჰყოფენ უცნობი ელემენტების სტილებს, უცნობი ელემენტები კი მისთვის არის მაგალითად <article>, <section>, <aside>, <nav>, <footer>. ეს პრობლემა მოაგვარა Sjoerd Visscher-მა, მან შექმნა HTML5Shiv. HTML5Shiv - ეს არის შემოვლითი JavaScript ფაილი რომლის საშუალებითაც აღარ ხდება HTML5-ის ელემენტების სტილების იგნორირება, IE-ს ზემოთ აღნიშნულ ვერსიებში. მომხმარებეკლს შეუძლია გადმოწეროს ეს ფაილი <head>
   <!--[if lt IE 9]>
     <script src="/js/html5shiv.js"></script>
   <![endif]-->
</head> ან გამოიყენოს CDN(Content delivery network ანუ შიგთავსის გავრცელების, მიღების ქსელი) ვერსია <head>
   <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/libs/html5shiv/1.1.0/html5shiv.js"></script>
   <![endif]-->
</head>

2. სემანტიკური ელემენტები

სემანტიკა - მნიშვნელობა (სიტყვისა, გამოთქმისა, გრამატიკული ფორმისა). სემანტიკური ელემენტების დასახელების უკან მოიაზრება მათი დანიშნულება, ფიზიკური არსი. სემანტიკური ელემენტის დასახელება სუფთად და მკაფიოდ აღწერს თავად ელემენტის არსს, როგორც ბრაუზერის ასევე დეველოპერისათვის. მაგალითად ელემენტები <form>, <table> და <article> დასახელებები აშკარად აღწერენ ელემენტის არსს, რასაც ვერ ვიტყვით მაგალითად <div> და <span> ელემენტებზე.

<section> ელემენტი

<section> ელემენტი განსაზღვრავს სექციას დოკუმენტში, სხვა სიტყვებით სექცია ეს არის შიგთავსის თემატური დაჯგუფება, რომელსაც , როგორც წესი, ახლავს სათაური. დოკუმენტი მაგალითად შეიძლება დაიყოს შემდეგ სექციებად : შესავალი, შიგთავსი და კონტაქტი. <section>
   <h1>ეს არის სექცია</h1>
   <p> შემთხვევითად გენერირებული ტექსტი ეხმარება დიზაინერებს და ტიპოგრაფიული ნაწარმის შემქმნელებს.</p>
</section>

<article> ელემენტი

<article>ელემენტი განსაზღვრავს დამოუკიდებელ, ავტონომიურ შიგთავსს. ამ ელემენტით შექმნილ სტატიას, პარაგრაფს უნდა გააჩნდეს საკუთარი შინაარსი და მისი წაკითხვა შესაძლებელი უნდა იყოს დოკუმენტის სხვა შიგთავსისაგან დამოუკიდებლად. ეს ელემენტი შეიძლება გამოვიყენოთ მაგალითად ფორუმზე, ბლოგში, ან საგაზეთო სტატიაში <article>
   <h1>ეს არის არტიკლი</h1>
   <p>შემთხვევითად გენერირებული ტექსტი ეხმარება დიზაინერებს და ტიპოგრაფიული ნაწარმის შემქმნელებს </p>
</article>

<header> ელემენტი

<header> ელემენტი განსაზღვრავს დოკუმენტის ან სექციის ქუდს ანუ სათაურ განყოფილებას, იგი გამოყენებულ უნდა იქნეს როგორც შიგთავსის კონტეინერი. ერთ დოკუმენტში შეიძლება გვქონდეს რამოდენიმე <header> ელემენტი. <article>
   <header>
     <h1>სათაური</h1>
     <p>პარაგრაფი</p>
   </header>
   <p>შემთხვევითად გენერირებული ტექსტი ეხმარება დიზაინერებს და ტიპოგრაფიული ნაწარმის შემქმნელებს </p>
</article>

<footer> ელემენტი

<footer> ელემენტი განსაზღვრავს დოკუმენტის ან სექციის ძირს, ანუ დამასრულებელ განყოფილებას. იგი გამოყენებულ უნდა იქნეს როგორც შიგთავსის კონტეინერი. ეს კონტეინერი, როგორც წესი, შეიცავს ინფორმაციას გვერდის ავტორის და საავტორო უფლებების შესახებ, საკონტაქტო ინფორმაციას და ა.შ ერთ დოკუმენტში შეიძლება გვქონდეს რამოდენიმე <footer>ელემენტი. <footer>
   <p>Posted by: Hege Refsnes</p>
   <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.<</p>
</footer>

<nav> ელემენტი

<nav> ელემენტი გამოიყენება ნავიგაციის ბმულების მოსათავსებლად. <nav>
   <a href="/html/">HTML</a> |
   <a href="/css/">CSS</a> |
   <a href="/js/">JavaScript</a> |
   <a href="/jquery/">jQuery</a>
</nav> შედეგი იქნება

<aside> ელემენტი

<aside> ელემენტი განსაზღვრავს განცალკევებით არსებულ შიგთავსს იმ შიგთავსში რომელშიც თავად <aside> ელემენტია მოთავსებული. ამ ელემენტის შიგთავსი შინაარსობრივად დაკავშირებულია ირგვლივ არსებულ შიგთავსთან. (Sidebar - მოკლე სტატია გაზეთში, მოთავსებული მთავარი სტატიის გვერდით, რომელიც შეიცავს დამატებით ან განმარტებით მასალას). <p>My family and I visited The Epcot center this summer.</p>

<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<figure> და <figcaption> ელემენტები

<figure> ელემენტის დანიშნულებაა დაამატოს სურათს ხილვადი ახსნა-განმარტება, ანუ ამ ელემენტში გაერთიანებულია სურათი და მისი სათაური. <img> ელემენტი განსაზღვრავს სურათს, <figcaption> ელემენტი კი სათაურს. <figure>
   <img src="images/vaja.jpg" alt="ვაჟა-ფშაველა">
   <figcaption>ვაჟა-ფშაველა</figcaption>
</figure> შედეგი იქნება

<details> და <summary> ელემენტები

<details> ელემენტი განსაზღვრავს დამატებით დეტალებს რომელიც მომხმარებელს საჭიროებისამებრ შეუძლია გამოაჩინოს ან დამალოს. <summary> ელემენტი განსაზღვრავს <details> ბლოკის ხილვად არეს, სათაურს <details>
   <summary>დააჭირეთ აქ რათა იხილოთ დეტალები</summary>
   <p> დამატებითი დეტალები</p>
</details>
შედეგი იქნება

დააჭირეთ აქ რათა იხილოთ დეტალები

დამატებითი დეტალები

<main> ელემენტი

<main> ელემენტი განსაზღვრავს გვერდის ძირითად შიგთავსს, ეს ელემენტი დოკუმენტში შეიძლება იყოს მხოლოდ ერთი და უნდა მოიცავდეს სხვა სემანტიკურ ელემენტებს (პირიქით დაუშვებელია). <main>

   <h1>Web Browsers</h1>
   <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

   <article>
     <h1>Google Chrome</h1>
     <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
   </article>

</main>

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

HTML5-მდე დეველოპერები ელემენტთა სტილების განსაზღვრისათვის იყენებდნენ საკუთარ id/class ატრიბუტებს, როგორებიცაა მაგალითად: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav და ა.შ ეს კი საძიებო სისტემებს საშუალებას არ აძლევდა სწორად და კორექტურად მოეხდინათ გვერდის შიგთავსის იდენტიფიცირება. სემანტიკური ელემენტების დახმარებით კი ეს საქმე გაადვილდა.

3. სასარგებლო რჩევები

დოკუმენტის ტიპი

ყოველთვის უნდა მივუთითოთ DOCTYPE დეკლარაცია გვერდის პირველ ხაზში <!DOCTYPE html>, რომელიც განსაზღვრავს დოკუმენტის ტიპს.

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

HTML5-ში შესაძლებელია ერთდროულად გამოვიყენოთ პატარა და დიდი ასოები მაგრამ სასურველია ელემენტების დასახელებები და მათი ატრიბუტები ჩავწეროთ პატარა ასოებით რადგან ასოთა რეგისტრის არევა არც თუ ისე კარგი პრაქტიკაა და რთულად წასაკითხსაც ხდის კოდს, გარდა ამისა გაცილებით ადვილია პატარა ასოებით წერა. აგრეთვე რეკომენდებულია, რომ ატრიბუტთა მნიშვნელობები მოვაქციოთ ბრჭყალებში რადგან მაგალითად თუ კლასის მნიშვნელობა შეიცავს რამოდენიმე სიტყვას და მას არ მოვათავსებთ ბრჭყალებში, მაშინ კლასი არ იმუშავებს. ცუდი მაგალითი: <DIV class=hover element>
   <P>ეს არის ცუდი მაგალითი</p>
</div> კარგი მაგალითი <div class="hover element">
   <p>ეს არის კარგი მაგალითი</p>
</div>

დავხუროთ ყველა ელემენტი

HTML5-ში შესაძლებელია რომ ელემენტი არ დაიხუროს, მაგრამ კოდი გაცილებით ადვილად გასარჩევი და წაკითხვადია თუ ასე არ მოვიქცევით, ცუდი მაგალითი <section>
   <p>This is a paragraph.
   <p>This is a paragraph.
</section> კარგი მაგალითი <section>
   <p>This is a paragraph.</p>
   <p>This is a paragraph.</p>
</section> სასურველია დაიხუროს ისეთი ელემენტებიც რომლებსაც საერთოდ არ გააჩნიათ დამხურავი ტეგები, მაგალითად <meta charset="utf-8" /> თუ მოსალოდნელია რომ XML პროგრამულ უზრუნველყოფას ექნება წვდომა ჩვენს დოკუმენტთან, კარგი აზრია რომ დავხუროთ ყველა ნიშნული რადგან XHTML და XML-ში ეს აუცილებელია.

სურათის ატრიბუტები

სურათს ყოველთვის უნდა მივუთითოთ "alt" ატრიბუტი, ეს ატრიბუტი მნიშვნელოვანია იმ შემთხვევაში თუ რაიმე მიზეზით სურათი არ ჩაიტვირთება. აგრეთვე უნდა განსაზღვროთ სურათის სიგანე და სიმაღლე, ეს შეამცირებს გვერდის ციმციმს ჩატვირთისას რადგან ბრაუზერს უკვე გამოყოფილი ექნება განსაზღვრული არე სურათისათვის. <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

ცარიელი ადგილები და ტოლობის ნიშანი

HTML5-ში შესაძლებელია რომ ტოლობის ნიშნის ირგვლივ გამოვიყენოთ ცარიელი ადგილები მაგრამ ეს რეკომენდებული არაა, ცუდი მაგალითი <link rel = "stylesheet" href = "styles.css"> კარგი მაგალითი <link rel="stylesheet" href="styles.css">

კოდის ხაზის სიგანე

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

გამოტოვებული ხაზები და ცარიელი ადგილები

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

შესაძლებელია თუ არა <html>, <head> და <body> ელემენტების გამოტოვება ?

HTML5-ში ესეც დასაშვებია, მაგრამ არაა სასურველი, <html> ელემენტი არის დოკუმენტის ძირი ელემენტი და რეკომენდებული ადგილი გვერდის ენის მისათითებლად <html lang="en-US"> ენის მითითება კი მნიშვნელოვანია საძიებო სისტემებისა და ე.წ "ეკრანის წამკითხავი" პროგრამებისათვის (მათ შესახებ ვისაუბრეთ "10. სურათები" თავში).
body ელემენტის მიუთითებლობამ შესაძლებელია შეცდომები გამოიწვიოს IE9 და უფრო ძველ ვერსიებში.
ნაგულისხმეობის პრინციპით, ბრაუზერი ავტომატურად თვლის <head> ელემენტად ყველაფერს რაც <body> ელემენტის წინაა.

მეტაინფორმაცია

HTML5-ში აუცილებელია (როგორც იქნა რაღაცა აუცილებელია : )) ) <title> ატრიბუტის მითითება, ის უნდა იყოს მაქსიმალურად მრავლისმეტყველი და შინაარსიანი. იმისათვის რათა საძიებო სისტემებმა სწორად მოაახდინონ გვერდის იდენტიფიკაცია. ენა და კოდირება უნდა მივუთითოთ იმდენად მაქსიმალურად ზემოთ რამდენადაც ეს შესაძლებელია <!DOCTYPE html>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>HTML5 და CSS სინტაქსი</title>
</head>

ხედვის არე

ხედვის არე არის ვებ-გვერდის ნაწილი რომელიც ხილვადია მომხმარებლისთვის.



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

ხედვის არის განსაზღვრა

HTML5-მა დეველოპერებს საშუალება მისცა ეკონტროლებინათ ხედვის არე <meta> ნიშნულის საშუალებით <meta name="viewport" content="width=device-width, initial-scale=1.0"> ხედვის არის ელემენტი <meta> წარმოადგენს ბრაუზერის ინსტრუქციას, ზომების მართვისა და გვერდის მასშტაბირების შესახებ. width=device-width ნაწილი განსაზღვრავს გვერდის სიგანეს მოწყობილობის ეკრანის ზომიდან გამომდინარე, initial-scale=1.0 ნაწილი მიუთითებს გვერდის მასშტაბირების ხარისხს მისი ჩატვირთვისას.

HTML კომენტარები

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

ფაილთა დასახელებები და ასოთა რეგისტრი

ზოგიერთი ვებ-სერვერი (Apache, Unix) არის ასოთა რეგისტრის მიმართ მგრძნობიარე როცა საქმე შეეხება ფაილების დასახელებებს: "london.jpg" არ შეიძლება გამოვიყენოთ როგორც "London.jpg". თუმცა არსებობს სერვერები რომლებიც ასოთა რეგისტრს ყურადღებას არ აქცევენ (Microsoft, IIS), აქედან გამომდინარე რეკომენდებულია ფაილთა დასახელებები ჩავწეროთ პატარა ასოებით რადგან, ერთი ტიპის სერვერიდან მეორე ტიპისაზე გადასვლისას შეიძლება დაფიქსირდეს სერიოზული შეცდომები.

ფაილთა გაფართოებები

HTML ფაილს შეიძლება ჰქონდეს .html or .htm გაფართოებები. CSS ფაილს უნდა ჰქონდეს .css გაფართოება, ხოლო JavaScript ფაილს - .js გაფართოება.

განსხვავება .htm-სა და .html-ს შორის

ამ ორ გაფართოებას შორის არანაირი განსხვავება არ არის, ორივე მათგანი, ნებისმიერ ბრაუზერში, და ნებისმიერ სერვერზე აღიქმება როგორც HTML. .htm გაფართოება გამოიყენებოდა ადრინდელ DOS (disk operating system ანუ დისკური ოპერაციული სისტემა, ოპერაციული სისტემების ოჯახი, რომელიც ორიენტებული იყო დისკური მეხსიერების გამოყენებაზე, როგორებიცაა მაგალითად მყარი დისკი, დისკეტა) სისტემებში სადაც სისტემას გააჩნდა გაფართოებათა სიდიდის შეზღუდვა 3 სიმბოლომდე. .html გაფართოება კი გამოიყენება Unix სისტემებში სადაც გაფართოების სიმბოლოთა რაოდენობაზე შეზღუდვა არ არსებობს.

ტექნიკური განსხვავება

როდესაც URL-ში არ არის განსაზღვრული ფაილის დასახელება (მაგ: https://www.example.ge/css/), სერვერი ფაილს აბრუნებს ნაგულისმეობის პრინციპით. ნაგულისმევი ფაილის ყველზე ხშირი დასახელებებია index.html, index.htm, default.html ან default.htm. თუ სერვერის კონფიგურაციაში ნაგულისმევ ფაილად მითითებულია "index.html", ფაილს უნდა დავარქვათ "index.html" და არა "index.htm.", შესაძლებელია სერვერის კონფიგურაციაში, ნაგულსმევად განვსაზღვროთ რამოდენიმე ფაილი. ასეა თუ ისე უფრო მიზანშეწონილია .html გაფართოების გამოყენება.

3. Canvas

რა არის HTML Canvas ?

HTML <canvas> გამოიყენება სკრიპტინგის დახმარებით (ჩვეულებრივ JavaScript) გრაფიკული გამოსახულებების დასახაზად. <canvas> ელემენტი განსაზღვრავს გრაფიკული გამოსახულების მხოლოდ კონტეინერს, თავად გამოსახულება კი იხატება სკრიპტის მეშვეობით. <canvas id="myCanvas" width="200" height="100"></canvas> <canvas> ელემენტს უნდა ჰქონდეს id ატრიბუტი რათა javascript-იდან დავამყაროთ წვდომა. ელემენტის ზომების განსაზღვრისათვის აუცილებელია width და height ატრიბუტების მითითება. ნაგულსმეობის პრინციპით <canvas> ელემენტს არ აქვს არც ჩარჩო და არც შიგთავსი. ჩარჩოს განსაზღვისათვის უნდა გამოვიყენოთ css <canvas id="canvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> შედეგი იქნება HTML canvas ელემენტში ხაზვისათვის უნდა გამოვიყენოთ JavaScript: <script>
   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   ctx.fillStyle = "#FF0000";
   ctx.fillRect(0,0,150,75);
</script> გავარჩიოთ კოდი:

პირველ რიგში უნდა ვიპოვოთ, დავაფიქსიროთ canvas ელემენტი.

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

შემდეგ განვსაზღვროთ სახატავი არის ფონის ფერი, ამ შემთხვევაში წითელი, fillStyle თვისების მნიშვნელობა შეიძლება იყოს CSS ფერი ან rgb. ნაგულისმეობის პრინციპით fillStyle არის შავი.

fillRect(x,y,width,height) method ხაზავს მართკუთხედს, ამ ყველაფრის შედეგი იქნება Your browser does not support the canvas element.

canvas კოორდინატები

HTML canvas წარმოადგენს ორგანზომილებიან სისტემას. ელემენტის მარცხენა ზედა კუთხის კოორდინატებია (0,0).

ზემოთ მოყვანილ მაგალითში ჩვენ გამოვიყენეთ fillRect(0,0,150,75). ეს ნიშნავს რომ ხაზვა დავიწყეთ მარცხენა ზედა კუთხიდან (0,0) და დავხაზეთ 150x75 ზომების მართკუთხედი.

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

• moveTo(x,y) - განსაზღვრავს მონაკვეთის საწყის წერტილს
• lineTo(x,y) - განსაზღვრავს მონაკვეთის ბოლო წერტილს

<canvas id="line" width="200" height="100" style="border:1px solid #d3d3d3;"> </canvas>

<script>

   var canvas = document.getElementById("line");
   var ctx = canvas.getContext("2d");
   ctx.moveTo(0,0);
   ctx.lineTo(200,100);
   ctx.stroke();

</script> შედეგი იქნება

4. SVG

რა არის SVG ?

• SVG არის აბრევიატურა - Scalable Vector Graphics ანუ მასშტაბირებადი ვექტორული გრაფიკა
• SVG გაამოიყენება ვექტორული გრაფიკის განსასაზღვრავად
• SVG განსაზღვრავს გრაფიკას XML ფორმატში
• SVG გრაფიკა არ კარგავს ხარისხს ზომების შეცვლისას
• SVG-ში შესაძლებელია ყველა ელემენტის და ატრიბუტის ანიმირება
• SVG W3C-ს სტანდარტიუ და რეკომენდაცია
• SVG ინტეგრირებადია W3C-ს სხვა სტანდარტებთან, როგორებიცაა DOM და XSL

SVG-ს უპირატესობები

სურატების სხვა ფორმატებთან მიმართებაში (მაგ: JPEG და GIF) SVG-ს აქვს შემდეგი უპირატესობები

• SVG სურატები შეიძლება შეიქმნას ან დარესაქტირდეს რომელიმე ტექსტ-ედიტორში
• SVG შეიძლება მოიძებნოს, მოხდეს მათი ინდექსირება და შეიკუმშვა
• SVG სურატები არის მასშტაბირებადი
• SVG სურატები შეიძლება დაიბეჭდოს მაღალი ხარისხით
• SVG სურატები მასშტაბირებისას არ განიცდიან დეგრადაციას
• SVG არის ღია სტანდარტი
• SVG ფაილი არის XML ფორმატის

SV-ს ძირითადი კონკურენტი არის Flash.

SVG წრე

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg> შედეგი იქნება კოდის განმარტება

• SVG სურათი იწყება <svg> ელემენტით.
• <svg> ელემენტის width და height ატრიბუტები განსაზღვრევენ SVG სურათის სიგანეს და სიმაღლეს.
• <circle> ელემენტი გამოიყენება წრეების დასახაზავად.
• cx და cy ატრიბუტები განსაზღვრავენ წრეწირის ცენტრის x and y კოორდინატებს. თუ ამ ატრიბუტებს არ მივუთითებთ ცენტრის კოორდინატები იქნება (0, 0).
• r ატრიბუტი განსაზღვრავს წრეწირის რადიუსის სიგრძეს.
• stroke და stroke-width ატრიბუტები აკონტროლებენ თუ როგორ უნდა გამოიყურებოდეს ფიგურის კონტირი. მაგალითში კონტური განისაზღვრა, შემოიფარგლა 4px სისქის მწვანე ჩარჩოთი.
• fill ატრიბუტი განსაზღვრავს წრეწირის შიგნითა არის ფონის ფერს. მაგალითში ეს ფერი არის ყვითელი.
• დამხურავი </svg> ნიშნული ხურავს SVG სურათს.

SVG მართკუთხედი

<rect> ელემენტი გამოიყენება მართკუთხედის ფორმის შესაქმნელად: <svg width="400" height="110">
   <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg> შედეგი იქნება

• <rect> ელემენტის width და height ატრიბუტები განსაზღვრევენ მართკუთხედის სიგანეს და სიმაღლეს.
• style გამოიყენება მართკუთხედის CSS თვისებების განსასაზღვრავად.
• CSS fill თვისება განსაზღვრავს მართკუთხედის ფონის ფერს.
• CSS stroke-width თვისება განსაზღვრავს width მართკუთხედის ჩარჩოს სიგანეს.
• CSS stroke თვისება განსაზღვრავს მართკუთხედის ჩარჩოს ფერს.
• x ატრიბუტი განსაზღვრავს მართკუთხედის პოზიციას x ღერძის მიმართ (მაგ x="50" მართკუთხედს ექნება 50px margin-left).
• y ატრიბუტი განსაზღვრავს მართკუთხედის პოზიციას x ღერძის მიმართ (მაგ y="20" მართკუთხედს ექნება 50px margin-top ).
• CSS fill-opacity თვისება განსაზღვრავს მართკუთხედის ფონის ფერის გაუმჭვირვალეობას (დასაშვები მნიშვნელობები: 0-დან 1-ის ჩათვლით).
• CSS stroke-opacity თვისება განსაზღვრავს მართკუთხედის ჩარჩოს გაუმჭვირვალეობას (დასაშვები მნიშვნელობები: 0-დან 1-ის ჩათვლით).
• rx და ry ატრიბუტები განსაზღვრავენ მართკუთხედის ჩარჩოს სიმრგვალეს.

SVG ელიფსი

<ellipse> ელემენტი გამოიყენება ელიფსური ფორმების განმსასაზღვრავად. <ellipse> არის <circle> ელემენტის მონათესავე ელემენტი. განსხვავება არის ის რომ <ellipse>-ს აქვს ერთმანეთისაგან განსხვავებული x and a y რადიუსები <svg height="140" width="500">
   <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg> შედეგი იქნება

• cx ატრიბუტი განსაზღვრავს ელიფსის ცენტრის x კოორდინატს.
• cy ატრიბუტი განსაზღვრავს ელიფსის ცენტრის y კოორდინატს.
• rx ატრიბუტი განსაზღვრავს ელიფსის ჰორიზონტალურ რადიუსს.
• ry ატრიბუტი განსაზღვრავს ელიფსის ვერტიკალურ რადიუსს.

SVG მონაკვეთი

<line> ელემენტი განსაზღვრავს მონაკვეთს. <svg height="210" width="500">
   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg> შედეგი იქნება

• x1 ატრიბუტი განსაზღვრავს მონაკვეთის საწყისი წერტილის x კოორდინატს.
• y1 ატრიბუტი განსაზღვრავს მონაკვეთის საწყისი წერტილის y კოორდინატს.
• x2 ატრიბუტი განსაზღვრავს მონაკვეთის ბოლო წერტილის x კოორდინატს.
• y2 ატრიბუტი განსაზღვრავს მონაკვეთის ბოლო წერტილის y კოორდინატს.

SVG მრავალკუთხედები

<polygon> გამოიყენება ისეთი გრაფიკული ელემენტების შესაქმნელად რომლებსაც აქვთ მინიმუმ სამი გვერდი. Polygon ბერძნული სიტყვაა. "Poly" ნიშნავს "ბევრს" და "gon" ნიშნავს "კუთხეს". <svg height="210" width="500">
   <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg> შედეგი იქნება

points ატრიბუტი განსაზღვრავს პოლიგონის კუთხის წერტილების x and y კოორდინატებს.

SVG მრავალწირი

<polyline> ელემენტი გამოიყენება მრავალწირის შესაქმნელად. <svg height="200" width="500">
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg> შედეგი იქნება

SVG ტექსტი

<text> ელემენტი გამოიყენება ტექსტის განსასაზღვრავად. <svg height="60" width="200">
   <text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG ტექსტი</text>
</svg> შედეგი იქნება

SVG stroke თვისება

stroke თვისება განსაზღვრავს წირის, ტექსტის ან ელემენტის შემოწერილობის ფერს. stroke-width თვისება განსაზღვრავს წირის, ტექსტის ან ელემენტის შემოწერილობის სისქეს: <svg height="80" width="300">
   <g fill="none">
     <path stroke="red" stroke-linecap="butt" stroke-width="2" d="M5 20 l215 0" />
     <path stroke="black" stroke-linecap="butt" stroke-width="4" d="M5 40 l215 0" />
     <path stroke="blue" stroke-linecap="butt" stroke-width="6" d="M5 60 l215 0" />
   </g>
</svg> შედეგი იქნება

SVG stroke-dasharray თვისება

SVG stroke-dasharray თვისება გამოიყენება წყვეტილი ხაზების დასახატად <svg height="80" width="300">
   <g fill="none" stroke="black" stroke-width="4">
     <path stroke-dasharray="5,5" d="M5 20 l215 0" />
     <path stroke-dasharray="10,10" d="M5 40 l215 0" />
     <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
   </g>
</svg> შედეგი იქნება

5. Google რუკები

Google Maps API (Application Programming Interface) საშუალებას გვაძლევს გამოვაქვეყნოთ რუკები ჩვენს ვებ-გვერდზე. API - ეს არის ინსტრუმენტების და მეთოდების ნაკრები, რომელიც გამოიყენება პროგრამული აპლიკაციების შესაქმნელად.

საბაზისო Google რუკა

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
   function myMap() {
     var mapProp= {
       center:new google.maps.LatLng(42.2989224,42.9283006),
       zoom:5,
     };
     var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
   }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script> გავარჩიოთ კოდი, პირველ რიგში საჭიროა შეიქმნას HTML ელემენტი სადაც მოთავსდება რუკა: <div id="googleMap" style="width:100%;height:400px"></div> შემდეგ უნდა შეიქმნას ფუნქცია myMap(), რომელიც განსაზღვრავს რუკის თვისებებს. mapProp განსაზღვრავს რუკის თვისებებს. center თვისება განსაზღვრავს რუკის ცენტრის კოორდინატებს (latitude-განედი და longitude-გრძედი). zoom თვისება მიუთითებს თუ რამდენად მოახლოებული უნდა იყოს რუკა. var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); ჩანაწერი აკეთებს ახალ რუკას <div> ელემენტში, რომლის id="googleMap".

Google API გასაღები

Google საშუალებას გვაძლევს გამოვიძახოთ ნებისმიერი მისი Google API უფასოდ ათასჯერ დღეში. უფასო API გასაღების მისაღებად უნდა ვეწვიოთ გვერდს: Go to https://console.developers.google.com. Google შეეცდება იპოვოს API გასაღები key პარამეტრში როდესაც API ჩაიტვირთება: <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

Google Maps - ადგილის ნიშნულები

Marker კონსტრუქტორი ქმნის ადგილის ნიშნულს. (ნიშნულის დასამატებლად უნდა მივუთითოთ მისი პოზიცია). <div id="map" style="width:100%;height:500px"></div>

<script>
function myMap() {
   var myCenter = new google.maps.LatLng(42.2989224,42.9283006);
   var mapCanvas = document.getElementById("map");
   var mapOptions = {center: myCenter, zoom: 5};
   var map = new google.maps.Map(mapCanvas, mapOptions);
   var marker = new google.maps.Marker({position:myCenter});
   marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

სურათი ადგილის ნიშნულად

შესაძლებელია მარკერის ნიშნად ჩვენთვის სასურველი სურათისა გამოყენება <div id="map" style="width:100%;height:500px"></div>

<script>
function myMap() {
   var myCenter = new google.maps.LatLng(42.2989224,42.9283006);
   var mapCanvas = document.getElementById("map");
   var mapOptions = {center: myCenter, zoom: 5};
   var map = new google.maps.Map(mapCanvas, mapOptions);
   var marker = new google.maps.Marker({
     position: myCenter,
     icon: "pinkball.png"
  });
   marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

მონიშნილი ადგილის სათაური

<div id="map" style="width:100%;height:500px"></div>

<script>
   function myMap() {
     var myCenter = new google.maps.LatLng(42.2989224,42.9283006);
     var mapCanvas = document.getElementById("map");
     var mapOptions = {center: myCenter, zoom: 5};
     var map = new google.maps.Map(mapCanvas, mapOptions);
     var marker = new google.maps.Marker({position:myCenter});
     marker.setMap(map);

     var infowindow = new google.maps.InfoWindow({
       content: "საქართველო !"
     });
     infowindow.open(map,marker);
   }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

რუკის ტიპები

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

• ROADMAP (ჩვეულებრივი 2D რუკა)
• SATELLITE (ფოტოგრაფიული რუკა)
• HYBRID (ფოტოგრაფიული რუკა + გზები და ქალაქები)
• TERRAIN (რუკა მთებით, მდინარეებით და ა.შ)

var mapProp = {
   center:new google.maps.LatLng(51.508742,-0.120850),
   zoom:5,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   // mapTypeId: google.maps.MapTypeId.SATELLITE
   // mapTypeId: google.maps.MapTypeId.HYBRID
   // mapTypeId: google.maps.MapTypeId.TERRAIN
};

6. მულტიმედია

მულტიმედიის უკან იგულისხმება ხმა, მუსიკა, ვიდეო, ფილმი, და ანიმაცია. მულტიმედია მოიცავს თითქმის ყველაფერს რაც კი მომხმარებელმა შეიძლება მოისმინოს ან დაინახოს ბრაუზერში. არსებობს მულტიმედიის საკმაოდ ბევრი ფორმატი. ფაილის ფორმატის გასარკვევი ყველაზე მარტივი გზაა - ვნახოთ ფაილის გაფართოება. მაგ: .swf, .wav, .mp3, .mp4, .mpg, .wmv, და .avi.

ვიდეო ფორმატები

ფორმატი	ფაილი	აღწერა
MPEG	.mpg .mpeg	პირველი პოპულარული ვიდეოფორმატი ინტერნეტში. აღიქვამს ყველა ბრაუზერი, მაგრამ არ აქვს HTML5-ის მხარდაჭერა.
AVI	.avi	AVI (Audio Video Interleave), შეიქმნა Microsoft-ში. ყველაზე ხშირად გამოიყენება ვიდეო კამერებში და სატელევიზუიო მოწყობილობებში. საკმაოდ კარგად მუშაობს Windows პლატფორმაზე, მაგრამ მისი გამოყენება არაეფექტურია ბრაუზერებში .
WMV	.wmv	WMV (Windows Media Video). შეიქმნა Microsoft-ში. ყველაზე ხშირად გამოიყენება ვიდეო კამერებში და სატელევიზუიო მოწყობილობებში. საკმაოდ კარგად მუშაობს Windows პლატფორმაზე, მაგრამ მისი გამოყენება არაეფექტურია ბრაუზერებში .
QuickTime	.mov	QuickTime. შემქმნელია Apple. ყველაზე ხშირად გამოიყენება ვიდეო კამერებში და სატელევიზუიო მოწყობილობებში. საკმაოდ კარგად მუშაობს Apple-ს კომპიუტერებთან, but not in web browsers. მაგრამ მისი გამოყენება არაეფექტურია ბრაუზერებში .
RealVideo	.rm .ram	RealVideo. შემქმნელია Real Media-ს მიერ დაბალი გამტარუნარიანობის პირობებში ვიდეოს ნაკადური გადაცემის უზრუნველსაყოფად. ეს ფორმატი გამოიყენება ონლაინ-ვიდეოჩვენებისათვის და ინტერნეტ-ტელევიზიებში, მაგრამ არ მუშაობს ბრაუზერებში.
Flash	.swf .flv	Flash. შემქმნელია Macromedia-ს მიერ. ბრაუზერებში მუშაობისას ხშირად ესაჭიროება დამატებითი კომპონენტი (plug-in).
Ogg	.ogg	Theora Ogg. შექმნილია Xiph.Org ფონდის მიერ.(Xiph.Org ფონდი — არაკომერციული ორგანიზაცია, რომლის მიზანიცაა მულტიმედიასთან სამუშაო, ღია, თავისუფალი პროგრამული უზრუნველყოფის შექმნა და გავრცელება). მუშაობს HTML5-თან.
WebM	.webm	WebM. შექმნილია ისეთი ვებ-გიგანტების მიერ როგორებიცაა, Mozilla, Opera, Adobe და Google. მუშაობს HTML5-თან.
MPEG-4 or MP4	.mp4	MP4. შექმნილია Moving Pictures Expert Group -ის მიერ. დაფუიძნებულია QuickTime-ზე. გამოიყენება უახლეს ვიდეო კამერებში და სატელევიზიო მოწყობილობებში. მუშაობს HTML5-თან. რეკომენდებულია YouTube-ს მიერ.

აუდიო ფორმატები

ფორმატი	ფაილი	აღწერა
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface). ძირითადი ფორმატი ელექტრო-მუსიკალური მოწყობილობებისსთვის, როგორებიცაა სინთეზატორები PC ბგერის ბარათები (PC sound cards). MIDI ფაილი არ შეიცავს ბგერებს, ის შეიცავს ციფრულ ნოტებს რომლებსაც ხმად, მისიკად გარდაქმნის ელექტრო- მოწყობილობა. კარგად მუშაობს კომპიუტერებში და მუსიკალურ მოწყობილობებში, მაგრამ არა ბრაუზერებში.
RealAudio	.rm .ram	RealAudio. შექმნილია Real Media-ს მიერ დაბალი გამტარუნარიანობის პირობებში აუდიოს გადაცემის უზრუნველსაყოფად. არ მუშაობს ბრაუზერებში.
WMA	.wma	WMA (Windows Media Audio). შემქმნელი - Microsoft. ხშირად გამოიყენება მუსიკის გამშვებ პროგრამებში . კარგად მუშაობს Windows, მაგრამ არა ბრაუზერებში.
AAC	.aac	AAC (Advanced Audio Coding). შექმნილია Apple-ს მიერ და გამოიყენება iTune-ს ნაგულისმევ ფორმატად. კარგად მუშაობს Apple-ს კომპიუტერებთან, მაგრამ არა ბრაუზერებში.
WAV	.wav	WAV. შექმნილია IBM-ის and Microsoft-ის მიერ. კარგად მუშაობს Windows, Macintosh და Linux ოპერაციულ სისტემებთან. აქვს HTML5-ის მხარდაჭერა.
Ogg	.ogg	Ogg. შექმნილია Xiph.Org ფონდის მიერ.აქვს HTML5-ის მხარდაჭერა.
MP3	.mp3	MP3 არის MPEG ფაილის ხმოვანი ნაწილი files. MP3 არის ყველაზე პოპულარული ფორმატი მუსიკის გამშვებ პროგრამებში. აქვს ყველა ბრაუზერის მხარდაჭერა.
MP4	.mp4	MP4 არის ვიდეო ფორმატი ,მაგრამ შესაძლებელია გამოვიყენოთ აუდიოსათვისაც. აქვს ყველა ბრაუზერის მხარდაჭერა.

7. ვიდეო

HTML5-მდე ბრაუზერში ვიდეოს გაშვება შესაძლებელი იყო მხოლოდ დამხმარე მოწყობილობის დახმარებით (მაგ:flash). HTML5 <video> ელემენტი განსაზღვრავს ვებ-გვერდში ვიდეოს ჩადგმის სტანდარტულ გზას. <video width="320" height="240" controls>
   <source src="video/movie.mp4" type="video/mp4">
   <source src="video/movie.ogg" type="video/ogg">
   თქვენი ბრაუზერი ვერ აღიქვამს video ელემენტს.
</video> შედეგი იქნება controls ატრიბუტი ვიდეოს ამატებს კონტროლერებს: დაკვრა, პაუზა, ხმის რეგულირება. თუ არ მივუთითებთ width და height ატრიბუტებს, შესაძლებელია გვერდი აციმციმდეს ვიდეოს ჩატვირთვამდე. <source> საშუალებას გვაძლევ მივუთითოთ ვიდეოს ალტერნატიული წყაროები, რომელთაგანაც ბრაუზერი აარჩევს თავისთვის გასაგები ფორმატის წყაროს. <video> და </video> ელემენტებს შორის მოქცეული ჩვეულებრივი ტექსტი გამოჩნდება მხოლოდ იმ ბრაუზერებში, რომლებიც ვერ აღიქვამენ <video> ელემენტს.

autoplay ატრიბუტი

ვიდეოს ავტომატურად ჩასართველად უნდა მივუთოთოთ autoplay ატრიბუტი <video width="320" height="240" controls autoplay>
   <source src="video/movie.mp4" type="video/mp4">
   <source src="video/movie.ogg" type="video/ogg">
   თქვენი ბრაუზერი ვერ აღიქვამს video ელემენტს.
</video> autoplay ატრიბუტი არ მუშაობს მობილურ მოწყობილობებში (iPad, iPhone).

8. აუდიო

HTML5-მდე ბრაუზერში აუდიო ფაილის გაშვება შესაძლებელი იყო მხოლოდ დამხმარე მოწყობილობის დახმარებით (მაგ:flash). HTML5 <audio> ელემენტი განსაზღვრავს ვებ-გვერდზე აუდიო ფაილის გაშვების სტანდარტულ გზას. <audio controls>
   <source src="audio/horse.ogg" type="audio/ogg">
   <source src="audio/horse.mp3" type="audio/mpeg">
   თქვენი ბრაუზერი ვერ აღიქვამს audio ელემენტს.
</audio> შედეგი იქნება controls ატრიბუტი ვიდეოს ამატებს კონტროლერებს: დაკვრა, პაუზა, ხმის რეგულირება. <source> საშუალებას გვაძლევ მივუთითოთ აუდიოს ალტერნატიული წყაროები, რომელთაგანაც ბრაუზერი აარჩევს თავისთვის გასაგები ფორმატის წყაროს. <video> და </video> ელემენტებს შორის მოქცეული ჩვეულებრივი ტექსტი გამოჩნდება მხოლოდ იმ ბრაუზერებში, რომლებიც ვერ აღიქვამენ <audio> ელემენტს.

9. დამხმარე აპლიკაციები (Plug-ins)

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

<object> ელემენტი

<object> ელემენტს აქვს ყველა ბრაუზერის მხარდაჭერა, იგი განსაზღვრავს HTML დოკუმენტში ჩადგმულ ობიექტს, მაგალითად: audio, video, Java applets, ActiveX, PDF, Flash. აგრეთვე შესაძლებელია ერთ დოკუმენტში მეორე დოკუმენტის ჩადგმაც. <object width="400" height="400" data="helloworld.swf"></object>

<embed> ელემენტი

<embed> ელემენტი განსაზღვრავს კონტეინერს გარე აპლიკაციისათვის. <embed width="400" height="50" src="bookmark.swf">

10. Youtube

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

YouTube ვიდეოს Id

ვიდეოს ჩართვისას YouTube გვაჩვენებს ვიდეოს id-ს (ამის მსგავსს: XGSy3_Czz8k), დოკუმენტში ვიდეოს ჩასასმელად სწორედ ეს id გამოიყენება. YouTube-ს ვიდეოს გვერდზე ჩასასმელად უნდა მივყვეთ ინსტრუქციას

• უინდა ავტვირთოთ ვიდეო YouTube-ზე.
• დავაფიქსიროთ ვიდეოს id.
• განვსაზღვროთ <iframe> ელემენტი ჩვენს ვებ-გვერდზე.
• <iframe> ელემენტს src ატრიბუტად მივუთითოთ ვიდეოს URL.
• width და height ატრიბუტების საშუალებით განვსაზღვროთ ვიდეოს გამშვების სიგანე და სიმაღლე.
• დავამატოთ სხვა სასურველი პარამეტრები (იხ. ქვემოთ)

<iframe width="560" height="315" src="https://www.youtube.com/embed/QR2k6xKArEY"></iframe> შედეგი იქნება

Autoplay

თუ გვსურს რომ გვერდის ჩატვირთვისას ვიდეო ავტომატურად ჩაირთოს, ვიდეოს URL-ში უნდა მივუთითოთ Autoplay ატრიბუტი და მისი შესაძლო ორი მნიშვნელობიდან ერთ-ერთი, ეს მნიშვნელობებია 0 და 1, თუ მივუთითებთ 1-ს ვიდეო ავტომატურად ჩაირთვება თუ არადა ჩაირთვება მაშინ როდესაც მომხმარებელი ჩართავს <iframe width="560" height="315" src="https://www.youtube.com/embed/QR2k6xKArEY?autoplay=1"></iframe>

ვიდეოს გამეორება

იმის განსასაზღვრავად დასრულების შემდეგ დაიწოს თუ არა ვიდეო თავიდა, ვიდეოს URL-ში უნდა მივუთითოთ loop ატრიბუტი და მისი შესაძლო ორი მნიშვნელობიდან ერთ-ერთი, ეს მნიშვნელობებია 0 და 1, თუ მივუთითებთ 1-ს ვიდეო დამთავრების შემდეგ ავტომატურად ჩაირთვება თავიდან, თუ არადა ჩაირთვება მხოლოდ ერთხელ <iframe width="560" height="315" src="https://www.youtube.com/embed/QR2k6xKArEY?loop=1"></iframe>

ვიდეოს კონტროლერები

ვიდეოს კონტროლერების (ხმის აწევა, დაწევა, დაპაუზება, გადახვევა) მისათითებლად ვიდეოს URL-ში უნდა მივუთითოთ loop ატრიბუტი და მისი შესაძლო ორი მნიშვნელობიდან ერთ-ერთი, ეს მნიშვნელობებია 0 და 1, თუ მივუთითებთ 1-ს ვიდეოს ექნება კონტროლერები, თუ არა და არა <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0"></iframe>