HTML Responsive Web Design

Responsive web design  คือการสร้างหน้าเว็บที่ดูดีแสดงผลได้เหมาะสมกับทุกอุปกรณ์ซึ่งจะมีการปรับขนาดหน้าจอแสดงผลเว็บไซต์(viewport) โดยอัตโนมัติ Responsive Web Design คืออะไร ? Responsive Web Design คือการใช้ htmlและcss เพื่อปรับขนาด,ซ่อน,ย่อ/ขยาย เว็บไซต์อัตโนมัติทำให้เว็บไซต์ดูดีในทุกขนาด (เดสก์ท็อป แท็บเล็ต และโทรศัพท์) การตั้งค่า viewport ในการที่จะทำ responsive website คุณควรจะเพิ่มแท็ก <meta> ในหน้าเว็บของคุณ ตัวอย่าง การตั้งค่า Viewport ตัวอย่างนี้ไม่ได้ทำอะไรเลยนอกจากแสดงวิธีเพิ่ม viewport meta tag การตั้งค่าวิวพอร์ตของหน้าเว็บจะให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับวิธีควบคุมขนาดของหน้าเว็บ นี่คือตัวอย่างของหน้าเว็บที่ไม่มี viewport meta tag กับหน้าเว็บที่ม่ี viewport meta tag ที่ไม่มี viewport meta tag มี viewport […]

HTML – The Head Element

<head> Element element คือ ส่วนที่เป็นเหมือนคอนเทนเนอร์ไว้ใส่ element อื่นๆ เช่น , <meta>, <link>, <script>, <base> จะอยู่ระหว่าง Tag <html> และ <body> meta data เป็นข้อมูลเกี่ยวกับเอกสาร HTML meta data ไม่แสดงผลในเบราว์เซอร์ โดยทั่วไป meta data จะกำหนดชื่อเอกสาร ประเภทตัวอักษร สไตล์ สคริปต์ และข้อมูลเมตาอื่นๆ <title> Element <title> เป็นแท็กใช้ระบุชื่อเรื่องของเอกสาร ชื่อเรื่องจะต้องเป็นข้อความเท่านั้น และจะแสดงในแถบชื่อเรื่องของเบราว์เซอร์หรือในแท็บของหน้า แท็ก <title> นั้นสำคัญมากสำหรับช่วยให้เว็บไซต์ให้ติดเสิร์ช เพราะอัลกอริทึมของเครื่องมือค้นหาใช้ชื่อหน้าเว็บเพื่อตัดสินใจการลำดับเว็บไซต์เมื่อแสดงรายการหน้าในผลการค้นหา ดังนั้นพยายามตั้งชื่อให้ถูกต้องและมีความเหมาะสมกับเรื่องนั้นๆมากที่สุด ตัวอย่าง ชื่อเรื่องที่เป็นหัวของเนื้อหานี้ เนื้อหาขององค์ประกอบเนื้อหาจะแสดงในหน้าต่างเบราว์เซอร์ เนื้อหาขององค์ประกอบชื่อจะแสดงในแท็บเบราว์เซอร์ในรายการโปรดและในผลลัพธ์ของเครื่องมือค้นหา <style> Element […]

SEO-Friendly Hosting 5 สิ่งที่ควรมองหาในบริษัทโฮสติ้ง

บริการเว็บโฮสติ้งที่คุณเลือกเป็นส่วนหนึ่งที่จะเป็นตัวกำหนดประสบการณ์เว็บไซต์ที่คุณให้แก่ผู้เข้าชมซึ่งถือเป็นเรื่องสำคัญอย่างมาก ที่คุณจะต้องเลือกบริษัทที่ให้การบริการที่ดี บทความนี้เราจะมาแนะนำคุณสมบัติหลัก 5 ประการที่บ่งบอกว่าบริษัทโฮสติ้งไหนที่เป็นมิตรต่อ SEO 1. การันตี Uptime ลองตรวจสอบกับผู้ให้บริการโฮสต์ติ้งที่คุณเลือกใช้งานว่ามีการรับประกันความพร้อมใช้งาน (Uptime) อยู่หรือไม่ เนื่องจากสิ่งนี้เป็นหนึ่งในปัจจัยที่สำคัญที่สุดในการทำ SEO (SEO-Friendly) Uptime หมายถึง การที่เว็บไซต์ของคุณออนไลน์และสามารถเข้าชมได้ ผู้ให้บริการโฮสต์ติ้งมักจะมีการรับประกันการ uptime ถึง 99.9% ซึ่งหมายความว่าเว็บไซต์มีโอกาสหยุดทำงานได้ ประมาณ 1.44 นาทีต่อวันหรือ 8.8 ชั่วโมงต่อปี หากโฮสต์ติ้งที่มีการรับประกันแบบนี้ถือว่าค่อนข้างดี แต่สิ่งที่สำคัญที่สุดคือ ต้องทำให้ช่วงเวลาที่ server หยุดทำงาน (downtime) นั้นสั้นที่สุด วิธีนี้จะส่งผลต่อประสิทธิภาพ SEO น้อยมาก เนื่องจากเว็บไซต์ยังออนไลน์ตลอดเวลา อย่างไรก็ตาม คุณควรระวังโฮสติ้งที่มักอ้างว่ามีการรับประกัน uptime 100% เพราะเป็นการโฆษณาที่เกินจริง โฮสติ้งนั้นอาจจะเกิดการหยุดทำงานอยู่บ่อยครั้งเลยด้วยซ้ำ สิ่งสำคัญคือต้องเช็คว่าโฮสติ้งเจ้าไหนทำให้ช่วงเวลา downtime สั้นที่สุด วิธีนี้จะไม่ส่งผลต่อประสิทธิภาพ SEO […]

HTML JavaScript

JavaScript ทำให้หน้าเพจ HTML มีไดนามิกและการตอบสนองกับผู้ใช้งานได้มากขึ้น ตัวอย่าง My First JavaScript Click me to display Date and Time. แท็ก HTML <script> องค์ประกอบ<script>ประกอบด้วยคำสั่งสคริปต์ หรือชี้ไปยังไฟล์สคริปต์ภายนอกผ่านsrcแอตทริบิวต์ การใช้งานทั่วไปสำหรับ JavaScript คือการจัดการรูปภาพ การตรวจสอบแบบฟอร์ม และการเปลี่ยนแปลงแบบไดนามิกของเนื้อหา การเลือกองค์ประกอบ HTML ส่วนใหญ่ JavaScript ใช้ document.getElementById() ตัวอย่าง JavaScript นี้เขียนว่า “Hello JavaScript!” เป็นองค์ประกอบ HTML ที่มี id=”demo”: ตัวอย่าง Use JavaScript to Change Text This example writes “Hello JavaScript!” […]

13 ปลั๊กอิน WordPress SEO ที่ดีที่สุด

