HTML/ამოსაბეჭდი ვერსია

HTML - ჰიპერტექსტური მარკირების ენა

შინაარსი

შესავალი

რა არის HTML?

HTML ითარგმნება, როგორც ჰიპერ ტექსტის მარკირების ენა (Hyper Text Markup Language).
HTML ფაილი არის პატარა მარკირებული ტეგებისგან შემდგარი ტექსტური ფაილი.
მარკირებული ტეგები ბრაუზერს გადასცემენ გვერდის ეკრანზე გამოტანის ინფორმაციას.
HTML ფაილს აქვს html, ან htm გაფართოება.
HTML ფაილის შექმნა შესაძლებელია უბრალო ტექსტური რედაქტორით.

გინდა სცადო ეს?

თუ მუშაობთ ოპერაციულ სისტემა Windows-ზე, გახსენით Notepad.
თუ მუშაობთ ოპერაციულ სისტემა Mac-ზე, გახსენით SimpleText.
OSX-ში დაიწყეთ ტექსტის რედაქტირება და შეცვალეთ შემდეგი პარამეტრები : მენიუში Format (ფორმატი) Plain text(მარტივი ტექსტი)-ის მაგივრად მონიშნეთ Rich text (რთული ტექსტი). შემდეგ გახსენით Text Edit(ტექსტის რედაქტირება) მენიუს ქვემოთ მდებარე Preferences(პარამეტრები) ფანჯარა და მონიშნეთ Ignore rich text commands in HTML files (რთული ტექსტის ბრძანებების იგნორირება HTML ფაილებში). HTML კოდი არ იმუშავებს, თუ ამ პარამეტრს არ შეცვლით.
შეიყვანეთ ტექსტი:

<html>
<head>
<title>გვერდის სათაური</title> 
</head>
<body>
ეს არის ჩემი პირველი ვებ გვერდი 
<b>black</b>
</body>
</html>

დაამახსოვრეთ ფაილი, როგორც "mypage.htm".
გახსენით თქვენი ინტერნეტ ბრაუზერი. შეასრულეთ ბრძანება File/Open (Open File)(ფაილი/გახსნა(ფაილის გახსნა)). გამოვა დიალოგური ფანჯარა. იმოქმედეთ ღილაკზე Browse (მოძიება) (ან Choose File (ფაილის არჩევა)) და მოძებნეთ თქვენს მიერ შექმნილი ფაილი - "mypage.htm" - მონიშნეთ იგი და იმოქმედეთ ღილაკზე Open(გახსნა). დიალოგურ ფანჯარაში თქვენ დაინახავთ მისამართს, მაგალითად, "C:\MyDocuments\mypage.htm". იმოქმედეთ ღილაკზე “OK” და ბრაუზერი ეკრანზე გამოიტანს თქვენს გვერდს.

მაგალითის ახსნა

თქვენს HTML დოკუმენტში პირველი ტეგი არის <html>. ეს ტეგი თქვენს ბრაუზერს აწვდის ინფორმაციას HTML დოკუმენტის დაწყების შესახებ. ბოლო ტეგი დოკუმენტში არის </html>. ეს ტეგი თქვენს ბრაუზერს აწვდის ინფორმაციას HTML დოკუმენტის დასრულების შესახებ.
ტექსტი ტეგებს შორის <head> და </head> არის თავსართის ინფორმაცია. თავსართის ინფორმაცია არ გამოისახება ბრაუზერის ფანჯარაში.
ტექსტი ტეგებს შორის <title> და </title> არის თქვენი დოკუმენტის სათაური. ეს სათაური გამოისახება ბრაუზერის სათაურების პანელზე.
ტექსტი ტეგებს შორის <body> და </body> გამოისახება ბრაუზერის ფანჯარაში.
ტექსტი ტეგებს შორის <b> და </b> ბრაუზერის ფანჯარაში გამოისახება გამუქებულად.

HTM, თუ HTML გაფართოება?

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

უფრო ახალ პროგრამებთან რეკომენდირებულია გამოიყენოთ .html გაფართოება.

შენიშვნა HTML რედაქტორებზე

მარკირებული ტეგების წერის მაგივრად თქვენ შეგიძლიათ HTML ფაილის რედაქტირება FrontPage, ან Dreamweaver-ის მსგავსად, WYSIWYG (what you see is what you get (რასაც ხედავ არის ის, რასაც იღებ))-ის დახმარებით.
თუ გსურთ იყოთ პროფესიონალი ვებ პროგრამისტი, მკაცრად რეკომენდირებულია გამოიყენოთ მარტივი ტექსტის რედაქტორები.

