ტეგები, რომლებიც განსაზღვრავენ აბზაცს, სივრცეს, HTML ბლოკს და აბზაცს

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

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

  -

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

განიხილეთ ქვემოთ მოცემული კოდი:

შედეგი:

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

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

ტეგები არ შეიძლება შეიცავდეს სხვა ან

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

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

დაბლოკვა

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

HTML სივრცე სპეციალური სიმბოლოების ცხრილიდან

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

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

HTML აბზაცის ჩვენების გზები

აბზაცის გამოტანის მაგალითები.

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

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

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

HTML მარცხენა ტექსტის შეწევა, გამოიყენეთ სივრცის კოდი

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

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

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

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

ამ პრობლემის ერთ-ერთი გამოსავალი არის ჩაღრმავების დაყენების შემდეგი მეთოდი.

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

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

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

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

HTML ტექსტის ჩაღრმავება, მეთოდი სამი.

აქ ჩვენ გამოვიყენებთ CSS Cascading Style Sheets-ის ტექსტის შეწევის თვისებას.

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

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

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

HTMLჩაღრმავებატექსტი, მუშაობს CSS სტილი - ტექსტი-შეწევა

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

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

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

მარცხნივ გამოიყენეთ სურათი

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

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

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

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

პუნქტი 1

მე-2 პუნქტი

თითოეული აბზაცი იწყება ტეგით

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

.

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

მაგალითი 7.1 გვიჩვენებს აბზაცების გამოყენებას ხაზებს შორის შეწევის შესაქმნელად.

მაგალითი 7.1. პარაგრაფების გამოყენება

ზოგან ჯერ კიდევ თებერვალია, ზოგან უკვე აპრილი.

დრო გადის, მარადიული თვლა: წლიდან წლამდე, საუკუნემდე საუკუნეში...

ყველაფერში - მის აუჩქარებელ ტემპში, შავ სირბილში.

წელიწადში ოცდახუთი კვირაა სიხარული და მწუხარება.

თებერვლიდან ოცდახუთი კვირის ვარ და აპრილიდან ოცდახუთი კვირის.

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

ჩემი ხმაურიანი ფარსი სადღაც ღრუბლებისკენ მიფრინავს.

მ.შჩერბაკოვი

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 7.1.

ბრინჯი. 7.1. შეწევა ვებ გვერდზე აბზაცების გამოყენებისას

როგორც ნახატიდან ჩანს, ტეგის გამოყენებისას

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

ამრიგად, 7.1 მაგალითის ტექსტი, ხაზის წყვეტების გათვალისწინებით, გარდაიქმნება შემდეგნაირად (მაგალითი 7.2).

მაგალითი 7.2. მონიშნეთ

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

მ.შჩერბაკოვი

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

ჩამოთვლილია სურათები ბმულები ცხრილები ფორმები ვიდეო აუდიო HTML მითითება CSS მითითება ვებსაიტის განლაგება

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

ჩვენს სასწავლო html გვერდზე ჩვენ დავამატეთ (ისრებით მონიშნული, ერთხელ): მე-2 დონის სათაური - H2 ტეგი, ორი მე-3 დონის სათაური - H3 ტეგი, კიდევ ერთი აბზაცი - P ტეგი, ბურთულებიანი სია - Ul და რამდენიმე ფიზიკური ფორმატირების ტეგი . მოდით გავხსნათ გვერდი ბრაუზერში:

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

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

ფიზიკური ფორმატირების ტეგები

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

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

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

აქ არის კიდევ რამდენიმე ფიზიკური ტექსტის ფორმატირების ტეგი: Q - ხაზს უსვამს ციტატას ხაზში. Blockquote ბლოკის ელემენტი - ეს ტეგი შეიძლება შეიცავდეს რამდენიმე აბზაცს.

კოდის ტეგი გამოიყენება კოდის ფრაგმენტების აღსანიშნავად, ის უნდა იყოს გამოყენებული Br სტრიქონების წყვეტებითა და უწყვეტი ადგილებით: მათი აღსანიშნავად გამოიყენება სპეციალური სიმბოლოები. სიმბოლო (პირველი სიმბოლო - ამპერსანდი: კლავიში 7 დაჭერით Shift ინგლისურ განლაგებაში). მაგრამ Pre tag აჩვენებს პროგრამის კოდს, როგორც არის, ინტერვალით და იმდენი ხაზით, რამდენიც არის კოდში.

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

html სიების შექმნა

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

- ჩვენ მივიღებთ სიას კვადრატული მარკერებით.

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

ბურთულების გარდა, არის დანომრილი სიები, რომლებიც მითითებულია Ol ტეგით და სიის ელემენტები, ისევე როგორც ბურთულები, Li tag-ით. გარდა ამისა, ორივე ტიპის სიისთვის შეგიძლიათ შექმნათ წყობილი სიები. მოდით გავართულოთ დავალება და შევცვალოთ ჩვენი სია მაგალითის გვერდზე შემდეგში:



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

აბზაცები და სათაურები

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

მონიშნეთ

ან ჩვენ ვყოფთ გვერდს აბზაცებად (აბზაცებად)

თუ გახსოვთ, მაშინ ტეგით

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

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

ახლა ყველაზე მნიშვნელოვანი არის ტეგი

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

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

აბზაცების მაგალითი HTML-ში

პირველი აბზაცი.

მეორე აბზაცი.





შედეგი ბრაუზერში

პირველი აბზაცი.

მეორე აბზაცი.

ზოგადად, დახურვის ტეგი

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

ტეგზე

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

ტეგები

-

ან HTML გვერდის სათაურები

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

ყველაზე მნიშვნელოვანი სათაური (პირველი დონე, ზედა) და

ყველაზე ნაკლებად მნიშვნელოვანი (მეექვსე დონე, ქვედა). Მაგალითად,

შეიძლება იყოს გვერდის სათაური,

- მისი სექციები,

- ქვესექციები და ა.შ.

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

სინტაქსი HTML-ში სათაურების დასაწერად

პირველი დონის სათაური

მეორე დონის სათაური

მესამე დონის სათაური

მეოთხე დონის სათაური

მე-5 დონის სათაური

მეექვსე დონის სათაური

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

HTML-ში სათაურების გამოყენების მაგალითი

პირველი დონის სათაური

პარაგრაფი.

მეორე დონის სათაური

პარაგრაფი.

პარაგრაფი.





შედეგი ბრაუზერში

პირველი დონის სათაური

პარაგრაფი.

მეორე დონის სათაური

პარაგრაფი.

პარაგრაფი.

Საშინაო დავალება.

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

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

   ,

   და

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

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