หลายๆคนที่สร้างเว็บไซต์จาก wordpress คงจะรู้จักกับการทำ SEO มาบ้างแล้ว ว่ามันส่งผลดีต่อหน้าเว็บเราอย่างไร ซึ่งประโยชน์ของ SEO นั้นช่วยองค์กรได้อย่างมาก อาทิเช่น การทำให้หน้าเว็บของเรามีผู้ชมที่เพิ่มขึ้นอย่างมาก สร้างโอกาสในการขายเพิ่มขึ้น สร้างยอดขายได้มากขึ้น และเพิ่มผลกำไรของคุณ วันนี้เราจะมาแนะนำ 13 ปลั๊กอิน WordPress SEO ที่จะทำให้เหล่านักท่องเว็บสามารถเดินทางเข้ามาเว็บไซต์คุณได้ง่ายขึ้นอย่างมาก 1. Yoast SEO Yoast SEO เป็นที่นิยมอย่างมาก เห็นได้จากรีวิวนับพันนับหมื่น เป็นปลั๊กอินระดับพรีเมียมที่นำเสนอฟีเจอร์ที่เป็นประโยชน์ในการใช้งานและเข้าใจได้ง่าย ฟีเจอร์การใช้งาน  ฟังก์ชั่นของปลั๊กอิน Yoast ในส่วนของเครื่องมือวิเคราะห์หน้าและเนื้อหาที่ Yoast มีนั้นเป็นประโยชน์อย่างมากเพราะช่วยให้เห็นถึงภาพรวมว่าเพจของคุณตอนนี้เป็นอย่างไรด้วยความสามารถในการอ่านความยาวของเนื้อหา ชื่อเรื่องของเนื้อหานั้นๆ (title tags) การกระจายคีย์เวิร์ด (keywords) การเพิ่มข้อความอธิบายในรูปภาพ (alt attributes) และคำอธิบายถึงเนื้อหาของเว็บไซต์ (meta description) สิ่งเหล่านี้เป็นสิ่งที่ฟังก์ชั่นการใช้งานของปลั๊กอินตัวนี้ที่จะช่วยเราในการวิเคราะห์เพื่อให้แน่ใจว่ามาถูกทาง 2. All in One […]

HTML id Attribute

