მოამზადეთ ყავის მაღაზია საიტის განთავსება: 9 ნაბიჯი

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

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

მარაგები

კომპიუტერი

ტექსტური რედაქტორი (მე ვიყენებ Atom)

Wifi კავშირი

ნაბიჯი 1: შეარჩიეთ ტექსტური რედაქტორი

მე ვიყენებ Atom- ს, რომლის გადმოწერაც აქ შეიძლება. გადმოტვირთვისთანავე შექმენით ახალი პროექტი

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

1. გახსენით ატომი
2. იპოვეთ ფაილი
3. ფაილის ქვეშ დააწკაპუნეთ ახალზე
4. ქვედა მარცხნივ (mac) იქნება ღილაკი ახალი საქაღალდის შესაქმნელად
5. დაასახელეთ თქვენი საქაღალდე '' რუქის ვებსაიტი ''
6. დააჭირეთ გახსნას ქვედა მარჯვენა კუთხეში

ნაბიჯი 3: შექმენით თქვენი Index.html

1. დაამატეთ ახალი ფაილი თქვენს საქაღალდეში (ატომში მარჯვენა ღილაკით დააწკაპუნეთ საქაღალდეზე და დააჭირეთ ახალს)
2. დაასახელეთ ეს ფაილი 'Index.html'
3. დაამატეთ ეს ძირითადი HTML სტრუქტურა, რომელიც გამოიყენება ყველა HTML პროექტში:

ნაბიჯი 4: მიიღეთ თქვენი რუკა

1. ეწვიეთ Google რუქებს აქ: Google Maps
2. მოძებნეთ ყავა
3. თქვენ უნდა შეიძინოთ ყველა ყავის მაღაზია თქვენს ზოგად ტერიტორიაზე
4. დააწკაპუნეთ ყავის გვერდით სამ სტრიქონზე
5. იპოვეთ გაზიარება ან რუქის ჩაშენება
6. აირჩიეთ ჩაშენებული რუკა
7. შეარჩიეთ რუქის ზომა (მე გამოვიყენე Large) და დაასრულეთ თქვენი ადგილმდებარეობა
8. დააჭირეთ HTML ასლს

ნაბიჯი 5: დაამატეთ ვებსაიტს

1. დაუბრუნდით HTML ფაილს.
2. ორ '' ტეგს შორის ჩადეთ ეს კოდი:

'

თქვენთან ახლოს ყავის მაღაზიები

"ჩაშენებული კოდი GOOGLE რუქებიდან"

'

ნაბიჯი 6: გადახედვა

ეს პირველი ნაწილი გაკეთებულია!

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

ნაბიჯი 7: გახადეთ ის უკეთესი

1. ორ '' ტეგს შორის დაამატეთ 'ყავის მაღაზიები ჩემთან ახლოს'
2. დაამატეთ ახალი ფაილი ისევე, როგორც შექმენით "Index.html", მაგრამ დაარქვით მას "Style.css"
3. დაუბრუნდით თქვენს HTML ფაილს, ჩაწერეთ ეს კოდი თქვენი სათაურის ზემოთ,"
4. გადადით Google გამოსახულებებზე და გადმოწერეთ ჭიქა ყავის საყვარელი ნაწილი
5. დაამატეთ სურათი საქაღალდეში, რომელიც შეიცავს დანარჩენ ფაილებს
6. CSS ფაილში ჩაწერეთ შემდეგი კოდი: 'body {
7. background-image: url (სურათის სახელი);
8. ფონი-ზომა: ყდა;
9. }'

ნაბიჯი 8: გახადეთ ის უკეთესი Pt2

1. თუ ახლა ვინახავთ და ვიხილავთ, ჩვენ ვხედავთ, რომ ვებსაიტების ფონი ახლა დაფარულია ჩვენი ყავის ჭიქებით
2. სამწუხაროდ, ძნელია ჩვენი სათაურის წაკითხვა
3. ასე რომ, CSS– ში, „სხეულის {}“ქვეშ დაამატეთ შემდეგი კოდი: h1 {
4. ფონი-ფერი = rgb (255, 255, 255);
5. font-size = 40px;
6. }

ნაბიჯი 9: გადახედვა

Ის არის! Მზად ხარ. თქვენ ისწავლეთ HTML, CSS და ჩაშენებული კოდის საფუძვლები, კარგი. თქვენ შეგიძლიათ შეცვალოთ კოდი ისე, რომ ის თქვენს გემოვნებას მოერგოს და აჩვენოთ რუქა იმისა, რაც გსურთ. მას შემდეგ თქვენ შეგიძლიათ გააგრძელოთ თქვენი ვებ – გვერდის შემუშავება და სამუდამოდ გაუმჯობესება.