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

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

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

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

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

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

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

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

შინაარსი

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

ცხრილების გამოყენება

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

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

როლების გამიჯვნა

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

ბლოკების გამოყენება

ბლოკის განლაგებაში, ტეგი აქტიურად გამოიყენება

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

ტეგის გამოყენება

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

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

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

ვებსაიტის ბლოკის განლაგებას აქვს შემდეგი უპირატესობები:

Შემდგომი განვითარება

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

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

ამჟამად გვერდის შესაქმნელად გამოიყენება Flex-box და bootstrap. ისინი მნიშვნელოვნად ამცირებენ კოდს და აჩქარებენ და აადვილებენ მაღალი ხარისხის საპასუხო დიზაინის შექმნას. ისინი საშუალებას გაძლევთ გადაიტანოთ ბლოკები მთელი გვერდის გატეხვის გარეშე.

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

Div განლაგება არის ვებგვერდის შექმნის აქტუალური მოდელი.

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

HTML დოკუმენტის ნაკადი

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

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

ამ ორი კატეგორიის მთავარი წარმომადგენლები არიან div და span ტეგები.

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

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

DIV ვებსაიტის განლაგება

ასე რომ, DIV ბლოკების გამოყენება დაიწყო საიტის აღსანიშნავად. მათი გამოყენებით შესაძლებელი გახდა ძირითადი განლაგების დახატვა და დამატებითი ბლოკების შექმნა ყველა საჭირო ტიპის შინაარსისთვის.

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

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

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

სათაური
შინაარსი
ქვედა კოლონტიტული

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

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

მთავარი
- სათაური
- შინაარსი
- ქვედა კოლონტიტული

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

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

HTML ჩარჩო

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

შინაარსი

ნავიგაცია

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

დროა გაეცნოთ სტილებს და თვისებებს, რომლებიც გამოიყენება საიტის div განლაგებისთვის.

CSS სტილები

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

ათწილადი

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

პატარა უკან დახევა. როდესაც ბლოკს მივანიჭებთ სტილს, ის შეცვლის მის თვისებებს (ზომა, მდებარეობა) მშობელ კონტეინერთან შედარებით.

float თვისებას აქვს ოთხი მნიშვნელობა: none, right, left, inherit.

ჩვენ გვაინტერესებს "მარცხენა" და "მარჯვენა" მნიშვნელობა.

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

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

Nav (float:მარცხნივ; ) .content (float:მარჯვნივ; )

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

მინდვრები CSS-ში: ზღვარი და padding

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

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

margin თვისებას აქვს შემდეგი მნიშვნელობები: [მნიშვნელობა | ინტერესი | ავტო] (1,4) | მემკვიდრეობით.

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

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

მთავარი (ზღვარი ზედა: 10 პიქსელი; )

ახლა ჩვენს მთავარ ბლოკს ექნება 10 პიქსელის ზედა ბალიშები.

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

padding თვისება პასუხისმგებელია ამაზე, რომელსაც აქვს შემდეგი მნიშვნელობები: [მნიშვნელობა | პროცენტი] (1, 4) | მემკვიდრეობით

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

Nav (float:მარცხნივ; padding-left: 15px;) .content (float:right; padding-right: 20px; )

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

ვიდეო სტატიისთვის:

დასკვნა

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

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

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

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

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

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

Რა მოხდა ვებსაიტის განლაგების დაბლოკვადა რითი ჭამთ?

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

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

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

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

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

ველები (შეფუთვა)- გამოყავით ბლოკის შიგთავსი მისი ჩარჩოდან ისე, რომ ტექსტი, მაგალითად, ბლოკის კედლებამდე არ იყოს „ჩამოკიდებული“.

მინდვრები- ეს არის ცარიელი სივრცე სხვადასხვა ბლოკებს შორის, რაც საშუალებას აძლევს ორ ბლოკს განლაგდეს ერთმანეთთან შედარებით მოცემულ მანძილზე.

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

საიტის განლაგების დაბლოკვა. ტეგები

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

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

აბზაცის ტექსტი.

ყოველთვის აღინიშნება ასო p და სხვა არაფერი. ასე ქვია.

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

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

div ტეგი

div ტეგი არის ბლოკის განლაგების საფუძველი. ეს არის სწორედ კუბურები, საიდანაც აგებულია მთელი საიტი. ეს ტეგი ნეიტრალურია. სტანდარტული HTML ტეგებისგან განსხვავებით, რომლებიც მკაცრად არის დაკავშირებული მათ შინაარსთან (p - აბზაცებთან, a - ბმულებთან, img - სურათებთან), div ტეგი შეიძლება შეიცავდეს ყველაფერს და იმდენს, რამდენიც გსურთ. ჩათვალეთ ის, როგორც დიდი ყუთი, სადაც ყველა სათამაშოა გადაყრილი.

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

div ტეგს, ისევე როგორც ნებისმიერ სხვა ტეგს, აქვს თავისი ატრიბუტები.

ატრიბუტი- ტეგის აღწერითი მახასიათებლები. ანუ რა შეუძლია და როგორ. მაგალითად, ავიღოთ სურათის ტეგი:

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

ასეთი ჩანაწერის გაშიფვრა არ არის რთული. ტეგი მიუთითებს, რომ გვერდის ამ ადგილას თქვენ უნდა დაურთოთ სურათი risunok.jpg სურათების საქაღალდედან. სურათის სიგანე 200 პიქსელია, სიმაღლე 50 პიქსელი. და გროვას დაემატა ალტერნატიული ტექსტი, რომელიც განმარტავს რა არის ნაჩვენები სურათზე.

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

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

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

div ტეგს აქვს მხოლოდ ორი ატრიბუტი:

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

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

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

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

Გაგრძელება იქნება. Არ დაიკარგო!

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

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

რა ითვლება ბლოკის ელემენტად?

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

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

ბლოკი 1

ბლოკი 2

ბლოკი 3

მოდით დავამატოთ სიგანის მნიშვნელობა თითოეული ბლოკისთვის:

ბლოკი 1

ბლოკი 2

ბლოკი 3

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

ახლა ჩნდება კითხვა, როგორ მოვახდინოთ პოზიცია div ბლოკები ერთ ხაზზე, ერთი მეორის მიყოლებით?

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

float თვისებას აქვს შემდეგი მნიშვნელობა:

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

მოდით დავამატოთ float:left ჩვენს ბლოკებს ისე, რომ ბლოკები მარცხნივ იყოს გასწორებული:

ბლოკი 1

ბლოკი 2

ბლოკი 3

შედეგად, ბლოკები გაფორმებულია ერთ ხაზზე. კარგი, დავუშვათ, გვინდოდა კიდევ ერთი დივის დამატება ბოლოში და ამას გავაკეთებთ float თვისების მითითების გარეშე:

ბლოკი 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

ბლოკი 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

ბლოკი 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

ნაწილი 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ბლოკი 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

ბლოკი 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

ბლოკი 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

ნაწილი 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

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

მოდით დავამატოთ ბლოკ 4-ს თვისება clear:left, რომელიც ხელს შეუშლის ამ ელემენტის მოძრაობას მარცხენა მხარეს სხვა მცურავი ელემენტების გარშემო.