HTML5 სინტაქსი

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

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

შემსუბუქებული წესები

როდესაც პირველად გავეცანით HTML5 მარკირებას, გავიგეთ, რომ ელემენტები , і ეს მარკირება არ არის სავალდებულო. ეს არ დასრულდება, თუ HTML5-ის წესები დასუსტებულია.

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

U ტეგები შეგიძლიათ vicoristuvatiროგორც დიდი, ასევე პატარა ასოები.

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

კონდახი
როზრივუ
რიგები

HTML5-მა ასევე შეცვალა ატრიბუტების წესები. ატრიბუტების მნიშვნელობების გათვალისწინება აღარ არის საჭირო, არამედ მხოლოდ გონებაში, რათა მათ ხელი არ შეუშალონ ფარულ სიმბოლოებს (დაასახელეთ სიმბოლოები>, = ან სივრცე). ღერძის კონდახი ვიკორისტანული ელემენტი ამ თანმიმდევრობით:

ასევე დასაშვებია ატრიბუტები მნიშვნელობების გარეშე. ამრიგად, XHTML-ში პროპორციის დასაყენებლად, თქვენ უნდა გაიმეოროთ სინტაქსი:

შემდეგ HTML5-ში შეგიძლიათ იმუშაოთ HTML 4.01-ის ტრადიციებით, მხოლოდ ერთი ატრიბუტის სახელის მითითებით:

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

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

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

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

HTML5 კოდის შემოწმება

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

Yakshcho vi, შედი სხვა ტიპზე, მაშინ იცოდე, გადაცემის izhtrument სწორად არის გადაკვეთილი, Validator-ის სახელი, შეგიძლიათ გააკეთოთ კოდი და არა HTML5 სტანდარტები, მე ვარ Yakshcho ბრაუზერი ib არ არის დაავადებული ხატით. კოდი.

დეიაკი ზ შესაძლო პრობლემები, როგორ დავიჭიროთ ვალიდატორი გონებაში, მოიცავს შემდეგს:

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

ჯანდაბა ბრაუზერი HTML5 სტილში!

XHTML ტეგებში დიდი ლიტერატურის ვიკორიზაცია შეუძლებელია.

ამ კოდის დასადასტურებლად გჭირდებათ XHTML ვალიდატორი, რომელიც ამოწმებს გადის თუ არა ის ძველ XHTML წესებს. W3C ვალიდატორი არ არის შესაფერისი ამისთვის, მაგრამ შემდეგ გადადით ვალიდატორზე საიტზე http://validator.nu, სადაც თქვენ უნდა მიუთითოთ სტანდარტი (ანუ XHTML) Preset სიაში. თქვენ ასევე უნდა დააყენოთ Be lax about HTTP Content-Type წესი, რათა არ ჩადოთ დამადასტურებელი კოდი პირდაპირ ტექსტის ველში.

ამ ნაბიჯების შემდეგ შეგიძლიათ შექმნათ XHTML დოკუმენტი და შეინახოთ იგი. სხვა ბრაუზერები კვლავ აანალიზებენ ამ დოკუმენტს, თითქოს ეს იყოს ორიგინალური HTML5 მხარე, რადგან ის უბრალოდ XML დოკუმენტს ჰგავს. ასეთი საიტის ნახვისას დამატებითი წესები არ იქნება.

თუ გსურთ ბრაუზერებმა თქვენი გვერდები XHTML წესების მიხედვით გამოიტანონ, თქვენ მოგიწევთ თქვენი ვებ სერვერის კონფიგურაცია, რათა მოემსახუროს გვერდებს აპლიკაციით / xhtml + xml MIME ტიპის ან აპლიკაციით / xml, სტანდარტული ტექსტის / html ტიპის ნაცვლად. საუბრის წინ, ბრაუზერები, რომლებიც მხარს უჭერენ XHTML5-ს, ახორციელებენ ამ მარკირებას განსხვავებულად, ძირითადი HTML5 კოდის გამოყენებით. ისინი იძულებულნი არიან დაამუშავონ გვერდი, როგორც XML დოკუმენტი და მასში შესვლის გარეშე (კოდში ცვლილებების შედეგად) ბრაუზერი იღებს დოკუმენტის დამუშავებას.

