สุรจิต พยัคฆชาติ: มาเขียน HTML กันเถอะ...

ขั้นตอนการเขียน HOMEPAGE
1. นักเรียนค้นคว้าข้อมูลจากห้องสมุด
2. นักเรียนค้นคว้าจาก WEBPAGE ของโรงเรียน
3. นักเรียนค้นคว้าจาก WEBPAGE อื่นๆ
4. นักเรียนศึกษาวิธีการเขียน WEBPAGE
5. นักเรียนเขียน WEBPAGE ด้วยตนเอง
วิธีเขียน
1. เขียนใน Notepad โดยพิมพ์ตามใบงาน ตามลำดับ
2. Save File ด้วยสกุล htm
3. แสดงผลใน WebBrowser
--------------------------------------------------------------------------------
โครงแบบของเอกสาร
........ คือรหัสกำกับที่บอกว่าเอกสารนี้เป็นเอกสารประเภท HTML
........ คือรหัสกำกับบอกส่วนที่เป็นรายละเอียดเกี่ยวกับเอกสาร
คือรหัสบอกหัวเรื่องของเอกสาร (จะปรากฏบน titlebar)
มักจะวางอยู่ในคำสั่ง ........
....... คือรหัสกำกับบอกส่วนที่เป็นเนื้อหาของเอกสาร
[ ใบงานที่1]

การจัดหน้า และรูปแบบเอกสาร
คือรหัสสำหรับขึ้นบรรทัดใหม่

คือรหัสสำหรับขึ้นบรรทัดใหม่ และเว้น 1 บรรทัด
คือรหัสสำหรับเส้นคั่นแนวนอน 1 เส้น
สามารถเพิ่มความหนาได้จากการ พิมพ์

[ ใบงานที 2]

การทำรูปลักษณ์ของตัวอักษร
.....
เมื่อ n = 1, 2, .., 6 คือรหัสสำหรับการระบุหัวข้อ และขนาดตัวอักษรของ
หัวข้อ ซึ่งมีอยู่ด้วยกัน 6 ขนาด ระบุโดยใช้ตัวเลข 1
ถึง 6 โดย

จะเป็นหัวข้อขนาดใหญ่ที่สุด และ
จะเป็นหัวข้อที่มีขนาดเล็กที่สุด
..... คือรหัสกำกับตัวอักษรหนา
...... คือรหัสกำกับตัวอักษรเอน
..... คือรหัสกำกับการขีดเส้นใต้ข้อความ หรือคำ
[ ใบงานที 3]

การทำรายการ
คือรหัสสำหรับกำกับสิ่งที่เป็นรายการในแต่ละรายการ
โดยจะมีรหัสกำกับกลุ่มรายการบอกลักษณะรูปแบบของการแสดงรายการ คือ

คือรหัสสำหรับทำรายการเรียงตัวเลข

คือรหัสสำหรับแจงรายการแบบไม่ระบุลำดับ โดยมีลูกปืน
นำหน้า
คือรหัสสำหรับทำรายการคำอธิบาย ซึ่งประกอบด้วย
หัวข้อเรื่อง และคำอธิบายเรื่อง โดยในแต่ละหัวข้อ จะมี
รหัสกำกับด้วย
คือคำอธิบายหรือข้อความที่ขยายประกอบแต่ละหัวเรื่อง
ซึ่งสามารถมีได้มากกว่าหนึ่งชุด
[ ใบงานที 4]

การเชื่อมโยงเอกสาร การเชื่อมโยงเอกสารนั้นจะเป็นแฟ้มข้อมูลอะไรก็ได้ ไม่จำกัดเฉพาะข้อมูล ประเภทข้อความเท่านั้น ประเภทภาพนิ่งที่มีสกุล .gif .jpg ภาพเคลื่อนไหวสกุล .mpg หรือ .mov หรือแฟ้มเสียงที่มีสกุล .au, .wav, .ra ก็ได้ การแสดงหรือดูข้อมูลเหล่านี้จะต้องมีโปรแกรมผู้ช่วยเข้ามาทำหน้าที่ช่วยอ่าน ข้อมูล โดยใช้คำสั่ง [ ใบงานที 5]

