ჩარჩო კოდი. Iframe და Frame - რა არის ისინი და როგორ საუკეთესოდ გამოვიყენოთ ჩარჩოები Html-ში

ელემენტი

ჩარჩოები

რას აკეთებს

შორის მთავარი განსხვავება

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

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

ჩარჩოების შექმნა

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

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

• თავად სცადე »

ზემოთ მოყვანილ მაგალითში გვერდი შეიცავს სამ ზონას, რომელთაგან თითოეული თავდაპირველად იტვირთება HTML დოკუმენტებით frame_top.html, frame_left.html და frame_right.html. HTML დოკუმენტების გარდა, ჩარჩო ასევე შეიძლება შეიცავდეს გრაფიკას. ამისათვის თქვენ უნდა მიუთითოთ შესაბამისი სურათის მისამართი ატრიბუტში src, მაგალითად src="image.gif". გთხოვთ გაითვალისწინოთ, რომ ელემენტი გამოიყენება დახურვის ტეგის გარეშე.
კონტეინერის შიგნით შეიძლება შეიცავდეს მხოლოდ ტეგებს ან ტეგებით დაფარული ჩარჩოების სხვა ნაკრები და .
მონიშნეთ აქვს შემდეგი ატრიბუტები:

• რიგები— აღწერს, თუ როგორ უნდა გაიყოს გვერდი ხაზებად:
• cols— აღწერს, თუ როგორ იყოფა გვერდი სვეტებად:

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

• cols = "20%, 80%"— ბრაუზერის ფანჯარა ორ სვეტად იყოფა ატრიბუტის გამოყენებით cols, მარცხენა სვეტი იკავებს ბრაუზერის ფანჯრის 20%-ს, ხოლო მარჯვენა 80%-ს.
• რიგები = "100, *"ბრაუზერის ფანჯარა იყოფა ორ ჰორიზონტალურ ფანჯარად ატრიბუტის გამოყენებით რიგები, ზედა ფანჯარა იკავებს 100 პიქსელს, ხოლო ქვედა ფანჯარა იკავებს ვარსკვლავის სიმბოლოთი მითითებულ დარჩენილ ადგილს.

