( คัดลอกจาก นิตยสาร internt tod@y ปีที่3 ฉบับที่ 36 : มิถุนายน 2541 )

23 กลเม็ด เคล็ดลับ การใช้ตัวอักษรบนเว็บเพจ


(เว็บเพจนี้ยาววววมากกก เป็นตัวอย่างที่ไม่ดีในการทำเว็บเพจ โปรดรออ่านเนื้อใน ว่าไม่ดียังไง)
ตัวอักษรเป็นสื่อที่ใช้สื่อสารกับผู้ชมเว็บเพจได้ดีที่สุด ดังนั้นคุณจึงควรพิถีพิถันกับมันมากขึ้นกว่าที่เคยคิดไว้

ศิลปะแห่งการเลือกสรรตัวอักษร(typography) เพื่อใช้ในเวิร์ดไวด์เว็บไม่ว่าจะเป็นการเลือกแบบ , การวาง ตำแหน่ง หรือการซ้อนทับที่มีอยู่ในวันนี้ ก็ยังไม่เป็นที่น่าพอใจนัก อุปสรรคสำคัญประการหนึ่งก็คือ หน้าตา ของเว็บเพจมักจะไม่คงตัว เพราะแปรเปลี่ยนไปตามบราวเซอร์และเว็บเพจ ดังนั้น ไม่ว่านักออกแบบ จะคิดค้น และสร้างสรรค์เว็บเพจที่สวยหรูปานใดก็ตาม ก็ไม่อาจแน่ใจได้เลยว่า ผู้ดูจะได้ดูเว็บเพจที่สวยงาม สมความตั้งใจของเขาหรือเปล่า
จนกระทั่งมีมาตรฐานใหม่เผยตัวออกมาพร้อม ๆ กันหลายต่อหลายมาตรฐาน เช่น Cascading Style Sheets (CSS), HIML 4.0 และ the Document Object Model (DOM) จึงทำให้นักออกแบบเว็บ พอจะเห็นทางออก ว่าด้วยมาตรฐานใหม่เหล่านี้ พวกเขาสามารถเลือกสรร และควบคุมลักษณะ การแสดงตัวอักษรบนเว็บ ได้อย่างเต็มที่ อย่างไรก็ตามกว่าความฝันนั้น จะเป็นจริงได้ คงต้องรอ ให้นักท่องเว็บทั่วไป เปลี่ยนมาใช้ บราวเซอร์ที่สนับสนุนมาตรฐานใหม่ ให้แพร่หลายเสียก่อน ซึ่งก็คงต้องกินเวลาอีกหลายปี ระหว่างนี้ นักออกแบบเว็บ จึงต้องใช้ความสามารถเฉพาะตัว พลิกแพลงใช้สิ่งที่มีอยู่ ไปพลาง ๆ ก่อน ไม่ว่าจะเป็น browser sniffing, แท็ก , ภาพ GIF สำหรับอุดช่องว่าง และปลั๊กอินทั้งหลาย เป็นต้น

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

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

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

1. ใช้ HTML เข้าไว้ เพื่อความเร็วสูงสุด
คุณควรดูแลให้เว็บเพจของคุณไปปรากฎบนหน้าจอของผู้ดูอย่างรวดเร็วที่สุด และสามารถมัดใจผู้ดู ได้อย่าง ทันทีทันใด การออกแบบสิ่งพิมพ์เป็นความผิดพลาดใหญ่หลวง เพราะ HTML นั้นต่างจาก QuarkX Press หรือ Pagemaker และธรรมชาติของเว็บเพจก็ไม่เหมือนกับสิ่งพิมพ์ด้วย คุณควรจำกัดขนาด ของเว็บเพจ แต่ละหน้า ของคุณไว้ที่ 15 ถึง 30 กิโลไบต์ สำหรับไฟล์ HTML บวกกับ รูปภาพ และภาพเคลื่อนไหว อีกไม่เกิน 20 ถึง 30 กิโลไบต์ เท่านี้ก็เกินพอแล้ว เพราะการโหลดข้อมูล ขนาด 35 ถึง 60 กิโลไบต์ (KB) ก็ถือว่าอืดแล้ว สำหรับผู้ดูที่ใช้โมเด็ม 28.8 Kbps ซึ่งถ้าต้องการโหลด เว็บเพจ ขนาดประมาณนี้ ให้ได้เร็วจริงๆ ก็ต้องใช้ขนาดสาย T1

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

เว็บเพจที่มีรูปภาพและภาพเคลื่อนไหวเป็นส่วนน้อยและมีข้อมูล HTML เป็นส่วนใหญ่ก็สามารถ เป็นเว็บเพจ ที่ดีได้ คุณไม่จำเป็นต้องอาศัยรูป GIF หรือ JPEG ขนาด 150 กิโลไบต์ในการตกแต่ง ให้เว็บเพจ ของคุณ สวยงามเสมอไป ความจริงแล้ว เว็บเพจที่ดีจะต้องมี 2 สิ่งที่ไปด้วยกัน ได้แก่ หน้าตาของเว็บเพจ และประสิทธิภาพ ที่ผู้ดูจะได้รับประโยชน์จากมัน

2. ใช้ในรูป GIF บ้างก็ได้
บางครั้งเมื่อ HTML ไม่สามารถตอบสนองความต้องการของคุณได้ทั้งหมด คุณก็มีทางเลี่ยงไปใช้รูปภาพ GIF แทนแน่นอนคุณสามารถออกแบบตัวอักษรได้ตามใจชอบด้วยวิธีนี้ แต่ก็แน่นอนที่ต้องออกแบบรูปภาพ GIF ให้กะทัดรัดที่สุดด้วย โดยอาจกำหนดรูปภาพให้เป็นสีขาวดำ และใช้โปรแกรม Macromedia Freehand และ Adobe lllustrator) ในการสร้างรูปภาพ (ที่ไม่แน่นอนให้คุณส้รางรูปสีก่อน เพราะสีของรูปภาพ มักจะเพี้ยนไป เมื่อมีการโยกย้ายจากไฟล์ของโปรแกรมวาดภาพแบบเว็กเตอร์ ซึ่งมีหลักการใช้สีแบบ CMYK ไปใช้ในโปรแกรมตกแต่งภาพ ซึ่งมีหลักการใช้สีแบบ RGB)

