რა არის html რისთვის გამოიყენება. რა არის გვერდის HTML? ივარჯიშეთ იმის გასაგებად, თუ რა არის HTML...

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

ჩვენი სტატია ძირითადად განკუთვნილია დამწყებთათვის, ამიტომ ვიმედოვნებთ ბლოგის რეგულარული მკითხველების გაგებას!

პოსტი დაიყოფა შემდეგ პუნქტებად:

რა არის HTML გვერდი

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

თითოეულ WWW დოკუმენტს აქვს მდიდარი და ლამაზად შექმნილი ტექსტი, ასევე ჰიპერბმულები და სურათები, რომლებსაც საიტის მფლობელი ირჩევს. ამ ელემენტებთან მუშაობის მიზნით, პროგრამისტებმა შექმნეს ენა სახელწოდებით HTML (Hyper Text Markup Language), რაც ნიშნავს ჰიპერტექსტის მარკირების ენას. თითოეული ბრაუზერი განსხვავებულად მუშაობს და HTML-ს თავისებურად ასახავს, ამიტომ სხვადასხვა ბრაუზერში ის განსხვავებულად არის გადმოცემული, განსაკუთრებით ძველ ვერსიებში. Internet Explorer.

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

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

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

რა არის HTML5. განსხვავებები და უპირატესობები

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

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

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

რა არის HTML და რისთვის არის ის - 3.7 5-დან 3 ხმის საფუძველზე

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML- ნიშნავს HyperText Markup Language, რომელიც არის ყველაზე ფართოდ გამოყენებული ენა ვებ გვერდების დასაწერად.

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

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

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

HTML დოკუმენტი

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

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

სათაური

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

მოდით შეინახოთ კოდი HTML document.html ფაილში თქვენი საყვარელი ტექსტური რედაქტორის გამოყენებით. და გახსენით ფაილი ვებ ბრაუზერით, როგორიცაა Internet Explorer, Გუგლ ქრომიან Firefox et al. მან უნდა აჩვენოს შემდეგი გამომავალი:

ტეგები HTML დოკუმენტის შესაქმნელად

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

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

მონიშნეთ

აღწერა

ეს ტეგი განსაზღვრავს დოკუმენტის ტიპს და HTML ვერსიას.

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

ეს ტეგი წარმოადგენს დოკუმენტის სათაურს, რომელიც შეიძლება შეიცავდეს სხვა html ტეგებს, როგორიცაა , <link>და ა.შ.</td> </tr><tr><td><title> </td><td>მონიშნეთ <b><title> </b>გამოიყენება ტეგის შიგნით <head>მიუთითოს დოკუმენტის სათაური.</td> </tr><tr><td><body> </td><td>ეს ტეგი წარმოადგენს დოკუმენტის სხეულს, რომელიც ინახავს სხვა html ტეგებს, როგორიცაა <h1>, <div>, <p>სხვა.</td> </tr><tr><td><h1> </td><td>ეს ტეგი წარმოადგენს სათაურს.</td> </tr><tr><td><p> </td><td>ეს ტეგი წარმოადგენს აბზაცს.</td> </tr></table><p>ამ ტეგების ცოდნა საკმარისია html დოკუმენტის (html გვერდის) შესაქმნელად.</p> <p>HTML-ის შესასწავლად, თქვენ უნდა იცოდეთ სხვადასხვა ტეგები და გაიგოთ, როგორ იქცევიან ისინი ფორმატირებისას. <a href="https://obanracer.ru/ka/kak-vstavit-skrinshot-v-tekstovyi-dokument-kak-sdelat-printskrin-s.html">ტექსტური დოკუმენტი</a>... HTML-ის სწავლა მარტივია, რადგან მომხმარებლებს მხოლოდ უნდა ისწავლონ, თუ როგორ გამოიყენონ სხვადასხვა ტეგები ტექსტის ან სურათების დასაფორმებლად, რითაც ქმნიან ლამაზ ვებ გვერდს.</p> <h2>HTML დოკუმენტის სტრუქტურა</h2> <p>ტიპიური HTML დოკუმენტის სტრუქტურა ასე გამოიყურება:</p><p>დოკუმენტის დეკლარაციის ტეგი <html> <head> <title>ტეგები, რომლებიც დაკავშირებულია დოკუმენტის სათაურთან სხეულთან დაკავშირებული ტეგები

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

დეკლარაცია

დეკლარაციის ტეგიგამოიყენება ვებ ბრაუზერის მიერ დოკუმენტში გამოყენებული HTML ვერსიის გასაგებად. Მოქმედი ვერსია HTML - 5 და ის იყენებს შემდეგ დეკლარაციას:

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

Გამარჯობა ყველას!. მეორე გაკვეთილს მივუძღვნით კითხვას - რა არის HTML და როგორ ვიმუშაოთ მასთან. მასში თქვენ გაეცნობით ყველაზე პოპულარული ვებ პროგრამირების ენის მახასიათებლებს და ნათლად გაიგებთ მის მთავარ არსს.

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

რა არის Html

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

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

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

HTML ენის საფუძვლები. ტეგის კონცეფცია

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

HTML-ის საფუძვლები არის ტეგები, უფრო ზუსტად რომ ვთქვათ, ტეგების ნაკრები. ისინი დანიშნულნი არიან ასე<тег>... ტეგები ყოველთვის დაწყვილებულია და ნაჩვენებია ასე

<тег>.

< тег> < / тег> .

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

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

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

Რას ნიშნავს ეს? ეს გვეუბნება, რომ ენის 20% (ჩვენს შემთხვევაში html) ასრულებს ძირითად სამუშაოს 80%. ლოგიკა იმაში მდგომარეობს, რომ არ არის აუცილებელი ყველა ტეგის სწავლა, რადგან ბევრი მათგანი უბრალოდ არ გამოიყენება ან ძალიან იშვიათად გამოიყენება. ასე რომ, ჩვენს გაკვეთილებში ყურადღებას ვამახვილებთ ყველაზე გახშირებულ და მნიშვნელოვანზე. და თქვენ შესანიშნავი სამუშაო გააკეთეთ ამით!

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

ნებისმიერი html დოკუმენტის სტრუქტურა ასე გამოიყურება

უსახელო დოკუმენტი

< ! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 გარდამავალი // EN""http://www.w3.org/TR/html4/loose.dtd">

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" >

< title >დოკუმენტი სათაურის გარეშე< / title >

< / head >

< body >

< / body >

< / html >

ახლა მოდით უფრო დეტალურად აღვწეროთ თითოეული წერტილი:

რა არის Doctype და მისი მნიშვნელობა

doctype ელემენტი გამოიყენება ჩვენი ვებ გვერდის ტიპის მითითებისთვის. ეს არის ეგრეთ წოდებული "დოკუმენტის ტიპის დეკლარაცია" ან დოკუმენტის ტიპის დეკლარაცია.

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

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

Doctype-ის რამდენიმე მნიშვნელობა გამოირჩევა:

მკაცრი
გარდამავალი
ჩარჩოების ნაკრები (ჩარჩოებით)

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

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

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

ენის სტანდარტების მკაცრი დაცვა

< ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 მკაცრი // EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

< html xmlns = "http://www.w3.org/1999/xhtml">

< head >

< title >მკაცრი ენის სტანდარტების შესაბამისობა< / title >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< / head >

< body >

< p > . . . < / p >

< / body >

< / html >

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

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

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

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

რატომ არის ადვილი HTML-ის სწავლა?

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

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

ცოტა თეორია...

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

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

მაგრამ რა არის ტეგი HMTL-ში?

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

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

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

და დახურვა
და დახურვა
და დახურვა

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

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

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

ისე, უფრო გასაგები გახდა რა არის HTML? 😉 მაგრამ ჩვენ არ ვჩერდებით და ვაგრძელებთ...

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

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

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

შეასწორეთ HTML კოდი

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

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

ასე დახურეთ ტეგები კატეგორიულად აკრძალულია!

ივარჯიშეთ იმის გასაგებად, თუ რა არის HTML...

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

Დავიწყოთ. პროგრამის გახსნის შემდეგ ნახავთ შემდეგ ფანჯარას:

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

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

შემდეგი, თქვენ უნდა შეინახოთ ეს გვერდი HTML ფორმატში. ამისათვის დააჭირეთ მენიუს "ფაილი", აქ დააჭირეთ "შენახვა როგორც ...". შეიყვანეთ HTML გვერდის სახელი. მე დავარქვი index.html. მაშინ ჩვენ უბრალოდ შევინახავთ კომფორტული ადგილიჩემს კომპიუტერზე. ამის შემდეგ, უკანა განათება გამოჩნდება HTML ტეგები, რადგან Notepad ++ რედაქტორი მიხვდება, რომ ასეა HTML დოკუმენტი... და ბევრად უფრო სასიამოვნოა განათებასთან მუშაობა.