การแสดงภาพในเอกสาร ไฟล์รูปภาพ โดยทั่วไปจะใช้ไฟล์รูปมาตรฐาน 2 ชนิด คือ gif และ jpg และการ ใส่ภาพทำได้ โดยใช้คำสั่ง และสามารถกำหนดการจัด การเกี่ยวกับรูปภาพ โดยเพิ่มรหัสคำสั่ง ALT = ... คือรหัสแทนที่รูปภาพด้วยข้อความ เพื่อแสดงข้อความเกี่ยว กับรูปภาพก่อนที่จะโหลดรูปภาพนั้น ALIGN = ... เป็นรหัสระบุตำแหน่งของภาพนั้น เทียบกับแนวบรรทัด ของข้อความ top คือ ส่วนบนของภาพ middle คือ ส่วนกลางของภาพ bottom คือ ส่วนล่างของภาพ WIDTH = ... เป็นรหัสสำหรับกำกับขนาดของภาพ โดยระบุเป็น pixels หรือเปอร์เซนต์ของขนาดภาพจริง HEIGHT = ... เป็นรหัสสำหรับกำกับความสูงของภาพโดยระบุเป็น pixels หรือเปอร์เซนต์ของขนาดภาพจริง HSPACE = ... เป็นรหัสสำหรับกำกับช่องว่างด้านข้างทั้งซ้าย และขวาของ รูปภาพ โดยกำหนดเป็น pixels VSPACE = ... เป็นรหัสสำหรับกำกับช่องว่างด้านบน และล่างของรูปภาพ โดยกำหนดเป็น pixels BOARDER = ... เป็นรหัสกำกับขอบของรูปภาพ [ ใบงานที 6]

การสร้างตาราง

เป็นรหัสกำกับสำหรับการใช้สร้างตาราง โดยเริ่มจากการ
กำหนดแถว คอลัมน์ และเซลล์
..... เป็นรหัสสำหรับเริ่มต้น และจบเนื้อหาในแต่ละแถว
...... เป็นรหัสสำหรับเริ่มต้นใส่ข้อมูลลงในเซลล์
......... เป็นรหัสสำหรับใช้ในการสร้างหัวข้อ
BORDER = ... เป็นรหัสกำกับการทำกรอบของตารางด้านนอกให้หนาขึ้น
ด้วยการระบุเป็น pixels
CELLPADDING = ... เป็นรหัสกำกับการทำขอบของตารางด้านในให้หนาขึ้นด้วย
การระบุเป็น pixels
CELLSPACING = ... เป็นรหัสกำกับช่องว่างระหว่างตัวอักษรในตาราง และขอบ
ALIGN = ... เป็นรหัสกำหนดตำแหน่งของตัวอักษรในตารางจากขอบ
ด้านในตารางโดยระบุ left right และ center
VALIGN = ... เป็นรหัสกำหนดตำแหน่งของตัวอักษรจากขอบบนในตาราง
โดยระบุ top bottom และ middle
[ ใบงานที 7]

การกำหนดสี
สามารถทำได้โดยการเพิ่มคำสั่งต่อไปนี้ ใน TAG ของ BODY
BGCOLOR = ... เป็นการกำหนดสีพื้น
TEXT = ... เป็นการกำหนดสีของตัวหนังสือ
LINK = ... เป็นการกำหนดสีของตัวอักษรเชื่อมระหว่างหน้า
VLINK = ... เป็นการกำหนดตัวอักษรเชื่อมระหว่างหน้าที่ไปเยี่ยมชมแล้ว
BACKGROUND = ... เป็นการกำหนดการใช้ภาพแทนสีพื้น
[ ใบงานที 8]