ปรับปรุง : 2567-05-03 (ปรับ target)

ภาษาเฮชทีเอ็มแอล

ภาษาเฮชทีเอ็มแอล (HTML) คือ ภาษาคอมพิวเตอร์ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี ในปัจจุบัน HTML ล่าสุดคือ รุ่น 5 เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C)

ความรู้เบื้องต้นเกี่ยวกับ HTML

+ ความหมาย เว็บไซต์(Website)
เปรียบเสมือนหมู่บ้าน เพราะเห็นชื่อหมู่บ้าน ก็ต้องคาดหวังได้ว่าจะพบอะไรในหมู่บ้านนี้
+ ความหมาย โฮมเพจ(Homepage)
เปรียบเสมือนบ้าน ที่มีแผนที่อยู่หน้าประตูว่าท่านจะเดินไปพบใครห้องไหนทางชั้นไหน
+ ความหมาย เว็บเพจ(Webpage)
เปรียบเสมือนห้อง ที่เก็บข้อมูลเฉพาะเรื่องใดเรื่องหนึ่ง เช่น ครอบครัว สินค้า สะสม
+ Dreamweaver มิใช่จุดเริ่มต้น
แต่เป็นการรวบรวมผลงานต่าง ๆ ที่มีมาเผยแพร่ ถ้าไม่มีอะไรจะใส่ใน dream คงต้องไปหาให้มีก่อน
+ Dreamweaver มิใช่จุดสุดท้าย
เพราะผลที่ได้จาก dream มีผู้สร้างทราบคนเดียว ต้องนำไป upload เพื่อเผยแพร่ใน Web Server
เอชทีเอ็มแอล (HTML) คืออะไร [ wikipedia.org]
ภาษาเฮชทีเอ็มแอล (HTML = HyperText Markup Language) คือ ภาษาคอมพิวเตอร์ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจที่เรียกดูผ่านทางเว็บเบราว์เซอร์ (Web Browser) เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) ในปัจจุบัน HTML ล่าสุดคือ รุ่น 5 เป็นมาตรฐานหนึ่งของ 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

website49

webpage by word

List of HTML tag [มีคำสั่งอีกมากมาย ที่ w3schools.com]
BODY : Defines the document's body
B : Defines bold text
I : Defines a part of text in an alternate voice or mood
U : Defines text that should be stylistically different from normal text
HTML : Defines the root of an HTML document
HEAD : Defines information about the document
TITLE : Defines a title for the document
BR : Defines a single line break
HR : Defines a thematic change in the content
FONT : Defines font, color, and size for text (Not supported in HTML5)
CENTER : Defines centered text (Not supported in HTML5)
A : Defines a hyperlink
IMG : Defines an image
TABLE : Defines a table
TR : Defines a row in a table
TD : Defines a cell in a table
DIV : Defines a section in a document
STYLE : Defines style information for a document
P : Defines a paragraph
META : Defines metadata about an HTML document
EMBED : Defines a container for an external (non-HTML) application

มอง slide ในอดีต

22 พ.ค.54 เมื่อ 5 ปีก่อน มีใช้ slide นี้ อบรมเกี่ยวกับการนำเสนอข้อมูลผ่านอินเทอร์เน็ต ที่สำนักงานสาธารณสุขประจำจังหวัด หลังผ่านไปหลายปี แนวโน้มการเผยแพร่ข้อมูลจากองค์กรทั้งภาครัฐ และเอกชนของโลก ก็ยังไม่ก้าวหน้าเท่าที่ควร เพราะการเปิดเผยข้อมูล กับความปิดเป็นความลับ ยังอยู่กันคนละฟากฝั่ง ที่สิ่งผุดขึ้นมาอย่างเห็นได้ชัด คือ mobile device ที่สนับสนุน wifi หรือ 3G และการเข้ามาของ iphone และ ipad ส่วนประเด็นการออกแบบเว็บไซต์ในทุกระดับยังเป็นแบบ header , footer , column และ rows ส่วนเทคนิคในเว็บไซต์มีการใช้ .css และ web 2.0 อย่างเด่นชัดขึ้น โดยเฉพาะ Facebook.com และ Twitter.com กลายเป็นอีกเครื่องมือหนึ่งของเว็บไซต์ต่าง ๆ ในการประชาสัมพันธ์ข้อมูลข่าวสารขององค์กร

ความรู้เบื้องต้นเกี่ยวกับ HTML

ตัวอย่าง XHTML [xhtml_1to10.htm]

<!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>

HTML

บทเรียนหลัก
1. สอน Dreamweaver
2. สอน Graphic Application
3. สอน Java Script
4. สอนเขียนเว็บเพจด้วย Word
+ แผนสอนเขียนเว็บ htm 49-05-02
+ แผนสอนเขียนเว็บ txt 49-05-02
ตัวอย่าง Java Script
1. นาฬิการอบ Mouse (ใต้ /body)
2. เมนูแบบ Dynamic (2.15)
3. ปฏิทินสวย (5.6)

อื่น ๆ
+ สอนเขียน HTML 7 บทเรียน
+ แผนสอนเขียนเว็บ (doc) 49-05-02
+ แผนสอนเขียนเว็บ (txt) 49-05-02
+ แผนสอนเขียนเว็บ (doc) 48-05-12
+ แผนสอนเขียนเว็บ (htm) 48-05-12
+ DreamWeaver7 Screen

