HTML –ჰიპერტექსტურიმარკირების ენავიკიწიგნებიდან – სახელმძღვანელოების თავისუფალი ბიბლიოთეკიდან

http://ka.wikibooks.orgშინაარსი
შესავალი......................................................................................................................................3რა არის HTML?.......................................................................................................................3გინდა სცადო ეს?....................................................................................................................3მაგალითის ახსნა....................................................................................................................4HTM, თუ HTML გაფართოვება?..........................................................................................4შენიშვნა HTML რედაქტორებზე.......................................................................................4ხშირი კითხვები......................................................................................................................4HTML-ის ელემენტები................................................................................................................5HTML-ის ტეგები......................................................................................................................5HTML-ის ელემენტები............................................................................................................5რატომ ვიყენებთ მხედრულ ტეგებს?................................................................................6
ტეგების თვისებები.................................................................................................................6
თვისებების მნიშვნელობების ციტირება..........................................................................6
ბაზური HTML ტეგები.................................................................................................................6
სცადე შენით - მაგალითები................................................................................................6
სათაურები................................................................................................................................7პარაგრაფები...........................................................................................................................7ხაზის გაწყვეტა.......................................................................................................................7კომენტარები HTML-ში.........................................................................................................8ბაზური ჩანაწერები - გამოყენებადი წვრილმანები......................................................8ბაზური HTML ტეგები............................................................................................................8HTML-ის ფორმატირება............................................................................................................9როგორ ვნახოთ HTML წყარო...........................................................................................9ტექსტის ფორმატირების ტეგები........................................................................................9”კომპიუტერული პროდუქციის” ტეგები........................................................................10ციტირების, ციტატების და განმარტებების ტეგები......................................................11HTML სიმბოლოების ხასიათი................................................................................................11გაუწყვეტელი სივრცე.........................................................................................................11ყველაზე ხშირად გამოყენებადი სიმბოლოების აღწერა.........................................12ზოგიერთი სხვა ხშირად გამოყენებადი სიმბოლოების აღწერები.........................12HTML ბმულები..........................................................................................................................13მიბმული ტეგები და Href თვისებები.................................................................................13სამიზნე ატრიბუტები............................................................................................................13მიბმული ტეგი და სახელის ატრიბუტი...........................................................................13ბაზური ჩანაწერები - გამოყენებადი წვრილმანები....................................................14HTML ბლოკები..........................................................................................................................14ბლოკები.................................................................................................................................14ბლოკების ნაკრების ტეგები..............................................................................................14ბლოკის ტეგი.........................................................................................................................14ბაზური ჩანაწერები - გამოყენებადი წვრილმანები....................................................15
ბლოკის ტეგები.....................................................................................................................15HTML ცხრილები.......................................................................................................................15
ცხრილები..............................................................................................................................15
ცხრილები და საზღვრის ატრიბუტები............................................................................16სათაურები ცხრილებში......................................................................................................16ცარიელი უჯრები ცხრილებში..........................................................................................16ბაზური ჩანაწერები - გამოსადეგარი წვრილმანები..................................................171

ცხრილის ტეგები..................................................................................................................17HTML სიები.................................................................................................................................18
უწესრიგო სიები....................................................................................................................18
წესრიგიანი სიები.................................................................................................................18
განმარტებული სიები..........................................................................................................18
სიის ტეგები............................................................................................................................19
HTML ფორმები და მითითებები............................................................................................19ფორმები.................................................................................................................................19მითითებები............................................................................................................................20ფორმის ქმედების ატრიბუტები და მითითების ღილაკი............................................20ფორმის ტეგები.....................................................................................................................21
HTML სურათები........................................................................................................................21სურათის ტეგი და Src ატრიბუტი......................................................................................21Alt ატრიბუტი.........................................................................................................................22ბაზური ჩანაწერები - სასარგებლო წვრილმანები.....................................................22სურათის ტეგები...................................................................................................................22
HTML ფონები.............................................................................................................................23ბაზური ჩანაწერები - სასარგებლო წვრილმანები.....................................................23
HTML ფერები.............................................................................................................................23ფერის მნიშვნელობები.......................................................................................................23უვნებელი ვებ ფერები.........................................................................................................24დასკვნა........................................................................................................................................25შესავალირა არის 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>
ეს არის ჩემი პირველი ვებ გვერდი2

<b>ეს ტექსტი არის მუქი</b></body></html>დაამახსოვრეთ ფაილი, როგორც "mypage.htm".
გახსენით თქვენი ინტერნეტ ბრაუზერი. შეასრულეთ ბრძანება File/Open (OpenFile)(ფაილი/გახსნა(ფაილის გახსნა)). გამოვა დიალოგური ფანჯარა. იმოქმედეთღილაკზე 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 ფაილი, მაგრამ ბრაუზერი არ მიჩვენებსცვლილებებს. რატომ?
ბრაუზერი თქვენს გვერდს ინახავს ბუფერში, ასე რომ ის არ წაიკითხავს მას ორჯერ.
3როდესაც თქვენ ცვლით გვერდს, ბრაუზერმა არ იცის ამის შესახებ. გამოიყენეთ ბრაუზერის
ღილაკი 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>4ეს ელემენტი იწყება საწყისი ტეგით <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>

5

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

აღწერა<b>საზღვრავს გამუქებულ ტექსტს<big> საზღვრავს დიდ ტექსტს<em> საზღვრავს ხაზგასმულ ტექსტს<i>საზღვრავს დახრილ ტექსტს<smallსაზღვრავს პატარა ტექსტს><stronსაზღვრავს ძლიერ ტექსტსg><sub> საზღვრავს ხელმოწერილ ტექსტს
<sup> ...
<ins> საზღვრავს ჩასმულ ტექსტს<del> საზღვრავს წაშლილ ტექსტს
უარყოფითი. გამოიყენეთ <del>-ის ნაცვლადstrikeუარყოფითი. გამოიყენეთ <del>-ის ნაცვლად<u>უარყოფითი. გამოიყენეთ სტილების ნაცვლად”კომპიუტერული პროდუქციის” ტეგები”კომპიუტერული პროდუქციის” ტეგებიტეგიაღწერა<code> საზღვრავს კომპიუტერული კოდის ტექსტს<kbd>საზღვრავს კლავიატურის ტექსტს<samp> საზღვრავს უბრალო კომპიუტერულ კოდს8<tt>

საზღვრავს ტელეტიპის ტექტს<var>აღწერს ცვლადებს<pre>საზღვრავს წინაფორმატირების ტექსტს<listing> უარყოფითი. გამოიყენეთ <pre>-ს ნაცვლად<plainteუარყოფითი. გამოიყენეთ <pre>-ს ნაცვლადxt><xmp>უარყოფითი. გამოიყენეთ <pre>-ს ნაცვლადციტირების, ციტატების და განმარტებების ტეგები
ტეგი<abbr>

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

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

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

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

აღწერაგაუწყვეტელი ხაზიაღწერის სახელიაღწერის რიცხვიnbsp;&#160;<ნაკლებობის ნიშანი & l t ;

&#60;

>

მეტობის ნიშანი&gt;&#62;&ამპერსანტი

&amp;

&#38;

"

ბრჭყალები&quot;&#34;'აპოსტროფი&apos;&#39;ზოგიერთი სხვა ხშირად გამოყენებადი სიმბოლოების აღწერები
ზოგიერთი სხვა ხშირად გამოყენებადი სიმბოლოების აღწერებირეზულტატი

აღწერააღწერის სახელი აღწერის რიცხვი

¢

ცენტი

&cent;&#162;£

ფუნტი&pound;&#163;

¥იენი

&yen;

&#165;

10§პარაგრაფი

&sect;&#167;©

ლიცენზია

&copy;&#169;®

რეგისტრირებული

&reg;&#174;

×გამრავლება

&times;&#215;

÷გაყოფა

&divide;&#247;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>მიბმული ტეგი და სახელის ატრიბუტი
სახელის ატრიბუტი გამოიყენება დასახელებული მიბმისათვის. როდესაც იყენებთ
დასახელებულ მიბმას, თქვენ ქმნით ბმულს რომელიც გადახტება გვერდის რომელიმე
ნაწილში. მორბენალების გამოყენების ნაცვლად საკმარისია იქმოქმედოთ ამ ბმულზე დათქვენ მოხვდებით გვერდის სასურველ ნაწილში.
დასახელებული მიბმის სინტაქსი :11

<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 დოკუმეტში ბლოკების სათითაოდ ჩადებას.
12მაგალითში მოყვანილია ბლოკების ნაკრები ორი სვეტით. პირველი სვეტი იკავებს ფანჯრის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> ტეგში!

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

აღწერა<frameseგანსაზღვრავს ბლოკების დასმასt><frame> განსაზღვრავს ბლოკს<nofram განსაზღვრავს ბლოკებს ბრაუზერებისათვის, რომლებიც არ უზრუნველყოფენes>ბლოკებს<iframe> განსაზღვრავს ჩასმულ ბლოკებსHTML ცხრილებიცხრილები
ცხრილები განისაზღვრებიან <table> ტეგით. ცხრილები დაყოფილია სტრიქონებად(<tr> ტეგით) და თითოეული სტრიქონი დაყოფილია სვეტებად (<td> ტეგით). Td
ნიშნავს table data(ცხრილის მონაცემები), რომელიც არის ინფორმაცია უჯრედზე.
უჯრედის ინფორმაცია შეიძლება შეიცავდეს ტექსტს, ცხრილებს, სურათებს, პარაგრაფებს,ფორმებს, ჰორიზონტალურ ხაზებს, ცხრილებს და ა.შ.
<table border="1">
<tr>