เมื่อสร้างรูปตัวอักษรเสร็จเรียบร้อยแล้ว คุณก็มาตกแต่งต่อในโปรแกรมตกแต่งภาพ (เช่น Photoshop หรือ Fontographer ของ Macromedia เป็นต้น) เริ่มด้วยการกำหนดสีฉากหลัง ของรูปอักษร ให้เป็นสีเดียวกับ สีฉากหลัง ของเว็บเพจ จากนั้นจึงระบายสีตามใจชอบ โปรดอย่าลืมใช้ชุดสี 216 Web-safe เพื่อสีในรูป ของคุณ จะได้ไม่ต้องไปตามแก้สีในภายหลัง

สุดท้ายเพื่อเป็นการตัดแต่งให้ไฟล์รูปภาพมีขนาดกะทัดรัดที่สุด คุณควรแปลงไฟล์รูปภาพไปเป็น adaptive palette (โดยทั่วไปจะเป็น palette แบบ 2 ถึง 4 บิต ขึ้นอยู่กับสีที่คุณเลือกใช้) หรือเป็นแบบ exact palette (สำหรับรูปภาพที่มีไม่กี่สี) หรือใช้โปรแกรมตัดทอนสี (image stripper) เช่น โปรแกรม DeBabelizer เพื่อตัดสีที่ไม่จำเป็นออกจากรูปภาพของคุณเสีย

3. ใช้ฟอนต์ให้เข้ากับบราวเซอร์
ฟอนต์ตัวอักษรของ HTML ที่ใช้การได้แน่นอนกับบราวเซอร์ในเครื่องคอมพิวเตอร์ประเภทต่าง ๆ มีจำนวนจำกัด ดังนี้

ฟอนต์สำหรับเครื่องพีซี ได้แก่ Verdana , Arisl , Helvetica , Courier New , Palatino และ Times New Roman ส่วนภาษาไทย ก็น่าจะเป็น MS Sans Serif หรือ Cordia UPC พูดง่าย ๆ ก็คือฟอนต์ที่เป็นมาตรฐานในวินโดว์นั่นเอง
ฟอนต์สำหรับยูนิกซ์ ได้แก่ Helvetica , Courier , Palation , Times , Verdana และ Arial (ผู้ใช้เครื่องแมค ได้ฟอนต์สองแบบหลังสุดนี้ มาจากโปรแกรมอินเทอร์เน็ตเอ็กซ์พลอเรอร์ 4.0 หรือ จากการ ดาวน์โหลด จากเว็บไซต์ของไมโครซอฟท์)
ถึงแม้ว่าแท็ก กำลัวจะหายไปเมื่อ CSS ก้าวเข้ามา แต่มันยังคงเป็นแท็ก ที่ใช้การได้อยู่ ไม่ว่า จะอยู่ในบราวเซอร์อะไรก็ตาม โดยมีประโยชน์สำหรับเลือกฟอนต์จากบรรดาฟอนต์เท่าที่มีอยู่ อย่างไรก็ดี วิธีที่ดีที่สุด คือคุณกำหนดรูปแบบของฟอนต์ (typeface) ที่คุณต้องการไว้ พร้อมกับมีรายชื่อฟอนต์สำรอง ไว้ด้วย เผื่อกรณีที่ ในเครื่องของผู้ดูเว็บเพจ ไม่มีฟอนต์ที่คุณต้องการ ยกตัวอย่างเช่น คุณต้องการให้มีตัวอักษรแบบ sans-serif ในเว็บเพจของคุณ คุณก็กำหนดดังนี้

< FONT face ="Verdana , Arial , Helvetica , sans-serif" >
< BR>

ถ้าผู้ดูเว็บเพจไม่มีฟอนต์ Verdana เขาอาจจะมีฟอนต์ Arial หรือ Helvetica ก็ได้ แต่ถ้าไม่มี ฟอนต์ทั้งหมดนี้เลย บราวเซอร์ก็จะแสดงฟอนต์ใดก็ตาม ที่มีอยู่ในรูปแบบ sans-serif

อีกตัวอย่างหนึ่ง ถ้าคุณต้องการฟอนต์ serif คุณก็กำหนด

< FONT face="Palatino, Times, Times New Roman, serif" >

ทั้งในเครื่องแมคและเครื่องพีซีมักจะมีฟอนต์ Palatino อยู่ แต่ถ้าไม่มี เครื่องแมคก็จะไปใช้ ฟอนต์ Times แทน ในขณะที่เครื่องพีซีก็ใช้ฟอนต์ Times New Roman (แต่ถ้าไม่มีอีก ก็ใช้ฟอนต์อื่น ๆ ในรูปแบบ serif)

นักออกแบบเว็บจำนวนมาก พยายามก้าวข้ามข้อจำกัดของฟอนต์ของ HTML ไปโดยการใช้ไฟล์รูปภาพ GIF เป็นตัวอักษรพาดหัวแทน โดยสร้างรูปตัวอักษรจากโปรแกรมวาดภาพแบบเว็กเตอร์ และตกแต่ง ด้วยโปรแกรมตกแต่งภาพ (เช่น Adobe Photo Deluxe หรือ Photoshop ซึ่งในเวอร์ชั่น 5.0 ที่เพิ่งออกใหม่ เมื่อเร็ว ๆ นี้ มีความสามารถพิเศษในการออกแบบตัวอักษรเพิ่มมาให้ด้วย) แต่ทั้งนี้ทั้งนั้น ก็ขึ้นอยู่กับ แนวคิดของนักออกแบบเว็บแต่ละคนด้วย ซึ่งบางคนเห็นว่า ไม่ควรใช้รูปตัวอักษรในไฟล์ GIF มาปะปนกับตัวอักษรทั่วไป ในขณะที่บางคนต้องการให้ตัวอักษรที่มีอยู่เป็นไฟล์รูปภาพ GIF ทั้งหมด

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

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

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

นอกจากนี้ ยังมีวิธีที่คุณสามารถใช้ทดแทนการโหลดเลเยอร์ของ CSS ซึ่งตามปกติ จะใช้เวลา นาน โดยการสร้างตัวอักษรในรูปภาพ GIF แล้วกำหนดให้เป็นรูปฉากหลังของเว็บเพจ จากนั้น คุณก็ใส่ ตัวอักษร HTML หรือตัวอักษรในรูปของภาพ GIF แบบโปร่งใส (transparent GIF) ข้างหน้ารูป ฉากหลัง ซึ่งจะให้ผล คล้ายกับ CSS เลยที่เดียว การใช้รูปภาพช้า ถ้าหากคุณได้ตัดทอนทุก ๆ รูปภาพ ให้กะทัดรัด (optimize) เรียบร้อยแล้ว

