1 / 66

กระบวนวิชา 25 3208 การพัฒนาโปรแกรมบนเว็บ Web Applications Development

กระบวนวิชา 25 3208 การพัฒนาโปรแกรมบนเว็บ Web Applications Development. HTML. สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ.

keiki
Télécharger la présentation

กระบวนวิชา 25 3208 การพัฒนาโปรแกรมบนเว็บ Web Applications Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. กระบวนวิชา 25 3208การพัฒนาโปรแกรมบนเว็บ Web Applications Development HTML

  2. สิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจสิ่งที่ต้องเตรียมเมื่อต้องการเขียนโฮมเพจ • ไฟล์ของโปรแกรม HTML เป็นแท็กซ์ ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htmหรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเรา จะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น เรา จะไม่สามารถ แสดงผล ได้ ทาง เบราเซอร์ และถ้ามีการแก้ไข หรือ เขียนโปรแกรม เราก็สามารถ ใช้โปรแกรม Notepad นี้เป็นตัวแก้ไขได้เลย

  3. โครงสร้างพื้นฐานของ HTML • โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้<HTML><HEAD><TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE></HEAD><BODY>คำสั่งหรือข้อความที่ต้องการให้แสดง</BODY></HTML>

  4. การจัดโครงสร้างแฟ้มเอกสารการจัดโครงสร้างแฟ้มเอกสาร • ในความง่ายของภาษา HTML นั้นเพราะภาษานี้ไม่มีโครงสร้างใด ๆ มากำหนดนอก จากโครงสร้างพื้นฐานเท่านั้น หรือ แม้แต่จะไม่มีโครงสร้าง พื้นฐานอยู่ โปรแกรมที่เขียนขึ้นมานั้นก็สามารถทำงานได้เสมือนมี โครงสร้างทั่งนี้เป็นเพราะ ว่าตัวโปรแกรม เว็บเบราเซอร์ จะมองเห็นทุกสิ่งทุกอย่างในโปรแกรม HTML เป็นส่วนเนื้อหาทั้งสิ้น ยกเว้นใน ส่วนหัว ที่ต้อง มีการกำหนด แยกออกไปให้ เห็นชัดเท่านั้น จะเขียน คำสั่ง หรือ ข้อความที่ ต้องการ ให้แสดง อย่างไรก็ได้ เป็นเสมือนพิมพ์งานเอกสารทั่ว ๆ ไปเพียง แต่ ทำตำแหน่ง ใดมีการ ทำตำแหน่ง พิเศษขึ้นมา เว็บเบราเซอร์ถึงจะแสดงผล ออกมาตามที่ ถูกกำหนด โดยใช้คำสั่งให้ตรงกับ รหัสที่กำหนดเท่านั้น

  5. การแสดงผลที่เว็บเบราเซอร์การแสดงผลที่เว็บเบราเซอร์ • หลังจากมีการพิมพ์โปรแกรมนี้เสร็จเรียบร้อยแล้ว ให้บันทึกเป็น ไฟล์ที่มีนามสกุล .htmหรือ .html จากนั้นให้เรียกโปรแกรมเว็บเบราเซอร์ขึ้นมาทำการทดสอบ ข้อมูลที่เราสร้างจะถูก นำมาที่ออกมาแสดงที่จอภาพ ถ้าไม่เขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถ้าเรามีการปรับปรุงแก้ไขข้อมูลในโปรแกรมเดิม ให้อยู่ในรูปของ โปรแกรมใหม่ ก็จำ เป็นต้องโหลดโปรแกรมขึ้นมาใหม่ เพียงแต่เลื่อนเมาส์ไปคลิกที่ปุ่ม Refresh โปรแกรมก็จะทำการ ประมวลผลและแสดงผลออกมาใหม่ ในคำสั่ง HTML ส่วนใหญ่ใช้ตัวเปิด เป็นเครื่องหมาย น้อยกว่า < ตามด้วยคำสั่ง และปิดท้ายด้วยเครื่องหมายมากกว่า > และมีตัวปิดที่มีรูปแบบเหมือนตัวเปิดเสมอ เพียงแต่จะมีเครื่อง หมาย / อยู่หน้าคำสั่งนั้น ๆ เช่น คำสั่ง <BODY> จะมี </BODY> เป็นคำสั่งปิด เมื่อใดที่ผู้เขียนลืมหรือพิมพ์คำสั่งผิด จะส่งผลให้การทำงานของโปรแกรมผิดพลาดทันที

  6. คำสั่งเริ่มต้นสำหรับ HTML • คำสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า <ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า>เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /(Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย ในการเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้ ไม่มีผลอะไร

  7. คำสั่งเริ่มต้น • รูปแบบ<HTML>.....</HTML>คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beignและ End ใน Pascal

  8. คำสั่งการทำหมายเหตุ • รูปแบบ<!-- ..... -->ตัวอย่าง<!-- END WEBSTAT CODE -->ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

  9. ส่วนหัว • รูปแบบ<HEAD>.....</HEAD>ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

  10. กำหนดข้อความในไตเติลบาร์ • รูปแบบ <TITLE>.....</TITLE>ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร

  11. ส่วนของเนื้อหา • รูปแบบ <BODY>.....</BODY>ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ

  12. การเติมสีสันให้เอกสารการเติมสีสันให้เอกสาร • ผลการแสดง ที่เกิดขึ้น บน เว็บเพจ เราจะพบว่าเอกสาร ทั่วไปแล้วตัวอักษร ที่ปรากฎ บนจอภาพ จะเป็น ตัวอักษรสีดำ บนพื้น สีเทา ถ้าเรา ต้องการ ที่จะ เปลี่ยนสี ของตัวอักษร หรือ สีของ จอภาพ เราสามารถ ทำ ได้โดย การกำหนด แอตทริบิวต์ (Attribute) ของตัวอักษร สิ่งที่ต้องการนี้ จะเป็น กลุ่มตัว เลขฐาน 16 จำนวน 3 ชุด โดยชุดที่ หนึ่ง ทำหน้าที่ แทนค่าสีแดง ชุดที่สอง ทำหน้าที่ แทนสีเขียว และชุดที่สาม ทำหน้าที่แทนสี น้ำเงิน ข้อมูล ในตาราง ต่อไปนี้จะแสดง สีพื้นฐาน และรหัสสี ที่สามารถแสดงได้ทุกเว็บเพจ

  13. สี รหัสสี • ขาว • #FFFFFF • ดำ • #000000 • เทา • #BBBBBB • แดง • #FF0000 • เขียว • #00FF00 • น้ำเงิน • #0000FF

  14. สีของพื้นฉากหลัง • รูปแบบ BGCOLOR=#สีที่ต้องการตัวอย่าง <BODY BGCOLOR="#FF0000"> เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง

  15. สีของตัวอักษรเฉพาะที่ • รูปแบบ <FONT COLOR="#สีที่ต้องการ">...</FONT>ตัวอย่าง <font color="#FF0000">สีแดง</font>คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น <FONT COLOR="#FF0000">สีแดง</FONT>ตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที

  16. สีของตัวอักษรที่เป็นจุดคลิกเมาส์สีของตัวอักษรที่เป็นจุดคลิกเมาส์ • รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"ตัวอย่าง<BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22"> กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้LINK = สีของตัวอักษรก่อนมีการคลิกALIGN = สีของตัวอักษรขณะถูกคลิกVLINK = สีของอักษรหลังจากคลิกแล้ว

  17. การจัดรูปแบบโฮมเพจ • ในการเขียนคำสั่งเพื่อให้แสดงผลด้วยเว็บเบราเซอร์การกด ปุ่ม Enter ที่แป้นพิมพ์เพื่อขึ้นบรรทัดใหม่ในขณะที่สร้าง ไฟล์นั้นยังไม่มีโปรแกรมเว็บเบราเซอร์ตัวใดรู้จักคำสั่งที่ขึ้นบรรทัดใหม่ที่เกิดจาก การกดแป้นพิมพ์เลยดังนั้น เราจึง ต้องมี การเขียนคำสั่งขึ้นซึ่งในบทนี้เราจะมารู้ถึงคำสั่งที่ใช้ใน การกำหนด รูปแบบต่างเพื่อให้ เว็บเพจ มีความสวยงามมากยิ่งขึ้น

  18. การขึ้นบรรทัดใหม่ • รูปแบบ <BR>เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่

  19. ย่อหน้าใหม่ • รูปแบบ <P ALIGN=align type>ข้อความ</P>เราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน<BR> แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่ง<P>อย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง <P ALIGN=align type>ต้องมีคำสั่ง ปิด</P> ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น <P ALIGN=CENTER> ข้อความนี้ ก็จะอยู่ตรงกลาง</P>

  20. เส้นคั้น • รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดยโดย X = ค่าต่าง ๆ เหล่านี้<ALIGN> = CENTER , LEFT , RIGHTCOLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-BSIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบ

  21. การสร้างแบบฟอร์ม • สำหรับฟอร์มใน HTML ถือว่าเป็น สิ่งที่โต้ตอบกับผู้ใช้ ในแบบ interactive คือ เราสามารถ ใช้ฟอร์ม ในการตอบโต้ กับผู้อ่านไซต์ ของเราได้ ทันที เมื่อพูดถึง ฟอร์มก็คง ต้องพูด ถึงคำว่า CGI (Common Gateway Interface) ซึ่งก็คือ โปรแกรม หรือ สคริปท์ตัวหนึ่ง ที่คอยตรวจสอบ และจัดการ กับแบบฟอร์ม รวมทั้ง การประมวลผล ตาม แบบที่เจ้าของ ไซต์ต้องการ โดยมากมัก เขียนขึ้นด้วยภาษา C หรือ Perl แต่ในการใช้ CGI นี้ เป็นเรื่องที่ยุ่งยาก กล่าวคือ ถ้าเราไม่ใช่ ผู้ดูแลระบบ แล้วถือว่าไม่มีสิทธิ์ ซึ่งก็หมาย ความว่า เราต้อง ตัดคุณสมบัติ แบบ Interactive ออกไป แล้วเรา หันมาใช้ Mailto: แทน ซึ่งเราก็ยัง สามารถที่ จะสร้างฟอร์ม ได้เช่นเดิม หรือไม่ ก็ใช้ภาษ าจาวาสคริปท์ มาช่วย โดยเรา ต้องเขียน สคริปท์ขึ้นมา แล้วปะติด ไปกับไฟล์ HTML การประมวลผล ต่าง ๆ ไม่จำเป็น ต้องส่งไปที่ เซิร์ฟเวอร์ แต่สามารถ ประมวลผล บนเครื่อง ของผู้ชม ไซต์ได้ ทันที แต่ในที่นี้ ผมจะขอกล่าว ในส่วน ของการใช้ mailto:

  22. รูปแบบของฟอร์ม • รูปแบบ < FORM METHOD="..." ACTION="..." ENCTYPE"..."></FORM>METHOD=GET/POST โดย GET จะส่งได้ไม่เกิน 255 ตัวอักษร ส่วนใหญ่ใช้ส่งค่าตัวแปรและ URL และ POST จะส่งข้อความไปได้ไม่จำกัด ซึ่งนิยมใช้มากกว่า GETACTION="mailto:myaddress@mysite.co.th" ซึ่งเป็นรูปแบบของการส่งข้อมูลจากฟอร์มไปยังเมล์บ็อกซ์ของเราENCTYPE= "application/x-www-form-urlencoded" เป็นการกำหนด รูปแบบการเก็บข้อมูลของฟอร์ม เพื่อที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ จะใส่หรือไม่ใส่ก็ได้ แต่ถ้าใส่ จะทำให้โปรแกรม mailto: สามารถใช้โปรแกรมเมล์ บางโปรแกรมอ่านข้อมูลที่ถูกเก็บในรูปแบบนี้ได้ทันที เช่น <FORM METHOD=POST ACTION="mailto:info@np.a-net.net.th" ENCTYPE= "application/x-www-form-urlencoded"> </FORM>

  23. Tip • ถ้าผู้กรอกแบบฟอร์มใช้บราวเซอร์จาก Netscape หัวข้อหรือ Subject ของเมล์ที่ส่งมายัง เมล์บ็อกซ์นั้นจะมีหัวข้อว่า"Form posted from Mozilla" แต่ถ้าเป็นตัวอื่นจะเป็น "Form Response" ถ้าคุณไม่ชอบก็สามารถเปลี่ยนได้ในส่วนของ ACTION ดังนี้<FORM METHOD=POST ACTION="mailto:email@myaddress.com?subject="Answer from Product Questonaire"> โดยในส่วนของ Subject นั้นสามารถเปลี่ยนได้ตามใจเรา

  24. การสร้างแบบฟอร์ม • รูปแบบ < INPUT TYPE=TEXT NAME="..." SIZE=n MAXLENGTH=n VALUE="...">• TYPE=TEXT เป็นการกำหนดค่าให้แสดงตัวรับข้อมูลแบบ TEXT • NAME="..." ชื่อหัวข้อ เพื่อบอกให้รู้ว่า ค่าที่ได้รับกลับมานั้น เกี่ยวกับอะไร • SIZE=n เป็นจำนวนขนาดของช่องรับข้อความค่าปกติ 20 ตัวอักษร • MAXLENGTH=n เป็นจำนวนตัวอักษรที่รับได้สูงสุดในช่องรับนั้น ๆ • VALUE="..." ข้อความที่อยู่ระหว่างเครื่องหมายคำพูดจะ ปรากฎอยู่ในช่อรับข้อมูลให้โดยอัตโนมัติ

  25. ช่องป้อนรหัสผ่าน • รูปแบบ < INPUT TYPE=PASSWORD NAME="..." SIZE=n MAXLENGTH=n VALUE="...">รูปแบบคล้ายกับกับการ INPUT ด้วย TEXT ต่างกันเพียงแค่ เปลี่ยนคำว่า TEXT ให้เป็น PASSWORD เท่านั้น ในช่องที่กรอกรหัสหน้าจอ จะแสดงเป็นสัญลักษณ์ "*" เครืองหมายดอกจันแทน เพื่อป้องกันไม่ให้คนอื่นมองเห็น Password :

  26. ปุ่ม Radio Botton • รูปแบบ <INPUT TYPE=RADIO NAME="..." VALUE="..." CHECKED>ปุ่มเลือกแบบนี้สามารถเลือกได้เพียง ปุ่มเดียวเท่านั้น คำสั่ง CHECKED นั้นมีไว้ เพื่อกำหนด ให้ตัวเลือก ถูกเลือก ไว้ก่อนแล้ว โดยเป็นตัวเลือกที่เราคิดว่าผู้กรอกแบบฟอร์มน่าจะเลือก สามารถกำหนดได้ตำแหน่งเดียว ชายหญิง

  27. เช็คบ็อกซ์ • รูปแบบ < INPUT TYPE=CHECKBOX NAME="..." VALUE="..." CHECKED>ปุ่มเลือก แบบนี้ สามารถเลือก หลายปุ่ม คำสั่ง CHECKED สามารถกำหนด ได้หลายตัว ส่วนการตั้งค่าอื่น ๆ เหมือนแบบ Radio Bottonค่าของ name และ value ไม่มีรูปแบบ กำหนดตายตัว ว่าเป็นแบบใด จะกำหนดname ให้เหมือนกันแต่ value ต่างกันหรือ กำหนด name ต่างกัน ส่วน value เหมือนกัน อย่างไรก็ได้ ขอให้เราเข้าใจและประเมินผล ข้อมูลที่ส่งมาได้เท่านั้นเอง คณิตศาสตร์ฟิสิกส์ชีววิทยาเคมี

  28. ตัวรับข้อมูลแบบ TEXTAREA • รูปแบบ< TEXTAREA NAME="..." ROWS=n COLS=n WRAP=OFF/VIRTUAL/SOFT/PHYSICAL/HARD >.........TEXT.........TEXT</TEXTAREA> เราสามารถกำหนดขนาดของกรอบรับข้อความได้ด้วยตัวเอง • • ROWS=n nหมายถึง จำนวนบรรทัดที่ต้องการ • COLS=n nหมายถึง จำนวนความกว้างของกรอบรับข้อความ มีหน่วยเป็น 50 ตัวอักษร • รูปแบบการปัดคำ(Wrap) ปกติไม่ได้ตั้งไว้เราสามารถกำหนดได้ 3 วิธี คือ 1. WRAP=OFF ค่าปกติ ไม่มีการปัดคำขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ จนกว่าผู้กรอกจะกด Enter 2. WRAP=VITUAL หรือ WRAP=SOFT ปัดคำเมื่อสิ้นสุดกรอบข้อความ แต่เป็นการปัดคำแบบหลอก ๆ เฉพาะต่อหน้าผู้กรอกเท่านั้น 3. WRAP=PHYSICAL หรอืWRAP=HARD ปักคำเมื่อสิ้นสุดกรอบรับข้อความ ซึ่งเป็นการปัดจริง ๆ การใช้งานเบราเซอร์บางรุ่นไม่สนับสนุน VITUAL และ PHYSICAL ฉะนั้นทางแก้คือให้ใช้ SOFT และ HARD จะดีกว่า

  29. ปุ่มยกเลิก และ ตกลง • รูปแบบ < INPUT TYPE=SUBMIT VALUE="..." >< INPUT TYPE=RESET VALUE="..." > • Submit มีหน้าที่ไว้ส่งแบบฟอร์มกลับไปยังเจ้าของฟอร์ม • Reset มีไว้สำหรับเคลียร์ค่าฟอร์มทั้งหมดให้กลับอยู่ในรูปแบบเดิมก่อนมีการกรอก • Vauleเป็นการกำหนดคำอธิบายปุ่มแทนค่าปกติคือ Submit Query กับ Reset จะมีหรือไม่มีก็ได้

  30. การแสดงผลแบบรายการ • ในการแสดงข้อมูลบนเว็บเพจนอกจากการแสดงผลแบบปกติทั่วไปแล้วบางครั้งเราอาจมีความจำเป็นต้องจัด รูปการแสดงผลให้เป็นแบบของ รายการ(list) คือ มีการ แสดงข้อมูลในลักษณะที่เป็นหัวข้อซึ่งอาจ มีคำอธิบายหรือ ไม่มีก็ได้ การแสดงข้อมูลแบบรายการจะมีรายการแบบลำดับ (ใช้หมายเลข กำกับ) หรือ รายการแบบไม่มี ลำดับ(ใช้สัญลักษณ์ กำกับ) แต่ไม่ว่า จะเลือกให้มีการ แสดงผลรายการ แบบใด ก็ตามทั้ง 2 ลักษณะ ก็มีลักษณะ การทำงาน ที่เหมือนกัน

  31. รายการแบบใช้สัญลักษณ์กำกับ (Bullet lists) • รูปแบบ<UL> ตัวเปิด<LI> ข้อมูลที่นำมาแสดง<LI> ข้อมูลที่นำมาแสดง</UL> ตัวปิด เป็นการแสดงผลโดยใช้สัญลักษณ์ในการกำกับรายการต่าง ๆ และเราสามารถกำหนดลักษณะของสัญลักษณ์ได้โดยใช้คำสั่ง Type=N ซึ่ง N=circle=วงกลม,disc=วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคำสั่ง ของ <UL> ถ้าต้องการ ให้สัญลักษณ์ เหมือนกัน ทุกรายการ แต่ ถ้าต้องการ ให้แต่ละรายการ ไม่เหมือนกันให้ใส่ในส่วนของ <LI> เช่น <UL><LI Type=disc>รายการที่ 1<LI Type=circle>รายการที่ 2<LI Type=square>รายการที่ 3</UL> เว็บเบราเซอร์ จะแสดง ออกมา เป็น รายการที่ 1 • รายการที่ 2 • รายการที่ 3

  32. รายการแบบใช้ตัวเลขกำกับ (Numbered lists) • รูปแบบ <OL> ตัวเปิด<LI> ข้อมูลที่นำมาแสดง<LI> ข้อมูลที่นำมาแสดง</OL> ตัวปิด เป็นการกำหนดรายการโดยใช้ตัวเลขกำกับเช่น 1 หรือ iและเราสามารถกำหนดค่าเริ่มต้นไว้ที่ <OL> โดยใส่ค่า START=n โดย n= ตัวเลขที่ต้องการเริ่ม และ TYPE=n โดย n= a , A , i , I ซึ่งเป็นชนิดของค่าเริ่มต้น ตามตัวอย่างจะเริ่ม ต้นที่ 3 ชนิดเป็น a เช่น<OL START=3 TYPE=a><LI>รายการที่ 1<LI>รายการที่ 2<LI>รายการที่ 3</OL>เว็บเบราเซอร์ จะแสดง ออกมาเป็น รายการที่ 1 • รายการที่ 2 • รายการที่ 3

  33. รายการแบบใช้ตัวเลขกำกับ (Numbered lists) • เรายังสามารถใช้คำสั่ง TYPE=n ในส่วนของ <LI> ได้ แต่ค่าเริ่มต้นต้องเป็นไปตามค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง <OL><LI TYPE=1>รายการที่ 1<LI>รายการที่ 2<LI>รายการที่ 3</OL><OL> <LI TYPE=a>รายการที่ 1<LI>รายการที่ 2<LI>รายการที่ 3</OL>เว็บเบราเซอร์ จะแสดง ออกมา เป็น รายการที่ 1 • รายการที่ 2 • รายการที่ 3 • รายการที่ 1 • รายการที่ 2 • รายการที่ 3

  34. รายการแบบกลุ่ม (Preformatted Text) • รูปแบบ <PRE>....</PRE>การใช้ คำสั่งนี้ไม่สามารถใช้กับภาษาไทยได้ ใช้ได้แต่ภาษาอังกฤษอย่างเดียวข้อความที่อยู่ภายใน คำสั่ง จะมีขนาดเท่ากัน ทุกตัว แสดงข้อมูลที่อยู่ในรูปของตารางหรือรายงานแผนผังอย่างง่าย ๆ -------------------------------------------------------- Date Time Note -------------------------------------------------------- 20 08.52 - 25 09.50 - 26 10.00 - 28 12.00 - ---------------------------------------------------------

  35. รายการแบบ Extended Quotations • รูปแบบ <BLOCKQUOTE>......</BLOCKQUOTE> คำสั่งนี้สามารถแก้ไขปัญหาการใช้ภาษาไทย ได้การแสดงผลข้อความจะเยื้องขวาและจัดข้อความให้ตัวอักษรตัวแรก ของบรรทัดเริ่มที่ตำแหน่งเดียวกันเช่น <BLOCKQUOTE> <P>Omit needless world.</P> <P>Vigorous writeing is concise.A sentence should contain no annecessary words.</P> ------WillianStrunk,------- </BLOCKQUOTE> เว็บเบราเซอร์ จะแสดงผลเป็นOmit needless world. • Vigorous writeing is concise.A sentence should contain no annecessary words. • ------WillianStrunk,-------

  36. การแสดงผลแบบ Address • รูปแบบ <ADDRESS>....</ADDRESS>ใช้เมื่อ ต้องการ จะพิมพ์ ที่อยู่ของเราเพื่อให้ผู้ที่เข้ามาใช้เว็บเพจสามารถติดต่อกับเราได้ รูปแบบตัวอักษรเป็นตัวเอน เช่น LibertaCo.,Ltd. 215/12 ถนนรามคำแหง ซอยรามคำแหง 24 หัวหมาก บางกะปิ 10310 Tel & Fax : 02 2541241 E-Mail : info@bcoms.net

  37. การใส่รูปภาพลงในเว็บเพจการใส่รูปภาพลงในเว็บเพจ • เมื่อเริ่ม เข้าไป ยังโฮมเพจ ของ เว็บไซต์ แต่ละแห่ง บนอินเตอร์เนต สิ่งแรก ที่มัก เป็นที่ ติดตา ของผู้ ใช้ บริการ ก็คือ การที่ แต่ละ โฮมเพจ จะมี รูปภาพ สวย ๆ แสดง ออกมา มีการ จัดรูปภาพ และข้อความ ที่เป็น ระเบียบ ทำให้อ่าน ง่าย เข้าใจ เนื้อหา ที่ต้องการ ได้อย่าง รวดเร็ว ก่อนที่ เราจะ มารู้ ถึงคำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา จะนำมา ใส่ ใน เวบเพจ เสียก่อน รูปภาพ ที่จะ นำมา ใช้ใส่ ลง ในเวบเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) เป็นเทคนิค การเก็บภาพ โดยให้ จุดสี(pixet) ต่าง ๆ เรียง ต่อกัน จนเกิด เป็นภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล ในอัตรา ส่วน 10:1 โดยขนาด ของไฟล์ ที่เรา นำมา ใช้งาน นั้น อาจมีขนาด เหลือเพียง 10 - 30 % ของขนาดไฟล์ ก่อนจะมีการ บีบ ย่อ ข้อมูล ขนาดของ การบีบ ข้อมูล มีได้ 3 ระดับ (Hight,Middle,Low Compression) ไฟล์ที่ มีการ บีบย่อ ข้อมูล มากที่สุด จะได้ ไฟล์ที่มีขนาด เล็กที่สุด แต่คุณภาพ ก็ลดลง ตาม ไปด้วย หากต้องการ ภาพที่มี คุณภาพดี ที่สุด ขนาดของ ไฟล์ก็จะ ใหญ่ ที่สุดเช่นกัน

  38. การใส่รูปภาพลงในเว็บเพจการใส่รูปภาพลงในเว็บเพจ • รูปแบบ <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>

  39. การแสดงภาพฉากหลัง • รูปแบบ BACKGROUND="picture"กำหนด แอตทริบิวต์BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif">

  40. การเชื่อมโยงข้อมูล (Link) • เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการเชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กันข้อความ ที่ถูกกำหนดให้เชื่อมโยงกับฐานข้อมูลอื่น ๆ บนเว็บเบราเซอร์จะแสดงผลเป็นตัวอักษร ที่มีสีแตกต่างจากอักษรทั่วไป และอาจจะมี ขีดเส้นใต้ข้อความนั้นด้วย โดยทั่วไป ตัวอักษรที่แสดง ผลอยู่บน เวบเบราเซอร์ จะมีสีดำ ปนขาว (หรือสีเทา) แต่สำหรับ ข้อความ ที่ใช้เป็นตัวเชื่อมข้อมูลนั้นจะเป็นตัวอักษร สีน้ำเงิน หรือ อย่างอื่น ตาม ที่สร้างขึ้นมาเมื่อเลื่อน เมาส์ ไปชี้ที่ ข้อความ ซึ่ มีการเชื่อมโยงของรูปแบบ ตัวชี้ จะเปลี่ยนจาก สัญลักษณ์ ลูกศร ไปเป็นรูป มือแทน และที่บริเวณแถบแสดงสถานะด้านล่าง จะแสดงถึงตำแหน่งของจุด หมายที่ ข้อความจะเชื่อมโยงไปให้เราเห็น

  41. ประเภทการเชื่อมโยง • - การเชื่อมโยงภายในเว็บไซต์- การเชื่อมโยงข้อมูลนอกเว็บไซต์- การเชื่อมโยงข้อมูล FTP- การเชื่อมโยงข้อมูล E-Mail

  42. การเชื่อมโยงภายในเว็บไซต์การเชื่อมโยงภายในเว็บไซต์ • รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>

  43. การเชื่อมโยงข้อมูลนอกเว็บไซต์ • รูปแบบ <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>

  44. การเชื่อมโยงข้อมูล FTP • รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>

  45. การเชื่อมโยงข้อมูล E-Mail • รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>

  46. การสร้างตาราง • การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา

  47. โครงสร้างตาราง • <TABLE><TR><TH>หัวข้อตาราง<TD>รายละเอียดย่อย<TR><TH>หัวข้อตาราง<TD>รายละเอียดย่อย</TABLE>

  48. คุณสมบัติของตาราง • <TABLE>ALIGN=align-typeBACKGROUND=urlBGCOLOR=colorBORDER=nCELLPADDING=nCELLSPACING=nWIDTH=nHEIGHT=n

  49. <TR> • ALIGN=align-typeBACKGROUND=urlBGCOLOR=colorBORDERCOLOR=colorVALIGN=align-type

  50. <TH> • ALIGN=align-typeBACKGROUND=urlBGCOLOR=colorBORDERCOLOR=colorCOLSPAN=nROWSPAN=nVALIGN=align-type

More Related