როგორ შევქმნათ HTML გვერდი

თუ გსურთ შექმნათ თქვენი საკუთარი ვებ გვერდი, თქვენ უნდა გქონდეთ HTML-ის გაგება. This article explains how to create an HTML page. ასევე, თქვენ შეისწავლით როგორ შექმნათ xml საიტის რუკა და როგორ დაამატოთ სურათი და ბმული. ასევე მნიშვნელოვანია xml საიტის რუქის შექმნა, რაც დაგეხმარებათ თქვენი საიტის ორგანიზებაში და თქვენი ტრაფიკის გაზრდაში. შემდეგი ნაბიჯი არის შაბლონის არჩევა.

Creating a html page

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

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

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

Creating a xml sitemap

If you have an HTML page, შეიძლება დაგჭირდეთ შექმნათ XML საიტის რუკა, რათა დაეხმაროთ საძიებო სისტემებს თქვენი ვებსაიტის დაცურაში. მიუხედავად იმისა, რომ ეს არ იმოქმედებს თქვენს ძიების რეიტინგზე, ის დაეხმარება საძიებო სისტემებს გააცნობიერონ თქვენი შინაარსი და შეცვალონ მათი მცოცავი სიჩქარე. Ამ გზით, თქვენი ვებგვერდი უფრო თვალსაჩინო იქნება საძიებო სისტემის შედეგებში. აქ მოცემულია რამდენიმე მარტივი ნაბიჯი დასაწყებად:

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

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

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

Adding a picture

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

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

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

Adding a link

You can add a link in HTML to your document using an a> ტეგი href ატრიბუტით. ეს შექმნის სანიშნეს დოკუმენტისთვის და გახსნის მას ახალ ჩანართში. ასევე შეგიძლიათ გამოიყენოთ href ატრიბუტი დოკუმენტში გამოსახულების ჩასართავად. თქვენ ასევე შეგიძლიათ გამოიყენოთ ბმული JavaScript კოდით HTML ღილაკის ბმულად გადასაყვანად. როგორც კი ამას გააკეთებ, შეგიძლიათ თქვენი ბმულის სტილი CSS ან JavaScript კოდით.

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

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

Adding a table

Adding a table to an HTML page is simple, მაგრამ არის რამდენიმე რამ, რაც უნდა გაითვალისწინოთ სანამ ამას გააკეთებთ. თქვენი მაგიდის ფონის ფერი გადამწყვეტია იმისათვის, რომ მიიპყროთ თქვენი მნახველი და ყურადღება მიიპყროთ მნიშვნელოვან ინფორმაციაზე. ცხრილის სათაურის ელემენტისა და მონაცემთა ელემენტისთვის შეგიძლიათ დააყენოთ სხვა ფერი თექვსმეტობითი ფერის კოდების ან ფერის სახელების გამოყენებით. Ასეა თუ ისე, თქვენი მაგიდა ადვილად შესამჩნევი იქნება.

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

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

Adding a div

Adding a div to an HTML file allows you to add a section of your webpage without re-writing the whole page. div ელემენტი არის სპეციალური კონტეინერი ტექსტისთვის, სურათები, და სხვა ელემენტები. შეგიძლიათ დაასახელოთ ის, რაც მოგწონთ და შეცვალოთ მისი ატრიბუტები თქვენს საჭიროებებზე. თქვენ ასევე შეგიძლიათ დაამატოთ კლასი ან ზღვარი, რათა შექმნათ სივრცე თქვენს გვერდზე div-სა და სხვა ელემენტებს შორის.

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

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