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

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

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

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

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

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

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

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

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

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

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

რომელი რედაქტორი ჯობია კოდის რედაქტირებას ან ცვლილებას?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ლამაზი რუსული შრიფტები ვებსაიტისა და კომპიუტერისთვის Google Font ონლაინ სერვისში - სად გადმოწეროთ და როგორ დააინსტალიროთ ადაპტირებადი (საპასუხო) დიზაინი - საიტის ოპტიმიზაცია მობილურ მოწყობილობებზე სანახავად
Gif, Png ან Jpg - რასტრული გრაფიკის ფორმატები ვებისთვის, მათი დადებითი და უარყოფითი მხარეები ვებსაიტზე გამოყენებისას

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

ბმული (href) უნდა დაიწეროს ერთი ბმული ტეგში. HTML5-ში ბმულის შინაარსი ასე უნდა გამოიყურებოდეს: href=”style.css” rel=”stylesheet”. არ დაგავიწყდეთ, რომ თავად ბმული ტეგი მდებარეობს დაწყვილებულ სათაურ კლავიშებს შორის.

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

CSS სინტაქსი

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

პირველ რიგში, შეამოწმეთ სელექტორი. სელექტორი უნდა შეესაბამებოდეს იმას, რაც თქვენ დაწერეთ html ფაილში. ანუ, თუ html-ში არჩეულია class = “container”, მაშინ სელექტორის ნაცვლად CSS-ში იწერება “.container”. გაითვალისწინეთ წერტილი სათაურის წინ. პერიოდი იდება მხოლოდ გაკვეთილების წინ. თუ თქვენ აკონკრეტებთ სტილს h1 სათაურებისთვის, მაშინ წერტილი არ არის საჭირო.

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

ბრაუზერი

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

გამოიყენეთ სხვადასხვა ბრაუზერი ტესტირებისთვის: Opera, Google Chrome, Firefox. არ არის რეკომენდებული Internet Explorer-ზე დაყრდნობა, რადგან ეს არ არის Microsoft-ის მთავარი აქცენტი, რაც მას "არათანმიმდევრულს" ხდის CSS3-თან.

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

მემკვიდრეობა

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

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

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

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

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

რა არის ეს CSS

CSS შეიძლება ეწოდოს ოფიციალურ ენას დოკუმენტის ვიზუალური გარეგნობის აღწერისთვის. სრული CSS ჟღერს კასკადური სტილის ფურცლები, რომ რუსს ესმის Cascading Style Sheets, ანუ CSS. რა თქმა უნდა, არავინ იყენებს CTS-ს, მაგრამ ჩვეულებრივია CSS-ის გამოყენება. CSS ენა დაინერგა 1996 წლის 17 დეკემბერს.

რატომ გვჭირდება CSS სტილები ცალკე ფაილში?

html-ში სტილის ჩასაწერად საჭიროა შიგნით .. ჩაწერეთ თქვენი წესები ტეგში

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

— თუ გადაწყვეტთ პირდაპირ მიუთითოთ სტილი შიდა შინაარსი , მაშინ უნდა გამოიყენოთ პარამეტრი სტილი = "..."

CSS-ის სწორი წესები და როგორ უნდა გავაკეთოთ კომენტარი CSS-ში

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

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

CSS-ში ნებისმიერი ტექსტის კომენტარისთვის, თქვენ უნდა ჩაწეროთ ტექსტი ბრჭყალებში /* ტექსტი */ და სულ ეს არის :)

როგორც დაპირდა, CSS-ის ვიზუალური მაგალითები :

p(
font-family: Verdana;
ფონი: თეთრი;
ფერი: წითელი;
}

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

• სახელმძღვანელო

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

1. W3C Validator

რეკომენდებულია საიტის HTML და CSS შემოწმება validator.w3.org სერვისის მეშვეობით. ეს სერვისი დაასკანირებს კოდს და აჩვენებს შეცდომებს, მაგალითად:

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

2. განლაგება UTF-8 ფორმატში

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

ფაილი UTF-8 ფორმატში საშუალებას გაძლევთ გამოიყენოთ არასტანდარტული სიმბოლოები (მაგალითად, სხვადასხვა ენის სიმბოლოები, ვალუტის სიმბოლოები და სხვა).

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

3. რამდენიმე ელემენტს აქვს იგივე id

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

4. სპრაიტები

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

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

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

5. უამრავი სელექტორი

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

/* არ არის რეკომენდებული, დიდი ბუდე */ .გვერდი .item .title a () /* შეიძლება შემცირდეს */ .გვერდი .item a ()
ბრაუზერები კითხულობენ CSS-ს მარჯვნიდან მარცხნივ. იმათ. ზემოთ მოცემულ კოდში ჯერ შეირჩევა ყველა ბმული, რომელიც გვერდზეა, შემდეგ კი ის ბმულები, რომლებიც .item ელემენტშია.

6. HTML სტილები

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

შეცდომა კოდში

შეცდომა კოდში

7. არასწორი კლასის სახელები

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

შეტყობინების ტექსტი

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

შეტყობინების ტექსტი

შეტყობინების ტექსტი

8. პიქსელები წილადის მნიშვნელობებში

ზოგიერთი ბრაუზერი საშუალებას გაძლევთ მიუთითოთ პიქსელები წილადის მნიშვნელობებში, როგორიცაა "1.5px". მაგრამ ეს არასწორია, რადგან... პიქსელი განუყოფელი ერთეულია. "1.5px"-ის ნაცვლად უმჯობესია გამოიყენოთ "1.5em".

P (/* არასწორი */ ასოების ინტერვალი: 1,5 პიქსელი; /* სწორი */ ასოების ინტერვალი: .005em; )

9. ID-ების ნაცვლად კლასების გამოყენება

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

#modal a ( ფერი: ლურჯი; ) /* ქვემოთ მოცემული ფერის გადაფარვა შეუძლებელია, რადგან #modal-ს უფრო მეტი წონა აქვს ვიდრე კლასები */ .modal-header a (ფერი: #333; ) /* ამ შემთხვევაში თქვენ მოგიწევთ დაამატოთ #modal */ #modal .modal-header a (ფერი: #333; )
ასევე არ არის რეკომენდებული გამოყენება!მნიშვნელოვანია, რადგან მისი წონა აღემატება id ატრიბუტის წონას და ასევე რთული იქნება მისი გადალახვა.

10. მენიუ

მენიუ უნდა იყოს ფორმატირებული, როგორც სია.

მთავარი სიახლე კომპანიის შესახებ

• სახლში
• სიახლეები
• კომპანიის შესახებ

11. გამოტოვებული ალტი სურათებისთვის

alt ატრიბუტი უნდა იყოს მითითებული ტეგებში (შეიძლება იყოს ცარიელი).

12. ტეგები

თითო ტეგზე უნდა იყოს მხოლოდ ერთი სათაური თითო გვერდზე

. ძირითადად, ეს ტეგი შეიცავს გვერდის სათაურს.

13. ტრანსკრიფცია

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

/* არასწორი */ .tovar () .stranica () .zapros () /* სწორი */ .პროდუქტი () .გვერდი () .შეკითხვა ()

14. გარკვევა

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

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

15. HTML - პროგრამირების ენა

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

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

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

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

საიტის პრეზენტაციის გამიჯვნა მისი შინაარსისგან.

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

საიტის ჩატვირთვის სიჩქარის გაზრდა.

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

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

CSS თავსებადობა თანამედროვე ბრაუზერებთან.

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

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

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