คู่มือ HTML พื้นฐานฉบับง่าย: โค้ดที่มือใหม่ Blogger ต้องรู้!

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

ทำไม Blogger ต้องรู้ HTML พื้นฐาน?

แม้ว่า Blogger จะมีเครื่องมือจัดรูปแบบให้เราใช้งานแล้ว แต่บางครั้งเราก็ต้องการความยืดหยุ่นหรือการปรับแต่งที่เครื่องมือเหล่านั้นทำไม่ได้ การรู้จักโค้ด HTML จะช่วยให้คุณ:

จัดรูปแบบตัวอักษร และข้อความได้ละเอียดขึ้น
แทรกรูปภาพ หรือวิดีโอแบบกำหนดขนาดและตำแหน่งได้เป๊ะ ๆ
สร้างตาราง หรือองค์ประกอบที่ซับซ้อนได้
แก้ไขปัญหา การแสดงผลผิดพลาดเล็ก ๆ น้อย ๆ ด้วยตัวเอง

ข้อสำคัญ: HTML คือภาษาโครงสร้าง ไม่ใช่ภาษาออกแบบ แต่การรู้พื้นฐานจะทำให้คุณควบคุมการนำเสนอเนื้อหาใน Blogger ได้อย่างเหนือกว่าเครื่องมืออัตโนมัติครับ

โค้ด HTML พื้นฐานที่มือใหม่ต้องจำให้ขึ้นใจ!

เรามาดูกันเลยครับว่ามีโค้ดอะไรบ้างที่ใช้บ่อยจนแทบจะเรียกได้ว่าเป็น "หัวใจ" ของการจัดรูปแบบบทความ:

1. โครงสร้างข้อความ: หัวข้อ (Heading) และ ย่อหน้า (Paragraph)

ส่วนนี้สำคัญมากสำหรับ SEO ครับ เพราะช่วยบอก Google ว่าส่วนไหนคือหัวข้อหลัก หัวข้อรอง และเนื้อหา


            <h2>หัวข้อหลักของส่วนบทความ (สำคัญมาก)</h2>

            <h3>หัวข้อรองที่อยู่ภายใต้หัวข้อหลัก</h3>

            <p>นี่คือย่อหน้าของเนื้อหาที่คุณกำลังเขียนครับ</p>

คำแนะนำ: ควรใช้ **<h1>** แค่ครั้งเดียวต่อบทความ (ซึ่งปกติ Blogger จะใส่ให้แล้ว) และใช้ **<h2>**, **<h3>** ไล่ลงไปตามลำดับความสำคัญของเนื้อหาครับ

2. การเน้นข้อความ: ตัวหนา, ตัวเอียง และ ขีดเส้นใต้

ใช้เพื่อเน้นคำสำคัญให้ผู้อ่านและ Search Engine ทราบ


            <strong>ข้อความนี้จะแสดงเป็นตัวหนา</strong>

            <em>ข้อความนี้จะแสดงเป็นตัวเอียง (เน้นความสำคัญ)</em>

            <u>ข้อความนี้จะแสดงเป็นขีดเส้นใต้</u>

3. การทำรายการ (List)

การจัดเนื้อหาเป็นรายการจะช่วยให้อ่านง่าย สบายตามากครับ

รายการแบบมีลำดับ (Ordered List: OL) - มีตัวเลข


            <ol>

               <li>ขั้นตอนที่หนึ่ง</li>

               <li>ขั้นตอนที่สอง</li>

            </ol>

รายการแบบไม่มีลำดับ (Unordered List: UL) - มีสัญลักษณ์ (Bullet Points)


            <ul>

               <li>ข้อความแรก</li>

               <li>ข้อความที่สอง</li>

            </ul>

4. การใส่ ลิงก์ (Hyperlink)

นี่คือหัวใจสำคัญของอินเทอร์เน็ตครับ ใช้สำหรับเชื่อมโยงไปยังหน้าอื่น ๆ หรือแหล่งข้อมูลภายนอก


            <a href="https://www.example.com">ข้อความที่ต้องการให้คลิก</a>

ถ้าอยากให้ลิงก์เปิดในแท็บใหม่ (แนะนำสำหรับลิงก์ภายนอก) ให้เพิ่ม **target="_blank"** เข้าไปแบบนี้ครับ:


            <a href="https://www.example.com" target="_blank">คลิกเพื่อดูข้อมูลเพิ่มเติม (เปิดแท็บใหม่)</a>

5. การแทรก รูปภาพ (Image)

รูปภาพช่วยดึงดูดความสนใจได้ดีมาก อย่าลืมใส่ **alt** เพื่ออธิบายภาพสำหรับ SEO ด้วยนะครับ


            <img src="ที่อยู่ของรูปภาพของคุณ.jpg" alt="คำอธิบายรูปภาพสำหรับ SEO" title="คำอธิบายสั้นๆ ของรูปภาพ" />

เคล็ดลับ: Blogger มักจะจัดการโค้ดรูปภาพให้เรา แต่ถ้าต้องแก้ไขเอง โค้ดด้านบนคือสิ่งที่คุณต้องรู้ครับ

สรุปส่งท้าย

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

ขอให้สนุกกับการทำบล็อกนะครับ!