TOC

This article is currently in the process of being translated into Thai (~98% done).

Introduction to HTML:

Your First Webpage

ตัวอย่างต่อไปนี้เป็น ตัวอย่างง่ายๆของการสร้าง HTML5 document (เอกสาร) โดยเริ่มต้นที่ HTML5 doctype ตามด้วย Page title (ชื่อเรื่อง) และข้อมูลที่ต้องการแสดงภายใน 1 ย่อหน้า

<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>

ก่อนอื่นต้องคิดก่อนว่าอยากจะให้ข้อมูลแสดงออกมาทาง browser (เบราว์เซอร์) แบบไหน เช่น "Your first HTML5 Document" คือชื่อเรื่อง และ ข้อมูลที่ต้องการแสดง "Okay, now we’re going somewhere!" ให้จัดอยู่ทางซ้ายมือด้านบนของหน้าเบราว์เซอร์

doctype คือการบอกให้รู้ว่า เอกสารนี้เป็นเอกสารแสดงข้อมูลในรูปแบบของ HTML

<!DOCTYPE html>

ถ้าสังเกตดูจะเคยเห็นว่า doctype ของเอกสาร HTML จะเป็นดังนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

doctype นี้ง่ายมากจำง่ายแล้วก็ไม่ต้องกำหนด version นักพัฒนา software มืออาชีพยังใช้วิธี copy & paste ส่วนคุณลักษณะพิเศษใหม่ๆ ก็สามารถใช้งานได้เลยโดยอัตโนมัติ

DOCTYPE มีไว้ทำอะไร?

ทำไมต้องมี doctype? ปกติแล้วเบราว์เซอร์จะมีวิธีอ่านเอกสาร 2 แบบ แบบที่ 1 คือ standard mode และแบบที่ 2 คือ quirks mode ถ้าเราไม่กำหนดรูปแบบการอ่านให้เบราว์เซอร์ เบราว์เซอร์จะอ่านเอกสานแบบ quirks mode ซึ่งจะทำให้การอ่านเอกสารผิดพลาดได้เพราะแต่ละเบราว์เซอร์จะทำการอ่านเอกสารไม่เหมือนกัน ถ้าเรากำหนด doctype เบราว์เซอร์จะอ่านเอกสานแบบ standard mode ซึ่งจะทำให้แต่ละเบราว์เซอร์อ่านเอกสารในแบบเดียวกันและเข้าใจในโปรแกรมที่เราเขียน

เพื่อที่จะทำให้เอกสาร HTML5 ของเราเข้าใจง่ายขึ้น เราจะใช้ element <head> และ <body> เพราะจะทำให้เรารู้ว่าอะไรคือหัวข้อและอะไรคือข้อมูลที่ต้องการแสดง หลังจากใช้ element ดังกล่าว เว็บเพจจะแสดงออกมาทางดังนี้

<!DOCTYPE html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>

ถ้าเราย่อหน้าในเอกสารจะเกิดอะไรขึ้น? การย่อหน้าในเอกสารจะทำให้การอ่านเอกสารง่ายขึ้น แต่ก็ไม่จำเป็นต้องย่อหน้า การแสดงผลก็ออกมาเหมือนกัน

สุดท้ายคือเพิ่ม element <html> ให้กับเอกสารหลังจากเขียน doctype

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>
</html>

นี่คือการสร้างเว็บเพจ HTML5 อย่างง่ายๆ ในตัวอย่างจะสังเกตเห็นได้ว่า element <p> จะอยู่ใน element <body> ในรูปแบบนี้เราจะเรียกว่า nesting element (element ซ้อนกัน) สิ่งนี้เป็นองค์ประกอบสำคัญของโครงสร้างใน HTML

สรุป

  • เขียนขึ้นต้นด้วย doctype เสมอ - <!DOCTYPE html>
  • ใช้ element <head> ในการแบ่งหน้า webpage
  • ใช้ element <body> ในการแบ่งข้อมูลที่ต้องการแสดงใน webpage
  • ใช้ element <html>, <head>, และ <body> จะทำให้การอ่านเอกสารง่ายขึ้น
  • การย่อหน้าในเอกสารจะทำให้การอ่านเอกสารง่ายขึ้น
  • เราสามารถใช้ element ซ้อนกันได้
This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising