შიშველი ძვლების ვებ გვერდი: 10 ნაბიჯი

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

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

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

ნაბიჯი 1: გამოიყენეთ Notepad

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

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

ნაბიჯი 2: ძირითადი HTML დოკუმენტის ხის დამატება

ყველა ვებ გვერდი უნდა დაიცვას ჩონჩხის სტანდარტული სტრუქტურა, რათა თქვენსმა ბრაუზერმა (Chrome, Firefox, Edge, Internet Explorer, Safari…) დაამუშაოს და აჩვენოს თქვენი ვებ გვერდი.

ამას ქვია html დოკუმენტის ხე. Notepad– ში ჩაწერეთ html „ელემენტები“ან „ტეგები“როგორც ნაჩვენებია ეკრანის კადრში. ასევე მოგერიდებათ დააკოპირეთ და ჩასვით:

ნაბიჯი 3: შენახვა.html გვერდზე

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

1. აირჩიეთ "ფაილი"> "შენახვა როგორც …" (ეკრანის სურათი 1)
2. შეცვალეთ ფაილის ტიპი "ყველა ფაილი" (ეკრანის სურათი 2)
3. მიეცით თქვენს ფაილს თქვენთვის სასურველი სახელი. დარწმუნდით, რომ შეინახეთ სად ინახავთ დოკუმენტს თქვენს კომპიუტერში, რათა მოგვიანებით გახსნათ იგი. შენიშვნა: ამ ფაილის შენახვის ყველაზე მნიშვნელოვანი ნაწილია ფაილის სახელის ბოლოს ".html" დამატება. ეს საშუალებას მისცემს თქვენს კომპიუტერს აღიაროს ის როგორც ვებ გვერდი. ასე რომ, თუ გსურთ დაასახელოთ თქვენი ფაილი "my_webpage", დარწმუნდით, რომ დაამატეთ.html ამის დასასრულს, მაგ. "my_webpage.html"

ნაბიჯი 4: სათაურის დამატება თქვენს ვებ გვერდზე

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

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

ტეილორის ვებგვერდი

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

და

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

ნაბიჯი 5: შინაარსის დამატება თქვენს ვებ გვერდზე

ისე, ჩვენ გვაქვს სათაური ჩვენი ვებ გვერდისთვის, მაგრამ ჩვენ ჯერ კიდევ არ გვაქვს რაიმე რეალური შინაარსი ამისთვის. მოდით დავამატოთ ცოტაოდენი ნიჭი!

ჩვენ დავამატეთ სათაური ჩვენს ვებ გვერდს "სათაურის" ელემენტის გამოყენებით. მოდით მივცეთ ჩვენს ვებ გვერდს დიდი, ყურადღების მიპყრობის სათაური 'h1' ელემენტის გამოყენებით, რომელიც არის სათაურის ელემენტი.

ტეილორის ვებგვერდი

კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე

ნაბიჯი 6: ჯერჯერობით ჩვენი ცვლილებების დათვალიერება

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

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

ნაბიჯი 7: პარაგრაფის ტეგის დამატება

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

ტეილორის ვებგვერდი

კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე

დღეს ჩვენ ვისწავლით თუ როგორ უნდა შევქმნათ ეს ძალიან მარტივი ვებ გვერდი!

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

ნაბიჯი 8: მიეცი მას ფერი

ჩვენ გვაქვს ჩვენი ვებ გვერდი, მაგრამ ის საკმაოდ მარტივია. მოდით მივცეთ ჩვენს აბზაცის ტეგს ფერი!

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

ტეილორის ვებგვერდი

კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე

დღეს ჩვენ ვისწავლით თუ როგორ უნდა შევქმნათ ეს ძალიან მარტივი ვებ გვერდი!

ნაბიჯი 9: სურათის დამატება

რა არის საიტი სურათების გარეშე? მოდით დავამატოთ სურათი ჩვენს ვებგვერდზე!

პირველი ნაბიჯი არის თქვენთვის სასურველი სურათის პოვნა. მე გამოვიყენე google სურათები ოქროს რეტრივერის მოსაძებნად. გაიყვანეთ სურათი ზემოთ და დარწმუნდით, რომ url მთავრდება.jpg,.png,.gif,-j.webp

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

დაამატეთ იგი თქვენს გვერდზე 'img' ტეგით 'src' ატრიბუტით:

ტეილორის ვებგვერდი

კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე

დღეს ჩვენ ვისწავლით თუ როგორ უნდა შევქმნათ ეს ძალიან მარტივი ვებ გვერდი!

ნაბიჯი 10: საბოლოო პროდუქტის ნახვა

შეინახეთ რვეულის ფაილი და გახსენით საბოლოო პროდუქტი. თქვენ უნდა ნახოთ თქვენი ვებ გვერდი!