ภาษา HTML

**************

โลกธุรกิจบนอินเทอร์เน็ตเริ่มขึ้นเมื่อเกิดเครือข่ายหลัก NFSNET โดยหน่วยงานมูลนิธิวิทยาศาสตร์แห่งชาติ National Science Foundation (NFS) ทำให้เกิดการแผ่ขยายเครือข่ายอินเทอร์เน็ต ออกไปสู่บุคคลในวงการศึกษา และมีจำนวนกว้างขวางออกไปอีกเมื่อ NFS ไม่สามารถขยายงานการเป็นเครือข่ายหลักหรือ Backbone ได้อีกต่อไป เนื่องจากข้อจำกัดในด้านงบประมาณ ในขณะที่ความต้องการที่จะขยายงานอินเทอร์เน็ตเชิงพาณิชย์สูงขึ้น จึงได้มีการรวมตัวในการสร้าง Backbone ใหม่เพื่อตอบสนองความต้องการอันนี้ คือ CIX หรือ Commercial Internet Exchange จึงเกิดขึ้น โดยความร่วมมือระหว่าง NERIT IBN NCI ตั้งบริษัท Advanced Network and Service Inc.(ANC)ขึ้น ทำให้เกิดการใช้อินเทอร์เน็ตเชิงพาณิชย์อย่างสมบูรณ์

อินเทอร์เน็ต เกิดจากการเชื่อมต่อระหว่างเครือข่ายหลายเครือข่ายต่อกันและทำงานอย่างเป็นอันหนึ่งอันเดียวกัน อินเทอร์เน็ตเกิดขึ้นเพื่อตอบสนองโลกของข้อมูลข่าวสารที่นับวันยิ่งมากมายกว้างขวางขึ้น ความต้องการใช้ข้อมูลอย่างไม่จำกัดและรวดเร็วเพื่อนำมาใช้ในการตัดสินใจในเรื่องต่าง ๆ ทวีความสำคัญมากขึ้น

Word Wide Web

เวิลด์ไวด์เว็บ เป็นอนุเครือข่ายของอินเทอร์เน็ตที่เกิดขึ้นโดย Tim Berner-Lee ในปี ค.ศ. 1989 โดยมีแนวคิดของการสร้างเครือข่ายเวิลด์ไวด์เว็บ เพื่อรวบรวมข้อมูลข่าวสาร ที่มีอยู่อย่างมหาศาลในอินเทอร์เน็ตให้เป็นกลุ่มและสามารถเชื่อมโยงถึงกันได้ โดยอาศัยเทคโนโลยีที่เรียกว่า ไฮเปอร์เท็กซ์ (Hypertext) และไฮเปอร์มีเดียที่ทำการเชื่อมโยง (Links) ข้อความหรือ รูปภาพเข้ากับเอกสารอื่น ๆ อย่างเป็นอิสระต่อกัน ภาพหรือข้อความที่แสดงบนหน้าจอจะแสดงได้ทีละหน้า ซึ่งเรียกว่า เพจ (Page) หรืออาจมีการเชื่อมโยงด้วยการลิงค์(Link) เพื่อค้นหาข้อมูลจากอีกเพจหนึ่งที่อยู่ห่างออกไปไกล ๆ ก็ได้ โดยแต่ละหน้าจอรวมกันทั้งหมดเรียกว่า โฮมเพจ (Home Page)

