การสร้างเว็บไซต์ของคุณเองสำหรับผู้เริ่มต้น: 5 ขั้นตอน

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

ไม่ว่าคุณจะเคยใฝ่ฝันอยากเป็นโปรแกรมเมอร์คอมพิวเตอร์หรือเคยใช้เว็บไซต์มาก่อน นั่นคือพวกเราเกือบทั้งหมด เทคโนโลยีสารสนเทศได้กลายเป็นกระดูกสันหลังของธุรกิจ แม้ว่าการเขียนโปรแกรมอาจดูน่ากลัวเล็กน้อยในตอนแรก แต่เป้าหมายของฉันคือการสอนพื้นฐานพื้นฐานของการออกแบบเว็บให้คุณ เพื่อที่หลังจากบทช่วยสอนนี้ คุณจะสามารถสร้างหน้าเว็บของคุณเองได้ ออกไปให้พ้นทางกันเถอะ!

เสบียง

• Macintosh หรือ Windows PC (แม้ว่าจะสามารถใช้ Linux distros ได้ แต่ตอนนี้ฉันกำลังข้ามไปเพราะเป็นการแนะนำสำหรับผู้เริ่มต้น)
• ตัวแก้ไขข้อความที่คุณเลือก (Notepad บน Windows, TextEdit บน Mac) หรือ IDE ที่คุณเลือก จากประสบการณ์ของฉัน ฉันพบว่า Visual Studio Code ทำงานได้ดีที่สุดสำหรับตัวเอง ดังนั้นฉันขอแนะนำให้ตรวจสอบที่นี่: https://code.visualstudio.com/ และไม่ต้องพูดถึงว่ามันใช้ได้กับทุกแพลตฟอร์ม OS

ขั้นตอนที่ 1: แท็กและบิตของประวัติศาสตร์

เมื่อคุณตัดสินใจเลือกตัวแก้ไขข้อความหรือ IDE แล้ว มาเริ่มกันที่พื้นฐานกันก่อน

เชื่อหรือไม่ว่า HTML หรือ HyperText Markup Language มีมาเกือบ 30 ปีแล้ว และทุกๆ ปีมีการพัฒนาภาษามากขึ้นเรื่อยๆ ตอนนี้ คุณอาจจะถามว่าเบราว์เซอร์ตีความสิ่งที่จะวางบนหน้าจออย่างไร ทำได้ในบางส่วน:

การจัดรูปแบบเอกสาร HTML เป็นเรื่องง่าย คุณมีสองส่วนที่เรียกว่าศีรษะและลำตัว ส่วนหัวของเว็บไซต์มีโค้ดที่ผู้ใช้มองไม่เห็น ใช้สำหรับเชื่อมโยงสไตล์ชีตและประกาศบิตที่จำเป็นอื่น ๆ ที่จำเป็นสำหรับไซต์เพื่อแสดงอย่างถูกต้อง ตามหัว ตัวเป็นเสียง ตัวของเว็บไซต์ นี่คือที่ที่คุณจะพูดเสียงของคุณและแสดงทักษะ HTML ที่ยอดเยี่ยมของคุณให้ผู้ชมได้เห็น! ในตอนนี้ มันไม่ง่ายเหมือนเพียงแค่พิมพ์ข้อความลงในเนื้อหาและให้ข้อความแสดงตามที่คุณต้องการ แต่มันเกือบจะง่ายในความหมายเดียวกับการใช้สิ่งที่เราเรียกว่าแท็ก

นี่คือแท็ก HTML พื้นฐานบางส่วน:

