|
ประวัติความเป็นมาของ HTML
|
|
|
|
HTML (เอชทีเอ็มแอล) เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee)
ในปัจจุบัน HTML เป็นมาตรฐานหนึ่งของ ISO
ซึ่งจัดการโดย World Wide Web Consortium (W3C)
HTML เป็นภาษามาร์กอัปหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ
หรือข้อมูลอื่น ที่เรียกดูผ่านทางเว็บเบราว์เซอร์ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล
ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพ
หรือวิดีโอด้วยโครงสร้างของโค้ด
เอชทีเอ็มแอล จะอยู่ในลักษณะภายในวงเล็บสามเหลี่ยม (< >) หรือเรียกว่า Tag (แท็ก)
(ศูนย์เทคโนโลยีอิเล็กทรอนิคส์และคอมพิวเตอร์, 2548)
|
|
|
HTML เป็นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่ง ของคอมพิวเตอร์เพื่อตอบสนอง
ในการแสดงผลบนจอภาพ ในระบบอินเตอร์เน็ต (Internet)ในลักษณะเว็บเพจ
ซึ่งสามารถแสดงผลได้ทั้งภาษาไทยและภาษาอังกฤษ รวมทั้งรูปกราฟิก, ภาพนิ่ง,
ภาพเคลื่อนไหว,เสียง หรือแม้กระทั้งการเชื่อมโยงไปยังเว็บไซต์อื่นๆ
ในระบบอินเตอร์เน็ต ภาษา HTML เป็นภาษาที่มีลักษณะเป็นโค้ด(Code)
กล่าวคือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Code)
โดยเขียนอยู่ในรูปของเอกสารข้อความ (Text Document)ดัง้ะงนั้นจึงทำให้ง่ายต่อการเรียนรู้
สามารถกำหนดรูปแบบและโครงสร้างได้ง่ายด้วย ภาษาHTMLนี้ได้ถูกพัฒนามาอย่างต่อเนื่อง
เพื่อให้ใช้ได้ง่ายขึ้นและตอบสนองต่อการใช้รูปภาพทางกราฟิก
โดยเริ่มพัฒนามาตั้งแต่รุ่น 1.0, 2.0, 3.0 จนถึงรุ่น 4.0 ในปัจจุบัน นอกจากนี้ ภาษา HTML
ยังมีลักษณะพิเศษที่ควรทราบดังนี้ สามารถใช้ได้กับโปรแกรมสร้างและแก้ไขไฟล์ข้อความ
ได้แก่ Notepad, Word Processing ต่างๆ ซึ่งง่ายต่อการเรียนรู้
และไฟล์ที่ได้จะมีขนาดเล็ก ภาษาHTML ที่ถูกบันทึกใน Text Editor จะมี ชนิดของไฟล์
เป็น HTM สำหรับในระบบปฏิบัติการ MS-DOS จะมีชนิดเป็น HTM หรือ HTML
ในระบบปฏิบัติการยูนิกซ์, วินโดวส์ ภาษาHTML สามารถทำงานได้บนเว็บบราวเซอร์ทุกตัว
ที่สนับสนุน ภาษาHTML ได้แก่
Netscape รุ่นต่าง ๆ, Microsoft Internet Explorer, American Online, Mosaic เป็นต้น
ถึงแม้ว่า Dream weaver จะช่วยให้เราสามารถสร้างเว็บเพจได้โดยไม่ต้องยุ่งเกี่ยวกับภาษา
HTML เลยก็ตาม แต่สำหรับผู้ใช้บางท่านที่มีความรู้ความสามารถในการเขียนภาษาHTML
อาจต้องการ เพิ่มเติมแก้ไขด้วยภาษา HTML ที่ตนถนัด ซึ่งโปรแกรมก็ได้จัดเตรียมส่วนนี้
ไว้ให้พร้อมใช้ได้ทันที
( ภาวุธ พงษ์วิทยภานุ, 2552)
|
|
1.2 ประวัติความเป็นมาของ อินเทอร์เน็ต |
|
|
|
อินเทอร์เน็ต เป็นเครือข่ายคอมพิวเตอร์ ซึ่งเริ่มก่อตั้งโดยกระทรวงกลาโหมสหรัฐอเมริกา
อินเทอร์เน็ตในยุคแรก ๆ ประมาณปี พ.ศ. 2512 เป็นเพียงการนำคอมพิวเตอร์จำนวน
ไม่กี่เครื่องมาเชื่อมต่อกันโดยสายส่งสัญญาณเพื่อแลกเปลี่ยนข้อมูลระหว่างเครื่องคอมพิวเตอร์
มีภารกิจหลักใช้ในงานวิจัยทางทหารเรียกว่าอาร์ปา(ARPA:Advanced Research Project
Agency) ปี พ.ศ. 2515 หลังจากที่เครือข่ายทดลองอาร์พาประสบความสำเร็จ
ก็ได้มีการปรับปรุงหน่วยงานจาก อาร์ปามาเป็นดาร์พา (Defence Communication Agency)
ในปี พ.ศ. 2526 อาร์ปาเน็ตได้แบ่งเป็น 2 เครือข่าย ด้านงานวิจัยใช้ชื่อว่าอาร์ปาเน็ตเหมือนเดิม
ส่วนเครือข่ายของกองทัพใช้ มิลเน็ต (MILNET: Military Network) ซึ่งมีการเชื่อมต่อโดยใช้
โปรโตคอล TCP/IP (Transmission Control Protocol / Internet Protocol) ครั้งแรก
ปี พ.ศ. 2528 มูลนิธิวิทยาศาสตร์แห่งชาติอเมริกา (NSF : National Science Foundation)
ได้ให้เงินทุนในการสร้างศูนย์คอมพิวเตอร์ขนาดใหญ่6 แห่ง และใช้ชื่อว่า NSFNET
ปี พ.ศ. 2533 อาร์ปาเน็ตไม่สามารถที่จะรองรับภาระที่เป็นหลัก (Backbone) ของระบบได้
อาร์ปาเน็ตจึงได้ยุติลงและเปลี่ยนไปใช้ NSFNET และเครือข่ายอื่น ๆ แทนมาจนเป็นเครือข่าย
ขนาดใหญ่ จนกระทั่งถึงทุกวันนี้ โดยเรียกเครือข่ายว่า อินเทอร์เน็ต โดยเครือข่ายส่วนใหญ่
จะอยู่ในอเมริกาและปัจจุบันนี้มีเครือข่ายย่อยมากมายทั่วโลก
(ศูนย์เทคโนโลยีอิเล็กทรอนิคส์และคอมพิวเตอร์, 2548)
อินเทอร์เน็ตในประเทศไทย
อินเทอร์เน็ตในประเทศไทยได้เริ่มขึ้นเมื่อปี พ.ศ. 2530 โดยการเชื่อมต่อมินิคอมพิวเตอร์
ของมหาวิทยาลัยสงขลานครินทร์ และสถาบันเทคโนโลยีแห่งเอเชีย (AIT)
ไปยังมหาวิทยาลัย เมลเบิร์น ประเทศออสเตรเลีย แต่ในครั้งนั้นยังเป็นการเชื่อมต่อโดยผ่าน
สายโทรศัพท์ ซึ่งสามารถส่งข้อมูลได้ช้า และไม่เป็นการถาวร
จนกระทั่งในปี พ.ศ. 2535 ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ
(NECTEC) ได้ทำการเชื่อมต่อคอมพิวเตอร์กับมหาวิทยาลัย 6 แห่ง ได้แก่
จุฬาลงกรณ์มหาวิทยาลัย, สถาบันเทคโนโลยีแห่งเอเชีย (AIT) มหาวิทยาลัยสงขลานครินทร์,
สถาบันเทคโนโลยี และคอมพิวเตอร์แห่งชาติ (NECTEC), มหาวิทยาลัยธรรมศาสตร์
และมหาวิทยาลัยเกษตรศาสตร์เข้าด้วยกันเรียกว่า 'เครือข่ายไทยสาร'
ต่อมาในปี พ.ศ. 2537 ความต้องการในการใช้อินเทอร์เน็ตจากภาคเอกชนมีมากขึ้น
การสื่อสารแห่งประเทศไทย (กสท.) จึงได้ร่วมมือกับบริษัทเอกชน เปิดบริการอินเทอร์เน็ต
ให้แก่บุคคล และผู้สนใจทั่วไปได้สมัครเป็นสมาชิก พร้อมตั้งขึ้นในรูปแบบของบริษัทผู้ให้
บริการอินเทอร์เน็ต เชิงพาณิชย์ เรียกว่า 'ผู้ให้บริการอินเทอร์เน็ต' หรือ ISP
จนใช้กันมาอย่างแพร่หลายในปัจจุบัน
(สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี, 2547:5) |
คำสั่งเริ่มต้นสำหรับ HTML
คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร
คำสั่งเริ่มต้น
รูปแบบ <HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign และ End ใน Pascal
คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE -->
ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ
ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ
การสร้างแบบฟอร์ม
การสร้างตาราง
การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>
|
คำสั่ง
|
คุณสมบัติ
|
|
<TABLE>...</TABLE> |
เป็นคำสั่งเปิดปิดตาราง |
|
<TR>...</TR> |
ตารางตามแนวนอน เป็นการกำหนดแถวในตาราง |
|
<TH>...</TH> |
หัวข้อ ของ ตาราง ข้อความ ที่อยู่ใน คำสั่ง จะถูก จัดให้เป็น ตัวหนา และกึ่งกลาง โดย อัตโนมัติ |
|
<TD>...</TD> |
เป็นราย ละเอียด ของตาราง เป็นการ กำหนดจำนวน คอร์ลัม ของตาราง |
คุณสมบัติของตาราง
<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n
โดย
|
ALIGN |
กำหนด ตำแหน่งตาราง โดย
LEFT=กำหนดตารางให้อยู่ทางซ้าย
RIGHT=กำหนดตารางให้อยู่ทางขวา |
|
BACKGROUND |
ใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ |
|
BGCOLOR |
กำหนดสีให้ตาราง |
|
BORDER |
เส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง |
|
BORDERCOLOR |
กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER |
|
CELLPADDING |
กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง |
|
CELLSPACING |
กำหนดขนาดของเส้นตาราง |
|
WIDTH |
กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น % |
|
HEIGHT |
กำหนดความสูงของตารางเป็นตัวเลขและเป็น % |
<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type
โดย
|
ALIGN |
กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา |
|
BACKGROUND |
ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
|
BGCOLOR |
กำหนดสีที่เป็นฉากหลังให้แถว |
|
BORDERCOLOR |
กำหนดสีให้ขอบตาราง |
|
VALIGN |
จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง |
<TH>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type
โดย
|
ALIGN |
กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา |
|
BACKGROUND |
ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
|
BGCOLOR |
กำหนดสีที่เป็นฉากหลังให้แถว |
|
BORDERCOLOR |
กำหนดสีให้ขอบตาราง |
|
COLSPAN |
ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี |
|
ROWSPAN |
ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี |
|
VALIGN |
จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง |
<TD>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-type
โดย
|
ALIGN |
กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา |
|
BACKGROUND |
ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ |
|
BGCOLOR |
กำหนดสีที่เป็นฉากหลังให้แถว |
|
BORDERCOLOR |
กำหนดสีให้ขอบตาราง |
|
COLSPAN |
ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี |
|
ROWSPAN |
ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี |
|
VALIGN |
จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง |
ตารางซ้อนตาราง
มีอยู่ บ่อยครั้ง ที่เรา จำเป็น ที่จะต้อง สร้างตาราง ให้ มีลักษณะ ของตาราง ทับซ้อน กันได้ เพื่อ ผล ทางการ แสดงผล ข้อมูล ข้อมูล ให้แบบ ละเอียด ของข้อมูล ได้มาก ที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด <TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น
ซึ่งมีโคดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>
การใส่รูปภาพลงในตาราง
เรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น
<TABLE BORDER='2' CELLPADDING='5' CELLSPACING='5' WIDTH='60%'>
<TR>
<TD VALIGN='bottom' WIDTH='30%'><IMG SRC='Aq.gif' WIDTH='108' HEIGHT='108'></TD>
<TD WIDTH='30%'><IMG SRC='34.gif' WIDTH='20' HEIGHT='20'></TD>
<TR>
<TR>
<TD VALIGN='bottom' WIDTH='30%'><IMG SRC='direc.gif' WIDTH='200' HEIGHT='44'></TD>
<TD WIDTH='30%'><IMG SRC='pencil.gif' WIDTH='50' HEIGHT='50'></TD>
<TR>
</TABLE>
การปรับขนาดรูปภาพให้พอดีกับตาราง
เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนำ รูปภาพ ใส่เข้า ไปในตาราง เราก็ กำหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทำให้ภาพ ที่แสดง ออกมา มีขนาด เท่ากัน เช่น
<TABLE BORDER='2' CELLPADDING='5' CELLSPACING='5' WIDTH='60%'>
<TR>
<TD VALIGN='bottom' WIDTH='30%'><IMG SRC='Aq.gif' WIDTH='80' HEIGHT='80'></TD>
<TD WIDTH='30%'><IMG SRC='34.gif' WIDTH='80' HEIGHT='80'></TD>
<TR>
<TR>
<TD VALIGN='bottom' WIDTH='30%'><IMG SRC='direc.gif' WIDTH='80' HEIGHT='80'></TD>
<TD WIDTH='30%'><IMG SRC='pencil.gif' WIDTH='80' HEIGHT='80'></TD>
<TR>
</TABLE>
การเชื่อมโยงข้อมูลในตาราง
เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น เช่น
<table border=2 cellpadding=5 cellspacing=5 width='50%'>
<tbody>
<tr>
<td width='50%'><a href='../index.asp'><img height=20 src='34.gif' width=20 border=0></a></td>
<td width='50%'><a href='../index.asp'>กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>
การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ
|
สี
|
รหัสสี
|
|
ขาว
|
#FFFFFF
|
|
ดำ
|
#000000
|
|
เทา
|
#BBBBBB
|
|
แดง
|
#FF0000
|
|
เขียว
|
#00FF00
|
|
น้ำเงิน
|
#0000FF
|
ในบางครั้งถ้าเราไม่ต้องการใส่รหัสสีเป็นเลขฐานเราก็สามารถใส่ชื่อ สีลงไปได้เลย ตัวอย่างต่อไปนี้ แสดงชื่อ สีที่ Internet Explorer สนับสนุนแต่ Netscape ไม่สนับสนุน
AQUA
BULE
GRAY
LIME
NAVY
PURPLE
SILVER
WHITE (สีขาว)
BLACK
FUCHSIA
GREEN
MAROON
OLTVE
RED
TEAL
YELLOW
สีของพื้นฉากหลัง
รูปแบบ BGCOLOR=#สีที่ต้องการ
ตัวอย่าง <BODY BGCOLOR='#FF0000'>
เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง
สีของตัวอักษรบนเว็บ
รูปแบบ Text=#รหัสสี
ตัวอย่าง <BODY TEXT='#00FF00'>
เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT='#00FF00'> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด
สีของตัวอักษรเฉพาะที่
รูปแบบ <FONT COLOR='#สีที่ต้องการ'>...</FONT>
ตัวอย่าง <font color='#FF0000'>สีแดง</font>
คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR='#FF0000'>
สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที
สีของตัวอักษรที่เป็นจุดคลิกเมาส์
รูปแบบ LINK='#รหัสสี' ALINK='#รหัสสี' VLINK'#รหัสสี'
ตัวอย่าง <BODY BGCOLOR='000000' TEXT='#F0F0F0' LINK='#FFFF00' ALIGN='#0077FF' VLINK='#22AA22'>
กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้
LINK = สีของตัวอักษรก่อนมีการคลิก
ALIGN = สีของตัวอักษรขณะถูกคลิก
VLINK = สีของอักษรหลังจากคลิกแล้ว
ตัวอย่างรหัสสี
Aliceblue
F0F8FF |
Antiquewhite
FAEBD7 |
Aqua
00FFFF |
Aquamarine
7FFFD4 |
Azure
F0FFFF |
Beige
F5F5DC |
Bisque
FFE4C4 |
Black
000000 |
Blanchedalmond
FFEBCD |
Blue
0000FF |
Blueviolet
8A2BE2 |
Brown
A52A2A |
Burlywood
DEB887 |
Cadetblue
5F9EA0 |
Chartreuse
7FFF00 |
Chocolate
D2691E |
Coral
FF7F50 |
Cornflowerblue
6495ED |
Cornsilk
FFF8DC |
Crimson
DC143C |
Cyan
00FFFF |
Darkblue
00008B |
Darkcyan
008B8B |
Darkgoldenrod
B8860B |
Darkgray
A9A9A9 |
Darkgreen
006400 |
Darkkhaki
BDB76B |
Darkmagenta
8B008B |
Darkolivegreen
556B2F |
Darkorange
FF8C00 |
Darkorchid
9932CC |
Darkred
8B0000 |
Darksalmon
E9967A |
Darkseagreen
8FBC8F |
Darkslateblue
483D8B |
Darkslategray
2F4F4F |
Darkturquoise
00CED1 |
Darkviolet
9400D3 |
deeppink
FF1493 |
Deepskyblue
00BFFF |
Dimgray
696969 |
Dodgerblue
1E90FF |
Firebrick
B22222 |
Floralwhite
FFFAF0 |
Forestgreen
228B22 |
Fuchsia
FF00FF |
Gainsboro
DCDCDC |
Ghostwhite
F8F8FF |
Gold
FFD700 |
Goldenrod
DAA520 |
Gray
808080 |
Green
008000 |
Greenyellow
ADFF2F |
Honeydew
F0FFF0 |
Hotpink
FF69B4 |
Indianred
CD5C5C |
Indigo
4B0082 |
Ivory
FFFFF0 |
Khaki
F0E68C |
Lavendar
E6E6FA |
Lavenderblush
FFF0F5 |
Lawngreen
7CFC00 |
Lemonchiffon
FFFACD |
Lightblue
ADD8E6 |
Lightcoral
F08080 |
Lightcyan
E0FFFF |
Lightgoldenrodyellow
FAFAD2 |
Lightgreen
90EE90 |
Lightgrey
D3D3D3 |
Lightpink
FFB6C1 |
Lightsalmon
FFA07A |
Lightseagreen
20B2AA |
Lightskyblue
87CEFA |
Lightslategray
778899 |
Lightsteelblue
B0C4DE |
Lightyellow
FFFFE0 |
Lime
00FF00 |
Limegreen
32CD32 |
Linen
FAF0E6 |
Magenta
FF00FF |
Maroon
800000 |
Mediumauqamarine
66CDAA |
Mediumblue
0000CD |
Mediumorchid
BA55D3 |
Mediumpurple
9370D8 |
Mediumseagreen
3CB371 |
Mediumslateblue
7B68EE |
Mediumspringgreen
00FA9A |
Mediumturquoise
48D1CC |
Mediumvioletred
C71585 |
Midnightblue
191970 |
Mintcream
F5FFFA |
Mistyrose
FFE4E1 |
Moccasin
FFE4B5 |
Navajowhite
FFDEAD |
Navy
000080 |
Oldlace
FDF5E6 |
Olive
808000 |
Olivedrab
688E23 |
Orange
FFA500 |
Orangered
FF4500 |
Orchid
DA70D6 |
Palegoldenrod
EEE8AA |
Palegreen
98FB98 |
Paleturquoise
AFEEEE |
Palevioletred
D87093 |
Papayawhip
FFEFD5 |
Peachpuff
FFDAB9 |
Peru
CD853F |
Pink
FFC0CB |
Plum
DDA0DD |
Powderblue
B0E0E6 |
Purple
800080 |
Red
FF0000 |
Rosybrown
BC8F8F |
Royalblue
4169E1 |
Saddlebrown
8B4513 |
Salmon
FA8072 |
Sandybrown
F4A460 |
Seagreen
2E8B57 |
Seashell
FFF5EE |
Sienna
A0522D |
Silver
C0C0C0 |
Skyblue
87CEEB |
Slateblue
6A5ACD |
Slategray
708090 |
Snow
FFFAFA |
Springgreen
00FF7F |
Steelblue
4682B4 |
Tan
D2B48C |
Teal
008080 |
Thistle
D8BFD8 |
Tomato
FF6347 |
Turquoise
40E0D0 |
Violet
EE82EE |
Wheat
F5DEB3 |
White
FFFFFF |
Whitesmoke
F5F5F5 |
Yellow
FFFF00 |
YellowGreen
9ACD32 |
การจัดรูปแบบโฮมเพจ
ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บ เบราเซอร์การกด ปุ่ม Enter ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ ที่เกิดจาก การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น
การขึ้นบรรทัดใหม่
รูปแบบ <BR>
เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่
ย่อหน้าใหม่
รูปแบบ <P ALIGN=align type>ข้อความ</P>
เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>
เส้นคั้น
รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>
เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย
โดย X = ค่าต่าง ๆ เหล่านี้
<ALIGN> = CENTER , LEFT , RIGHT
COLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-B
SIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7
WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์
NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ
การใส่รูปภาพลงในเว็บเพจ
เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ และข้อความ ที่เป็น ระเบียบ ทำให้อ่าน ง่าย เข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว
ก่อนที่ เราจะ มารู้ ถึงคำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา จะนำมา ใส่ ใน เวบเพจ เสียก่อน รูปภาพ ที่จะ นำมา ใช้ใส่ ลง ในเวบเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์
รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด เป็นภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น
ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group
เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นำมา ใช้งาน นั้น อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน
การใส่รูปภาพลงในเว็บเพจ
รูปแบบ <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address ALT=text>
ALIGN=align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้
LEFT = วางภาพที่ตำแหน่งทางซ้าย
RIGHT = วางภาพที่ตำหน่งทางขวา
TOP = วางภาพ ที่ตำแหน่ง ด้านบน
MIDDLE = วางภาพ ที่ตำหน่ง กึ่งกลาง
BOTTOM= วางภาพ ที่ตำแหน่ง ด้านล่าง
BORDER=n เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT=n เป็นการ กำหนด ความสูง ของภาพ
WIDTH=n เป็นการ กำหนด ความกว้าง ของภาพ ถ้าต้องการ ให้ภาพได้ สัดส่วน ให้กำหนด เป็นเปอร์เซนต์ โดยไม่ จำกัด ความสูง
VSPACE=n กำหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE=n กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ
SRC =ใส่รูปภาพที่ต้องการลงไป
ALT =text ใส่ข้อ ความ เพื่อเป็น คำอธิบาย รูปภาพ ที่นำมาวาง สำหรับ ผู้ใช้ อินเตอร์เนต แบบเท็กซ์
ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>...<CENTER>
การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND='picture'
กำหนด แอตทริบิวต์ BACKGROUND='picture' ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND='hot.gif'>
การเชื่อมโยงข้อมูล (Link)
เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน
ข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่ มีการเชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF='ที่อยู่ไฟล์'>ข้อความ</A>
ตัวอย่าง <A HREF='tipcomputer.asp'>ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF='../tipcomputer.asp'>ทิปคอมพิวเตอร์</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF='้http://www..........'>ข้อความ</A>
ตัวอย่าง <A HREF='้http://www.bcoms.net'>บีคอม</A>
*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target='_blank'
ตัวอย่าง <a href='http://www.driverzone.com' target='_blank'> Driver Zone </a>
การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF='MAILTO:USERNAME@DOMAINNAME'>ข้อความ</A>
ตัวอย่าง <a href='mailto: [email protected]'>[email protected]</a>
ข้อมูลต่างๆเพิ่มเติม :: >>> http://www.bcoms.net/html/index.asp