ในระบบเว็บจะประกอบไปด้วยเครื่องที่ให้บริการข้อมูล (Web Server) หรืออาจจะเรียกว่า เว็บไซต์ (Web Site) กับเครื่องรับข้อมูล (Web Client) โดยที่เว็บไซด์แต่ละที่จะต้องเชื่อมต่ออยู่กับผู้ให้บริการอินเทอร์เน็ต (Internet Service Provider) ที่จะจัดเตรียมข้อมูลในรูปแบบไฮเปอร์เท็กซ์เอาไว้ ซึ่งในปัจจุบันนิยมใช้ภาษามาตรฐานเรียกว่า HTML (Hyper text Markup Language) ที่ประกอบไปด้วยไฟล์ข้อความที่บรรจุคำสั่งในการทำงานไว้ภายใน และเมื่อผู้ใช้ต้องการติดต่อกับเวิลด์ไวด์เว็บเพียงแค่ซอฟต์แวร์ที่เรียกว่า เว็บบราวเซอร์ (Web Browser) หรือบริการออนไลน์และอุปกรณ์ หรือที่เรียกว่า โมเด็ม เพื่อติดต่อไปยังศูนย์บริการข้อมูลหรือเซิร์ฟเวอร์ จากนั้นชี้แล้วคลิกเลือกข้อมูลที่เราต้องการค้นหา โดยเจ้าโปรแกรมเว็บบราวเซอร์ของเราจะเป็นตัวที่แปลงสัญญาณคำสั่ง และแสดงผลเป็นข้อความ รูปภาพ เสียง ซึ่งเป็นข้อมูลที่ผู้ใช้ต้องการ และข้อมูลจะถูกดาวน์โหลดมายังคอมพิวเตอร์ของผู้ใช้เพื่อศึกษาข้อมูลต่อไปนี้ เพราะความง่าย และสะดวกต่อผู้ใช้งาน จึงทำให้อินเทอร์เน็ตได้รับความนิยมอย่างรวดเร็วและมีผู้เข้าใช้บริการอย่างมากมาย

HTML

HTML ย่อมากจาก Hyper Text Markup Language เป็นภาษาที่ใช้ในการพัฒนาเว็บเพจเพื่อให้โปรแกรมเว็บบราวเซอร์ (Web Browser) ต่าง ๆ สามารถแปลงคำสั่งและแสดงผลเป็นรูปภาพ เสียง หรือข้อมูลได้ มีโปรแกรมเว็บบราวเซอร์มากกว่า 10 โปรแกรมที่สามารถอ่านหรือเข้าใจในภาษา HTML ซึ่งเป็นข้อความ (Text) ที่เป็นรหัสแอสกี้ (ASCII) ธรรมดา ๆ กับรหัสที่อยู่ในเครื่องหมาย <> และมีนามสกุลเป็น .html โดยเมื่อเราเปิดโปรแกรมเว็บบราวเซอร์ เราจะไม่สามารถพบรหัสเหล่านี้ได้เลยบนจอภาพ แต่รหัสเหล่านี้จะเป็นคำสั่งที่บอกรหัสเหล่านี้จะเป็นคำสั่งบอกโปรแกรมเว็บบราวเซอร์ของเราว่า รูปแบบของข้อความเป็นอย่างไร ตัวหนา หรือ หัวข้อต่าง ๆ จะต้องมีการโหลดรูปภาพกราฟิกหรือไม่ รวมไปถึงการสร้างจุดเชื่อมโยงหรือลิงค์ (Link) ที่เชื่อมโยงต่อไปยังเว็บเพจอื่น ๆ

สำหรับการสร้างไฟล์ HTML จะต้องอาศัยโปรแกรมที่มีคุณสมบัติเป็นเท็กซ์อิดิเทอร์ (Text Editor) หรืออาจเป็นโปรแกรมประเภทเวิร์ดโพรเซสเซอร์ (Word Processor) โดยเราจะใช้โปรแกรมเหล่านี้สำหรับเขียนคำสั่งต่าง ๆ หรือรายละเอียดของข้อมูลที่เราต้องการให้เสดงบนจอภาพ และเก็บไฟล์โดยจะต้องมีนามสกุลเป็น .html จากนั้นก็ทดสอบไฟล์ในโปรแกรมเว็บบราวเซอร์ต่อไป

HTML เบื้องต้น

การเขียนภาษา HTML ในที่นี้นั้นจะสะดวกมากถ้าโปรแกรมที่มี คุณสมบัติเป็น Text Editor เช่น Note Editor, Word Pad, Notepad ฯลฯ ท่านก็สามารถเขียนไฟล์ HTML ได้แล้วโดยเมื่อท่านเขียนคำสั่งต่างๆ และรายละเอียดของข้อมูลที่จะนำเสนอแล้วท่านก็เพียงแต่บันทึกเป็นไฟล์ที่มีนามสกุลเป็น “.html หรือ .htm” และเมื่อเขียนคำสั่งต่างๆ แล้วก็สามารถตรวจสอบดูความผิดพลาดและทำการแก้ไขได้จากโปรแกรมค้นดู (Web Browser) ต่างๆ เช่น Internet Explorer, Netcape Navigator, Opera ฯลฯ

