html დოკუმენტის სტრუქტურა არის მთავარი ტეგები. სწორი HTML დოკუმენტის სტრუქტურა და გვერდის კოდი

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 Ჩემი გვერდი

  • ძირითადი ჰიპერტექსტის მარკირების ენის ტეგები
  • ახალი ტეგები, რომლებიც მოყვება html 5-ს
  • გვერდის სტრუქტურირების მაგალითი

მუხლი 1

გთავაზობთ პირველი სტატიის ტექსტს.

მუხლი 2

გთავაზობთ მეორე სტატიის ტექსტს.

ამ ბლოგის სტატიის ავტორი

Ჩემი გვერდი

საიტის სტრუქტურის შექმნა html-ის გამოყენებით

  • ძირითადი ჰიპერტექსტის მარკირების ენის ტეგები
  • ახალი ტეგები, რომლებიც მოყვება html 5-ს
  • გვერდის სტრუქტურირების მაგალითი
    •
    • ძირითადი ჰიპერტექსტის მარკირების ენის ტეგები
    • ახალი ტეგები, რომლებიც მოყვება html 5-ს
    • გვერდის სტრუქტურირების მაგალითი

    მუხლი 1

    გთავაზობთ პირველი სტატიის ტექსტს.

    მუხლი 2

    გთავაზობთ მეორე სტატიის ტექსტს.

    ამ ბლოგის სტატიის ავტორი


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

    მოდი, დებრიფინგი პირველი ხაზიდან დავიწყოთ.

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

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

    ლოგიკურად, შემიძლია ვივარაუდო, რომ თქვენს თავში მაშინვე გაჩნდა კითხვა: „რა გაუგებარი კოდია განთავსებული პროგრამის ამ ნაწილში? ის საერთოდ არ ჰგავს html-ს!” და პასუხი ასეთია: სტილის ტეგში ჩაწერილი არ არის html, არამედ css კოდი. როგორც უკვე აღვნიშნეთ, ეს არის ინსტრუმენტი ვებსაიტების გარეგნობის ფორმატირებისთვის.

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

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

    ამრიგად, კოდი შეიცავს:

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

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

      და
    • . ბლოკში სტილის კლასის შინაარსით – სათაურის ტეგები

      და პარაგრაფი

      ახლა მოდით უფრო ახლოს მივხედოთ ბლოკს

      .

      HTML თუ მაინც HTML 5? როგორ ამოვიცნოთ?

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

      ამრიგად, სათაური არის ჰიპერტექსტის მარკირების ენის ელემენტი, რომელიც ჩვეულებრივ ქმნის საიტის გვერდების ან სექციების სათაურს, რომელშიც ჩასმულია სათაური. აღსანიშნავია, რომ Internet Explorer ბრაუზერს არ აქვს 8 ვერსიამდე სათაურის მხარდაჭერა, მაგრამ აჩვენებს მის შინაარსს.

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

    • .

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

      ინსტრუმენტები ვებ რესურსების შესაქმნელად

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

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

      რა არის HTML?

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

      გაითვალისწინეთ, რომ HTML არის მარკირების ენა და არა პროგრამირების ენა. ამ ენას არავითარი ლოგიკური ფუნქცია არ გააჩნია და მასში რაიმე მათემატიკური გამოთვლების შესრულება შეუძლებელია. HTML გვერდებს აქვთ გაფართოება .htmlან .htmდა მუშავდება ბრაუზერების მიერ - IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera და ა.შ.

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

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

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

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

      მოდით შევხედოთ რა შედის ამ სტრუქტურაში თანმიმდევრობით:

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

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

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

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

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

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

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

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

      ამ სტატიაში ჩვენ თანდათან შევქმნით HTML გვერდს და დაამშვენებს მას სემანტიკური HTML5 ტეგებით.

      ფიგურა - სემანტიკური სტრუქტურა HTML5 გვერდისთვის.

      DOCTYPE და მეტა თეგები გვერდის სათაურში

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

      Გვერდის სათაური

      მე დავამატე ტეგი რომელიც პასუხისმგებელია საკვანძო სიტყვებზე. და მონიშნეთ რომელიც პასუხისმგებელია გვერდის აღწერაზე. SEO ოპტიმიზაციისთვის საჭიროა ეს ტეგები. ასევე აუცილებელია ტეგის სწორად შევსება . გვერდის სათაური უნდა იყოს უნიკალური მთელი საიტისთვის და სათაურში შეიცავდეს გვერდის მთელ არსს, რომლისთვისაც არის მითითებული.</p><p>მოდით წავიდეთ უფრო შორს. HTML5 წარმოგიდგენთ ახალ ტეგებს, რომლებიც გამოიყენება დოკუმენტში სემანტიკური მარკირების შესაქმნელად. ეს არის ჰედერი, ნავი, მთავარი, სტატია, გვერდი, ქვედა კოლონტიტული და ა.შ. ჩვენების თვალსაზრისით, ისინი მუშაობენ ისევე, როგორც ჩვეულებრივი. <div>ტეგები, ანუ ეს არის ბლოკის ელემენტები. Მაგრამ თუ <div>არ აქვს სემანტიკური დატვირთვა, მაშინ ჰედერი, ნავი, მთავარი და სხვა მხოლოდ მნიშვნელოვნად უნდა იქნას გამოყენებული.</p><h3>Გვერდის სათაური</h3><p>გვერდის სათაური დაფორმატებულია სათაურის ტეგში. გთხოვთ გაითვალისწინოთ, რომ გვერდის სათაური იწერება h1 ტეგის გამოყენებით.</p><p> <!-- Header страницы --> <header> <h1>საიტის სათაური</h1> </header> </p><p>თუ სათაურის გვერდით სლოგანიც გვაქვს, მაშინ მას ვდებთ p, div ან span-ში.</p><p> <!-- Header страницы --> <header> <h1>საიტის სათაური</h1> <p>საიტის სლოგანი</p> </header> </p><p><b>შენიშვნა H1 ტეგის შესახებ</b></p><p>უნდა აღინიშნოს, რომ HTML5-ში H1 ტეგი გამოიყენება კონტეინერის სათაურის მითითებისთვის, რომელშიც ის მდებარეობს (ეს შეიძლება იყოს სათაური, სექცია, სტატია და ა.შ.)</p><p>HTML5 ტეგების გამოჩენამდე სემანტიკა გარკვეულწილად განსხვავებული და განსხვავებული იყო. ასე რომ, HTML4-ში შეიძლება იყოს მხოლოდ ერთი H1 სათაური თითო გვერდზე! როგორც წესი, ეს იყო სტატიის სათაური ან გვერდის სათაური (მაგალითად, თუ ეს არის კატეგორიის გვერდი, რომელზეც ნაჩვენებია რამდენიმე სტატია.) H2 გამოიყენებოდა ქვესათაურებისთვის, ან მთავარი სტატიის სექციებისთვის. H3 ქვესექციებისთვის და ასე შემდეგ.</p><h3>გვერდის ნავიგაცია</h3><p>საიტის მთავარი ნავიგაციის დიზაინი უნდა შეიცავდეს nav tag-ში. თქვენ ასევე უნდა გახსოვდეთ, რომ კარგ პრაქტიკად ითვლება ნავიგაციის დიზაინი სიის ელემენტებით.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>მთავარი</li> <li>პორტფოლიო</li> <li>გალერეა</li> <li>კონტაქტები</li> </ul> </nav> </p><h3>შინაარსი გვერდზე</h3><p>გვერდის ძირითადი შინაარსი ფორმატირებულია მთავარ ტეგში. ეს შეიძლება იყოს ერთი სტატია, ან რამდენიმე სტატიის გადახედვა, თუ ვსაუბრობთ ბლოგის გვერდზე რამდენიმე ჩანაწერით. თქვენ არ შეგიძლიათ განათავსოთ გვერდითი ზოლი, გვერდის სათაური, ქვედა კოლონტიტული ან მთავარი ნავიგაცია მთავარ ტეგში!</p><p> <!-- Основное содержимое страниц --> <main>...მთავარი გვერდის შინაარსი...</main> </p><h3>სტატიის დიზაინი</h3><p>სტატიის ტეგი გამოიყენება სტატიების შესაფუთად. ზოგადად, ეს ტეგი შეიცავს შინაარსის ბლოკს, რომელიც შეიძლება ამოღებულ იქნას გვერდის კონტექსტიდან და გამოიყენოს ცალკე სხვაგან. ეს შეიძლება იყოს სტატია (სტატიის სრული ტექსტი ან გადახედვა), პოსტი ფორუმზე და ა.შ.</p><p>ქვემოთ მოცემულ მაგალითში მე ვაჩვენე სტატიის დიზაინი კონტექსტში, მთავარი ტეგის შიგნით. სტატიას აქვს სათაურის ბლოკი სტატიის სათაურით. სტატიის გამოქვეყნების თარიღი მითითებულია სპეციალური დროის ტეგით, რომელიც გამოსახულია როგორც ჩვეულებრივი ინლაინ ელემენტი. დროის ტეგს აქვს სპეციალური ატრიბუტი, რომელშიც გამოქვეყნების დრო უნდა იყოს მითითებული მანქანის ფორმატში. ეს შეიძლება იყოს მხოლოდ datetime="2015-09-30" ან საათით წუთით და წამით datetime="2015-09-30T15:25:55" . pubdate პარამეტრი მიუთითებს, რომ სტატია გამოქვეყნდა მისი დაწერის დროს. თუ ეს სიახლეა, მაშინ შეიძლება ახალი ამბების დრო იყოს ერთი, ხოლო გამოქვეყნების დრო განსხვავებული, ამისათვის საჭიროა ორჯერ მიუთითოთ დროის ნიშანი და განათავსოთ pubdate მხოლოდ იმ ტეგში, სადაც მითითებულია გამოქვეყნების დრო.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>სტატიის სათაური</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30 სექტემბერი</time> </header> <!-- Подзаголовок страницы --> <h2>სტატიის ქვესათაური</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>ზემოთ მოყვანილი მაგალითიდან ხედავთ, რომ სათაური და ქვედა კოლონტიტული ტეგები გამოყენებული იყო სტატიის შიგნით სტატიის სათაურის და ქვედა კოლონტიტულის ხაზგასასმელად.</p><h3>გვერდითი ზოლი ან სვეტი ვიჯეტებით</h3><p>თითოეული ცალკეული გვერდითი ელემენტისთვის ჩვენ ვიყენებთ გვერდითი ბლოკს. მის შიგნით სათაური დაფორმატებულია h1 ტეგით. ასე რომ, გვერდითი ზოლის სვეტი შეიძლება ასე გამოიყურებოდეს:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>ვიჯეტის სათაური</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>ბოლო ნოტები</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>პოპულარული კომენტარები</h1> ... </aside> </div> </p><h3>განყოფილების ტეგი</h3><p>განყოფილების ტეგი გამოიყენება თემატურად დაკავშირებული შინაარსის ჯგუფის ან მონაკვეთის წარმოსაჩენად. მისი გამოყენება სტატიის მსგავსია, მთავარი განსხვავება ისაა, რომ ელემენტის შინაარსს არ აქვს მნიშვნელობა. <section>თავად გვერდის კონტექსტის გარეთ. რეკომენდებულია ტეგების გამოყენება ( <h1> – <h6>) განყოფილების თემის მითითება.</p><p>სტატიის მაგალითის მისაცემად, რომელსაც ახლა კითხულობთ, შეგიძლიათ თითოეული აბზაცი ჩაალაგოთ ტეგში <section>. მაგალითად, განყოფილების ტეგი შეიძლება გამოყენებულ იქნას სადესანტო გვერდზე შინაარსის ბლოკების ხაზგასასმელად. ეს ჰგავს div ელემენტის განმარტებას, რომელიც ხშირად გამოიყენება კონტეინერად შინაარსისთვის. განსხვავება ისაა, რომ div-ს არ აქვს სემანტიკური მნიშვნელობა და ის არაფერს ამბობს მის შიგნით არსებულ შინაარსზე. განყოფილების ტეგი, პირიქით, გამოიყენება ნათლად მიუთითოს, რომ მასში არსებული შინაარსი მნიშვნელობით არის დაკავშირებული. თქვენ შეგიძლიათ შეცვალოთ თქვენი ზოგიერთი div ტეგი განყოფილების ტეგებით, მაგრამ ყოველთვის დაუსვით საკუთარ თავს შეკითხვა: "ეს კონტენტი დაკავშირებულია თუ არა?"</p><p>განყოფილების ტეგის გამოყენების მაგალითი ქალაქების ჩამონათვალში:</p><p> <h1>ღონისძიება გარდა</h1> <section> <header> <h2>ქალაქები</h2> </header> <p>შემოგვიერთდით ამ ქალაქებში 2010 წელს.</p> <section> <header> <h3>სიეტლი</h3> </header> <p>მიჰყევით ყვითელი აგურის გზას.</p> <section> <header> <h3>ბოსტონი</h3> </header> <p>ეს არის Beantown მისი მეგობრები.</p> <section> <header> <h3>მინეაპოლისი</h3> </header> <p>Ეს ისეთი <em>სასიამოვნო</em>.</p> <small>განთავსება არ არის გათვალისწინებული.</small> </p><h3>საიტის ქვედა კოლონტიტული - Footer</h3><p>საიტის ქვედა კოლონტიტული შექმნილია ტეგით <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 საიტი Copyright</p> </footer> </p><h3>დასკვნა</h3><p>თქვენ შეგიძლიათ გამოიყენოთ HTML5 outliner ინსტრუმენტი გვერდის სტრუქტურის შესამოწმებლად. ის აჩვენებს გვერდის სტრუქტურას ბლოკების და სათაურების მიხედვით.</p><p>სემანტიკა HTML5-ში არ შემოიფარგლება სტატიაში ზემოთ მოცემული ტეგებით. მაგრამ ზემოთ მოყვანილი მაგალითების გამოყენებით, შეგიძლიათ განაახლოთ თქვენი მარკირება და გახადოთ თქვენი საიტი უფრო საძიებო სისტემებზე მეგობრული, რაც გამოიწვევს თქვენი საიტის უფრო მაღალ რეიტინგს ძიების შედეგებში.</p><p>ამ თემის გასაგრძელებლად, შეგიძლიათ შეისწავლოთ სხვა ახალი HTML5 ტეგები. ასევე მონაცემთა დიზაინისა და სტრუქტურირების მიკრო ფორმატებს, როგორიცაა schema.org</p><p><b>მნიშვნელოვანი შენიშვნა HTML5 ტეგების გამოყენების შესახებ.</b>სპეციფიკაცია არ აკონკრეტებს სემანტიკური ტეგების გამოყენების მკაცრ წესებს; ის მხოლოდ რეკომენდაციებს იძლევა მათი გამოყენების შესახებ. თუ არ გესმით ან არ იცით სად და რომელი HTML5 ტეგი გამოიყენოთ, უმჯობესია გამოიყენოთ div, რათა არ დააზიანოთ ან დაარღვიოთ დოკუმენტის სტრუქტურა.</p><p><b>სტატიები და მასალები</b></p> <ul><li>1. HTML დოკუმენტები სტრუქტურული დოკუმენტებია.</li> <li>2. ელემენტების სახელები შეიძლება ჩაიწეროს ნებისმიერ შემთხვევაში.</li> <li>3. ატრიბუტების სახელები შეიძლება ჩაიწეროს ნებისმიერ შემთხვევაში.</li> <li>4. ატრიბუტის მნიშვნელობები დამოკიდებულია ქეისზე, განსაკუთრებით მისამართებზე (Unix ოპერაციული სისტემების მახასიათებელია სიმბოლოების განსხვავებული ინტერპრეტაცია სხვადასხვა რეესტრში, ამიტომ ფაილები</li> </ul><p>სურათი .gif და picture.GIF განსხვავებულია!).</p> <ul><li>5. ელემენტების სახელები არ შეიძლება შეიცავდეს სივრცეებს.</li> <li>6. თუ ატრიბუტების მნიშვნელობები შეიცავს სივრცეებს, ისინი უნდა იყოს ბრჭყალებში.</li> <li>7. დამატებითი სივრცეები, ჩანართები და ვაგონების დაბრუნება იგნორირებულია და შეკუმშულია ერთ სივრცეში.</li> <li>8. ელემენტები შეიძლება მოთავსდეს ერთმანეთში. ამ შემთხვევაში უნდა დაიცვან ბუდეების წესი. ჩადგმული ელემენტის შიგნით, გახსნის ტეგის გარდა, უნდა იყოს დახურვის ტეგიც. კვეთა არასწორია:</li> </ul><h1>HTML დოკუმენტის სტრუქტურა</h1> <p>9. უცნობი ელემენტები და ატრიბუტები იგნორირებულია ბრაუზერების მიერ („შეცდომის ტოლერანტობა“).</p> <p>დოკუმენტების უმეტესობას აქვს სტანდარტული ელემენტები, როგორიცაა სათაური, აბზაცები ან სიები. HTML ტეგების გამოყენებით, შეგიძლიათ ამ ელემენტების ეტიკეტირება, ვებ-ბრაუზერებს მიაწოდოთ მინიმალური ინფორმაცია ამ ელემენტების საჩვენებლად, ამასთან, ზოგადად, შეინარჩუნოთ დოკუმენტების საერთო სტრუქტურა და ინფორმაციული სისრულე. ყველაფერი, რაც საჭიროა HTML დოკუმენტის წასაკითხად, არის ვებ ბრაუზერი, რომელიც ინტერპრეტაციას უკეთებს HTML ტეგებს და აჩვენებს დოკუმენტს ავტორის მიერ განზრახული.</p> <p>როდესაც ვებ ბრაუზერი იღებს დოკუმენტს, ის განსაზღვრავს, თუ როგორ უნდა მოხდეს დოკუმენტის ინტერპრეტაცია. პირველივე ტეგი, რომელიც გამოჩნდება დოკუმენტში, უნდა იყოს ტეგი <HTML>. ეს ტეგი ეუბნება ვებ ბრაუზერს, რომ დოკუმენტი დაწერილია HTML-ის გამოყენებით.</p> <p><b>კომენტარები HTML-ში.</b>ნებისმიერი ენის მსგავსად, HTML გაძლევთ საშუალებას ჩაწეროთ კომენტარები დოკუმენტის სხეულში, რომლებიც ინახება დოკუმენტის ქსელში გადაცემისას, მაგრამ არ არის ნაჩვენები ბრაუზერის მიერ. ხშირად, გარკვეული ტეგები ან მთელი სინტაქსური სტრუქტურები „დამალულია“ ბრაუზერების ძველი ვერსიების კომენტარებში, რომლებსაც არ შეუძლიათ მათი დამუშავება. კომენტარები შეიძლება გამოჩნდეს დოკუმენტში ნებისმიერ ადგილას და ნებისმიერი რაოდენობით. უნდა გვახსოვდეს, რომ კომენტარები ზრდის დოკუმენტის ზომას და, შესაბამისად, დატვირთვის დროს.</p> <p><b>დოკუმენტის ზოგადი სათაური ნაწილი.</b>დოკუმენტის სათაური ტეგი უნდა იქნას გამოყენებული ტეგის შემდეგ დაუყოვნებლივ <HTML>და არსად სხვაგან დოკუმენტის სხეულში. ეს ტეგი წარმოადგენს დოკუმენტის ზოგად აღწერას. დაწყების ტეგი <HEAD>მოთავსებულია ტეგის წინ <TITLE>და სხვა ტეგები, რომლებიც აღწერს დოკუმენტს და დამთავრებული ტეგი</head>განთავსებულია დოკუმენტის აღწერილობის დასრულებისთანავე.</p> <p><b>დოკუმენტის სათაური.</b>ვებ ბრაუზერების უმეტესობა აჩვენებს ტეგის შინაარსს <TITLE>დოკუმენტის შემცველი ფანჯრის სათაურში და სანიშნეების ფაილში, თუ მხარდაჭერილია ვებ-ბრაუზერის მიერ. სათაური შეზღუდულია ტეგებით <TITLE>და, მოთავსებულია ტეგების შიგნით . დოკუმენტის სათაური არ ჩანს, როდესაც თავად დოკუმენტი გამოჩნდება ფანჯარაში.

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

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

      სათაურის დონეები<Нх>. სათაურების პირველი დონე (ყველაზე დიდი) აღინიშნება ნომრით 1, შემდეგი 2-ით და ასე გრძელდება 6-მდე. ბრაუზერების უმეტესობა მხარს უჭერს სათაურების ექვსი დონის ინტერპრეტაციას, თითოეული მათგანის სტილს განსაზღვრავს. უმეტეს შემთხვევაში, ასეთი სათაურის ტექსტი გახდება თამამი და ტექსტის შემდეგ იქნება ცარიელი ხაზი. მნიშვნელოვანია, რომ ეს ტეგები განსაზღვრონ დოკუმენტის ლოგიკური სტრუქტურა და მონაწილეობა მიიღონ ინტერნეტ საძიებო სისტემების ინდექსირებაში. მეექვსე დონის ზემოთ სათაურები არ არის სტანდარტული და შეიძლება არ იყოს მხარდაჭერილი ბრაუზერის მიერ.

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

      წინასწარ ფორმატირებული ტექსტური ტეგი 

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

      ტეგების სია. HTML დოკუმენტში არის სამი ძირითადი ტიპის სიები: დანომრილი, ბურთულები და აღწერილობის სია.
      

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

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

       
        და მთავრდება ტეგით
       
    • .
      

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

      დანომრილი სია იწყება საწყისი ტეგით 
        და მთავრდება ტეგით
      .  სიის თითოეული ელემენტი იწყება ტეგით<ы>.
      

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

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

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

      

      საჭირო პარამეტრს აქვს იგივე სინტაქსი, როგორც სტანდარტული URL.  ეს URL ეუბნება ბრაუზერს სად არის
      

      ნახატი.  ნახატი უნდა იყოს შენახული ბრაუზერის მიერ მხარდაჭერილ გრაფიკულ ფორმატში.  დღეს ეს არის GIF, JPG, PNG ფორმატები.  ისინი მხარს უჭერენ ბრაუზერების უმეტესობას.
      

      ALT = "ტექსტი"
      

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

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

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

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

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

      <А HREF="URL">ტექსტი-ან-სურათი-რომელიც-მოინიშნება-როგორც-ბმული
      


      მონიშნეთ<А HREF="URL">ხსნის ბმულის აღწერას და ტეგს- ხურავს.  ნებისმიერი ტექსტი, რომელიც მდებარეობს ამ ორ ტეგს შორის, სპეციალური გზით არის მონიშნული ვებ ბრაუზერის მიერ.  როგორც წესი, ეს ტექსტი ჩანს ხაზგასმული და მონიშნული.  გამოსახულება ჩარჩოშია მართკუთხა ჩარჩო.  ტექსტი, რომელიც წარმოადგენს URL არ არის ნაჩვენები ბრაუზერის მიერ, მაგრამ გამოიყენება მხოლოდ მისი განზრახ მოქმედებების შესასრულებლად, როდესაც ბმული გააქტიურებულია (ჩვეულებრივ, მონიშნული ან ხაზგასმული ტექსტის დაწკაპუნებით).
      

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

      ყოველი HTML დოკუმენტი უნდა დაიწყოს ტეგით <
