Გამოყენებითი 

HTML საფუძვლები დამწყებთათვის. WEB პროგრამირების ენის HTML საფუძვლები

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

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

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

ახლა ცოტას ავხსნი. ყველა ტეგი ( ტეგი - ჰიპერტექსტის მარკირების ენის ელემენტი) იყოფა ორ ტიპად: "ერთჯერადი" და "დახურვა". გარდა ამისა, ტეგები თან ერთვის შემდეგ სიმბოლოებს< и >, ისინი განასხვავებენ ტეგს ჩვეულებრივი html ტექსტისგან. მოდით შევხედოთ რამდენიმე უმარტივეს „ერთ“ ტეგს:


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

ჩემი პირველი საიტი გამარჯობა ყველას!
და ეს ჩემი პირველი საიტია.

შედეგის ნახვა შესაძლებელია.

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

  • align - განსაზღვრავს ხაზის გასწორებას. შეუძლია მნიშვნელობის აღება მარცხნივ, ცენტრში, მარჯვნივ.
  • ფერი - ადგენს ხაზის ფერს.
  • noshade - ხაზს უსვამს ხაზს 3D ეფექტების გარეშე.
  • ზომა - ადგენს ხაზის სისქეს.
  • width — ადგენს ხაზის სიგანეს.

კოდი ტეგის გამოყენებით:

ჩემი პირველი საიტი გამარჯობა ყველას ეს ჩემი პირველი საიტია.

ვიზუალური მაგალითი შეგიძლიათ იხილოთ აქ.

კიდევ ერთი "ერთი" ტეგი არის . ეს ტეგი გამოიყენება ბრაუზერებისა და საძიებო სისტემებისთვის განკუთვნილი ინფორმაციის შესანახად. საძიებო სისტემები ეძებენ მეტა ტეგებს, რათა მიიღონ საიტის აღწერილობები, საკვანძო სიტყვები და სხვა მონაცემები. თქვენ უფლება გაქვთ გამოიყენოთ შეუზღუდავი რაოდენობის მეტატეგები, ყველა მათგანი უნდა იყოს და შორის. ნებისმიერი მეტატეგის პარამეტრები არის „სახელი=მნიშვნელობის“ ფორმის, რომელიც განისაზღვრება საკვანძო სიტყვებით content , name ან http-equiv . იმიტომ რომ მეტა ტეგები განკუთვნილია მანქანებისთვის, ისინი არ ქმნიან რაიმე ვიზუალურ ცვლილებებს, ამიტომ მე მხოლოდ წყაროს კოდს მოგაწოდებთ:

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

არის სხვა ცალკეული ტეგები (, ,
, , , , , , , , , , , , , ), მაგრამ მათ ცოტა მოგვიანებით გაგაცნობთ.

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

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

ჩემი პირველი საიტი გამარჯობა ყველას! და ეს ჩემი პირველი საიტია.
Სალამი ყველას! და ეს ჩემი პირველი საიტია.

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

ტეგები ტექსტის ხაზგასმისთვის

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

— აყენებს შრიფტს თამამად.

- ადგენს დახრილ შრიფტის სტილს.

- ამატებს ხაზს ტექსტს.

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

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

— აჩვენებს ტექსტს, როგორც მონოსივრცის ტექსტს. ამოღებულია HTML5-დან.

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

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

- მიზნად ისახავს ტექსტის ხაზგასმას. ბრაუზერები აჩვენებენ ამ ტექსტს თამამად.

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

— ზრდის შრიფტის ზომას ერთით ჩვეულებრივ ტექსტთან შედარებით. HTML-ში შრიფტის ზომა იზომება ერთეულებში 1-დან 7-მდე, ნაგულისხმევი ტექსტის საშუალო ზომაა 3. ამრიგად, ტეგის დამატება ტექსტს ერთი ერთეულით ზრდის. ნებადართულია ჩადგმული ტეგები და შრიფტის ზომა უფრო დიდი იქნება თითოეულ დონეზე.

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

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

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

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

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

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

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

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

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

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

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

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

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

რა არის HTML?

HTML არის ვებ გვერდების სტრუქტურის აღწერის ენა. HTML ავტორებს აძლევს საშუალებას:

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

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

რა არის CSS?

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

რა არის WebFonts? WebFonts არის ტექნოლოგია, რომელიც საშუალებას აძლევს ადამიანებს გამოიყენონ შრიფტები მოთხოვნისამებრ ინტერნეტში, ოპერაციულ სისტემაში ინსტალაციის საჭიროების გარეშე. W3C-ს აქვს გამოცდილება ჩამოსატვირთად შრიფტებში HTML, CSS2 და SVG საშუალებით. ბოლო დრომდე, ჩამოსატვირთი შრიფტები არ იყო გავრცელებული ინტერნეტში, თავსებადი შრიფტის ფორმატის არარსებობის გამო. WebFonts-ის ძალისხმევა გეგმავს ამის მოგვარებას ინდუსტრიის მიერ მხარდაჭერილი, ღია შრიფტის ფორმატის ინტერნეტისთვის (ე.წ. "WOFF") შექმნის გზით.

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

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

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

HTML საფუძვლები

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

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

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

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

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

საფუძვლები დამწყებთათვის

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

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

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

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

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

ევგენი ნესმელოვის ბლოგი! ვებსაიტი html და css-ის საფუძვლები დამწყებთათვის

რა ტეგებისგან შედგება ნებისმიერი html დოკუმენტი, რას მოიცავს და სად უნდა ჩაიწეროს ეს ყველაფერი?

< html >

< body >

< h2 >< / h2 >

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

< h2 >ევგენია ნესმელოვის ბლოგი! ნესმელოვი. ru HTML და CSS-ის საფუძვლები დამწყებთათვის< / h2 >

< / body >

< / html >

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

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

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

ტექსტი

< strong > < i >ტექსტი< / strong > < / i >

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

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

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

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

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

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

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

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

შინაარსი

< head >შინაარსი< / head >

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

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

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

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

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

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

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

.ბაზა (სიგანე: 100 პიქსელი; ფონის ფერი: #000; სიმაღლე: 150 პიქსელი; ფერი: #fff; )

< style type = "text/css" >

ბაზა (

სიგანე: 100px;

ფონი - ფერი : #000;

სიმაღლე: 150px;

ფერი: #fff;

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

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

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

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

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

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

გვერდის სათაურები h1 h2 h3

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

სტატიაში ასეთი სათაურების არსებობა მნიშვნელოვან როლს შეასრულებს გვერდის პოპულარიზაციაში. გარდა ამისა, მათი გამოყენება გაძლევთ მკაფიო გვერდის სტრუქტურას, მის სათაურს, ქვესათაურებს, მაჩვენებლებს, ქვეპუნქტებს და ა.შ. ყოველთვის გამოიყენეთ ისინი და განახორციელეთ ისინი პრაქტიკაში. ბევრ CMS-ზე, როგორიცაა WordPress, ტექსტის წერისას შეგიძლიათ იხილოთ „სათაური 1“, „სათაური 2“, „სათაური 3“ და ა.შ. ისინი არიან პასუხისმგებელი h1, h2 და h3.

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

დასაწყისში და დახურეთ ბოლოს

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

HTML დოკუმენტი

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

< ! DOCTYPE html >

< html >

< head >

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

< title >HTML დოკუმენტი< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

ძირითადი ელემენტები Head და Title

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

სათაური და გვერდის შინაარსი

< / html >

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

Notepad ++ რედაქტორი

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

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

DOCTYPE ელემენტი

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

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

მოკლედ მკაფიო ენაზე html-ის საფუძვლების შესახებ: ეს სტრიქონი ეუბნება ბრაუზერს, რომ ეს დოკუმენტი არის XHTML ვერსია 1.0, გამოიყენება ინგლისური და მთელი ეს არეულობა მდებარეობს ამ მისამართზე. შემდეგი, მეტა ტეგში ჩვენ მივუთითებთ კოდირებას, რომელიც გამოიყენება. ყველაზე ხშირად გამოყენებული არის Windows 1251.

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

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

რა უნდა გახსოვდეთ ამ გაკვეთილიდან html-ის საფუძვლების შესახებ:

  • თითქმის ყველა ტეგი იხსნება და იხურება;
  • დოკუმენტი იწყება ტეგით;
  • ტეგის არსებობა;
  • ტეგის არსებობა;
  • html დოკუმენტის გასუფთავება.

    • ყველა მთავარ გვერდს ყოველთვის უნდა ერქვას ინდექსი. ასეა მიღებული და ყველა მიჩვეულია, ფაილის გაფართოება როგორიც არ უნდა იყოს, შეიძლება იყოს html ან php. ყოველთვის ასე ეძახიან.

    უყურეთ ვიდეოს HTML საფუძვლების შესახებ Webformyself-ისგან.

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

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

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

    როგორ ვისწავლოთ ენა უფასოდ?

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

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

    ინტერაქტიული კურსები

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

    მშვენიერი საიტია html და css კურსებით. პირველი 16-18 კურსი უფასოა! თუ გსურთ გააგრძელოთ სწავლა და მიიღოთ წვდომა ფასიანზე, მოგიწევთ თვეში 300 რუბლის გადახდა ან წელიწადში 1800. პირადად მე გადავიხადე 300 მანეთი, დავასრულე ყველა ფასიანი კურსი ერთ თვეში და დიდი სარგებელი მივიღე მისგან.

    ჩანაწერების მნიშვნელობა

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

    html და css-ის პარალელური შესწავლა

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

    დამოუკიდებელი პრაქტიკა

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

    გაკვეთილები webformyself გუნდისგან

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

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

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

    რამდენი დრო სჭირდება ენების სწავლას?

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

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

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

    ვიზუალური რედაქტორები

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

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

    ტეგები

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

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

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

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

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

    უფროსი

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

    Ბმული

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

    სხეული

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

    გაქვთ შეკითხვები?

    შეატყობინეთ შეცდომას

    ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

    გაგზავნა