5. เล็ก ๆ น้อย ๆ กับเจ้าหนูตัวจ้อย
เทคนิคหนึ่งในการเพิ่มลูกเล่นเล็ก ๆ น้อย ๆ ให้กับเว็บเพจ HTML ธรรมดา ๆ โดยไม่มีผลกระทบต่อ ความเร็ว ในการโหลดเว็บเพจ ก็คือการใช้จาวาสคริปต์ใส่ภาพเล็ก ๆ เข้าไปในเว็บเพจ แล้วกำหนด ภาพนั้น เข้าไปที่ไฮเปอร์ลิงก์เป็น rollover ซึ่งจะมีผลทำให้เมื่อใดก็ตามที่ผู้ดูเคลื่อนเมาส์มาทับลิงก์นั้น ก็จะมีรูปปรากฎขึ้น ในบริเวณใกล้เคียงกับไฮเปอร์ลิงก์ที่เป็นจุดกำเนิดของรูปภาพ มิฉะนั้น หากคุณวาง ไฮเปอร์ลิงก์ ไว้ที่ส่วนต้นของเว็บเพจ แต่กลับให้รูปภาพ ไปปรากฎที่ส่วนท้าย ของเว็บเพจ อย่างนี้ก็จะ ไม่เป็นการดี เพราะ ทำให้ ผู้ดูต้องเหลือบมองหารูปภาพ เสียอารมณ์เปล่า ๆ

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

ตลอดระยะเวลา 1 ถึง 2 ปีที่ผ่านมา นักออกแบบเว็บเพจทั้งหลายได้คิดค้นวิธีต่าง ๆ มากาย เพื่อจะได้ วางเนื้อความลงตรงตำแหน่งในเว็บเพจอย่างเหมาะเหม็ง วิธีที่ใช้กันมากที่สุดคือ การใช้แท็ก<PRE> ซึ่งจะแสดงตัวอักษรแบบไม่ผ่านการปรับแต่งใด ๆ (unfilter) อีกวิธีหนึ่งคือ การใช้ รูปภาพ GIF ที่ว่างเปล่า พร้อมกับกำหนด vspace และ hspace ของรูปภาพนั้น

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

7. รูปภาพ GIF ที่ว่างเปล่า

การใช้รูปภาพ GIF ที่ว่างเปล่า มาแทรกตามจุดต่าง ๆ เพื่อช่วยในการจัดตำแหน่ง เนื้อความ เป็นวิธีที่ได้รับความนิยม วิธีหนึ่ง และเทคนิคที่ นักออกแบบเว็บ นิยมใช้มากที่สุด สำหรับการใช้ เครื่องช่วย นี้ ได้แก่การกำหนด vspace และ hspace ของรูปภาพ GIF ที่ใช้<

ยกตัวอย่างเช่น แทนที่จะวางรูปภาพ GIF ด้วยการระบุเช่นนี้

< IMG src="spacer.gif" width=150 height=100 >

คุณวิธีที่ดีกว่านั้น ดังนี้

< IMG src="spacer.gif" width=2height=2 hspace=74 vspace=49>

คุณจะเห็นว่าการระบุแบบที่สอง จะทำให้เว็บเพจของคุณดูเรียบง่ายและโหลดได้เร็วยิ่งขึ้น

ตารางที่ว่าง เมื่อคุณต้องการจัดเนื้อความในเว็บเพจเป็นแนวดิ่งตรงกันหลาย ๆ แนว คุณสามารถสร้างตารางที่มีช่องว่างนำมาช่วยในการจัดเว็บเพจตามความต้องการได้ ดังตัวอย่าง

<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=360 BORDER=1>
<TR>
	<TD width=200 height=30 align=right valign=top>  Some text. </TD>
	<TD width=10>  &nbsp; </TD>
        <TD width=150  align=left valign=bottom>  Some  more text. </TD>
</TR>
</TABLE>

ช่องว่างในตารางที่แทรกเข้ามาตรงกลางระหว่างเนื้อความทั้งสอง เป็นผลที่ได้จากการใช้เทนนิคนี้

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

ในการใส่สีสันลงในช่องว่าง คุณต้องกำหนดสีของฉากหลังเสียก่อน ด้วย bgcolor ในแท็ก <TD> จากนั้นใส่ช่องว่าง ( &nbsp;) ลงในช่องของตาราง แล้วคุณก็จะเห็นช่องว่างมีสีสันขึ้นมาทันที ดังตัวอย่างต่อไปนี้

<TABLE CELLPADDING=2 CELLSPACING=0 WIDTH=360 BORDER=0>
<TR align=left valign=top>
	<TD width=200  align=right bgcolor="#FF6633">  Some text. </TD>
	<TD width=10 bgcolor="FFCC66" >  &nbsp; </TD>
        <TD width=150  bgcolor="FF6633" >  Some  more text. </TD>
</TR>
</TABLE>

ผลลัพธ์ที่ได้คือ ช่องว่างที่มีสีสันแทรกอยู่ระหว่างกลางเนื้อความ 2 ส่วน

9. กับ Dynamic HTML
Dynamic HTML คงเป็นที่ถูกอกถูกใจของนักออกแบบเว็บส่วนใหญ่เป็นแน่ เพราะมันได้รวมเอา จาวาสคริปต์ และ CSS เข้าไว้ในตัว ซึ่งทั้งสอง ต่างก็เป็นเครื่องมือ สำหรับการจัดหน้าเว็บ ที่ช่วยให้ การทำงาน ง่ายขึ้นกว่าแต่ก่อนมาก ดังตัวอย่างประโยชน์สารพันของ DHTML ดังต่อไปนี้

เทคนิคการใช้ตัวอักษรต่างขนาด
กล่าวโดยย่อแล้ว การใช้ตัวอักษรต่างขนาดก่อให้เกิด 3 ประการดังต่อไปนี้

  1. การแบ่งระดับชั้นของข้อมูล
  2. การจัดกลุ่มข้อมูล
  3. การนำเสนอสายตา
โดยเฉพาะข้อ 3 คือการชักจูงสายตาของผู้ดูไปสู่ข้อมูลที่คุณต้องการเน้น ซึ่งจะมีผลอย่างมาก ต่อการ ตัดสินใจ ของผู้ดู ว่าจะคลิ้กที่ใด เทคนิค 5 ข้อต่อไปนี้ จะช่วยให้คุณสามารถนำผู้ดูไปยังที่ที่คุณต้องการได้

