HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับจัดรูปแบบเพิ่มเติม
โครงสร้างพื้นฐานของ HTML
<html>
<head>
<title>ชื่อเว็บเพจ</title>
</head>
<body>
<h1>หัวเรื่อง</h1>
<p>ข้อความ</p>
</body>
</html>
ด้านบนเป็นโครงสร้างพื้นฐานที่ทุกเว็บเพจจะต้องมี โดยมีคำอธิบายดังนี้
<html>…</html> เป็นแท็กแรกที่ต้องมีในภาษา HTML ซึ่งบ่งบอกว่านี่คือภาษา HTML โดยจะอยู่ที่จุดเริ่มต้นของเอกสารและท้ายเอกสาร ในแต่ละแฟ้ม
<head>…</head> เป็นการกำหนดรายละเอียดส่วนหัวของเอกสาร HTML คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับเว็บเพจ ซึ่งจะไม่แสดงผลที่หน้าเว็บเพจ
<title>…</title> เป็นแท็กย่อยที่อยู่ภายใน <head> ที่ใช้ในการกำหนดชื่อเว็บเพจซึ่งข้อความภายในแท็กนี้จะเป็นชื่อหัวเรื่องเว็บเพจที่ต้องการซึ่งจะต้องมีความยาวไม่เกิน 64 ตัวอักษร ข้อความนี้จะไปปรากฏที่ title bar ของ โปรแกรมเว็บเบราว์เซอร์ที่เราใช้งานอยู่
<body>…</body> เป็นส่วนเนื้อหาที่ต้องการแสดงผลบนโปรแกรมเว็บเบราว์เซอร์ เช่น ข้อความ รูปภาพ เสียง วีดิโอ และไฟล์ต่างๆ ที่ต้องการนำเสนอ การเขียนแท็กในส่วนนี้ ไม่มีข้อกำหนด สามารถเขียนติดกัน หรือ 1 บรรทัดต่อ 1 แท็ก แต่มักจะยึดรูปแบบที่อ่านง่าย
รู้จักกับ Tag พื้นฐาน
1. การกำหนดหัวเรื่อง (Headings)
ตัวเลขที่กำหนดขนาดและระดับความสำคัญของหัวเรื่องอยู่ในช่วงตัวเลข 1 ถึง 6 เช่น <h1> คือหัวข้อที่สำคัญที่สุด และ <h6> คือหัวข้อที่สำคัญน้อยที่สุด หรือ <h1> ขนาดของตัวอักษรจะมีขนาดใหญ่สุด และ <h6> ขนาดของตัวอักษรจะมีขนาดเล็กสุด
รูปแบบ
<h1>ข้อความหัวข้อเรื่องที่ 1</h1>
<h2>ข้อความหัวข้อเรื่องที่ 2</h2>
<h3>ข้อความหัวข้อเรื่องที่ 3</h3>
<h4>ข้อความหัวข้อเรื่องที่ 4</h4>
<h5>ข้อความหัวข้อเรื่องที่ 5</h5>
<h6>ข้อความหัวข้อเรื่องที่ 6</h6>ตัวอย่าง
2. การขึ้นย่อหน้าใหม่ (Paragraphs)
<p> คือคำสั่งที่ใช้ในการกำหนดย่อหน้า การใช้งานเช่น
<p>ข้อความเนื้อหาเว็บไซต์</p><hr> คือคำสั่งที่ใช้ในการขีดเส้นคั่น การใช้งานเช่น
ข้อความเนื้อหาเว็บไซต์1
<hr>
ข้อความเนื้อหาเว็บไซต์2<br> คือคำสั่งที่ใช้ในการขึ้นบรรทัดใหม่ การใช้งานเช่น
ข้อความเนื้อหาเว็บไซต์1<br>ข้อความเนื้อหาเว็บไซต์2<pre> คือคำสั่งที่ใช้ในการจัดรูปแบบข้อความ การใช้งานเช่น
<pre>
ข้อความเนื้อหาเว็บไซต์1 ข้อความเนื้อหาเว็บไซต์2
ข้อความเนื้อหาเว็บไซต์3 ข้อความเนื้อหาเว็บไซต์4
ข้อความเนื้อหาเว็บไซต์5
</pre>โดยปกติการจัดการข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อย ๆ จนสุดบรรทัดแล้วจึงขึ้นบรรทัดใหม่ ทำให้ข้อความที่ปรากฏบนจอภาพไม่ได้ถูกจัดวางในตำแหน่งที่เหมาะสม จาก Tag ข้างต้นเราสามารถกำหนดส่วนของข้อความในเอกสารให้ถูกต้องตามต้องการ
ตัวอย่าง
3. การเพิ่มสไตล์ให้กับข้อความ (Styles)
คำสั่งในการเพิ่มสไตล์ให้กับข้อความโดยกำหนด Attribute ที่ชื่อว่า style เข้าไปที่แท็กต่างๆ เช่น แท็ก p, div, h เป็นต้น ซึ่งปกติแล้วเราจะกำหนดสไตล์ผ่านทาง Stylesheet แต่คำสั่งการเพิ่มสไตล์ให้กับข้อความในครั้งนี้เราจะเรียกว่าการกำหนดแบบ inline คือการเพิ่มเข้าไป HTML Tgas นั่นเอง ซึ่งใน Attribute ชื่อ style เราจะกำหนดคุณลักษณะเดียวกันกับการใช้ภาษา CSS (นักเรียนจะได้เรียนในบทต่อๆ ไป) เข้าไปใน Elemments นั้นๆ ดังนี้
background-color คือการกำหนดสีพื้นหลัง
color : คือการกำหนดสีของข้อความ
font-family : คือการกำหนดประเภทของข้อความ
font-size : คือการกำหนดขนาดของข้อความ
text-align : คือการจัดตำแหน่งของข้อความ
รูปแบบ
<p style="background-color:yellow;">การกำหนดสีพื้นหลัง</p>
<p style="color:blue;">กำหนดสีของข้อความ</p>
<p style="font-family:Arial;">กำหนดประเภทของข้อความ</p>
<p style="font-size:25px;">กำหนดขนาดของข้อความ</p>
<p style="text-align:"left" หรือ "center" หรือ "right" หรือ "justify";">การจัดตำแหน่งของข้อความ</p>ตัวอย่าง
4. การจัดรูปแบบข้อความ (Text Formatting)
การใช้คำสั่งในการจัดรูปแบบข้อความเหล่านี้มีให้เลือกใช้อยู่หลากหลายรูปแบบดังนี้
<b> คือการกำหนดข้อความตัวหนา โดยไม่ได้กำหนดความสำคัญ
<i> คือการกำหนดให้ข้อความเอียง
<em> คือการกำหนดให้ข้อความเอียงและเน้นย้ำเป็นพิเศษ
<small> คือการกำหนดให้ข้อความมีขนาดเล็ก
<strong> คือการกำหนดให้ข้อความเป็นตัวหนา โดยกำหนดให้มีความสำคัญ
<sub> คือการกำหนดให้ข้อความเป็นตัวห้อย
<sup> คือการกำหนดให้ข้อความเป็นตัวยก
<ins> คือการกำหนดข้อความส่วนที่เพิ่มเติม (ขีดเส้นใต้)
<del> คือการกำหนดให้มีเส้นขีดฆ่าข้อความทิ้ง
<mark> คือการกำหนดให้ไฮไลท์หรือเน้นข้อความ
รูปแบบ
<p>การกำหนด<b>ข้อความตัวหนาโดยไม่ได้กำหนดความสำคัญ</b></p>
<p>การกำหนดให้<i>ข้อความเอียง</i></p>
<p>การกำหนดให้<em>ข้อความเอียงและเน้นย้ำเป็นพิเศษ</em></p>
<p>การกำหนดให้<small>ข้อความมีขนาดเล็ก</small></p>
<p>การกำหนดให้<strong>ข้อความเป็นตัวหนา โดยกำหนดให้มีความสำคัญ</strong></p>
<p>การกำหนดให้ข้อความเป็น<sub>ตัวห้อย</sub></p>
<p>การกำหนดให้ข้อความเป็น<sup>ตัวยก</sup></p>
<p>การกำหนดข้อความส่วนที่<ins>เพิ่มเติม</ins> (ขีดเส้นใต้)</p>
<p>การกำหนดให้มีเส้น<del>ขีดฆ่า</del>ข้อความทิ้ง</p>
<p>การกำหนดให้<mark>ไฮไลท์หรือเน้นข้อความ</mark></p>ตัวอย่าง
5. การจัดตำแหน่งข้อความ (Positions)
เป็นการจัดตำแหน่งให้ตัวอักษรหรือข้อความให้ชิดซ้าย ชิดขวา อยู่กึ่งกลาง หรือให้มีความกว้างที่เท่ากัน โดยจะเพิ่ม Attribute ที่ชื่อ align หรือ Alignment เข้าไปเพื่อกำหนดตำแหน่งของข้อความได้ดังนี้
Left คือการจัดข้อความในย่อหน้าให้ชิดซ้าย ซึ่งเป็นค่าปกติ
Center คือการจัดข้อความในย่อหน้าให้อยู่กึ่งกลาง
Right คือการจัดข้อความในย่อหน้าให้ชิดขวา
Justify คือการจัดข้อความให้มีความกว้างเท่ากันทั้งซ้ายและขวา
รูปแบบ
<p align ="left หรือ center หรือ right หรือ justify">การจัดตำแหน่งของข้อความ</p>ตัวอย่าง
หมายเหตุ align หรือ Alignment ของแท็ก <p> จะไม่สนับสนุนใน HTML5 เราต้องใช้ Attribute ที่ชื่อ style แทน เช่น <p style=”text-align:left|center|right| justify”>ข้อความ</p>
อ้างอิง
1belief.com, “โครงสร้างพื้นฐานของ HTML”, https://www.1belief.com/ สืบค้นวันที่ 1 พ.ย. 67
pirun.ku.ac.th, “1.3 โครงสร้างของภาษา HTML”, https://pirun.ku.ac.th/ สืบค้นวันที่ 1 พ.ย. 67
ครูกิ๊ก, “บทที่ 1 : โครงสร้าง HTML”, http://www.krukikz.com สืบค้นวันที่ 1 พ.ย. 67
Pongpat Weesommai, “โครงสร้างของ HTML”, https://mecode.blog สืบค้นวันที่ 1 พ.ย. 67
Teacher Nu, “โครงสร้างพื้นฐานภาษา HTML”, https://www.teachernu.com สืบค้นวันที่ 1 พ.ย. 67
เอ็นเฟท, “ภาษา HTML และโครงสร้างของภาษา HTML เพื่อเริ่มต้นเขียนเว็บไซต์ด้วยตัวเอง”, https://enfete.co.th สืบค้นวันที่ 1 พ.ย. 67