วิธีเปิดโฮมเพจที่ท่านเขียน

โดยปกติ Web Browser ที่ใช้กันอยู่โดยทั่วไปจะเป็น Netscape และ Explorer ซึ่งก็มีวิธีการเปิดดูที่คล้าย ๆ กันคือ

1. Netscape Navigator

เปิดโปรแกรม Netscape และไปที่ File เลือก Open page คลิกที่ Choose File และเลือกชื่อไดเรกเทอรี่และไฟล์ที่คุณ Save ไว้กด Open

2. Internet Explorer

เปิดโปรแกรม Explorer และไปที่ File เลือก Open คลิกที่ Browse และเลือกชื่อไดเรกเทอรี่และไฟล์ที่คุณ Save ไว้กด Open

1. โครงสร้างพื้นฐานของ HTML

กิจกรรมที่ 1 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex01.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

<HTML>

<HEAD>

<TITLE> ชื่อหัวเรื่อง </TITLE>

</HEAD>

<BODY> ข้อมูลที่ต้องการแสดงผล

</BODY>

</HTML>

	จากคำสั่งภาษา HTML ข้างต้นเมื่อบันทึกเป็นไฟล์ สมมติว่าชื่อ ex01.html เมื่อเปิดจากโปรแกรม Browser แสดงได้ดังภาพที่ 1
ภาพที่ 1

โครงสร้างพื้นฐานของโปรแกรมภาษา Computer เป็นส่วนสำคัญที่สุด ของการเขียนภาษา Computer โดยทั่วไปและมันจะต้องถูกเขียนขึ้นทุกครั้ง ภาษา HTML ก็เหมือนกับภาษา Computer ทั่วๆ ไปที่มีโครงสร้างพื้นฐานเฉพาะของคำสั่งของ HTML ส่วนมากจะถูกกำหนดอยู่ในเครื่องหมาย <.....> ซึ่งถูกเรียกว่า Tag สำหรับในส่วนของคำสั่ง Tag ภายในคำสั่งโครงสร้างพื้นฐานพอที่จะอธิบายได้ดังนี้

ชื่อหัวเรื่อง

จะถูกกำหนดอยู่ภายใน Tag คำสั่ง <HEAD> <TITLE> ชื่อหัวเรื่อง </TITLE> </HEAD> ข้อมูลที่ถูกเขียนอยู่ภายใน Tag ภายในคำสั่งโครงสร้างพื้นฐานพอที่จะอธิบาย ได้ดังนี้

ข้อมูลที่ต้องการแสดงผล

จะเป็นส่วนที่แสดงให้เราเห็นไม่ว่าจะเป็น ตัวอักษร, รูปภาพ, ตาราง ฯลฯ ซึ่งถูกกำหนดอยู่ภายใน Tag <Body> ข้อมูลที่ต้องการแสดงผล </BODY>

กิจกรรมที่ 2 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex02.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างของการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> ชื่อหัวเรื่อง </TITLE>

</HEAD>

<BODY> ส่วนแสดงผลของภาษา HTML

</BODY>

</HTML>

การแสดงผล

ภาพที่ 2

คำสั่งที่มีเครื่องหมาย <….. > จะถูกเรียกว่า Tag เป็นคำสั่งที่ใช้ในการกำหนดการแสดงผลของ Browser ซึ่งคำสั่งของ HTML ส่วนมากแล้วคำสั่ง Tag จะถูกเปิดตัว <….> และปิดด้วย </….>

1.1 คำสั่ง Comment Tag

เป็นคำสั่งที่ใช้ในการอธิบายอยู่ภายใน HTML โปรแกรม Browser จะข้ามสิ่งที่อยู่ในเครื่องหมายนี้โดยไม่แสดงข้อผิดพลาด ใช้ประโยชน์เพื่อให้ผู้เขียนโปรแกรมได้สังเกตหรือจำในกรณีที่มีความซับซ้อนมากๆ สำหรับผู้ที่จะทำการแก้ไขโปรแกรมในภายหลัง

