ภาษา HTML
หมายเหตุ : สัญลักษณ์ ( ) คือสัญลักษณ์ < >
เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้
(HTML)
(/HTML)
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร (HTML) และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" (/HTML) เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร
(HTML)
(HEAD)
(/HEAD)
(/HTML)
และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD) ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง
(HTML)
(HEAD)
(TITLE)(/TITLE)
(/HEAD)
(/HTML)
และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้
อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร
(HTML)
(HEAD)
(TITLE)นี่คือเว็บเพ็จแรกของฉัน!(/TITLE)
(/HEAD)
(BODY)
(/BODY)
(/HTML)
บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น page1.shtml
สำหรับผู้ใช้ windows เวอร์ชั่น 3.11 ให้ตั้งชื่อเป็น page1.htm
ขอแสดงความยินดี! ที่คุณสามารถมีเว็บเพ็จเอาไว้อวดคุณพ่อคุณแม่หรือคนอื่น ๆ ได้แล้ว! และคุณก็สามารถที่ จะอัพโหลดมันไปไว้ที่เครื่องเซริฟเวอร์เพื่อแสดงให้คนทั้งโลกได้ดูผลงานของคุณคุณสามารถดับเบิ้ลคลิกบนไอคอน เพื่อดูผลงานของคุณ ซึ่งสิ่งที่คุณเห็นจะเป็นเพียงหน้าว่างเปล่า แต่มันก็คือเอกสาร HTML ขั้นตอนต่อไปก็คือเริ่มต้นใส่สิ่งต่าง ๆ ลงไปในเว็บเพ็จ
ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่คุณจะต้องเตรียมก็คือ ประการแรก คุณจะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพจของคุณควรจะมีหน้าตาเป็นอย่างไร และประการที่สองก็คือคุณต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี
บทที่ 1 นี้คือเว็บเพ็จหน้าแรกของฉัน
จะว่าไปแล้วก็เหมือนกับการเลี้ยงลูกบาสเก็ตบอลที่กระเด้งได้, ก่อนอื่นให้คุณ เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้
(HTML)
(/HTML)
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร (HTML) และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" (/HTML) เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร
(HTML)
(HEAD)
(/HEAD)
(/HTML)
และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD) ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง
(HTML)
(HEAD)
(TITLE)(/TITLE)
(/HEAD)
(/HTML)
และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้
(HTML)
(HEAD)
(TITLE)(/TITLE)
(/HEAD)
(BODY)
(/BODY)
(/HTML)
อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร
(HTML)
(HEAD)
(TITLE)นี่คือเว็บเพ็จแรกของฉัน!(/TITLE)
(/HEAD)
(BODY)
(/BODY)
(/HTML)
บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น page1.shtml
สำหรับผู้ใช้ windows เวอร์ชั่น 3.11 ให้ตั้งชื่อเป็น page1.htm
ขอแสดงความยินดี! ที่คุณสามารถมีเว็บเพ็จเอาไว้อวดคุณพ่อคุณแม่หรือคนอื่น ๆ ได้แล้ว! และคุณก็สามารถที่ จะอัพโหลดมันไปไว้ที่เครื่องเซริฟเวอร์เพื่อแสดงให้คนทั้งโลกได้ดูผลงานของคุณ ถ้าคุณใช้ Netscape ไฟล์ที่คุณ สร้างควรจะมีไอคอนเป็นแบบนี้...
(ถ้าไอคอนของคุณแตกต่างไปจากนี้ก็ไม่ต้องตกใจ, เพราะมันไม่ใช่เรื่องใหญ่)
คุณสามารถดับเบิ้ลคลิกบนไอคอน เพื่อดูผลงานของคุณ ซึ่งสิ่งที่คุณเห็นจะเป็นเพียงหน้าว่างเปล่า แต่มันก็คือเอกสาร HTML ขั้นตอนต่อไปก็คือเริ่มต้นใส่สิ่งต่าง ๆ ลงไปในเว็บเพ็จ
ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่คุณจะต้องเตรียมก็คือ ประการแรก คุณจะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพ็จของคุณควรจะมีหน้าตาเป็นอย่างไร และประการที่สองก็คือคุณต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี
บทที่ 2 กำหนด FONT ที่จะใช้ในเว็บเพ็จ
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(FONT FACE="AngsanaUPC")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT FACE="JasmineUPC")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT FACE="IrisUPC")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
อธิบายคำสั่ง
(FONT FACE = “ชื่อฟ้อนต์ที่ใช้”) เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
(/FONT) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
บทที่ 3 การกำหนดรูปแบบของอักษร
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(P)
(B) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/B)(P)
(I) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/I)(P)
(S) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/S)(P)
(U) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/U)(P)
ข้อความแบบ Super Script E=MC(SUP)2(/SUP)(P)
ข้อความแบบ Sub Script H(SUB)2(/SUB)O(P)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
ข้อความแบบ Super Script E=MC2
ข้อความแบบ Sub Script H2O
อธิบายคำสั่ง
(B)(/B) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
(I)(/I) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
(S)(/S) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
(U)(/U) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
(SUP)(/SUP) เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
(SUB)(/SUB) เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script
บทที่ 4 การกำหนดขนาดของตัวอักษร
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(FONT SIZE=6)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT SIZE=5)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT SIZE=4)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT SIZE=2)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, FONT SIZE = 6
Hello World, FONT SIZE = 5
Hello World, FONT SIZE = 4
Hello World, FONT SIZE = 2
อธิบายคำสั่ง
(FONT SIZE=ขนาดตัวอักษร) เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพ็จ
ขนาดตัวอักษร สามารถกำหนดได้ตั้งแต่ 1 – 7
(/FONT) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
บทที่ 5 การเน้นสีให้กับข้อความหรือตัวอักษร
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(FONT COLOR=RED)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=GREEN)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=BLUE)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=VIOLET)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=YELLOW)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
อธิบายคำสั่ง
(FONT COLOR="ชื่อสี") เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพ็จ
(/FONT) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้
เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น