ხშირი კითხვები

მას შემდეგ რაც HTML ფაილი დავარედაქტირე, არ შემიძლია ჩემ ბრაუზერში ვნახო რეზულტატები. რატომ?
დარწმუნდით რომ ფაილი დაამახსოვრეთ სათანადო სახელითა და გაფართოვებით, "c:\mypage.htm" -ის მსგავსად. ასევე დარწმუნდით რომ ბრაუზერში ხსნით თქვენთვის საჭირო ფაილს.
შევეცადე დამერედაქტირებინა HTML ფაილი, მაგრამ ბრაუზერი არ მიჩვენებს ცვლილებებს. რატომ?
ბრაუზერი თქვენს გვერდს ინახავს ბუფერში, ასე რომ ის არ წაიკითხავს მას ორჯერ. როდესაც თქვენ ცვლით გვერდს, ბრაუზერმა არ იცის ამის შესახებ. გამოიყენეთ ბრაუზერის ღილაკი refresh/reload (განახლება), რათა შეატყობინოთ მას ფაილის შეცვლის შესახებ.
რა ბრაუზერი გამოვიყენო?
თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი ბრაუზერი, როგორიცაა Internet Explorer, Mozilla, Netscape, Opera და ა.შ. ზოგჯერ, ზოგიერთი მაგალითი მოითხოვს ბრაუზერის ბოლო ვერსიას.
ვთქვათ ჩემი კომპიუტერი მუშაობს ოპერაციულ სისტემაზე Mac. ამ შემთხვევაში რა ვიმოქმედო?
თქვენ შეგიძლიათ გააკეთოთ ყველაფერი ნებისმიერ ოპერაციულ სისტემაზე, მაგალითად Mac-ზე.

HTML-ის ელემენტები

HTML-ის ტეგები

HTML ტეგები გამოიყენებიან HTML ელემენტების მარკირებისათვის;
HTML ტეგები გარშემორტყმულნი არიან ორი სიმბოლოთი - < და >;
ტეგების გარშემომრტყმელ სიმბოლოებს ეწოდებათ კუთხური ფრჩხილები;
HTML ტეგები წარმოადგენენ წყვილებს, მაგალითად, <b> და </b>;
თითოუელი წყვილის პირველი ტეგი არის საწყისი ტეგი, ხოლო მეორე სასრული ტეგი;
საწყის და სასრულ ტეგებს შორის მოთავსებულ ტექსტს ეწოდება ელემენტის შიგთავსი;
HTML ტეგებში არ აქვს მნიშვნელობა ისინი პატარა ასოებით დაიწერებიან, თუ დიდით, მაგალითად <b> ტეგი იგევეა, რაც <B> ტეგი.

HTML-ის ელემენტები

გაიხსენეთ პირველი HTML მაგალითი:

<html>
<head>
<title>გვერდის სათაური</title>
</head>
<body>
ეს არის ჩემი პირველი ვებ გვერდი
<b>ეს ტექსტი არის მუქი</b>
</body>
</html>

ეს არის HTML-ის ელემენტი :
<b>ეს ტექსტი არის მუქი</b>

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

<body>
ეს არის ჩემი პირველი ვებ გვერდი
<b>ეს ტექსტი არის მუქი</b>
</body>

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

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

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

თარგი:გასწორება თარგი:უწყარო== ტეგების თვისებები ==

ტეგებს შეუძლიათ ქონდეთ თვისებები. ტეგების თვისებები უზრუნველყოფენ HTML-ის ელემენტების დამატებით ინფორმაციებს.
მიმდინარე ტეგი საზღვრავს HTML ცხრილს : <table>. დამატებული საზღვრების თვისებებით, თქვენ შეგიძლიათ ბრაუზერს გადასცეთ ინფორმაცია, რომ შექმნილ ცხრილს არ ექნება საზღვრები : <table border="0">.
თვისებები იწერებიან წყვილად, მაგალითად, name="value".
თვისებები ყოველთვის განისაზღვრებიან HTML-ის ელემენტის დაწყებით ტეგში.

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