รูปแบบคำสั่ง

< !.... >

1.2 คำสั่งขึ้นบรรทัดใหม่

รูปแบบคำสั่ง

< BR >

เป็นคำสั่งที่สั่งให้ข้อมูลที่จะแสดงผลขึ้นบรรทัดใหม่ กล่าวคือเมื่อเราพิมพ์ข้อมูลอะไรลงไปใน Tag < BODY > ….. < /BODY > การแสดงผลของข้อมูล จะเรียงต่อกันไปเรื่อย ๆ แม้ว่าเราจะขึ้นบรรทัดใหม่ในการพิมพ์ข้อมูลในคำสั่ง Tag < BODY > ….. < /BODY >แล้วก็ตาม คำสั่ง < BR > จึงเป็นคำสั่งที่ช่วยให้เราบังคับให้ข้อมูลขึ้นบรรทัดใหม่ได้

กิจกรรมที่ 3 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex03.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> คำสั่งขึ้นบรรทัดใหม่ </TITLE>

</HEAD>

<BODY> คำสั่งให้เปลี่ยนบรรทัด <BR> ข้อความนี้อยู่บรรทัดใหม่

<! นี่คือ Comment โปรแกรม Browserจะไม่อ่านข้อความในเครื่องหมายนี้>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 3

1.3 คำสั่งการย่อหน้าใหม่

รูปแบบคำสั่ง

< P > …………..< /P > หรือ < P >

มีลักษณะคล้ายกับคำสั่ง < BR > แต่คำสั่งนี้จะมีการเว้นบรรทัดว่างให้หนึ่งบรรทัด เพราะบางครั้งเราต้องการเว้นบรรทัดว่างหนึ่งบรรทัด แต่โปรแกรม Web Browser จะไม่เข้าใจการพิมพ์บรรทัดเปล่า

กิจกรรมที่ 4 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex04.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> คำสั่งขึ้นบรรทัดใหม่ </TITLE>

</HEAD>

<BODY> คำสั่งให้เปลี่ยนบรรทัด <p> ข้อความนี้อยู่บรรทัดใหม่แต่เว้นว่าง 1 บรรทัด

<! นี่คือ Comment โปรแกรม Browserจะไม่อ่านข้อความในเครื่องหมายนี้>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 4

1.4 เส้นคั่นบรรทัด

รูปแบบคำสั่ง

< HR >

เป็นคำสั่งที่ใช้แบ่งข้อความของจอภาพให้เป็นส่วน ๆ

กิจกรรมที่ 5 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex05.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> ชื่อหัวเรื่อง </TITLE>

</HEAD>

<BODY> คำสั่งให้เปลี่ยนบรรทัด <p> ข้อความนี้อยู่บรรทัดใหม่แต่เว้นว่าง 1 บรรทัด

<! นี่คือ Comment โปรแกรม Browserจะไม่อ่านข้อความในเครื่องหมายนี้>

<HR>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 5

2. รูปแบบตัวอักษร

ในส่วนนี้จะเป็นส่วนที่ใช้ในการกำหนดรูปแบบตัวอักษรเช่น การกำหนดสี, การกำหนดขนาด, รูปแบบตัวอักษร ฯลฯ

2.1 การกำหนดหัวเรื่อง

เป็นส่วนของคำสั่ง Tag ที่เป็นตัวอักษรให้มีความหนาและขนาดตัวอักษรให้มีความแตกต่างจากอักษรปกติกล่าวคือเป็นส่วนที่จะทำให้หัวเรื่องมีความแตกต่างจากอักษรปกติเพราะหัวเรื่องจะต้องเป็นส่วนที่มีจุดเด่นมากที่สุดซึ่งคำสั่ง < Hx > จะมีขนาดของตัวอักษร อยู่ 6 ขนาด คือ ขนาดใหญ่สุด คือ <H1> (ใช้มาก) และเล็กที่สุดคือ <H6> (ใช้น้อย)

รูปแบบคำสั่ง

< Hx >………….< Hx >

โดยที่ x คือค่าตัวเลขตั้งแต่ 1 ถึง 6

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

กิจกรรมที่ 6 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex06.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การกำหนดหัวเรื่อง </TITLE>

</HEAD>

<BODY>

<H1> การกำหนดหัวเรื่อง H1 < /H1 >

<H2> การกำหนดหัวเรื่อง H2 < /H2 >

<H3> การกำหนดหัวเรื่อง H3 < /H3 >

<H4> การกำหนดหัวเรื่อง H4 < /H4 >

<H5> การกำหนดหัวเรื่อง H5 < /H5 >

<H6> การกำหนดหัวเรื่อง H6 < /H6 > นี่คือตัวอักษรปกติ

</BODY>

</HTML>

การแสดงผล

ภาพที่ 6

2.2 ขนาดตัวอักษร (Font size & Basefontsize)

คำสั่ง <BASEFONT SIZE>

เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรทั้งหมดในไฟล์ให้มีค่าตามที่เรากำหนด ซึ่งขนาดตัวอักษรมีได้ตั้งแต่ 1 ถึง 7 คือขนาด 1 เป็นขนาดเล็กที่สุด และขนาด 7 เป็นขนาดที่ใหญ่ที่สุด ซึ่งตรงข้ามกับขนาดของคำสั่ง <Hx> ปกติถ้าเราไม่กำหนดขนาดของ <BASEFONT SIZE> โปรแกรมจะกำหนดขนาดให้มีขนาดเป็น 3 เสมอ

รูปแบบคำสั่ง

<BASEFONT SIZE>

คำสั่ง <FONT SIZE>

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

กิจกรรมที่ 7 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex07.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

รูปแบบคำสั่ง

<FONT SIZE = “number”>…….</FONT>

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> ขนาดตัวอักษร (Fontsize & Basefontsize) </TITLE>

</HEAD>

<BODY>

<BASEFONT SIZE = “3”> ทดลองการกำหนดขนาด BASEFONT SIZE= “3”<BR>

<FONT SIZE= “+2”> ทดลองการกำหนดขนาด FONT SIZE= “+2”</FONT><BR>

<FONT SIZE= “-1”> ทดลองกำหนดขนาด FONT SIZE= “-1”</FONT><BR>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 7

การกำหนดรูปแบบตัวอักษร

ในที่นี้จะได้ทราบถึงการกำหนดรูปแบบตัวอักษรให้เป็น ตัวอักษรเอียง <I>, ตัวอักษรหนา <B> , และตัวอักษรมีเส้น <U>

รูปแบบคำสั่ง

<B>……..</B>

<I>………</I>

<U>…….</U>

กิจกรรมที่ 8 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex08.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การกำหนดรูปแบบตัวอักษร </TITLE>

</HEAD>

<BODY>

<B> ตัวอักษรตัวหนา</B ><Br>

<I> ตัวอักษรตัวเอียง</I ><Br>

<U> ตัวอักษรหนา</U ><Br>

<B><I><U> การใช้คำสั่งทั้ง 3 แบบพร้อมกัน </U></I></B><Br>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 8

2.3 ตัวอักษรกระพริบ

เป็นคำสั่งที่ใช้กำหนดตัวอักษรที่อยู่ใน Tag เกิดการกระพริบ ซึ่งคำสั่งนี้จะใช้ได้กับ Browser ของ Netscape เท่านั้น

รูปแบบคำสั่ง

<BLINK>………</BLINK>

กิจกรรมที่ 9 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex09.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> ตัวอักษรกระพริบ</TITLE>

</HEAD>

<BODY>

<BLANK> ตัวอักษรกระพริบ</BLINK>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 9

(แสดงได้เฉพาะใน Netcape Navigator)

2.4 การจัดวางตำแหน่งข้อความโดยใช้ ALIGN

เป็นคำสั่งที่ใช้ในการกำหนดให้รูปภาพตัวอักษรขึ้นบรรทัดใหม่ แล้วอยู่ ชิดซ้าย, ชิดขวา, กึ่งกลาง

รูปแบบคำสั่ง

<P ALINGN = “Left or Right or Center”>…..</P>

กิจกรรมที่ 10 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex10.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การจัดวางตำแหน่งข้อความ-โดยใช้ ALIGN </TITLE>

</HEAD>

<BODY>

<P ALIGN= “Left”>Left</P>

<P ALIGN= “Right”>Right</P>

