วันจันทร์ที่ 1 กันยายน พ.ศ. 2551

ภาษาHTML

การเขียนภาษา HTML เบื้องต้น
ด้วย การใช้โปรแกรม Notepad ในการสร้างเว็บเพจ
การกำหนดโครงสร้างหลักของ HTML
การจัดวางที่เห็นเป็นการจัดวางแบบมาตรฐาน ซึ่งประกอบไปด้วย 4 ส่วน ซึ่งเวลาเริ่มเขียนภาษาHTML ควรเริ่มจากตรงนี้ก่อนทุกครั้ง
• คำสั่งหลัก .... เป็นคำสั่งที่ไว้กำหนดจุดเริ่มต้นและจุดจบของเอกสาร
• คำสั่งหลัก .... เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง โดยภายในคำสั่งนี้จะประกอบไปด้วย
o คำสั่งหลัก .... เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการให้ขึ้นอยู่ในส่วนของ Title Bar โดยสามารถพิมพ์ได้ยาว 64 ตัวอักษร
• คำสั่งหลัก .... เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของเอกสารทั้งหมด ว่าจะให้มีลักษณะอย่างไร
การจัดรูปแบบเอกสาร
การกำหนดหัวข้อ (Heading)
คำอธิบาย
ใช้ในการกำหนดขนาดให้กับข้อความที่เป็นหัวข้อเรื่อง ในเอกสารที่มีหัวข้อเป็นปลีกย่อย สามารถแยกเป็นลำดับของหัวเรื่องได้อย่างชัดเจน
รูปแบบ
.....
ตัวอย่าง


Education Technology


Test Heading if x=1


Test Heading if x=2


Test Heading if x=3


Test heading if x=4


Test heading if x=5

Test heading if x=6



การกำหนดจุดสิ้นสุดบรรทัด (Break Rule)
คำอธิบาย
ใช้ในการกำหนดจุดสิ้นสุดบรรทัด และขึ้นบรรทัดใหม่ คำสั่งนี้เหมือนการกด Enter บน keyboard นั่นเอง
รูปแบบ
.....

ตัวอย่าง


Break Rule Tag


Test Normal Message
Test Normal Message
Test Break Rule Tag

Test Break Rule Tag



การขึ้นย่อหน้าใหม่ (Paragraph)
คำอธิบาย
ใช้แสดงข้อความในลักษณะพารากราฟ หรือย่อหน้าในเว็บเพจ และยังสามารถใช้ในการขึ้นบรรทัดใหม่ครั้งละ 2 บรรทัด
รูปแบบ

...

...


ตัวอย่าง


Paragraph Tag


Test Normal Paragraph Tag


Test Right Paragraph Tag


Test Center Paragraph Tag


Test Left Paragraph Tag




แสดงข้อความแบบจัดกึ่งกลาง (Center)
คำอธิบาย
ใช้แสดงข้อความหรือรูปภาพใช้จัดกึ่งกลางเว็บเพจ
รูปแบบ
...

ตัวอย่าง


Paragraph Tag


Test Normal Message
Test Center Message



การกำหนดตัวอักษร
การกำหนดรูปแบบตัวอักษร (Font)
คำอธิบาย
ใช้กำหนดรูปแบบตัวอักษร ในข้อความที่อยู่ภายใน เช่น ฟอนต์ สี และ ขนาดตัวอักษร รูปแบบ
..... กำหนดแบบอักษร ..... กำหนดขนาดอักษร ..... กำหนดสีอักษร
ตัวอย่าง


Font Tag


Font Tag

Font Tag

Font Tag

Font Tag

Font Tag

Font Tag



การกำหนดข้อความแบบตัวหนา (Bold)
คำอธิบาย
ใช้กำหนดข้อความที่อยู่ภายใจคำสั่งให้แสดงผลด้วยตัวอักษร ตัวหนา โดยมีจุดประสงค์ก็เพื่อเน้นข้อความในประโยคนั้นๆ
รูปแบบ
....
ตัวอย่าง


