Სარჩევი:
- ნაბიჯი 1: გამოიყენეთ Notepad
- ნაბიჯი 2: ძირითადი HTML დოკუმენტის ხის დამატება
- ნაბიჯი 3: შენახვა.html გვერდზე
- ნაბიჯი 4: სათაურის დამატება თქვენს ვებ გვერდზე
- ნაბიჯი 5: შინაარსის დამატება თქვენს ვებ გვერდზე
- კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
- ნაბიჯი 6: ჯერჯერობით ჩვენი ცვლილებების დათვალიერება
- ნაბიჯი 7: პარაგრაფის ტეგის დამატება
- კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
- ნაბიჯი 8: მიეცი მას ფერი
- კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
- ნაბიჯი 9: სურათის დამატება
- კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
- ნაბიჯი 10: საბოლოო პროდუქტის ნახვა
2025 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2025-01-23 14:50
დღეს ჩვენ ვაპირებთ შევქმნათ ძალიან მარტივი, შიშველი ძვლების ვებ გვერდი ნულიდან. ჩვენ ვისაუბრებთ HTML ელემენტებზე, თქვენი ვებ გვერდის სტილისტიკაზე (ფერები, შრიფტები, განლაგება და ა.შ.) და ბოლოს როგორ ჩადეთ სურათი თქვენს ვებ გვერდზე!
ამ ინსტრუქციის დასასრულს, თქვენ გექნებათ ძირითადი უნარები, შექმნათ ვებ გვერდი ნულიდან და აღმოაჩინეთ, რომ კოდირება არ არის ისეთი რთული, როგორც ჩანს!
ნაბიჯი 1: გამოიყენეთ Notepad
ჩვენ ვაპირებთ გამოვიყენოთ Notepad ფანჯრებზე, რომ შევქმნათ ჩვენი პირველი ვებ გვერდი. მიუხედავად იმისა, რომ ნებისმიერი ტექსტური რედაქტორი გააკეთებს, ნოუთბუქი წინასწარ არის დაინსტალირებული Windows აპარატებზე, ამიტომ ის შესანიშნავი ამოსავალი წერტილია.
ბლოკნოტის გასახსნელად გადადით თქვენს საძიებო ზოლზე თქვენი ეკრანის ქვედა მარცხენა კუთხეში და ჩაწერეთ "Notepad". შემდეგ შეარჩიეთ პროგრამა "Notepad", რომელიც გამოჩნდება ძიების შედეგებში. ახალი ფანჯარა უნდა გაიხსნას.
ნაბიჯი 2: ძირითადი HTML დოკუმენტის ხის დამატება
ყველა ვებ გვერდი უნდა დაიცვას ჩონჩხის სტანდარტული სტრუქტურა, რათა თქვენსმა ბრაუზერმა (Chrome, Firefox, Edge, Internet Explorer, Safari…) დაამუშაოს და აჩვენოს თქვენი ვებ გვერდი.
ამას ქვია html დოკუმენტის ხე. Notepad– ში ჩაწერეთ html „ელემენტები“ან „ტეგები“როგორც ნაჩვენებია ეკრანის კადრში. ასევე მოგერიდებათ დააკოპირეთ და ჩასვით:
ნაბიჯი 3: შენახვა.html გვერდზე
ახლა, როდესაც ჩვენ გვაქვს ჩვენი ძირითადი html სტრუქტურა Notepad– ში, შევინახოთ იგი ისე, რომ არ დავკარგოთ სამუშაო და ისე, რომ ჩვენ დავინახოთ ჩვენი ცვლილებები, როგორც ჩვენ წინ ვდგებით ინსტრუქციის საშუალებით.
- აირჩიეთ "ფაილი"> "შენახვა როგორც …" (ეკრანის სურათი 1)
- შეცვალეთ ფაილის ტიპი "ყველა ფაილი" (ეკრანის სურათი 2)
- მიეცით თქვენს ფაილს თქვენთვის სასურველი სახელი. დარწმუნდით, რომ შეინახეთ სად ინახავთ დოკუმენტს თქვენს კომპიუტერში, რათა მოგვიანებით გახსნათ იგი. შენიშვნა: ამ ფაილის შენახვის ყველაზე მნიშვნელოვანი ნაწილია ფაილის სახელის ბოლოს ".html" დამატება. ეს საშუალებას მისცემს თქვენს კომპიუტერს აღიაროს ის როგორც ვებ გვერდი. ასე რომ, თუ გსურთ დაასახელოთ თქვენი ფაილი "my_webpage", დარწმუნდით, რომ დაამატეთ.html ამის დასასრულს, მაგ. "my_webpage.html"
ნაბიჯი 4: სათაურის დამატება თქვენს ვებ გვერდზე
ამრიგად, ჩვენ გვაქვს ძირითადი html სტრუქტურა, რომელიც საჭიროა ვებ ბრაუზერებისთვის ჩვენი ვებ გვერდის ინტერპრეტაციისთვის და ჩვენებისთვის, მაგრამ ჩვენ არ გვაქვს შინაარსი. მოდით შევცვალოთ ეს!
პირველი რაც უნდა გავაკეთოთ არის სათაური მივცეთ ჩვენს ვებ გვერდს. ყველა ვებ გვერდს აქვს სათაური. ეს არის ის, რაც ნაჩვენებია თქვენს ბრაუზერის ჩანართზე (იხილეთ ეკრანის სურათი). მე ვაპირებ ჩემს ვებ გვერდს დავარქვა სათაური "ტეილორის ვებსაიტი". ამისათვის ჩვენ უნდა დავამატოთ "სათაურის" ელემენტი.
ტეილორის ვებგვერდი
ამ დროს თქვენ შეამჩნევთ, რომ ყველა ტეგს აქვს "გახსნის" ტეგი და "დახურვის" ტეგი. ისეთი როგორიც
და
ეს არის იმის გასარკვევად, სად იწყება სათაური და სად მთავრდება. თითქმის ყველა html ტეგები მიჰყვება ამას, თუმცა არის გამონაკლისები.
ნაბიჯი 5: შინაარსის დამატება თქვენს ვებ გვერდზე
ისე, ჩვენ გვაქვს სათაური ჩვენი ვებ გვერდისთვის, მაგრამ ჩვენ ჯერ კიდევ არ გვაქვს რაიმე რეალური შინაარსი ამისთვის. მოდით დავამატოთ ცოტაოდენი ნიჭი!
ჩვენ დავამატეთ სათაური ჩვენს ვებ გვერდს "სათაურის" ელემენტის გამოყენებით. მოდით მივცეთ ჩვენს ვებ გვერდს დიდი, ყურადღების მიპყრობის სათაური 'h1' ელემენტის გამოყენებით, რომელიც არის სათაურის ელემენტი.
ტეილორის ვებგვერდი
კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
ნაბიჯი 6: ჯერჯერობით ჩვენი ცვლილებების დათვალიერება
ჩვენ გვაქვს სათაური, გვაქვს გარკვეული შინაარსი, მოდით შევამოწმოთ ჩვენი ვებ გვერდი, თუ როგორ მოდის აქამდე.
- შეინახეთ ფაილი ნოუთბუქში
- გადადით იქ, სადაც შეინახეთ ფაილი და ორჯერ დააწკაპუნეთ მასზე. ის ავტომატურად უნდა გაიხსნას თქვენს ნაგულისხმევ ბრაუზერში. Კარგად გამოიყურები!
ნაბიჯი 7: პარაგრაფის ტეგის დამატება
ჩვენ გვაქვს სათაური, სათაური, ახლა დავამატოთ აბზაცი კიდევ რამდენიმე ტექსტით. აბზაცის ელემენტის სახელი არის "p". თქვენ შეგიძლიათ ნახოთ მისი გამოყენება ქვემოთ:
ტეილორის ვებგვერდი
კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
დღეს ჩვენ ვისწავლით თუ როგორ უნდა შევქმნათ ეს ძალიან მარტივი ვებ გვერდი!
შენიშვნა: თქვენ შეგიძლიათ ნახოთ თქვენი ცვლილებები ნებისმიერ დროს, როდესაც მოგწონთ რვეულის შენახვა და ფაილის გახსნა.
ნაბიჯი 8: მიეცი მას ფერი
ჩვენ გვაქვს ჩვენი ვებ გვერდი, მაგრამ ის საკმაოდ მარტივია. მოდით მივცეთ ჩვენს აბზაცის ტეგს ფერი!
ჩვენ შეგვიძლია შევიღებოთ სხვადასხვა ელემენტები "p" ტეგზე "სტილის" ატრიბუტის დამატებით, როგორც ეს ქვემოთ მოცემულია:
ტეილორის ვებგვერდი
კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
დღეს ჩვენ ვისწავლით თუ როგორ უნდა შევქმნათ ეს ძალიან მარტივი ვებ გვერდი!
ნაბიჯი 9: სურათის დამატება
რა არის საიტი სურათების გარეშე? მოდით დავამატოთ სურათი ჩვენს ვებგვერდზე!
პირველი ნაბიჯი არის თქვენთვის სასურველი სურათის პოვნა. მე გამოვიყენე google სურათები ოქროს რეტრივერის მოსაძებნად. გაიყვანეთ სურათი ზემოთ და დარწმუნდით, რომ url მთავრდება.jpg,.png,.gif,-j.webp
მას შემდეგ რაც აირჩევთ თქვენს სურათს, ჩვენ უნდა დავამატოთ ის html გვერდზე 'img' ტეგის გამოყენებით. ჩემი სურათია:
დაამატეთ იგი თქვენს გვერდზე 'img' ტეგით 'src' ატრიბუტით:
ტეილორის ვებგვერდი
კეთილი იყოს თქვენი მობრძანება ჩემს ვებ გვერდზე
დღეს ჩვენ ვისწავლით თუ როგორ უნდა შევქმნათ ეს ძალიან მარტივი ვებ გვერდი!
ნაბიჯი 10: საბოლოო პროდუქტის ნახვა
შეინახეთ რვეულის ფაილი და გახსენით საბოლოო პროდუქტი. თქვენ უნდა ნახოთ თქვენი ვებ გვერდი!
გირჩევთ:
როგორ შევქმნათ ძირითადი ვებ გვერდი ნოუთბუქის გამოყენებით: 4 ნაბიჯი
როგორ შევქმნათ ძირითადი ვებ გვერდი ნოუთბუქის გამოყენებით: ვინმეს აინტერესებს " როგორ გავაკეთო ვებ – გვერდი ძირითადი წერის პროგრამისგან? ვებსაიტი მხოლოდ ნოუთბუქის გამოყენებით
როგორ მივიღოთ უფასო ვებ გვერდი (TLD, ჰოსტინგი, SSL): 16 ნაბიჯი
როგორ მივიღოთ უფასო ვებსაიტი (TLD, ჰოსტინგი, SSL): ვებსაიტები დიდი საქმე ხდება. ადრე, მსხვილ კომპანიებს, როგორიცაა Microsoft, Google და სხვა, ჰქონდათ თავიანთი ვებსაიტები. შესაძლოა ზოგიერთმა ბლოგერმა და მცირე კომპანიამც გააკეთა ეს. მაგრამ ახლა, განსაკუთრებით ამ COVID-19 პანდემიის დროს (დიახ, ამას ვწერ 2020 წელს)
Led- ის სიკაშკაშის კონტროლი Raspberry Pi და პერსონალური ვებ გვერდი: 5 ნაბიჯი
Raspberry Pi და Custom ვებგვერდის Led's Brightness- ის კონტროლი: apache სერვერის გამოყენებით ჩემს pi– ზე php– ით ვიპოვე გზა led– ის სიკაშკაშის გასაკონტროლებლად სლაიდერის გამოყენებით მორგებული ვებგვერდით, რომელიც ხელმისაწვდომია ნებისმიერ მოწყობილობაზე, რომელიც დაკავშირებულია იმავე ქსელთან, როგორც თქვენი pi . არსებობს მრავალი გზა, რომლითაც ეს შეიძლება მოხდეს
ESP8266 POV გულშემატკივართა საათი და ვებ გვერდი ტექსტის განახლება: 8 ნაბიჯი (სურათებით)
ESP8266 POV გულშემატკივართა საათი და ვებ გვერდი ტექსტის განახლება: ეს არის ცვლადი სიჩქარე, POV (Persistence Of Vision), გულშემატკივარი, რომელიც წყვეტს აჩვენებს დროს და ორ ტექსტურ შეტყობინებას, რომელთა განახლებაც შესაძლებელია”.” POV Fan ასევე არის ერთ გვერდიანი ვებ სერვერი, რომელიც საშუალებას გაძლევთ შეცვალოთ ორი ტექსტი ჩემთვის
აწყობა მართლაც შიშველი ძვლების დაფა (RBBB) Arduino Clone - განახლებულია: 16 ნაბიჯი
Really Bare Bones Board (RBBB) Arduino Clone - UPDATED: UPDATE 8/16/2008: დაამატა სხვადასხვა დაფის კონფიგურაციის სურათები ბოლო საფეხურზე. RBBB თანამედროვე მოწყობილობების კომპანიისგან არის მშვენიერი პატარა არდუინოს კლონი. თუ თქვენ გაქვთ Arduino პროექტი, რომელიც მოითხოვს მცირე ნაკვალევს ან იაფად გამოყოფილ დაფას, ეს