ความรู้เบื้องต้นเกี่ยวกับภาษา HTML

รูปแบบของ HTML

ภาษา HTML ประกอบด้วยแท็ก (tag) ทำหน้าที่ควบคุมโครงสร้างและการแสดงผลของเว็บเพจ
ซึ่งจะถูกแปลผลด้วยโปรแกรมบราวเซอร์ รูปแบบของคำสั่งจะประกอบด้วย ตัวอักษรคำสั่งภายใต้
เครื่องหมาย < > แท็ก มี 2 รูปแบบ ดังนี้

แท็กคู่ ประกอบด้วยคู่ของแท็กที่อยู่ภายใต้เครื่องหมาย < > คำสั่งแต่ละคู่จะมีชื่อเรียกว่า แท็กเปิด (open tag) และแท็กปิด (close tag) แท็กเปิดเป็นคำสั่งอยู่หน้าข้อความ ส่วนแท็กปิด คล้ายแท็กเปิดแต่มีเครื่องหมายสแลส (/) อยู่ภายใน มีรูปแบบดังนี้

<คำสั่ง> ข้อความ </คำสั่ง>

เช่น <HTML>........................</HTML>

<BODY>........................</BODY> แท็กเดี่ยว เป็นแท็กที่มีเฉพาะแท็กเปิดเท่านั้น มีรูปแบบ ดังนี้

<คำสั่ง>

เช่น <BR> ใช้สำหรับขึ้นบรรทัดใหม่

<HR> ใช้ตีเส้นตามแนวนอน

<IMG>ใช้แทรกรูปภาพ

โครงสร้างภาษา HTML

โครงสร้างของภาษา HTML ประกอบด้วยส่วนสำคัญอยู่ 3 ส่วน คือ

1. ส่วนที่กำหนดให้บราวเซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML ซึ่งจะมีแท็ก

<HTML>..............</HTML> กำกับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแฟ้มข้อมูล

2. ส่วนหัวเรื่อง (HEAD) เป็นส่วนที่กำหนดให้ข้อความแสดงชื่อเว็บเพจนั้นๆ ไปปรากฏที่ส่วนแถบชื่อ

ของบราวเซอร์ และเก็บแท็กพิเศษอื่นๆ

3. ส่วนเนื้อหา (BODY) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมดซึ่งประกอบด้วยแท็กต่างๆ เพื่อ

ให้การแสดงผลมีความสวยงามสะดุดตา เช่น ข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของ

ตัวอักษร สีพื้น

สีพื้นและตัวอักษร

ส่วนสำคัญในการแสดงผล อยู่ในแท็ก <body>----</body> ซึ่งบราวเซอร์จะแปลผลเนื้อหาที่อยู่ภายในแท็กนี้ให้ปรากฏบนจอ รูปแบบของคำสั่งดังนี้

bgcolor จะเป็นส่วนกำหนดสีพื้น และ text จะเป็นส่วนกำหนดสีของตัวอักษร การกำหนดค่าสีทำได้ 2 วิธี คือ
1. การใช้ชื่อ ได้แก่ red, blue, white, black, yellow, teal, time, maroon, olive, navy, purple, gray, aqua, fuchsia และ silver

2. การใช้ค่าสี RGB ซึ่งเป็นระบบเลขฐานสิบหก เช่น 000000 หมายถึงสีดำ และ FFFFFF หมายถึงสีขาวเป็นตัน ในการระบุค่าสี RGB นั้น จะต้องใช้สัญลักษณ์ # นำหน้าเสมอ

ตัวอย่าง <body bgcolor="yellow" text=red" >หรือ
<body bgcolor="#FFFF00" text="#FF0000">

หัวเรื่อง

การกำหนดหัวเรื่องใช้แท็ก <hx>----</hx> โดยที่ x แทนค่าด้วยตัวเลข 1-6 ซึ่งตัวเลขที่มีค่าน้อยจะเป็นตัวอักษรขนาดใหญ่ ตัวเลขที่มีค่ามากจะเป็นตัวอักษรขนาดเล็ก

ตัวอย่าง
<h1>โรงเรียนสระยายโสมวิทยา</h1>
<h2>โรงเรียนสระยายโสมวิทยา</h2>
<h3>โรงเรียนสระยายโสมวิทยา</h3>
<h4>โรงเรียนสระยายโสมวิทยา</h4>
<h5>โรงเรียนสระยายโสมวิทยา</h5>
<h6>โรงเรียนสระยายโสมวิทยา</h6>

ข้อความ

ข้อความในเอกสารแต่ละย่อหน้า จะใช้แท็ก <p>--</p> โดยข้อความแต่ละย่อหน้าจะห่างกันเท่ากับหนึ่งบรรทัด แต่ถ้าต้องการตัดคำขึ้นบรรทัดใหม่โดยที่ยังอยู่ในย่อหน้าเดียวกัน ให้ใช้ แท็ก <br> ซึ่งแท็กนี้ไม่มีแท็กปิด นำไปแทรกข้อความที่ต้องการขึ้นบรรทัดใหม่ได้เลย

ตัวอย่าง
<p>โรงเรียนสระยายโสมวิทยา</p>
<p>ตำบลสระยายโสม อำเภออู่ทอง<br>
จังหวัดสุพรรณบุรี</p>

Page updated

Report abuse