บทที่ 6 การกำหนดสีตัวอักษรและสีแบล็คกราวด์
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY TEXTCOLOR="black" BGCOLOR="lightblue")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคำสั่ง
(BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี")
TEXTCOLOR ใช้กำหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLOR ใช้กำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี
บทที่ 7 การจัดวางตำแหน่งข้อความ
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(P ALIGN=LEFT)Hello World, นี่คือเว็บเพ็จแรกของฉัน(/P)
(P ALIGN=CENTER)Hello World, นี่คือเว็บเพ็จแรกของฉัน(/P)
(P ALIGN=RIGHT)Hello World, นี่คือเว็บเพ็จแรกของฉัน(/P)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
อธิบายคำสั่ง
(P) เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
(P) ALIGN=LEFT) กำหนดให้ข้อความอยู่ชิดด้านซ้าย
(P ALIGN=CENTER) กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
(P ALIGN=RIGHT) กำหนดให้ข้อความอยู่ชิดด้านขวา
(/P) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ (P ALIGN))

บทที่ 8 การจัดลำดับหัวข้อและเนื้อหาโดยใช้ (UL)
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
การจัดหัวข้อโดยใช้ (UL TYPE="disc")(BR)
(UL TYPE="disc")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/UL)
การจัดหัวข้อโดยใช้ (UL TYPE="square")(BR)
(UL TYPE="square")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/UL)
การจัดหัวข้อโดยใช้ (UL TYPE="circle")(BR)
(UL TYPE="circle")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/UL)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ (UL TYPE="disc")
• INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
• CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
• OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ (UL TYPE="square")
 INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
 CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
 OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ (UL TYPE="circle")
o INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
o CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
o OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคำสั่ง
(UL) เริ่มต้นลำดับข้อมูล
(TYPE="..") เครื่องหมายลำดับข้อมูล ได้แก่ disc, square และ circle โดยจะมี disc เป็นค่า Default
(LI) เริ่มต้นข้อมูลใน List
(/LI) สิ้นสุดข้อมูลใน List
(/UL) สิ้นสุดการลำดับข้อมูล


บทที่ 9 การจัดลำดับหัวข้อและเนื้อหาโดยใช้ (OL)
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
การจัดหัวข้อโดยใช้ (OL)(BR)
(OL)
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/OL)
การจัดหัวข้อโดยใช้ (OL TYPE="A" )(BR)
(OL TYPE="A" )
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/OL)
การจัดหัวข้อโดยใช้ (OL TYPE="I")(BR)
(OL TYPE="I")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/OL)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ (OL)
1. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
2. CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
3. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ (OL TYPE="A")
A. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
B. CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
C. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
องการจัดหัวข้อโดยใช้ (OL TYPE="I")
I. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
II. CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
III. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคำสั่ง
(OL) เริ่มต้นลำดับข้อมูล
TYPE="A" กำหนดเครื่องหมายเพื่อใช้ในการลำดับข้อมูล ได้แก่ A, a, I, i ถ้าไม่กำหนดจะเริ่มต้นด้วย 1 เสมอ
(LI) เริ่มต้นข้อมูลใน List
(/LI) สิ้นสุดข้อมูลใน List
(/OL) สิ้นสุดการลำดับข้อมูล