თვისებების მნიშვნელობები ყოველთვის ისმებიან ციტატაში. ბრჭყალებში ჩასმული მნიშვნელობები არიან უფრო მეტად საერთონი, მაგრამ აპოსტროფებში ჩასმული მნიშვნელობებიც აგრეთვე დასაშვებია.
ზოგიერთ იშვიათ სიტუაციებში, მაგალითად, როდესაც მნიშვნელობა თავისთავად შეიცავს ციტატას, აუცილებელია გამოვიყენოთ აპოსტროფები :
name='John "ShotGun" Nelson'

ბაზური HTML ტეგები

სცადე შენით - მაგალითები

ეს მაგალითი არის ძალიან უბრალო HTML მაგალითი, HTML ტეგების მინიმუმით. ეს არის დემონსტრაცია იმისა თუ როგორ გამოისახება სხეულის ელემენტში ჩასმული ტექსტი.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

<html>
<body>
ბრაუზერზე გამოსახულია სხეულის ელემენტის შიგთავსი
</body>
</html>

ეს მაგალითი აკეთებს იმის დემონსტარციას, თუ როგორ გამოისახება ბრაუზერში პარაგრაფ ელემენტში ჩასმული ტექსტი.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_paragraphs1

<html>
<body>
<p>ეს არის პარაგრაფი.</p>
<p>ეს არის პარაგრაფი.</p>
<p>ეს არის პარაგრაფი.</p>
<p>პარაგრაფის ელემენტები გამოისახებიან p  ტეგით.</p> 
</body>
</html>

სათაურები

სათაურები განისაზღვრებიან <h1>-დან <h6>-მდე ტეგებით. <h1> განსაზღვრავს ყველაზე დიდ სათაურს. <h6> განსაზღვრავს ყველაზე პატარა სათაურს.

<h1>ეს არის სათაური</h1>
<h2>ეს არის სათაური</h2>
<h3>ეს არის სათაური</h3>
<h4>ეს არის სათაური</h4>
<h5>ეს არის სათაური</h5>
<h6>ეს არის სათაური</h6>

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

პარაგრაფები

პარაგრაფები განსაზღვრულნი არიან <p> ტეგით.

<p>ეს არის პარაგრაფი</p>
<p>ეს არის სხვა პარაგრაფი</p>

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

ხაზის გაწყვეტა

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

<p>ეს <br> არის პარა<br>გრაფი ხაზის გაწყვეტით</p>

<br> ტეგი არის ცარიელი ტეგი. მას არ აქვს სასრული ტეგი.

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

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

<!-- ეს არის კომენტარი -->

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

ბაზური ჩანაწერები - გამოყენებადი წვრილმანები

როდესაც წერთ HTML ტექტს, თქვენ დარწმუნებული ვერასდროს იქნებით, თუ როგორ გამოისახება ტექსტი სხვადასხვა ბრაუზერებში. ზოგიერთს აქვს დიდი მონიტორი, ზოგიერთს პატარა. ტექსტი ყოველთვის გარდაიქმნება ეკრანის ზომის შეცვლისას. არასდროს ჩაამატოთ ცარიელი ხაზები, სიცარიელეები სიტყვებს შორის და ა.შ.
HTML შეკვეცავს სიცარიელეებს სიტყვებს შორის. სიცარიელის ნებისმიერი რაოდენობა ითვლება ერთად. ზოგიერთი დამატებითი ინფორმაცია : HTML-ში ახალი ხაზი ითვლება ერთ სიცარიელედ.
ცარიელი სტრიქონების ჩასმისათვის ცარიელი პარაგრაფების <p> გამოყენება ცუდი აზრია. გამოიყენეთ <br> ტეგი. მაგრამ არ გამოიყენოთ <br> ტეგი სიების გასაკეთებლად.
ალბათ გაგიგიათ რომ პარაგრაფის დაწერა შესაძლებელია ტეგის დახურვის გარეშე </p>. არ დაიჯეროთ ეს.
HTML ავტომატურად დაამატებს დამატებით ცარიელ სტრიქონებს ზოგიერთ ელემენტამდე და ელემენტის შემდეგ, როგორც პარაგრაფამდე და პარაგრაფის შემდეგ, ან სათაურამდე და სათაურის შემდეგ.
ჰორიზონტალური ხაზის გასასმელად შეგიძლიათ გამოიყენოთ ტეგი <hr>.

ბაზური HTML ტეგები

ცხრილის სახელი

ტეგი	აღწერა
<html>	საზღვრავს HTML დოკუმენტს
<body>	საზღვრავს დოკუმენტის სხეულს
<h1>-დან <h6>-მდე	საზღვრავს 6 ტიპის სათაურს
<p>	საზღვრავს აბზაცს
<br>	წყვიტავს ხაზს
<hr>	ამატებს ჰორიზონტალურ ხაზს
<!-->	საზღვრავს კომენტარებს

