HTML เบื้องต้น
14 March 2017
สำหรับคนทีต้องการเริ่มต้นทำเว็บไซต์สิ่งที่จำเป็นในการเริ่มทำเว็บไซต์คือ การเรียนภาษา Html ว่ามีการใช้งานอย่างไรไวยากรณ์ที่ใช้ในการเขียนเป็นอย่างไร ในบทความนี้จะนำเสนอความรู้เบื้องต้นเกี่ยวกับ ภาษา Html ที่จำเป็นสำหรับการสร้างเว็บไซต์ทุกประเภทไม่ว่าจะเป็น เว็บสำเร็จรูป หรือเว็บไซต์ทั่วไป
การเริ่มต้นเขียน Html จะต้องมีคำสั่งเพื่อเริ่มและจบคำสั่งเสมอเช่น
<p>……..</p>
ตัว <> เป็นคำสั่งเปิดใช้งาน </> เป็นคำสั่งปิดใช้งาน โดยตัวอักษรหรือข้อความที่ใส่ระหว่าง <> คือคำสั่งในการใช้งาน
ยกตัวอย่างเช่น คำสั่งย่อหน้าข้อความเราก็จะใช้คำสั่ง <p>..</p> แบบในรูป
การเริ่มต้นเขียน Html จะต้องมีคำสั่งเพื่อเริ่มและจบคำสั่งเสมอเช่น
<p>……..</p>
ตัว <> เป็นคำสั่งเปิดใช้งาน </> เป็นคำสั่งปิดใช้งาน โดยตัวอักษรหรือข้อความที่ใส่ระหว่าง <> คือคำสั่งในการใช้งาน
ยกตัวอย่างเช่น คำสั่งย่อหน้าข้อความเราก็จะใช้คำสั่ง <p>..</p> แบบในรูป
ด้านซ้ายเป็นภาษา html ด้านขวาคือ ผลลัพธ์
แต่คำสั่งสำคัญที่สุดในการเขียนคำสั่ง Html คือคำสั่ง <html>…</html>ที่ต้องใส่ก่อนและหลังการเขียน html ทุกครั้ง
ดังตัวอย่าง
คำสั่งเบื้องต้นที่นิยมใช้เขียนเว็บไซต์
1.คำสั่งปรับขนาดตัวอักษร เล็กใหญ่
<h1>ข้อความ 1</h1>
<h2>ข้อความ 2</h2>
<h3>ข้อความ 3</h3>
<h4>ข้อความ 4</h4>
<h5>ข้อความ 5</h5>
<h6>ข้อความ 6</h6>
1.คำสั่งปรับขนาดตัวอักษร เล็กใหญ่
<h1>ข้อความ 1</h1>
<h2>ข้อความ 2</h2>
<h3>ข้อความ 3</h3>
<h4>ข้อความ 4</h4>
<h5>ข้อความ 5</h5>
<h6>ข้อความ 6</h6>
2.คำสั่ง Link หรือคำสั่งกำหนดตำแหน่งให้ข้อความหรือรูปภาพ หากคุณต้องการให้คนที่เข้าชมเว็บไซต์ของคุณสามารถคลิกข้อความแล้วไปยังตำแหน่งเว็บไซต์หรือหน้าเว็บเพจที่คุณต้องการด้วยภาษา html คุณต้องใช้คำสั่ง
<a href = “…”>…</a> โดยใส่คำสั่ง a href ข้างหน้าและปิดท้ายข้อความ และใส่ลิ้งหรือตำแหน่งในเครื่องหมาย “ ” ตามตัวอย่างในภาพด้านล่าง
<a href = “…”>…</a> โดยใส่คำสั่ง a href ข้างหน้าและปิดท้ายข้อความ และใส่ลิ้งหรือตำแหน่งในเครื่องหมาย “ ” ตามตัวอย่างในภาพด้านล่าง
3. คำสั่งแทรกรูป ใช้สำหรับแทรกรูปภาพเข้าไปในหน้าเว็บไซต์
<img src="..."> คุณสามารถแทรกรูปภาพที่เป็นไฟล์ดิจิทัลเข้าไปใน เครื่องหมาย “..” โดยคุณจะต้องระบุที่อยู่ของรูปภาพให้ชัดเจนไม่เช่นนั้นรูปก็จะไม่แสดง
ตัวอย่าง
<img src="..."> คุณสามารถแทรกรูปภาพที่เป็นไฟล์ดิจิทัลเข้าไปใน เครื่องหมาย “..” โดยคุณจะต้องระบุที่อยู่ของรูปภาพให้ชัดเจนไม่เช่นนั้นรูปก็จะไม่แสดง
ตัวอย่าง
4. คำสั่งเปลี่ยนสีตัวอักษรใช้เปลี่ยนสีตัวอักษรตามที่คุณต้องการ โดยจะต้องแทรกคำสั่งในคำสั่งอื่น
<p style= “ ” > </p>
5. คำสั่งเปลี่ยนขนาดตัวอักษรใช้เปลี่ยนขนาดตัวอักษรและแบบตัวอักษรเป็นแบบต่าง ๆ
<b></b> ใช้เน้นตัวหนา
<i></i> ใช้ตัวเอียง
<sub></sub> ใช้ตัวห้อย
<sup></sup>ตัวยกกำลัง
<b></b> ใช้เน้นตัวหนา
<i></i> ใช้ตัวเอียง
<sub></sub> ใช้ตัวห้อย
<sup></sup>ตัวยกกำลัง