Bold Tag



Normal Text

Bold Text



การกำหนดข้อความแบบตัวเอียง (Italic)
คำอธิบาย
ใช้กำหนดข้อความให้ตัวอักษรเอน โดยมีจุดประสงค์เพื่อเน้นข้อความนั้นๆ
รูปแบบ
...
ตัวอย่าง


Italic Tag



Normal Text

ItalicText



การกำหนดข้อความขีดเส้นใต้ (Underline)
คำอธิบาย
ใช้แสดงความแบบขีดเส้นใต้ เพื่อเน้นข้อความในประโยคนั้นๆ
รูปแบบ
...
ตัวอย่าง


Underline Tag



Normal Text

Underline Text



การกำหนดสีพื้นหลัง
การใส่สีพื้นหลัง
คำอธิบาย
ใช้แสดงความพื้นหลังให้เป็นสี
รูปแบบ
<… bgcolor>
ตัวอย่าง


Image Tags




การโชว์รูป
การแสดงรูปหน้าเว็บเพจ
คำอธิบาย
ใช้ในการแสดงรูปภาพกราฟฟิก โดยจะต้องเป็นไฟล์กราฟฟิกที่เว็บบราวเซอร์รู้จัก เช่น GIF,JPEG,XPM,XBM เป็นต้น
รูปแบบ

หมายเหตุ : “…….” หมายถึง “ชื่อFolderที่ใช้เก็บรูปภาพ / ชื่อรูปภาพและนามสกุลของรูปภาพ”
ตัวอย่าง


ยินดีต้อนรับสู่เว็บไซต์ของฉัน





@@@@@@@
แนะนำก่อนเขียนภาษา HTMLสิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจ หรือ โฮมเพจ ได้นั้น ต้อง เช็ค ความพร้อม ของอุปกรณ์ เครื่องมือ สำหรับการ สร้าง ก่อนว่า มีครบหรือไม่1. เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ pentium ขึ้นไป2. หน่วยความจำไม่น้อยกว่า 8 MB3. พื้นที่ฮาร์ดดิสต์ขนาดไม่น้อยกว่า 20 MB4. Mouse5. โปรแกรม Internet Explorer Version 3.0 ขึ้นไป6. โปรแกรม Netscape Navigator Version 3.0 ขึ้นไป7. โปรแกรม Notepadโปรแกรมทุกตัวต้องติดตั้งลงในฮาร์ดดิสต์เรียบร้อยและอยู่ในสภาพที่พร้อมจะใช้งานได้ตลอดเวลา ไฟล์ของโปรแกรม HTML เป็นแท็กซ์ ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง เบราเซอร์ และถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรม Notepad นี้เป็นตัวแก้ไขได้เลยโครงสร้างพื้นฐานของ HTMLโครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้ ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว คำสั่งหรือข้อความที่ต้องการให้แสดงการจัดโครงสร้างแฟ้มเอกสารในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะ ว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้นยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้นการแสดงผลที่เว็บเบราเซอร์หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมาย น้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้น ๆ เช่น คำสั่ง จะมี เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันทีคำสั่งเริ่มต้นสำหรับ HTMLคำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไรคำสั่งเริ่มต้นรูปแบบ .....คำสั่ง เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascalคำสั่งการทำหมายเหตุรูปแบบ ตัวอย่าง ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพส่วนหัวรูปแบบ .....ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ กำหนดข้อความในไตเติลบาร์รูปแบบ <title>.....ตัวอย่าง บทเรียน HTML เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไรส่วนของเนื้อหารูปแบบ .....ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง และจบลงด้วย ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ การเติมสีสันให้เอกสารผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำบนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจสีรหัสสีขาว#FFFFFFดำ#000000เทา#BBBBBBแดง#FF0000เขียว#00FF00น้ำเงิน#0000FFในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อ สีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุนAQUABULEGRAYLIMENAVYPURPLESILVERWHITE (สีขาว)BLACKFUCHSIAGREENMAROONOLTVEREDTEALYELLOWสีของพื้นฉากหลังรูปแบบ BGCOLOR=#สีที่ต้องการตัวอย่าง เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลังสีของตัวอักษรบนเว็บรูปแบบ Text=#รหัสสีตัวอย่าง เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอดสีของตัวอักษรเฉพาะที่รูปแบบ ...ตัวอย่าง สีแดงคำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น สีแดงตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันทีสีของตัวอักษรที่เป็นจุดคลิกเมาส์รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"ตัวอย่าง กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้LINK = สีของตัวอักษรก่อนมีการคลิกALIGN = สีของตัวอักษรขณะถูกคลิกVLINK = สีของอักษรหลังจากคลิกแล้วรูปแบบ ของตัวอักษรในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษระต่าง ๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้นหัวเรื่องรูปแบบ ข้อความตัวอย่าง