13

<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-ში.

14

<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განსაზღვრავს ცხრილის ტექსტს><colgrouგანსაზღვრავს ცხრილის სვეტების ჯგუფსp><col>განსაზღვრავს ატრიბუტების მნიშვნელობებს ცხრილშიერთი, ან მეტი სვეტისათვის<thead> განსაზღვრავს ცხრილის თავს<tbody> განსაზღვრავს სხეულს<tfoot>განსაზღვრავს ბოლოს15

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
16განმარტებულ სიებში შეგიძლიათ ჩადოთ პარაგრაფები, ხაზის წყვეტები, სურათები,ბმულები, სხვა სიები და ა.შ.

სიის ტეგებისიის ტეგებიტეგი

აღწერა

<ol>განსაზღვრავს წესრიგიან სიას<ul>განსაზღვრავს უწესრიგო სიას<li>განსაზღვრავს სიის ელემენტს<dl>განსაზღვრავს განმარტებულ სიას<dt>განსაზღვრავს ახსნილ ტერმინს<dd> განსაზღვრავს განმარტების აღწერას<dir>უარყოფითი. გამოიყენება-ის ნაცვლად<men უარყოფითი. გამოიყენებაu>-ის ნაცვლადHTML ფორმები და მითითებებიფორმები
ფორმა არის სივრცე, რომელიც შეიცავს ელემენტებს.
ელემენტებში არიან ელემენტები, რომლებიც მომხმარებელს ფორმაში ინფორმაციის
შეტანის საშუალებას აძლევენ.
ფორმა განისაზღვრება <form> ტეგით.
<form><input><input></form>მითითებებიყველაზე გამოყენებადი ფორმის ტეგი არის <input> ტეგი. მითითების ტიპიგანსაზღვრულია ტიპის ატრიბუტით.
ტექსტის ველებიტექსტის ველები გამოიყენება მაშინ, როცა მომხმარებელს სურს ფორმაში შეიყვანოს
ასოები, რიცხვები და ა.შ.
17

<form>First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname"></form>ფორმა თავისთავად არ ჩანს. უმეტესი ბრაუზერები ტექსტის ველებში უშვებენ მხოლოდ 20ელემენტს.
რადიო ღილაკებირადიო ღილაკები გამოიყენება მაშინ, როდესაც მომხმარებელს სურს მონიშნოს ერთ-ერთიპარამეტრი.
<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>

აღწერაგანსაზღვრავს ფორმა იუზერის მითითებისათვის
18

<input> განსაზღვრავს ტექსტის ველებს<textareგანსაზღვრავს ტექსტის სივრცეებსa><label>განსაზღვრავს იარლიყს კონტროლზე

<fieldsetგანსაზღვრავს ველის დასმას><legendგანსაზღვრავს სათაურებს დასმული ველებისთვის><select> განსაზღვრავს ჩამოშლად მენიუს<optgrouგანსაზღვრავს პარამეტრების ჯგუფსp><option> პარამეტრებს ჩამოსაშლელე მენიუში
<button> განსაზღვრავს ღილაკს<isindexუარყოფითი. გამოიყენება <input>-ის ნაცვლად>HTML სურათებისურათის ტეგი და Src ატრიბუტიHTML-ში სურათები განისაზღვრებიან <img> ტეგით. <img> ტეგი არის ცარიელი, რაციმას ნიშნავს რომ ის შეიცავს ატრიბუტებს და არ გააჩნია სასრული ტეგი. იმსათვის რომგვერდზე გამოისახოს სურათი, უნდა გამოიყენოთ src ატრიბუტი. Src ნიშნავს"source"(წყარო)-ს. Src ატრიბუტის მნიშვნელობა არის გვერდზე გამოსასახავი სურათისURL. სურათის განსაზღვრის სინტაქსია:<img src="url">

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

Alt ატრიბუტიAlt ატრიბუტი გამოიყენება სურათის "alternate text"(ალტერნატიული ტექსტი)-სათვის.
Alt ატრიბუტის მნიშვნელობა არის ავტორისადმი დაწერილი ტექსტი :<img src="boat.gif" alt="Big Boat">

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

ბაზური ჩანაწერები - სასარგებლო წვრილმანებითუ 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">20

<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 გადაკვეთის პლატფორმის ფერები :21დასკვნაამ წიგნით სრულად შეისწავლეთ HTML-ის საწყისები. რის შემდეგადაც გადადით XHTML,CSS, XML, Java SCript, PHP და აშ. ენებზე.
გისურვებთ წარმატებას!

22