บทเรียนเสริม
1. สอนเขียน HTML (ใหม่ 12 Hr)
2. สอนเขียน HTML (เก่า)
3. Webserver Setup
4. PhotoShop
5. Flash by SwishMax
6. มาตรฐาน RGB
7. การใช้ Template
8. Programming
9. Java Script
10. โฆษณาเว็บไซต์
11. จดโดเมน และเว็บโฮสติ้ง
12. website49.ppt (Health)
13. htmlslide49.zip
14. xhtml คืออะไร
+ /html5/test.htm

Lesson : 3 pages + Thainame.net

Dream 8 (new)
Dream 7 = Dream MX 2004
Dream 6 = Dream MX

DreamweaverMX

ขั้นตอนการติดตั้งภาษาไทยใน DreamweaverMX

วิธีแรก

ถ้าเป็น Dreamweaver MX และมีปัญหาภาษาไทย ให้ Download windows874.xml ไว้ใน
C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Encodings
เปิดแฟ้ม EncodingMenu.xml มาแก้ไข
เพิ่มบรรทัดที่มี 874 ลงไปอย่างเหมาะสม
เปิด Dream ขึ้นมาใหม่ แล้วกดปุ่ม Ctrl - U
เข้า Font, Font Setting เลือก Windows 874
เปลี่ยน Proportional Font เป็น microsoft sans serif
เข้า New Document
เปลี่ยน Default Encoding เป็น Windows 874
ปิด Dream แล้ว New Document ใหม่
เปิดเอกสารที่ Save ไว้ก็ไม่พบปัญหาภาษาไทยอีก
วิธีนี้ยังพบปัญหาภาษาไทยใน Code View

วิธีที่สอง

ใช้แฟ้มจาก Thaiware.com

Download และติดตั้ง Thai Add-on จึงจะใช้ภาษาไทยใน Code View ได้
หลังจากนั้น เปิด Dream ขึ้นมาใหม่ แล้วกดปุ่ม Ctrl - U
เข้า Font, Font Setting เลือก Windows 874
เปลี่ยน Proportional Font เป็น microsoft sans serif
เข้า New Document
เปลี่ยน Default Encoding เป็น Windows 874
ปิด Dream แล้ว New Document ใหม่

1. Introduction to Dreamweaver

- DreamWeaver และ Internet Explorer
- Menu Bar, Window, Show Panels (F4)
- Menu Bar, Window, Insert (Ctrl+F2)
- Menu Bar, Window, Properties (Ctrl+F3)
- Menu Bar, Edit, Preference (Ctrl+U)
- Menu Bar, Commands, Clean Up HTML ...

ข้อควรทราบ
1. ความแตกต่างของ website, homepage และ webpage
2. Dreamweaver คืออะไร รวมถึงจุดเด่น และจุดด้อย
3. วิธีแก้ปัญหาการใช้ภาษาไทย ใน Dreamweaver
4. การติดตั้ง Web Server
5. HTML คืออะไร จำเป็นต่อ Server-Side Script อย่างไร
6. ความคาดหวังจากการสอน (body, character, image, link, table, javascript)
7. การเผยแพร่ (Upload เช่น thainame.net, geocities.com)

1.1 สาระการเรียนรู้ : การติดตั้ง Dream
+ ติดตั้ง Macromedia Dreamweaver MX
แบบฝึกหัด
+ ฝึกติดตั้งโปรแกรม Macromedia Dreamweaver MX

1.2 สาระการเรียนรู้ : การเรียกใช้ Dream
+ เปิดโปรแกรม Macromedia Dreamweaver MX
แบบฝึกหัด
+ ฝึกเปิด Macromedia Dreamweaver MX

1.3 สาระการเรียนรู้ : การเปิดใช้ Dream ครั้งแรก
+ เลือก Workspace สำหรับทำงาน
- ให้เลือก Dreamweaver MX Workspace ดังภาพ
แบบฝึกหัด
+ ฝึกเปิด Macromedia Dreamweaver MX

1.4 สาระการเรียนรู้ : แนะนำส่วนต่าง ๆ ของ Dream
+ เรียนรู้ส่วนต่าง ๆ ของโปรแกรม
- Menu Bar, View, (View, Code, Code and Design)
- Menu Bar, Window, Show Panels (F4)
- Menu Bar, Window, Insert (Ctrl+F2)
- Menu Bar, Window, Properties (Ctrl+F3)
- Menu Bar, Modify, Page Properties (Ctrl+J)
- Menu Bar, Edit, Preference (Ctrl+U)
- Menu Bar, Commands, Clean Up HTML ...
แบบฝึกหัด
+ ฝึกเลือก Show/Hide ส่วนต่าง ๆ
+ ฝึกล้าง HTML ที่ไม่จำเป็น

1.5 สาระการเรียนรู้ : การแก้ปัญหาภาษาไทยใน Dream
+ ศึกษาการแก้ปัญหาภาษาไทยแบบ Manual
+ แนะนำการแก้ปัญหาด้วยโปรแกรม dream_thai_mx.exe จาก thaiware.com
แบบฝึกหัด
+ ฝึกแก้ปัญหาภาษาไทยทั้ง 2 วิธี

1.6 สาระการเรียนรู้ : การเลือก Font ภาษาไทยใน Dream
+ ศึกษาการกำหนด Font ใน Preference
+ ศึกษาการกำหนด Font ให้กับตัวอักษร
แบบฝึกหัด
+ ฝึกกำหนด Font ใน Preference
+ ฝึกกำหนด Font อย่างน้อย 3 Fonts สำหรับ 3 บรรทัด

1.7 สาระการเรียนรู้ : การกำหนดรูปแบบตัวอักษร
+ ศึกษาภาพที่เตรียมให้ใช้
+ ศึกษาการใช้ตัวอักษรแบบต่าง ๆ
แบบฝึกหัด
+ ฝึกใช้ตัวอักษรแบบต่าง ๆ
+ ฝึกตรวจสอบขนาดภาพ และการเก็บภาพเป็นที่เป็นทาง

1.8 สาระการเรียนรู้ : การแทรกภาพ
+ ศึกษาการแทรกภาพใน Dream โดยใช้ภาพที่เตรียมไว้แล้ว
แบบฝึกหัด [ _elephant.jpg ]
+ ฝึกใช้ภาพหลายภาพในเว็บเพจ

1.9 สาระการเรียนรู้ : การสร้างลิงค์
+ ศึกษาการใส่ลิงค์ใน Dream
+ วางแผนสร้าง x2.htm จึงสร้างลิงค์ใน x1.htm ให้เชื่อมต่อกับ x2.htm
แบบฝึกหัด
+ ฝึกใส่ลิงค์แบบต่าง ๆ

1.10 สาระการเรียนรู้ : การสร้างลิงค์สำหรับหลายเว็บเพจ
+ สร้างเว็บเพจชื่อ x1.htm
+ สร้างเว็บเพจชื่อ x2.htm
+ ใส่ลิงค์ x1.htm ไว้ในแฟ้ม x2.htm
+ ศึกษาความหมายของ target ( _blank _self _top _parent myframename )
แบบฝึกหัด
+ ฝึกใส่ลิงค์ในเว็บเพจต่าง ๆ

1.11 สาระการเรียนรู้ : การสร้างลิงค์ใน index.html
+ สร้างเว็บเพจ index.html
+ สร้างลิงค์ต่าง ๆ ใน index.html
แบบฝึกหัด
+ ฝึกสร้างความสัมพันธ์ระหว่างเว็บเพจต่าง ๆ

1.12 สาระการเรียนรู้ : การเปิด index.html ใน Internet Explorer
+ ศึกษาการเปิดเว็บเพจใน Internet Explorer
+ ศึกษาการกด F5 หรือ Ctrl-F5
+ รวบรวมแฟ้ม ประกอบด้วย index.html x1.htm x2.htm และ _elephant.jpg
+ ศึกษาการนำผลงานไปเผยแพร่ เช่น บริการจากเครื่องของตนเอง หรือ Upload ไปไว้ในอินเทอร์เน็ต
แบบฝึกหัด
+ ฝึกเปิดเว็บเพจด้วย Internet Explorer
+ ฝึกเผยแพร่ผลงาน
- Upload ไปไว้ที่ thainame.net หรือ geocities.com (Free Web Hosting)
- ทำให้เครื่องตนเองเป็น Web Server โดยใช้โปรแกรมของ thaiabc.com (Apache, PHP, MySQL)

1.13 สาระการเรียนรู้ : การค้นหาข้อมูลใน Google.com
+ ศึกษาการสืบค้นจาก google.com
+ ศึกษาการสืบค้นจาก alltheweb.com
+ ศึกษาการสืบค้นจาก yahoo.com
แบบฝึกหัด
+ ฝึกค้นหาภาพจากอินเทอร์เน็ต
+ ฝึกค้นหาวีดีโอจากอินเทอร์เน็ต

1.14 สาระการเรียนรู้ : การนำภาพจากอินเทอร์เน็ตมาไว้ในเครื่อง
+ ศึกษาการนำแฟ้มภาพ ไปเก็บในห้องที่เหมาะสม
+ ศึกษาความแตกต่างของภาพ และภาพพื้น
แบบฝึกหัด
+ ฝึกคัดลอกภาพจากอินเทอร์เน็ต

1.15 สาระการเรียนรู้ : การคัดลอกเว็บเพจจากอินเทอร์เน็ต
+ เปิดเว็บเพจ http://www.thaiall.com/malee
+ ศึกษาการ Save As .. เว็บเพจ (Web Page, complete) เป็น malee.htm
+ ศึกษาแฟ้ม 4 แฟ้มที่มีในห้อง malee_files ซึ่งถูกสร้างอัตโนมัติ
+ ศึกษาการ View, Source แล้ว Save As (Web Page, HTML only)
+ ศึกษาการแก้ไขแฟ้ม ที่ได้จากอินเทอร์เน็ต
แบบฝึกหัด
+ ฝึกนำแฟ้มที่จัดเก็บไว้ มาแก้ไข

1.16 สาระการเรียนรู้ : การกำหนด meta และแทรกภาพจากอินเทอร์เน็ต
+ ศึกษาความสำคัญของ Meta Tag
+ ศึกษาการเขียน charset
+ ศึกษาการเขียน keywords
+ ศึกษาการเขียน description
แบบฝึกหัด
+ ฝึกเขียนเว็บเพจที่มี Meta Tag
+ ตัวอย่าง HTML Code
<html><head>
<title>แผนงาน</title>
<meta http-equiv=content-type content="text/html; charset=windows-874">
<meta name=keywords content="plan,policy,lampang">
<meta name=description content="แผนงานของสำนักงาน">
</head>
<body>รายละเอียด
</body></html>

1.17 สาระการเรียนรู้ : การสร้างตาราง
+ ศึกษาการสร้างตาราง
+ ศึกษาการสร้างตารางหลายหลัก
+ ศึกษาการสร้างตารางหลายบรรทัด
แบบฝึกหัด
+ ฝึกสร้างตาราง 3 หลัก
+ ตัวอย่าง HTML Code
<table width=75% cellpadding=20 cellspacing=10 border=5>
<tr><td>ไทย</td><td>รัก</td></tr>
<tr><td>กัน</td><td>นะ</td></tr>
</table>

1.18 สาระการเรียนรู้ : การสร้างตารางซ้อนตาราง
+ ศึกษาการสร้างตารางหลายแถว
+ ศึกษาการสร้างตารางหลายหลัก
แบบฝึกหัด
+ ฝึกสร้างตารางซ้อนในตาราง
+ ตัวอย่าง HTML Code
<table width=75% cellpadding=20 cellspacing=10 border=5>
<tr><td>ไทย</td><td>รัก</td></tr>
<tr><td>กัน</td><td>
<table bgcolor=yellow width="100%"><td>นะ</td></table>
</td></tr>
</table>

1.19 สาระการเรียนรู้ : การสร้าง Layer
+ ศึกษาการสร้างแผ่นงาน ด้วยคำสั่ง DIV
+ ศึกษาการสร้างแผ่นงานหลายแผ่น และกำหนด z-index
แบบฝึกหัด [ _elephant.jpg , ตัวอย่าง ]
+ ฝึกสร้างแผ่นงาน ซ้อนแผ่นงาน
+ ตัวอย่าง HTML Code
<div style="position:absolute; left:50px; top:50px;">
<img src=_elephant.jpg>
</div>
หรือ
<div style="position:absolute; left:50px; top:50px; width=150;
background:#00ffff; z-index=1;">
abc<br><img src=_elephant.jpg>
</div>

1.20 สาระการเรียนรู้ : การแทรกภาพ และการแก้ไข Code
+ ศึกษาการแทรกภาพ และการเปลี่ยน Code หลังจัดเก็บ ใน Dreamweaver
แบบฝึกหัด
+ ฝึกเขียน Code แทรกภาพ
+ ตัวอย่าง HTML Code
<a href=http://www.101-idea.com/counterr.php>
<img src=http://www.101-idea.com/counter2.php border=0>
</a>

1.21 สาระการเรียนรู้ : การสร้างเฟรม
+ ศึกษาการใช้ frame แบบต่าง ๆ
แบบฝึกหัด
+ ฝึกเขียน Code เรียกใช้เฟรม
+ ตัวอย่าง HTML Code
<frameset rows="300,*">
<frame src=http://www.thaiall.com>
<frame src=http://www.thaiabc.com>
</frameset>

1.22 สาระการเรียนรู้ : การสร้าง iframe
+ ศึกษาการใช้ iframe เรียกใช้เว็บเพจของตนเอง
+ ศึกษาการใช้ iframe เรียกใช้เว็บเพจจากอินเทอร์เน็ต
แบบฝึกหัด
+ ฝึกใช้ iframe เรียกเว็บเพจจากอินเทอร์เน็ต
+ ตัวอย่าง HTML Code
<iframe src=x.htm width=300 height=200 align=center name=iframe frameborder=no>
</iframe>

2. Graphic Application

- Photoshop (ต่างกันนิดหน่อย ทุกรุ่น)
- Internet Explorer
- Microsoft Paint (มีในทุกเครื่อง)
- Swish (ไม่ต่างจาก SwishMax มากนัก)
- IrfanView หรือ IView (คู่แข่ง ACDSee)

ข้อควรทราบ
1. แนะนำโปรแกรมแก้ไขภาพ เช่น Photoshop, IrfanView, MS Paint
2. ความแตกต่างของ jpg และ gif
3. ความสัมพันธ์ของ .gif กับ Background
4. ความแตกต่างของ Thumbnail, Enlarge และ Gallery
5. ความแตกต่างของ Flash, Swish และ SWF

2.1 สาระการเรียนรู้ : การลบ Background ด้วย PhotoShop
+ เปิดโปรแกรม Photoshop
+ Open ภาพ และเปลี่ยนประเภทของ Layer จาก Background เป็น Layer 0
+ เลือกลบ Background ออกให้หมด
แบบฝึกหัด [ _sing.jpg , _singn.gif , _singn.jpg ]
+ ฝึกลบ Background
+ ฝึกเปลี่ยนสี cube.jpg

2.2 สาระการเรียนรู้ : การจัดเก็บเป็น .gif
+ ศึกษาการจัดเก็บภาพ ให้เป็นภาพโปร่ง
+ จัดเก็บภาพนี้เป็น _singn.jpg
+ จัดเก็บภาพนี้เป็น _singn.gif
แบบฝึกหัด
+ ฝึกจัดเก็บภาพให้เป็นภาพโปร่ง

2.3 สาระการเรียนรู้ : การนำภาพมาเรียงต่อกันในเว็บเพจ
+ เปิด Notepad แล้วพิมพ์คำสั่ง HTML เพื่อแสดงภาพ 4 ภาพ
+ ภาพแรก เป็นต้นฉบับ
+ ภาพที่สอง เป็น .gif แต่อยู่บนพื้นตารางสีเหลือง
+ ภาพที่สาม เป็น .gif แต่อยู่บนพื้นตารางสีน้ำเงิน
+ ภาพที่สอง เป็น .jpg แต่อยู่บนพื้นตารางสีแดง
แบบฝึกหัด [ ตัวอย่าง ]
+ ฝึกเขียนเว็บเพจดังกล่าว แสดง 4 ภาพ
+ ตัวอย่าง HTML Code
<body bgcolor="black">
<table>
<td bgcolor=green><img src=_sing.jpg><br>_sing.jpg</td>
<td bgcolor=yellow><img src=_singn.gif><br>_singn.gif</td>
<td bgcolor=blue><img src=_singn.gif><br>_singn.gif</td>
<td bgcolor=red><img src=_singn.jpg><br>_singn.jpg</td>
</table>

2.4 สาระการเรียนรู้ : การลบ Background ด้วย MS Paint
+ เปิดโปรแกรมโดยกด Start, Run แล้วพิมพ์ mspaint ในช่อง open ตามด้วยกดปุ่ม Enter
+ ศึกษาการใช้ MS Paint เปิดแฟ้ม .jpg
+ ศึกษาการใช้ยางลบ ลบ Background
แบบฝึกหัด [ _toon.jpg ]
+ ฝึกใช้ Paint ลบ Background

2.5 สาระการเรียนรู้ : การนำภาพจาก Desktop มาใช้
+ กด Print Screen หน้า Desktop แล้ว Paste ไปใน MSPaint
+ ตัดให้เหลือเฉพาะเครื่องคอมพิวเตอร์ โดยใช้เครื่องมือ Select
+ จัดเก็บเป็น .jpg หรือ .gif เพื่อนำไปใช้ในเว็บเพจ
แบบฝึกหัด
+ ฝึดตัดภาพอื่น ๆ จากโปรแกรม Windows

2.6 สาระการเรียนรู้ : การสร้าง swf ด้วย Swish
+ ศึกษาการ Add Effect ตัวอักษร Zoom In แล้ว Export เป็น swf
+ ศึกษาการ Add Effect ภาพ แบบ Zoom In, Zoom Out
+ ศึกษาการ Add Effect ภาพ แบบ Move, Place และ Remove
+ กำหนดช่วงเวลาเป็น 10 วินาที
แบบฝึกหัด [ _cindy.jpg , Download Program ]
+ ฝึกเลือก Effect แบบอื่น ๆ
+ ตัวอย่าง HTML Code
<embed src="x.swf" width="100" height="200">
</embed>

2.7 สาระการเรียนรู้ : การสร้าง Gallery ด้วย IrfanView
+ ศึกษาการ Retouch ภาพด้วย IrfanView
+ ศึกษา Rename, Conversion และ Slideshow
+ ศึกษาการสร้าง Gallery และ Thumbnail (File, Options, Select all)
+ ขณะ Save เป็น HTML File ให้เลือก Write relative path names
แบบฝึกหัด [ Download Program]
+ ฝึก Retouch ภาพ
+ ฝึกสร้าง Gallery (นำ Thumbnails.html มาปรับปรุง)

3. Javascript

- สามารถเขียนโปรแกรมอย่างง่าย ๆ ได้
- สามารถ Copy Source Code มาใช้ได้
- ฟรี Code จาก http://www.thaiall.com/java
- ฟรี Code จาก http://www.javascripter.net
- ฟรี Code จาก http://www.javascript.com

ข้อควรทราบ
1. ความแตกต่างของ Java และ Java Script
2. การทำงานแบบตามลำดับ
3. การทำงานแบบเลือกตามเงื่อนไข
4. การทำงานแบบทำซ้ำ
5. การโปรแกรมแบบต่าง ๆ

3.1 สาระการเรียนรู้ : การเขียน Javascript ใน Body
+ ความรู้เบื้องต้นเกี่ยวกับ Javascript
+ เริ่มใช้ notepad เขียน JavaScript จาก Start, Run
+ การจัดเก็บแฟ้ม ชื่อ "c:\x.htm"
+ เปิดเว็บเพจ ชื่อ "c:\x.htm" ด้วย Internet Explorer
+ ศึกษาการเขียน HTML ร่วมกับ Javascript
+ ศึกษาคำสั่ง document.write
แบบฝึกหัด [ ตัวอย่าง ]
+ ให้เปลี่ยนคำว่า test เป็นคำว่า thai
+ ให้เพิ่มบรรทัด document.write เป็น 3 บรรทัด