หัวข้อใหญ่สุด

ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง ....ขนาดตัวอักษรรูปแบบ ข้อความตัวอย่าง Bcoms.netเราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7ตัวหนา (Bold)รูปแบบ ข้อความตัวอย่าง Bcoms.netจะทำให้ข้อความที่อยู่ใน .... มีความหนาเกิดขึ้นตัวเอน (Itatic)รูปแบบ ข้อความตัวอย่าง Bcoms.netทำให้ข้อความที่อยู่ใน.... เกิดเป็นตัวเอนขึ้นตัวขีดเส้นใต้ (Underline)รูปแบบ ข้อความตัวอย่าง Bcoms.netทำให้ข้อความที่อยู่ใน ..... มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้นตัวอักษรมีขนาดคงที่ (Typewriter text)รูปแบบ ข้อมความตัวอย่าง Bcoms.netทำให้ ข้อความ ที่อยู่ใน..... มีลักษณะเป็น fixed space เกิดขึ้นแบบของตัวอักษรรูปแบบ ข้อความc Bcoms.netFont name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น Bcoms.net และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)ขนาด Font ทั้งเอกสารรูปแบบ Basefont size="X">ตัวอย่าง เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)ตัวอักษรแบบพิเศษรูปแบบ< แทนด้วย <> แทนด้วย >& แทนด้วย &" แทนด้วย "เว้นวรรค แทนด้วย &nbspแนะนำก่อนเขียนภาษา HTMLสิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจ หรือ โฮมเพจ ได้นั้น ต้อง เช็ค ความพร้อม ของอุปกรณ์ เครื่องมือ สำหรับการ สร้าง ก่อนว่า มีครบหรือไม่1. เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ pentium ขึ้นไป2. หน่วยความจำไม่น้อยกว่า 8 MB3. พื้นที่ฮาร์ดดิสต์ขนาดไม่น้อยกว่า 20 MB4. Mouse5. โปรแกรม Internet Explorer Version 3.0 ขึ้นไป6. โปรแกรม Netscape Navigator Version 3.0 ขึ้นไป7. โปรแกรม Notepadโปรแกรมทุกตัวต้องติดตั้งลงในฮาร์ดดิสต์เรียบร้อยและอยู่ในสภาพที่พร้อมจะใช้งานได้ตลอดเวลา ไฟล์ของโปรแกรม HTML เป็นแท็กซ์ ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง เบราเซอร์ และถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรม Notepad นี้เป็นตัวแก้ไขได้เลยโครงสร้างพื้นฐานของ HTMLโครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้ ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว คำสั่งหรือข้อความที่ต้องการให้แสดงการจัดโครงสร้างแฟ้มเอกสารในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะ ว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้นยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้นการแสดงผลที่เว็บเบราเซอร์หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมาย น้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้น ๆ เช่น คำสั่ง จะมี เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันทีคำสั่งเริ่มต้นสำหรับ HTMLคำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไรคำสั่งเริ่มต้นรูปแบบ .....คำสั่ง เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascalคำสั่งการทำหมายเหตุรูปแบบ ตัวอย่าง ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพส่วนหัวรูปแบบ .....ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ กำหนดข้อความในไตเติลบาร์รูปแบบ <title>.....ตัวอย่าง บทเรียน HTML เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไรส่วนของเนื้อหารูปแบบ .....ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง และจบลงด้วย ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ การเติมสีสันให้เอกสารผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำบนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจสีรหัสสีขาว#FFFFFFดำ#000000เทา#BBBBBBแดง#FF0000เขียว#00FF00น้ำเงิน#0000FFในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อ สีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุนAQUABULEGRAYLIMENAVYPURPLESILVERWHITE (สีขาว)BLACKFUCHSIAGREENMAROONOLTVEREDTEALYELLOWสีของพื้นฉากหลังรูปแบบ BGCOLOR=#สีที่ต้องการตัวอย่าง เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลังสีของตัวอักษรบนเว็บรูปแบบ Text=#รหัสสีตัวอย่าง เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอดสีของตัวอักษรเฉพาะที่รูปแบบ ...ตัวอย่าง สีแดงคำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น สีแดงตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันทีสีของตัวอักษรที่เป็นจุดคลิกเมาส์รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"ตัวอย่าง กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้LINK = สีของตัวอักษรก่อนมีการคลิกALIGN = สีของตัวอักษรขณะถูกคลิกVLINK = สีของอักษรหลังจากคลิกแล้วรูปแบบ ของตัวอักษรในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษระต่าง ๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้นหัวเรื่องรูปแบบ ข้อความตัวอย่าง

