thaiall logomy background
เอชทีเอ็มแอล รุ่นห้า : HTML5
my town
Source code | HTML | JavaScript | Web 2.0 | Responsive Web Design | CanvasJS.com | Bootstrap | Github.io |
ภาษาเฮชทีเอ็มแอล าษาเฮชทีเอ็มแอล คือ ภาษาคอมพิวเตอร์ที่ออกแบบมา เพื่อใช้ในการสร้างเว็บเพจที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี ในปัจจุบัน HTML ล่าสุด คือ รุ่น 5 เป็นมาตรฐานหนึ่งของ ISO ซึ่งจัดการโดย World Wide Web Consortium (W3C)
มีอะไรใหม่ใน HTML5 Tag หรือ Element ที่น่าสนใจที่สุดของ HTML5 มีดังนี้ [wiki]
- New semantic elements เช่น <header>, <footer>, <article>, และ <section>.
- New attributes of form elements เช่น number, date, time, calendar, และ range.
- New graphic elements: <svg> and <canvas>.
- New multimedia elements: <audio> and <video>.
การใช้ Developer Tools บน Chrome Browser

Document Type แต่ละรุ่น มีผลต่อ tag ต่างกันไป
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
การใช้ Developer Tools ด้วยการกด F12, Ctrl+Shift+I หรือ เข้า Customize ของ Chrome, More Tools, Developer Tools ใน Tab elements ใช้เครื่องมือ Select an element แล้วใช้ Mouse click ส่วนใดของ content ก็จะแสดง HTML code ในหน้าต่าง Element แล้วจะพบรายละเอียด Style ที่มาจากแฟ้ม CSS หรือที่กำหนดใน HTML code ทำให้ทราบว่าการแสดงผลนั้นมาจาก แฟ้มใด ด้วยคำสั่งใด และสามารถแก้ไขเพื่อทดสอบให้เห็นการเปลี่ยนแปลงได้ทันที ตัวอย่างของช้างเชือกนี้ก็แสดงผลไม่ถูกต้อง ต้องใช้เครื่องมือช่วยวิเคราะห์โค้ด เพราะเมื่อแยกโค้ดไปทดสอบแบบไม่มี Doctype พบว่าถูกต้อง แต่ที่ html.htm ไม่ถูก
elephant.htm แบบที่ไม่เรียบร้อย
doctype.php บริการเลือกแบบเอกสาร แสดงค่าที่แตกต่าง
Canvas : Circle
ประกาศ tag canvas ก่อน แล้วค่อยเขียน javascript
ระบบเกี่ยวกับแกน x, y
- ระบบ Cartesian coordinate system กำหนดจุด x, y จากการลากเส้นแกนทั้งสองตัดกันเป็นมุมฉาก
- ระบบ Canvas coordinate system กำหนดจุด x, y คือ มุมบนซ้าย
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x : x-coordinate คือ ตำแหน่งกลางของวงกลม
y : y-coordinate คือ ตำแหน่งกลางของวงกลม
r : รัศมีของวงกลม
sAngle : มุมเริ่มต้น ที่ตำแหน่ง 3 นาฬิกา
eAngle : มุมสิ้นสุดตามเส้นรอบวง
counterclockwise : กำหนดการวาดเส้นแบบตามเข็ม ค่า false เป็นค่าปริยาย ปกติจะทวนเข็ม
Canvas : Line
<!DOCTYPE html><html><body>
<canvas 
id="myCanvas" 
width="400" 
height="100" 
style="border:1px solid #d3d3d3;background-color:yellow;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.setLineDash([15, 5]);
ctx.strokeStyle = 'blue';
ctx.lineWidth = '10';
ctx.moveTo(10,10);
ctx.lineTo(200,90);
ctx.stroke();
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.strokeStyle = 'rgb(0, 255, 0)';
ctx.lineWidth = '20';
ctx.moveTo(200,90);
ctx.lineTo(390,10);
ctx.stroke();
</script>
</body></html>
Canvas : Line + Arrow

