การสร้างเว็บไซต์แรกของคุณ: 10 ขั้นตอน

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

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้การสร้างหน้าเว็บพื้นฐานที่มีสไตล์ชีตที่เชื่อมโยงและไฟล์จาวาสคริปต์แบบโต้ตอบ

ขั้นตอนที่ 1: สร้างโฟลเดอร์ของคุณ

สร้างโฟลเดอร์สำหรับไฟล์ที่เราจะสร้างเพื่อจัดเก็บ ตั้งชื่อได้ตามใจชอบ เพียงจำไว้ว่ามันอยู่ที่ไหนเพราะเราจะบันทึกไฟล์ไว้ในภายหลัง

ขั้นตอนที่ 2: สร้างไฟล์แรกของคุณ

เปิดตัวแก้ไขข้อความที่คุณชื่นชอบ ในกรณีของฉัน ฉันจะใช้แผ่นจดบันทึกในตัวของ Windows 10 เมื่อคุณมีไฟล์ใหม่แล้ว ให้พิมพ์ดังต่อไปนี้:

นี่เป็นหน้าเว็บแรกของฉัน นำเสนอโดยผู้แนะนำ

นี่คือสิ่งที่เรียกว่าแท็ก HTML ย่อมาจาก Heading 1 ข้อความที่เราใส่ในแท็กนี้จะแสดงเป็นส่วนหัวของหน้า เปิดปิดแบบนี้ครับ ข้อความระหว่างสองแท็กคือสิ่งที่จะแสดงในเว็บเบราว์เซอร์ของคุณ ส่วนที่ระบุว่าให้แท็กนั้นเป็นแอตทริบิวต์ที่เราจะอ้างอิงในขั้นตอนที่ x เมื่อเสร็จแล้ว ให้บันทึกไฟล์ในโฟลเดอร์ที่เราทำในขั้นตอนที่ 1 เป็น index.html

ขั้นตอนที่ 3: เปิดไฟล์

เมื่อนำทางไปยังไฟล์ภายในโฟลเดอร์ที่เราสร้างเสร็จแล้ว ให้คลิกขวาที่ไฟล์แล้วเลือกตัวเลือก "เปิดด้วย" และเลือกเว็บเบราว์เซอร์ที่คุณใช้ ในกรณีของฉันนี่คือ google chrome ตอนนี้ดูการทำงานหนักของคุณจนถึงตอนนี้!

ขั้นตอนที่ 4: การจัดรูปแบบหน้าของคุณ

อย่างที่เป็นอยู่ เว็บไซต์ของเราค่อนข้างธรรมดา เราจะเพิ่มสิ่งที่เรียกว่า cascading style sheet เพื่อเพิ่มสีสันให้มากขึ้น สร้างไฟล์ข้อความใหม่และพิมพ์ดังต่อไปนี้:

h1{สี: ฟ้า; จัดข้อความ: ศูนย์;}

สิ่งที่เราจะบอกเบราว์เซอร์ในที่นี้คือ ให้ค้นหาองค์ประกอบใดๆ ในแท็ก h1 (ซึ่งเราได้เรียนรู้ในขั้นตอนที่ 2) และกำหนดเป็นสีน้ำเงินและจัดตำแหน่งไว้ที่กึ่งกลางของหน้า บันทึกไฟล์นี้ในโฟลเดอร์ที่เราสร้างในขั้นตอนที่ 1 เป็น style.css

ขั้นตอนที่ 5: เชื่อมโยง Style.css กับ Index.html. ของคุณ

ณ จุดนี้ เรามีไฟล์แยกกันสองไฟล์ที่ไม่รู้จักกัน เราจำเป็นต้องบอกไฟล์ index.html ของเราว่าเรามีไฟล์ style.css ที่เราต้องการให้อ้างอิงถึงและใช้สไตล์บางอย่าง ในการทำเช่นนี้ เราจะเปิดไฟล์ index.html ในโปรแกรมแก้ไขข้อความ และเหนือแท็ก h1 เราจะเพิ่มสิ่งที่เรียกว่าแท็กลิงก์ แท็กลิงก์ทำงานเหมือนกับชื่อที่ใช้บอกเป็นนัย คือลิงก์ไปยังบางสิ่ง ในกรณีของเราสไตล์ชีต ไปข้างหน้าและพิมพ์ แท็กลิงค์เป็นแท็กปิดตัวเองจึงไม่จำเป็นต้องใช้แท็กปิดท้าย rel หมายถึงความสัมพันธ์และ href กำลังบอกไฟล์ดัชนีที่ไฟล์ภายนอกของเราที่เรากำลังอ้างอิงอยู่ ตอนนี้บันทึกไฟล์ index.html นั้น

