สารบัญ:
- เสบียง
- ขั้นตอนที่ 1: เลือกตัวแก้ไขข้อความ
- ขั้นตอนที่ 2: สร้างโครงการใหม่ของคุณ
- ขั้นตอนที่ 3: สร้าง Index.html. ของคุณ
- ขั้นตอนที่ 4: รับแผนที่ของคุณ
- ขั้นตอนที่ 5: เพิ่มไปยังเว็บไซต์
- ร้านกาแฟใกล้คุณ
- ขั้นตอนที่ 6: ดูตัวอย่าง
- ขั้นตอนที่ 7: ทำให้ดูดีขึ้น
- ขั้นตอนที่ 8: ทำให้ดูดีขึ้น Pt2
- ขั้นตอนที่ 9: การแก้ไข
วีดีโอ: ทำเว็บไซต์ค้นหาร้านกาแฟ: 9 ขั้นตอน
2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-02-01 14:42
ในคำแนะนำนี้ ฉันจะแสดงวิธีสร้างเว็บไซต์ง่ายๆ ที่แสดงร้านกาแฟใกล้บ้านคุณ โดยใช้ Google Maps, HTML และ CSS
เสบียง
คอมพิวเตอร์
โปรแกรมแก้ไขข้อความ (ฉันใช้ Atom)
การเชื่อมต่อ wifi
ขั้นตอนที่ 1: เลือกตัวแก้ไขข้อความ
ฉันใช้ Atom ซึ่งสามารถดาวน์โหลดได้ ที่นี่ เมื่อดาวน์โหลดแล้วเปิดขึ้นก็สร้างโปรเจ็กต์ใหม่
ขั้นตอนที่ 2: สร้างโครงการใหม่ของคุณ
- เปิด Atom
- ค้นหาไฟล์
- ใต้ไฟล์ คลิกใหม่
- ที่ด้านล่างซ้าย (Mac) จะมีปุ่มสำหรับสร้างโฟลเดอร์ใหม่
- ตั้งชื่อโฟลเดอร์ของคุณ ''แผนที่เว็บไซต์'
- กดเปิดที่มุมขวาล่าง
ขั้นตอนที่ 3: สร้าง Index.html. ของคุณ
- เพิ่มไฟล์ใหม่ในโฟลเดอร์ของคุณ (ในอะตอมให้คลิกขวาที่โฟลเดอร์แล้วกดใหม่)
- ตั้งชื่อไฟล์นี้ว่า 'Index.html'
- เพิ่มโครงสร้าง HTML พื้นฐานนี้ ซึ่งใช้ในทุกโครงการ HTML:
ขั้นตอนที่ 4: รับแผนที่ของคุณ
- เยี่ยมชม Google Maps ที่นี่: Google Maps
- ค้นหากาแฟ
- คุณควรมีร้านกาแฟทั้งหมดในพื้นที่ทั่วไปของคุณ
- คลิกสามบรรทัดข้างกาแฟ
- ค้นหาแชร์หรือฝังแผนที่
- เลือกฝังแผนที่
- เลือกขนาดของแผนที่ (ฉันใช้ขนาดใหญ่) และสรุปตำแหน่งของคุณ
- กดคัดลอก HTML
ขั้นตอนที่ 5: เพิ่มไปยังเว็บไซต์
- กลับไปที่ไฟล์ HTML
- ระหว่างแท็กทั้งสอง '' ใส่รหัสนี้:
'
ร้านกาแฟใกล้คุณ
'รหัสที่ฝังจาก GOOGLE MAPS'
'
ขั้นตอนที่ 6: ดูตัวอย่าง
ภาคหนึ่งเสร็จแล้ว!
บันทึกไฟล์และค้นหาในคอมพิวเตอร์ของคุณ ดับเบิลคลิก ไฟล์จะเปิดขึ้นในเบราว์เซอร์เริ่มต้นของคุณเพื่อดูตัวอย่าง
ขั้นตอนที่ 7: ทำให้ดูดีขึ้น
- ระหว่างแท็กทั้งสอง '' เพิ่ม 'ร้านกาแฟใกล้ฉัน'
- เพิ่มไฟล์ใหม่ในลักษณะเดียวกับที่คุณสร้าง 'Index.html' แต่ตั้งชื่อเป็น 'Style.css'
- กลับไปที่ไฟล์ HTML ของคุณ เขียนโค้ดนี้เหนือชื่อของคุณ"
- ไปที่ google images และดาวน์โหลดภาพตัดปะน่ารักของกาแฟหนึ่งถ้วย
- เพิ่มรูปภาพลงในโฟลเดอร์ที่มีไฟล์ที่เหลือของเรา
- ในไฟล์ CSS เขียนโค้ดต่อไปนี้: 'body{
- background-image: url(ชื่อของภาพ);
- ขนาดพื้นหลัง: ปก;
- }'
ขั้นตอนที่ 8: ทำให้ดูดีขึ้น Pt2
- หากเราบันทึกและดูตัวอย่างตอนนี้ เราจะเห็นว่าพื้นหลังของเว็บไซต์ถูกปูด้วยถ้วยกาแฟของเราแล้ว
- น่าเศร้าที่มันยากที่จะอ่านหัวเรื่องของเรา
- ดังนั้นใน CSS ภายใต้ 'body {}' ให้เพิ่มโค้ดต่อไปนี้: h1{
- พื้นหลังสี=rgb(255, 255, 255);
- ขนาดตัวอักษร=40px;
- }
ขั้นตอนที่ 9: การแก้ไข
แค่นั้นแหละ! คุณทำเสร็จแล้ว คุณได้เรียนรู้พื้นฐานของ HTML, CSS และโค้ดที่ฝังแล้ว ทำได้ดีมาก คุณสามารถแก้ไขโค้ดเพื่อให้เข้ากับรสนิยมของคุณและแสดงแผนที่ของสิ่งที่คุณต้องการได้ จากนั้นคุณสามารถดำเนินการสร้างเว็บไซต์ของคุณต่อไปและปรับปรุงได้ตลอดไป
แนะนำ:
การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: 5 ขั้นตอน
การออกแบบเกมในการสะบัดใน 5 ขั้นตอน: การตวัดเป็นวิธีง่ายๆ ในการสร้างเกม โดยเฉพาะอย่างยิ่งเกมปริศนา นิยายภาพ หรือเกมผจญภัย
การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: 3 ขั้นตอน
การตรวจจับใบหน้าบน Raspberry Pi 4B ใน 3 ขั้นตอน: ในคำแนะนำนี้ เราจะทำการตรวจจับใบหน้าบน Raspberry Pi 4 ด้วย Shunya O/S โดยใช้ Shunyaface Library Shunyaface เป็นห้องสมุดจดจำใบหน้า/ตรวจจับใบหน้า โปรเจ็กต์นี้มีจุดมุ่งหมายเพื่อให้เกิดความเร็วในการตรวจจับและจดจำได้เร็วที่สุดด้วย
วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: 3 ขั้นตอน
วิธีการติดตั้งปลั๊กอินใน WordPress ใน 3 ขั้นตอน: ในบทช่วยสอนนี้ ฉันจะแสดงขั้นตอนสำคัญในการติดตั้งปลั๊กอิน WordPress ให้กับเว็บไซต์ของคุณ โดยทั่วไป คุณสามารถติดตั้งปลั๊กอินได้สองวิธี วิธีแรกคือผ่าน ftp หรือผ่าน cpanel แต่ฉันจะไม่แสดงมันเพราะมันสอดคล้องกับ
การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): 8 ขั้นตอน
การลอยแบบอะคูสติกด้วย Arduino Uno ทีละขั้นตอน (8 ขั้นตอน): ตัวแปลงสัญญาณเสียงล้ำเสียง L298N Dc ตัวเมียอะแดปเตอร์จ่ายไฟพร้อมขา DC ตัวผู้ Arduino UNOBreadboardวิธีการทำงาน: ก่อนอื่น คุณอัปโหลดรหัสไปยัง Arduino Uno (เป็นไมโครคอนโทรลเลอร์ที่ติดตั้งดิจิตอล และพอร์ตแอนะล็อกเพื่อแปลงรหัส (C++)
เครื่อง Rube Goldberg 11 ขั้นตอน: 8 ขั้นตอน
เครื่อง 11 Step Rube Goldberg: โครงการนี้เป็นเครื่อง 11 Step Rube Goldberg ซึ่งออกแบบมาเพื่อสร้างงานง่ายๆ ในรูปแบบที่ซับซ้อน งานของโครงการนี้คือการจับสบู่ก้อนหนึ่ง