ეს როგორი ვისნოვოკია? ვებ დეველოპერების დიდი უმრავლესობისთვის, მოყვარულებიდან სერიოზულ პროფესიონალებამდე, XHTML-ის მკაცრი წესებით თამაში არავისთვის არის საჭირო. ერთადერთი ნაკლი არის სპეციალური გადაწყვეტილებების შემუშავება, როგორიცაა გვერდები, ნაცვლად იმისა, რომლებზეც მანიპულირება საჭიროა XML ინსტრუმენტების გამოყენებით, როგორიცაა XQuery და XPath.

თუ გნებავთ, შეგიძლიათ მოატყუოთ ბრაუზერი და გადახვიდეთ XHTML რეჟიმში. ამისათვის თქვენ უბრალოდ უნდა გადაარქვათ ფაილი გაფართოებით xhtml ან xht და შემდეგ გახსნათ მყარი დისკიშენი კომპიუტერი. ბრაუზერების უმეტესობა (მათ შორის Firefox, Chrome და IE 9) ამ გვერდს ისე გამოიყვანს, თითქოს ის იმპორტირებულია ვებ სერვერიდან MIME XML პარამეტრებით. თუ გვერდი შეიცავს რაიმე უმნიშვნელო შეცდომას, ბრაუზერი ხშირად აჩვენებს გვერდს (IE 9), შეტყობინებას XML შეცდომის შესახებ (Firefox) ან სხვაგვარად (Chrome).

DOM yak ნაწილობრივი ფილმი

HTML5-მა პირველად გააცნო DOM-ის კონცეფცია (მინდა ვიცოდე ეს, მაგრამ არა ნაწილობრივ), ახლა HTML დოკუმენტი განიხილება როგორც ობიექტების კოლექცია და არა ტეგები. Ამიტომაც HTML5 სინტაქსივერ ვიძინებ. თუმცა კოდის დაწერისას შეგიძლიათ დაასრულოთ მონიშვნის წესები, რომლებიც დაინსტალირებული იყო HTML 4.01 ან XHTML 1.0-ში

HTML 4.01 სინტაქსი

IN HTMLმეხუთე ვერსიამდე კოდის დაწერის რამდენიმე წესი არსებობდა:

1. თავისუფალი რეჟიმი თავისუფალია, რომელიც შესწორებულია HTML 4.01-ში
   "Http://www.w3.org/TR/html4/loose.dtd">
2. მკაცრი რეჟიმი, რომელიც ვიკორიზებულია HTML 4.01-ში
   "Http://www.w3.org/TR/html4/strict.dtd">
3. მეტი კადრებთან დაკავშირების სინტაქსის შესახებ. HTML5-ში ფრეიმები მოძველებულად ითვლება, მაგრამ ბევრი დეველოპერი მაინც იყენებს მათ და ზოგიერთი ჩარჩო კიდევ უფრო სასარგებლოა სხვადასხვა ვებ დანამატების შემუშავებისას.

XHTML 1.0 სინტაქსი

IN XHTMLკოდის დაწერის ორი წესი არსებობდა:

1. გარდამავალი რეჟიმი, რომელიც დანერგილია XHTML 1.0-ში
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Suvory მკაცრი რეჟიმი, რომელიც ვიკორიზებულია XHTML 1.0-ში
   "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 მიმდინარე სინტაქსი

HTML5-ის გამოყენებისას, HTML დოკუმენტის დასაწყისში დოქტიპების დაწერათქვენ შეგიძლიათ vikoristovat be-yak ფილმის მეტი სინტაქსის ზედმეტად დაზღვევისგან (კოდის დაწერის წესები)ან შეგიძლიათ გამოიყენოთ HTML 4.01 და XHTML 1.0 ერთმანეთის მიყოლებით.

მაგალითად, არ მოაწყოთ ატრიბუტების მნიშვნელობები ბალიშებით ატრიბუტი = მნიშვნელობა (თავისუფალი რეჟიმი HTML 4.01 - თავისუფალი), ალემ ამავდროულად დააყენა სლეი ერთ ტეგებში
(მკაცრი რეჟიმი xHTML 1.0 - მკაცრი).

XHTML (მკაცრი), უმოკლეს

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

HTMLნიშნავს ჰიპერტექსტის მარკირების ენას ( ენის მარკირება ჰიპერტექსისთვის):

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

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