HTML-ის ფორმატირება

როგორ ვნახოთ HTML წყარო

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

”ეი! როგორ გააკეთეს ეს?”.

ამ კითხვაზე პასუხის გასაცემად იმოქმედეთ მთავარი მენიუს VIEW(ხედი) მენიუზე და მონიშნეთ SOURCE(წყარო), ან PAGE SOURCE(გვერდის წყარო). ამის შემდეგ გაიხსნება ფანჯარა, სადაც ნაჩვენები იქნება გვერდის HTML კოდი.

ტექსტის ფორმატირების ტეგები

ტექსტის ფორმატირების ტეგები

ტეგი	აღწერა
<b>	საზღვრავს გამუქებულ ტექსტს
<big>	საზღვრავს დიდ ტექსტს
<em>	საზღვრავს ხაზგასმულ ტექსტს
<i>	საზღვრავს დახრილ ტექსტს
<small>	საზღვრავს პატარა ტექსტს
<strong>	საზღვრავს ძლიერ ტექსტს
<sub>	საზღვრავს ხელმოწერილ ტექსტს
<sup>	საზღვრავს ტექსტის დაწერას ჩვეულებრივზე დაბლა
<ins>	საზღვრავს ჩასმულ ტექსტს
<del>	საზღვრავს წაშლილ ტექსტს
<s>	უარყოფითი. გამოიყენეთ <del>-ის ნაცვლად
strike	უარყოფითი. გამოიყენეთ <del>-ის ნაცვლად
<u>	უარყოფითი. გამოიყენეთ სტილების ნაცვლად

”კომპიუტერული პროდუქციის” ტეგები

”კომპიუტერული პროდუქციის” ტეგები

ტეგი	აღწერა
<code>	საზღვრავს კომპიუტერული კოდის ტექსტს
<kbd>	საზღვრავს კლავიატურის ტექსტს
<samp>	საზღვრავს უბრალო კომპიუტერულ კოდს
<tt>	საზღვრავს ტელეტიპის ტექტს
<var>	აღწერს ცვლადებს
<pre>	საზღვრავს წინაფორმატირების ტექსტს
<listing>	უარყოფითი. გამოიყენეთ <pre>-ს ნაცვლად
<plaintext>	უარყოფითი. გამოიყენეთ <pre>-ს ნაცვლად
<xmp>	უარყოფითი. გამოიყენეთ <pre>-ს ნაცვლად

ციტირების, ციტატების და განმარტებების ტეგები

ციტირების, ციტატების და განმარტებების

ტეგები

ტეგი	აღწერა
<abbr>	განსაზღვრავს აბრევიატურას
<acronym>	განსაზღვრავს აკრონიმს
<address>	განსაზღვრავს მისამართის ელემენტს
<bdo>	განსაზღვრავს ტექსტის მიმართულებას
<blockquote>	განსაზღვრავს გრძელ ციტატებს
<q>	განსაზღვრავს მოკლე ციტატებს
<cite>	განსაზღვრავს ციტირებას
<dfn>	განსაზღვრავს განმარტების ტერმინებს

HTML სიმბოლოების ხასიათი

HTML-ში ზოგიერთ სიმბოლოს აქვს სპეციალური მნიშვნელობა, როგორც ნაკლებობის ნიშანი (<), რომლიც განსაზღვრავს HTML-ში ტეგის დაწყებას. თუ გსურთ, რომ ბრაუზერმა ეკრანზე გამოსახოს ეს სიმბოლოები, მაშინ სიმბოლოების აღწერა უნდა ჩასვათ HTML წყაროში.
სიმბოლოების აღწერას აქვს სამი ნაწილი : ამპერსანდი (&), აღწერის სახელი და აღწერის რიცხვი. სიმბოლოების აღწერა სრულდება ; სიმბოლოთი. იმისათვის რომ HTML დოკუმენტში გამოისახოს ნაკლებობის ნიშანი, უნდა დაწეროთ : & l t ; ან & # 6 0 ;
რიცხვების ნაცვლად სახელების გამოყენების უპირატესობა მისი ადვილად დამახხსოვრების საშუალებაა. არახელსაყრელია ის, რომ ყველა ბრაუზერი არ უზრუნველყოფს სახელების აღწერას, მაშინ როდესაც რიცხვების აღწერის უზრუნველყოფა ძალიან კარგია, თითქმის ყველა ბრაუზერში.
შენიშვნა!
აღწერები არიან მთავრულად აქტიურნი.

გაუწყვეტელი სივრცე

HTML-ში ყველაზე გამოყენებადი სიმბოლოების აღწერა არის გაუწყვეტელი სივრცე.
ჩვეულებრივ HTML ამცირებს სივრცეს ტექსტში. თუ ტექსტში ჩასვავთ 10 ცარიელ სივრცეს HTML წაშლის 9-ს. იმისათვის რომ დაამატოთ სივრცე თქვენს ტექსტში გამოიყენეთ & n b s p ; სიმბოლოს აღწერა.

ყველაზე ხშირად გამოყენებადი სიმბოლოების აღწერა

ყველაზე ხშირად გამოყენებადი სიმბოლოების აღწერა

რეზულტატი	აღწერა	აღწერის სახელი	აღწერის რიცხვი
	გაუწყვეტელი ხაზი	& n b s p ;	& # 1 6 0 ;
<	ნაკლებობის ნიშანი	& l t ;	& # 6 0 ;
>	მეტობის ნიშანი	& g t ;	& # 6 2 ;
&	ამპერსანტი	& a m p ;	& # 3 8 ;
"	ბრჭყალები	& q u o t ;	& # 3 4 ;
'	აპოსტროფი	& a p o s ;	& # 3 9 ;

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

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

რეზულტატი	აღწერა	აღწერის სახელი	აღწერის რიცხვი
¢	ცენტი	& c e n t ;	& # 1 6 2 ;
£	ფუნტი	& p o u n d ;	& # 1 6 3 ;
¥	იენი	& y e n ;	& # 1 6 5 ;
§	პარაგრაფი	& s e c t ;	& # 1 6 7 ;
©	ლიცენზია	& c o p y ;	& # 1 6 9 ;
®	რეგისტრირებული	& r e g ;	& # 1 7 4 ;
×	გამრავლება	& t i m e s ;	& # 2 1 5 ;
÷	გაყოფა	& d i v i d e ;	& # 2 4 7 ;

HTML ბმულები

მიბმული ტეგები და Href თვისებები

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

<a href="url">ეკრანზე გამოსატანი ტექსტი</a>

<a> ტეგი გამოყენებულია მიბმის ბმულის გასაკეთებლად, href თვისება გამოყენებულია მისამართის მითითებისთვის, მიბმის საწყის და სასრულ ტეგებს შორის განთავსებული სიტყვები ეკრანზე გამოისახება, როგორც ჰიპერბმული.

ეს მიბმა აღწერს ვიკიწიგნების მისამართს:

<a href="http://ka.wikibooks.org/">ვიკიწიგნები</a>

ბრაუზერში მას ექნება სახე :

ვიკიწიგნები

სამიზნე ატრიბუტები

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

<a href="http://ka.wikipedia.org/"
target="_blank">ვიკიპედია</a>

მიბმული ტეგი და სახელის ატრიბუტი

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

<a name="label">Text to be displayed</a>

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

<a name="tips">Useful Tips Section</a>

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

<a href="http://ka.wikibooks.org/wiki/HTML/HTML_%E1%83%91%E1%83%9B%E1%83
%A3%E1%83%9A%E1%83%94%E1%83%91%E1%83%98#.E1.83.A1.E1.83.90.E1.83.9B.E1.83
.98.E1.83.96.E1.83.9C.E1.83.94_.E1.83.90.E1.83.A2.E1.83.A0.E1.83.98.E1.83.91.E1.83.A3.E1.83
.A2.E1.83.94.E1.83.91.E1.83.98#მიბმული ტეგები და Href თვისებები">გადახტი მითითებულ ნაწილში</a>

ბაზური ჩანაწერები - გამოყენებადი წვრილმანები

ყოველთვის დაამატეთ სლეში ბმულის ბოლოში. თუკი თქვენი ბმული ასეთია: href="http://ka.wikipedia.org/wiki/HTML", სერვერზე შეიქმნება ორი HTTP მოთხოვნა, იმიტომ რომ, სერვერი ავტომატურად დაამატებს ბმულის ბოლოში სლეშს და შექმნის ახალ მოთხოვნას:
href=”http://ka.wikipedia.org/wiki/HTML/ ”.
დასახელებული მიბმები ხშირად გამოიყენებიან დიდი დოკუმენტის ცხრილებში. დოკუმენტის შიგნით თითოეული სიმბოლო გადაცემულია დასახელებულ მიბმაზე და ამ მიბმის თითოეულ ბმულს გადაყავხარ დოკუმენტის თავში.
თუ ბრაუზერი ვერ პოულობს დასახელებულ მიბმას, მაშინ ის ზუსტად განისაზღვრა და გადავიდა დოკუმენტის თავში. შეცდომები არ ხდება.

HTML ბლოკები

ბლოკები

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

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

ბლოკების ნაკრების ტეგები

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

ბლოკის ტეგი

<frame> ტეგი განსაზღვრავს HTML დოკუმეტში ბლოკების სათითაოდ ჩადებას.

მაგალითში მოყვანილია ბლოკების ნაკრები ორი სვეტით. პირველი სვეტი იკავებს ფანჯრის 25%-ს, ხოლო მეორე 75%-ს. HTML დოკუმენტი "frame_a.htm" ჩადებულია პირველ ბლოკში, ხოლო "frame_b.htm" მეორეში :

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

ბაზური ჩანაწერები - გამოყენებადი წვრილმანები

თუ ბლოკს აქვს საზღვარი, მაშინ მომხმარებელს შეუძლია ბლოკის ზომის შეცვლა, საზღვრის გადაადგილებით. იმისათვის რომ მომხმარებელს არ შეეძლოს ამის გაკეთება, შეგიძლიათ ჩაამატოთ noresize="noresize" - <frame> ტეგში.
ჩაამატეთ <noframes> ტეგი ბრაუზერებისათვის, რომლებიც არ უზრუნველყოფენ ბლოკებს.
მნიშვნელოვანი: თქვენ არ შეგიძლიათ გამოიყენოთ <body></body> ტეგი <frameset></frameset> ტეგთან ერთად! თუ თქვენ დაამატებთ <noframes> ტეგს, რომელიც შეიცავს ტექსტს ბრაუზერისთვის, მაშინ ის არ უზრუნველოყფს ბლოკებს, და თქვენ გექნებათ გარშემორტყმული ტექსტი <body></body> ტეგში!

ბლოკის ტეგები

ბლოკის ტეგები

ტეგი	აღწერა
<frameset>	განსაზღვრავს ბლოკების დასმას
<frame>	განსაზღვრავს ბლოკს
<noframes>	განსაზღვრავს ბლოკებს ბრაუზერებისათვის, რომლებიც არ უზრუნველყოფენ ბლოკებს
<iframe>	განსაზღვრავს ჩასმულ ბლოკებს

HTML ცხრილები

ცხრილები

ცხრილები განისაზღვრებიან <table> ტეგით. ცხრილები დაყოფილია სტრიქონებად (<tr> ტეგით) და თითოეული სტრიქონი დაყოფილია სვეტებად (<td> ტეგით). Td ნიშნავს table data(ცხრილის მონაცემები), რომელიც არის ინფორმაცია უჯრედზე. უჯრედის ინფორმაცია შეიძლება შეიცავდეს ტექსტს, ცხრილებს, სურათებს, პარაგრაფებს, ფორმებს, ჰორიზონტალურ ხაზებს, ცხრილებს და ა.შ.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

ცხრილები და საზღვრის ატრიბუტები

თუ არ განსაზღვრავთ საზღვრის ატრიბუტს, ცხრილი გამოისახება საზღვრების გარეშე. ზოგჯერ ეს გამოყენებადია, მაგრამ უმეტეს შემთხვევაში საჭიროა საზღვრები.
იმისათვის რომ ცხრილი გამოისახოს საზღვრებით, უნდა გამოიყენოთ საზღვრის ატრიბუტები:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

სათაურები ცხრილებში

სათაურები ცხრილებში განსაზღვრულნი არიან <th> ტეგით.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

ცარიელი უჯრები ცხრილებში

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

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

ცხრილის ცარიელი უჯრის საზღვრები გამოისახებიან მხოლოდ Mozilla Firefox-ში.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>

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

<thead>,<tbody> და <tfoot> ელემენტები იშვიათად გამოიყენებიან, ბრაუზერის ცუდად უზრუნველყოფის გამო. ეს შეიცვალა XHTML-ის ახალ ვერსიაში.

ცხრილის ტეგები

ცხრილის ტეგები

ტეგი	აღწერა
<table>	განსაზღვრავს ცხრილს
<th>	განსაზღვრავს ცხრილის სათაურს
<tr>	განსაზღვრავს ცხრილის სტრიქონს
<td>	განსაზღვრავს ცხრილის უჯრედს
<caption>	განსაზღვრავს ცხრილის ტექსტს
<colgroup>	განსაზღვრავს ცხრილის სვეტების ჯგუფს
<col>	განსაზღვრავს ატრიბუტების მნიშვნელობებს ცხრილშიერთი, ან მეტი სვეტისათვის
<thead>	განსაზღვრავს ცხრილის თავს
<tbody>	განსაზღვრავს სხეულს
<tfoot>	განსაზღვრავს ბოლოს

HTML სიები

უწესრიგო სიები

უწესრიგო სიები არის ელემენტების სიები. ელემენტების სია მარკირებულია ნიშნულებით (ტიპიურად პატარა შავი წრეებით).
უწესრიგო სია იწყება <ul> ტეგით. თითოეული სიის ელემენტი იწყება <li> ტეგით.

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

სია ბრაუზერში გამოისახება ასე:
• Coffee
• Milk
სიის ელემენტებში შეგიძლიათ ჩადოთ პარამეტრები, ხაზის წყვეტები, სურათები, ბმულები, სხვა სიები და ა.შ.

წესრიგიანი სიები

წესრიგიანი სიები აგრეთვე არიან ელემენტების სიები. ელემენტების სიები მარკირებულია რიცხვებით.
წესრიგიანი სია იწყება <ol> ტეგით. სიის ყოველი ელემენტი იწყება <li> ტეგით.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

სიას ბრაუზერში ექნება ასეთი სახე :
1.Coffee
2.Milk
წესრიგიან სიებში შეგიძლიათ ჩადოთ პარაგრაფები, ხაზის წყვეტები, სურათები, ბმულები, სხვა სიები და ა.შ.

განმარტებული სიები

განმარტებული სიები არ არიან ელემენტების სიები. ეს არის ელემენტების და ტერმინის ახსნის სია.
განმარტებული სიები იწყება <dl> ტეგით. სიის თითოეული ელემენტი იწყება <dt> ტეგით. სიის თითოეული ტერმინის ახსნა იწყება <dd> ტეგით.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

სიას ბრაუზერში ექნება ასეთი სახე :
Coffee
....Black hot drink
Milk
....White cold drink

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

სიის ტეგები

სიის ტეგები

ტეგი	აღწერა
<ol>	განსაზღვრავს წესრიგიან სიას
<ul>	განსაზღვრავს უწესრიგო სიას
<li>	განსაზღვრავს სიის ელემენტს
<dl>	განსაზღვრავს განმარტებულ სიას
<dt>	განსაზღვრავს ახსნილ ტერმინს
<dd>	განსაზღვრავს განმარტების აღწერას
<dir>	უარყოფითი. გამოიყენება -ის ნაცვლად
<menu>	უარყოფითი. გამოიყენება -ის ნაცვლად

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

ფორმები

ფორმა არის ვებგვერდის სახე, რომელიც შეიცავს მომხმარებლის სისტემასთან დიალოგის ელემენტებს.
ჩვეულებრივი დიალოგური ფანჯრების მსგავსად, ფორმაშიც არსებობს ელემენტების რამოდენიმე ტიპი, რომელიც მომხმარებელს ფორმაში სხვადასხვაგვარი ინფორმაციის შეტანის საშუალებას აძლევს.
ფორმა განისაზღვრება <form> ტეგით.

<form>
  <input>
  <input>
</form>

მითითებები

ფორმაში ყველაზე ხშირად საჭიროა ტეგი <input>. ამ ტეგით მოყვანილი ელემენტის ტიპი განისაზღვრება სპეციალური ატრიბუტით type.
ტექსტური ველი
ტექსტური ველები გამოიყენება მაშინ, როცა მომხმარებელს სურს ფორმაში შეიყვანოს ასოები, რიცხვები და ა.შ. მისი ტიპიურე ფორმაა მართკუთხედი

<form>
First name: 
<input type="text" name="firstname">
<br>
Last name: 
<input type="text" name="lastname">
</form>

ბრაუზერების უმეტესობა ფორმაში უშვებენ მხოლოდ ოცამდე ტექსტურ ველს.

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

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

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

<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" />
</form>

ფორმის ქმედების ატრიბუტები და მითითების ღილაკი

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

<form name="input" action="html_form_action.asp"
method="get">
Username: 
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

ფორმის ტეგები

