วิธีสร้างไฟล์ HTML ได้ง่ายและรวดเร็วด้วย Emmet

เป็นไปได้ไหมที่จะสร้างโค้ด HTML ของเว็บไซต์ทั้งหมดในไม่กี่นาที หรือไม่กี่วินาที? เป็นไปได้หากคุณใช้ Emmet! วิธีใหม่นี้ช่วยพัฒนาโค้ด HTML, XML และรูปแบบโค้ดที่มีโครงสร้างอย่างรวดเร็ว

Emmet เป็นปลั๊กอินสำหรับ text editor ยอดนิยมหลายตัว ด้วย Emmet คุณสร้างโครงร่างหน้าเว็บด้วยไวยากรณ์ที่มีเหตุผลแต่วีดตัวมาก แล้วขยายเป็นโค้ด HTML สมบูรณ์ ผลลัพธ์รู้สึกเหมือนเวทมนตร์: บรรทัดเดียวขยายเป็นหลายร้อยบรรทัด และคุณมีหน้าเว็บ static หรือโครงสร้างเว็บไซต์เต็มรูปแบบพร้อมในไม่กี่นาที

คุณจะเรียนรู้การใช้ Emmet สร้างหน้าเว็บ static เต็มรูปแบบ ใช้ Visual Studio Code ในบทช่วยสอนนี้ เนื่องจากมาพร้อมรองรับ Emmet ตัวเอง สามารถใช้ Emmet ใน editor อื่นๆ เช่น Sublime Text และ Atom ได้ แต่ต้องติดตั้ง extension เพื่อรองรับ

สร้างไฟล์เว็บไซต์ของคุณ

เริ่มต้นด้วยการเปิด Visual Studio Code

เลือก “File -> New File” เพื่อสร้างเอกสารว่างใหม่

เลือก “File -> Save As” บันทึกไฟล์ ตั้งนามสกุล “html”

โครงสร้างพื้นฐาน

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

หมายเหตุ: แม้เราจะอธิบายพื้นฐาน แต่วิธีดีกว่าคือคุณคุ้นเคยกับไวยากรณ์ HTML พื้นฐานก่อนจะดำเนินต่อ

ในระดับบนสุดพื้นฐาน เว็บไซต์ส่วนใหญ่มี 3 กลุ่ม/ส่วน: header, ส่วนหลักสำหรับเนื้อหาแกนกลาง, และ footer สร้างด้วย Emmet โดยพิมพ์:

#header+#mainsite+#footer

เครื่องหมาย “#” นำหน้าแต่ละคำ หมายถึงแต่ละกลุ่มเป็น div ที่มี ID กด Enter ท้ายบรรทัด จะเห็น Emmet ทำงาน บรรทัดเล็กๆ กลายเป็น 3 บรรทัด HTML ที่มีโครงสร้าง

โครงสร้าง Header

Header ของเว็บทั่วไปประกอบด้วยโลโก้ และเมนู 1-2 เมนู เพิ่มเข้าไปในหน้าคุณ สามารถเก็บ HTML ที่ขยายจากขั้นตอนก่อน และพิมพ์โดยตรงใน Header Div พิมพ์แบบนี้:

#logo+#menu_top+#menu_main

กด Enter ขยายอีกครั้ง จะได้ div อีก 3 ตัวสำหรับโลโก้และเมนู 2 เมนู ภายใน Header

การจัดกลุ่มใน Emmet

ด้วย Emmet จัดกลุ่มองค์ประกอบโดยวางในวงเล็บ ทำให้สร้างโครงสร้างซับซ้อนได้ ย้อนกลับมาทุกอย่างจนเหลือโค้ดพื้นฐาน #header+#mainsite+footer จากก่อนหน้า

แทนที่ #header ในโค้ดของคุณด้วย:

(#header>.logo+.menu.top+.menu.main^)

ใน Emmet คุณลงชั้นล่างด้วยตัวอักษร > และขึ้นชั้นบนด้วย ^ ทำให้เข้าไปในองค์ประกอบ เพิ่มอื่นๆ แล้วกลับขึ้นมา

ผลลัพธ์ควรเป็นแบบนี้:

(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer

ข้างแปลว่า: “เพิ่ม Div (กลุ่ม) ID #header ภายในเพิ่ม 3 Divs คลาส .logo, .menu.top และ .menu.main ขึ้นหนึ่งระดับนอกกลุ่ม เพิ่ม Divs อีก 2 ตัวข้างๆ ด้วย ID #mainsite และ #footer”

โครงสร้าง Post

โพสต์พื้นฐานบนเว็บทั่วไปมักประกอบด้วย:

Title
Image
Excerpt (ย่อหน้าข้อความ)

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

โค้ดที่จะเพิ่ม:

(.post>h3{Post Title $}+img+p{Post Excerpt})*5

บอก Emmet “สร้าง Div คลาส .post ภายในวาง heading H3, รูปภาพ, และย่อหน้าสำหรับ excerpt

ด้วย “{TEXT}” ต่อท้ายองค์ประกอบ คุณกำหนดเนื้อหา ด้วย “{Post Title}” บอก Emmet ว่าเนื้อหาของ H3 แต่ละอันจะเป็น placeholder text “Post Title” คุณเปลี่ยน “Post Title” เป็นชื่อคุณหรือข้อความอื่นได้ จะใช้เป็นเนื้อหา title โพสต์เมื่อขยายโค้ด

ตัว $ ถัดจาก “Post Title” เป็นตัวแปรตัวเลขทำงานร่วมกับ “5” ด้านนอกวงเล็บ *5 บอก Emmet ให้ทำซ้ำเนื้อหาในวงเล็บ 5 ครั้ง $ จะถูกแทนที่ด้วยหมายเลขลำดับของแต่ละโพสต์ เปลี่ยนตัวเลขนี้เป็นจำนวนโพสต์ที่ต้องการในหน้า

เพิ่มลงในโค้ดจริง ควรเป็นแบบนี้:

(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)

โครงสร้าง Footer

สำหรับ Footer เพิ่ม 2 กลุ่ม – 2 Divs คลาส .design และ .copyright

โค้ดดังนี้:

(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))

ผลลัพธ์จะเป็น:

(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))

ตอนนี้ กด Enter เว็บไซต์ของคุณพร้อม!

ด้วยการกดปุ่มเดียว ทุกอย่างที่เห็นจนถึงตอนนี้ และชุดตัวอักษรยุบนี้นี้ จะกลายเป็นหลายสิบบรรทัดไวยากรณ์ HTML ที่เหมาะสมสำหรับหน้าเต็ม!

บันทึกการเปลี่ยนแปลงด้วย Ctrl + S หรือ “File -> Save” เพื่อดูผลงาน เปิดเบราว์เซอร์ แล้ว “File -> Open” หรือ file manager ภายนอก เลือกไฟล์ HTML เปิดในเบราว์เซอร์

สรุป

คุณเรียนรู้พื้นฐานการใช้ Emmet สร้างไฟล์ HTML แน่นอนว่าคุณสามารถกลับมาแก้ไขหรือขยายเพิ่มเติมได้ตลอดเวลา

คุณรู้จัก Emmet แล้วหรือยัง? ใช้ shortcut อื่นๆ ช่วยสร้างเว็บไซต์? บอกเราในส่วนความคิดเห็นได้เลย