HTML คืออะไร

วันนี้เราจะมาพูดถึงพื้นฐานของการทำเว็บไซต์กันเลยนะครับ เกี่ยวกับเรื่องของ HTML ซึ่งน่าจะยังมีคนสงสัยและไม่เข้าใจกันอยู่ ดังนั้นบทความนี้จึงเหมาะสำหรับมือใหม่มากๆ ในการทำเว็บไซต์ เราจะมาเริ่มตั้งแต่ความหมายของ HTML กันเลยว่า HTML คืออะไร มีการใช้งานอย่างไร เรามาดูกันครับ

HTML คืออะไร

HTML (Hypertext Markup Language) คือ ภาษาคอมพิวเตอร์ภาษาหนึ่งที่เอาไว้ใช้สร้างหน้าเว็บไซต์ ซึ่งจะช่วยในเรื่องการสร้างโครงสร้างของหน้าเว็บ (Web Page) การแสดงลิงก์ ย่อหน้า รายการ การสร้างแบบฟอร์ม ภาพและวิดีโอ โดยสามารถเรียกดูผ่านทางเบราว์เซอร์ต่างๆ เช่น Chrome, Firefox, หรือ MacOS ได้ ปัจจุบัน HTML นี้อยู่ที่เวอร์ชั่น 5 หรือที่เรียกว่า HTML5

ตัวอย่างโครงสร้างของ HTML

<!DocType html>
<html>
 <head>
 <meta charset="UTF8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="http://localhost/html/style.css" type="text/css" media="all">
 <title>Title</title>
 </head>
 <body>
 <h1 id="head-1" class="big">Heading 1</h1>
 <p>Content of the document....</p>
 <footer class="footer">
 This is footer.
 </footer>
 <script src="https://localhost/html/js/jquery.js"></script>
 <script type="text/javascript" src="https://localhost/html/script.js"></script>
 </body>
</html>

ขยายความโครงสร้าง HTML

<!DOCTYPE html> คือการประกาศว่าจะใช้ HTML 5
<html> เริ่มต้นใช้ HTML
คือส่วนหัวข้อเนื้อหา จะประกอบไปด้วย
- <meta> – meta tag ระบุว่าใช้อักษรแบบ UTF-8 ทำให้อ่านเป็นภษาไทยได้
- <title> ชื่อหัวข้อของหน้าจะปรากฏอยู่ตรงแท็บด้านบนของเบราเซอร์
</head> ส่วนปิดของส่วนหัว

<body> เริ่มต้นในส่วนของเนื้อหาหน้าเว็บไซต์ เนื้อหาของเว็บไซต์จะใส่เข้าไประหว่างการเปิดและปิดของส่วน Body นี้
</body> ปิดในส่วนของเนื้อหาหน้าเว็บไซต์

</html> ปิดในส่วนของ HTML

เราสามารถที่จะเรียกคำสั่งต่างๆ ที่อยู่ภายในวงเล็บที่มีลักษณะเหมือนเครื่องหมายมากกว่าและน้อยกว่า ว่า แท็ก เช่น <body> ก็จะเรียกว่าแท็กบอดี้ หรือ Body Tag ในส่วนของแท็กต่างๆ ในภาษา HTML นี้ จะต้องมีการเปิดและปิดแท็กเสมอ จากตัวอย่างโค้ดด้านบนจะเห็นว่าเมื่อมีการเปิดแท็กบอดี้แล้วก็ต้องมีปิดแท็กบอดี้ </body> แบบนี้ ยกเว้นบางแท็กเช่น img, input ที่ไม่จำเป็นต้องมีการปิดแท็กครับ

แท็กใน HTML นั้น แต่ละตัวมีหน้าที่แตกต่างกันไป บางตัวทำหน้าที่ในการกำหนดขนาดตัวอักษร บางตัวทำหน้าที่ในการสร้างลิงก์ หรือ บางตัวมีหน้าที่ในการแบ่งพื้นที่การทำงาน และการแสดงผลอื่นๆ

ตัวอย่างแท็ก HTML

แท็ก h2 – เป็นแท็กที่กำหนดขนาดตัวอักษรให้มีความใหญ่ลำดับที่ 2 ซึ่งแท็กนี้มีหลายขนาดตั้งแต่ h1 ไปถึง h6
แท็ก a – เป็นแท็กที่กำหนดให้มีการเชื่อมโยงหรือทำลิงก์ไปหน้าอื่นๆ ทั้งในและนอกเว็บไซต์
แท็ก div – เป็นแท็กที่กำหนดขอบเขตของเนื้อหา
แท็ก table – เป็นแท็กที่ใช้สำหรับสร้างตารางในหน้าเว็บเพจ
แท็ก img – เป็นแท็กที่ระบุว่าเนื้อหาด้านในเป็นรูปภาพ
แท็ก p – เป็นแท็กที่บอกว่าเนื้อหาด้านในเป็นหนึ่งพารากราฟหรือข้อความ
แท็ก form – เป็นแท็กที่เอาไว้สร้างฟอร์มใน HTML
แท็ก input – เป็นแท็กที่มีกล่องให้ใส่ข้อมูลต่างๆ

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

แท็ก article – เป็นแท็กระบุพื้นที่ของเนื้อหาบทความอยู่ตรงส่วนนี้
แท็ก aside – เป็นแท็กระบุพื้นที่แถบด้านข้างหรือ Sidebar
แท็ก figure – เป็นแท็กระบุพื้นที่ของรูป
แท็ก footer – เป็นแท็กระบุพื้นที่ส่วนล่างของเนื้อหาหรือ Footer
แท็ก header – เป็นแท็กระบุพื้นที่ส่วนหัวของเนื้อหาหรือ Header
แท็ก nav – เป็นแท็กระบุพื้นที่เมนูหรือเนวิเกเตอร์ต่างๆ

ดูเพิ่มเติมแท็กใหม่ๆ ได้ที่หัวข้อ แท็กใหม่ใน HTML5

แอตทริบิวต์ในแท็ก HTML (Attributes in HTML)

ภายในแท็กต่างๆ ที่เราเขียนบางด้านบน ภายในแท็กยังมีองค์ประกอบหนึ่งที่ชื่อว่าแอตทริบิวต์ ที่ช่วยขยายหน้าที่การทำงานของแท็กต่างๆ เช่น id, class, href, src และอื่นๆ บางแอตทริบิวต์สามารถใช้งานได้ทุกแท็ก HTML แต่บางแอตทริบิวต์จะต้องใช้งานเฉพาะแท็ก

ตัวอย่างการใช้งานแอตทริบิวต์

<h1 id=”example”>ตัวอย่าง</h1>

เป็นการบอก id หรือรหัสประจำตัวแท็ก h1 นี้ ชื่อว่า example สำหรับ id จะสามารถใช้งานได้ทุกแท็กแต่งในหนึ่งหน้าเพจจะต้องมีไอดีเดียว

<p class=”small”>รายละเอียดตัวอย่าง</p>

เป็นการบอก class ของแท็ก p ชื่อว่า small ซึ่งคลาสนี้จะถูกนำไปใช้งานกับ CSS ในการดีไซน์หรือออกแบบหน้าเว็บไซต์ของเรา ในที่นี้เป็นการบอกว่า ในส่วนของเนื้อหานี้ให้มีขนาดเล็กกว่าปกติ

<a href="www.google.com">Google</a>

Href นี้จะเป็นการบอกว่าเมื่อมีคนมากดลิงก์ที่ชื่อว่า Google แล้วจะถูกนำไปยังหน้าเว็บ Google.com ครับ

<img src="www.example.com/images/img.jpg">

Src เป็นการบอกว่า รูปจะถูกนำมาจากโฟลเดอร์ใด ในที่นี้รูปที่ชื่อ img.jpg จะมาจากโฟลเดอร์ images

สำหรับแอตทริบิวต์อื่นๆ สามารถดูได้จากหน้า HTML Attributes ครับ

การใช้งาน CSS ร่วมกับ HTML

CSS (Cascading Style Sheets) เป็นภาษาหนึ่งที่มีไว้ใช้ในการปรับแต่งหน้าตาเว็บไซต์ เราสามารถนำเอา CSS มาใช้งานคู่กับ HTML ได้ โดยการนำแท็กหรือแอดทริบิวต์ของ HTML มาระบุตำแหน่งแล้วทำการใส่สไตล์ CSS ลงไป เพื่อบอกว่า HTML ตำแหน่งดังกล่าวมีโครงสร้าง สี ขนาดตัวอักษร หรือหน้าตาเว็บไซต์เป็นอย่างไร การทำงานระหว่าง CSS กับ HTML ทำให้เว็บไซต์มีความสวยงาม น่าดู มากยิ่งขึ้น