• title – ซึ่งใช้สำหรับบอกเบราว์เซอร์ว่าชื่อหน้าคืออะไร นี่คือสิ่งที่คุณจะเห็นเมื่อคุณดูแท็บของหน้าเว็บ
• h1, h2, h3, h4 – ซึ่งใช้สำหรับขนาดส่วนหัวต่างๆ โดยที่ h1 มีขนาดใหญ่ที่สุดและ h4 จะเล็กที่สุด ฉันจะอธิบายเพิ่มเติมเกี่ยวกับเรื่องนี้ในหัวข้อถัดไป
• p – ย่อหน้า ใช้สำหรับเขียนย่อหน้าของข้อความ เหมือนย่อหน้าในกระดาษ
• br – break ซึ่งแทรกตัวแบ่งให้สอดคล้องกับข้อความ
• a – ใช้สำหรับสร้างลิงก์ไปยังหน้าอื่นๆ เช่น ลิงก์ที่คลิกได้
• img - ใช้สำหรับเชื่อมโยงรูปภาพกับหน้าเว็บ
• ul, ol, li – รายการที่ไม่เรียงลำดับ, รายการที่สั่งซื้อ, และรายการในรายการ
• – ใช้สำหรับแสดงความคิดเห็นแบบอินไลน์ในโค้ดที่ผู้ใช้จะมองไม่เห็น

และนี่คือแท็ก CSS บางส่วน (ภาพ):

• สี – ใช้เพื่อกำหนดสีเฉพาะให้กับองค์ประกอบเฉพาะหรือตั้งค่าบนหน้าเว็บ
• ขนาดแบบอักษร – ใช้เพื่อเปลี่ยนขนาดแบบอักษรบนหน้า
• background-color – ใช้เพื่อเปลี่ยนสีพื้นหลังขององค์ประกอบบางอย่างหรือทั้งหน้า

ฉันได้แนบเอกสารแนะนำเล็กๆ น้อยๆ มาด้วยเพื่อช่วยคุณหากคุณรู้สึกหลงทาง แต่ไม่ต้องกังวล คุณจะเข้าใจมันในเวลาไม่นาน! นอกจากนี้ www.w3schools.com ยังเป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับคำถามเกี่ยวกับการเขียนโปรแกรมของคุณ พวกเขาช่วยฉันได้อย่างแน่นอน

โดยพื้นฐานแล้ววิธีที่เบราว์เซอร์อ่านไฟล์นั้นง่าย ไปทีละบรรทัดและประมวลผลตามฟังก์ชัน อักขระที่ใช้ประกาศแท็กเช่น

และใช้สำหรับปิดแท็ก เช่น

. นี่เป็นสิ่งสำคัญมิฉะนั้นเบราว์เซอร์จะไม่หยุดที่ใด ในระหว่าง

และ

แท็กเป็นที่ที่คุณป้อนสิ่งที่คุณต้องการ!

ขั้นตอนที่ 2: ตั้งค่าตัวแก้ไข

ตอนนี้เราได้พูดถึงองค์ประกอบพื้นฐานของเว็บไซต์ HTML แล้ว มาดำดิ่งและลองใช้มันด้วยตัวเราเอง สำหรับขั้นตอนต่อไปนี้ ฉันจะใช้ Visual Studio Code เพื่อตั้งโปรแกรมเว็บไซต์ แต่เลย์เอาต์ของโค้ดจะเหมือนเดิมหากคุณสะดวกกับการใช้ Notepad หรือ TextEdit

ภายในแผ่นจดบันทึก:

• ด้วย Notepad โปรแกรมจะเปิดใช้งานด้วยไฟล์เปล่าซึ่งทำให้การเริ่มต้นใช้งานได้ง่ายมาก สิ่งนี้จะช่วยให้เราข้ามขั้นตอนไม่กี่ขั้นตอนเมื่อเทียบกับการใช้ VS Code เริ่มต้นด้วยการบันทึกไฟล์ในรูปแบบที่ถูกต้อง
• คลิก ไฟล์ > บันทึก
• ป้อนชื่อไฟล์ของคุณตามด้วย.html และภายใต้บันทึกเป็นประเภท ให้เลือกไฟล์ทั้งหมด คลิกบันทึก

ภายในรหัส VS:

• วิธีที่ดีที่สุดสำหรับคุณในการใช้ประโยชน์จากคุณลักษณะทั้งหมดของ IDE คือการเริ่มต้นด้วยการสร้างไฟล์และบอก IDE ว่าเป็นไฟล์ประเภทใด สามารถทำได้ดังนี้:
• คลิก ไฟล์ > ไฟล์ใหม่
• ไฟล์เปล่าเปิดขึ้น
• ขั้นต่อไป คุณจะต้องเริ่มต้นด้วยการบันทึกไฟล์แม้ว่าจะว่างเปล่าก็ตาม เนื่องจากจะช่วยให้ IDE สามารถเข้าใจได้ว่าไฟล์สุดท้ายจะเป็นไฟล์ประเภทใด เมื่อบันทึก อย่าลืมใส่นามสกุล.html ที่ท้ายชื่อไฟล์ คลิกบันทึก

ขั้นตอนที่ 3: พิมพ์เขียว

หลังจากที่คุณบันทึกไฟล์ filename.html เรียบร้อยแล้ว มาเริ่มด้วยการสร้างกรอบงานสำหรับหน้าเว็บของเรา จำไว้จากด้านบนว่าส่วนสำคัญของไฟล์ใดที่เราจำเป็นต้องประกาศก่อนที่เราจะสามารถเริ่มต้นด้วยการสร้างหน้า HTML ที่เหลือ เคล็ดลับจากมืออาชีพ: เมื่อเริ่มต้นเฟรมเวิร์กสำหรับไซต์ แท็ก !DOCTYPE HTML จะบอกเบราว์เซอร์ว่าไฟล์ที่กำลังอ่านนั้นเป็นไฟล์ html สิ่งนี้มีประโยชน์หากคุณมีรหัสประเภทต่างๆ ในไฟล์เดียวกันและต้องการสลับไปมาระหว่างล่าม สำหรับขอบเขตของคำแนะนำนี้ เราจะไม่พูดถึงเรื่องนี้มากเกินไป แต่ถ้าหลังจากคำแนะนำนี้ คุณอยากรู้เพิ่มเติมเกี่ยวกับการพัฒนา HTML อย่าลังเลที่จะลองดู ฉันจะแทรกแท็ก !DOCTYPE HTML ที่ด้านบนของไฟล์เพื่อแนวทางปฏิบัติที่ดีที่สุด อย่าลืมเปิดและปิดด้วย.

นี่คือจุดที่การบันทึกไฟล์ก่อนที่คุณจะเริ่มเขียนโปรแกรมมีประโยชน์ ตอนนี้ IDE รู้ว่ามันทำงานกับไฟล์ HTML ได้ มันจะใช้ Intellisense เพื่อจบนิพจน์และเสนอคำแนะนำ เพื่อที่คุณจะได้ไม่ลืมปิดแท็กโดยไม่ได้ตั้งใจ. โปรดทราบว่าสำหรับผู้ที่ใช้ Notepad นั้น Intellisense ไม่พร้อมใช้งานเหมือนใน IDE เราเริ่มต้นด้วยการป้อนแท็ก head และ body ดังนี้: (ดูภาพที่สอง)

เมื่อตั้งค่าเอกสารเสร็จเรียบร้อยแล้ว เราก็สามารถลงแข่งและสนุกได้เลย!

ขั้นตอนที่ 4: รหัส; รหัส; รหัส;

เราสามารถเริ่มต้นด้วยการใส่ชื่อสำหรับไฟล์ที่สร้างขึ้นใหม่ของเรา ป้อนสิ่งที่คุณต้องการ โปรดจำไว้ว่านี่คือชื่อที่ปรากฏในแท็บเบราว์เซอร์ เริ่มต้นด้วยการป้อนหัวข้อสำหรับเว็บไซต์ของเรา จำได้แต่ก่อนว่าเราทำแบบนี้ ฉันได้ยิน h1/2/3/4 หรือไม่? ถูกต้อง!

ก่อนที่เราจะดำเนินการต่อ ฉันพบว่าการเปิดไฟล์ของเราในหน้าต่างเบราว์เซอร์นั้นมีประโยชน์ เพื่อให้เราสามารถเห็นการเปลี่ยนแปลงของเราในเบราว์เซอร์แบบเรียลไทม์ คุณสามารถทำได้โดยคลิก ไฟล์ > บันทึก เพื่อบันทึกไฟล์ นำทางไปยังโฟลเดอร์ที่บันทึกไฟล์ HTML สำหรับฉัน นี่คือเดสก์ท็อป และใช้เบราว์เซอร์ที่คุณเลือกเพื่อเปิดไฟล์ และคุณจะดูมันไหม มีหน้าเว็บของคุณ! หมายเหตุ: โดยส่วนตัวแล้วฉันใช้ Safari เป็นเบราว์เซอร์ที่ฉันเลือกบนคอมพิวเตอร์ อย่างไรก็ตาม ในการพัฒนาเว็บ Firefox เป็นเบราว์เซอร์มาตรฐานระดับโกลด์สำหรับการทดสอบ เนื่องจากใช้งานได้กับภาษาสคริปต์ของเว็บเกือบทุกภาษา

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

อย่าลังเลที่จะลองเพิ่มแท็กและลองเล่นกับสิ่งต่างๆ ที่คุณสามารถทำได้ด้วย HTML ดังที่คุณเห็นด้านล่าง ฉันได้เพิ่มสองสามย่อหน้า ตัวแบ่ง ไฮเปอร์ลิงก์ภายนอกไปยัง Instructables.com รูปภาพ (ซึ่งสามารถเชื่อมโยงจากแหล่งภายนอกหรือภายในไดเร็กทอรีเดียวกันกับที่เก็บไฟล์. HTML) ตัวอย่างของรายการที่ไม่เรียงลำดับ รายการที่ได้รับคำสั่ง และความคิดเห็นสุดท้าย

หากคุณต้องการลองเพิ่มสีและตัวเลือกการจัดเรียง คุณสามารถป้อนแท็กสไตล์ที่ส่วนหัวของไฟล์ได้ นี่คือจุดที่เปลี่ยนจาก HTML เป็น CSS แต่เพื่อการมองเห็น ฉันจะป้อนสองสามบรรทัดเพื่อให้คุณเห็นว่ามันทำงานอย่างไร โดยพื้นฐานแล้ว CSS ทำงานอย่างไร คือช่วยให้คุณสามารถควบคุมองค์ประกอบ HTML ภายในฟังก์ชันได้โดยใช้วงเล็บ { } เพื่อป้อนโค้ดของคุณสำหรับองค์ประกอบ HTML เฉพาะ

ขั้นตอนที่ 5: ความคิดสุดท้าย

และที่นั่นคุณมีมัน; คุณได้สร้างหน้าเว็บแรกของคุณสำเร็จแล้ว! เนื่องจากนี่เป็นคู่มือสำหรับผู้เริ่มต้น ฉันต้องการทำให้ประสบการณ์ครั้งแรกของคุณกับ HTML เป็นเรื่องสนุก วิธีที่ดีที่สุดในการเรียนรู้จากประสบการณ์ของผมคือการดำดิ่งลงไปและลองทำสิ่งต่างๆ ด้วยมือ ดูว่าคุณสามารถทำอะไรกับโค้ดของคุณได้ และดูว่าคุณจะทำลายโค้ดของคุณได้อย่างไร สิ่งนี้สร้างความสมบูรณ์และช่วยให้คุณเข้าใจวิธีการและเหตุผลที่โค้ดทำงานได้ดีขึ้น โปรดจำไว้ว่า www. W3Schools.com เป็นแหล่งข้อมูลที่ดีเยี่ยมสำหรับคำถาม และพวกเขายังเสนอแซนด์บ็อกซ์เสมือนภายในเบราว์เซอร์เพื่อลองใช้โค้ดของคุณ หวังว่าคุณจะได้เรียนรู้อะไรบางอย่างและมีความสุขกับการเขียนโค้ด!