rubik_arrow.htm

rubik_yellow_rotate.htm
rubik_arrow_all.htm
Canvas : 3D = 3 Faces

/rubik/

rubik_3faces.htm

rubik_4faces.htm
Canvas : Tree
<!DOCTYPE html><html><body>
<canvas 
id="myCanvas" 
width="400" 
height="300" 
style="border:1px solid #d3d3d3;background-color:yellow;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(200,30,30,0,2*Math.PI); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.arc(100,230,30,0,2*Math.PI); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.arc(300,230,30,0,2*Math.PI); 
ctx.stroke(); 

ctx.font = "30px Arial";
ctx.fillText("1",190,40);
ctx.fillText("2",90,240);
ctx.fillText("3",290,240);

ctx.beginPath();
ctx.lineWidth = '5';
ctx.moveTo(200,60);
ctx.lineTo(300,200);
ctx.stroke();

ctx.beginPath();
ctx.lineWidth = '5';
ctx.moveTo(200,60);
ctx.lineTo(100,200);
ctx.stroke();
</script>
</body></html>
Canvas : Gate (And, Or)
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d"); 
gate_and(400,400,90,"A","B","C");
gate_and(100,300,90,"A1","A2","A3");
gate_and_link (400,400,100,300,90,1);
gate_and(100,500,90,"B1","B2","B3");
gate_and_link (400,400,100,500,90,5);
//
function gate_and_link (xright1,xtop1,xright2,xtop2,h,xline) {
ctx.beginPath();
ctx.lineWidth = '3';
ctx.moveTo(h * 1.5 + xright2 + 50,h/2  + xtop2);
ctx.lineTo(xright1 - 50,h/6 * xline + xtop1);
ctx.stroke();
}
//
function gate_and(xright,xtop,h,i1,i2,o1) {
ctx.beginPath(); 
ctx.lineWidth = '3';
ctx.arc(h + xright,h/2 + xtop,h/2,1.5*(22/7),0.5*(22/7)); 
ctx.stroke(); 
//
ctx.beginPath();
ctx.lineWidth = '3';
ctx.moveTo(h + xright,0 + xtop);
ctx.lineTo(0 + xright,0 + xtop);
ctx.lineTo(0 + xright,h + xtop);
ctx.lineTo(h + xright,h + xtop);
ctx.stroke();
//
ctx.beginPath();
ctx.lineWidth = '3';
ctx.moveTo(xright,h/6 * 1 + xtop);
ctx.lineTo(xright - 50,h/6 * 1 + xtop);
ctx.moveTo(xright,h/6 * 5 + xtop);
ctx.lineTo(xright - 50,h/6 * 5  + xtop);
ctx.moveTo(h * 1.5 + xright,h/2 + xtop);
ctx.lineTo(h * 1.5 + xright + 50,h/2  + xtop);
ctx.stroke();
//
ctx.font = "24px Arial";
ctx.fillText(i1,xright - 40,xtop + h/6 * 1 - 2);
ctx.fillText(i2,xright - 40,xtop + h/6 * 5 - 2);
ctx.fillText(o1,xright + h * 1.5 + 20,xtop + h/2 - 2);
}
SVG กับ Canvas ต่างกันอย่างไร
SVG คือ ภาษาสำหรับออกแบบกราฟฟิก 2 มิติ ในรูปคำสั่ง XML ซึ่งทุก element เป็น Object ต่างกันไป
Canvas คือ ภาษาสำหรับออกแบบกราฟฟิก 2 มิติ ที่ทำงานร่วมกับ Javascript ซึ่งทุก element ถูกเขียนแบบ Pixels ภายใต้ Canvas graphic
+ อ่านเพิ่มที่ ตัวอย่าง และคำอธิบาย