แอตทริบิวต์ id ใช้เพื่อระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML คุณไม่สามารถมีมากกว่าหนึ่งองค์ประกอบที่มีรหัสเดียวกันในเอกสาร HTML การใช้แอตทริบิวต์ id แอตทริบิวต์ id ระบุรหัสเฉพาะสำหรับองค์ประกอบ HTML ค่าของ id แอตทริบิวต์ต้องไม่ซ้ำกันในเอกสาร HTML แอตทริบิวต์ id ใช้เพื่อชี้ไปที่การประกาศสไตล์เฉพาะในสไตล์ชีต นอกจากนี้ยังใช้โดย JavaScript เพื่อเข้าถึงและจัดการองค์ประกอบด้วยรหัสเฉพาะ ไวยากรณ์สำหรับรหัสคือ: เขียนแฮช (#) ตามด้วยชื่อรหัส จากนั้นกำหนดคุณสมบัติ CSS ภายในวงเล็บปีกกา {} ในตัวอย่างต่อไปนี้ เรามี องค์ประกอบที่ชี้ไปที่ชื่อรหัส “myHeader” องค์ประกอบ นี้ จะจัดสไตล์ตาม#myHeader คำจำกัดความของสไตล์ในส่วนหัว: ตัวอย่าง หมายเหตุ: id name นั้นคำนึงถึงตัวพิมพ์เล็กและใหญ่! ชื่อรหัสต้องมีอักขระอย่างน้อยหนึ่งตัว ไม่สามารถขึ้นต้นด้วยตัวเลข และต้องไม่มีช่องว่าง (เว้นวรรค แท็บ ฯลฯ) ความแตกต่างระหว่าง Class […]

HTML Block and Inline Elements

ทุก HTML element มีค่าการแสดงผลเริ่มต้นขึ้นอยู่กับประเภทของ element นั้น มีค่าการแสดงผล 2 รูปแบบคือแบบบล็อกและแบบอินไลน์ Block-level Elements (องค์ประกอบแสดงผลแบบบล็อก) block-level elements จะขึ้นบรรทัดใหม่เสมอและเบราว์เซอร์จะเพิ่มช่องว่าง (ระยะขอบ) ก่อนและหลังองค์ประกอบโดยอัตโนมัติโดยจะใช้ความกว้างทั้งหมดที่มีอยู่เสมอ (ยืดออกไปทางซ้ายและขวาเท่าที่จะทำได้) block-level elementsที่ใช้กันทั่วไป 2 รายการคือ: <p> และ<div> element <p> กำหนดย่อหน้าในเอกสาร HTML element <div> กำหนดส่วนหรือส่วนในเอกสาร HTML ตัวอย่าง block-level elements ใน HTML: Inline Elements (องค์ประกอบแสดงผลแบบอินไลน์) องค์ประกอบแสดงผลแบบอินไลน์ไม่เริ่มขึ้นบรรทัดใหม่และใช้ความกว้างเท่าที่จำเป็นเท่านั้น ตัวอย่าง องค์ประกอบแบบอินไลน์ใน HTML: หมายเหตุ:ภายใน inline element ไม่สามารถมี block-level element ได้! <div> […]

HTML Ordered Lists

รายการแบบเรียงลำดับ (Ordered Lists) ใช้แท็ก <ol> ในการกำหนดรายการแบบเรียงลำดับซึ่งรายการเรียงลำดับนั้นอาจเป็นตัวเลขหรือตัวอักษรก็ได้ เริ่มต้นด้วยแท็ก <ol>แต่ละรายการเริ่มต้นด้วยแท็ก<li> รายการจะถูกทำเครื่องหมายด้วยตัวเลขตามค่าเริ่มต้น: ตัวอย่าง แอตทริบิวต์ประเภทของรายการแบบเรียงลำดับ แอตทริบิวต์typeของ<ol>แท็กกำหนดประเภทของเครื่องหมายรายการ: Type คำอธิบาย type=”1″ เรียงลำดับด้วยเลข (ค่าเริ่มต้น) type=”A” เรียงลำดับด้วยตัวอักษรภาษาอังกฤษตัวใหญ่ type=”a” เรียงลำดับด้วยตัวอักษรภาษาอังกฤษตัวเล็ก type=”I” เรียงลำดับด้วยตัวอักษรโรมันตัวใหญ่ type=”i” เรียงลำดับด้วยตัวอักษรโรมันตัวเล็ก ตัวอย่าง หมายเลข ตัวอักษรพิมพ์ใหญ่ ตัวอักษรพิมพ์เล็ก ตัวเลขโรมันตัวพิมพ์ใหญ่ ตัวเลขโรมันตัวพิมพ์เล็ก ควบคุมการนับรายการ ตามค่าเริ่มต้น รายการสั่งซื้อจะเริ่มนับจาก 1 หากคุณต้องการเริ่มนับจากหมายเลขที่ระบุ คุณสามารถใช้ start แอตทริบิวต์ ตัวอย่าง รายการ HTML ที่ซ้อนกัน รายการสามารถซ้อนกันได้ (รายการภายในรายการ): ตัวอย่าง

HTML Unordered Lists

แท็ก HTML <ul> กำหนดรายการที่ไม่มีลำดับ (สัญลักษณ์แสดงหัวข้อย่อย) รายการแบบไม่เรียงลำดับ (Unordered Lists) รายการที่ไม่เรียงลำดับเริ่มต้นด้วย<ul>แท็ก แต่ละรายการเริ่มต้นด้วย <li>แท็ก รายการจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อย (วงกลมสีดำเล็กๆ) ตามค่าเริ่มต้น: ตัวอย่าง การเลือกใช้ตัวทำเครื่องหมายรายการ คุณสมบัติ CSS list-style-typeใช้เพื่อกำหนดรูปแบบของสัญลักษณ์รายการ สามารถมีค่าใดค่าหนึ่งต่อไปนี้: ค่า คำอธิบาย disc สัญลักษณ์เป็นวงกลมสีดำ ( ค่าเริ่มต้น ) circle สัญลักษณ์เป็นวงกลม square สัญลักษณ์เป็นสี่เหลี่ยม none ไม่มีสัญลักษณ์ ตัวอย่างค่า disc ตัวอย่างค่า circle ตัวอย่างค่า square ตัวอย่างค่า none รายการ HTML ที่ซ้อนกัน รายการสามารถซ้อนกันได้ (รายการภายในรายการ): ตัวอย่าง หมายเหตุ:รายการ ( <li>) สามารถมีรายการใหม่และองค์ประกอบ HTML อื่นๆ เช่น รูปภาพและลิงก์ เป็นต้น […]