რომელი ტეგი განსაზღვრავს დოკუმენტის ტიპს. კომენტარების დირექტივები და Doctype Html კოდში, ასევე ბლოკის და ინლაინ ელემენტების კონცეფცია (ტეგები). URL-ში შეუქცევადი სიმბოლოები

სია

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

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

წინა შეცდომების გამოსწორება.

კოდში არ არის ჩასმული ტეგი.

სათაური

დაამატეთ კონტეინერი.

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

გამოიყენეთ ჩადგმული ტეგები.

მითითებული ტეგი არ არის HTML სპეციფიკაციის ნაწილი.

ტექსტი დეფისების გარეშე

ტექსტი დეფისების გარეშე

ამოიღეთ ტეგი ან შეცვალეთ იგი შესაბამისი ექვივალენტით.

ტეგი არ არის აღიარებული და არ არის HTML სპეციფიკაციის ნაწილი.

მარჯვენა:

არასწორი:

ტექსტი

ამოიღეთ უცნობი ტეგი.

კონტეინერი ცარიელია ან შეიცავს მხოლოდ სივრცეს.

წაშალეთ ტეგი ან დაამატეთ ტექსტი კონტეინერის შიგნით.

დახურვის ტეგში დაკარგული ხაზი.

გამოსავალი

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

... წამყვანი "..." უკვე განსაზღვრულია

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

გამოსავალი

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

სავარაუდოდ განკუთვნილია როგორც

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

გამარჯობა მსოფლიო!

გამარჯობა მსოფლიო!

გამოსავალი

ამოიღეთ ერთ-ერთი ტეგი.

აკლია "..." ატრიბუტი

საჭირო ტეგის ატრიბუტია საჭირო, მაგრამ აკლია.

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

HTML დოკუმენტი არის ჩვეულებრივი ტექსტური დოკუმენტი, რომელიც შეიძლება შეიქმნას ჩვეულებრივ ტექსტურ რედაქტორში (Notepad) ან სპეციალიზებულში კოდის მონიშვნით (Notepad++, Visual Studio Code და ა.შ.). HTML დოკუმენტს აქვს .html გაფართოება.

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

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

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

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

ტექსტი

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

ტექსტი

.

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

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

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

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

HTML დოკუმენტი შედგება ორი განყოფილებისგან - სათაური - ტეგებს შორის ... და შინაარსის ნაწილი - ტეგებს შორის ....

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

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

DOCTYPE პასუხისმგებელია ბრაუზერის მიერ ვებ გვერდის სწორად ჩვენებაზე. DOCTYPE განსაზღვრავს არა მხოლოდ HTML ვერსიას (მაგ. html), არამედ შესაბამის DTD ფაილს ინტერნეტში.

...

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

ბრინჯი. 1. ვებ გვერდის უმარტივესი სტრუქტურა

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

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

, და ა.შ.

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

ორივეს შთამომავალია და.

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

არის მშობელი მხოლოდ.

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

და არიან შვილები.

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

ისინი ერთმანეთის დები არიან.

1.1. ელემენტი 1.2. ელემენტი

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

1.2.1. ელემენტი

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

1.2.2. ელემენტი

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

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

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

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

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

კომენტარისთვის საჭიროა დარეგისტრირება.

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

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

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

თავად Doctype ელემენტი ემსახურება მოცემული დოკუმენტის ტიპის გამოცხადებას და ეხმარება ბრაუზერს გააცნობიეროს Html ან XHTML-ის რომელ ვერსიას (როგორც კლასიფიცირებულია W3C ვალიდიატორის მიერ) უნდა დაეყრდნოს ჩატვირთული ვებგვერდის კოდის გარჩევისას.

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

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

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

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

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

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

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

დავიწყოთ HyperText Markup Language სტანდარტით 4.01 (HTML 5 ჯერ კიდევ დამუშავების პროცესშია). ამ შემთხვევაში, არსებობს სამი Doctype ვარიანტი: მკაცრი, გარდამავალი და ჩარჩო-ჩართული:

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

სინამდვილეში, არსებობს იგივე სამი Doctype ვარიანტი XHTML-ისთვის - მკაცრი, გარდამავალი და ჩარჩოს მხარდაჭერით:

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

და ცალკე ცხრილი შესაძლებელია:

როგორც ხედავთ, ამ ორივე ცხრილში არის სვეტი "Depr", რომელშიც ასო "D" აღინიშნება მოძველებული და მოძველებული HTML ტეგებით და ატრიბუტებით. ჩვენ უკვე განვიხილეთ ეს. მაგრამ გაითვალისწინეთ, რომ თითოეული "D"-ის გვერდით მარჯვნივ მიმდებარე "DTD" სვეტში არის "L" (Loose DTD) ან "F" (Framesset DTD).

რომ. ყველა ტეგი და ატრიბუტი, რომელიც არ არის მონიშნული "D" (არ არის რეკომენდებული) შედის მკაცრი Doctype გაფორმებაში (მხოლოდ რეკომენდებული ელემენტები და მეტი არაფერი). თუ მაინც დაუშვებთ Html ენის არარეკომენდებული ტეგებისა და ატრიბუტების გამოყენებას (ისინი აღინიშნება ასო „D“), მაშინ მოგიწევთ ასეთი დოკუმენტების გარდამავალი დეკლარაციის გამოცხადება.

ზოგიერთი ელემენტი და ატრიბუტი მონიშნული "F" სვეტში "DTD" (მაგ. FRAME, FRAMESET) ჩართული იქნება Doctype დეკლარაციაში ჩარჩო სტრუქტურებისთვის. იგი დაფუძნებულია გარდამავალზე, რომელსაც ემატება ტეგები და ატრიბუტები შესაქმნელად, რომლის შესახებაც შეგიძლიათ წაიკითხოთ მითითებულ ბმულზე.

ახლა შევეცადოთ გაერკვნენ, რა ნაწილებისგან შედგება Doctype დეკლარაცია?

ჯერ მოდის სახელი - "დოქტიპი". აქ, ვფიქრობ, ყველაფერი ნათელია. შემდეგი მოდის "Html" - ამ მარკირების ენის ძირითადი ელემენტი. შემდეგ მოდის მითითება, არის თუ არა ეს განცხადება საჯარო თუ სისტემური. Doctype-ის ყველა ვარიანტი საჯაროა, რაც აღინიშნება სიტყვით „PUBLIC“.

