หน้าเว็บกระดูกเปลือย: 10 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

วันนี้เราจะมาสร้างหน้าเว็บง่ายๆ แบบ Bare Bone ตั้งแต่เริ่มต้น เราจะพูดถึงองค์ประกอบ HTML การจัดรูปแบบหน้าเว็บของคุณ (สี แบบอักษร การจัดตำแหน่ง ฯลฯ) และสุดท้ายจะแทรกรูปภาพลงในหน้าเว็บของคุณได้อย่างไร!

ในตอนท้ายของคำแนะนำนี้ คุณจะมีทักษะพื้นฐานในการสร้างหน้าเว็บตั้งแต่เริ่มต้น และค้นพบว่าการเขียนโค้ดไม่ได้ยากอย่างที่คิด!

ขั้นตอนที่ 1: การใช้ Notepad

เราจะใช้ Notepad บน windows เพื่อสร้างหน้าเว็บแรกของเรา แม้ว่าโปรแกรมแก้ไขข้อความจะทำ แต่แผ่นจดบันทึกจะติดตั้งมาล่วงหน้าในเครื่อง Windows ดังนั้นจึงเป็นจุดเริ่มต้นที่ดี

หากต้องการเปิดแผ่นจดบันทึก ไปที่แถบค้นหาที่มุมล่างซ้ายของหน้าจอแล้วพิมพ์ "Notepad" จากนั้นเลือกแอปพลิเคชั่น "Notepad" ที่ปรากฏในผลการค้นหา หน้าต่างใหม่ควรเปิดขึ้น

ขั้นตอนที่ 2: การเพิ่มโครงสร้างเอกสาร HTML พื้นฐาน

หน้าเว็บทั้งหมดต้องเป็นไปตามโครงสร้างโครงร่างมาตรฐานเพื่อให้เว็บเบราว์เซอร์ของคุณ (Chrome, Firefox, Edge, Internet Explorer, Safari…) ประมวลผลและแสดงหน้าเว็บของคุณ

สิ่งนี้เรียกว่าแผนผังเอกสาร html ใน Notepad ให้พิมพ์ html "elements" หรือ "tags" ตามที่แสดงในภาพหน้าจอ คุณสามารถคัดลอกและวางได้เช่นกัน:

ขั้นตอนที่ 3: บันทึกเป็น.html หน้า

ตอนนี้เรามีโครงสร้าง html พื้นฐานใน Notepad แล้ว เรามาบันทึกกันเพื่อไม่ให้สูญเสียงานใดๆ และเพื่อให้เราเห็นการเปลี่ยนแปลงของเราในขณะที่เราดำเนินการตามคำแนะนำ

1. เลือก 'ไฟล์' > 'บันทึกเป็น…' (สกรีนช็อต 1)
2. เปลี่ยนประเภทไฟล์เป็น 'ไฟล์ทั้งหมด' (สกรีนช็อต 2)
3. ตั้งชื่อไฟล์ที่คุณเลือก ตรวจสอบว่าคุณบันทึกเอกสารไว้ที่ใดในคอมพิวเตอร์ของคุณ เพื่อให้สามารถเปิดได้ในภายหลัง หมายเหตุ: ส่วนที่สำคัญที่สุดในการบันทึกไฟล์นี้คือการเติม ".html" ต่อท้ายชื่อไฟล์ ซึ่งจะทำให้คอมพิวเตอร์ของคุณรู้จักว่าเป็นหน้าเว็บ ดังนั้น หากคุณต้องการตั้งชื่อไฟล์ของคุณว่า "my_webpage" อย่าลืมเพิ่ม.html ต่อท้ายไฟล์นั้น เช่น "my_webpage.html"

ขั้นตอนที่ 4: การเพิ่มชื่อเรื่องลงในหน้าเว็บของคุณ

ดังนั้นเราจึงมีโครงสร้างพื้นฐาน html ที่จำเป็นสำหรับเว็บเบราว์เซอร์ในการตีความและแสดงหน้าเว็บของเรา แต่เราไม่มีเนื้อหาใดๆ มาเปลี่ยนกันเถอะ!

สิ่งแรกที่เราควรทำคือให้ Title กับหน้าเว็บของเรา หน้าเว็บทั้งหมดส่วนใหญ่มีชื่อเรื่อง นี่คือสิ่งที่แสดงบนแท็บในเว็บเบราว์เซอร์ของคุณ (ดูภาพหน้าจอ) ฉันจะตั้งชื่อหน้าเว็บว่า "เว็บไซต์ของเทย์เลอร์" ในการทำเช่นนี้ เราจำเป็นต้องเพิ่มองค์ประกอบ 'ชื่อ'

เว็บไซต์ของเทย์เลอร์

ณ จุดนี้ คุณจะสังเกตเห็นว่าทุกแท็กมีแท็ก "เปิด" และแท็ก "ปิด" เช่น

และ.

นี่คือการพิจารณาว่าชื่อเรื่องเริ่มต้นที่ไหนและสิ้นสุดที่ใด แท็ก html เกือบทั้งหมดปฏิบัติตามนี้ แต่มีข้อยกเว้นบางประการ

ขั้นตอนที่ 5: การเพิ่มเนื้อหาลงในหน้าเว็บของคุณ

เรามีชื่อสำหรับหน้าเว็บของเราแล้ว แต่เรายังไม่มีเนื้อหาที่แท้จริงสำหรับมัน มาเพิ่มความเก๋ไก๋กันเถอะ!

เราได้เพิ่มชื่อลงในหน้าเว็บของเราโดยใช้องค์ประกอบ 'ชื่อ' ให้หน้าเว็บของเรามีขนาดใหญ่ ส่วนหัวที่ดึงดูดความสนใจโดยใช้องค์ประกอบ 'h1' ซึ่งเป็นองค์ประกอบส่วนหัว

เว็บไซต์ของเทย์เลอร์

ยินดีต้อนรับสู่หน้าเว็บของฉัน

ขั้นตอนที่ 6: ดูการเปลี่ยนแปลงของเราจนถึงตอนนี้

เรามีชื่อเรื่อง เรามีเนื้อหา ลองตรวจสอบหน้าเว็บของเราว่ามันมาไกลแค่ไหน

1. บันทึกไฟล์ของคุณใน notepad
2. ไปที่ตำแหน่งที่คุณบันทึกไฟล์แล้วดับเบิลคลิก ควรเปิดโดยอัตโนมัติในเว็บเบราว์เซอร์เริ่มต้นของคุณ ดูดี!

ขั้นตอนที่ 7: การเพิ่มแท็กย่อหน้า

เรามีหัวเรื่อง หัวเรื่อง ทีนี้มาเพิ่มย่อหน้าพร้อมข้อความเพิ่มเติมกัน ชื่อองค์ประกอบสำหรับย่อหน้าคือ 'p' คุณสามารถดูการใช้งานด้านล่าง:

เว็บไซต์ของเทย์เลอร์

ยินดีต้อนรับสู่หน้าเว็บของฉัน

วันนี้เราจะมาเรียนรู้วิธีสร้างหน้าเว็บแบบง่ายๆ นี้กัน!

หมายเหตุ: คุณสามารถดูการเปลี่ยนแปลงของคุณได้ทุกเมื่อที่ต้องการโดยบันทึกแผ่นจดบันทึกและเปิดไฟล์

ขั้นตอนที่ 8: ให้สีแก่มัน

เรามีหน้าเว็บของเราอยู่เรื่อยๆ แต่มันค่อนข้างธรรมดา ให้แท็กย่อหน้าของเรามีสีบ้าง!

เราสามารถระบายสีองค์ประกอบต่างๆ ได้โดยเพิ่มแอตทริบิวต์ 'style' ให้กับแท็ก 'p' ตามรายละเอียดด้านล่าง:

เว็บไซต์ของเทย์เลอร์

ยินดีต้อนรับสู่หน้าเว็บของฉัน

วันนี้เราจะมาเรียนรู้วิธีสร้างหน้าเว็บที่เรียบง่ายนี้กัน!

ขั้นตอนที่ 9: การเพิ่มรูปภาพ

เว็บไซต์ที่ไม่มีรูปภาพคืออะไร? มาเพิ่มรูปภาพในเว็บไซต์ของเรากันเถอะ!

ขั้นตอนแรกคือการหาภาพที่คุณชอบ ฉันใช้ google images เพื่อค้นหาโกลเด้นรีทรีฟเวอร์ ดึงรูปภาพขึ้นและตรวจสอบให้แน่ใจว่า URL ลงท้ายด้วย.jpg,.png,.gif,-j.webp

เมื่อคุณเลือกรูปภาพของคุณแล้ว เราต้องเพิ่มลงในหน้า html โดยใช้แท็ก 'img' รูปภาพของฉันคือ:

เพิ่มลงในหน้าของคุณโดยใช้แท็ก 'img' ที่มีแอตทริบิวต์ 'src':

เว็บไซต์ของเทย์เลอร์

ยินดีต้อนรับสู่หน้าเว็บของฉัน

วันนี้เราจะมาเรียนรู้วิธีสร้างหน้าเว็บที่เรียบง่ายนี้กัน!

ขั้นตอนที่ 10: การดูผลิตภัณฑ์ขั้นสุดท้าย

บันทึกไฟล์แผ่นจดบันทึกและเปิดผลิตภัณฑ์ขั้นสุดท้าย คุณควรเห็นหน้าเว็บของคุณ!