10. รู้จัก < FONT size > และ <H>
การที่เครื่องคอมพิวเตอร์ต่างระบบมีอัตราส่วนการย่อขยายตัวอักษรไม่เท่ากัน นำมาซึ่งความปวดหัว ให้กับ นักออกแบบเว็บเป็นอย่างมาก โดยทั่วไป ตัวอักษรในเว็บเพจในเครื่องพีซี จะมีขนาดใหญ่กว่า ตัวอักษรชุดเดียวกันนั้น ที่แสดงในเครื่องแมคอินทอช นักออกแบบเว็บส่วนใหญ่ นิยมใช้เครื่องแมคอินทอช แต่ทางด้านผู้ดู ส่วนใหญ่แล้ว กลับนิยมเครื่องพีซีกันเกือบทั้งหมด

คุณอาจจะทดลองด้วยตัวคุณเองก็ได้ โดยการทดลองแสดงตัวอักษรแบบต่าง ๆ ด้วยโปรแกรมเน็ตสเคปเนวิกเตอร์ 4.05 ในเครื่องแมคอินทอช และในเครื่องพีซี โดยใช้ HTML ข้างล่างนี้ กับโปรแกรมบราวเซอร์ ของทั้งสองระบบ ซึ่งจะแสดงฟอนต์ Verdana ขนาด 1 ถึง 7 , + 1 ถึง + 7 , - 1 ถึง - 7 และ h1 ถึง h6 (หรือคุณจะทดลองฟอนต์อื่น ๆ แทนก็ได้ อาทิเช่น Arial , Helvetica หรือฟอนต์ sans-serif อื่น ๆ เป็นต้น) และอย่าลืมปรับให้หน้าจอของทั้งสองระบบ มีความละเอียดเท่ากันด้วย ซึ่งถ้าเป็น 800 x 600 pixels ก็จะดีที่สุด แล้วคุณก็จะได้เห็น ความแตกต่าง ที่เกิดขึ้น ระหว่างฟอนต์ชื่อเดียวกัน ขนาดเดียวกัน แต่กลับ ปรากฏออกมา ไม่เหมือนกัน เมื่อไปอยู่ในคนละเครื่อง

<HTML >
<HEAD >
	<TITLE >Font size for Verdana </TITLE >
</HEAD >

<BODY BGCOLOR="#FFFFFF" >

<TABLE border="1" width="400" >
<TR >

<TD align=center >
<P ><FONT SIZE="1" FACE="Verdana" >1</FONT ></P >
<P ><FONT SIZE="2" FACE="Verdana" >2</FONT ></P >
<P ><FONT SIZE="3" FACE="Verdana" >3</FONT ></P >
<P ><FONT SIZE="4" FACE="Verdana" >4</FONT ></P >
<P ><FONT SIZE="5" FACE="Verdana" >5</FONT ></P >
<P ><FONT SIZE="6" FACE="Verdana" >6</FONT ></P >
<P ><FONT SIZE="7" FACE="Verdana" >7</FONT ></P >
</TD >

<TD align=center >
<P ><FONT SIZE=" +1" FACE="Verdana" > +1</FONT ></P >
<P ><FONT SIZE=" +2" FACE="Verdana" > +2</FONT ></P >
<P ><FONT SIZE=" +3" FACE="Verdana" > +3</FONT ></P >
<P ><FONT SIZE=" +4" FACE="Verdana" > +4</FONT ></P >
<P ><FONT SIZE=" +5" FACE="Verdana" > +5</FONT ></P >
<P ><FONT SIZE=" +6" FACE="Verdana" > +6</FONT ></P >
<P ><FONT SIZE=" +7" FACE="Verdana" > +7</FONT ></P >
</TD >

<TD align=center >
<P ><FONT SIZE=" -1" FACE="Verdana" > -1</FONT ></P >
<P ><FONT SIZE=" -2" FACE="Verdana" > -2</FONT ></P >
<P ><FONT SIZE=" -3" FACE="Verdana" > -3</FONT ></P >
<P ><FONT SIZE=" -4" FACE="Verdana" > -4</FONT ></P >
<P ><FONT SIZE=" -5" FACE="Verdana" > -5</FONT ></P >
<P ><FONT SIZE=" -6" FACE="Verdana" > -6</FONT ></P >
<P ><FONT SIZE=" -7" FACE="Verdana" > -7</FONT ></P >
</TD >

<TD align=center >
<H1>  <FONT FACE="Verdana">  h1</FONT>  </H1> 
<H2>  <FONT FACE="Verdana">  h2</FONT>  </H2> 
<H3>  <FONT FACE="Verdana">  h3</FONT>  </H3> 
<H4>  <FONT FACE="Verdana">  h4</FONT>  </H4> 
<H5>  <FONT FACE="Verdana">  h5</FONT>  </H5> 
<H6>  <FONT FACE="Verdana">  h6</FONT>  </H6> 
</TD >

</TR> 
</TABLE> 

</BODY> 
</HTML> 


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

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

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

การทำตัวใหญ่ขึ้นย่อหน้านั้นง่ายนิดเดียว ตามปกติ ตัวใหญ่นั้นจะมีขนาดใหญ่กว่าตัวอักษร ในเนื้อความอยู่ 2 ถึง 5 พอยต์ และมักจะใช้ฟอนต์ที่แตกต่างจากฟอนต์ของเนื้อความ เพื่อความโดดเด่น ตัวอย่าง ข้างล่าง นี้ แสดงวิธีทำตัว "T" เป็นตัวใหญ่ขึ้นย่อหน้า โดยใช้ภาพ

&nbsp; &nbsp; &nbsp;
< IMG src="t.gif" width=30 height=30 >
< FONT face ="Verdana" size=5 > he answer is out there-some-were.< /FONT >

ถ้าต้องการความโดดเด่นยิ่งขึ้นไปอีก คุณก็ใช้ตัวใหญ่ที่สลับสี (inverse) แทน สีของตัวสลับสี จะเข้ม จนดึงดูสายตาได้มากกว่า ในขณะที่ตัวใหญ่ธรรมดานั้น กลืนหายไปกับฉากหลัง แต่ถ้าคุณคิดว่า HTML ไม่มีลูกเล่นอะไรมากนัก ก็ขอให้คุณอดใจรอ CSS ซึ่งคุณจะใช้ได้อย่างพลิกแพลงมากกว่า