บทที่ 10 การจัดลำดับหัวข้อและเนื้อหาโดยใช้ (DL)
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
องค์ประกอบที่สำคัญของคอมพิวเตอร์ มีดังต่อไปนี้(BR)
(DL)
(DT)INPUT UNIT(/DT)
(DD)หน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/DD)
(DT)CENTRAL PROCESSING UNIT(DT)
(DD)CPU หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/DD)
(DT)OUTPUT UNIT(/DT)
(DD)หน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/DD)
(/DL)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
องค์ประกอบที่สำคัญของคอมพิวเตอร์ มีดังต่อไปนี้
INPUT UNIT
หน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
CENTRAL PROCESSING UNIT
CPU หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
OUTPUT UNIT
หน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคำสั่ง
(DL) เริ่มต้นลำดับข้อมูล
(DT) คำจำกัดความ
(DD) ความหมายหรือคำอธิบาย

บทที่ 11 การใส่รูปภาพประกอบในเว็บเพ็จ
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(CENTER)
นี่คือภาพดาราคนโปรดของฉัน(BR)
(IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star")(BR)
ลองทายดูซิว่าเธอคือใคร(BR)
(/CENTER)
(/BODY)
(/HTML)
อธิบายคำสั่ง..
(IMG) เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
SRC="ชื่อไฟล์รูปภาพ" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพ็จ (ต้องระบุ)
BORDER=0 กำหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=120 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=120 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT="คำอธิบาย" คำอธิบายนี้จะแสดงในกรณีที่ไม่สามารถแสดงรูปภาพได้ หรือเมื่อวางเมาส์บนรูปภาพ



แบบทดสอบ

1. HTML ชื่อเต็มที่เป็นภาษาอังกฤษ ข้อใดถูกต้อง
ก. Hypertext Markup Lan
ข. Hypertext Markup Langlan
ค. Hypertext Markup Language
ง. Hypertext Markup Logic
2. Body tags หมายถึงอะไร
ก. ส่วนเนื้อหาที่เราจะใส่
ข.ส่วนต้นของหัวข้อ
ค. ส่วนท้ายของเรื่อง
ง. ส่วนหัวข้อเรื่อง
3. HTML มีไว้เพื่อประโยชน์อย่างไร
ก. เพื่อเข้าเล่นในอินเตอร์เน็ต
ข. เพื่อใช้ดูรูปภาพ
ค. เพื่อใช้ก็อปปี้งาน
ง. เพื่อใช้ในการสร้างเว็บเพ็จ
4. โปรแกรมใดที่ใช้ในการเขียน HTML
ก. Notepad
ข. Microsoft Word
ค. Microsoft Excel
ง. Microsoft Power point
5. HEAD TAGS หมายถึงอะไร
ก. รายละเอียดส่วนกลางเอกสาร
ข. รายละเอียดส่วนท้ายของเอกสาร
ค. รายละเอียดส่วนหัวของเอกสาร
ง. รายละเอียดส่วนรูปภาพ
6. Tags TITLE หมายถึงอะไร
ก. ชื่อเรื่อง
ข. ตัวเรื่อง
ค. ท้ายเรื่อง
ง. ทั้งหมดของเรื่อง
7. โครงสร้างของ HTML ข้อใดถูก
ก. HEAD, BODY, TITLE
ข. HEAD, TITLE, BODY
ค. HEAD, TITLE, BODY
ง. HEAD, TITEL, BODY
8. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวเข้ม
ก. A ข. B
ค. C ง. U
9. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวเอน
ก. B ข. E
ค. T ง. I
10. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวขีดเส้นใต้
ก. B ข. I
ค. T ง. U
11. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวขีด
ก. S ข. O
ค. M ง. L
12. BGCOLOR กำหนดได้เพียงกี่สี
ก. 1 ข. 2
ค. 5 ง. 10
13. การกำหนด Tags สิ้นสุด จะใส่เครื่องหมายใด
ก. \ ข. /
ค. // ง. \\
14. Input Unit หรือหน่วยรับข้อมูลได้แก่ข้อใด
ก. Monitor ข. Printer
ค. Keyboard ง. Plotter
15. เวลาที่จะบันทึกให้บันทึกเป็นนามสกุลอะไร
ก.httl ข. htll
ค. htlm ง. html

เฉลยแบบทดสอบ
1. ค. Hypertext Markup Language
2. ก. ส่วนเนื้อหาที่เราจะใส่
3. ง. เพื่อใช้ในการสร้างเว็บเพ็จ
4. ก. Notepad
5. ค. รายละเอียดส่วนหัวของเอกสาร
6. ก. ชื่อเรื่อง
7. ค. HEAD, TITLE, BODY
8. ข. B
9. ง. I
10. ง. U
11. ก. S
12. ก. 1
13. ข. /
14. ค. Keyboard
15. ง. html