เริ่มสร้างเว็บเพจ ด้วย HTML + Dynamic HTML

ผู้เขียน: เกรียงไกร วิชระอนนท์
ISBN: 974-86694-3-2
จำนวนหน้า: xxx หน้า
ขนาด: 14.5 x 21 ซม.
รูปแบบหนังสือ: หนังสือขาวดำ

ราคาปก: 195 บาท
ราคาสั่งซื้อ: 170 บาท
ส่งหน้านี้ให้เพื่อน  


  • ครบสูตรทั้งวิธีการสร้างข้อความ, ตาราง, ฟอร์ม, เฟรม, กราฟิก และมัลติมีเดียเว็บเพจ
  • เนื้อหาครอบคลุมถึงมาตรฐานที่สำคัญ ทั้ง W3C HTML, Dynamic HTML, สไตล์ชีต CSS/CSSP และ Internet Explorer, Netscape Navigator/Communicator เวอร์ชันล่าสุด
  • พร้อมโบนัสพิเศษ เพื่อพัฒนาเป็นเว็บมาสเตอร์มืออาชีพ ทั้งแนะนำซอฟต์แวร์ช่วยทำงานต่างๆ สารพัด, วิธีหาเนื้อที่สรางโฮมเพจฟรี! จนถึงกลเม็ดการเติมลูกเล่นในเว็บไซต์


บทที่ 1 ก่อนจะเริ่มงาน

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

  • สำรวจเครือข่ายเวิลด์ไวด์เว็บ
  • กว่าจะเป็น HTML
  • เว็บเพจและเว็บเบราเซอร์
  • URL บอกอะไร?
  • เตรียมตัวเตรียมใจก่อนมีเว็บไซต์
  • สร้างไฟล์ HTML
  • สร้างเว็บไซต์

บทที่ 2 สัมผัส HTML

พื้นฐานของภาษา HTML ประกอบด้วยข้อมูลที่เป็น "เนื้อหาของเว็บเพจ" และ "คำสั่งกำกับ" ที่บอกให้เว็บเบราเซอร์รู้ว่าต้องจัดการและแสดงข้อมูลอย่างไร จึงจะได้เว็บเพจที่มีลักษณะตามต้องการ ในบทนี้เราจะได้รู้จักแท็กบางส่วนที่จำเป็นในการสร้างเว็บเพจอย่างง่ายๆ

  • รูปแบบของแท็ก
  • โครงสร้างเอกสาร HTML
  • เตือนความจำด้วยหมายเหตุ

บทที่ 3 จัดระเบียบให้เป็นระบบ

เว็บเพจแรกๆ ที่กำเนิดขึ้นมาในโลก เป็นเว็บเพจที่มีแต่ข้อความล้วนๆ และแน่นอนว่า แท็กของภาษา HTML รุ่นแรกๆ ก็ย่อมจะประกอบด้วยแท็กสำหรับจัดข้อความในเว็บเพจเป็นหลัก อาทิ แท็กสำหรับขึ้นบรรทัดใหม่, ขึ้นย่อหน้าใหม่, จัดให้ข้อความชิดซ้าย-ขวา รวมไปถึงแสดงเส้นคั่นหน้า ต่างก็ใช้กันมานานจนถึงปัจจุบัน

  • เมื่อขึ้นบรรทัดใหม่
  • เว้นเป็นย่อหน้าใหม่
  • จัดวางไว้กึ่งกลาง
  • จัดตามต้นฉบับ
  • ตีเส้นคั่นหน้า

บทที่ 4 เล่นกับตัวอักษร

การตกแต่งตัวอักษรเป็นตัวหนาหรือตัวเอน เป็นเทคนิคเพื่อเน้นความสำคัญ และดึงดูดความสนใจให้กับข้อความในเว็บเพจ รวมถึงการกำหนดให้เว็บเบราเซอร์แสดงรูปแบบตัวอักษร (font) ในลักษณะต่างๆ ล้วนเป็นประโยชน์ต่อการสร้างเว็บเพจให้สะดุดตาทั้งสิ้น

  • หัวข้อ-หัวเรื่อง
  • ตัวหนา ตัวเอน และขีดเส้นใต้
  • ตัวอักษรแบบความกว้างคงที่
  • เลือกฟอนต์ให้ตรงใจ
  • ลดและเพิ่มขนาดตัวอักษร
  • เติมตัวอักษรพิเศษ
  • แก้ปัญหาการใช้ภาษาไทย

บทที่ 5 แบ่งข้อมูลให้เป็นข้อย่อย