ფორმის ტეგები

ტეგი	აღწერა
<form>	განსაზღვრავს ფორმა იუზერის მითითებისათვის
<input>	განსაზღვრავს ტექსტის ველებს
<textarea>	განსაზღვრავს ტექსტის სივრცეებს
<label>	განსაზღვრავს იარლიყს კონტროლზე
<fieldset>	განსაზღვრავს ველის დასმას
<legend>	განსაზღვრავს სათაურებს დასმული ველებისთვის
<select>	განსაზღვრავს ჩამოშლად მენიუს
<optgroup>	განსაზღვრავს პარამეტრების ჯგუფს
<option>	პარამეტრებს ჩამოსაშლელე მენიუში
<button>	განსაზღვრავს ღილაკს
<isindex>	უარყოფითი. გამოიყენება <input>-ის ნაცვლად

HTML სურათები

სურათის ტეგი და Src ატრიბუტი

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

<img src="url">

URL ნიშნავს ადგილს, სადაც სურათია შენახული. სურათი სახელად “Hyper Text Markup Language” მდებარეობს wikibooks/ka/thumb/e/ee დირექტორიაში საიტზე http://ka.wikibooks.org/ და მისი მისამართია : http://upload.wikimedia.org/wikibooks/ka/thumb/e/ee/Hyper_Text_Markup_Language.png/250px-Hyper_Text_Markup_Language.png
ბრაუზერი სურათს დებს იქ, სადაც ტეგია მითითებული. თუ თქვენ ჩადებთ სურათის ტეგს ორ პარამეტრეს შორის, მაშინ ბრაუზერი აჩვენებს ჯერ პირველ ტეგს, მერე სურათს და ბოლოს მეორე ტეგს.

Alt ატრიბუტი

Alt ატრიბუტი გამოიყენება სურათის "alternate text"(ალტერნატიული ტექსტი)-სათვის. Alt ატრიბუტის მნიშვნელობა არის ავტორისადმი დაწერილი ტექსტი :

<img src="boat.gif" alt="Big Boat">

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

ბაზური ჩანაწერები - სასარგებლო წვრილმანები

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

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

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

ტეგი	აღწერა
<img>	განსაზღვრავს სურათს
<map>	განსაზღვრავს სურათის რუკას
<area>	განსაზღვრავს მოქმედების შესაძლებლობის სურათს სურათის რუკაზე

HTML ფონები

<body> ტეგს აქვს ორი ატრიბუტი სადაც შეგიძლიათ ფონის მითითება. ფონი შესაძლოა იყოს სურათი, ან ფერი.
Bg ფერი
ეს ატრიბუტი განსაზღვრავს HTML გვერდზე ფონის ფერს. ამ ატრიბუტის მნიშვნელობა შესაძლოა იყოს რიცხვი, RGB მნიშვნელობა, ან ფერის სახელი:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

ფონი
ფონის ატრიბუტი განსაზღვრავს HTML გვერდის ფონის სურათს. ამ ატრიბუტის მნიშვნელობა არის სასურველი სურათის ბმული. თუ სურათი ბრაუზერის ფანჯარაზე პატარაა, მაშინ ის ავტომატურად გადამრავლდება :

<body background="clouds.gif">
<body background="imeges/clouds.gif">

შენიშვნა!
თუ გსურთ ფონად გამოიყენოთ სურათი, უნდა გაითვალისწინოთ შემდეგი:

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

ბაზური ჩანაწერები - სასარგებლო წვრილმანები

<body> ტეგში Bg ფერი, ფონი და ტექსტის ატრიბუტების ნაცვლად ახლა უკვე გამოიყენება სტილის ფურცლები (CSS).

HTML ფერები

ფერის მნიშვნელობები

ფერები განისაზღვრებიან ათობითი სისტემით red(წითელი), green(მწვანე) და blue(ლურჯი) კომბინაციისთვის(RBG). ფერის ყველაზე დაბალი მნიშვნელობა არის 0(hex #00), ყველაზე მაღალი 255(hex #FF).
ცხრილში ნაჩვენებია red(წითელი), green(მწვანე) და blue(ლურჯი) კომბინაციის რეზულტატები:

უვნებელი ვებ ფერები

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

დასკვნა

ამ წიგნით სრულად შეისწავლეთ HTML-ის საწყისები. რის შემდეგადაც გადადით XHTML, CSS, XML, JavaScript, PHP და აშ. ენებზე.

გისურვებთ წარმატებას!