&nbsp; &nbsp; &nbsp;
< IMG src="t2.gif" width=30 height=30 HSPACE=5>
< FONT face ="Verdana" size=5 > he answer is out there-some-were.< /FONT >

หรือจะทดลองใช้ฟอนต์แบบลายมือเขียนก็จะได้ดังนี้

&nbsp; &nbsp; &nbsp;
< IMG src="s.gif" width=60 height=38 >
< FONT face ="Verdana" size=5 > ometimes cursive type is more attractive to look at as an initial cap.< /FONT >

หรือคุณอาจจะอาศัยการวางตำแหน่งของ CSS มาช่วย หรือสำหรับบราวเซอร์ที่สามารถแสดง style sheet ได้ คุณก็ใช้ตารางผสมกับการกำหนดสีของฉากหลังเพื่อให้ได้ผลล้ายคลึงกับการใช้ CSS ตัวอย่างต่อไปนี้ ใช้รูปภาพ GIF ที่ว่างเปล่า สร้างเอฟเฟกต์เลเยอร์ ให้กับตัวอักษร T ซึ่งมีฉากหลังเป็นสีเทา

<TABLE border=0 cellpadding=0 cellspacing=0 >
<TR >
<TD style= "back ground:white url(Images/t3.gif) no - repeat," valign=top >
< IMG src= "blank.gif" hspace=22 vspace=34 width=1 height=2 >
< FONT face="Verdana" size = 5 > he answer is out there-some-were.< /FONT >
</TD >
</TR>
</TABLE>

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

<TABLE width=0 border=0 cellpadding=0 cellspacing=0 >
<TR >
<TD width=250 valign=top >
< IMG src= "blank.gif" hspace=22 vspace=34 width=1 height=2 >
< FONT face="Verdana; Helvetica, Arial, Sans serif" size = 2 > Sometimes I take alook in the mirror and < BR >
< FONT size=5> want to < FONT size=7> scream < /FONT > < /FONT > < BR > And then again, sometimes Ijust take look at myself and wink ;-) < /FONT >
</TD >
</TR>
</TABLE>

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

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

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


เทคนิคการใช้ตัวอักษรอย่างสมดุล

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

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


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

