قم بإنشاء مقهى لتحديد موقع الويب: 9 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-02-01 14:39

سأوضح لك في هذا الدليل كيفية إنشاء موقع ويب بسيط يعرض المقاهي القريبة منك ، باستخدام خرائط Google و HTML و CSS

اللوازم

كمبيوتر

محرر نصوص (أستخدم Atom)

اتصال واي فاي

الخطوة 1: اختر محرر نصوص

أستخدم Atom ، والذي يمكن تنزيله من هنا. بمجرد فتحه ، قم بإنشاء مشروع جديد

الخطوة 2: أنشئ مشروعك الجديد

1. افتح Atom
2. إيجاد ملف
3. تحت ملف انقر فوق جديد
4. في أسفل اليسار (mac) سيكون هناك زر لإنشاء مجلد جديد
5. قم بتسمية مجلدك باسم "Map website"
6. اضغط على فتح في أسفل اليمين

الخطوة 3: أنشئ ملفك Index.html

1. أضف ملفًا جديدًا في مجلدك (في atom ، انقر بزر الماوس الأيمن فوق المجلد واضغط على new)
2. اسم هذا الملف "Index.html"
3. أضف بنية HTML الأساسية هذه ، وتستخدم في كل مشروع HTML:

الخطوة 4: احصل على خريطتك

1. قم بزيارة خرائط جوجل هنا: خرائط جوجل
2. ابحث عن القهوة
3. يجب أن تحصل على جميع المقاهي في منطقتك العامة
4. انقر فوق الأسطر الثلاثة بجوار القهوة
5. البحث عن مشاركة أو تضمين الخريطة
6. حدد تضمين الخريطة
7. اختر حجم الخريطة (لقد استخدمت الحجم الكبير) وقم بوضع اللمسات الأخيرة على موقعك
8. اضغط على نسخ HTML

الخطوة 5: أضف إلى الموقع

1. عد إلى ملف HTML.
2. بين علامتي "أدخل هذا الرمز:

'

محلات القهوة بالقرب منك

"الشفرة المضمنة من خرائط Google"

'

الخطوة 6: معاينة

هذا الجزء الأول انتهى!

احفظ الملف وابحث عنه على جهاز الكمبيوتر الخاص بك ، وانقر فوقه نقرًا مزدوجًا وسيتم فتحه في متصفحك الافتراضي لتتم معاينته.

الخطوة 7: اجعلها تبدو أفضل

1. بين علامتي "المقاهي بالقرب مني".
2. أضف ملفًا جديدًا بنفس الطريقة التي أنشأت بها "Index.html" ولكن سمها "Style.css"
3. مرة أخرى على ملف HTML الخاص بك ، اكتب هذا الرمز فوق العنوان الخاص بك ،"
4. انتقل إلى صور google وقم بتنزيل قصاصة فنية رائعة لفنجان من القهوة
5. أضف الصورة إلى المجلد الذي يحتوي على باقي ملفاتنا
6. في ملف CSS ، اكتب الكود التالي: 'body {
7. صورة الخلفية: url (اسم الصورة) ؛
8. حجم الخلفية: غطاء ؛
9. }'

الخطوة 8: جعلها تبدو أفضل Pt2

1. إذا قمنا بالحفظ والمعاينة الآن ، يمكننا أن نرى أن خلفية مواقع الويب مبلطة الآن بفناجين القهوة الخاصة بنا
2. للأسف من الصعب قراءة عنواننا
3. لذلك في CSS ، أسفل "body {}" أضف الكود التالي: h1 {
4. لون الخلفية = rgb (255 ، 255 ، 255) ؛
5. حجم الخط = 40 بكسل ؛
6. }

الخطوة 9: المراجعة

هذا كل شيء! انت انتهيت. لقد تعلمت أساسيات HTML و CSS والتعليمات البرمجية المضمنة ، أحسنت. يمكنك تعديل الكود ليناسب ذوقك وجعله يعرض خريطة لأي شيء تريده. منذ ذلك الحين ، يمكنك متابعة رحلة بناء موقع الويب الخاص بك والتحسين إلى الأبد.