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