สอนเขียนโฮมเพจ หรือ การเขียนเว็บเพจ ด้วย html ใน Dreamweaver MX

HTML (HyperText Markup Language) คือ ภาษาคอมพิวเตอร์ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจที่เรียกดูผ่านทางเว็บเบราว์เซอร์ (Web Browser) เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) ในปัจจุบัน HTML ล่าสุดคือ รุ่น 4.01 เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C) ในปัจจุบัน ทาง W3C ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML รุ่นแรกคือ 1.0 (ม.ค.2543) ซึ่งมีโครงสร้างเป็นแบบ XML (eXtensible Markup Language)

XHTML (Extensible HyperText Markup Language) คือ ภาษาคอมพิวเตอร์ที่คล้ายภาษา HTML แต่เข้มงวดเรื่องโครงสร้างภาษา (syntax) มากกว่า เนื่องจาก HTML ใช้โครงสร้าง SGML ที่ยืดหยุ่น ในขณะที่ XHTML พัฒนาจาก XML ที่คล้ายกับ SGML เช่นกัน แต่เข้มงวดมากกว่า อาจมองได้ว่า XHTML เป็นการแปลง HTML เดิมให้อยู่ในโครงสร้างของ XML

ตัวอย่าง XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Quick Example</title>
<meta http-equiv="content-type" 
content="text/html;charset=tis-620" />
</head>
<body><h1>Quick Example</h1>
<p><a href="http://validator.w3.org/check/referer">
<img src = "http://validator.w3.org/images/vxhtml10"
height="31" width="88" alt="hello" /></a></p>
<p>hello</p>
<script type="text/javascript">
<!-- <![CDATA[
document.write("<h2>Table of Factorials</h2>");
for(i = 1, fact = 1; i < 10; i++, fact *= i) {
document.write(i + "! = " + fact);
document.write("<br />");
}
// ]]> -->
</script>
</body></html>

ตัวอย่าง ฟอร์มสืบค้นจาก google.com
<form method="get" action="http://www.google.com/search">
<input type="text" name="query">
<input type="submit">
</form>

เปรียบเทียบ เนื้อข้อมูลของ UTF-8 กับ Unicode หรือ UTF-16 ความเป็นอัตโนมัติของ browser ปกติผมจะเรียกว่าประเภทตัวอักษรแบบ Unicode แต่ใน Firefox และ Chrome เรียกว่า UTF-16 ในบราวเซอร์รุ่นใหม่จะรู้อัตโนมัติว่าเป็นแฟ้มข้อมูลแบบใด เพื่อการแสดงผล

ขนาดแฟ้ม เมื่อพิจารณาดูความต่างของขนาดแฟ้มจะ พบว่า ประเภท UTF-8 จะมีขนาดแฟ้มแปรผัน ตามลักษณะของข้อมูล โดยตัวเลขใช้ 1 byte แต่ตัวอักษรใช้ 3 bytes เช่น "ก0ข1ค2" จะมีขนาด 15 bytes เพราะ กขค ใช้พื้นที่ 9 bytes และ 012 ใช้พื้นที่ 3 bytes รวม header 3 bytes ก็จะเป็น 15 bytes + http://www.thaiall.com/blog/admin/4557/

wap.php <?php if (!isset($_ENV["HTTP_ACCEPT"])) header("Content-type: text/vnd.wap.wml"); print "<?xml version=\"1.0\"?>\n"; ?> <wml> <card id="HTML" title="<?php print rand();?>"> <p>Hello on thaiall.com<br/> <?php print date("d/m/Y H:i:s"); ?></p> </card> </wml>

ทดสอบการทำงานกับแฟ้มขนาด 1 ล้านไบท์ ได้มีการเขียนเว็บเพจ และใช้ java script มา 4 เว็บเพจ ทุกเว็บเพจมีขนาด 1 ล้านไบท์เท่ากัน เพื่อทดสอบการใช้เวลา download ของ script แต่ละเว็บเพจ ทดสอบใน firefox, chrome และ ie มีประเด็นที่สนใจดังนี้ 1. เปิด และปิด script ในเว็บเพจ มีผลอย่างไร 2. การ refresh ของแต่ละ browser เมื่อใช้ no-cache แตกต่างกันหรือไม่ โดยใช้ javascript ในการประมวลผลเวลาของแต่ละหน้า ผลการทดสอบที่น่าสนใจ ดังนี้ การทดสอบที่ 1 พบว่า การส่งค่าผ่าน url จะทำให้ load เว็บเพจทั้งหน้าใหม่ เปิดเว็บเพจ http://www.thaiall.com/html/onemillion.htm ครั้งแรก ใช้เวลาไป 6186 millseconds เมื่อคลิ๊กลิงค์ Reload แบบส่ง get ใหม่ ใช้เวลาไป 9784 milliseconds แต่ถ้า Refresh ผ่าน browser จะเรียก script เดิมจากใน cache ใช้เวลา 23 milliseconds การทดสอบที่ 2 พบว่า การทำงานใน script เดียว ตั้งแต่ต้นถึงท้าย script จะใช้เวลาน้อยมาก เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv1.htm ครั้งแรก ใช้เวลาไป 4 millseconds จะเปลี่ยนเป็น Reload หรือ Refresh แบบใด ก็ใช้เวลาเท่าเดิม เพราะทั้งเว็บเพจมีคำว่า script คำเดียว ทุกอย่างอยู่ใน script เดียว หรือ thread เดียว ไม่มีการเปิดปิด tag script หลายครั้ง เป็นการทำงานใน thread เดียวกัน จึงได้เวลาจากการประมวลผลตั้งแต่ต้น thread ถึงท้าย thread ไม่แตกต่างกันมากนัก การทดสอบที่ 3 พบว่า เป็นการทดสอบที่ยืนยันผลของการทดสอบที่ 1 เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv2.htm ครั้งแรก ใช้เวลาไป 6077 millseconds ใช้เทคนิคว่า การเปิด tag script ต้นแฟ้ม และปิดทันที เพื่อบันทึกเวลาเริ่มต้น แล้วเปิด tag script ท้ายแฟ้ม เพื่อประมวลเวลา และแสดงผล จะแสดงเวลาที่ใช้ ในการ load เว็บเพจ ใกล้เคียงกับความเป็นจริง คือ ใช้เวลาประมาณ 6 วินาที หรือ 6000 millisecond ต่อการ load หนึ่งครั้ง แต่ถ้าโหลดจากใน cache ของ browser ก็จะใช้เวลาน้อยมาก คือ ไม่กี่ millisecond การทดสอบที่ 4 พบว่า เป็นการทดสอบโดยเพิ่ม no-cache ที่ header ว่า <meta http-equiv="cache-control" content="no-cache"> เปิดเว็บเพจ http://www.thaiall.com/html/onemillionv3.htm ครั้งแรก ใช้เวลาไป 9562 millseconds ให้ผลเหมือนกับกรณีทดสอบที่ 1 เมื่อทดสอบบน firefox และ chrome แต่บน ie (internet explorer) 11 การ refresh ของ browser ใช้เวลา 3776 milliseconds หรือประมาณนี้ สรุปว่า ie ยอมรับคุณสมบัติ no-cache ทำให้การ refresh จะ load ข้อมูลมาใหม่ทุกครั้ง และการ force reload ด้วยการกด Ctrl-F5 สามารถใช้ได้กับทุก browser ที่ทดสอบ สรุปว่า การเปิดปิด script หลายครั้ง มีผลแตกต่างกับการเปิดครั้งเดียว การนำไปใช้ให้เกิดประโยชน์ ขึ้นอยู่กับการออกแบบเว็บเพจ และคุณสมบัติ no-cache ก็ใช้ได้กับบาง browser เท่านั้น ไม่ควรไว้วางใจ และการโหลดภาพไม่มีผลต่อเวลาในการโหลดเว็บเพจ เพราะแยกส่วนกันชัดเจน http://www.thaiall.com/blog/burin/6913/


	การเขียนโฮมเพจ หรือ การเขียนเว็บเพจ เบื้องต้น