เริ่มสร้างเว็บเพจ ด้วย 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
  • ลงนามในสมุดเยี่ยม
  • แลกเปลี่ยนความเห็นในกระดานข่าว
  • บริการสำหรับคนช่างคุย