ตัวอย่าง HTML ใช้งานกับ CSS

HTML

<h1 id="head-1" class="big">Heading 1</h1>

CSS

.big { font-size: 50px }

จากตัวอย่างข้างต้นเป็นการบอกว่า คำว่า Heading 1 จะมีขนาดตัวอักษรที่ 50px

การใช้งาน JavaScript กับ HTML

JavaScript คือภาษาหนึ่งที่ใช้เพื่อจัดการเอฟเฟต์หรือพฤติกรรมของหน้าเว็บไซต์ ยกตัวอย่างเช่น เมื่อกดปุ่มข้อความจะเปลี่ยนไปโดยไมต้องรีเฟรชหน้าจอ การใช้งาน JavaScript จะอยู่ภายในแท็กที่ชื่อว่า <script></script>

ตัวอย่าง HTML ใช้งานกับ ๋JavaScript

<script>document.getElementById("demo").innerHTML = "Hello Dolly.";</script>

จากตัวอย่างข้างต้นจะเป็นการเขียนคำว่า Hello Dolly ที่ไอดี id=”demo”

ประวัติของ HTML

HTML เกิดขึ้นเมื่อปี ค.ศ. 1991 โดยนาย Tim Berners-Less นักฟิสิกส์จากสถาบันวิจัยเซิร์น (CERN research institute) ในประเทศสวิสเซอร์แลนด์ ในครั้งแรก HTML ประกอบด้วยแท็ก 18 HTML Tags ซึ่งในปัจจุบันมีแท็กอยู่ที่ 140 HTML Tags ซึ่งอาจไม่สนับสนุนในทุกเบราเซอร์

พัฒนาการของ HTML มีดังนี้

ปี 1991 Tim Berners-Lee ได้คิดค้น HTML 1.0
ปี 1993 HTML 1.0 ได้ถูกเผยแพร่สู่สาธารณะ ในขณะนั้นมีเพียงนักพัฒนาจำนวนเล็กน้อยที่นำ HTML มาสร้างเว็บไซต์
ปี 1995 HTML 2.0 ได้ถูกตีพิมพ์ ซึ่งมีการนำเอาฟีเจอร์ของ HTML 1.0 รวมกับฟีเจอร์ใหม่ๆ
ปี 1997 HTML 3.0 ได้ถูกสร้างขึ้น Dave Raggett เป็นคนที่แนะนำ HTML แบบทดลองนี้ ซึ่งช่วยพัฒนาฟีเจอร์ใหม่ๆ ของ HTML และเพิ่มประสิทธิภาพในการออกแบบเว็บไซต์ให้กับเว็บมาสเตอร์ แต่มีปัญหาคือ ฟีเจอร์ใหม่ที่ออกมาทำให้ประสิทธิภาพการใช้งานของเบราเซอร์น้อยลงในการพัฒนาต่อไปในอนาคต
ปี 1999 HTML 4.0 ได้ถูกนำออกมาใช้ และประสบความสำเร็จเป็นอย่างดี
ปี 2014 HTML 5.0 ได้ถูกนำมาใช้งานทั่วโลก เวอร์ชั่นนี้ถูกบอกว่าเป็นส่วนขยายของ HTML 4.0.1 ที่ถูกใช้ในปี 2012

ขอบคุณเนื้อหาจาก History of HTML

เป็นอย่างไรกันบ้างครับ พอจะได้พื้นฐานการใช้งานของ HTML กันไปบ้างไหม สำหรับบทความนี้เอาไว้เพียงเท่านี้ก่อนนะครับ ไว้ติดตามกันใหม่ในหัวข้อถัดไป สวัสดีครับ

HTML คืออะไร

HTML คืออะไร

แอตทริบิวต์ในแท็ก HTML (Attributes in HTML)

การใช้งาน CSS ร่วมกับ HTML

การใช้งาน JavaScript กับ HTML

ประวัติของ HTML

3 thoughts on “HTML คืออะไร”

Leave a Comment Cancel Reply

WEBDODEE

ข้อมูลเพิ่มเติม