บทที่4การสร้างสารสนเทศในเว็บเพจ
บทที่4
การสร้างสารสนเทศในเว็บเพจ
การสร้างสารสนเทศในเว็บเพจ
วัตถุประสงค์
1.สามารถสร้างเอกสารด้วยภาษา HTML ได้
2.สามารถสร้างเว็บเพจได้
4.1 เครื่องมือสร้างเว็บเพจ การสร้างเว็บเพจในปัจจุบันใช้เครื่องมือที่มีลักษณะ 3 รูปแบบ คือ 1. ใช้ Text Editor เช่นโปรแกรม Notepad ในการเขียนภาษา HTML ทั้งนี้การใช้ Text Editor นั้นผู้ใช้จะต้องมีความรู้ในภาษา HTML
รูปที่1.โปรแกรม Notepad
รูปที่2.โปรแกรม Netscape Editor
รูปที่3.HTML Assistant Profree
4.2 ภาษา HTML ภาษา HTML (Hyper Text markup language ) เป็นภาษาที่ใช้สร้างเอกสารไฮเปอร์เท็กซ์มีรูปแบบของภาษาเป็นป้ายคำสั่ง(tag) เพื่อกำหนดให้เอกสารแสดงข้อมูลตามที่ต้องการ เช่น แสดงส่วนที่เป็นข้อความตาราง แบบฟอร์ม รูปภาพ เสียง วีดีทัศน์ เป็นต้น และแสดงส่วนที่ทำหน้าที่ในการเชื่อมโยงไปยังข้อมูลอื่นๆ ภาษา HTML เป็นภาษาที่มีรูปแบบของคำสั่งและวิธีการใช้ที่ไม่ยากนักป้ายคำสั่งของภาษา hgml ประกอบด้วยเครื่องหมายมากกว่า(<)และเครื่องหมายน้อยกว่า(>)ประกบคำหรือคำย่อประกอบกันเป็นป้ายคำสั่งเช่น<h1> <p> <ol> <table>เป็นต้น ป้ายคำสั่ง มักจะเป็นป้ายคู่ประกอบด้วยป้ายเปิดแล้วปิดสำหรับวางประคบส่วนของข้อความที่ต้องการให้แสดงในลักษณะต่างๆ ได้แก่ เป็นหัวข้อ เป็นตาราง เป็นรายการ ป้ายเปิดแล้วปิดจะเขียนเหมือนกัน มีข้อแตกต่างตรงที่ป้ายปิดจะมีเครื่องหมาย/ นำหน้า เช่นป้าย<HEAD>เป็นป้ายเปิดและป้าย</HEAD>เป็นป้ายปิดป้ายคู่นี้จะเป็นเครื่องหมาย (Mark Up) ที่แสดงให้โปรแกรมอ่านเว็บ (Web Browser)ทราบว่าข้อมูลที่อยู่ภายในป้ายคู่นี้เป็นส่วนที่อยู่ส่วนหัวของเอกสาร
4.2.1 โครงสร้างมาตรฐานของภาษา HTML โครงสร้างมาตรฐานของภาษา HTML ประกอบด้วยส่วนสำคัญ 3 ส่วนคือ 1.ส่วนที่แสดงว่าเป็นเอกสาร HTML ส่วนนี้ใช้ป้ายคำสั่ง<HTML>และ</HTML>เป็นส่วนที่ทำให้โปรแกรมอ่านเอกสาร (Web Browser) ดูว่าเป็นเอกสารไฮเปอร์เท็กซ์ที่สร้างด้วยภาษา HTML ทั้งนี้ป้ายคำสั่งคู่นี้จะเป็นป้ายคำสั่งแรกและป้ายคำสั่งสุดท้ายของเอกสารที่เขียนด้วยภาษา HTML 2. ส่วนหัวของเอกสาร (HEAD) ส่วนนี้ใช้ป้ายคำสั่ง<HEAD>และ </HEAD>ประกบป้ายคำสั่งอื่นที่มีอยู่ภายในป้ายคำสั่งคู่นี้ เช่น มีป้ายคำสั่ง <TITLE>และ</TITLE> 3. ส่วนเนื้อหาของเอกสาร(BODY) ส่วนนี้ใช้ป้ายคำสั่ง<BODY>และ</BODY>ประกบป้ายคำสั่งอื่นๆเช่นป้ายคำสั่งแสดงหัวข้อเนื้อหาย่อหน้าการวางภาพการเชื่อมโยงเป็นต้น โครงสร้างมาตรฐานของภาษา html แสดงได้ดังนี้
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
4.2.2 ป้ายคำสั่งในภาษา HTML
รูปที่4. ป้ายคำสั่งในภาษา HTML
4.3 การสร้างเอกสารด้วยภาษา HTML 4.3.1 สร้างชื่อเรื่องของเอกสาร การใส่ชื่อเรื่องของเอกสาร จะใส่ไว้ในส่วนของป้ายคำสั่ง <title> และ </title> เมื่อเปิดอ่านเว็บเพจจะสังเกตเห็นชื่อเรื่องของเอกสารที่แถบบนสุดของโปรแกรมเว็บบราวเซอร์ที่ใช้อ่านเว็บเพจนั้น 4.3.2 สร้างหัวข้อในเอกสาร ป้ายคำสั่งที่ใช้ในการกำหนด ข้อความให้เป็นหัวข้อ คือ ป้ายคำสั่ง <Hn> และ </Hn>โดย n แทน ตัวเลขตั้งแต่เลข 1-6 เพื่อใช้กำหนดให้เป็นหัวข้อขนาดแตกต่างกัน 6 ระดับ 4.3.3 สร้างวรรคตอนย่อหน้า การสร้างข้อมูลในรูปแบบของวรรคตอนย่อหน้า (Paragraph) ใช้ป้ายคำสั่ง<p>การใช้ป้ายคำสั่ง <p> ทำโดยวางป้ายคำสั่ง<p>ไว้หน้าข้อความที่จะให้เห็นเป็นวรรคตอนย่อหน้านั้นและเมื่อจบวรรคตอนย่อหน้านั้นจะปิดหรือไม่ปิดป้ายคำสั่ง</p>ได้ทั้ง 2 แบบเพราะจะให้ผลเหมือนกัน
4.3.4การเติมสีสันให้เอกสาร
ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ
บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ
รูปที่5. แสดงรหัสสีตัวอักษร
รูปแบบ BGCOLOR=#สีที่ต้องการ ตัวอย่าง <BODY BGCOLOR="#FF0000"> เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง 4.3.6 สีของตัวอักษรบนเว็บ รูปแบบ Text=#รหัสสี ตัวอย่าง <BODY TEXT="#00FF00"> เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด 4.3.7สีของตัวอักษรเฉพาะที่ รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT> ตัวอย่าง <font color="#FF0000">สีแดง</font> คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที
4.3.8 สีของตัวอักษรที่เป็นจุดคลิกเมาส์ รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี" ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22"> กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้ LINK = สีของตัวอักษรก่อนมีการคลิก ALIGN = สีของตัวอักษรขณะถูกคลิก VLINK = สีของอักษรหลังจากคลิกแล้ว
4.3.9 รูปแบบของตัวอักษร เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา ตัวเอน ตัวเล็ก ตัวใหญ่ ซึ่งลักษระต่างๆ เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้น
1.หัวเรื่อง รูปแบบ <Hx>ข้อความ</Hx> ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1> ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx> 2.ขนาดตัวอักษร รูปแบบ <FONT SIZE=x>ข้อความ</FONT> ตัวอย่าง <FONT SIZE=2>bcoms.net</FONT> เราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ <FONT SIZE=value> มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7 3.ตัวหนา (Bold) รูปแบบ <B>ข้อความ</B> ตัวอย่าง <B>bcoms.net</B> จะทำให้ข้อความที่อยู่ใน <B>....</B> มีความหนาเกิดขึ้น เช่น bcoms.net 4.ตัวเอน (Itatic) รูปแบบ <I>ข้อความ</I> ตัวอย่าง <I>bcoms.net</I> ทำให้ข้อความที่อยู่ใน<I>....</I> เกิดเป็นตัวเอนขึ้น เช่น bcoms.net 5.ตัวขีดเส้นใต้ (Underline) รูปแบบ <U>ข้อความ</U> ตัวอย่าง <U>bcoms.net</U> ทำให้ข้อความที่อยู่ใน <U>.....<U> มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.net 6.ตัวอักษรมีขนาดคงที่ (Typewriter text) รูปแบบ <TT>ข้อมความ</TT> ตัวอย่าง <TT>bcoms.net</TT> ทำให้ ข้อความ ที่อยู่ใน<TT>.....</TT> มีลักษณะเป็น fixed space เกิดขึ้น เช่น bcoms.net 7.แบบของตัวอักษร รูปแบบ <FONT FACE="font name>ข้อความ</FONT> c <FONT FACE="AngsanaUPC">bcoms.net</FONT> Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT FACE="AngsanaUPC"> bcoms.net</FONT> และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,) 8.ขนาด Font ทั้งเอกสาร รูปแบบ Basefont size="X"> ตัวอย่าง <Basefont size=3> เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข) 9.ตัวอักษรแบบพิเศษ รูปแบบ < แทนด้วย < > แทนด้วย > & แทนด้วย & " แทนด้วย " 10.เว้นวรรค แทนด้วย ตัวอย่างเช่น "bcoms.net" จะเป็น "bcoms.net"
4.3.10 การจัดรูปแบบโฮมเพจ
1.การขึ้นบรรทัดใหม่ รูปแบบ <BR> เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่ 2.ย่อหน้าใหม่ รูปแบบ <P ALIGN=align type>ข้อความ</P> เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P> 3.เส้นคั้น รูปแบบ <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 = กำหนด ให้เส้น เป็น เส้นทึบ
4.3.11การใส่รูปภาพลงในเว็บเพจ
รูปแบบ <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>
รูปที่ 6.การใส่รูปภาพลงในเว็บเพจ
รูปที่7.การแสดงภาพฉากหลัง
4.3.13 การเชื่อมโยงลิงค์1.การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
* หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>
2.การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <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>
3.การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>
4.การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
บรรณานุกรม
2.https://images.app.goo.gl/XQQunDQevRpKqGoF9
3.https://sites.google.com/site/class0223/learnhtml
4.https://images.app.goo.gl/8dd4nuP4t7bnt6J4A
5.https://images.app.goo.gl/5p9fjGsgDgp3YPWp9
6.https://images.app.goo.gl/nrML3Ae4H8LEWXTF9
7.https://images.app.goo.gl/hX86dn5Nu4WiZeAt6
8.https://images.app.goo.gl/mxGbaUXszpnNz7KC8
9.บุปผชาติ ทัฬหิกรณ์.
เทคโนโลยีสารสนเทศทางวิทยาศาสตร์ศึกษา/ บุปผชาติ ทัฬหิกรณ์-- กรุงเทพฯ: สำนักพิมพ์มหาวิทยาลัย เกษตรศาสตร,์ 2546.
ความคิดเห็น
แสดงความคิดเห็น