ขั้นตอนที่ 6: ดูหน้าสไตล์ใหม่ของคุณ

ทบทวนขั้นตอนที่ 3 และโหลดหน้าเว็บของคุณใหม่ และดูว่าการเปลี่ยนแปลงนั้นสะท้อนออกมาอย่างไร

ขั้นตอนที่ 7: การสร้างปุ่ม

เปิดไฟล์ index.html อีกครั้งในตัวแก้ไขข้อความแล้วพิมพ์ดังต่อไปนี้:

คลิกฉัน!

และบันทึกไฟล์. สิ่งนี้จะสร้างองค์ประกอบปุ่มบนหน้า เมื่อบันทึกแล้ว ให้เปิดไฟล์อีกครั้งดังที่แสดงในขั้นตอนที่ 3 และตรวจสอบว่าปุ่มอยู่ที่ด้านล่างซ้ายมือของหน้า

ขั้นตอนที่ 8: สร้างไฟล์ Javascript ของคุณ

สุดท้ายนี้ เรากำลังจะสร้างไฟล์จาวาสคริปต์ของเรา นี่คือสิ่งที่จะทำให้เว็บไซต์ของเรามีการโต้ตอบ เปิดตัวแก้ไขข้อความและพิมพ์ดังต่อไปนี้:

document.querySelector("#button").addEventListener("คลิก", ฟังก์ชัน(){

document.querySelector("#heading").innerText = "เปลี่ยนหัวเรื่องได้ทันที"

})

สิ่งที่เรากำลังทำคือการขอให้เอกสารค้นหาองค์ประกอบที่มี ID ของปุ่ม และเราจะให้ปุ่มตอบสนองต่อเหตุการณ์การคลิกโดยเปลี่ยนข้อความองค์ประกอบที่มี ID ของหัวข้อเป็น "เปลี่ยนหัวข้อได้ทันที ". บันทึกไฟล์เป็น button.js ในโฟลเดอร์ที่เราสร้างในขั้นตอนที่ 1

ขั้นตอนที่ 9: เชื่อมโยงไฟล์ Javascript และดัชนีของคุณ

เช่นเดียวกับที่เราทำกับไฟล์ style.css เราจำเป็นต้องแจ้งไฟล์ index.html เกี่ยวกับไฟล์จาวาสคริปต์ของเรา ที่ด้านล่างใต้ทุกสิ่งที่เราได้ทำไปแล้วให้พิมพ์ดังต่อไปนี้:

แท็กสคริปต์ช่วยให้เราสามารถเพิ่มภาษาสคริปต์ (ในกรณีของเราคือ javascript) เพื่อมอบฟังก์ชันการทำงานให้กับหน้าเว็บของเรา เรากำลังบอกให้ค้นหาไฟล์ชื่อ button.js และเพิ่มโค้ดทั้งหมดที่อยู่ในไฟล์นั้นลงในไฟล์ดัชนีของเรา เมื่อคุณพิมพ์เรียบร้อยแล้ว ให้บันทึกไฟล์และเปิดไฟล์อีกครั้งดังที่แสดงในขั้นตอนที่ 3

ขั้นตอนที่ 10: ทดสอบปุ่มที่สร้างขึ้นใหม่

ตอนนี้ไปข้างหน้าและคลิกปุ่มและดูการเปลี่ยนแปลงหัวเรื่อง!

ยินดีด้วย!! ตอนนี้คุณได้สร้างหน้าเว็บแบบโต้ตอบแรกของคุณแล้ว! ฉันสงสัยว่าคุณจะไปได้ไกลแค่ไหนโดยรู้ว่าตอนนี้คุณรู้อะไรแล้ว ??