ქვემოთ მოცემულია HTML აბზაცის მაგალითი:

ისევე, როგორც ტეტრისი და რაღაც ნაკლები ვისწავლე, ჯილდოები გროვდება და მიღწევები ცნობილი ხდება.

ვისაც ხედავთ ქუსლის ტაძრები < и >დაურეკა ტეგები HTML. სუნი მიუთითებს სად იწყება და სად მთავრდება.

კოჟენი წარუმატებელი ტეგებით გრძნობა. ჩვენს ვიპადკას<р>ნიშნავს აბზაციტექსტი.

როგორც წესი, სუნი მოდის წყვილებში:

• ხსნის ტეგს<р>ნიშნავს აბზაცის დასაწყისს;
• ხურავს ტეგს
  ნიშნავს, რომ დასასრულია.

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

როდესაც გაერთიანებულია, იხსნება, ხურავს ტეგებს და ყველაფერს შორის და უქმდება HTML ელემენტი. მწკრივი არსებითად არის HTML ელემენტი, რომელიც წარმოადგენს HTML ტეგებს<р>і

.

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

დაწერე HTML

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

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

ეს არის ჩემი პირველი ვებ საიტი!

ამ ფაილის my-first-webpage.html შესანახად, უბრალოდ გახსენით ის თქვენი ბრაუზერით და დაინახავთ:

ეს არის ჩემი პირველი ვებ საიტი!

• vikorist ტექსტური რედაქტორი, Notepad++-ის გამოყენებით კარიბჭე HTML დოკუმენტები;
• vikorist ბრაუზერი, Firefox-ის ხედზე, ამისთვის ვიდკრიტია HTML დოკუმენტები.

ატრიბუტები

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

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

მოჯადოება Firefox

Є 16 HTML ატრიბუტი, რომელიც შეიძლება დაემატოს ნებისმიერ HTML ელემენტს. ყველა სუნი არ არის შეურაცხმყოფელი.

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

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



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

კომენტარები

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

კომენტარი იწყება .

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

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

ეს HTML ელემენტები შეიცავს მხოლოდ შემდეგ ტეგს:




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

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




DOCTYPE	აღწერე
HTML5
	ყველა დოკუმენტისთვის.
HTML 4.01
"Http://www.w3.org/TR/html4/strict.dtd">	მკაცრი HTML სინტაქსი.
	გარდამავალი HTML სინტაქსი.
	HTML დოკუმენტს ექნება ჩარჩოები.
XHTML 1.0
	მკაცრი XHTML სინტაქსი.
	გარდამავალი XHTML სინტაქსი.
	XHTML-ში და ჩარჩოებში დაწერილი დოკუმენტი.
	XHTML მობილური პროფილი, ამატებს სპეციფიკურ ელემენტებს მობილური ტელეფონებისთვის.
XHTML 1.1
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	არ არსებობს აშკარა მნიშვნელობა, სინტაქსი იგივეა და მიჰყვება მკაფიო წესებს.

ასევე, დოქტიპები იგივეა (მკაცრი და გარდამავალი, HTML და XHTML-ისთვის). ვიბრატის რა სტანდარტია კვების ღერძი.

HTML და XHTML სტანდარტები

HTML არის სტანდარტული ენა ვებ დოკუმენტების აღსანიშნავად.

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

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

XHTML - გაფართოვდა ვებ დოკუმენტებისა და XML-ზე დაფუძნებული შემოქმედების ენობრივი განლაგება. XHTML სტანდარტი არის ფუნქციების გადაცემა HTML 4.01-სა და XHTML-ს შორის.

vimogi XHTML	Ეს შეუძლებელია	საჭირო
ყველა დამნაშავე დაიხურება.
ყველა ტეგი, ატრიბუტი და CSS კონტროლი უნდა იყოს აკრეფილი მცირე ასოებით.
ყველა ტეგის ატრიბუტის მნიშვნელობა ინახება ჩანართებში.
იერარქია მკაცრად უნდა დაიცვას: პირველი ტეგი დაფარულია დანარჩენით.	...	...
ბლოკის ტეგი არ შეიძლება არ შეიცავდეს ინვესტიციებს მწკრივის ტეგში. (ბლოკის ელემენტის გვერდიდან ამოღების შემდეგ, იგი იქმნება ახალი მწკრივიდან. მწკრივის ელემენტი არ არღვევს მწკრივის ცვლას.)	...	...
ლოგიკური ატრიბუტები იწერება გაფართოებული ფორმით.
იმიჯი obov'yazkovo არის დამნაშავე, მაგრამ მითითებული აღწერა

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