HTML>
და დასრულდება ტეგით HTML>
.  ეს ტეგები მიუთითებს, რომ მათ შორის ხაზები წარმოადგენს ერთ HTML დოკუმენტს.  გარდა ამისა, თქვენ ხედავთ, რომ HTML ფაილი მთლიანობაში არის HTML ენის ელემენტი.
      ასევე, HTML დოკუმენტი უნდა შეიცავდეს HEAD (დოკუმენტის ინფორმაცია) და BODY (დოკუმენტის ორგანო) ელემენტებს.
      დოკუმენტის განყოფილებაHEAD
      დოკუმენტის HEAD განყოფილება განსაზღვრავს მის სახელს და ასევე შეიცავს დამატებით ინფორმაციას დოკუმენტის შესახებ ბრაუზერისთვის.  ეს განყოფილება არჩევითია, მაგრამ რეკომენდირებულია ყოველთვის გამოიყენოთ იგი თქვენს HTML დოკუმენტებში, რადგან კარგად დაწერილი სათაური შეიძლება საკმაოდ სასარგებლო იყოს.
      სათაურის განყოფილება იწყება ტეგით <
HEAD>
და მაშინვე მიჰყვება ტეგს .  HEAD ელემენტის გახსნისა და დახურვის ტეგებს შორის არის სხვა სათაურის ელემენტები.
      დოკუმენტის სათაური
      HTML დოკუმენტისთვის სახელის მისაცემად, ტეგი არის <