คุณควรคงรูปแบบการจัดหน้าอย่างใดอย่างหนึ่งไว้ให้เป็นเอกภาพไปตลอดทั้งเว็บเพจของคุณ การเปลี่ยน รูปแบบ โดยทันทีทันใด อาจจะดึงความสนใจของผู้ดูมากขึ้น หรือไม่ก็อาจจะสร้างความสับสน ถ้าการเปลี่ยนแปลงนั้น ไม่มีเหตุผลที่ดีรองรับ เว็บไซต์ของ Atlas magazine (http://www. Atlas magazine.com) เป็นตัวอย่างที่ดี ของการแบ่งเนื้อความ สำหรับแต่ละหัวข้อ แต่ในขณะเดียวกัน ก็คงความเป็นเอกภาพไว้ ได้ตลอดทั้งเว็บเพจ

16. สร้างสมดุลด้วยความไม่สมมาตร
คุณไม่จำเป็นต้องจัดกลุ่มก้อนตัวอักษรอย่างสมมาตรตายตัว การสร้างความไม่สมมาตร เช่น จัดวางคอลัมน์ ที่ไม่มีกรอบ 2 คอลัมน์ในอัตราส่วนกว้างไม่เท่ากัน อาจจะประมาณ 30:70 ไม่ใช่ 50:50 ไปทั้งเว็บ โดยที่ นอกจาก จะสร้างความสนใจขึ้นมาแล้ว ยังเป็นการสร้างความสมดุลให้กับช่องว่าง และตัวอักษรอีกด้วย (อัตราส่วน 30:70 ยังเหมาะสำหรับ การแยกรายการชื่อ ออกจากพาดหัว ของเนื้อความด้วย

เทคนิคที่ดีที่สุดสำหรับใช้ในการจัดวางตัวอักษรอย่างไม่สมมาตร คือการใช้ตาราง คุณสามารถดู หน้าต่าง ของ The Razorfish Subnetwork (http://www.rsub.com/typo/) เป็นตัวอย่าง ของความ ไม่ สมมาตร ที่ลงตัว ซึ่งผู้ดูจะถูกนำสายตาให้อ่านจากมุมบนซ้ายไปมุมล่างขวาโดยอัตโนมัติ

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

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

เว็บไซต์อง The Fray (http://www.fray.com/) เป็นตัวอย่างที่ดีของการเลือกสรรตัวอักษรที่เหมาะสม รวมทั้งการจัดการ จัดแบ่ง และการสร้างสมดุล ระหว่าง รูปภาพขนาดใหญ่ กับตับอักษร HTML ที่มี ขนาดเล็กลงมา

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

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

โฮมเพจของ The Eyecandy (http://www.eyecandy.org/) เป็นตัวอย่างที่ดี สำหรับเทคนิคต่าง ๆ ที่ได้บรรยายไปในตอนนี้

เทคนิคการเล่นสีสัน
สีสันเป็นส่วนประกอบที่สำคัญอีกส่วนหนึ่งของการเลือกสรรตัวอักษรสำหรับเว็บเพจ มันเป็นการตกแต่ง ครั้งสุดท้าย ให้กับตัวอักษรทั้งหลายที่ผ่านการจัดวางเรียบร้อยแล้ว เทคนิค 4 ประการจากนี้ไป จะช่วย ให้คุณ เลือกใช้สีสัน กับตัวอักษรของคุณได้อย่างเหมาะสม

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

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

คุณสามารถใช้ CSS มาช่วยในการกำหนดสีที่คุณจะใช้ในเว็บเพจ เพื่อความเป็นระบบระเบียบ และเป็นเอกภาพของเว็บเพจของคุณ

21. ระบุค่าสีให้แน่นอน
ระหว่างที่รอคอยให้ CSS เป็นที่แพร่หลายกว่าที่เป็นอยู่ทุกวันนี้ คุณคงต้องใช้วิธี ระบุค่าสี ทุกครั้ง สำหรับแต่ละ องค์ประกอบในเว็บเพจ เพื่อให้สีสันของเว็บเพจไม่มีการผิดเพี้ยน และป้องกันความสับสน ของผู้ดู

เทคนิคนี้จะอาศัยไฟล์ HTML ที่มีแท็ก < FONT color > สำหรับทุก ๆ สีที่คุณใช้อยู่เป็นประจำ เพื่ออำนวยความสะดวก ให้คุณก๊อปปี้แท็กต่าง ๆ ไปใส่ไฟล์ HTML โดยไม่ต้องพิมพ์ซ้ำทุก ๆ ครั้ง

22. แบ่งย่อหน้าด้วยสีสัน
ถ้าเนื้อความของคุณยาวมากและภายในเนื้อความนั้นประกอบไปด้วยประเด็นย่อย ๆ หลายประเด็น (เช่น เรื่องเกี่ยวกับ ผลิตภัณฑ์ต่างชนิดกัน) คุณก็ควรจะแบ่งเนื้อความนั้นออกเป็นส่วน ๆ โดยใช้สีสัน ที่แตกต่าง เข้าช่วย

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

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

คำสั่ง HTML สำหรับตัวอย่างดังกล่าว เป็นดังนี้

< FONT color="#999999 >
This is paragraph of type in a certain color that may or may not be easy to read as colored text-not all colored text is easy to read. However, darker colors usually work well.
< /FONT >
< P >
< FONT color="ff6633" >
This is paragraph of type in a certain color that may or may not be easy to read as colored text-not all colored text is easy to read. However, darker colors usually work well.
< /FONT >
< P >
< FONT color="009900" >
This is paragraph of type in a cwetain color that may or may not be easy to read as colored text-not all colored text is easy to read. However, darker colors usually work well.
< /FONT >

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

แม้แต่การเปลี่ยนแปลงแค่ความเข้มของสีก็มีผลต่อผู้ดูด้วย ยกตัวอย่างเช่น คุณกำหนดให้ลิงก์ มีสีเขียว, สิงก์ที่ทำงานเป็นสีเขียวแก่ และลิงก์ที่เคยเข้าไปแล้ว เป็นสีเขียวอ่อน เป็นต้น

[ หมายเหตุ ถ้าคุณอ่านถึง ตรงนี้แล้ว เนื้อความต่อไปยังไม่แสดง แปลว่าการจราจรติดขัดครับ คลิกที่นี่ เพื่อไป หน้า 2 ]
ถ้าคุณใช้ rollover ของจาวาสคริปต์ในเว็บเพจของคุณ คุณอาจจะประยุกต์ใช้สถานะ "on" และ "off" ของ rollover กับลิงก์เพื่อสร้างความแปลกใหม่ แทนที่จะมีแต่ลิงค์ ที่เป็น ข้อความขีดเส้นใต้ แบบเดิมเพียงอย่างเดียวเท่านั้น

[ หมายเหตุ ถ้าคุณอ่านถึง ตรงนี้แล้ว เนื้อความต่อไปยังไม่แสดง แปลว่าการจราจรติดขัดครับ คลิกที่นี่ เพื่อไป หน้า 2 ]

เน็ตสเคปก็ได้ เอ็กซ์พลอเรอร์ก็ดี

บ่อยครั้งที่สิ่งที่คุณเห็นหรือสิ่งที่เป็นไปได้ในบราวเซอร์ตัวหนึ่ง กลับแปรเปลี่ยนไปเป็นอีกอย่างเมื่อไปอยู่ ในบราวเซอร์อีกตัว คุณจึงควรยึดหลักต่อไปนี้ในการออกแบบเว็บเพจของบคุณเพื่อป้องกันปัญหาดังกล่าว

Dynamic HTML

  1. ใช้ CSS-P ในการกำหนดตำแหน่งให้กับองค์ประกอบต่าง ๆ ในเว็บเพจ เพราะนี่คือมาตรฐาน W3C ซึ่งใช้ได้กับทั้งบราวเซอร์เอ็กซ์พลอเรอร์ 4.0 และเนวิเกเตอร์ 4.0 พึงหลีกเลี่ยงแท็ก ซึ่งมีแต่เนวิเกเตอร์ 4.0 เท่านั้นที่เรียกดูได้
  2. ใช้ตัวอักษรตัวพิมพ์เล็กสำหรับชื่อของ event handler เท่านั้น เพื่อจะได้ใช้กับ บราวเซอร์ เอ็กซ์พลอเรอร์ด้วย (เช่นใช้ชื่อ onclick แทน onClick) เพราะเอ็กซ์พลอเรอร์ ไม่สามารถ ใช้ชื่อที่มีทั้งตัวพิมพ์ใหญ่ และตัวพิมพ์เล็กผสมกัน เมื่อใช้ event handler เป็น objet property (เช่น ในคำสั่ง document,forms [0].button1.onclick=function)
  3. ตั้งชื่อให้กับองค์ประกอบ (element) ทุก ๆ องค์ประกอบที่มีการทำอะไร ๆ กับมัน และวางตำแหน่งของมันด้วย CSS-P เสมอ
  4. ตั้งชื่อองค์ประกอบด้วยตัวอักษรหรือตัวเลขเท่านั้น เพราะบราวเซอร์เนวิกเตอร์ 4.0 มีการทำงานบางส่วนที่ไม่ยอมรับชื่อที่มีตัวสัญสักษณ์พิเศษปะปนอยู่
  5. กำหนดฟังก์ชั่น API สำหรับการทำงานระหว่างบราวเซอร์ทั้งสอง เพื่อจัดการกับ ความแตกต่าง ของ Document Object Models ของเนวิเกเตอร์ 4.x กับเอ็กซ์พลอเรอร์ 4.x
Document Object Models (DOM)

ทั้งบราวเซอร์เอ็กซ์พลอเรอร์ 4.0 และเนวิเกเตอร์ 4.0 ต่างก็มี Document Object Models สำหรับ การใช้ องค์ประกอบต่าง ๆ ของเว็บเพจผ่านทางภาษาสคริปต์ อย่างเช่น จาวาสคริปต์ แต่ปัญหานั้นอยู่ตรงที่ บราวเซอร์ จากสองบริษัทต่างมี object models เป็นของตัวเอง ทางออกก็คือ การทำความเข้าใจ ความแตกต่างนั้น เพื่อจะได้สร้างสคริปต์ ที่สามารถทำงานได้ กับบราวเซอร์ทั้งคู่

ในเอ็กซ์พลอเรอร์ 4.0 คุณสามารถกำหนดสคริปต์ให้กับทุก ๆ องค์ประกอบใน HTML รวมทั้ง style-sheet properties ด้วย โดยที่มันจะมองทุก ๆ องค์ประกอบเป็น object ที่อยู่ใน document.all ซึ่งคุณจะใช้องค์ประกอบเหล่านี้ได้โดยการระบุ index หรือชื่อ (name) หรือ ID ของมัน

ยกตัวอย่างเช่น ชุดคำสั่งต่อไปนี้จะแสดงชื่อแท็กทั้งหมดที่มีอยู่ในเว็บเพจออกมาให้เห็น

for  (i=0; i<document.all.length; i++)
	{
	document.write(document.all[i].tagName +  "\n");
	}

ส่วนคำสั่งต่อไปนี้เป็นการใช้แท็กโดยระบุ ID ของมัน

document.write ("myLayer visibility is:" + document.all['myLayer'].stylity);

การเปลี่ยนแปลงคุณสมบัติใด ๆ ของอ็อปเจ็กต์ในเอ็กซ์พลอเรอร์ 4.0 จะปรากฎให้เห็นทันที ส่วนในเนวิเกเตอร์ 4.0 คุณจะใช้สคริปต์ เรียกใช้องค์ประกอบของ HTML ได้อย่างจำกัด เช่น เลเยอร์ เป็นต้น โดยที่เลเยอร์ที่เรียกใช้ได้ จะเป็นบริเวณ ที่กำหนด โดยแท็ก < LAYER > และบริเวณ ที่กำหนดโดย Cascading Style Ssheet (CSS) ซึ่งคุณจะใช้เลเย่อร์ได้โดยการระบุ index หรือชื่อ (name) หรือ ID ของมัน

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

    for  (i=0; i<document.layers.length; i++)
	{
	document.write(document.layers[i]).name + "\n");
	}

ส่วนคำสั่งต่อไปนี้เป็นการใช้เลเยอร์โดยระบุ ID ของมัน

Document.write("myLayer visibility is:" + document.layers ['mylayer'] .visibility);

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


	if  (navigator.appName == "Netcape") {
	  layerRef="document.layers";
	styleRef="";
	} else {
                 layerRef ="document.all";
                 styleRef=".style";
                  }

เมื่อคุณกำหนดไว้เช่นี้แล้ว คุณก็สามารถใช้สคริปต์เพียงชุดเดียวสำหรับบราวเซอร์ 2 ตัว ยกตัวอย่าง คำสั่งที่ทดสอบองค์ประกอบที่ชื่อ myLayer ดังนี้

isVisible = eval(layerRef + "myLayer"]' + styleRef + '.visibility');

   
เกร็ดเล็กเกร็ดน้อยกับตัวอักษรใน HTML

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

แต่ก็ยังมีอีกหลายสิ่งที่คุณสามารถทำได้ อย่าลืมแท็กพื้นฐานอย่าง < H1 > ถึง < H6 > สำหรับข้อความ พาดหัว , < BIG > และ < SMALL > ที่ช่วยขยายหรือหดคำหรือข้อความ , < SUP > และ < SUB > สำหรับยกตัวยกและตัวห้อย , < STRONG > (หรือ < B > ) เพื่อทำตัวหนา และ < EM > (หรือ < I > ) เพื่อทำตัวเอน

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

เทคนิคอื่น ๆ

  • การกำหนดขนาดฟอนต์
    การกำหนดนาดฟอนต์เป็นเรื่องง่ายมาก เพียงแต่ระบุขนาดฟอนต์ที่คุณต้องการลงในตัวแปร SIZE ของแท็ก < FONT > ซึ่งมีให้เอกตั้งแต่ 1 ถึง 7 ขนาดปกติสำหรับเว็บเพจทั่วไปได้แก่ 3 สมมติคุณต้องการปรับให้ตัวอักษรใหญ่ขึ้นเป็นขนาด 5 คุณก็กำหนดแท็กดังนี้

    < FONT SIZE="-1"> This text has a font size of 5.< /FONT>

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

    < FONT SIZE="-1"> This text is one size smaller than browser's default.< /FONT>

    ซึ่งจะทำให้ขนาดของตัวอักษรลดลงหนึ่งขั้นจากขนาดที่ผู้ดูกำหนดไว้ในบราวเซอร์

    คุณยังสามารถกำหนดขนาดฟอนต์ให้กับเนื้อความทั้งหมดในเว็บเพจได้ที่ SIZE ในแท็ก < BASEFONT> ยกตัวอย่างเช่น คุณต้องการให้ตัวอักษรทุกตัวต่อจากนี้มีขนาดเป็น 4 จนกว่าจะมีการกำหนดในแท็ก < BODY>

    < BASEFONT SIZE="4">

    จะมีผลทุกให้อักษรทุกตัวต่อจากนี้มีขนาดเป็น 4 จนกว่าจะมีการกำหนดในแท็ก <FONT> เป็นขนาดอื่น

  • ปัญหาเมื่อลดขนาดฟอนต์
    ปัญหาประการหนึ่งเมื่อคุณกำหนดหดขนาดฟอนต์ลงจากเดิม (ไม่ว่าจะโดยวิธีกำหนดค่าติดลบ ให้กับ SIZE ในแท็ก <FONT> หรือโดยวิธีใช้แท็ก <TT> ซึ่งมีผลทำให้ อักษรหดขนาดลง เล็กน้อย) ก็คือ ช่องว่างตรงบรรทัดสุดท้ายของเนื้อความ จะกว้างกว่า ช่องว่างบรรทัดอื่น ๆ ดังตัวอย่าง

    <FONT SIZE=" -1" > <TT > A quirk of HTML is that whenever you make text smaller than the default, the browser tends to leave an annoying gap above the last line of text-like in this example. </TT > </FONT >

    คุณแก้ปัญหานี้ได้ ด้วยการใส่แท็ก <BR > ลงไปท้ายเนื้อความ ดังนี้

    <FONT SIZE=" -1"> <TT > A quirk of HTML is that whenever you make text smaller than the default , the browser tends to leave a gap above the last line of text. But when you add a line break, look-no gap</TT > </FONT > <BR >

  • การกำหนดสีสันตัวอักษร
    คุณกำหนดสีของฉากหลังของเว็บเพจได้ในแท็ก < BODY> และกำหนดสีของตัวอักษรได้ ในแท็ก < BODY> เช่นเดียวกัน ด้วยการระบุค่าสีเป็นเลขฐานสิบหกตรง TEXT =

    ค่าสีที่ว่านี้ ประกอบขึ้นด้วยแม่สีผสมกัน ได้แก่สีแดง/เขียว/น้ำเงิน ( red/green/blue) หรือที่เรียกว่า วิธี RGB เลขฐานสิบหกที่ระบุค่าสีมีรูปแบบเป็น #RRGGBB โดยที่ RR คือค่าของสีแดง , GG คือค่าของสีเขียว และ BB คือค่าของสีน้ำเงิน ตัวเลข แต่ละหลัก อาจจะเป็นเลข 0 ถึง 9 หรือเป็นตัวอักษร A ถึง F ค่าสีนี้ สามารถให้สีออกมาได้ ตั้งแต่สีขาว ไปจนถึงสีดำ ยกตัวอย่างเช่น ถ้ากำหนดค่าสี ให้กับตัวอักษร เป็น #0000FF ก็จะได้ตัวอักษร ในเว็บเพจเป็นสีน้ำเงิน ดังนี้

    < BODY TEXT= "#0000FF"> We can't stress : .... < /BODY >

    ในแท็ก < BODY > คุณยังสามารถกำหนด สีของตัวอักษร ที่เป็น ลิงก์ ได้อีกด้วย ด้วยการระบุ

    • LINK, สำหรับสีของ ลิงก์ ที่ไม่เคยถูกคลิก
    • VLINK, สำหรับสีของ ลิงก์ ที่เคยถูกคลิก แล้ว
    • ALINK , สีของลิงก์ที่กำลังถูกคลิก

    < BODY LINK="9900FF" VLINK="006600" VLINK="FF00FF" >
    Click the < a href="linkpage.html"> to see it change color.< /BODY >

    ตามทฤษฎีแล้ว การระบุค่าสีเช่นนี้ จะทำให้คุณกำหนดสี ได้ถึง 16.8 ล้านสี แต่ในความเป็นจริง สีที่ได้จาก บราวเซอร์ อาจจะมีผิดเพี้ยนไปบ้าง เพราะบราวเซอร์ ใช้เทคนิค ในการสร้างสี โดยการแต้ม จุดสีเล็กๆ จำนวนมากมาย ซึ่งอาจก่อให้เกิด สีด่างดวงบ้าง

  • การเปลี่ยนสีบางส่วน
    คุณสมารถกำหนดสีสันของตัวอักษรด้วยแท็ก < FONT > ซึ่งจะเป็นการเปลี่ยนจากสี ที่กำหนด ไว้ในแท็ก < BODY > ก่อนหน้านั้น วิธีนี้เป็นเทคนิค สำหรับเน้นคำบางคำ หรือเฉพาะบางส่วน ของเนื้อความ ที่ต้องการความโดดเด่นเป็นพิเศษ โดยการใช้แท็ก < FONT > และการกำหนด COLOR คั่นส่วนที่ต้องการเน้นนั้น

    < BODY TEXT="#0000FF" > We can't stress this strong enough:
    < FONT COLOR ="#00FF00" > when riding a motorcycle, you must always wear a helmet. < /FONT >
    < /BODY >

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

    < BODY TEXT="blue">We can't stress this strongly enough:
    < FONT COLOR="lime" > when riding a motorcycle, you must always wear a helmet. < /FONT >
    < /BODY >

    แต่ถ้าคุณต้องการความมั่นใจว่าผู้ดูจะเห็นสีตามที่คุณกำหนดแน่นอน คุณก็ควรใช้วิธีกำหนดสี ด้วย เลขฐานสิบหกดีกว่า

  • การกำหนดรูปแบบตัวอักษร (typeface)
    การกำหนด typeface ของตัวอักษรทำได้โดยระบุด้วย FACE ในแท็ก < FONT > ถ้าในเครื่อง ของผู้ดูเว็บเพจ มีฟอนต์ตามที่กำหนด บราวเซอร์ก็จะแสดงฟอนต์เหล่านั้นออกมา แต่ถ้าไม่มี บราวเซอร์จะใช้ฟอนต์ เท่าที่มีอยู่แทน ยกตัวอย่างเช่น

    < FONT FACE="Courier, Helvetica" >

    ซึ่งจำสั่งให้บราวเซอร์โหลดฟอนต์ Courier และ Helvetica ขึ้นมาใช้สำหรับเว็บเพจ คุณควรกำหนด ชื่อฟอนต์มาตรฐานทั่วไป เพื่อผู้ดูทั่วไป จะได้หน้าตาของเว็บเพจ ตรงตามที่คุณ ต้องการมากที่สุด

    หมายเหตุ การกำหนด FACE ในแท็ก < FONT > ไม่ได้อยู่ในมาตรฐาน HTML 3.2 แต่ใช้ได้กับบราวเซอร์เวอร์ชั่น 3.0 ขึ้นไปทั้งบราวเซอร์ของเน็ทสเคปและไมโครซอฟท์

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

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

  • การใช้ตัวพิเศษต่าง ๆ
    คุณเคยต้องแสดงตัวพิเศษอย่างตัว ® ที่ใช้กำกับเครื่องหมายการค้าในเว็บเพจของคุณหรือไม่ ? หรือคุณจะแสดงเครื่องหมายน้อยกว่า (< ) ได้อย่างไร ในเมื่อบราวเซอร์ คอยจะตีความว่า มันเป็นส่วนหนึ่งของแท็ก อยู่เสมอ ? คำตอบคือ การใช้รหัสอักษรแทน

    รหัสตัวอักษรมีอยู่ 2 รูปแบบด้วยกัน คือรหัสที่ระบุด้วยตัวเลขและที่ระบุด้วยชื่อ รหัสตัวอักษร ทั้งสอง รูปแบบ สามารถใช้ได้กับบราวเซอร์ใด ๆ ก็ได้ ดังนั้น คุณจึงเลือกใช้รูปแบบใด ก็ได้ ตามความ สะดวก ของคุณ อาทิ เช่น &#174 และ &reg เป็นรหัสตัวอักษร ของตัว ( ® ) สำหรับเครื่องหมาย การค้า &#60 และ &LT เป็นรหัสตัวอักษรของเครื่องหมายน้อยกว่า เป็นต้น

    นอกจากนี้ยังมีรหัสตัวอักษรให้คุณเลือกใช้อีกมากมาย
    ตัวพิเศษตัวหนึ่งซึ่งมีประโยชน์มาก ได้แก่ ตัว nonbreaking space (&#160; หรือ &nbsp; ) นักออกแบบเว็บใช้ตัวพิเศษนี้ในการแทรกช่องว่างเพื่อจัดหน้าตาของเนื้อความให้เป็นระเบียบเรียบร้อย


[BACK TO INTERNET]