Scalable Vector Graphics (SVG) เป็นรูปแบบไฟล์เวกเตอร์ที่เป็นมิตรกับเว็บ ไฟล์เวกเตอร์จะเก็บข้อมูลรูปภาพโดยใช้สูตรคณิตศาสตร์ที่อิงกับจุดและเส้นบนตาราง ซึ่งจะถูกเขียนอยู่ในรูปแบบ XML The HTML <svg> Element HTML Element <svg> จะใช้กับกราฟิก SVG ซึ่ง SVG จะมีหลากหลายวิธีในการวาด เช่น เส้น, กล่อง, วงกลม, ข้อความ และภาพกราฟิก Browser ที่รองรับการใช้งาน Element <svg> 4.0 9.0 3.0 3.2 10.1 SVG วงกลม สามารถเขียนโค้ด HTML ได้ ดังนี้ SVG สี่เหลี่ยม สามารถเขียนโค้ด HTML ได้ ดังนี้ SVG สี่เหลี่ยมมุมโค้ง สามารถเขียนโค้ด […]
วิธีเพิ่ม DNS Microsoft บน Cloudflare สำหรับผู้ที่ใช้ Cloudflare อยู่แล้ว
ในกรณีที่มี Cloudflare อยู่แล้วและต้องการตั้งค่า DNS Record ของบริการ Microsoft 365 ซึ่งทำได้โดยทำตามขั้นตอนต่อไปนี้ ทำการ Login เข้าสู่ Cloudflare โดยพิมพ์ URL: cloudflare.com => Log In ใส่ บัญชีอีเมลที่ได้ลงทะเบียนไว้กับทาง Cloudlare และ Password จากนั้นคลิก Log in คลิกที่ Websites ระบบจะเข้าสู่หน้า home และจะแสดงรายชื่อโดเมนทั้งหมด ให้คลิกที่โดเมนที่ต้องการตั้งค่า ที่เมนูด้านซ้ายให้คลิกที่ DNS ระบบจะมาหน้าที่ DNS records จากนั้นให้ทำการลบค่าอีเมลเดิมของเก่าทิ้งไป จากนั้นคลิกที่ Add Record เพื่อเพิ่มค่า DNS ของ Microsoft 365 ลงไป เพิ่มค่า MX และค่า TXT ของ […]
วิธีเพิ่ม DNS Google Workspace บน Cloudflare สำหรับผู้ที่ใช้ Cloudflare อยู่แล้ว
ในกรณีที่มี Cloudflare อยู่แล้วและต้องการตั้งค่า DNS Record ของบริการ Google Workspace ซึ่งทำได้โดยทำตามขั้นตอนต่อไปนี้ ทำการ Login เข้าสู่ Cloudflare โดยพิมพ์ URL: cloudflare.com => Log In ใส่ บัญชีอีเมลที่ได้ลงทะเบียนไว้กับทาง Cloudlare และ Password จากนั้นคลิก Log in คลิกที่ Websites ระบบจะเข้าสู่หน้า home และจะแสดงรายชื่อโดเมนทั้งหมด ให้คลิกที่โดเมนที่ต้องการตั้งค่า ที่เมนูด้านซ้ายให้คลิกที่ DNS ระบบจะมาหน้าที่ DNS records จากนั้นให้ทำการลบค่าอีเมลเดิมของเก่าทิ้งไป จากนั้นคลิกที่ Add Record เพื่อเพิ่มค่า DNS ของ Google ลงไป เพิ่มค่า MX และค่า TXT ของ […]
HTML Input Types
ในบทนี้จะพูดถึงชนิดของ HTML Input ที่ใน Form ซึ่ง Element <input> นั้นมีมากมายหลากหลายแบบให้เลือกใช้ ชนิดของ HTML Input Element <input> นั้นมีให้เลือกใช้เยอะแยะมากมาย เรามาดูกันว่ามีอะไรบ้าง Tip: ค่าเริ่มต้น type ของ Input คือ “text” Input Type Text <input type=”text”> ใช้เพื่อกำหนดการป้อนข้อความบรรทัดเดียว (Single-line Text Input Field) Input Type Password <input type=”password”> ใช้เพื่อใส่ข้อมูลที่เป็นรหัสผ่าน (Password Field) Input Type Submit <input type=”submit”> เป็นปุ่มเพื่อใช้ยืนยันการส่งข้อมูลของแบบฟอร์ม (Form-handler)Form-handler เป็นหน้าเพจของ Server […]
วิธีการเปิดใช้งาน Two-Factor Authentication
สำหรับโฮสอะตอม เพื่อเป็นการรักษาความปลอดภัยในการเข้าใช้งาน ทางเราแนะนำให้เพิ่มความปลอดภัยโดยให้เพิ่มการยืนยันแบบ 2 ขั้นตอน ซึ่งมีขั้นตอนการทำมีดังนี้ เข้าสู่เว็บไซต์ของโฮสอะตอม โดยให้พิมพ์ URL: hostatom.com จากนั้นคลิกที่ปุ่ม Client Login ใส่ชื่อบัญชีและรหัสผ่าน จากนั้นกดปุ่ม เข้าสู่ระบบ ที่เมนู คลิกที่ “สวัสดี…(ชื่อลูกค้า)…” จากนั้นคลิกที่เมนู Security Settings คลิกที่ปุ่ม Click here to Enable ระบบจะแสดงหน้าต่างขึ้นมา ให้เลือก Time Based Tokens เพื่อเปิดใช้งานการยืนยันแบบ 2 ขั้นตอน ผ่านแอพพลิเคชั่น Google Authenticator (แนะนำให้ใช้) หรือ Duo จากนั้นคลิกที่ปุ่ม Get Started >> ให้ scan QR Code ด้านล่างผ่านทาง […]
การตั้งค่า Filter ใน Roundcube
สำหรับผู้ที่ใช้งานบริการโฮสติ้งกับทางโฮสอะตอม สามารถใช้งานอีเมลที่เป็น Webmail Roundcube ได้ด้วยนะคะ ซึ่งในบทความนี้จะสอนวิธีการตั้งค่าการกรองอีเมลหรือที่เรียกว่า Filter ซึ่งมีขั้นตอนการทำ ดังนี้ หากใครใช้งานบริการโฮสติ้งที่มี Control Panel: DirectAdmin วิธีการ Login เข้าสู่หน้าเว็บเมล โดยให้พิมพ์ชื่อโดเมนแล้วตามด้วย /webmail ยกตัวอย่าง โดเมนที่ใช้คือ sandbox.in.th ดังนั้น URL ที่จะใช้คือ sandbox.in.th/webmail แต่หาก Control Panel: Plesk วิธีการ Login เข้าสู่หน้าเว็บเมล โดยให้พิมพ์คำว่า webmail แล้วตามด้วยชื่อโดเมน ยกตัวอย่าง โดเมนที่ใช้คือ sandbox.in.th ดังนั้น URL ที่จะใช้คือ webmail.sandbox.in.th ซึ่งจากตัวอย่างนี้จะใช้ Control Panel: Plesk นะคะ ที่เมนูด้านซ้ายคลิกที่ Settings > […]
HTML Form Attributes
ในบทนี้ เราจะกล่าวถึงความแตกต่างของ Attribute HTML Element <form> Attribute Action Attribute action จะใช้กำหนดการกระทำซึ่งจะทำเมื่อมีการส่งแบบฟอร์ม โดยปกติแล้วเมื่อมีการกดปุ่มส่งแบบฟอร์ม ข้อมูลของแบบฟอร์มจะมีการส่งไปยัง Server จากตัวอย่างด้านล่างนี้ ข้อมูลในแบบฟอร์มจะถูกส่งไปยังไฟล์ที่ชื่อ “action_page.php” ซึ่งไฟล์นี้จะมีสคริปต์ที่ใช้ในการจัดการข้อมูลของแบบฟอร์มในส่วนของ Server ด้วย Tip: หาก Attribute action ได้ถูกละเว้น action จะถูกตั้งให้เป็นหน้าเพจปัจจุบันแทน Attribute Target Attribute target จะระบุตำแหน่งที่จะแสดงผลหลังจากที่ได้รับการส่งแบบฟอร์มเรียบร้อยแล้ว ซึ่งค่าของ Attribute target มีค่าต่างๆ ดังนี้ ค่า คำอธิบาย _blank แสดงผลในหน้าต่างใหม่หรือ Tab ใหม่ _self แสดงผลในหน้าปัจจุบัน _parent แสดงผลในเฟรมหลัก _top แสดงผลในส่วนเต็มทั้งหมดของหน้าต่าง framename […]
HTML VS XHTML
XHTML เกิดจากการนำ HTML มารวมกับ XML ซึ่งคำสั่งต่างๆ นั้นจะยังเหมือน HTML แต่จะเข้มงวดในเรื่องโครงสร้างมากกว่า XHTML คืออะไร? ทำไมต้อง XHTML XML หรือ Extensible Markup Language เป็นภาษา Markup ที่จะสร้างชุดคำสั่งสำหรับจัดรูปแบบข้อความในรูปแบบที่ทำให้เครื่องและมนุษย์สามารถอ่านได้ XHTML ได้รับการพัฒนาเพื่อให้ HTML สามารถขยายและยืดหยุ่นในการทำงานได้มากขึ้นกับข้อมูลในรูปแบบต่างๆ ได้ (เช่น XML) นอกจากนี้ยังช่วยให้เบราว์เซอร์จะไม่ต้องสนใจใน Error ที่เกิดขึ้นในหน้าเพจ HTML ส่งผลให้เบราว์เซอร์ทำการแสดงหน้าเว็บนั้นๆ ออกมาได้ ถึงแม้จะมีข้อผิดพลาดหรือ Error เกิดขึ้นกับหน้าเพจนั้น ดังนั้น ด้วยโครงสร้างที่เข้มงวด XHTML จึงมีไว้เพื่อจัดการกับข้อผิดพลาดเหล่านี้ ความแตกต่างระหว่าง XHTML กับ HTML ต้องมี <!DOCTYPE> ใน XHTML ต้องมีการประกาศ […]
HTML Encoding (Character Sets)
เพื่อให้หน้าเพจ HTML แสดงผลได้ถูกต้อง จึงต้องบอกให้ Web Browser ให้รู้ว่าหน้าเพจนั้นใช้ชุดอักขระ หรือ Character Set อะไร จาก ASCII จนถึง UTF-8 ASCII เป็นตัวอักขระเข้ารหัสมาตรฐานตัวแรก โดยจะมีตัวอักขระที่แตกต่างกันถึง 128 ตัว ที่สามารถนำมาใช้ได้บนอินเทอร์เน็ต อักขระเหล่านี้ได้แก่ ตัวเลข (0-9), ตัวอักษรภาษาอังกฤษ (A-Z) และตัวขระพิเศษ เช่น !, $, +, -, ( ), @, <, และ > ISO-8859-1 เป็นชุดอักษระเริ่มต้นของ HTML 4 โดยจะมีอักขระที่ใช้งานจำนวน 256 ตัว นอกจากนี้ HTML 4 ยังรองรับการใช้งาน UTF-8 […]
HTML Style Guide
HTML Code สามารถเขียนให้ดูดี เป็นระเบียบได้ เมื่อมีผู้มาดูโค้ดที่เขียนขึ้นนั้นจะได้ดูแล้วเข้าใจในทันที เรามาดูวิธีการเขียนโค้ดที่ดีของ HTML กัน ต้องมีการประกาศประเภทของเอกสารเสมอ การเขียนโค้ดด้วย HTML บรรทัดแรกจะต้องมีการประกาศชนิดของเอกสารก่อนเสมอ โดยการประกาศที่ถูกต้องคือ ตั้งชื่อ Element ด้วยตัวพิมพ์เล็ก ปกติแล้วการเขียนโค้ด HTML Element จะสามารถใช้ตัวอักษรพิมพ์เล็ก หรือใหญ่ผสมกันก็ได้ แต่แนะนำให้ใช้ตัวพิมพ์เล็กดีกว่าเพราะ ตัวอย่างการเขียนโค้ดที่ดี ตัวอย่างการเขียนโค้ดที่ไม่ดี ปิดทุก HTML Element เสมอ อันที่จริงการเขียนโค้ด HTML ไม่จำเป็นจะต้องปิดทุก Element เสมอไป อย่างเช่น Element <p>แต่อย่างไรก็ตามแต่ แนะนำให้ปิดทุก Element จะดีกว่า ตัวอย่างการเขียนโค้ดที่ดี ตัวอย่างการเขียนโค้ดที่ไม่ดี ชื่อ Attribute ใช้ตัวเล็ก ปกติแล้วการเขียนโค้ด HTML Attribute จะสามารถใช้ตัวอักษรพิมพ์เล็ก หรือใหญ่ผสมกันก็ได้ แต่แนะนำให้ใช้ตัวพิมพ์เล็กดีกว่าเพราะ […]