შესავალი პირველი ნაბიჯები - HTML სახელმძღვანელო ახალბედებისათვის
სანამ უშუალოდ ენის განხილვას შევუდგებოდეთ, ჯერ გავიგოთ, თუ რას წარმოადგენს ის.
იმაზე, რომ თქვენ ტექსტი, სურათები და კიდევ მრავალი სხვა რამ ბრაუზერში გარკვეული თანმიმდევრობით დაინახოთ, პასუხს HTML აგებს. ის იშიფრება როგორც HyperText Markup Language. ის სტატიური და შესაბამისად მოუქნელია. იმისთვის, რომ გვერდზე, რომელსაც მომხმარებელი ნახულობს, რამე შეიცვალის, მთელი კოდის მოდიფიცირებაა საჭირო. აქ ისმის სრულიად სამართლიანი კითხვა: თუ HTML ასეთი საშინელებაა, რატომ უნდა ვისწავლოთ ის? ნუთუ არ არსებობს უფრო განვითარებული ენები?
პასუხი დადებითია, მაგრამ ნუ გეგონებათ, რომ ჩვენ რაიმე მოძველებულს გასწავლით. საქმე იმაშია, რომ მხოლოდ სხვა პროგრამული ენების გამოყენებით საიტი არ იქმნება, ხოლო დინამიური საიტები HTML-ისა და სხვა ენების შერწყმით მიიღება. უფრო მეტიც - ასეთ ენებს HTML-ში ჩაშენებულებს ეძახიან.
რა შეუძლია HTML-ს?
HTML-ს მხოლოდ გრაფიკული ნაწილისთვის თავის გართმევა ევალება. ანუ მისი გამოყენებით ნებისმიერი ტექსტის, სურათის, ბმულის, ფორმის თუ სხვა რამის თქვენი გემოვნების მიხედვით გამოსახვა შეგიძლიათ, მაგრამ ეს ფუნქცია სტატიურია - არსებულ გვერდს ხელის ერთი დაჭერით ვერ შეცვლით, ხშირ შემთხვევაში კი კოდში საკმაოდ სერიოზული ჩარევაა საჭირო.
ვებ-პროგრამირებაში გამოყენებული სხვა ენები
მაგრამ რა ვქნათ, თუ მაგალითად გვინდა ვიცოდეთ, რამდენი პუნქტი მონიშნა მომხმარებელმა მენიუდან ან გამოვიტანოთ შეცდომა, თუ მას არაფერი მოუნიშნია და ისე ცდილობს მონაცემების გაგზავნას ან "ავანთოთ" ღილაკი, როცა მას თაგვის ისარი გადაუვლის?
აქ ახალი ცნების - javascript-ის შემოტანაა საჭირო. ის მინი პროგრამირების ენა გახლავთ, თუმცა ასეთ მოთხოვნებს სრულიად აკმაყოფილებს და user-side-ცაა!
მაგრამ აქ ახალი პრობლემები გაჩნდა. რა ვქნათ იმ შემთხვევაში თუ ინფორმაციის დამახსოვრება და საჭიროების შემთხვევაში გახსენებაც გვსურს? ამის საშუალება ზემოთ ნახსენებ ენებს არ აქვთ, მაგრამ თუ ეს ვერ გავაკეთეთ, უამრავ შესაძლებლობას დავკარგავთ. არ შეგვეძლება მომხმარებლის დარეგისტრირება, საიტზე მრიცხველის დაყენება, ფორუმის და ჩატის გახსნა და რაც მთავარია, დინამიური საიტის შექმნა! ისტერიკაში ნუ ჩავარდებით, ამ ყველაფრის გამკეთებელი ენაც არსებობს და მას PHP ჰქვია.
PHP სრულყოფილი პროგრამირების ენაა, რომელიც დროთა განმავლობაში იცვლებოდა მხოლოდ იმისთვის, რომ მაქსიმალურად მორგებოდა ვებ-პროგრამირებას. სხვა ჩვეულებრივი პროგრამირების ენებისგან განსხვავებით მას მოცილებული აქვს დამატებითი მოდულების ჩამატების აუცილებლობა, რაც მუშაობას საკმაოდ აადვილებს. javascript-ისგან განსხვავებით ის server-side-ა და სამუშაოდ შესაბამისი პროგრამული უზრუნველყოფა სჭირდება.
რა თქმა უნდა, არსებობს სხვა ასეთივე დანიშნულების ენები. მაგ. ASP და ASP.NET, მაგრამ მათ მსგავსება-განსხვავებებზე აქ საუბარი არ გვექნება.
ვებ-პროგრამირებაში ასევე გამოიყენებოდა ჩვეულებრივი პროგრამირების ენები(მაგ. CGI Perl), მაგრამ ისინი PHP-სთან შედარებით არაპრაქტიკული აღმოჩნდნენ, ასე რომ, დღეს ისინი თითქმის აღარ გამოიყენებიან.
ნაბიჯი 1 - ვიწყებთ მუშაობას
სანამ მუშაობას შევუდგებოდეთ, ბუნებრივია, სამუშაო სივრცე გვჭირდება. ამისათვის გავხსნათ საქაღალდე
D:\პირველი ნაბიჯები\
თუკი უნიკოდთან მწყრალად ხართ ან FAT არ გიწყობთ ხელს, საქაღალდეს ინგლისური ასოებითაც შეგიძლიათ დაარქვათ ნებისმიერი სახელი, ეს არაფერს შეცვლის.
ახლა რაც შეეხება პროგრამულ უზრუნველყოფას. სამუშაოდ გირჩევთ "Macromedia Dreamweaver 8.0"-ს. ის ამ საქმეში საუკეთესოა, თუმცა ჩვეულებრივი ტექსტური რედაქტორებიც გამოდგება. მაგალითად ბლოკნოტი(Notepad).
მე გვერდების შევსებისას ქართულ ასოებს გამოვიყენებ. თქვენ თუ ეს გაგიჭირდებათ, შეგიძლიათ ინგლისური ასოები გამოიყენოთ, არც ეს ცვლის რაიმე არსებითს.
ახლა, როცა ეს პრობლემა უკვე მოაგვარეთ, მუშაობის დაწყებაც შეიძლება.
შექმენით თქვენს ძირეულ საქაღალდეში ფაილი სახელად index.html და დააკოპირეთ ან გადაწერეთ მასში ქვემოთ მოცემული კოდი("ვნახოთ" ბმულის გარეშე):
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html> (ვნახოთ)
შეინახეთ ფაილი *.html გაფართოებით და გახსენით ის ბრაუზერში. დაინახავთ ზუსტად იმას, რასაც "ვნახოთ" ღილაკზე დაჭერით
ძალიან ბევრი წერს, რომ კოდი გადაწერა ბლოკნოტში, შეინახა და ტექსტური ფაილი მიიღო. ეს რომ არ მოგივიდეთ, File>Save ფანჯარაში მიუთითეთ All Files და შეინახეთ როგორც index.html(ან "ნებისმიერი სახელი".html. მთავარია, რომ წერტილის მერე html ეწეროს). დაინახავთ, რომ თქვენს მიერ შენახულ ფაილს ბრაუზერის ხატულა გაუჩნდა. ეს ნიშნავს, რომ პროცედურა წარმატებით დასრულდა.
თუ თქვენ რაიმეს შეცვლით რედაქტორიდან და მისი ბრაუზერში ნახვა დაგჭირდებათ, ჯერ შეინახეთ ფაილი რედაქტორში, შემდეგ ბრაუზერში დააჭირეთ ღილაკს Refresh(ან F5) ან დახურეთ ბრაუზრი და გახსენით თავიდან. ისე მე პირველ გზას გირჩევდით
ნაბიჯი 2 - რა არის ტეგები?
ჩვენ უკვე ვიცით, რომ HTML ვებ-გვერდის მხოლოდ გრაფიკულ ნაწილზე აგებს პასუხს, მაგარმ არაფერი გვითქვამს იმაზე, თუ რის საშუალებით ახერხებს ის ამას. ეს მაგიური არსებები "ტეგები"(იარლიყები) არიან.
HTML გამოსახავს ყველაფერს, რაც კი გზაზე(ანუ სინტაქსში) ხვდება, მაგრამ ამ გამოსახვის თავისებურებებს ტეგები განსაზღვრავენ. ვთქვათ თქვენ html გაფართოების ფაილში ჩაწერეთ რაიმე ტექსტი, მაგრამ როგორც არ უნდა დაიცვათ წერისას არეები, ბრაუზერში ის მაინც ერთ ხაზზე გამოისახება. ეს ხდება იმიტომ, რომ HTML მანამ წერს ტექსტს ერთ ხაზზე, სანამ კოდში სპეციალური ტეგი - <br> არ შეხვდება. ამის შემდეგ ის ხვდება, რომ მეორე ხაზზე უნდა გააგრძელოს წერა. შეგიძლიათ ეს თვითონ შეამოწმოთ.
როგორ იწერება ტეგები?
ყველაფერს, რასაც <> ჩარჩოს შიგნით მოაქცევთ, HTML ტეგად გაიგებს და შეეცდება მოძებნოს მისი შესატყვისი თავისი ტეგების "საწყობში", თუ ასეთი იპოვა, შეასრულებს, თუ ვერა - გააგრძელებს წერას უწინდებურ რეჟიმში, მაგრამ თქვენს არასწორ ტეგს არ ამოწერს. როგორც <b> ტეგის შემთხვევაში დავინახეთ, დამხურავი ტეგი იგივე იქნება, რაც გამხსნელი, მხოლოდ პირველ ჩარჩოსა და დანარჩენ ნაწილს შორის "/" დაემატება. მაგალითად, თუ მე მინდა დავწერო: " კომპინფო", ამისთვის კოდში ვწერ შემდეგს: " <b>კომპ</b>ინფო". ეს HTML-ს მიუთითებს, რომ "<b>...</b>" კოდში მოქცეული სიმბოლოების ნაკრები (ამ შემთხვევაში სიტყვის ნაწილი "კომპ") უნდა გაასქელოს.
რა და რა სახის ტეგები არსებობს?
ტეგები ორნაირია: ისინი, რომელთაც ტეგის ორი - გამხსნელი და დამხურავი ნაწილი გააჩნიათ და ისინი, რომელთაც დამხურავი ნაწილი არ სჭირდებათ.
რა განსხვავებაა ამ ორი სახეობის ტეგს შორის?
მაგალითად მე დამჭირდა სიტყვის გასქელება. ვიყენებ ტეგ <b>-ს(bold), მაგრამ იმისთვის, რომ HTML-მა გაარკვიოს, თუ სადამდე უნდა ასქელოს სიტყები, საჭიროა დამხურავი ნაწილი </b>, რომელიც მიუთითებს, რომ ტექსტის გამოტანა <b> ტეგის გახსნამდე არსებულ რეჟიმში გაგრძელდეს.
მაგრამ იქნებ დამჭირდა მომდევნო ხაზზე გადასვლა? მაშინ ვიყენებ ტეგ <br>-ს, რომელსაც დამხურავი ტეგი არ სჭირდება.
დავუბრუნდეთ ჩვენი მაგალითის განხილვას.
ნაბიჯი 3 - აუცილებელი ტეგები
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html> (ვნახოთ)
ალბათ გაინტერესებთ, რას ნიშნავს სურათი, რომელიც კოდის მარცხნივაა აწებებული უკვე მესამე თავია და რომელზეც სიტყვა არ დამიძრავს რახან უკვე ვიცით, რას ნიშნავს ტეგი და რა აგებულება აქვს მას, უკვე დროა ეს სურათიც გავარჩიოთ.
სურათზე HTML-ისა და ადამიანის მსგავსებაა გამოსახული. ჩვენ გაგვაჩნია სხეული, თავი და ტანი. HTML-საც იგივე აგებულება აქვს, მაგრამ მის აგებულებას ტეგები შემოსაზღვრავს.
მსგავსება რომ ჩამოვაყალიბოთ, მივიღებთ:
1. <html>...</html> - დოკუმენტის სხეული
2. <head>...</head> - დოკუმენტის თავი
3. <body>...</body> - დოკუმენტის ტანი
პირველი ტეგით იწყება და მთავრდება გვერდი. მასში მთელი ინფორმაციაა მოქცეული.
მეორე ტეში მოქცეულია keyword-ები, გვერდის კოდირება, სათაური და დანარჩენი ზოგადი ინფორმაცია.
მესამე ტეგში მოქცეულია დოკუმენტის ის ნაწილი, რომელიც ვებ-გვერდზე ჩანს.
<ტეგი> </ტეგი> - ასეთ ტეგებს ტეგ-კონტეინერებსაც ეძახიან. იმიტომ, რომ მათ შიგნით კიდევ შეიძლება ტეგის ჩასმა.
მიაქციეთ ყურადღება:
<ტეგი1><ტეგი2><ტეგი3> ... </ტეგი3></ტეგი2></ტეგი1>
ასეთი მიმდევრობა სწორად ითვლება: ტეგი, რომელიც პირველი იხსნება, ბოლო იხურება(ისევე, როგორც დანარჩენები).
შემდეგი მიმდევრობა კი უმეტეს შემთხვევაში შეცდომაა
<ტეგი><ტეგი2><ტეგი3> ... </ტეგი3></ტეგი1></ტეგი2>
ასე რომ, თავიდან დიდი ყურადღება გმართებთ სინტაქსთან, მაგრამ სისტემატიური მეცადინეობა მალე მინიმუმამდე დაიყვანს შეცდომის შანსს.
გილოცავ! შენ დაამთავრე თეორიული ნაწილი და შემდეგ ნაბიჯზე უკვე პრაქტიკულ სამუშაოსაც გაეცნობი. გისურვებ წარმატებას! :)
ნაბიჯი 3.1 - ვიწყებთ მუშაობას. უმარტივესი პრაქტიკა
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!
</body>
</html> (ვნახოთ)
წინა ნაბიჯზე შენ გაიგე, თუ რას ნიშნავს კოდის გვერდით მოთავსებული სურათი, ახლა ალბათ თვითონ კოდმაც დაგაინტერესა მოკლედ, შევუდგეთ განხილვას:
<html> და <head> ჩვენთვის უკვე ნაცნობი ტეგებია, მაგრამ რა დანიშნულება აქვთ <title> ან <META> ტეგებს?
როგორც კოდიდანაც ჩანს, ორივე <head> ტეგის ქვეტეგია და გვერდის შესახებ ზოგად ინფორმაციას შეიცავენ. ბევრი ალბათ უკვე მიხვდა, რომ <title> გვერდის სათაურია, მაგრამ რაში გვჭირდება ის? დააჭირეთ ”ვნახოთ” ღილაკს და გახსნილ ფანჯარაში დააკვირდით ზედა ლურჯ ზოლს, ხომ არ ემთხვევა მისი წარწერა <title> ტეგში მოქცეულ წარწერას?
<title> ტეგის მნიშვნელობა გასაგებია, გადავიდეთ <META> ტეგის განხილვაზე.
ამ ტეგს გვერდის ავტორის, საავტორო უფლებების, keyword-ების და კოდირების შესახებ ინფორმაციის შენახვა შეუძლია. ასევე შეუძლია სერვერისთვის განახლების ინტერვალის, PICS რეიტინგის და სხვა ასეთი ინფორმაციის მიწოდება, თუმცა აქ მათზე დაწვრილებით არ ვილაპარაკებთ.
თუ ამ ტეგს დააკვირდებით, ბოლოში დაინახავთ შემდეგ კოდს: "charset=utf8". ეს ის ნაწილია, რისთვისაც ეს ტეგი გამოვიყენეთ და ნიშნავს, რომ გვერდის default კოდირებად utf-8-ა დასმული, ეს კი თავის მხრივ შესაძლებელს ხდის, რომ უნიკოდით ჩაწერილი ქართული სიმბოლოები ბრაუზერმა კითხვის ნიშნების მაგივრად ქართულად გამოაჩინოს.
ტეგ <body>-ს გახსნის შემდეგ ყველანაირი ტეგის გარეშე მოდის ტექსტი "მოგესალმებით! ეს ჩემი პირველი ვებ-გვერდია!", რომელსაც ბრაუზერი უბრალოდ ამოწერს.
ვხურავთ აუცილებელ ტეგებს და ვტკბებით ნამუშევრით. თქვენი პირველი ვებ-გვერდი მზადაა.
ნაბიჯი 4 - როგორ შევცვალოთ ტექსტის ფერი?
დავიწყოთ უმარტივესიდან, რომელიც ძალიან ხშირად გვჭირდება. გავაფერადოთ ჩვენი ტექსტი. HTML-ში ყველა ფერს თავისი კოდი გააჩნია. აქ ყველა ფერის კოდის მოძებნა შეგიძლიათ. ძალიან კარგი იქნება, თუ ამ გვერდს შეინახავთ - შეიძლება როდესმე გამოგადგეთ.
იმისთვის, რომ ტექსტი გავაფერადოთ, ჩვენ ახალი ტეგის - font-ის შემოღება დაგვჭირდება. თუმცა მარტო ტეგი არ გვეყოფა, მისი ატრიბუტი color-იც დაგვჭირდება.
საბოლოო ჯამში ვიღებთ ჩანაწერს: <font color="#...">...</font> თუკი ამ ხაზს თქვენს გვერდზე ჩასვამთ და მრავალწერტილებს ჩაანაცვლებთ ფერის კოდით და ტექსტით, მაშინ ტეგი იმუშავებს და თქვენი ტექსტიც გაფერადდება.
მაგალითად:
<font color="#FF0000"> მოგესალმებით! </font>
სცადეთ და FF0000-ის მაგივრად ჩასვით სხვა მნიშვნელობა. ამ ტეგში მოქცეული ტექსტის ფერის მაშინვე შეიცვლება, ოღონდ ფერის კოდის მითითებისას და არ დაგავიწყდეთ წინ #(ძიეზის) დასმა.
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</body>
</html> (ვნახოთ)
ტეგი <font>...</font> მრავალფუნქციურია. ის ასევე მშვენივრად ითავსებს შრიფტის ზომის, სახეობის, სტილის და კიდევ მრავალი ფუნქციის კონტროლს, მაგრამ ამაზე ოდნავ მოგვიანებით ვისაუბრებთ.
მაგრამ როგორ დავსვათ რომელიმე ფერი მთელი გვერდის ძირითად ფერად? ამისთვის ტეგ <body>-ს ვუმატებთ ატრიბუტ text="#..."-ს და ვიღებთ შემდეგს:
<body text="#...">
...
</body>
აქ კი ისღა გვრჩება მრავალწერტილები სასურველი ფერის კოდით და ტექსტით შევცვალოთ.
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699">
მოგესალმებით!<font color="#FF0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</body>
</html> (ვნახოთ)
ტექსტის ფერის შეცვლა ვისაწავლეთ, ახლა ფონის ფერს მივხედოთ
ნაბიჯი 5 - შევცვალოთ ფონის ფერი. "ფერების ეთიკის" მოკლე მიმოხილვა
წინა ნაბიჯში ტექსტის ფერის შეცვლა ვისწავლეთ, ახლა ფონის ფერებს და მათი გამოყენების ეთიკას შევეხოთ.
გვერდის ფონის ფერი, ისევე, როგორც ტექსტის ძირითადი ფერი, ტეგ <body>-ს ატრიბუტია და იწერება როგორც bgcolor="#...". აქ ერთადერთი ახალი სიტყვა bgcolor-ია, რომელიც იშიფრება როგორც BackGround Color(ფონის ფერი), დანარჩენი კი("#...") უკვე ნაცნობია - ის ფერის კოდს აღნიშნავს.
საბოლოო ჩანაწერი ასეთი იქნება: <body ... bgcolor="#..."> სადაც პირველ მრავალწერტილში სხვადასხვა ატრიბუტები იგულისხმება(მათი არსებობა აუცილებელი არაა), ხოლო მეორეში ფერის კოდი.
მაგალითად:
<body bgcolor="#000000">
...
</body>
თუ ჩვენს გვერდზე ასეთ ტეგს დავწერთ, ფონის ფერი შავი იქნება, თუმცა თქვენ კოდის ცვლით სასურველი ფერების მიღება შეგიძლიათ.
გვერდის კეთებისას აუცილებლად მიუთითეთ ტექსტის, ფონის და ბმულის(ამას ცოტა მოგვიანებით გავეცნობით) ფერი, თუნდაც ფონის ფერად თეთრ, ტექსტის ფერად შავ და ბმულის ფერად ლურჯ ფერებს იყენებდეთ, წინააღმდეგ შემთხვევაში მომხმარებელი დაინახავს იმ ფერებს, რომლებიც მასთან Default-ადაა დაყენებული.
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body>
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</body>
</html> (ვნახოთ)
ტექნიკურ ნაწილს მოვრჩით, გადავიდეთ ესთეტიურ მხარეზე.
დაიმახსოვრეთ, რომ საიტზე არ შეიძლება მყვირალა ფერების გამოყენება. ეს დიზაინსაც აფუჭებს და ნაწერის ამოკითხვასაც უფრო აძნელებს. ასე რომ, მოუფრთხილდით თქვენი საიტის სტუმრების თვალებსა და ნერვებს თუნდაც მხოლოდ კომერციული მოსაზრებით - არავის მოუნდება მეორედ შეიხედოს ასეთ გადაჭრელებულ საიტზე, თუნდაც იქ რაიმე მართლაც ღირებული იყოს.
სამაგიეროდ, გამოიყენეთ უფრო ნაზი და რბილი ფერები, ოღონდ ამასაც დაკვირვება უნდა - შეიძლება ცალ-ცალკე აღებული თქვენი ფერები ძალიან სასიამოვნოდ გამოიყურებოდნენ, მაგრამ ერთად საშინელ არეულობას ქმნიდნენ.
რა ვქნა? იკითხავს გამოუცდელი მომხმარებელი. ჩემი ერთადერთი რჩევაა - მაქსიმალურად დააკვირდით ფერებს შერჩევისას და "დიდ ინტერნეტში" თქვენი საიტის წარდგენამდე აუცილებლად ჰკითხეთ რაც შეიძლება ბევრ ადამიანს აზრი მის შესახებ.
ფერებზე ლაპარაკი ჯერჯერობით ამით დამთავრდა. გადადით შემდეგ ნაბიჯზე, ახალი ერა იწყება! :-)
ნაბიჯი 6 - პარაგრაფები და <div>. ვსწავლობთ ტექსტის გამოსახვას
პარაგრაფის ტეგი მასში მოქცეული ტექსტის განლაგებაზე აგებს პასუხს. ის იწერება, როგორც <p>, ხოლო მისი ატრიბუტი align გვიჩვენებს, თუ როგორი განლაგება ექნება ამ ტეგში მოქცეულ ტექსტს.
საბოლოო ჯამში კი გვაქვს ასეთი ჩანაწერი:
<p align="...">
...
</p>
მრავალწერტილების ადგილას შესაბამისად ატრიბუტის მნიშვნელობა და ტექსტი უნდა ჩაიწეროს. ატრიბუტს კი სულ 4 მნიშვნელობა აქვს :
1. left ტექსტს მარცხენა კიდეზე ასწორებს
2. right ტექსტს მარჯვენა კიდეზე ასწორებს
3. center ტექსტს გვერდის ვერტიკალური შუახაზის სიმეტრიულად ასწორებს(გამოიყენება სათაურების კეთებისას)
4. justify იგივეა, რაც left+right, ანუ ტექსტს ორივე კიდეზე ასწორებს
ქვემოთ განხილულ მაგალითს ჩამატებული აქვს პარაგრაფის ტეგი, რომელიც ტექსტს სათაურის ფუნქციას აძლევს, ანუ გამოიყენება align ატრიბუტის center მნიშვნელობა. თქვენ სცადეთ გააკეთოთ გვერდი, რომელზეც ყველა მნიშვნელობა იქნება გამოყენებული.
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<p align="center">
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</p>
</body>
</html> (ვნახოთ)
ნურასდროს გამოიყენებთ ცარიელ კონსტრუქციას:
<p></p>
ეს იგივეა, რაც <br><br>. ასე რომ, მის გამოყენებას აზრი არ აქვს.
შეიძლება შეამჩნიეთ კიდეც, რომ ტექსტის განლაგება default-ად left-ზეა დაყენებული. ასევე საგულისხმოა, რომ დამხურავი ტეგი </p>-ს შემდეგ ავტომატურად გადადის ხაზზე, ანუ <br>-ს აკეთებს, მაგრამ რა ვქნათ, თუ ეს ფუნქცია ხელს გვიშლის?
შეგვიძლია ალტერნატიული <center>...</center> ტეგი გამოვიყენოთ, მაგრამ შენიშნავდით, რომ ის ტექსტს მარჯვენა, მარცხენა ან ორივე მხარეზე ვერ გაგისწორებთ თან საკმაოდ მოძველებულია და შეიძლება როდესმე ბრაუზერმა ტეგად აღარც კი ჩათვალოს. ხელახლა ისმის კითხვა - რა ვქნათ?
პასუხი მარტივია - <div>...</div> გამოიყენეთ. ის იგივეს გააკეთებს, რასაც <p>, მაგრამ კურსორი ერთი ხაზით დაბლა აღარ ჩამოიწევს. ყველაფერი ზუსტად ისევე ჩაიწერება, რომგორც <p>-ს შემთხვევაში, მხოლოდ <div>-ით:
<div align="center">...</div>
<div align="left">...</div>
<div align="right">...</div>
<div align="justify">...</div>
<html>
<head>
<title>პირველი ნაბიჯები</title>
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8">
</head>
<body text="#336699" bgcolor="#CFCFCF">
<div align="center">
მოგესალმებით! <font color="#CC0000">ეს ჩემი პირველი ვებ-გვერდია!</font>
</div>
<p align="justyfy">
ეს სტატია განკუთვნილია დამწყები მომხმარებლებისთვის, რომლებიც ვერ ერკვევიან პროცესორების დასახელებებში, მათ მწარმოებლებში და გამოყენების სფეროებში. პრაქტიკულად ასეთი სტატია დიდი ხნის წინ უნდა დაწერილიყო, მაგრამ გარკვეული მიზეზების გამო ინტერნეტში ქვეყნდება პირველად. სამწუხაროდ არცერთი კომპიუტერული რესურსი საწყის ეტაპებს დიდ ყურადღებას არ უთმობს, რის გამოც ბევრ მომხმარებელს საკუთარი ძალებით და მიხვედრილობით უწევს გზის გაკვლევა საკმაოდ რთულ და დაქსაქსულ კომპიუტერულ ცხოვრებაში. რა თქმა უნდა 1-2 წლის თავზე სირთულეები ქრება, გარკვეული ცოდნა გროვდება და ყველაფერი მარტივდება, მაგრამ ხშირად პირველი არასწორი ნაბიჯები ბევრისთვის დიდი ხნის სინანულის ბრალია.
</p>
</body>
</html> (ვნახოთ)
ტექსტი, რომელიც მაგალითშია გამოყენებული, ერთ-ერთი სტატიიდანაა აღებული. თქვენ, რა თქმა უნდა, იქ თქვენთვის სასურველ ტექსტს ჩასვამთ.
დაიმახსოვრეთ! პარაგრაფის შიგნით არ შეიძლება სხვა პარაგრაფის და <div> ტეგის გამოყენება, ასეთი კონსტრუქცია არც იმუშავებს და თქვენც დაგაბნევთ:
<p align="right">
<p>...</p>
<p>...</p>
<p>...</p>
</p>
და
<p align="right">
<div>...</div>
<p>...</p>
<div>...</div>
</p>
თუმცა <div>-ს ასეთი კონსტრუქციის ”ატანა” და შესრულება შეუძლია:
<div align="right">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
თუმცა ჩვენი საუბარი <p> და <div>-თან დაკავშირებით აქ მთავრდება, ნუ გეგონებათ, რომ მათ მეტი არაფერი შეუძლიათ. უბრალოდ თქვენ ჯერ მზად არ ხართ მათ გასაცნობად.
ნაბიჯი 7 - თურმე ტექსტის ზომის რეგულირებაც შეიძლება.
ამ ნაბიჯზე ჩვენ სათაურებს და ტეგ <font>-ის კიდევ ერთ ატრიბუტს გავეცნობით, რაც ტექსტის ზომის რეგულირების საშუალებას მოგვცემს.
სათაური(Heading) საშუალებას გვაძლევს ტექსტი ექვს ზომაზე დავარეგულიროთ:
<H1>ტექსტი</H1>
<H2>ტექსტი</H2>
<H3>ტექსტი</H3>
<H4>ტექსტი</H4>
<H5>ტექსტი</H5>
<H6>ტექსტი</H6>
ისინი თქვენს მომხმარებელს საშუალებას მისცემენ, უფრო სწრაფად გაერკვიოს, თუ გვერდის რომელი ნაწილის მონახულება ჯობს თავიდან. როგორც ხვდებით, H1 ყველაზე საჭირო ინფორმაციის მატარებელი ტექსტის სათაური უნდა იყოს, H6 კი ყველაზე ნაკლებ საჭიროსი. თუმცა ეთიკის დაცვა აქაც აუცილებელია - H1-ით დაწერილი ტექსტი ძალიან მყვირალა და ულამაზოა, რამიმაგრება:
მთავარი
GEOLIFE.TK