ภาษา HTML คืออะไร? เรื่องจำเป็นที่นักพัฒนาเว็บทุกคนห้ามมองข้าม
May 1, 2022
Get to know ‘ภาษา HTML’ คืออะไร
HTML ย่อมาจากคำว่า Hyper Text Markup Language คือภาษาหลักที่ใช้สำหรับการสร้างหน้าเว็บไซต์ โดยโครงสร้างของการใช้งานจะถูกใช้ในรูปแบบการกำกับ Tag โดยทั่วไป HTML จะใช้ควบคู่กับภาษา CSS ซึ่งเป็นภาษาที่ใช้ในการตกแต่งหน้าเว็บไซต์ให้มีสีสันหรือความสวยงามตามต้องการ ด้วยเหตุนี้ เหล่า Web Developer ที่ไม่ว่าจะรับหน้าที่ทำงานฝั่งหน้าบ้านหรือหลังบ้าน จึงควรทำความรู้จักและเขียน HTML ให้เป็นในระดับหนึ่ง
ภาษา HTML เป็นภาษาประเภทใด
Hyper Text Markup Language หรือ HTML ถูกจัดอยู่ในภาษาประเภทมาร์คอัพ (Markup Language) กล่าวคือ เป็นภาษาที่ใช้แสดงผลข้อมูล Text และรูปภาพร่วมกัน โดยจะมีการกำกับแท็กเพื่อกำหนดองค์ประกอบในเอกสาร ซึ่งภาษามาร์กอัพจะเป็นภาษาที่มนุษย์สามารถเข้าใจได้ จึงใช้ภาษาสื่อสารทั่วไปในการเขียนแทนที่จะเป็นภาษาคอมพิวเตอร์ (Programing Syntax) ภาษามาร์กอัพสองภาษาที่ได้รับความนิยมมากที่สุดได้แก่ HTML และ XML
HTML 5.0 พัฒนามาจากภาษาอะไรและพัฒนาโดยใคร
ก่อนอื่น HTML 5.0 คือ ภาษา HTML เวอร์ชันที่คนใช้งานกันในปัจจุบัน มีการอัพเดตมากที่สุด ถูกพัฒนาต่อมาจาก HTML 4 โดยกลุ่ม WHATWG (Web Hypertext Application Technology Working Group) ที่รับหน้าที่เป็นคนสร้างข้อกำหนดมาตรฐานเกี่ยวกับ HTML 5.0 ขึ้นมาเพื่อให้ผู้พัฒนาโปรแกรมนำไปใช้งานได้ง่ายขึ้นกว่าเวอร์ชันก่อน ๆ โดยข้อดีของ HTML 5.0 อยู่ที่โค้ดที่เขียนจะสามารถแสดงผลบนอุปกรณ์ได้หลากหลายมากขึ้น ลดข้อผิดพลาด และรองรับการแสดงผลสื่อมีเดียอย่างวีดิโอ รูปภาพ ไอคอนต่าง ๆ ได้โดยที่ไม่ต้องอาศัยการติดตั้ง Flash Plugin
ภาษา HTML เป็นภาษาในการสร้างอะไร ถูกหยิบไปใช้ทำอะไรบ้าง
อย่างที่ได้เกริ่นไปข้างต้นว่า HTML เป็นภาษาพื้นฐานที่ใช้สร้างหน้าเว็บไซต์ กล่าวคือจะถูกหยิบไปใช้งานในส่วนของ Front-end โดยตรง ภาษา HTML นำไปประยุกต์เพื่อสร้างเว็บไซต์ได้หลากหลายประเภท ไม่ว่าจะเป็นเว็บเพจสำหรับการนำเสนอสินค้าและบริการ เว็บบล็อก เว็บข่าว/สื่อมวลชน หรือแม้แต่เว็บส่วนตัว ขอบเขตการใช้งานจะเกี่ยวข้องกับการสร้างเว็บไซต์ในส่วนของเนื้อหา รวมไปการสร้าง Interaction บนหน้าด้วย เช่น แท็ก
<button>
เพื่อสร้างปุ่มกด สามารถใช้ในการเชื่อมโยงหรือเปลี่ยนเส้นทาง (Redirect) ไปยังหน้าอื่น ๆ ที่ต้องการ สร้างการแสดงผลเป็นข้อความ หรือใช้สร้างพื้นที่ทำ Media Display ปกติเราสามารถสร้างไฟล์ HTML ได้ในโปรแกรมติดเครื่องอย่าง Notepad, TextEdit และค่อยนำโค้ดที่เขียนไปเซฟเป็นไฟล์.html
เพื่อนำไปรันบนบราวเซอร์และตรวจสอบผลลัพธ์ทีหลัง หรืออาจจะเสียเวลาติดตั้งโปรแกรมสำเร็จรูปที่จะช่วยให้การเขียนโค้ดทำได้สะดวกมากขึ้นอย่างโปรแกรม VS Code หรือ Eclipse ก็ได้เช่นกันเรียนรู้โครงสร้างพื้นฐานของ HTML เบื้องต้น
โครงสร้างภาษา HTML แบ่งออกเป็น 2 ส่วนคือ Head สำหรับใส่หัวเรื่อง และ Body สำหรับใส่เนื้อหา ซึ่งทุกไฟล์จะมีการเปิดแท็ก
<html>
เพื่อเริ่มต้นไฟล์ และใส่</html>
เมื่อจบการเขียน โดยภายในแท็กดังกล่าวจะเป็นพื้นที่สำหรับการใส่หัวข้อและเนื้อหาที่เราต้องการ โครงสร้างโดยพื้นฐานของการเขียน HTML เป็นดังนี้1<html>2 <head>3 <title>ชื่อเรื่อง/หัวข้อ</title>4 </head>5 <body>6 ส่วนของเนื้อหาที่เราต้องการให้แสดงบนหน้าเว็บ7 </body>8</html>9
ทั้งนี้ ภายในแท็กจะมีการกำหนด Attribute เป็นส่วนขยายซ้อนไปอีกที โดยใช้เป็นคำสั่งเพื่อการจัดระยะ สี และขนาดของข้อความในแท็ก ค่าของ Attribute จะถูกกำหนดอยู่ภายในเครื่องหมาย “”
ประเภทของ Tag html
Tag ที่อยู่ในไฟล์ HTML ถูกแบ่งออกเป็น 2 ประเภท ได้แก่
-
Container Tag คือ แท็กที่ต้องมีการเปิดและปิด ซึ่งมีไวยากรณ์เป็นแบบ
<tag_name>Content</tag_name>
โดยถ้าหากเราลืมใส่แท็กปิดกับ Container Tag จะทำให้การรันหน้าเว็บของเราออกมาผิดรูปแบบ ตัวอย่างของแท็กประเภทนี้ เช่น<html></html>
เพื่อเพิ่มเนื้อหาของไฟล์,<title></title>
เพื่อเพิ่มชื่อเรื่อง หรือ<p></p>
เพื่อกำหนดพารากราฟ -
Empty Tag คือ แท็กที่ไม่จำเป็นต้องมีการปิดแท็กก็สามารถรันได้ตามปกติ ซึ่งมีไวยากรณ์แบบ
<tag_name />
ตัวอย่างของแท็กประเภทนี้ เช่น
<img />
เพื่อเพิ่มไฟล์รูปภาพ หรือ<br />
เพื่อขึ้นบรรทัดใหม่Tag html ที่ควรรู้ มีอะไรบ้าง
นอกเหนือจาก Tag ที่จำเป็นอย่าง
<html></html>
,<title></title>
,<body></body>
ที่ได้เห็นในโครงสร้างพื้นฐาน ก็ยังมีแท็กอีกมากมายที่จะช่วยให้การเขียน HTML ของเรา มีผลลัพธ์ออกมาเป็นหน้าเว็บที่สามารถใช้งานได้อย่างมีประสิทธิภาพและมีความเป็นระเบียบ ซึ่ง Tag html ทั้งหมดที่เราคัดสรรมาแล้วว่าเหล่ามือใหม่ควรทำความรู้จักเอาไว้ มีดังนี้<p>…</p>
ใช้กำหนดพารากราฟ ขึ้นย่อหน้าใหม่<br>
ใช้สำหรับเว้นบรรขึ้นบรรทัดใหม่<center>…</center>
ใช้เพื่อจัดข้อความให้อยู่กึ่งกลาง<a>…</a>
เพื่อเพิ่มลิงค์<h1>…</h1>, <h2>…</h2>, <h3>…</h3>
, … เพื่อเพิ่มหัวข้อย่อยในเอกสาร หัวข้อที่มีความสำคัญน้อยกว่าจะสัมพันธ์กับตัวเลขที่เพิ่มขึ้นตามลำดับ<u>…</u>
เพื่อขีดเส้นใต้ข้อความ<i>…</i>
เพื่อทำให้ข้อความเป็นตัวเอียง<hr>
เพิ่มเส้นแนวนอนในเอกสาร<img>
เพิ่มรูปภาพ<ol>…<ol>
เพิ่มลำดับรายการแบบ ordered list ซึ่งจะใช้คู่กับแท็ก<li>
<div>…<div>
เพื่อแบ่งส่วนของเนื้อหาออกจากกันแบบบล็อก<span>…</span>
เพื่อแบ่งส่วนของเนื้อหาออกจากกัน แต่ยังให้อยู่บนบรรทัดเดียวกัน
อย่างที่เห็นว่า Hyper Text Markup Language เป็นภาษาที่เกี่ยวข้องกับการสร้างหน้าเว็บเพจโดยตรง ฉะนั้นแล้ว สำหรับใครก็ตามที่ใฝ่ฝันไว้ว่าอยากทำงานเป็นนักพัฒนาเว็บ หรือทำงานในสายที่เกี่ยวข้อง การทำความเข้าใจตัวโครงสร้างพื้นฐานของ HTML หรือเขียนให้เป็นในระดับเบื้องต้นเป็นอย่างต่ำ เป็นสิ่งที่จำเป็นและเลี่ยงไม่ได้อย่างแน่นอน
ใครที่กำลังมีความต้องการอยากเรียนรู้ภาษา HTML แบบลงลึกมากขึ้น ให้ทราบไปจนถึงระดับที่นำไปใช้งานต่อยอดได้จริงด้วยตนเอง รวมไปถึงอยากปูพื้นฐานสกิลอื่นที่จำเป็นสำหรับอาชีพในสายโปรแกรมเมอร์ ทาง Techup มีคอร์สที่ตรงกับความต้องการของคุณอยู่ โดยที่เราการันตีด้วยว่าจะสามารถฝึกสอนผู้เรียนให้พร้อมเข้าสู่ตลาดงานได้ภายใน 4 เดือน อีกทั้งหลักสูตรของเราพร้อมเปิดรับผู้เรียนทุกคน ไม่ต้องมีพื้นฐานก็สามารถเรียนได้อย่างแน่นอน เริ่มต้นผู้เรียนจ่ายเพียง 4,000 บาทเท่านั้น แล้วค่อยจ่ายส่วนที่เหลือหลังได้งานแล้ว หากรู้สึกสนใจลองดูรายละเอียดของหลักสูตรเราได้เลยที่นี่
พร้อมจะเริ่มย้ายมาทำงาน สาย TECH แล้วหรือยัง?