svg_star.htm
<!DOCTYPE html><html><body>
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"  x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
</body></html>
Chart ของ Canvasjs.com

Chart ของ Canvasjs.com
แหล่งข้อมูล
+ Blog เล่าเรื่อง Google Chart
+ google_ajax_api_bar.htm
+ Canvasjs.com
+ Webometrics_jan2018.php
+ ฐานข้อมูลปราชญ์ท้องถิ่น
ปัจจุบันมีหลายวิธีในการนำเสนอ Chart ที่สวยงาม บนเว็บเพจ วิธีหนึ่ง คือ AJAX API ที่บริการ Chart ของ Google.com อีกวิธี คือ Javascript ของ Canvasjs.com ทั้งสองวิธีที่ประกอบด้วย 3 ส่วนที่คล้ายกัน คือ 1) เรียกใช้ Javascript script จากภายนอก 2) กำหนดค่าข้อมูลในเว็บเพจ เพื่อส่งให้ script ภายนอก 3) กำหนด Div สำหรับแสดง chart
เขียนตาราง 7 แบบ

ชวน น.ศ.เขียน table บน github.io
การเขียนตาราง
ตัวอย่างที่ 1 การเขียนตารางโดย HTML แบบเดิม
ตัวอย่างที่ 2 การเขียนตารางโดยใช้ CSS แบบ inline
ตัวอย่างที่ 3 การเขียนตารางโดยใช้ CSS แบบประกาศ Class
ตัวอย่างที่ 4 การเขียนตารางโดย div แบบ inline #1
ตัวอย่างที่ 5 การเขียนตารางโดย div แบบ inline #2
ตัวอย่างที่ 6 การเขียนตารางโดย div แบบ inline #3
ตัวอย่างที่ 7 การเขียนตารางโดยใช้ class จาก bootstap
ปล. ถ้าไม่ใช้ colspan กับ rowspan ก็จะยาก ๆ หน่อย
ทบทวนการใช้งาน 13 Font thai จาก สำนักงานสาธารณสุขจังหวัดพังงา ขั้นตอนการใช้งาน มีดังนี้
1. ดาวน์โหลดแฟ้มก่อนเลย
คลายแฟ้มแล้วมี 55 แฟ้ม ขนาด 6.06 MB
แฟ้มที่บีบอัดขนาด 2.85 MB (2,995,622 bytes)
ได้โฟรเดอร์ชื่อ 13ThaiFonts
2. การติดตั้ง install ทำโดย
เลือกแฟ้มที่มีนามสกุลเป็น *.ttf บน windows explorer
แล้วกด right click เรียก menu จะพบตัวเลือก install
กดเลยครับ ก็จะทำการติดตั้ง font เข้า c:\windows\fonts อัตโนมัติ
3. หลังติดตั้งก็จะใช้งานในโปรแกรมต่าง ๆ ได้
เช่น word, excel หรือ powerpoint
4. หากใช้งานใน webpage
ก็ต้องคัดลอกแฟ้ม *.ttf ไปวางไว้ใน server
ที่เก็บแฟ้มต่าง ๆ เพื่อจะได้เรียกใช้งาน
เช่น เก็บเข้าห้อง http://www.thaiall.com/html5 หรือ /web2
5. รายชื่อแฟ้มทั้ง 13 แฟ้ม

09/23/2006 01:27 AM 90,072 TH Baijam.ttf
09/22/2006 11:30 PM 73,120 TH Chakra Petch.ttf
09/26/2006 01:58 AM 254,676 TH Charm of AU.ttf
09/23/2006 01:34 AM 246,252 TH Charmonman.ttf
09/22/2006 11:30 PM 143,604 TH Fahkwang.ttf
09/22/2006 11:30 PM 86,348 TH K2D July8.ttf
09/22/2006 11:30 PM 100,544 TH Kodchasal.ttf
09/25/2006 05:31 AM 97,496 TH KoHo.ttf
09/23/2006 12:59 AM 169,516 TH Krub.ttf
09/25/2006 11:52 PM 178,952 TH Mali Grade6.ttf
09/22/2006 11:30 PM 93,904 TH Niramit AS.ttf
09/25/2006 11:55 PM 148,724 TH Srisakdi.ttf
09/25/2006 10:45 PM 98,764 THSarabun.ttf