<P ALIGN= “Center”>Center</P>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 10

การจัดวางตำแหน่งข้อมูลไว้กึ่งกลาง

ข้อมูลที่อยู่ภายใน Tag คำสั่ง <CENTER> จะถูกกำหนดให้อยู่กึ่งกลางของจอภาพ

รูปแบบคำสั่ง

<CENTER>……..</CENTER>

กิจกรรมที่ 11 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex11.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การจัดวางตำแหน่งข้อมูลไว้กึ่งกลาง </TITLE>

</HEAD>

<BODY>

<CENTER> ตัวอักษรกึ่งกลาง </CEHNTER>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 11

2.5 การกำหนดสีของพื้นฉากหลัง

เป็นคำสั่งที่ใช้กำหนดสีของ Background จอภาพให้มีสีต่าง ๆ ตามต้องการโดยการกำหนดเลขฐาน 16

รูปแบบคำสั่ง

<BODY BGCOLOR= “#เลขฐาน 16 จำนวน 6 ตัว>……..</BODY>

กิจกรรมที่ 12 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex12.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การกำหนดสีของพื้นฉากหลัง </TITLE>

</HEAD>

<BODY BGCOLOR= “#0000FF” TEXT=”#FFFFFF”>

กำหนด BACKGROUND เป็นสีน้ำเงิน

</BODY>

</HTML>

การแสดงผล

ภาพที่ 12

การกำหนดสีของตัวอักษร

เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆ ตามต้องการโดยการกำหนดเลขฐาน 16

ตัวอย่างการใช้คำสั่ง

กิจกรรมที่ 13 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex13.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

คำสั่ง

<HTML>

<HEAD>

<TITLE> การกำหนดสีของตัวอักษร </TITLE>

</HEAD>

<BODY TEXT= “#00ff00”>

กำหนด ตัวอักษรเป็นสีเขียว

</BODY>

</HTML>

การแสดงผล

ภาพที่ 13

การกำหนดสีของตัวอักษรเฉพาะส่วน

เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆ เฉพาะส่วนตามต้องการโดยการกำหนดเลขฐาน 16

รูปแบบคำสั่ง

<FONT COLOR= “#เลขฐาน 16 จำนวน 6 ตัว”>…….</FONT>

ตัวอย่างการใช้คำสั่ง

กิจกรรมที่ 14 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex14.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

คำสั่ง

<HTML>

<HEAD>

<TITLE> การกำหนดสีของตัวอักษรเฉพาะส่วน </TITLE>

</HEAD>

<BODY>

ทดสอบ <FONT COLOR= “#FF0000”> กำหนดตัวอักษรเฉพาะส่วนเป็นสีแดง</FONT> โดยคำสั่ง FONTCOLOR

</BODY>

</HTML>

การแสดงผล

ภาพที่ 14

3. คำสั่งรายการ[Lists]

การแสดงข้อมูลแบบรายการเป็นส่วนที่ทำให้เกิดความสะดวก, รวดเร็วในการอธิบายรายละเอียดต่าง ๆ ของข้อมูลในกรณีที่มีข้อมูลจำนวนมาก ซึ่งจะมีลักษณะการแสดงผล 3 แบบ คือ

3.1 แบบมีหมายเลขกำกับ (Number Styles)

3.2 แบบมีสัญลักษณ์กำกับ (Bulleted Styles)

3.3 แบบไม่มีสัญลักษณ์กำกับ (No Bulleted Styles)

3.1 การแสดงรายงการแบบมีหมายเลขกำกับ

(Number Styles/Order Lists)

รูปแบบคำสั่ง

<OL TYPE= “รูปแบบ”>……………..

<LI>…………………………………..

<LI>…………………………………..

<LI>…………………………………..

-

-

<Lx>…………………………………..

</OL>

มีการแสดงแบบเรียงลำดับหลายรูปแบบ เช่น ตัวอักษร, ตัวเลข ฯลฯ

กิจกรรมที่ 15 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex15.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การแสดงรายการแบบมีหมายเลขกำกับ</TITLE>

</HEAD>

<BODY>

<OL TYPE= “A” >

<LI> รายการที่ 1

<LI> รายการที่ 2

<LI> รายการที่ 3

</OL>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 15

3.2 การแสดงรายการแบบมีสัญลักษณ์กำกับ

(Bulleted Styles)

รูปแบบคำสั่ง

<UL TYPE= “รูปแบบ”>…………………

<LI>…………

<LI>…………

<LI>…………

-

<Lx>………..

</UL>

มีการแสดงสัญลักษณ์ 3 รูปแบบ คือ DISC, CIRCLE, SQUARE

กิจกรรมที่ 16 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex16.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML> <HEAD> <TITLE> การแสดงรายการแบบมีสัญลักษณ์กำกับ (Bulleted Styles) </TITLE> </HEAD> <BODY> ทดสอบ DISC <UL TYPE= “DISC”> <LI> รายการที่ 1 <LI> รายการที่ 2 <LI> รายการที่ 3 </UL> ทดสอบ CIRCLE <UL TYPE= “CIRCLE”> <LI> รายการที่ 1 <LI> รายการที่ 2 <LI> รายการที่ 3 </UL> ทดสอบ SQUARE <UL TYPE= “ SQUARE”> <LI> รายการที่ 1 <LI> รายการที่ 2 <LI> รายการที่ 3 </UL> </BODY> </HTML>
การแสดงผล ภาพที่ 16	หมายเหตุ คำสั่งนี้จะแสดงผลได้ตรงความสภาพจริงเมื่อใช้ Browser เป็น Netcape Navigator เท่านั้น จากภาพในที่นี้ไม่ตรง กับสภาพที่เป็นจริง เนื่องจากใช้ Internet Explorer แสดงผล
	3.3 การแสดงแบบรายการแบบไม่มีสัญลักษณ์กำกับ (No Bulleted Styles) รูปแบบคำสั่ง <DL> คำจำกัดความ <DT> คำจำกัดความย่อย <DD> รายละเอียด </DL>

3.3 การแสดงรายการแบบไม่มีสัญลักษณ์กำกับ (No Bulleted Styles)

รูปแบบคำสั่ง

<DL> คำจำกัดความ

<DT> คำจำกัดความย่อย

<DD> รายละเอียด

</DL>

กิจกรรมที่ 17 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex17.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> การแสดงแบบรายการแบบไม่มีสัญลักษณ์ (NO Bulleted Styles) </TITLE>

</HEAD>
<DL>

<DT> รายการที่ 1

<DD> รายละเอียด

</DL>

</BODY>

</HTML>

การแสดงผล

ภาพที่ 17

รูปภาพ(IMAGE)

รูปภาพถือเป็นส่วนประกอบที่สำคัญอย่างหนึ่งาของโฮมเพจ เพราะจะทำให้โฮมเพจน่าสนใจมากยิ่งขึ้น โดยปกติแล้วรูปภาพที่สามารถนำมาประกอบโฮมเพจได้จะมีด้วยกันสองไฟล์คือไฟล์ JPG. (JPEG) และ GIF.

รูปแบบคำสั่ง

<IMG SRC= “=ชื่อไฟล์ JPG/GIF”>

กิจกรรมที่ 18 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex18.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML>

<HEAD>

<TITLE> รูปภาพ (IMAGE) </TITLE>

</HEAD>

<BODY>

<IMG SRC= “ong3.jpg”>

</BODY>

</HTML>

การแสดงผล

ex18.html

การกำหนดขนาดของรูปภาพ

รูปแบบคำสั่ง

<IMG SRC= “ชื่อไฟล์ JPG/GIF”=WIDTH= “number” HEIGHT= “number”>

กิจกรรมที่ 19 ฝึกเขียนภาษา HTML อย่างง่ายในโปรแกรม EditPlus หรือ Notepad แล้วบันทึกไฟล์นี้เป็น ex19.html และทดสอบการแสดงผลด้วยการเปิดไฟล์นี้ด้วย Browser

ตัวอย่างการใช้คำสั่ง

<HTML><HEAD>

<TITLE> การกำหนดขนาดของรูปภาพ </TITLE>

</HEAD>

<BODY>

<IMG SRC= “ong3.jpg ” WIDTH= “200” HEIGHT= “200”>

</BODY>

</HTML>

การแสดงผล