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

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

ทั้งบราวเซอร์เอ็กซ์พลอเรอร์ 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 ของมัน

การเปลี่ยนแปลงคุณสมบัติใด ๆ ของอ็อปเจ็กต์ในเอ็กซ์พลอเรอร์ 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 ดังนี้

การออกแบบหน้าตาและจัดวางเนื้อความด้วย 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; ) นักออกแบบเว็บใช้ตัวพิเศษนี้ในการแทรกช่องว่างเพื่อจัดหน้าตาของเนื้อความให้เป็นระเบียบเรียบร้อย