เมื่อจำเป็นต้องแสดงเนื้อหาในลักษณะรายการ หรือแจกแจงข้อมูลออกเป็นข้อๆ ภาษา HTML ก็มีแท็กช่วยสร้างรายการให้อ่านได้ง่ายขึ้น แสดงให้เห็นถึงความแตกต่างจากเนื้อหาปกติได้ชัดเจนขึ้น เราจะรวมเรียกข้อมูลที่แสดงผลในลักษณะดังกล่าวอย่างสั้นๆ ว่า ลิสต์ (list)

  • กำหนดลิสต์แบบไม่เรียงลำดับ
  • กำหนดลิสต์แบบเรียงลำดับ
  • สร้างรายการศัพท์
  • ลิสต์แบบอื่นๆ

บทที่ 6 เติมสีสันให้เว็บสวย

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

  • ระบบสีใน HTML
  • เปลี่ยนสีข้อความทั่วไป
  • เปลี่ยนสีพื้นหลังเว็บเพจ
  • แต่งสีข้อความเฉพาะจุด
  • อะไรที่ต้องระวัง?

บทที่ 7 สื่อความหมายด้วยรูปภาพ

สาระสำคัญในบทนี้จะเน้นที่การใส่รูปภาพลงในเว็บเพจโดยใช้แท็ก <IMG> ซึ่งสามารถปรับแต่งได้หลายรูปแบบ รวมถึงทำความรู้จักกับไฟล์รูปภาพแบบต่างๆ และวิธีเตรียมรูปภาพก่อนจะนำไปใช้ ทั้งในลักษณะปกติและปูเป็นพื้นหลังของเว็บเพจก็ได้เช่นกัน

  • รูปภาพกับ HTML
  • ไปหาภาพมาใช้กันเถอะ
  • ใส่ภาพลงในเว็บเพจ
  • วางตำแหน่งให้ชวนมอง
  • คุณสมบัติอื่นๆ
  • ซ้อนภาพในพื้นหลัง

บทที่ 8 โยงใยข้อมูล

ลิงก์ (link) เป็นจุดเด่นสำคัญอย่างหนึ่งของเว็บเพจ โดยช่วยให้เราโยงเอาสิ่งต่างๆ ในเวิลด์ไวด์เว็บเข้าไว้ด้วยกัน ไม่ว่าจะเป็นเว็บเพจอื่น, ไฟล์ข้อมูล หรือแม้แต่อีเมลแอดเดรส ซึ่งอยู่ห่างไกลออกไปขนาดไหนก็ตาม แค่คลิกเพียงครั้งเดียวในเว็บเบราเซอร์ ก็ทำให้นักท่องเว็บไปถึงปลายทางได้แทบจะในทันที

  • แปลงข้อความให้เป็นลิงก์
  • แปลงภาพให้เป็นลิงก์
  • สู่ปลายทางการลิงก์
  • สร้างลิงก์ให้มีสีสัน
  • สร้างหลายลิงก์ในภาพเดียวด้วย image map

บทที่ 9 ไม่ใช่เพียงตารางข้อมูล

ในเว็บเพจ เราไม่ได้ใช้ตารางเพียงเพื่อแสดงข้อมูลเท่านั้น เนื่องมาจากว่าภาษา HTML ไม่ได้สร้างขึ้นมาเพื่อให้จัดตำแหน่งของสิ่งต่างๆ ในเว็บเพจได้อย่างแม่นยำแน่นอน ตารางยังช่วยให้เราจัดหน้าตาของเว็บเพจได้หลากหลายและซับซ้อนมากยิ่งขึ้น ไม่แพ้เอกสารชนิดใดๆ เลยทีเดียว

  • เรียนรู้โครงสร้าง
  • ปรับเปลี่ยนรูปแบบ
  • ตกแต่งตารางด้วยภาพและสี
  • คำอธิบายและข้อมูลหัวตาราง
  • ใส่ตารางซ้อนตาราง
  • ใช้ตารางช่วยจัดหน้าเว็บเพจ

บทที่ 10 แบ่งจอภาพด้วยเฟรม

การแบ่งเว็บเพจออกเป็นส่วนๆ ด้วยเฟรม (frame) เป็นอีกวิธีการหนึ่งที่ใช้ช่วยจัดโครงสร้างของเนื้อหาให้เป็นสัดส่วน โดยแต่ละส่วนหรือเฟรมนั้นก็เป็นเว็บเพจหนึ่ง ซึ่งแสดงผลเป็นอิสระกับเฟรมอื่น ทำให้เราสามารถสร้างเว็บไซต์ที่มีหน้าตาแปลกใหม่ได้ง่ายๆ อีกด้วย

  • พื้นฐานเฟรม
  • แบ่งเฟรมแบบต่างๆ
  • ปรับแต่งลักษณะเฟรม
  • กำหนดชื่อและสร้างลิงก์ให้เฟรม
  • สร้างเฟรมแบบ inline
  • ข้อคิดเมื่อจะนำเฟรมไปใช้งาน

บทที่ 11 แบบฟอร์มสำหรับข้อมูลตอบกลับ