და შემდეგ არის ორი დოკუმენტის იდენტიფიკატორი. პირველს ეწოდება საჯარო იდენტიფიკატორი (“-//W3C//DTD HTML 4.01//EN”). მინუსი ნიშნავს, რომ ეს დეკლარაცია არ არის რეგისტრირებული ISO სტანდარტში. ამას მოსდევს კონსორციუმის სახელწოდება, მისი სახელწოდება და ენა, რომელზეც ის წერია. მეორე იდენტიფიკატორი განსაზღვრავს გზას მკაცრი ვარიანტის ფაილისკენ.

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

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

ამიტომ, ყოველგვარი შეფერხების გარეშე, Html 5-ში Doctype-ის ჩაწერა ასე გამოიყურება:

Სულ ეს არის. დარჩა მხოლოდ "HTML". და მიუხედავად იმისა, რომ HTML 5 ჯერ კიდევ არ არის სრულად დანერგილი, ეს ვარიანტი მხარდაჭერილია ყველა თანამედროვე ბრაუზერის მიერ და შეგიძლიათ უსაფრთხოდ გამოიყენოთ იგი. ოჰ როგორ და შენ ამბობ...

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

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

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

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

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

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

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

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

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

გარე კომენტარის გაგრძელება-->

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

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

ყველა ტეგი, რომელიც შეიძლება გამოყენებულ იქნას Body ელემენტების შიგნით (რაც ნაჩვენებია ვებ გვერდზე და რომელთა სია შეგიძლიათ იპოვოთ W3C ვალიდატორში) შეიძლება დაიყოს ორ ჯგუფად: inline და block tags.

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

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

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

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

მაგალითად, ეს Html კოდი გამოჩნდება სამ ბლოკში, რომლებიც მდებარეობს ერთმანეთის ქვემოთ:

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

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

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

Წარმატებას გისურვებ! მალე შევხვდებით ბლოგის საიტის გვერდებზე

შეიძლება დაგაინტერესოთ

რა არის ჰიპერტექსტის მარკირების ენა Html და როგორ ვნახოთ ყველა ტეგის სია W3C ვალიდატორში
სათაურების ტეგები და ატრიბუტები H1-H6, ჰორიზონტალური ხაზი Hr, ხაზის წყვეტა Br და აბზაცი P Html 4.01 სტანდარტის მიხედვით
შრიფტი (სახე, ზომა და ფერი), Blockquote და წინასწარი ტეგები - ძველი ტექსტის ფორმატირება სუფთა HTML-ში (არ გამოიყენება CSS)
სიები Html კოდით - UL, OL, LI და DL ტეგები
როგორ ჩავსვათ ბმული და სურათი (ფოტო) HTML - IMG და A ტეგებში
თეთრი სივრცის სიმბოლოები და კოდის მათი ფორმატირება Html-ში, ასევე სპეციალური არაგამტეხი სივრცის სიმბოლოები და სხვა მნემონიკა
როგორ ხდება ფერების დაყენება Html და CSS კოდებში, RGB ჩრდილების შერჩევა ცხრილებში, Yandex გამომავალი და სხვა პროგრამები Select, Option, Textarea, Label, Fieldset, Legend - ჩამოსაშლელი სიებისა და ტექსტური ველების ფორმის Html ტეგები
როგორ შევქმნათ ჰიპერბმული (A, Href, Target blank), როგორ გავხსნათ იგი საიტის ახალ ფანჯარაში და ასევე გავხადოთ სურათი Html კოდით ბმული
Iframe და Frame - რა არის ისინი და როგორ საუკეთესოდ გამოვიყენოთ ჩარჩოები Html-ში

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

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

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

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

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

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

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

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

ჩვენ შევქმნით საკუთარ ვებ დიზაინს Web Inspector ინსტრუმენტის გამოყენებით.

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

თქვენ ასევე შეგიძლიათ დარეკოთ გვერდზე მარჯვენა ღილაკით დაჭერით და არჩევით „ელემენტის კოდის ნახვა“ ან „ელემენტის შემოწმება“

ჩემი საიტის დიზაინი უკვე რამდენჯერმე შეიცვალა და ხედავთ ძველ ვერსიას, მაგრამ ეს არ ცვლის არსს.

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

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

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

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

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

სიგანე - 940 px
მარცხენა ზღვარი - 0 px

მოდით ქვემოთ

ფონის ფერი - ყვითელი (თავდაპირველად შავი)
ელემენტის ხილვადობა - ხილული
მცურავი მარცხნივ - ალბათ ისე, რომ ტიტული არ წავიდეს
ზედა ზღვარი – 80 პიქსელი და ცენტრში
ქვედა ზღვარი - 30 px
ჩარჩო - სისქე, მყარი, ყვითელი (თავდაპირველად შავი)

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

ამ ყველაფრის გასაკეთებლად, თქვენ უნდა გადახვიდეთ Console - Appearance - Editor და იქ იპოვოთ ფაილი style.css.

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

ამ ფაილში უნდა ვიპოვოთ #access სელექტორი. ის პირველად გამოჩნდება =Structure განყოფილებაში, მაგრამ იქ დაჯგუფდება სხვა სელექტორებთან, რომლებსაც აქვთ იგივე თვისებები და მნიშვნელობები.

მოდი, ახლა არ წავშალოთ #access ამ ჯგუფიდან, რადგან, მაგალითად, ამ ჯგუფში მითითებული სიგანე მომეწონა. ჩვენ უფრო ქვევით მივდივართ "მენიუ" განყოფილებაში. აქ ჩვენი ბლოკი წარმოდგენილია მთელი თავისი დიდებით.

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

არ დაგავიწყდეთ ფაილის განახლება ყოველი მანიპულაციის შემდეგ!

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

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

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

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

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

თუ ვინმეს სურს ამ მენიუს მთლიანად ამოღება საიტის გვერდებიდან, მაშინ ამისთვის უნდა გადავიდეს Appearance > Editor და გახსნას header.php ფაილი რედაქტირებისთვის.

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

თქვენ შეგიძლიათ უბრალოდ გახადოთ ის უხილავი. ამისათვის style.css ფაილში #access სელექტორს ემატება საკუთრება display:none.

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

შემდეგ გადავდივართ style.css ფაილზე და ვნახავთ რა უნდა გავაკეთოთ, რომ სასურველი სურათი გაქრეს, მაგრამ გამოჩნდეს სასურველი.

ვპოულობთ განყოფილებას “=Header”, რომელიც შეიცავს ყველაფერს, რაც დაკავშირებულია საიტის სათაურთან და იქ ვპოულობთ გამოსახულების ამომრჩეველს. შემდეგ ჩვენ ვცვლით display:block მნიშვნელობას display:none და სურათი ქრება ეკრანიდან.

შემდეგ ავდივართ "=სტრუქტურის" განყოფილებაში და #wrapper სელექტორში ვაკეთებთ შემდეგ ჩანაწერს. ფონი: საკუთრება არის ნაგულისხმევად, ეს არის გვერდის ფონი, ამიტომ ჩვენ ვამატებთ თვისებებს მხოლოდ სურათისთვის.

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

თუ საიტი ჰოსტირებულია, მაშინ ეს საქაღალდე მდებარეობს: site_name > public_html > wp-content > > themes > images.
თუ საიტი ჯერ კიდევ ლოკალურ ჰოსტინგზეა, მაშინ ამ საქაღალდისკენ მიმავალი გზაა: Z > მთავარი > საიტის სახელი > www > wp-content > > თემები > სურათები.

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

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

ამ შემთხვევაში, სათაურს ექნება მინიმუმ ფონი.

ეს კეთდება შემდეგნაირად. გადადით Console - Entries - Add Entry, გადართეთ რედაქტორი HTML რეჟიმში და image loader-ის საშუალებით (Add media file) ჩატვირთეთ სასურველი სურათი.

ამ სურათის კოდი გამოჩნდება რედაქტორში. საჭიროა მისი კოპირება და "ჩანაწერის" წაშლა.

შემდეგ გადადით "Appearance - Editor" და გახსენით header.php ფაილი რედაქტირებისთვის, რომელშიც ვპოულობთ ხაზს.

ამ სტრიქონის შემდეგ, ჩვენ ჩასვით კოპირებული სურათის კოდი. კოდს აქვს alignment class class="aligncenter" , და საჭიროებიდან გამომდინარე, aligncenter შეიძლება შეიცვალოს alignleft , ან alignright .

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

თუ შენახვისა და ნახვის შემდეგ სურათის გადატანა საჭიროა კიდევ ცოტა, სადმე, მაშინ ვუბრუნდებით რედაქტორს და სურათის კოდში, img ტეგში ჩავსვით style ატრიბუტი margin თვისებით:

style="margin:0 0 0 0;"

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

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

თუ მხოლოდ ფერს შეცვლით, უბრალოდ შეცვალეთ მნიშვნელობა ფონის თვისებაში

აქ იცვლება საიტის შრიფტის ზომა, ტიპი და ფერი

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

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

მზა HTML შაბლონები რუსულ ენაზე