【HTML เบื้องต้น】คู่มือการใช้แท็กพื้นฐานและเทคนิคการใช้งานจริง
บทนำ
HTML (HyperText Markup Language) เป็นภาษาพื้นฐานที่สุดสำหรับสร้าง "โครงสร้าง" ของเว็บเพจ ข้อความ หัวข้อ และรูปภาพทั้งหมดที่เราเห็นในเบราว์เซอร์ล้วนถูกกำหนดโครงสร้างโดยแท็ก HTML ในคู่มือนี้ เราจะอธิบายวิธีใช้แท็กที่สำคัญซึ่งผู้เริ่มต้นมักจะสับสน พร้อมทั้งเทคนิคการนำไปใช้จริง
สารบัญ
- 1. การจัดการพื้นฐานเกี่ยวกับหัวข้อและข้อความ
- 2. การใช้งานแท็ก
<span>อย่างมืออาชีพ - 3. เทคนิคการสื่อสารข้อมูลไปยังผู้ใช้
1. การจัดการพื้นฐานเกี่ยวกับหัวข้อและข้อความ
พื้นฐานของเว็บเพจคือการถ่ายทอดข้อมูลอย่างเป็นลำดับชั้น มาฝึกฝนการใช้หัวข้อและข้อความให้ถูกต้องกันเถอะ
การปรับขนาดแท็กหัวข้อ (<h1>, <h2>, <h3>)
แท็กหัวข้อตั้งแต่ <h1> ถึง <h6> มีความสำคัญอย่างยิ่งในการแสดงโครงสร้างของหน้าเว็บ เราสามารถใช้คุณสมบัติ font-size ของ CSS เพื่อปรับขนาดได้อย่างอิสระตามการออกแบบ การสร้างความแตกต่างของขนาดตามระดับหัวข้อจะช่วยให้สามารถแสดงโครงสร้างลำดับชั้นที่สมดุลทางสายตาได้
การบังคับขึ้นบรรทัดใหม่ในหัวข้อหรือข้อความ (<br>)
โดยปกติ ข้อความจะถูกตัดขึ้นบรรทัดใหม่อัตโนมัติตามความกว้างของคอนเทนเนอร์ แต่ในบางกรณีที่ต้องการบังคับให้ขึ้นบรรทัดใหม่ ณ ตำแหน่งที่ต้องการในเชิงดีไซน์ เราจะใช้แท็ก <br> อย่างไรก็ตาม ควรหลีกเลี่ยงการใช้แท็กนี้บ่อยเกินไป เพราะอาจทำให้การขึ้นบรรทัดใหม่ดูไม่เป็นธรรมชาติในการออกแบบที่รองรับหลายอุปกรณ์ (Responsive Design)
2. การใช้งานแท็ก <span> อย่างมืออาชีพ
แท็ก <span> เป็นองค์ประกอบแบบอินไลน์ที่ไม่มีความหมายในตัวเอง แต่เมื่อใช้ร่วมกับ CSS จะกลายเป็นแท็กที่ทรงพลังอย่างยิ่ง สามารถใช้กำหนดสไตล์เฉพาะส่วนของข้อความได้
การเปลี่ยนสไตล์เพียงบางส่วนของข้อความ
แท็ก <span> เหมาะสมที่สุดเมื่อต้องการเปลี่ยนสีหรือทำตัวหนาเฉพาะคำบางคำในประโยคยาวๆ โดยพื้นฐานแล้วจะใช้เพื่อการตกแต่งเท่านั้น ไม่ได้เน้นความหมายทางเนื้อหา
การเน้นข้อความบางส่วนในลิงก์
ภายในลิงก์เดียว (แท็ก <a>) เราสามารถใช้ <span> เพื่อทำให้บางส่วนโดดเด่นขึ้นมาได้ เช่น "ซื้อตอนนี้ ลด 50%"
การใช้ CSS แอนิเมชัน
การใช้ CSS แอนิเมชันกับข้อความที่ครอบด้วยแท็ก <span> จะช่วยเพิ่มเอฟเฟกต์เคลื่อนไหวให้กับหน้าเว็บได้ เหมาะสำหรับการสร้างเอฟเฟกต์เฉพาะจุด เช่น ทำให้เครื่องหมาย "ใหม่" กะพริบ
3. เทคนิคการสื่อสารข้อมูลไปยังผู้ใช้
HTML มีฟังก์ชันที่มีประโยชน์ในการช่วยเหลือการใช้งานของผู้ใช้หรือให้ข้อมูลเพิ่มเติม
การแสดงไอคอนฟอนต์
หากใช้ไลบรารีไอคอนฟอนต์อย่าง FontAwesome เราสามารถแสดงไอคอนหลากหลายบนหน้าเว็บได้ด้วยโค้ดง่ายๆ เช่น <span class="fa fa-camera"></span> ซึ่งจะช่วยเพิ่มการมองเห็นของ UI ได้อย่างมาก (※จำเป็นต้องโหลดไฟล์ CSS ของแต่ละไลบรารีแยกต่างหาก)
การเพิ่มทูลทิป (คำแนะนำ)
เราสามารถใช้แอตทริบิวต์ title ซึ่งสามารถเพิ่มให้กับองค์ประกอบ HTML ทั้งหมด เพื่อสร้างทูลทิปได้อย่างง่ายดาย เมื่อผู้ใช้เลื่อนเมาส์ไปวางบนองค์ประกอบ ข้อความที่ระบุไว้จะปรากฏขึ้นมาเป็นป็อปอัป ซึ่งมีประโยชน์สำหรับการอธิบายคำศัพท์เฉพาะทางแบบสั้นๆ
บทสรุป
ในครั้งนี้ เราได้อธิบายเกี่ยวกับการใช้แท็กพื้นฐานของ HTML โดยเน้นที่การประยุกต์ใช้แท็กหัวข้อและแท็ก <span> เป็นหลัก แม้ว่าแท็กเหล่านี้จะเรียบง่าย แต่เมื่อใช้ร่วมกับ CSS ก็สามารถเพิ่มประสิทธิภาพด้านการออกแบบและฟังก์ชันการทำงานของเว็บเพจได้อย่างมาก ลองนำเทคนิคต่างๆ ในบทความสรุปนี้ไปทดลองใช้ดูนะครับ