วิธีที่ง่ายที่สุดเมื่อต้องการแลกเปลี่ยนข้อมูลระหว่างผู้สร้างและผู้ใช้เว็บเพจ นั่นก็คือ การใช้แบบฟอร์ม (form) เพราะผู้สร้างเว็บเพจสามารถกำหนดได้ว่า จะให้ผู้ใช้ป้อนข้อมูลอย่างไร เช่น ป้อนเป็นข้อความ หรือเลือกจากรายการที่มีมาให้ ไม่เพียงแต่เท่านั้น ฟอร์มยังเป็นประตูไปสู่การสร้างเว็บเพจแบบที่โต้ตอบกับผู้ใช้ได้ เมื่อนำมาใช้ควบคู่กับโปรแกรม CGI หรือ Dynamic HTML

  • ฟอร์มทำงานอย่างไร
  • ฟิลด์รับข้อมูลชนิดข้อความ
  • ฟิลด์รับข้อมูลชนิดรายการเลือกตอบ
  • ฟิลด์ข้อมูลแบบซ่อน
  • จะส่งหรือยกเลิกข้อมูลในฟอร์ม?
  • จัดกลุ่มฟิลด์รับข้อมูล

บทที่ 12 มัลติมีเดียในโลกของเว็บ

เวิลด์ไวด์เว็บในปัจจุบัน มิได้มีเพียงข้อความกับรูปภาพนิ่งๆ เท่านั้น ด้วยความสามารถด้านมัลติมีเดียที่เพิ่มขึ้นของคอมพิวเตอร์และเว็บเบราเซอร์สมัยใหม่ ประกอบกับความสามารถของโปรแกรมเสริมต่างๆ ทำให้มีการนำเอาทั้งข้อมูลที่เป็นเสียง, เพลง, ภาพเคลื่อนไหว หรือแม้แต่รูปภาพ 3 มิติ เข้ามาประกอบในเว็บเพจ

  • เบื้องหลังมัลติมีเดียสำหรับเว็บเพจ
  • เล่นกับเสียง-เพลินกับเพลง
  • วิดีโอบนเว็บ
  • ภาพเคลื่อนไหวง่ายๆ กับ animated GIF
  • แสดงผลทันใจด้วย streaming technology
  • มัลติมีเดียเต็มพิกัดด้วย Shockwave
  • ควบคุมเว็บด้วย Java และ JavaScript
  • สู่โลกเสมือนจริงกับ VRML
  • อนาคตของมัลติมีเดียในเว็บ

บทที่ 13 พัฒนาเว็บเพจให้ทันสมัยด้วยสไตล์ชีต

เนื่องจากความสามารถในการจัดหน้าตาของเว็บเพจด้วย HTML ยังมีข้อจำกัดอยู่มาก สไตล์ชีต (style sheet) จึงถือกำเนิดขึ้นมาเพื่อใช้ควบคุมการแสดงผลเว็บเพจ ไม่ว่าจะเป็นรูปแบบตัวอักษร, รูปภาพ, สี ฯลฯ และสามารถใช้ร่วมกับ HTML ได้อย่างลงตัว

  • อะไรคือสไตล์ชีต
  • นำสไตล์ชีตมาใช้งาน
  • แนะนำพรอเพอร์ตีต่างๆ ที่น่าสนใจ
  • ว่าด้วยเรื่อง class
  • CSS ในยุคที่ 2

บทที่ 14 ก้าวอีกขั้นกับ Dynamic HTML

เมื่อเรานำภาษา HTML รวมเข้ากับสไตล์ชีต แล้วควบคุมด้วยภาษาสคริปต์ ก็จะกลายเป็นเทคโนโลยีที่เรียกว่า 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 editor
  • สะดวกสบายสไตล์ web page designer
  • HTML validator สำหรับผู้หลงใหลใน HTML
  • โอนถ่ายข้อมูลด้วย FTP client
  • link checker สำหรับลิงก์ที่ไม่ผิดพลาด
  • สร้าง image map ให้ทันใจ
  • แต้มสไตล์ชีตด้วย style sheet generator

ภาคผนวก ข จับจองเนื้อที่สร้างโฮมเพจ

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

  • โฮมเพจแจกฟรี
  • เลือกหาที่ที่ถูกใจ
  • มาเป็นชาวเมือง GeoCities กันเถอะ
  • โฆษณาเว็บไซต์

ภาคผนวก ค สิ่งละอันพันละน้อยเพื่อมือใหม่

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

  • กลเม็ดใช้ชื่อ URL แบบกระชับเพื่อให้จำง่าย
  • นับจำนวนผู้มาเยือนด้วย counter
  • ลงนามในสมุดเยี่ยม
  • แลกเปลี่ยนความเห็นในกระดานข่าว
  • บริการสำหรับคนช่างคุย