เนื่องจากผมพยายามที่จะไม่ใช้ attribute ที่ deprecate แล้วของ HTML 4.01 ก็เลยต้องหาวิธีการจัดวางตำแหน่งรูปภาพโดยอาศัยเจ้า CSS มาช่วย ซึ่งผมพบ tutorial เด็ดๆ ที่นี่
Floatutorial: Step by Step CSS float tutorial
http://css.maxdesign.com.au/floatutorial/
CSS image text wrap tutorial
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm
และของ w3.org ที่นี่
http://www.w3.org/TR/CSS21/visuren.html#float-position
CSS ย่อมาจาก Cascading Style Sheet ถูกนำมาใช้กับ HTML 4.01 เพื่อที่จะช่วยในการแยกส่วนของ HTML tag และ ส่วนของวิธีการแสดงผลบนบราวเซอร์ออกจากกัน ทำให้การเขียนโค้ด HTML ดูสะอาด ไม่วุ่นวาย ซึ่งการนำ CSS มาใช้ก็ทำให้ tag และ attribute หลายอย่างถูกยกเลิกไปในเวอร์ชันที่ strict ของ HTML เช่น tag <center>
ลองดู HTML 4.01 reference ได้ที่นี่
น่าแปลกใจที่ HTML 4.01 ออกมานานแล้ว และก็ได้กลายเป็น XHTML 1.0 ในปัจจุบัน แต่ยังมีสำนักพิมพ์บางแห่งยังตีพิมพ์หนังสือสอน HTML โดยยังอ้างอิง HTML 3.2 อยู่เลย เปิดดูอ่านดูแล้วถึงกับงงครับ
ผมเพิ่มคำสั่งต่อไปในใน stylesheet ครับ
.img-left {
float:left;
margin: 0px 10px 10px 0px;
}
.img-right {
float:right;
margin: 0px 0px 10px 10px;
}
แล้วเวลาสั่งให้รูปชิดซ้ายหรือขวาก็เพิ่มคำสั่งเข้าไปแบบนี้
สำหรับจัดรูปชิดซ้าย: <img src=”abc.gif” class=”img-left”>
สำหรับจัดรูปชิดขวา: <img src=”abc.gif” class=”img-right”>
คำสั่ง margin: 0px 0px 10px 10px; จะเป็นการกำหนดระยะห่างระหว่างขอบของรูปกับขอบหรือข้อความต่างๆ โดยจะเรียงจาก บน ขวา ล่าง ซ้าย ตามเข็มนาฬิกาครับ
ทีนี้ก็มีปัญหาอีกอย่างหนึ่งก็คือ สำหรับ HTML 4.01 (strict) และ XHTML นั้น คำสั่ง target=”_blank” มันใช้ไม่ได้ ก็ต้องหาทางใช้วิธีอื่นๆ แทน ผมไปเจอวิธีนี้ในเว็บครับ (คลิ๊กที่นี่)
อธิบายง่ายๆ คือสร้างไฟล์ชื่อ external.js ข้างในมีคำสั่งต่อไปนี้
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i
จากนั้นก็ให้แทรกคำสั่งต่อไปนี้เข้าไประหว่าง
ครับทีนี้เวลานำไปใช้งานกับ anchor tag ก็ให้ใช้ตามตัวอย่างนี้ครับ
<a href="http://my.diary.in.th" rel="external">