როგორც ამ მაგალითიდან ჩანს, კონტეინერი ატრიბუტით რიგებიპირველი ქმნის ორ ჰორიზონტალურ ჩარჩოს და ცვლის მეორე ჩარჩოს მეორეთი რომელიც ქვედა ჰორიზონტალურ ჩარჩოს ორ სვეტად ყოფს ატრიბუტის გამოყენებით cols, მარცხენა სვეტი იკავებს ბრაუზერის ფანჯრის 20%-ს, ხოლო მარჯვენა 80%-ს.
თუ ბრაუზერს არ აქვს ჩარჩოების მხარდაჭერა, ფანჯარაში გამოჩნდება ტექსტი, რომელიც მდებარეობს ტეგებს შორის </b>და <b> . ყველაფერი ტეგებს შორის </b>და <b> , იგნორირებულია ბრაუზერების მიერ, რომლებიც მხარს უჭერენ ჩარჩოებს. ამრიგად, დეველოპერმა უნდა დაწეროს კოდი, რომელიც დუბლირებს ჩარჩოების შიგთავსს სხვა საშუალებებით და მოათავსოს ეს კოდი კონტეინერში. </b>, მაშინ ყველა მომხმარებელს შეუძლია ნახოს მისი ვებ გვერდი. <br>როგორც უკვე აღვნიშნეთ, დაუწყვილებელი ტეგი გამოიყენება დოკუმენტში ცალკე ჩარჩოს ჩასართავად <b><frame> </b>. ატრიბუტი <b>src</b>განსაზღვრავს დოკუმენტს, რომელიც უნდა იყოს ნაჩვენები ამ ჩარჩოში, მაგალითად: <frame src="frame_top.html">. თუ ატრიბუტი <b>src</b>აკლია, ცარიელი ჩარჩო გამოჩნდება.</p> <h2>საზღვრები ან სივრცე ჩარჩოებს შორის</h2> <p>ნაგულისხმევად, ბრაუზერი აჩვენებს ნაცრისფერ, ჩვეულებრივ 3D ხაზს ჩარჩოებს შორის, რომელიც ვიზიტორებს შეუძლიათ გამოიყენონ ჩარჩოს ზომის დასარეგულირებლად. <br>ჩარჩოს საზღვრის მანიპულირება შესაძლებელია, როგორც ნებისმიერი სხვა ჩარჩო ელემენტი. ამისათვის არსებობს რამდენიმე ელემენტის ატრიბუტი <b><frameset> </b>, რომელიც საშუალებას გაძლევთ დააკონფიგურიროთ ჩარჩოების საზღვრები. სასაზღვრო ხაზის სისქე განისაზღვრება ატრიბუტით <b>საზღვარი</b>. ნაგულისხმევი საზღვრის სისქის მნიშვნელობა არის ხუთი. <br>ჩარჩოს საზღვრის დასამალად, თქვენ უნდა დააყენოთ საზღვრის სიგანის მნიშვნელობა ნულზე ან დააყენოთ მნიშვნელობა "no" ან "0" ატრიბუტზე. <b>ჩარჩოს საზღვარი</b>. ატრიბუტი <b>ჩარჩოს საზღვარი</b>შეუძლია მიიღოს მხოლოდ ორი საპირისპირო მნიშვნელობა. თუ ატრიბუტის მნიშვნელობა <b>ჩარჩოს საზღვარი</b>უდრის "დიახ" ან "1", მაშინ გამოჩნდება ჩარჩოს საზღვარი, ხოლო თუ "0" ან "არა", მაშინ არა. გთხოვთ გაითვალისწინოთ, რომ ატრიბუტის მნიშვნელობები <b>ჩარჩოს საზღვარი</b>იცვლება ამისთვის <a href="https://ermake.ru/ka/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">სხვადასხვა ბრაუზერები</a>. ამ პრობლემის გადასაჭრელად გამოიყენეთ ატრიბუტი ორჯერ <b>ჩარჩოს საზღვარი</b>და ზოგიერთი ბრაუზერისთვის თქვენ ასევე გჭირდებათ ატრიბუტის დამატება <b>ჩარჩოს ინტერვალი</b>მნიშვნელობით "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>შემდეგ მაგალითში ჩვენ ვხსნით ჩარჩოებს შორის საზღვარს:</p> <h3>მაგალითი: ჩარჩოებს შორის საზღვრის მოხსნა</h3> <ul><li>თავად სცადე »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">ჩარჩო_მარცხნივ</td> <td style="width: 90%;background-color:lime;color: white;">ჩარჩო_მარჯვნივ</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>ჩარჩოები საზღვრების გარეშე</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>თუ ჩარჩოებს შორის საზღვრებს ამოიღებთ, ვიზიტორები ვერ შეძლებენ ბრაუზერში ჩარჩოს ზომის შეცვლას. თქვენ ასევე შეგიძლიათ თავიდან აიცილოთ ჩარჩოს ზომის შეცვლა ატრიბუტის გამოყენებით საზღვრების შენარჩუნებით <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>ატრიბუტის გამოყენება <b>საზღვრის ფერი</b>თქვენ შეგიძლიათ შეცვალოთ ჩარჩოს საზღვრის ფერი, თქვენ უბრალოდ უნდა მიუთითოთ კოდი ან შესაბამისი რეზერვირებული ფერის სახელი. <br>ქვემოთ მოცემულია HTML გვერდის მაგალითი, რომელიც შეიცავს ზემოთ აღწერილ ჩარჩოს საზღვრის კონტროლის ატრიბუტებს: საზღვრის ფერი წითელია, ზედა ჩარჩოს ზომა არ შეიძლება შეიცვალოს:</p> <h3>მაგალითი: ჩარჩოს საზღვრის კონტროლი</h3> <ul><li>თავად სცადე »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">ჩარჩო_ზედა</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">ჩარჩო_მარცხნივ</td> <td style="width: 80%;background-color:lime;color: white;">ჩარჩო_მარჯვნივ</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>ჩარჩო საზღვრის მართვა</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>თუ გსურთ ჩარჩოში გამოსახული გვერდი უფრო ახლოს მოათავსოთ მის საზღვრებთან, ან, პირიქით, გადაიტანოთ იგი უფრო შორს, შეცვალეთ ატრიბუტები <b>ზღვარის სიმაღლე</b>და <b>მინდვრის სიგანე</b>ტეგი <b><frame> </b>. ატრიბუტი <b>ზღვარის სიმაღლე</b>განსაზღვრავს ბალიშს ჩარჩოს შიგთავსსა და მის ზედა და ქვედა საზღვრებს შორის. სინტაქსი:</p><p> <frame marginheight="число"> </p><p>ატრიბუტი <b>მინდვრის სიგანე</b>განსაზღვრავს ბალიშს ჩარჩოს შიგთავსსა და მის მარჯვენა და მარცხენა საზღვრებს შორის. სინტაქსი:</p><p> <frame marginwidth="число"> </p><p>ეს html ხაზი, მაგალითად, ათავსებს გამოჩენილ გვერდს ჩარჩოს საზღვრებთან ახლოს:</p> <p>თუ გვერდი აჩვენებს გადახვევის ზოლს, რომელიც არ გსურთ, შეგიძლიათ პრობლემის მოგვარება ატრიბუტის მითითებით <b>გადახვევა</b>"არა" ტეგში <b><frame> </b>. მაგრამ გახსოვდეთ, რომ თუ ჩარჩო არ არის საკმარისად დიდი გვერდის მთლიანი შინაარსის საჩვენებლად, მაშინ ვიზიტორს არ ექნება საშუალება გადაახვიოს ნაჩვენები გვერდი.</p> <h2>ბმულები ჩარჩოებში</h2> <p>ჩვეულებრივ HTML დოკუმენტში ბმულის მიყოლა ხდება შემდეგნაირად: დააწკაპუნეთ ბმულზე და მიმდინარე დოკუმენტი შეიცვლება ახლით მიმდინარე ან ახალ ბრაუზერის ფანჯარაში. ფრეიმების გამოყენებისას, HTML დოკუმენტების ჩატვირთვის სქემა განსხვავდება ჩვეულებრივისგან და მთავარი განსხვავებაა HTML დოკუმენტის ჩატვირთვის შესაძლებლობა სხვა ჩარჩოდან ერთ ჩარჩოში. <br>დოკუმენტის კონკრეტულ ჩარჩოში ჩასატვირთად გამოიყენეთ ატრიბუტი <b>სამიზნე</b>ტეგი <b><a> </b>. როგორც ატრიბუტის მნიშვნელობა <b>სამიზნე</b>გამოიყენება ჩარჩოს სახელი, რომელშიც ჩაიტვირთება ატრიბუტით განსაზღვრული დოკუმენტი <b>სახელი</b>ტეგი <b><frame> </b>. ასევე აღსანიშნავია, რომ ჩარჩოს სახელი უნდა იწყებოდეს რიცხვით ან ლათინური ასოებით. შემდეგი სახელები გამოიყენება როგორც რეზერვირებული სახელები:</p> <p>გარე ბმულებისთვის, თქვენ უნდა დააყენოთ სამიზნე ატრიბუტი ან _top ან _blank, რათა უზრუნველყოთ, რომ მესამე მხარის პროექტები არ გამოჩნდეს თქვენს ჩარჩოებში, არამედ შეავსოთ მთელი ბრაუზერის ფანჯარა.</p> <p>შემდეგი მაგალითი გვიჩვენებს HTML დოკუმენტს, რომელშიც მარჯვენა ჩარჩო იტვირთება გვერდი ზედა ჩარჩოში განთავსებული ბმულიდან. დოკუმენტის ბმული, რომელიც გაიხსნება მარჯვენა ჩარჩოში:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>მარჯვენა ჩარჩოს სახელი ეძლევა <i>ჩარჩო_მარჯვნივ</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>დოკუმენტის მითითებულ ჩარჩოში ჩასატვირთად გამოიყენეთ კონსტრუქცია <i>target="frame_right"</i>, როგორც ნაჩვენებია მაგალითში:</p> <h3>მაგალითი: ბმული სხვა ჩარჩოზე</h3> <ul><li>თავად სცადე »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>ბმული სხვა ჩარჩოზე</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>თქვენი ბრაუზერი არ აჩვენებს ჩარჩოებს</p>