<body>Hello World <script> var hello =[72,69,76,76,79]; console.log(hello); // (5) [72, 69, 76, 76, 79] console.log(hello[1]); // 69 console.log(String.fromCharCode(hello[1])); // E console.log("HELLO"); </script>
# การกำหนด CSS Style ให้กับ Table - Chrome Browser คือ เครื่องมือตรวจสอบ Code ของนักพัฒนาเว็บ - กด Ctrl+Shift+I หรือ F12 ใน Chrome เข้า Developer Tools - คลิ๊ก Elements เลือกดูรายละเอียดในส่วนต่าง ๆ ของ code ได้ - แต่ละส่วนมี Style ที่ใช้กำหนด สี ขนาด รูปแบบ และทดสอบแก้ไขได้ - ผลการเปลี่ยนแปลง ไม่ทำให้ code ต้นฉบับเปลี่ยนแปลง หากเปลี่ยนถาวรต้องแก้ source code - [อ่านเพิ่ม chrome-devtools](https://developers.google.com/web/tools/chrome-devtools) # คุณสมบัติต่าง ๆ ที่น่าสนใจ - ความแตกต่างของ style 3 แบบ เช่น th, #main, .mytable - การใช้แบบ Inline ขยายการเรียกใช้ class="mytable" - External CSS styles คือ เรียก CSS จากภายนอก - Internal CSS Styles คือ เรียก CSS จากภายใน ที่ประกาศไว้ต้นแฟ้ม - Inline CSS Styles คือ กำหนดเข้าไปใน Tag
# Responsive web design - เทคนิคการเขียนเว็บเพจให้แสดงบนอุปกรณ์ได้หลากหลาย - การแสดงผลบนอุปกรณ์แต่ละขนาด แสดงผลต่างกัน - แท็ก div นิยมใช้ในการแบ่งส่วนต่าง ๆ ของเว็บเพจ - รายละเอียดในแต่ละ class ที่ใช้ในแต่ละ div ต่างกันไปตามอุปกรณ์ - meta viewport เป็นการประกาศว่าเว็บเพจนี้จะทำงานแบบ Responsive - @media ใช้กำหนดรายละเอียดในแต่ละอุปกรณ์ - [ตรวจสอบขนาดอุปกรณ์ของเรา](http://whatismyscreenresolution.net/) # การเลือกขนาดของอุปกรณ์ใน Chrome - กด Ctrl+Shift+I เข้า Developer Tools แล้วกด Ctrl+Shift+M เข้า Toggle device toolbar - Responsive : 400 * 712 - Moto G4/Galaxy S5 : 360 * 640 - Pixel 2 : 411 * 731 - Pixel 2 XL : 411 * 823 - iPhone 5/SE : 320 * 568 - iPhone 6/7/8 : 375 * 667 - iPhone 6/7/8 Plus : 414 * 736 - iPhone X : 375 * 812 - iPad : 768 * 1024 - iPad Pro : 1024 * 1366
<!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 ไม่ถูก
# เรื่อง google font 1. แฟ้ม mitr.htm อยู่ใน local จะไม่เรียก font ไม่ได้ เพราะไปอ้างอิง Resource จากข้างนอก จะฟ้อง has been blocked by CORS policy 2. แฟ้ม mitr.htm นี้ สามารถเรียก kanit ในเครื่องของผมได้ เพราะติดตั้ง font ไว้ในระบบปฏิบัติการ แต่เปลี่ยนเครื่องจะไม่แสดง font เพราะไม่ได้ติดตั้งในเครื่องอื่น 3. เรียก kanit ใน thaiabc.wordpress.com แล้วเปิดที่เครื่องของผมได้ เพราะติดตั้ง font ไว้ แต่เปิดเครื่องอื่นจะไม่พบ 4. แฟ้ม mitr.htm วางใน thaiall.com แล้วเรียก font ในห้อง /google/fonts พบว่าใช้งานได้ปกติ 5. คำว่า CORS ย่อมาจาก Cross-Origin Resource Sharing เป็นประเด็นที่ป้องกันการเรียกใช้ทรัพยากรข้ามเครื่อง - ทดสอบที่ http://www.thaiall.com/google/fonts/mitr.htm - เปิด https://fonts.google.com/specimen/Mitr แล้ว download .zip แล้ว unzip แล้ว คลิ๊ก install fonts ได้ - เปิด https://fonts.google.com/specimen/Kanit แล้ว download .zip แล้ว unzip แล้ว คลิ๊ก install fonts ได้