HTML დამწყებთათვის:

ვებსაიტების ვებ – ტექნოლოგია


2009 წ

2005 წ

2002 წ

2000 წ

1998 წ

1997 წ

1996 წ

1994 წ

1991 წ

HTML5

AJAX

Tableless ვებ დიზაინი

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

შესავალი

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

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

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

რა არის HTML?

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

HTML პროცენტების სხვადასხვა ქვეკატეგორიები

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

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

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


სად გამოიყენება HTML?

პოპულარული საიტები HTML გამოყენებით

სად გამოიყენება HTML

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

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

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

  • შექმენით დამატებითი შინაარსი ელ.ფოსტით

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

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

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

HTML და CSS
HTML და CSS ნახვა [Cheat Sheet]

HTML გვერდის სტრუქტურა

</strong><br/> <strong>
გვერდის შინაარსი

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

HTML დოკუმენტები საჭიროა დაიწყოს დოკუმენტის ტიპის დეკლარაციით (არაფორმალურად, “დოქტიპი”). ბრაუზერებში, Doctype დაგეხმარებათ rendering რეჟიმის განსაზღვრაში. HTML5 არ განსაზღვრავს DTD; შესაბამისად, HTML5- ში დოქტიპის დეკლარაცია უფრო მარტივი და მოკლეა.


სანამ html გვერდის შექმნას შეძლებთ, საფუძვლები გჭირდებათ.

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

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

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

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

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


თქვენ შეგიძლიათ განათავსოთ აქ ტექსტი ან კოდი, მაგალითად
Google Analytics თვალთვალის კოდი
მაგალითი.

თქვენი გვერდის ძირითადი ორგანო გადის
აქ. შეავსეთ იგი ტექსტით და სურათებით!

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


თქვენ შეგიძლიათ განათავსოთ აქ ტექსტი ან კოდი, მაგალითად
Google Analytics თვალთვალის კოდი
მაგალითი.

ჩემი პირველი სასაქონლო

მოგესალმებით ჩემს საიტზე!

საკონტაქტო ინფორმაცია შეიძლება აქ წასვლა


HTML წარწერები

HTML წარწერები

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

სასაქონლო წარწერები

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

,

,

,

,

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

არსებობს 12 კატეგორიის ტეგები:


ეს არის სათაური 1

ეს არის მე -2 თავი

ეს არის მე -3 თავი

ეს არის მე –4 თავში

ეს არის მე -5 თავი

ეს არის მე -6 თავი

HTML წარწერების ტექნოლოგიების წამყვანი
გაზიარება ინტერნეტში

0.27%

HTML5
ტილო Tag

0.29%

HTML5
აუდიო ჩანართი

0.69%

HTML5
ვიდეო ტეგს

3.1%

HTML5
SVG Tag

6.54%

HTML5
ჩანართების ჩასმა


დადასტურების შემდეგ, ეს გადათარგმნება შემდეგ ვებ – გვერდზე შემდეგ ესთეტიკურად’სადესანტო გვერდი:

ეს არის სათაური 1

ეს არის მე -2 თავი

ეს არის მე -3 თავი

ეს არის მე –4 თავში

ეს არის მე -5 თავი

ეს არის მე -6 თავი

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

აბზაცების წარწერები

ვიდეო და აუდიო მხარდაჭერა
დაივიწყეთ Flash Player და სხვა მესამე მხარის მედია ფლეერების შესახებ, გახადეთ თქვენი ვიდეო და აუდიო ნამდვილად ხელმისაწვდომი HTML5-ით

ანალოგიური პრინციპი გამოიყენება აბზაცების დაწყების შესახებ, რომლებიც ასახულია

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

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

თქვენი პირველი პუნქტი

თქვენი მეორე პუნქტი

თქვენი მესამე პუნქტი

HTML5 ვიდეო ტეგის გამოყენება მთელ მსოფლიოში ვებსაიტების საშუალებით

ქვეყანა
ვებსაიტების რაოდენობა
შეერთებული შტატები
140,008
რუსეთი
87,508
გერმანია
34,519
გაერთიანებული სამეფო
26,609
საფრანგეთი
25,697
იაპონია
23,578
ტაივანი
19,798
უკრაინა
19,204
ბრაზილია
16,773
ჩინეთი
16,523
Დანარჩენი მსოფლიო
265,371

HTML ფორმატის გარეთ, ეს დაშლის ტექსტს შემდეგნაირად თქვენს დასრულებულ ვებ – გვერდზე:

თქვენი პირველი პუნქტი

თქვენი მეორე პუნქტი

თქვენი მესამე პუნქტი

Line Break წარწერები

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

ელემენტი.

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

ტექსტის გასაშლელი ელემენტები და ინფორმაციის მნიშვნელოვანი ნაწილები. პერსონაჟის br- ს და წინსვლას შორის ერთი სივრცე მნიშვნელოვანია, რადგან სხვაგვარად, HTML ფორმატში ტეგის ამოცნობა არ ხდება.

აქ არის მაგალითი:

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

Დილა მშვიდობისა

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

Საუკეთესო სურვილებით

მისტერ ჯ

განაცხადის შეტანის შემდეგ, ტექსტი შემდეგნაირად იშლება:

Დილა მშვიდობისა,

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

Საუკეთესო სურვილებით

მისტერ ჯონსი

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

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

ჰორიზონტალური ხაზები

ვებსაიტის კატეგორიები, სადაც გამოიყენება HTML5 ტილოების Tag

ვებსაიტის კატეგორიები, სადაც გამოიყენება HTML5 ტილოების Tag

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

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


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

თქვენი პირველი პუნქტი


თქვენი მეორე პუნქტი

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