3.2 สาระการเรียนรู้ : การเขียน Javascript ใน Header
+ ศึกษาการเขียน Javascript ใน Head
+ ศึกษาการเรียกใช้ Function ที่ประกาศใน Head
แบบฝึกหัด
+ ให้ copy function และเปลี่ยนชื่อเป็น yy
+ ให้ เรียกใช้ yy ในส่วนของ body ร่วมกับ xx

3.3 สาระการเรียนรู้ : การเรียก Javascript จาก External File
+ ศึกษาสร้างแฟ้มนามสกุล .js
+ ศึกษาการเรียกใช้แฟ้ม .js
+ ศึกษาการเรียกใช้ฟังก์ชันที่อยู่ในแฟ้ม .js
แบบฝึกหัด
+ ให้ copy xx.js เป็น yy.js และเรียกใช้ใน yy.htm
+ แก้ไขการทำงานของฟังก์ชันใน yy.js และเรียกใช้ใน yy.htm
+ ตัวอย่าง HTML Code
<script language='javascript1.1'>page="html";</script>
<script language='javascript1.1' src='http://hits1.truehits.net/data/h0013199.js'></script>

3.4 สาระการเรียนรู้ : การใช้ Javascript กับ Button หรือ Link
+ ศึกษาการใช้ javascript ในปุ่ม button
+ ศึกษาการใช้ javascript ใน Link
+ ศึกษาคำสั่ง history.back()
+ ศึกษาคำสั่ง window.print()
+ ศึกษาคำสั่ง window.close()
แบบฝึกหัด [ ตัวอย่าง ]
+ ฝึกใช้คำสั่งตามสาระ
+ ฝึกใช้คำสั่ง window.open('http://www.thaiall.com')
+ ฝึกใช้คำสั่ง window.open('http://www.thaiabc.com','_self')
+ อ่านจาก http://www.javascripter.net/faq/openinga.htm

3.5 สาระการเรียนรู้ : การใช้ Javascript กับ Form
+ ศึกษาการใช้ form, select และ onclick
+ ศึกษาคำสั่ง window.location
+ ศึกษาบริการสืบค้นจากลิสบล็อก ( List Box Search Engine )
แบบฝึกหัด [ ตัวอย่าง ]
+ ฝึกเพิ่ม URL ใน select
+ ฝึกใช้คำสั่ง window.open แทน window.location

3.6 สาระการเรียนรู้ : การ Download Script และแก้ไข
+ ศึกษาตัวอย่างจาก http://www.thaiall.com/java
+ ศึกษานาฬิกาตามเมาส์ (Clock on Mouse) [ ตัวอย่าง ]
+ ศึกษาการทำปฏิทินสวย (Calendar) [ ตัวอย่าง ]
+ ศึกษาเมนูแบบด็อปดาวน์ (Drop Down Menu) [ ตัวอย่าง ]
+ ศึกษาตัวอย่างใช้งานจริงของ www.lampang.go.th
- dmenulp.htm สำหรับเรียก Javascript มาทำงาน
- dmenulp_array.js สำหรับเก็บตัวเลือก จึงต้องเปิดแฟ้มนี้มาแก้ไข
- dmenulp.js สำหรับเก็บ Working Functions ไม่จำเป็นต้องเปิดแฟ้มนี้มาแก้ไข
แบบฝึกหัด [ ตัวอย่าง ]
+ ฝึกนำ นาฬิกาตามเมาส์ (Clock on Mouse) มาใช้
+ ฝึกนำ เมนูแบบด็อปดาวน์ (Drop Down Menu) มาใช้
+ ฝึกนำ ปฏิทินสวย (Calendar) มาใช้
+ ฝึกนำ Script ที่เตรียมให้มารวมกันในเว็บเพจเดียว
+ ฝึกนำ Script อื่นจาก http://www.thaiall.com/java มาใช้
+ ตัวอย่าง HTML Code
<script src=http://www.thaiall.com/java/dmenu_array.js></script>
<script src=http://www.thaiall.com/java/dmenu.js></script>

3.7 สาระการเรียนรู้ : การสุ่มภาพมาแสดงในเว็บเพจ
+ ศึกษาการฟังก์ชัน Date() และ method ภายใน
+ ศึกษาการใช้ % เพื่อหาเศษจากการหาร
+ ศึกษาการประกาศ และใช้ตัวแปรอาร์เรย์
แบบฝึกหัด [ ตัวอย่าง ]
+ ฝึกสุ่มภาพที่หาได้จากอินเทอร์เน็ตมาแสดง เช่น thaiall.com/actress
+ ฝึกสุ่มกำหนดสีพื้น (body bgcolor=red หรือ body bgcolor=blue)
+ ตัวอย่าง HTML Code
<body><script>
var now = new Date();
var ran = (now.getMilliseconds() % 99);
document.write(ran);
</script></body>

แนะนำเว็บไซต์ (Website Guides)

https://www.w3schools.com/html/default.asp
https://www.htmlgoodies.com/primers/html/
https://html.com/
http://www.dwthai.com เว็บไซต์ของคนรัก Dreamweaver MX
https://software.thaiware.com/3203.html
Thai Add-on for DreamweaverMX

WAP (Wireless Application Protocol)

