وب سایت مکان یابی کافی شاپ بسازید: 9 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-02-01 14:40

در این دستورالعمل به شما نشان خواهم داد که چگونه می توانید یک وب سایت ساده با کافی شاپ های نزدیک خود ، با استفاده از Google Maps ، HTML و CSS ایجاد کنید.

تدارکات

یک کامپیوتر

ویرایشگر متن (من از Atom استفاده می کنم)

اتصال wifi

مرحله 1: ویرایشگر متن را انتخاب کنید

من از Atom استفاده می کنم که می توانید آن را در اینجا بارگیری کنید. پس از بارگیری ، پروژه جدیدی ایجاد کنید

مرحله 2: پروژه جدید خود را ایجاد کنید

1. Atom را باز کنید
2. فایل را پیدا کنید
3. در زیر فایل new کلیک کنید
4. در پایین سمت چپ (mac) یک دکمه برای ایجاد یک پوشه جدید وجود دارد
5. نام پوشه خود را '' نقشه وب سایت '' بگذارید
6. باز کردن را در پایین سمت راست فشار دهید

مرحله 3: ایجاد Index.html خود

1. یک فایل جدید به پوشه خود اضافه کنید (در اتم روی پوشه راست کلیک کرده و new را فشار دهید)
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. background-size: جلد؛
9. }'

مرحله 8: بهتر جلوه دادن آن Pt2

1. اگر اکنون ذخیره و پیش نمایش کنیم ، می بینیم که پس زمینه وب سایت ها در حال حاضر با فنجان های قهوه ما کاشی کاری شده است
2. متأسفانه خواندن عنوان ما دشوار است
3. بنابراین در CSS ، زیر 'body {}' کد زیر را اضافه کنید: h1 {
4. background-color = rgb (255 ، 255 ، 255) ؛
5. font-size = 40px؛
6. }

مرحله 9: تجدید نظر

خودشه! کار شما تمام است. شما اصول اولیه HTML ، CSS و کد جاسازی شده را آموخته اید ، موفق باشید. می توانید کد را ویرایش کنید تا متناسب با سلیقه شما باشد و نقشه هر چیزی را که می خواهید نمایش دهد. از آن به بعد می توانید به راه اندازی وب سایت خود ادامه دهید و برای همیشه بهبود پیدا کنید.