หัวข้อใหญ่สุด

ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง ....ขนาดตัวอักษรรูปแบบ ข้อความตัวอย่าง Bcoms.netเราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7ตัวหนา (Bold)รูปแบบ ข้อความตัวอย่าง Bcoms.netจะทำให้ข้อความที่อยู่ใน .... มีความหนาเกิดขึ้นตัวเอน (Itatic)รูปแบบ ข้อความตัวอย่าง Bcoms.netทำให้ข้อความที่อยู่ใน.... เกิดเป็นตัวเอนขึ้นตัวขีดเส้นใต้ (Underline)รูปแบบ ข้อความตัวอย่าง Bcoms.netทำให้ข้อความที่อยู่ใน ..... มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้นตัวอักษรมีขนาดคงที่ (Typewriter text)รูปแบบ ข้อมความตัวอย่าง Bcoms.netทำให้ ข้อความ ที่อยู่ใน..... มีลักษณะเป็น fixed space เกิดขึ้นแบบของตัวอักษรรูปแบบ ข้อความc Bcoms.netFont name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น Bcoms.net และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)ขนาด Font ทั้งเอกสารรูปแบบ Basefont size="X">ตัวอย่าง เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)ตัวอักษรแบบพิเศษรูปแบบ< แทนด้วย <> แทนด้วย >& แทนด้วย &" แทนด้วย "เว้นวรรค แทนด้วย &nbspแนะนำก่อนเขียนภาษา HTMLสิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจก่อนที่จะลงมือเขียนโปรแกรมภาษา HTML เพื่อสร้างเว็บเพจ หรือ โฮมเพจ ได้นั้น ต้อง เช็ค ความพร้อม ของอุปกรณ์ เครื่องมือ สำหรับการ สร้าง ก่อนว่า มีครบหรือไม่1. เครื่องคอมพิวเตอร์ ขนาดตั้งแต่ 486 หรือ pentium ขึ้นไป2. หน่วยความจำไม่น้อยกว่า 8 MB3. พื้นที่ฮาร์ดดิสต์ขนาดไม่น้อยกว่า 20 MB4. Mouse5. โปรแกรม Internet Explorer Version 3.0 ขึ้นไป6. โปรแกรม Netscape Navigator Version 3.0 ขึ้นไป7. โปรแกรม Notepadโปรแกรมทุกตัวต้องติดตั้งลงในฮาร์ดดิสต์เรียบร้อยและอยู่ในสภาพที่พร้อมจะใช้งานได้ตลอดเวลา ไฟล์ของโปรแกรม HTML เป็นแท็กซ์ ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง เบราเซอร์ และถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรม Notepad นี้เป็นตัวแก้ไขได้เลยโครงสร้างพื้นฐานของ HTMLโครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้ ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว คำสั่งหรือข้อความที่ต้องการให้แสดงการจัดโครงสร้างแฟ้มเอกสารในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะ ว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้นยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้นการแสดงผลที่เว็บเบราเซอร์หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htm หรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมาย น้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้น ๆ เช่น คำสั่ง จะมี เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันทีคำสั่งเริ่มต้นสำหรับ HTMLคำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไรคำสั่งเริ่มต้นรูปแบบ .....คำสั่ง เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascalคำสั่งการทำหมายเหตุรูปแบบ ตัวอย่าง ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพส่วนหัวรูปแบบ .....ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ กำหนดข้อความในไตเติลบาร์รูปแบบ <title>.....ตัวอย่าง บทเรียน HTML เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไรส่วนของเนื้อหารูปแบบ .....ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง และจบลงด้วย ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ การเติมสีสันให้เอกสารผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำบนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจสีรหัสสีขาว#FFFFFFดำ#000000เทา#BBBBBBแดง#FF0000เขียว#00FF00น้ำเงิน#0000FFในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อ สีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุนAQUABULEGRAYLIMENAVYPURPLESILVERWHITE (สีขาว)BLACKFUCHSIAGREENMAROONOLTVEREDTEALYELLOWสีของพื้นฉากหลังรูปแบบ BGCOLOR=#สีที่ต้องการตัวอย่าง เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลังสีของตัวอักษรบนเว็บรูปแบบ Text=#รหัสสีตัวอย่าง เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอดสีของตัวอักษรเฉพาะที่รูปแบบ ...ตัวอย่าง สีแดงคำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น สีแดงตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันทีสีของตัวอักษรที่เป็นจุดคลิกเมาส์รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"ตัวอย่าง กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้LINK = สีของตัวอักษรก่อนมีการคลิกALIGN = สีของตัวอักษรขณะถูกคลิกVLINK = สีของอักษรหลังจากคลิกแล้วรูปแบบ ของตัวอักษรในบทนี้ เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษระต่าง ๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้นหัวเรื่องรูปแบบ ข้อความตัวอย่าง

หัวข้อใหญ่สุด

ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง ....ขนาดตัวอักษรรูปแบบ ข้อความตัวอย่าง Bcoms.netเราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7ตัวหนา (Bold)รูปแบบ ข้อความตัวอย่าง Bcoms.netจะทำให้ข้อความที่อยู่ใน .... มีความหนาเกิดขึ้นตัวเอน (Itatic)รูปแบบ ข้อความตัวอย่าง Bcoms.netทำให้ข้อความที่อยู่ใน.... เกิดเป็นตัวเอนขึ้นตัวขีดเส้นใต้ (Underline)รูปแบบ ข้อความตัวอย่าง Bcoms.netทำให้ข้อความที่อยู่ใน ..... มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้นตัวอักษรมีขนาดคงที่ (Typewriter text)รูปแบบ ข้อมความตัวอย่าง Bcoms.netทำให้ ข้อความ ที่อยู่ใน..... มีลักษณะเป็น fixed space เกิดขึ้นแบบของตัวอักษรรูปแบบ ข้อความc Bcoms.netFont name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น Bcoms.net และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)ขนาด Font ทั้งเอกสารรูปแบบ Basefont size="X">ตัวอย่าง เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)ตัวอักษรแบบพิเศษรูปแบบ< แทนด้วย <> แทนด้วย >& แทนด้วย &" แทนด้วย "เว้นวรรค แทนด้วย &nbsp
คำถาม คำตอบ
1.รหัสสี แดง มีรหัสอะไรบ้าง
ก.#FF0000
ข.#FF0002
ค.#FF0003
ง.#FF0004
เฉลย ก.#FF0000
2. ตัวเอน เราใช้ตัวไหนแทนตัวเอน
ก. I
ข. J
ค. L
ง. ตัวไหนก็ได้
เฉลย ก. I
3. ตัวแบบตัวเอนของ ภาษา Html แบบใมด
ก. รูปแบบ ข้อความ
ข.รูปแบบ ข้อความ
ค.รูปแบบ ข้อความ
ง.รูปแบบ ข้อความ
เฉลย ง.รูปแบบ ข้อความ
4. คำสั่งเริ่มต้น ของภาษา HTML แบบใด
ก. .....
ข......
ค......
ง......
เฉลย ค......
5.ส่วนของเนื้อหา ของภาษา HTML แบบใด
ก. .....
ข......
ค......
ง......
เฉลย ง......
6. รหัสสีเขียว รหัสใด
ก. #00FF0002
ข.#00FF00
ค.#00FF00001
ง.#00FF00009
เฉลย ข.#00FF00
7. สีของตัวอักษรบนเว็บ แบบใด
ก.
ข.
ค.
ง.
เฉลย ง.
8. สีของตัวอักษรเฉพาะที่ ใช้แบบใด
ก....
ข....
ค....
ง.< color="#สีที่ต้องการ">...