თქვენი პირველი პუნქტი
________________________________________

თქვენი მეორე პუნქტი

თქვენი პირველი პუნქტი
_______________________

თქვენი მეორე პუნქტი

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


სურათის წარწერები

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

ზოგიერთი_ ტექსტი

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

 HTML5 Icon

HTML ელემენტები

html ელემენტები

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

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

HTML ელემენტების განსაზღვრა

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

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

ან

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

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

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

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

XHTML ელემენტის სახელი
თავი
სათაური
html
სხეული

მეტა
img
მაგიდა
ტ.დ.
ტრ
ბრ
გვ
დამწერლობა
შრიფტი
დივ

ბმული
ცენტრი
სპანი
ფორმა
შეყვანა
სტილი
სთ
ძლიერი
მე
ჰლ
ლი
noscript
რუქა
ფართობი
ul
შერჩევა
ვარიანტი
თ 3
ჰ2
ჩარჩო
ჩარჩო
პარამ
ჩანერგვა
ემ
შენ
ობიექტი
ბლოკკოტი
არა
ჩარჩოები
თემი
iframe
პატარა
ჰ4
ბაზა
ნორდი





























0
10
20
30
40
50
60
70
80
90
100

ბუდე HTML ელემენტების გამოყენებით

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

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

თამამი, იტალიური და ხაზგასმული ტექსტი HTML- ში

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

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

მე მინდა ეს სიტყვა უნდა იყოს თამამი.


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

მე მინდა ეს სიტყვა უნდა იყოს თამამი.

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

მე მინდა ეს სიტყვა უნდა იყოს თამამი.

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

ელემენტი. ეს ახლა გარდაქმნის შინაარსს ელემენტში, ისე, რომ ის შემდეგნაირად გამოჩნდება:

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

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

ელემენტი, რომელიც შემდეგნაირად ჩანს HTML- ში:

მე მინდა ეს სიტყვის ხაზგასმა.

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

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

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

HTML ატრიბუტები

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


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

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

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

“ლენგის” ატრიბუტი

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

აღიარებულია რამდენიმე ძირითადი ატრიბუტის ტიპი, მათ შორის:

საჭირო ატრიბუტები, ამ ელემენტის ტიპისთვის საჭიროა კონკრეტული ელემენტის ტიპი სწორად ფუნქციონირებისთვის

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

სტანდარტული ატრიბუტები, ელემენტების ტიპების დიდი რაოდენობით მხარდაჭერა

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


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

“გასწორება” ატრიბუტი

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

ეს ტექსტი ცენტრალიზებულია

HTML5- ით აშენებული აპების ტიპები

პროდუქტიულობა
54%
კომუნალური
38%
მომხმარებელი
35%
ლობ
22%
Აქტივობა სოციალურ ქსელში
18%
Გასართობი
17%
ცხოვრების წესი
12%
მოგზაურობა
9%
თამაშები
8%
სხვა
13%

ეს აერთიანებს თქვენს

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

ეს ტექსტი ცენტრალიზებულია
ეს ტექსტი ცენტრალიზებულია
ეს ტექსტი ცენტრალიზებულია

“ჰერეფის” ატრიბუტი

HTML5 ასევე გააჩნია შესანიშნავი API– ები, რომელთა საშუალებითაც შეგიძლიათ შექმნათ უკეთესი მომხმარებლის გამოცდილება და გახდეთ უფრო დინამიური ვებ – პროგრამა – აქ არის სწრაფი API– ების ჩამონათვალი:
  • გადაათრიეთ და ჩამოაგდეთ (DnD)
  • შენახვის მონაცემთა ბაზაში
  • ბრაუზერის ისტორიის მენეჯმენტი
  • დოკუმენტის რედაქტირება
  • მედიის დროული დაკვრა

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

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

Google

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

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


“ფერი” ატრიბუტი

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

HTML5 ტილო
იხილეთ HTML5 ტილო [ყალბი ფურცელი]

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

ფონის ფერი მითითებულია წითელი გამოყენებით

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

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


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

გამოცადე საკუთარი თავი

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

HTML5- ზე ბრაუზერის დაფუძნებულ პროგრამებს არ ექნება პრობლემა გეოლოკაციის გამოყენებით

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

მთავარი თავსართი

კეთილი იყოს თქვენი მობრძანება ჩვენს ვებ – გვერდზე, მაგალითად.com! ვიმედოვნებთ, რომ ისიამოვნებთ ჩვენი შინაარსის მოსმენით, მოგერიდებათ ჩვენთვის.

მადლობა ვიზიტისთვის!

Გაიგე მეტი.

HTML5– ის გამოყენება დეველოპერების მიერ
(რეგიონის მიხედვით)

ჩრდილოეთ და ლათინური ამერიკა
70%
სამხრეთ ამერიკა
61%
ASPAC
60%
ავსტრალია
60%
ევროპა
59%
აფრიკა
50%

________________________________________

კითხვები:

  1. დაასრულეთ სათაურის ელემენტი სწორი დახურვის ჩანართით.
  2. თავსართი გააკეთე თამამად.
  3. თავსატეხის ქვეშ ჩადეთ ჰორიზონტალური ხაზი.
  4. გამოიყენეთ ფერის ატრიბუტი და ჩრდილში ‘მადლობა ვიზიტისთვის’ მწვანეში
  5. ჩადეთ ეს ჰიპერბმული (https://www.w3schools.com/html/) წამყვან ტექსტში “Ვისწავლოთ
    მეტი.”
  6. გვერდზე, გამოიყენეთ სახელი =”მნიშვნელობის ფორმატის აბზაცებად მარცხენა გასწორება


დასკვნა

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map