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
  • <head> คือส่วนหัวข้อเนื้อหา จะประกอบไปด้วย
    • <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 ครับ  

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

รับออกแบบเว็บไซต์
รับออกแบบเว็บไซต์

1 thought on “HTML คืออะไร”

  1. Pingback: CSS คืออะไร - WebDoDee

Leave a Comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *