เริ่มสร้างเว็บเพจ ด้วย XHTML + Dynamic HTML
ผู้เขียน: เกรียงไกร วิชระอนนท์
ISBN: 974-90536-7-2
จำนวนหน้า: xxx หน้า
ขนาด: 14.5 x 21 ซม.
รูปแบบหนังสือ:
หนังสือขาวดำ
ราคาปก: 195 บาท
ราคาสั่งซื้อ: 170 บาท
- ปรับปรุงเนื้อหาจากหนังสือ "เริ่มสร้างเว็บเพจด้วย HTML + Dynamic HTML" เพื่อความทันสมัย พร้อมทั้งเผยวิธีการปรับเปลี่ยนเว็บ HTML ให้เป็นเว็บ XHTML แบบทันใจ
บทที่ 1 ก่อนจะเริ่มงาน
ปูพื้นฐานที่ผู้สร้างเว็บเพจควรรู้ก่อนจะลงมือจริง เริ่มจาก ทำความรู้จักกับเครือข่ายเวิลด์ไวด์เว็บ และประวัติความเป็นมาอย่างย่อของภาษา HTML และ XHTML รวมทั้งศัพท์พื้นฐานบางคำ ที่มักจะได้ยินได้เห็นกันบ่อยๆ ในวงการเว็บ แล้วจึงมาดูกันว่า การสร้างเว็บเพจสักเพจหนึ่ง เราจะต้องเตรียมตัวอย่างไร
- สำรวจเครือข่ายเวิลด์ไวด์เว็บ
- กว่าจะเป็น HTML
- เว็บเพจและเว็บเบราเซอร์
- URL บอกอะไร?
- บอกลา HTML แล้วพบกับ XHTML
- สรุปแล้ว XHTML ดีอย่างไร?
- เตรียมตัวเตรียมใจก่อนมีเว็บไซต์
- สร้างไฟล์ XHTML
- สร้างเว็บไซต์
บทที่ 2 สัมผัส XHTML
พื้นฐานของภาษา XHTML ประกอบด้วยข้อมูลที่เป็น "เนื้อหาของเว็บเพจ" และ "คำสั่งกำกับ" ที่บอกให้เว็บเบราเซอร์รู้ว่า ต้องจัดการและแสดงข้อมูลอย่างไร จึงจะได้เว็บเพจที่มีลักษณะตามต้องการ ในบทนี้เราจะได้รู้จักแท็กบางส่วนที่จำเป็นในการสร้างเว็บเพจอย่างง่ายๆ
- รูปแบบของแท็ก
- โครงสร้างเอกสาร XHTML
- เตือนความจำด้วยหมายเหตุ
บทที่ 3 จัดระเบียบ ให้เป็นระบบ
เว็บเพจแรกๆ ที่กำเนิดขึ้นมาในโลก เป็นเว็บเพจที่มีแต่ข้อความล้วนๆ และแน่นอนว่าแท็กของภาษา XHTML รุ่นแรกๆ ก็ย่อมจะประกอบด้วยแท็กสำหรับจัดข้อความในเว็บเพจเป็นหลัก อาทิ แท็กสำหรับขึ้นบรรทัดใหม่, ขึ้นย่อหน้าใหม่, จัดให้ข้อความชิดซ้าย-ขวา รวมไปถึงแสดงเส้นคั่นหน้า ต่างก็ใช้กันมานานจนถึงปัจจุบัน
- เมื่อขึ้นบรรทัดใหม่
- เว้นเป็นย่อหน้าใหม่
- จัดวางไว้กึ่งกลาง
- จัดตามต้นฉบับ
- ตีเส้นคั่นหน้า
บทที่ 4 เล่นกับตัวอักษร
การตกแต่งตัวอักษรเป็นตัวหนาหรือตัวเอน เป็นเทคนิคเพื่อเน้นความสำคัญ และดึงดูดความสนใจให้กับข้อความในเว็บเพจ รวมถึงการกำหนดให้เว็บเบราเซอร์แสดงรูปแบบตัวอักษร (font) ในลักษณะต่างๆ ล้วนเป็นประโยชน์ต่อการสร้างเว็บเพจให้สะดุดตาทั้งสิ้น
- หัวข้อ-หัวเรื่อง
- ตัวหนา ตัวเอน และขีดเส้นใต้
- ตัวอักษรแบบความกว้างคงที่
- เลือกฟอนต์ให้ตรงใจ
- ลดและเพิ่มขนาดตัวอักษร
- เติมตัวอักษรพิเศษ
- แก้ปัญหาการใช้ภาษาไทย
บทที่ 5 แบ่งข้อมูล ให้เป็นข้อย่อย
เมื่อจำเป็นต้องแสดงเนื้อหาในลักษณะรายการ หรือแจกแจงข้อมูลออกมาเป็นข้อๆ ภาษา XHTML ก็มีแท็กช่วยสร้างรายการให้อ่านได้ง่ายขึ้น แสดงให้เห็นถึงความแตกต่างจากเนื้อหาปกติได้ชัดเจนขึ้น เราจะเหมารวมเรียกข้อมูลที่แสดงผลในลักษณะดังกล่าวอย่างสั้นๆ ว่า ลิสต์ (list)
- กำหนดลิสต์แบบไม่เรียงลำดับ
- กำหนดลิสต์แบบเรียงลำดับ
- สร้างรายการศัพท์
- ลิสต์แบบอื่นๆ
บทที่ 6 เติมสีสัน ให้เว็บสวย
องค์ประกอบต่างๆ ในเว็บเพจ ไม่ว่าจะเป็นข้อความ, ตัวอักษร หรือสีพื้นหลังของเว็บเพจ ล้วนนำมาปรับแต่งสีสันได้ด้วยกันแทบทั้งสิ้น แต่การใช้สีในเว็บเพจก็เป็นเหมือนดาบสองคม เพราะถ้าใช้อย่างไม่ระวังแล้ว อาจถึงกับทำให้เว็บเพจนั้น ดูด้อยค่าลงไปก็ได้
- ระบบสีใน XHTML
- เปลี่ยนสีข้อความทั่วไป
- เปลี่ยนสีพื้นหลังเว็บเพจ
- แต่งสีข้อความเฉพาะจุด
- อะไรที่ต้องระวัง?
บทที่ 7 สื่อความหมายด้วยรูปภาพ
สาระสำคัญในบทนี้จะเน้นที่การใส่รูปภาพลงในเว็บเพจ โดยใช้แท็ก img ซึ่งสามารถปรับแต่งได้หลายรูปแบบ รวมถึงทำความรู้จักกับไฟล์รูปภาพแบบต่างๆ และวิธีเตรียมรูปภาพก่อนจะนำไปใช้ ทั้งในลักษณะปกติ และปูเป็นพื้นหลังของเว็บเพจก็ได้เช่นกัน
- รูปภาพกับ XHTML
- ไปหาภาพมาใช้กันเถอะ
- ใส่ภาพลงในเว็บเพจ
- วางตำแหน่งให้ชวนมอง
- คุณสมบัติอื่นๆ
- ซ้อนภาพในพื้นหลัง
บทที่ 8 โยงใยข้อมูล
ลิงก์ (link) เป็นจุดเด่นสำคัญอย่างหนึ่งของเว็บเพจ โดยช่วยให้เราโยงเอาสิ่งต่างๆ ในเวิลด์ไวด์เว็บเข้าไว้ด้วยกัน ไม่ว่าจะเป็นเว็บเพจอื่น, ไฟล์ข้อมูล หรือแม้แต่อีเมลแอดเดรส ซึ่งอยู่ห่างไกลออกไปขนาดไหนก็ตาม แค่คลิกเพียงครั้งเดียวในเว็บเบราเซอร์ ก็ทำให้นักท่องเว็บไปถึงปลายทางได้แทบจะในทันที
- แปลงข้อความให้เป็นลิงก์
- แปลงภาพให้เป็นลิงก์
- สู่ปลายทางการลิงก์
- ติดต่อกับวินโดว์และเฟรม
- สร้างลิงก์ให้มีสีสัน
- สร้างหลายลิงก์ในภาพเดียวด้วย image map
บทที่ 9 ไม่ใช่เพียงตารางข้อมูล
ในเว็บเพจ เราไม่ได้ใช้ตารางเพียงเพื่อแสดงข้อมูลเท่านั้น เนื่องมาจากว่าภาษา XHTML ไม่ได้สร้างขึ้นมาเพื่อให้จัดตำแหน่งของสิ่งต่างๆ ในเว็บเพจได้อย่างแม่นยำแน่นอน ตารางยังช่วยให้เราจัดหน้าตาของเว็บเพจได้หลากหลายและซับซ้อนมากยิ่งขึ้น ไม่แพ้เอกสารชนิดใดๆ เลยทีเดียว
- เรียนรู้โครงสร้าง
- ปรับเปลี่ยนรูปแบบ
- ตกแต่งตารางด้วยภาพและสี
- คำอธิบายและข้อมูลหัวตาราง
- ใส่ตารางซ้อนตาราง
- ใช้ตารางช่วยจัดหน้าเว็บเพจ
บทที่ 10 แบ่งจอภาพด้วยเฟรม
การแบ่งเว็บเพจออกเป็นส่วนๆ ด้วยเฟรม (frame) เป็นอีกวิธีการหนึ่งที่ใช้ช่วยจัดโครงสร้างของเนื้อหาให้เป็นสัดส่วน โดยแต่ละส่วนหรือเฟรมนั้นก็เป็นเว็บเพจหนึ่ง ซึ่งแสดงผลเป็นอิสระกับ เฟรมอื่น ทำให้เราสามารถสร้างเว็บไซต์ที่มีหน้าตาแปลกใหม่ได้ง่ายๆ อีกด้วย
- พื้นฐานเฟรม
- แบ่งเฟรมแบบต่างๆ
- ปรับแต่งลักษณะเฟรม
- กำหนดชื่อและสร้างลิงก์ให้เฟรม
- สร้างเฟรมแบบ inline
- ข้อคิดเมื่อจะนำเฟรมไปใช้งาน
บทที่ 11 แบบฟอร์มสำหรับข้อมูลตอบกลับ
วิธีที่ง่ายที่สุด เมื่อต้องการแลกเปลี่ยนข้อมูลระหว่างผู้สร้าง และผู้ใช้เว็บเพจ นั่นก็คือการใช้แบบฟอร์ม (form) เพราะผู้สร้างเว็บเพจสามารถกำหนดได้ว่า จะให้ผู้ใช้ป้อนข้อมูลอย่างไร เช่น ป้อนเป็นข้อความ หรือเลือกจากรายการที่มีมาให้ ไม่เพียงแต่เท่านั้น ฟอร์มยังเป็นประตูไปสู่การสร้างเว็บเพจแบบที่โต้ตอบกับผู้ใช้ได้ เมื่อนำมาใช้ควบคู่กับโปรแกรม CGI หรือ Dynamic HTML
- ฟอร์มทำงานอย่างไร
- ฟิลด์รับข้อมูลชนิดข้อความ
- ฟิลด์รับข้อมูลชนิดรายการเลือกตอบ
- ฟิลด์ข้อมูลแบบซ่อน
- จะส่งหรือยกเลิกข้อมูลในฟอร์ม?
- จัดกลุ่มฟิลด์รับข้อมูล
บทที่ 12 มัลติมีเดียในโลกของเว็บ
เวิลด์ไวด์เว็บในปัจจุบัน มิได้มีเพียงข้อความกับรูปภาพนิ่งๆ เท่านั้น ด้วยความสามารถด้านมัลติมีเดียที่เพิ่มขึ้นของคอมพิวเตอร์ และเว็บเบราเซอร์สมัยใหม่ ประกอบกับความสามารถของโปรแกรมเสริมต่างๆ ทำให้มีการนำเอาทั้งข้อมูลที่เป็นเสียง, เพลง, ภาพเคลื่อนไหว หรือแม้แต่รูปภาพ 3 มิติ เข้ามาประกอบในเว็บเพจ
- เบื้องหลังมัลติมีเดียสำหรับเว็บเพจ
- เล่นกับเสียง-เพลินกับเพลง
- วิดีโอบนเว็บ
- ภาพเคลื่อนไหวง่ายๆ กับ animated GIF
- แสดงผลทันใจ ด้วย streaming technology
- มัลติมีเดียเต็มพิกัดด้วย Shockwave
- ควบคุมเว็บด้วย Java และ JavaScript
- สู่โลกเสมือนจริงกับ VRML
- อนาคตของมัลติมีเดียในเว็บ
บทที่ 13 พัฒนาเว็บเพจให้ทันสมัยด้วยสไตล์ชีต
เนื่องจากความสามารถในการจัดหน้าตาของเว็บเพจ ด้วย HTML ยังมีข้อจำกัดอยู่มาก สไตล์ชีต (style sheet) จึงถือกำเนิด ขึ้นมาเพื่อใช้ควบคุมการแสดงผลเว็บเพจ ไม่ว่าจะเป็นรูปแบบตัวอักษร, รูปภาพ, สี ฯลฯ และสามารถใช้ร่วมกับ HTML หรือ XHTML ได้อย่างลงตัว
- อะไรคือสไตล์ชีต
- นำสไตล์ชีตมาใช้งาน
- แนะนำพรอเพอร์ตีต่างๆ ที่น่าสนใจ
- ว่าด้วยเรื่อง class
- CSS ในยุคที่ 2
บทที่ 14 ก้าวอีกขั้นกับ Dynamic HTML
เมื่อเรานำภาษา HTML หรือ XHTML รวมเข้ากับสไตล์ชีต แล้ว ควบคุมด้วยภาษาสคริปต์ ก็จะกลายเป็นเทคโนโลยีที่เรียกว่า Dynamic HTML ซึ่งเป็นแนวคิดใหม่ในการสร้างเว็บเพจให้สามารถเปลี่ยนแปลง และโต้ตอบกับผู้ใช้ได้ด้วยตัวเอง โดยแทบจะไม่ต้องอาศัยโปรแกรม CGI คอยช่วยเหลือให้ยุ่งยากเหมือนสมัยก่อนอีกต่อไป
- สวัสดี Dynamic HTML
- มีอะไรในกอไผ่ DHTML
- Microsoft ปะทะ Netscape
- ลดช่องว่างระหว่างเบราเซอร์
บทที่ 15 ลองของจริง Dynamic HTML
การเรียนรู้หลักการของ Dynamic HTML ไม่ใช่เรื่องยาก แต่ถ้าไม่ได้ทดลองใช้งานดูด้วยตัวเองแล้ว ก็คงจะเข้าถึงแก่นของ Dynamic HTML และแก้ไขปัญหาที่อาจเกิดขึ้นไม่ได้แน่ ตัวอย่างการประยุกต์ใช้ Dynamic HTML ในบทนี้จะช่วยให้ผู้อ่านเรียนรู้ได้รวดเร็วขึ้น
- สร้างโจทย์และเงื่อนไข
- ออกแบบยูสเซอร์อินเทอร์เฟซ
- เทียบความแตกต่างของ position
- ทำข้อความวิ่งด้วย left
- เปิดปิดกล่องด้วย width และ height
- ซ่อนแล้วแสดงด้วย visibility
- ข้อความวิ่งแบบ 3 มิติกับ z-index
- นำส่วนต่างๆ มาใช้งานร่วมกัน
ภาคผนวก ก เปลี่ยนเว็บ HTML ให้เป็น XHTML
จะทำอย่างไรดี ในเมื่อเว็บไซต์ของคุณสร้างมานานแล้วด้วยภาษา HTML และคุณก็ไม่อยากจะตั้งต้นทำใหม่ทั้งหมดให้เป็น XHTML หรอก อันที่จริงมีวิธีที่จะเปลี่ยนเว็บเพจเก่าให้เข้ายุค XHTML ทั้งหมด เพียงแต่คุณทำตามขั้นตอนที่จะแจกแจงอย่างละเอียดในบทนี้
- แบบที่ 1 แปลง HTML เป็น XHTML ด้วยตัวเอง
- แบบที่ 2 แปลง HTML เป็น XHTML โดยใช้โปรแกรมช่วย
ภาคผนวก ข จับจองเนื้อที่สร้างโฮมเพจ
เมื่อเสร็จจากงานสร้างเว็บไซต์แล้ว ขั้นตอนต่อไปก็คือ หาที่ เหมาะๆ สำหรับเป็น "บ้าน" ให้กับเว็บไซต์ของเราในเวิลด์ไวด์เว็บ โชคดีที่มีบริการให้ที่อยู่อาศัยสำหรับโฮมเพจโดยไม่ต้องเสียค่าเช่า นั่นคือบริการโฮมเพจฟรี ซึ่งมีอยู่มากมายให้เลือกตามความพอใจ แต่ก็ต้องพิจารณาให้รอบคอบกันก่อนจะย้ายเข้าไปอยู่อย่างถาวร
- โฮมเพจแจกฟรี
- เลือกหาที่ที่ถูกใจ
ภาคผนวก ค สิ่งละอันพันละน้อยเพื่อมือใหม่
สำหรับนักสร้างเว็บเพจมือใหม่ มีข้อจำกัดหลายประการที่ภาษา XHTML หรือแม้แต่ Dynamic HTML ไม่สามารถทำได้ ตัวอย่าง ง่ายๆ เช่น การนับจำนวนผู้ที่เข้ามาแวะชมโฮมเพจ ฯลฯ ซึ่งต้องอาศัย โปรแกรม CGI ที่สร้างได้ไม่ง่ายนัก แต่ในปัจจุบันมีเว็บไซต์หลายแห่ง ที่ให้บริการประเภทเหล่านี้ฟรี โดยที่เราไม่ต้องเขียนโปรแกรม CGI ขึ้น มาใช้เองเลย
- กลเม็ดใช้ชื่อ URL แบบกระชับเพื่อให้จำง่าย
- นับจำนวนผู้มาเยือนด้วย counter
- ลงนามในสมุดเยี่ยม
- แลกเปลี่ยนความเห็นในกระดานข่าว
- บริการสำหรับคนช่างคุย