თქვენი პირველი ვებსაიტის შექმნა: 10 ნაბიჯი

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

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

ნაბიჯი 1: შექმენით თქვენი საქაღალდე

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

ნაბიჯი 2: შექმენით თქვენი პირველი ფაილი

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

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

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

ნაბიჯი 3: გახსენით ფაილი

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

ნაბიჯი 4: შექმენით თქვენი გვერდი

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

h1 {ფერი: ლურჯი; text-align: center;}

რასაც ჩვენ ბრაუზერს ვეუბნებით არის h1 ტეგში ნებისმიერი ელემენტის პოვნა (რომლის შესახებაც ვისწავლეთ მე –2 ნაბიჯში) და მივცეთ მას ლურჯი ფერი და გავამახვილო იგი გვერდის ცენტრში. შეინახეთ ეს ფაილი საქაღალდეში, რომელიც ჩვენ შევქმენით 1 ნაბიჯში, როგორც style.css.

ნაბიჯი 5: მიაბით Style.css თქვენს Index.html- ს

ამ ეტაპზე ჩვენ გვაქვს ორი ცალკეული ფაილი, რომლებიც არ იციან ერთმანეთის შესახებ. ჩვენ უნდა ვუთხრათ ჩვენს index.html ფაილს, რომ ჩვენ გვაქვს style.css ფაილი, რომელსაც ჩვენ გვინდა, რომ ის მოიხსენიებდეს და აიღოს რაღაც სტილი. ამისათვის ჩვენ ვაპირებთ გავხსნათ ჩვენი index.html ფაილი ჩვენს ტექსტურ რედაქტორში, ხოლო ჩვენი h1 ტეგის ზემოთ ჩვენ დავამატებთ იმას, რაც ცნობილია როგორც ბმულის ტეგი. ბმულის ტეგი აკეთებს ზუსტად ისე, როგორც მისი სახელწოდება გულისხმობს, ის რაღაცას უკავშირდება. ჩვენს შემთხვევაში სტილის ფურცელი. წადი წინ და აკრიფე. ბმულის ტეგი არის თვით დახურვის ტეგი, ასე რომ დამთავრებული ტეგი არ არის საჭირო. Rel ნიშნავს ურთიერთობას და href გვეუბნება ინდექსის ფაილს, სადაც მდებარეობს ჩვენი გარე ფაილი, რომელსაც ჩვენ ვნიშნავთ. ახლა შეინახეთ index.html ფაილი.

ნაბიჯი 6: იხილეთ თქვენი ახალი სტილის გვერდი

გადახედეთ მე –3 ნაბიჯს და განაახლეთ თქვენი ვებ გვერდი და შეხედეთ როგორ აისახება ცვლილებები.

ნაბიჯი 7: ღილაკის შექმნა

გახსენით თქვენი index.html ფაილი თქვენს ტექსტურ რედაქტორში და ჩაწერეთ შემდეგი:

Დამაკლიკე!

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

ნაბიჯი 8: შექმენით თქვენი Javascript ფაილი

და ბოლოს ჩვენ ვაპირებთ შევქმნათ ჩვენი javascript ფაილი. ეს გახდება ჩვენი საიტი ინტერაქტიული. გახსენით ტექსტური რედაქტორი და ჩაწერეთ შემდეგი:

document.querySelector ("#ღილაკი"). addEventListener ("დაწკაპუნება", ფუნქცია () {

document.querySelector ("#სათაური"). innerText = "სათაურის შეცვლა ფრენის დროს"

})

რასაც ჩვენ ვაკეთებთ, ჩვენ ვთხოვთ დოკუმენტს, რომ იპოვოს ელემენტი ღილაკის პირადობის მოწმობით და ჩვენ ვაპირებთ, რომ ღილაკი უპასუხოს დაწკაპუნების მოვლენას, ელემენტის ტექსტის შეცვლით სათაურის ID- ით "სათაურის შეცვლა ფრენის დროს" ". შეინახეთ ფაილი როგორც button.js საქაღალდეში, რომელიც ჩვენ შევქმენით ნაბიჯი 1 -ში.

ნაბიჯი 9: დააკავშირეთ თქვენი Javascript და ინდექსის ფაილები

როგორც ჩვენ გავაკეთეთ style.css ფაილთან ერთად, ჩვენ უნდა ვუთხრათ ჩვენს index.html ფაილს ჩვენი javascript ფაილის შესახებ. ბოლოში, ყველაფრის ქვემოთ, რაც აქამდე გავაკეთეთ, ჩაწერეთ შემდეგი:

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

ნაბიჯი 10: შეამოწმეთ ახლად შექმნილი ღილაკი

ახლა წადი და დააწკაპუნე ღილაკზე და უყურე სათაურის შეცვლას!

გილოცავ !! თქვენ შექმენით თქვენი პირველი ინტერაქტიული ვებ გვერდი! მაინტერესებს რამდენად შორს წახვალთ იმის ცოდნით რაც ახლა იცით ??