TITLE>
.  ეს სახელი გამოჩნდება ბრაუზერის ფანჯრის სათაურში.  სათაური იწერება ტეგებს შორის დადა არის ტექსტის ხაზი.  ამ ხაზის სიგრძე შეიძლება იყოს ნებისმიერი, მაგრამ რეკომენდებულია მისი გაკეთება არაუმეტეს 60 სიმბოლოზე.  TITLE ელემენტი უნდა გამოჩნდეს მხოლოდ HEAD განყოფილებაში.
      დოკუმენტის განყოფილებასხეული
      დოკუმენტის ეს განყოფილება შეიცავს ინფორმაციას, რომელიც ნაჩვენებია ბრაუზერის ფანჯარაში.  BODY განყოფილება უნდა დაიწყოს ტეგით <
სხეული>
და დასრულდება ტეგით სხეული>
, რომელთა შორის განლაგებულია დოკუმენტის შინაარსის შემადგენელი HTML ელემენტები.
      ნივთის სპეციფიკაციასხეული
      მონიშნეთ აქვს მთელი რიგი ატრიბუტები, რომლებიც განსაზღვრავს დოკუმენტის გარეგნობას.  ქვემოთ მოცემულია ტეგის სპეციფიკაცია .
      TEXT = "ტექსტის ფერი"
      BGCOLOR =ფონის ფერი
      BACKGROUND="ფონური სურათის მისამართი"
      TEXT ატრიბუტი განსაზღვრავს შრიფტის ფერს მთელი დოკუმენტისთვის RGB ან სიმბოლოების აღნიშვნით.  ნაგულისხმევად (თუ ეს ატრიბუტი არ არის მითითებული), გამოიყენება ბრაუზერის პარამეტრები.
      BGCOLOR ატრიბუტი განსაზღვრავს დოკუმენტის ბრაუზერის ფანჯრის ფონის ფერს RGB ან სიმბოლური აღნიშვნით.  ბრაუზერის პარამეტრები გამოიყენება ნაგულისხმევად.
      BACKGROUND ატრიბუტი საშუალებას გაძლევთ მიუთითოთ ფონად გამოყენებული სურათის მისამართი და სახელი.  ეს ნახატი გამრავლდება და გავრცელდება დოკუმენტის ფონზე.
      LINK, VLINK და ALINK ატრიბუტები განსაზღვრავს ჰიპერბმულების ფერებს RGB-ში ან სიმბოლურ აღნიშვნით.  ბრაუზერის პარამეტრები გამოიყენება ნაგულისხმევად.  დაუთვალიერებელი ჰიპერბმული არის ჰიპერბმული, რომელიც ჯერ არ არის გამოყენებული სხვა დოკუმენტში ნავიგაციისთვის.  მონახულებული ჰიპერბმული არის ჰიპერბმული, რომელიც უკვე გამოყენებულია სხვა დოკუმენტში ნავიგაციისთვის.  აქტიური ჰიპერბმული – ჰიპერბმული დოკუმენტთან, რომელზეც ამჟამად ნავიგაცია ხდება.
      რჩევები BODY ტეგის ატრიბუტების გამოყენების შესახებ
       თუ BODY ტეგში მიუთითებთ მინიმუმ ერთ ფერს, მაშინ მიუთითეთ დანარჩენიც.  ეს გამოწვეულია იმით, რომ მომხმარებელს შეუძლია დააყენოს თავისი ბრაუზერის ფერის პარამეტრები, როგორც ეს მისთვის უფრო მოსახერხებელია.  მხოლოდ ერთი ფერის მითითებამ შეიძლება გამოიწვიოს ტექსტის შერწყმა ფონის ფერში ზოგიერთი მომხმარებლისთვის.  შედეგად, დოკუმენტის ნახვა რთული იქნება.
       აირჩიეთ ტექსტის ფერი ისე, რომ ის „მუშაოს“ ფონის ფერთან ან გამოსახულების ძირითად ფერებთან.  მაგალითად, წითელმა მწვანეზე შეიძლება სერიოზული პრობლემები შეუქმნას ადამიანების მნიშვნელოვან რაოდენობას.
       BGCOLOR და BACKGROUND შეიძლება მითითებული იყოს BODY ელემენტში.  ამ შემთხვევაში ბრაუზერი უპირატესობას ანიჭებს BACKGROUND-ს, მაგრამ თუ ფონის სურათის ჩატვირთვა შეუძლებელია, BGCOLOR იქნება გამოყენებული.  ამიტომ, შეეცადეთ დააყენოთ ფონის ფერი ფონის სურათის ფერის მსგავსი, რათა არ დაირღვეს დოკუმენტის ფერის ბალანსი.
      


      

      

    
       
      
    
      შეიძლება სასარგებლო იყოს წაკითხვა: