เข้าใจ HTML 5 ฉบับมือใหม่สุด ๆ
Toy
พี่ทอย มือใหม่อยากรู้จัก HTML ต้องไปอ่านที่ไหน ?
อ่านข้างล่างนี้เลย
HTML เป็นไฟล์หลักที่นักพัฒนาเลือกใช้งานการพัฒนาเว็บไซต์ และเว็บแอพพลิเคชั่น ซึ่งมีโครงสร้างที่เข้าใจง่าย สามารถนำไปใช้งานได้กับหลาย Framework ที่มีการพัฒนาจนถึงปัจจุบัน
HTML คืออะไร ?
HTML หรือ Hyper Text Markup Language เป็นไฟล์ที่ใช้ในการสร้างเว็บไซต์จากการวางโครงสร้าง Tag เปิด-ปิด เพื่อจัดการวาง Layout ขั้นพื้นฐานโดยไม่อาศัยการปรับแต่งใด โดยทั่วไปเมื่อมีการสร้าง <> ก็จะมีลักษณะพื้นฐานตาม Tag นั้น ซึ่งในบทความนี้จะพาเราไปรู้จักโครงสร้างทั่วไปของ HMTL เมื่อมีการสร้างขึ้นมาด้วยครับ
ทำไมต้อง HTML5 ?
HTML5 คือ ภาษามาร์กอัป ที่ใช้สำหรับเขียน website ซึ่ง HTML5 นี้เป็นภาษาที่ถูกพัฒนาต่อมาจากภาษา HTML และพัฒนาขึ้นมาโดย WHATWG (The Web Hypertext Application Technology Working Group) โดยได้มีการปรับเพิ่ม Feature หลายๆอย่าง เช่น การแสดงผลกับทุกเบราเซอร์ ลดการใช้ปลั๊กอินที่ไม่จำเป็น มีการจัดการข้อผิดพลาดจาก HTML เวอร์ชั่นแรก มีความเป็นอิสระสูง และยังทำ Semantic markup ในการเพิ่ม element ให้อ่านง่าย เหมาะกับการทำ SEO เมื่อมีการเพิ่มในส่วนที่ได้กล่าวมาจึงให้ผู้พัฒนาสามารถใช้งานได้ง่ายมากยิ่งขึ้น
เราลองมาเริ่มรู้จักกับส่วนประกอบ (Element) ต่าง ๆ ที่พูดถึงได้ตามนี้เลย
Basic Tags
| Tag Name | Description |
|---|---|
| <html> </html> | ใช้สำหรับประกาศประเภทไฟล์ HTML , HTML5 |
| <head> </head> | ใช้สำหรับประกาศข้อมูลเกี่ยวกับเว็บ เช่น คีย์เวิร์ด ชื่อเพจ และสามารถเรียกใช้ Javascript ได้ |
| <body> </body> | ใช้สำหรับสร้าง element ต่าง ๆ เป็นโครงสร้างของเว็บไซต์ที่ผู้ใช้งานเห็น |
Text Tags
| Tag Name | Description |
|---|---|
| <pre> | สร้างข้อความที่มีการจัดฟอร์แมต เช่น การแสดงโค้ด |
| <h1> | สร้างหัวข้อใหญ่ |
| <h6> | สร้างหัวข้อที่เล็กที่สุด |
| <b> | ทำตัวอักษรหนา |
| <i> | ทำตัวอักษรเอียง |
| <u> | ขีดเส้นใต้ข้อความ |
| <cite> | สร้างตัวอักษรแบบอ้างอิงข้อความ |
| <p> | สร้างกล่องข้อความ |
| <em> | เน้นย้ำข้อความ |
| <strong> | เน้นย้ำข้อความ |
Formatting
| Tag Name | Description |
|---|---|
| <br> | ขึ้นบรรทัดใหม่ |
| <blockquote> | สร้างกล่องประกาศข้อความ |
| <ol> | สร้างหัวข้อย่อย แบบตัวเลข |
| <ul> | สร้างหัวข้อย่อย แบบสัญลักษณ์ |
| <li> | สร้างแถวย่อย |
| <div> | สร้างกล่องเปล่า (Main) |
| <img src='name.jpg' alt='cover'> | สำหรับใส่รูปภาพ พร้อมคำอธิบาย |
| <a href='name'> | สำหรับใส่ URL |
| <hr> | คำสั่งที่ใช้ในการขีดเส้นคั่นแนวนอน |
Table
| Tag Name | Description |
|---|---|
| <table> | สร้างตาราง (Main) |
| <th> | สร้างชื่อของหัวตาราง (คอลัมน์) |
| <tr> | สร้างข้อมูลแบบแถว |
| <td> | สร้างข้อมูลในช่องของแต่ละแถว จากซ้ายไปขวา |
Forms
| Tag Name | Description |
|---|---|
| <form> </form> | สร้างแบบฟอร์มกรอกข้อมูล (Main) |
| <select multiple name='NAME' size=?> </select> | สร้างตัวเลือกแบบหลายคำตอบ |
| <select name='NAME'> </select> | สร้างตัวเลือกแบบคำตอบเดียว |
| <option> | สร้างสร้างตัวเลือกที่สามารถเลือกจาก select |
| <textarea name='NAME' cols=40 rows=8> | สร้างกล่องข้อความสำหรับแบบมีการกำหนดความกว้าง และความสูง |
| <input type='checkbox'> | สร้างกล่องสำหรับเลือกแบบสี่เหลี่ยม |
| <input type='radio'> | สร้างกล่องสำหรับเลือกแบบวงกลม |
| <input type='text'> | สร้างกล่องข้อความแบบสั้น |
| <button type='submit'></button> | สร้างปุ่มสำหรับการยืนยันแบบฟอร์ม |
| <input type='image' border=0 name='NAME' src='name.gif' > | สร้างช่องสำหรับการยืนยันด้วยการอัพโหลดรูปภาพ |
สรุปเนื้อหา
HTML เป็นเทมเพลต ที่เราใส่ <> ลงไปในไฟล์เพื่อกำหนดโครงสร้าง element ให้ตรงกับหน้าเว็บไซต์ที่เราต้องการก่อนจะนำไปปรับแต่งความสวยงามผ่าน Css3 รูปแบบของแท็กแต่ละชนิด จะส่งผลทำให้สิ่งที่เว็บสร้างออกมาแตกต่างกัน บาง element อาจจะใช้ได้แค่แบบเดียวต่อความต้องการของเรา แต่บาง element สามารถใช้ผสมผสานกันได้ ในปัจจุบันมี technology มากมายที่พัฒนาให้ html นั้นมีการโหลดได้เร็วยิ่งขึ้นด้วยการโหลดเฉพาะบาง element ที่มีการเปลี่ยนแปลง หรือเราเรียกกันว่า SPA หรือ Single Page Application ซึ่งจะถูกเขียนเป็นบทความต่อไปครับ
Share your experience with this Blog