http://www.johnreed.co.uk/wapbrowser.html

x.wml
<?xml version="1.0"?>
<wml>
<card id="HTML" title="first">
<p>Hello</p>
</card>
</wml>

WAP คือ โปรโตคอล (Protocol) มาตรฐานสากล เกิดจากความร่วมมือของบริษัทผู้ผลิตโทรศัพท์เคลื่อนที่หลายราย เพื่อทำให้โทรศัพท์สามารถใช้งานโปรแกรมประยุกต์ และข้อมูลจากเครือข่ายอินเทอร์เน็ต เช่นเดียวกับการใช้งานผ่านเครื่องคอมพิวเตอร์ โดย WAP จะใช้ทรัพยากรต่ำกว่า WWW จึงทำงานใต้หน่วยประมวลผลต่ำ หน่วยความจำต่ำ ความเร็วในการแสดงผลต่ำ หน้าจอขนาดเล็ก และใช้พลังงานต่ำกว่า จุดเด่นที่สำคัญของ WAP คือทำงานได้บนโทรศัพท์เคลื่อนที่ หรืออุปกรณ์พกพาขนาดเล็กได้
Wap Browser for Mobile
! http://www.tutorialized.com/tutorials/PHP/WAP-and-WML/1
! http://www.johnreed.co.uk/wapbrowser.html
! http://mtld.mobi/emulator.php
! http://www.mobilerunner.net/emu_wap3/p/wap3/
! http://www.waptiger.com/waptiger/
! http://www.apachesoftware.com/Engine.html
Wap Webpage Sample
+ http://www.thaiall.com/wap/wap.php
+ http://www.thaiall.com/wap/wap.wml

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/

UTF Character Set

เปรียบเทียบ เนื้อข้อมูลของ 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/

UTF-8
UTF-8 เป็นมาตรฐานของตัวอักษร มี Character table ที่กำหนดอย่างชัดเจน หากสร้างแฟ้มแบบ UTF-8 ที่มีตัวอักษร 3 ตัวคือ "กขค" จะใช้พื้นที่ทั้งหมด 12 bytes โดยใช้พื้นที่เก็บข้อมูลตัวอักษรละ 3 bytes และส่วน header คงที่อีก 3 bytes เมื่อใช้โปรแกรม editplus ที่กำหนด encoding type เป็น UTF-8 แล้วสร้างแฟ้ม พบว่า กอไก่ คือ E0 B8 81 ฐาน 16 ขอไข่ คือ E0 B8 82 ฐาน 16 คอควาย คือ E0 B8 84 ฐาน 16 โดย 3 Bytes แรกของแฟ้ม คือ EF BB BF ฐาน 16 แต่ตัวเลขในแฟ้มประเภท UTF-8 จะใช้ค่าตามตาราง ASCII เหมือนเดิม แต่อักษร 3 bytes แรกก็ยังมีอยู่เหมือนเดิม เมื่อสร้างแฟ้มที่มี "012" ก็จะได้แฟ้มขนาด 6 Bytes ซึ่งมาตรฐานนี้กำหนดว่าภาษาไทยอยู่ระหว่าง 0xe0 0xb8 0x80 ถึง 0xe0 0xb9 0xbf แต่ถ้าเป็นมาตรฐาน unicode หรือ UTF-16 จะอยู่ระหว่าง U+0E00 ถึง U+0E7F
UTF-16
หากกำหนดประเภทแฟ้มเป็น unicode หรือ UTF-16 แล้ว save as ข้อมูล "กขค" จะใช้พื้นที่ขนาด 8 bytes พบว่า กอไก่ คือ 01 0E ฐาน 16 ขอไข่ คือ 02 0E ฐาน 16 คอควาย คือ 04 0E ฐาน 16 โดย 2 bytes แรก คือ FF FE ฐาน 16 แต่ถ้าเป็นตัวเลข "012" ก็จะมีขนาดเท่ากับ "กขค" ที่ใช้พื้นที่ 8 bytes โดย 2 bytes แรกเหมือนเดิม แต่ข้อมูลคือ 30 00 31 00 32 00 ซึ่ง unicode จะมีขนาดแฟ้มเป็น 2 เท่าของจำนวนตัวอักษร รวม headder เมื่อรวมกับ header อีก 2 bytes ก็จะรู้ว่าแฟ้มนี้มีกี่ตัวอักษร เช่น "ก0ข1ค2" จะมีขนาด 14 bytes

ตัวอักษร Greek Letter

utf_bom.html

greek-letters