6. เรียกใช้ฟอนต์ด้วยการเชื่อมแฟ้ม กับชื่อฟอนต์ ผ่าน STYLE Tag

@font-face{font-family:'THBaijam'; src: url('TH Baijam.ttf');}
@font-face{font-family:'THChakraPetch'; src: url('TH Chakra Petch.ttf');}
@font-face{font-family:'THCharmofAU'; src: url('TH Charm of AU.ttf');}
@font-face{font-family:'THCharmonman'; src: url('TH Charmonman.ttf');}
@font-face{font-family:'THFahkwang'; src: url('TH Fahkwang.ttf');}
@font-face{font-family:'THK2DJuly8'; src: url('TH K2D July8.ttf');}
@font-face{font-family:'THKodchasal'; src: url('TH Kodchasal.ttf');}
@font-face{font-family:'THKoHo'; src: url('TH KoHo.ttf');}
@font-face{font-family:'THKrub'; src: url('TH Krub.ttf');}
@font-face{font-family:'THMaliGrade6'; src: url('TH Mali Grade6.ttf');}
@font-face{font-family:'THNiramitAS'; src: url('TH Niramit AS.ttf');}
@font-face{font-family:'THSrisakdi'; src: url('TH Srisakdi.ttf');}
@font-face{font-family:'THSarabun'; src: url('THSarabun.ttf');}


7. เวลาเรียกใช้ใน font-family ก็อ้างอิงชื่อที่ตั้งขึ้นได้เลย
เช่น font-family:'THSarabun';font-size:20px;
8. แสดงผลการเรียกใช้แต่ละฟอนต์เป็นตัวอย่างไว้ที่ html5 หรือ /web2
อ้างอิงจาก
+ thaiabc.com/download/13thaifonts.zip
+ thaiall.com/blog/burin/2427/
+ oer.learn.in.th/search_detail/result/22273
+ nectec.or.th/pub/review-software/font/..
+ wikipedia.org/wiki/National_fonts
ตัวอย่าง 13 ฟอนต์ราชการ
13 ฟอนต์ราชการออกแบบโดย
1. TH Bai Jamjuree CP (ใบจามจุรี)ทีม PITA (คุณรพี สุวีรานนท์, คุณวิโรจน์ จิรพัฒนกุล)
2. TH Chakra Petch (จักรเพชร)คุณธีรวัฒน์ พจน์วิบูลศิริ
3. TH Charm of AU (ชาร์ม ออฟ เอยู)คุณกัลยาณมิตร นรรัตน์พุทธิ
4. TH Charmonman (จามรมาน)คุณเอกลักษณ์ เพียรพนาเวช
5. TH Fah Kwang (ฟ้ากว้าง)ทีม สิบเอ็ด (คุณกิตติ ศิริรัตนบุญชัย, คุณนิวัฒน์ ภัทโรวาสน์)
6. TH K2D July8 (8 กรกฏา)คุณกานต์ รอดสวัสดิ์
7. TH Kodchasan (คชสาร)คุณกัลย์สุดา เปี่ยมประจักพงษ์
8. TH KoHo (กลุ่ม ก-ฮ)กลุ่ม ก-ฮ (คุณขาม จาตุรงคกุล, คุณกนกวรรณ แพนไธสง, คุณขนิษฐา สิทธิแย้ม)
9. TH Krub (ครับ)คุณเอกลักษณ์ เพียรพนาเวช
10. TH Mali Grade 6 (ด.ญ. มะลิ ป.6)คุณสุดารัตน์ เลิศสีทอง
11. TH Niramit AS (นิรมิตร)ทีม อักษราเมธี (คุณไพโรจน์ เปี่ยมประจักพงษ์,คุณบวร จรดล)
12. TH Srisakdi (ศรีศักดิ์)ทีม อักษราเมธี (คุณไพโรจน์ เปี่ยมประจักพงษ์,คุณบวร จรดล)
13. TH Sarabun PSK (สารบรรณ)คุณศุภกิจ เฉลิมลาภ
13 ฟอนต์ราชการ 30px24px20px16px
1. TH Bai Jamjuree CP (ใบจามจุรี)
2. TH Chakra Petch (จักรเพชร)
3. TH Charm of AU (ชาร์ม ออฟ เอยู)
4. TH Charmonman (จามรมาน)
5. TH Fah Kwang (ฟ้ากว้าง)
6. TH K2D July8 (8 กรกฏา)
7. TH Kodchasan (คชสาร)
8. TH KoHo (กลุ่ม ก-ฮ)
9. TH Krub (ครับ)
10. TH Mali Grade 6 (ด.ญ. มะลิ ป.6)
11. TH Niramit AS (นิรมิตร)
12. TH Srisakdi (ศรีศักดิ์)
13. TH Sarabun PSK (สารบรรณ)

