HTML คืออะไร

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 กันไปบ้างไหม สำหรับบทความนี้เอาไว้เพียงเท่านี้ก่อนนะครับ ไว้ติดตามกันใหม่ในหัวข้อถัดไป สวัสดีครับ

รับออกแบบเว็บไซต์
รับออกแบบเว็บไซต์
Contact Us via Line QR code