เฉลย ก....
9. อะไรเป็นการช่วย ภาษาHTML
ก. EditPlus
ข. Edit
ค.Plus
ง.อะไรก็ได้
เฉลย ก. EditPlus
10. (Body) เป็นส่วนอะไรใน Html
ก. ส่วนหัว
ข.ส่วนท้าย
ค.ส่วนกลาง
ง.ส่วนเนื้อหา
เฉลย ง.ส่วนเนื้อหา
11. ในภาษา HTML คำสั่งใดต้องเขียนเป็นคำสั่งในบรรทัดแรก
ก.
ข.
ค. <br />ง.<body> <br />เฉลย ข.<html> <br />12.ในภาษา HTML คำสั่งใดต้องเขียนเป็นคำสั่งในบรรทัดสุดท้าย <br />ก.<head> <br />ข.</body> <br />ค.
ง.
เฉลย ง.
13. ในการบันทึกข้อมูลเพื่อให้แสดงเป็นหน้าเว็บเพจ จะต้องบันทึกเป็นนามสกุลใด
ก.doc
ข.txt
ค.xls
ง.html
เฉลย ง.html
14. HTML ย่อมาจากอะไร
ก.Homepage Text Markup Language
ข.Hypertext Manual Language
ค.Home Text Markup Language
ง.Hyper Text Markup Language
เฉลย ก.Homepage Text Markup Language
15.ข้อใดไม่ใช่คำสั่งหลักของโครงสร้างภาษา HTML
ก.
ข.
ค. <br />ง.<end> <br />เฉลย ง.<end> <br /> <br /><strong></strong> <br /> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> เขียนโดย <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/01360224519052453552' itemprop='url'/> <a class='g-profile' href='https://www.blogger.com/profile/01360224519052453552' rel='author' title='author profile'> <span itemprop='name'>วิมลรัตน์</span> </a> </span> </span> <span class='post-timestamp'> ที่ <meta content='http://wimonrat38.blogspot.com/2008/09/html.html' itemprop='url'/> <a class='timestamp-link' href='http://wimonrat38.blogspot.com/2008/09/html.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2008-09-01T23:42:00-07:00'>23:42</abbr></a> </span> <span class='post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-1440161074'> <a href='https://www.blogger.com/post-edit.g?blogID=3149623957169751654&postID=2727549176553976465&from=pencil' title='แก้ไขบทความ'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'> <span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'> <span class='post-location'> </span> </div> </div> </div> <div class='comments' id='comments'> <a name='comments'></a> <h4>ไม่มีความคิดเห็น:</h4> <div id='Blog1_comments-block-wrapper'> <dl class='avatar-comment-indent' id='comments-block'> </dl> </div> <p class='comment-footer'> <a href='https://www.blogger.com/comment.g?blogID=3149623957169751654&postID=2727549176553976465' onclick=''>แสดงความคิดเห็น</a> </p> </div> </div> </div></div> </div> <div class='blog-pager' id='blog-pager'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' href='http://wimonrat38.blogspot.com/2008/09/blog-post.html' id='Blog1_blog-pager-newer-link' title='บทความใหม่กว่า'>บทความใหม่กว่า</a> </span> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' href='http://wimonrat38.blogspot.com/2008/06/blog-post.html' id='Blog1_blog-pager-older-link' title='บทความที่เก่ากว่า'>บทความที่เก่ากว่า</a> </span> <a class='home-link' href='http://wimonrat38.blogspot.com/'>หน้าแรก</a> </div> <div class='clear'></div> <div class='post-feeds'> <div class='feed-links'> สมัครสมาชิก: <a class='feed-link' href='http://wimonrat38.blogspot.com/feeds/2727549176553976465/comments/default' target='_blank' type='application/atom+xml'>ส่งความคิดเห็น (Atom)</a> </div> </div> </div></div> </div> <div id='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>คลังบทความของบล็อก</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://wimonrat38.blogspot.com/2008/'> 2008 </a> <span class='post-count' dir='ltr'>(12)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://wimonrat38.blogspot.com/2008/09/'> กันยายน </a> <span class='post-count' dir='ltr'>(10)</span> <ul class='posts'> <li><a href='http://wimonrat38.blogspot.com/2008/09/blog-post_07.html'>ข้อสอบ</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/excel.html'>สูตรการใช้โปรแกรม Excel</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/5-google.html'>ข้อสอบ 5 ข้อ ของGoogle</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/blog-post_06.html'>พิมพ์สัมผัส ฟหกด่าสว</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/15-html.html'>ข้อสอบ 15 ข้อ ของHTML</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/html_06.html'>ความหมายของ HTML</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/google.html'>ประวัติ Google</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/30.html'>ข้อสอบคอมพิวเตอร์เบื้องต้น 30ข้อ</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/blog-post.html'>แนะนำตัวเอง</a></li> <li><a href='http://wimonrat38.blogspot.com/2008/09/html.html'>ภาษาHTML</a></li> </ul> </li> </ul> <ul class='hierarchy'> <li class='archivedate collapsed'> <a class='toggle' href='javascript:void(0)'> <span class='zippy'> ►  </span> </a> <a class='post-count-link' href='http://wimonrat38.blogspot.com/2008/06/'> มิถุนายน </a> <span class='post-count' dir='ltr'>(2)</span> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div><div class='widget Profile' data-version='1' id='Profile1'> <h2>เกี่ยวกับฉัน</h2> <div class='widget-content'> <a href='https://www.blogger.com/profile/01360224519052453552'><img alt='รูปภาพของฉัน' class='profile-img' height='80' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkfYMYR0GzTuUvPNm_PaX494WqexsSUsz_iTHI2B5ESsDCWooJ4UMGD0veOYFBxeRb_vHoPfIS4-9nw_k3z8FOw3iDg--rTBdaWWMxJVrjOxq478irWtGOEbb6XfdCw/s220/DSC00324.JPG' width='60'/></a> <dl class='profile-datablock'> <dt class='profile-data'> <a class='profile-name-link g-profile' href='https://www.blogger.com/profile/01360224519052453552' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'> วิมลรัตน์ </a> </dt> </dl> <a class='profile-link' href='https://www.blogger.com/profile/01360224519052453552' rel='author'>ดูโปรไฟล์ทั้งหมดของฉัน</a> <div class='clear'></div> </div> </div></div> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <div class='footer no-items section' id='footer'></div> </div> </div></div> <!-- end outer-wrapper --> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1807328581-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY5s9_SiszYMNTolH4qhScXoNf1qJQ:1714030732174';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3149623957169751654','//wimonrat38.blogspot.com/2008/09/html.html','3149623957169751654'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3149623957169751654', 'title': 'wimonrat75@hotmail.com', 'url': 'http://wimonrat38.blogspot.com/2008/09/html.html', 'canonicalUrl': 'http://wimonrat38.blogspot.com/2008/09/html.html', 'homepageUrl': 'http://wimonrat38.blogspot.com/', 'searchUrl': 'http://wimonrat38.blogspot.com/search', 'canonicalHomepageUrl': 'http://wimonrat38.blogspot.com/', 'blogspotFaviconUrl': 'http://wimonrat38.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'th', 'localeUnderscoreDelimited': 'th', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22wimonrat75@hotmail.com - Atom\x22 href\x3d\x22http://wimonrat38.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22wimonrat75@hotmail.com - RSS\x22 href\x3d\x22http://wimonrat38.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22wimonrat75@hotmail.com - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3149623957169751654/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22wimonrat75@hotmail.com - Atom\x22 href\x3d\x22http://wimonrat38.blogspot.com/feeds/2727549176553976465/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/111cb1309c0430aa', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': '\u0e23\u0e31\u0e1a\u0e25\u0e34\u0e07\u0e01\u0e4c', 'key': 'link', 'shareMessage': '\u0e23\u0e31\u0e1a\u0e25\u0e34\u0e07\u0e01\u0e4c', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': '\u0e41\u0e0a\u0e23\u0e4c\u0e43\u0e19 Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': '\u0e41\u0e0a\u0e23\u0e4c\u0e43\u0e19 Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': '\u0e41\u0e0a\u0e23\u0e4c\u0e43\u0e19 Pinterest', 'target': 'pinterest'}, {'name': '\u0e2d\u0e35\u0e40\u0e21\u0e25', 'key': 'email', 'shareMessage': '\u0e2d\u0e35\u0e40\u0e21\u0e25', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27th\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': '\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21', 'pageType': 'item', 'postId': '2727549176553976465', 'postImageUrl': '\u2026\u2026.', 'pageName': '\u0e20\u0e32\u0e29\u0e32HTML', 'pageTitle': 'wimonrat75@hotmail.com: \u0e20\u0e32\u0e29\u0e32HTML'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': '\u0e41\u0e01\u0e49\u0e44\u0e02', 'linkCopiedToClipboard': '\u0e04\u0e31\u0e14\u0e25\u0e2d\u0e01\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e04\u0e25\u0e34\u0e1b\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e41\u0e25\u0e49\u0e27', 'ok': '\u0e15\u0e01\u0e25\u0e07', 'postLink': '\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c'}}, {'name': 'template', 'data': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': '\u0e20\u0e32\u0e29\u0e32HTML', 'description': '\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19\u0e20\u0e32\u0e29\u0e32 HTML \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\r \u0e14\u0e49\u0e27\u0e22 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21 Notepad \u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08\r \u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07 HTML\r \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e17\u0e35\u0e48\u0e40\u0e2b\u0e47\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e41\u0e1a\u0e1a\u0e21\u0e32...', 'featuredImage': 'https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tkWSslu6QSI5YgvwSj3ggjizcVtzJ2UWfgeTZ9p-nvOH7YTtA3lP8rIRoLCEHpIg', 'url': 'http://wimonrat38.blogspot.com/2008/09/html.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2727549176553976465}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1378247462-lbx__th.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull')); </script> </body> </html>