დამწყებთათვის საკუთარი ვებსაიტის შექმნა: 5 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:17

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

მარაგები

• Macintosh ან Windows PC (თუმცა Linux დისტრიბუციის გამოყენებაც შესაძლებელია, მე მათ ახლა გამოვტოვებ, რადგან ეს დამწყებთათვის არის შესავალი).
• თქვენი არჩევანის ტექსტური რედაქტორი (Notepad Windows– ზე, TextEdit Mac– ზე) ან თქვენი IDE არჩევანი. ჩემი გამოცდილებით, ვიპოვე ვიზუალური სტუდიის კოდი, რომელიც საუკეთესოდ მუშაობს ჩემთვის, ამიტომ ასევე გირჩევთ შეამოწმოთ იგი აქ: https://code.visualstudio.com/ რომ აღარაფერი ვთქვათ ის მუშაობს ყველა OS პლატფორმაზე.

ნაბიჯი 1: წარწერები და ცოტა ისტორია

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

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

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

აქ არის რამოდენიმე ძირითადი HTML ტეგები:

• სათაური - რომელიც გამოიყენება ბრაუზერის სათქმელში, რა არის გვერდის სათაური. ეს არის ის, რასაც ხედავთ, როდესაც უყურებთ ვებ - გვერდის ჩანართს.
• h1, h2, h3, h4 - რომლებიც გამოიყენება სათაურის სხვადასხვა ზომისთვის h1 არის ყველაზე დიდი და h4 არის ყველაზე პატარა. ამაზე მეტს განვიხილავ შემდეგ ნაწილში.
• p - აბზაცი, გამოიყენება ტექსტის აბზაცების დასაწერად. როგორც აბზაცები ქაღალდზე.
• br - შესვენება, რომელიც ტექსტში შეესაბამება შესვენებას.
• a - გამოიყენება სხვა გვერდებზე ბმულების შესაქმნელად, როგორიცაა დაწკაპუნებადი ბმული.
• img - გამოიყენება სურათის ვებ – გვერდზე დასაკავშირებლად.
• ul, ol, li - შეუსაბამო სიები, მოწესრიგებული სიები და სიის ერთეულები.
• - გამოიყენება კოდში შემოსული კომენტარების შესაქმნელად, რომელიც არ ჩანს საბოლოო მომხმარებლის მიერ.

აქ არის რამდენიმე CSS ტეგები (ვიზუალური):

• ფერი - გამოიყენება კონკრეტული ფერის მინიჭებისთვის კონკრეტულ ელემენტზე ან ვებ გვერდზე.
• font-size-გამოიყენება გვერდის შრიფტის ზომის შესაცვლელად.
• ფონი-გამოიყენება გარკვეული ელემენტის ან მთელი გვერდის ფონის ფერის შესაცვლელად.

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

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

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

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

და

ტეგები, სადაც თქვენ შეიყვანთ რაც გსურთ!

ნაბიჯი 2: რედაქტორის დაყენება

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

ბლოკნოტში:

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

VS კოდის ფარგლებში:

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

ნაბიჯი 3: გეგმები

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

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

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

ნაბიჯი 4: კოდი; კოდი; კოდი;

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

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

როგორც ხედავთ, სათაური ნაჩვენებია ჩანართზე, ასევე ჩანს ჩვენი h1 სათაური. მე მირჩევნია ფაილის ორივე ბრაუზერის ფანჯარა გაიხსნას IDE– ს გვერდით, რადგან როდესაც თქვენ ცვლილებთ IDE– ს და შეინახავთ, ცვლილებები მყისიერია ბრაუზერში.

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

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

ნაბიჯი 5: საბოლოო აზრები

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