თუმცა, 2009 წლის 2 ივნისს მსოფლიო ქსელის კონსორციუმმა (W3C) გამოაცხადა, რომ მუშაობდა XHTML 2.0-ზე, ვინაიდან XHTML-ის კონცეფცია არასწორია. პროგრამისტების ჯგუფი გადავიდა HTML5 სტანდარტზე მუშაობაზე. და მიუხედავად იმისა, რომ HTML5 სტანდარტი ჯერ არ არის დამტკიცებული, უკვე წერია, რომ არ არსებობს ვებსაიტები.

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

HTML5 სტანდარტის ოფიციალური ვერსია ხელმისაწვდომია: www.w3.org/TR/html5/

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

Ზე! DOCTYPE, განკუთვნილი დოკუმენტებისთვის, რომლებიც იყენებენ ჩარჩოებს, ჩვენ არ მოგერიდებათ: გუშინწინ.

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

მკაცრი და გარდამავალი სინტაქსი HTML 4.01

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

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

მკაცრი სინტაქსი

მოქმედების შემოწმება

ჩერვონიმიფერი.

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

განლაგების შესწორებების შესასრულებლად, დააინსტალირეთ დანამატი FireFox Html Validator-ზე.

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

ვალიდიატორის ნიშანზე ორჯერ დაწკაპუნებით გაიხსნება ჯილდოების სია:




მოდით შევიცვალოთ! DOCTYPE გარდამავალი სინტაქსისთვის:

გარდამავალი სინტაქსი

მოქმედების შემოწმება

ტექსტის ნაწილის ნახვა იყო საჭირო ჩერვონიმიფერი.

გაუშვით FireFox. სიკეთეები არ არის:




ყველაფერი მშვენიერია. იქნებ რა უნდა ვიჩივლო?

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

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

ახლა საჭიროა სწორი განლაგება

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

- ეს არის მინუსი საიტის რეიტინგზე.

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





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

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

მარტივი სტილის ფურცელი

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

რა არის ვებ გვერდზე:

ახლა ნახავთ ტექსტს

ბრაუზერში რას ნიშნავს კანის რიგი? ყველაფერი საკმაოდ მარტივია: შრიფტი არის თამამი შრიფტი და ფერი # 1E824C (თექვსმეტობითი ფერის კოდი) და ნაჩვენებია 1em ზომით (საერთო ერთეული, რომელიც შედარებულია შრიფტის ზომასთან, რომელიც საჭიროა ბრაუზერში).




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

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

მაგალითად, დაყენებულია შრიფტის პოზიცია საკვანძო სიტყვებითამამი, თამამი და ა.შ., ფერი - თექვსმეტი ღირებულება, RGB (A), HSL (A) ან საკვანძო სიტყვები წითელი, ნარინჯისფერი, თეთრი და ა.შ., შრიფტის ზომა - CSS ერთეული (ასობით) % , პიქსელები px, ქულები პტ, შრიფტის სიმაღლე) ან მუდმივებთან პატარა, საშუალო, დიდი და ა.შ. ძალაუფლების მნიშვნელობის აღნიშვნის შემდეგ მასთან იდება წერტილი.



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

P (შრიფტის წონა: თამამი; ფერი: #1E824C; შრიფტის ზომა: 1em;)

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

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

P (შრიფტის წონა: თამამი; ფერი: #1E824C; შრიფტის ზომა: 1em;)

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

P (შრიფტის წონა: თამამი;) p (ფერი: #1E824C;) p (შრიფტის ზომა: 1em;)

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

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

CSS-ში კომენტარები იწერება / * და * / სიმბოლოებს შორის. ისინი არ არის ნაჩვენები ბრაუზერის ვებ გვერდზე და მხოლოდ კოდში ჩანს. დეველოპერები ასევე ხშირად იყენებენ კომენტარებს, რათა დაეხმარონ დროულად საჭირო CSS კოდის დაჭერას. კომენტარები ასე გამოიყურება:

/ * ტექსტის ტექსტის სტილი * / p (შრიფტის წონა: თამამი; ფერი: #1E824C; შრიფტის ზომა: 1em;)

შიდა და გარე სტილის ფურცლები

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

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

გარე სტილის ფურცლები მნიშვნელოვნად გაფართოვდა. თქვენ უბრალოდ უნდა დააკავშიროთ ცხრილი ყველა საჭირო ვებ გვერდს, vikoryst და ტეგი გ rel ატრიბუტი(ეს ნიშნავს ურთიერთობას გვერდსა და ჩართულ ფაილს შორის) და სტილის ფურცლის მნიშვნელობებს, რაც ნიშნავს, რომ სტილის ფურცელი შეიცავს ფაილში, რომელიც შედის. href ატრიბუტი არის თქვენი .css ფაილის URL:

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

გაკვეთილი: სტილის ფურცლის შექმნა

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

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

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

CSS-ის დაკავშირება HTML-თან

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

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

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

• მოითხოვა შრიფტი სახელწოდებით Roboto Condensed, რომელიც იქნება აღებული Google სერვერიდან (მოგვიანებით გამოვაქვეყნებთ ანგარიშს Google ფონტებზე);
• ჩვენ დავაკავშირეთ ჩვენი გარე სტილის ფურცელი style.css (ჯერ ცარიელია).

წერის სტილი CSS

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

Html (padding-top: 5px; background-image: url (background.jpg);)

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

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

ტექსტი (სიგანე: 75%; შიგთავსი: 40 პიქსელი; ზღვარი: 15 პიქსელი ავტომატურად; ფონის ფერი: #EBEBEB; საზღვრის რადიუსი: 30 პიქსელი;)

შეინახეთ ცვლილებები ფაილში. Zaraz vi:

• სანაცვლოდ დააყენეთ არე თეგისთვის , რაც ბრაუზერის ფანჯრის სიგანის 75%-ის ტოლია;
• უზრუნველყოფილი იყო 40 პიქსელი წვდომით ტერიტორიის ყველა მხარეს ერთად;
• ჩვენ გადავიტანეთ გვერდის ცენტრში მდებარე არე, ასევე შევქმენით ცხოველისთვის გახსნა და 15 პიქსელის ქვედა ნაწილი;
• დააყენეთ ფონის ფერი #EBEBEB ფართობისთვის ერთად;
• დამრგვალებული მართკუთხა ფართობი 30 პიქსელიანი რადიუსის მითითებით.

ხელახლა განვაახლებ HTML დოკუმენტს. ამ შემთხვევაში, გადადით კავშირის ქეშზე ან ხელახლა დააინსტალირეთ გვერდი მასთან დაკავშირებული ყველა ფაილის განახლებით, vikoryst და სპეციალური კლავიშების კომბინაციით (მაგალითად, Chrome-ისთვის Ctrl + F5).

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

შრიფტის შეცვლა დამატებითი CSS-ის გამოყენებით

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

H1 (ფერი: #E87E04; შრიფტის ზომა: 2em; ზღვარი მარცხნივ: 20 პიქსელი; შრიფტი-ოჯახი: "Roboto Condensed", sans-serif;) h2 (ფერი: #E87E04; შრიფტის ზომა: 1.7em; ზღვარი მარცხნივ : 20 პიქსელი; შრიფტი-ოჯახი: "Roboto Condensed", sans-serif;) p (ფერი: #22313F; ხაზის სიმაღლე: 150%; ზღვარი ზედა: 20 პიქსელი; ზღვარი მარცხნივ: 20 პიქსელი; შრიფტი-ოჯახი: "Roboto Condensed ", sans-serif;)

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

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

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

აქცენტი (შრიფტის წონა: თამამი;)

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

ბოლო ჩანთაში თქვენ უნდა შეიყვანოთ შემდეგი მხარე:





როგორც სავარჯიშო ნაწილი, შეეცადეთ შეცვალოთ ტექსტის ზომა

(მისაღები, 1.1em) და ასევე გაზარდეთ შეყვანა შორის

და არეალის მარცხენა კიდე კიდევ 10 პიქსელით.

ვისნოვკი

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

Სულ ერთია CSS სტილიშედგება რამდენიმე ელემენტისგან: სელექტორი, სტილის სიმძლავრე და სიმძლავრის ღირებულება.

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

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

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

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