อ้างอิงจาก
+ https://www.f0nt.com/release/13-free-fonts-from-sipa/
+ https://en.wikipedia.org/wiki/National_fonts
เปรียบเทียบ 13 ฟอนต์ราชการ แบบไม่เว้นบรรทัด 16px, 20px, 30px
เขียนใช้ div สร้างตาราง css_div_table.htm
<html><head><style>
#content-body-wrapper { display:table; border-collapse:collapse;width:720px;border:1px solid blue; }
#content-body { display:table-row; }
#primary-nav, #secondary-nav, #content { display:table-cell; }
#primary-nav, #secondary-nav { width:10%; }
#content { width:60%; }
#body-wrapper { display:table; border-collapse:collapse;width:720px;border:1px solid blue; }
#body-row { display:table-row; }
#cs, #cs20, #cs40 { display:table-cell; }
#cs20 { padding-left: 20px; }
#cs40 { padding-left: 40px; }
</style>
</head><body>
<div id="content-body-wrapper">
<div id="content-body">
<div id="primary-nav"> a </div>
<div id="secondary-nav"> b </div>
<div id="content"> c </div>
</div>
</div>     
<div id="body-wrapper" class="m_still">
<div id="body-row">
<div id="cs"><img src="http://www.thaiall.com/ipic/iphoto.gif" /></a></div>
<div id="cs20">20</div>
</div>
<div id="body-row">
<div id="cs"><img src="http://www.thaiall.com/ipic/iphoto.gif" /></a></div>
<div id="cs40">40</div>
</div>
<div id="body-row">
<div id="cs"><img src="http://www.thaiall.com/ipic/iphoto.gif" /></a></div>
<div id="cs20">20</div>
</div>
</div>
</body>
Town 728px*90px Thaiall.com/sponsor Facebook.com/thaiall เว็บไซต์เพื่อการศึกษา สนับสนุนเว็บไซต์ โปรดติดต่อผู้ดูแล 081-9927223

https://jenkov.com/tutorials/svg/fill-patterns.html
Audio เล่น MP3
2565-08-03
ร้องเพลง สาวมอเตอร์ไซค์ ได้แฟ้ม motocycle_girl.wma บน win 8.1 ถ้าบน win 10 จะได้ .m4a ผ่านโปรแกรม voice recorder เมื่อส่งปรับเสียง เร่งความเร็ว 2 เท่า ผ่านเว็บไซต์ mp3cut.net/change-speed จะได้ motocycle_girl_speed2.mp3 ซึ่งบริการของ mp3cut สามารถสั่งปรับ trim, speed, equailzer และ volume ได้
rspsocial
Thaiall.com