การใช้ตัวอักษรพิเศษ แบบอักษรกรีก ตัวที่ 12 (Greek Letter) คือ มิว (Mu) ผ่าน HTML code อักษรกรีกตัวที่ 1 คือ แอลฟา (α) สามารถใช้อักษรนี้ได้หลายวิธี เช่น การพิมพ์ตัวอักษร มิว (Mu) แบบ Unicode ขนาด 2 ไบท์ หากสร้างใน Text file แล้วมองด้วยโปรแกรม Debug จะเห็นเลขฐาน 16 เป็น FF - FE - BC - 03 เป็นรหัสฐาน 16 คือ U+03BC หากพิมพ์อักษร มิว (Mu) ใน Webpage ทำโดย μμμ = &#956 หรือ μ หรือ μ คือ Entity code in Html code สำหรับ Unicode Text file ที่มี BOM LE (Byte Order Mark : LE - Little Endian) ที่ต้นแฟ้ม เมื่อใช้ notepad ที่พิมพ์อักษรมิว 2 ตัวอักษร ก็จะมี ขนาด 6 ไบท์ คือ FF - FE - BC - 03 - BC - 03 โดย FF - FE คือ 2 ไบต์แรกของแฟ้มแบบ Unicode ที่มี BOM LE หากบันทึกแบบ Unicode Big Endian ก็จะมี 2 ไบท์แรก คือ FE - FF [UTF-16]
+ /digitallogic/unicode.htm
+ Download : Winhex.exe in Portable
+ SIM : IBM PC/XT emulator running PCDOS 5

แอลฟา	บีตา	แกมมา	เดลตา	เอปไซลอน	ซีตา	อีตา	ทีตา	ไอโอตา	แคปปา	แลมดา	มิว
α	β	γ	δ	ε	ζ	η	θ	ι	κ	λ	μ

ตัวอักษร Greek Letter

Comparison of HTML editors
Editor features : WYSIWYG
https://en.wikipedia.org/wiki/Comparison_of_HTML_editors
พบว่า Openelement น่าสนใจ อ่าน Review ได้
https://fitsmallbusiness.com/openelement-reviews-pricing/
https://www.techadvisor.co.uk/download/design-illustration/openelement-157-3329047/

โปรแกรมที่ใช้แทน Dreamweaver
https://onextrapixel.com/10-best-alternatives-to-adobe-dreamweaver/
โดย Aidan Huang เมื่อ June 18,2013
1. Quanta Plus
2. Aptana
3. CoffeeCup HTML Editor
4. OpenBEXI
5. Bluefish
6. Microsoft Expression Web
7. Amaya
8. Microsoft Visual Web Developer
9. KompoZer
10. BlueGriffon

โปรแกรมที่ใช้แทน Dreamweaver
7 open source alternatives to Dreamweaver
https://opensource.com/alternatives/dreamweaver
1. Aptana Studio
2. BlueGriffon
3. NetBeans
4. SeaMonkey
5. Aloha Editor
6. Choose a legacy editor
6.1 Amaya (11.4.4 / 18 January 2012)
6.2 KompoZer (based on Nvu)
6.3 NVU (discontinued)
7. Try an advanced text editor

The 5 Best Free WYSIWYG Alternatives to Dreamweaver
http://www.hostsearch.com/articles/the-5-best-free-wysiwyg-alternatives-to-dreamweaver.asp
โดย Staff Writer เมื่อ April 18, 2017
1. Microsoft's Expression Web 4.0 
(requires .NET Framework 4.0 and Silverlight 4.0 to install and run)
https://en.wikipedia.org/wiki/Microsoft_Expression_Web
2. KOMPOZER (based on Nvu, released February 2010)
https://en.wikipedia.org/wiki/KompoZer
3. BlueGriffon (based on Nvu / 3.0.1 / November 22, 2017 )
http://www.bluegriffon.org/
4. Aloha Editor (1.4.27 / 12 June 2018)
https://en.wikipedia.org/wiki/Aloha_Editor
5. Amaya Home Page (11.4.4 - 18 January 2012) 
https://www.w3.org/Amaya/
6. Seamonkey (2.49.4 / 27 July 2018)
http://www.seamonkey-project.org/
7. Trellian WebPage 4.2 
https://www.webpagesitebuilder.com/
8. openElement (1.57 R9 / May 16, 2017) 
https://www.openelement.com/
9. Google Web Designer
https://www.google.com/webdesigner/
10. TOWeb (Standard version)
https://www.lauyan.com/en/index.html

ผู้ออกแบบเว็บของกูเกิ้ล
Google Web Designer 
คือ โปรแกรมสำหรับวินโดว์ แม็ค และลีนุกซ์ จากกูเกิ้ล
is a program for Windows, Mac and Linux from Google 
สำหรับสร้างโฆษณาแบบโต้ตอบ และเนื้อหา HTML5 แบบอื่น 
for creating interactive HTML5 ads and other HTML5 content. 
มันเป็นเครื่องมือพื้นฐานแบบจียูไอ
It offers a GUI with common design tools, 
เช่น เครื่องมือสร้างข้อความที่รวมรูปแบบอักษร 
such as a Text tool that integrates with Google Web Fonts, 
รูปร่าง ปากกา และสามมิติด้วยกัน
a Shapes tool, a Pen tool, and 3D tools. 
คุณสมบัติการโฆษณาได้รวมองค์ประกอบ
The advertising feature set includes components 
ที่จะเพิ่มแผนที่กูเกิ้ล ยูทูป และอีกมาก
to add Google Maps, YouTube videos and more, 
เช่นเดียวกับ ความเป็นอัตโนมัติในการรวมเข้ากับ
as well as automatically including 
การบันทึกเหตุการณ์สำหรับดับเบิ้ลคลิ๊กและแอดม็อบ
the tracking code events for DoubleClick and AdMob.
https://en.wikipedia.org/wiki/Google_Web_Designer
https://www.google.com/webdesigner/

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net