HTML Links

คุณสามารถพบลิงก์ได้ในเกือบทุกหน้าเว็บ ลิงก์อนุญาตให้ผู้ใช้คลิกจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง html links คือ hyperlink คุณสามารถคลิกที่ลิงก์เพื่อไปสู่หน้าเว็บเพจอื่นๆได้ เมื่อคุณเลื่อนเมาส์ไปบนลิงก์ ลูกศรของเมาส์จะเปลี่ยนเป็นรูปมือเล็กๆ หมายเหตุ:ลิงก์ไม่จำเป็นต้องเป็นข้อความ ลิงค์สามารถเป็นรูปภาพหรือองค์ประกอบ HTML อื่น ๆ ! ไวยากรณ์ของ html link แท็ก HTML <a> กำหนดการเชื่อมโยงหลายมิติ มีไวยากรณ์ดังต่อไปนี้: แอตทริบิวต์ที่สำคัญที่สุดของ <a> ข้อความลิงค์เป็นส่วนที่ผู้อ่านจะมองเห็นได้ การคลิกที่ข้อความลิงก์จะส่งผู้อ่านไปยังที่อยู่ URL ที่ระบุ ตัวอย่าง ตัวอย่างนี้แสดงวิธีสร้างลิงก์ไปยัง hostatom.com : ในตัวอย่างจะเป็นลิงก์แบบนี้ เยี่ยมชมเว็บไซต์ของเรา hostatom.com ตามค่าเริ่มต้น หน้าที่เชื่อมโยงจะแสดงในหน้าต่างเบราว์เซอร์ปัจจุบัน หากต้องการเปลี่ยนแปลง คุณต้องระบุเป้าหมายอื่นสำหรับการลิงก์ แอตทริบิวต์ target ระบุตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง แอตทริบิวต์ target สามารถมีค่าใดค่าหนึ่งต่อไปนี้: _self ค่าเริ่มต้น ลิงก์เปิดเอกสารในหน้าต่าง/แท็บเดียวกับที่มีการคลิก _blank ลิงก์เปิดเอกสารในหน้าต่างใหม่หรือแท็บ _parent ลิงก์เปิดเอกสารในกรอบหลัก _top ลิงก์เปิดเอกสารแบบเต็มตัวของหน้าต่าง ตัวอย่าง […]

HTML Colors

HTML Color ถูกระบุด้วยชื่อสีที่กำหนดไว้ล่วงหน้า หรือด้วยค่า RGB, HEX, HSL, RGBA หรือ HSLA ชื่อสี ใน HTML สีสามารถระบุได้โดยใช้ชื่อสี ตัวอย่าง ซึ่ง HTML รองรับชื่อสีมาตรฐาน 140 ชื่อ สีพื้นหลัง คุณสามารถตั้งค่าสีพื้นหลังสำหรับ HTML element ได้ดังนี้ ตัวอย่าง สีข้อความ คุณสามารถกำหนดสีของข้อความได้ดังนี้ ตัวอย่างสี ตัวอย่างสี 2 ตัวอย่างสี 3 สีขอบ คุณสามารถกำหนดสีของเส้นขอบได้แบบนี้ ตัวอย่าง ค่าสี ใน HTML ยังสามารถระบุสีโดยใช้ค่า RGB ค่า HEX ค่า HSL ค่า RGBA และค่า HSLA ตัวอย่าง […]

HTML Quotation

html quotation คือ การใช้ html element ในการอ้างอิงข้อมูล HTML <blockquote> ใช้สำหรับการอ้างอิงแบบกล่องข้อความ html element <blockquote> ใช้สำหรับการอ้างอิงแบบกล่องข้อความ โดยเบราว์เซอร์จะขึ้นบรรทัดใหม่แล้วย่อหน้าให้สำหรับการอ้างอิง ตัวอย่าง HTML <q> ใช้สำหรับการอ้างอิงแบบสั้น tag <q> ใช้สำหรับการอ้างอิงแบบสั้น ใช้กับข้อความสั้นๆ หรือ โควท ( การอ้างอิงจากคำพูดคนอื่น ) จะมีสัญลักษณ์ (“) ในข้อความที่อ้างอิง ตัวอย่าง HTML <abbr> ใช้สำหรับการย่อคำ HTML tag <abbr> กำหนดตัวย่อ เช่น “HTML”, “CSS”, “Mr”, “Dr”, “ASAP”, “ATM การทำเครื่องหมายตัวย่อสามารถให้ข้อมูลที่เป็นประโยชน์แก่เบราว์เซอร์ ระบบการแปล และเครื่องมือค้นหา ตัวอย่าง HTML […]

HTML Styles

HTML style attributes  ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ เช่น สี รูปแบบฟ้อนต์ ขนาด และอื่นๆ ตัวอย่าง HTML Style Attribute การตั้งค่าสไตล์ของ HTML element สามารถทำได้ด้วย style attribute โดย style attribute มีโครงสร้้างดังนี้ คุณสมบัตินี้เป็นคุณสมบัติของค่า CSS โดยคุณจะได้เรียนหลังจากเรียน HTML จบแล้ว สีพื้นหลัง คุณสมบัติ CSS background-color กำหนดสีพื้นหลังสำหรับ HTML element ตัวอย่าง ตั้งค่าสีพื้นหลังสำหรับหน้าเป็น powderblue ตั้งค่าสีพื้นหลังสำหรับ 2 element ที่แตกต่างกัน สีข้อความ คุณสมบัติ CSS color กำหนดสีข้อความสำหรับ HTML element รูปแบบฟ้อนต์ คุณสมบัติ CSS font-family […]

HTML Headings

HTML headings คือ ชื่อหรือคำบรรยายที่คุณต้องการแสดงบนหน้าเว็บ โดยจะมีขนาดใหญ่ไล่ไปเล็กตามความสำคัญของหัวข้อนั้นๆ ตัวอย่าง HTML Headings จะกำหนดได้โดย tag <h1> ถึง <h6> <h1> กำหนดแทนหัวข้อใหญ่สุด <h6> กำหนดหัวข้อเล็กสุด หมายเหตุ:เบราว์เซอร์จะเพิ่มระยะขอบ ก่อนและหลังส่วนหัวโดยอัตโนมัติ ความสำคัญของ Heading Heading มีความสำคัญอย่างมากเพราะ search engines จะใช้ส่วน heading ในการจัดเก็บ index ( ดัชนี ) ซึ่งส่งผลต่อการเข้าถึงและมองเห็นเว็บไซต์ของคุณ ผู้ใช้มักจะเข้าชมเว็บไซต์ตามหัวเรื่อง สิ่งสำคัญคือต้องใช้ heading เพื่อแสดงเนื้อหาภายในหน้านั้นๆ <h1>ควรใช้หัวเรื่องสำหรับหัวเรื่องหลัก ตามด้วย<h2>หัวเรื่อง รองลงมามีความสำคัญน้อยกว่า <h3>และอื่นๆ หมายเหตุ:ใช้ HTML Heading สำหรับส่วนหัวเรื่องเท่านั้น อย่าใช้ Heading เพื่อทำให้ข้อความใหญ่หรือหนา Heading ที่ใหญ่กว่า โดยปกติ Heading […]

HTML บทนำ

HTML คืออะไร ? HTML (Hyper Text Markup Language) คือภาษาที่ใช้ในการสร้างหน้าเว็บเพจหรือเว็บไซต์และอธิบายโครงสร้างของเว็บเพจ โดยประกอบไปด้วย elements ต่างๆ ซึ่ง html นี้เป็นเรื่องพื้นฐานที่คนที่มีความสนใจเกี่ยวกับการเขียนเว็บควรรู้ ในเนื้อหานี้จะสอนตั้งแต่เริ่มต้นทำความเข้าใจจนสามารถใช้แท็กต่างๆ จนคุณสามารถใช้แท็กแสดงผลหน้าเว็บเพจตามความต้องการได้ ตัวอย่าง HTML อธิบายตัวอย่าง HTML Element คืออะไร ? HTML element คือ ส่วนประกอบต่าง ๆ ใน HTML โดยมักจะถูกกำหนดโดย tag เริ่มต้น เนื้อหา และ tag ปิดท้าย อาทิเช่น <tagname> เนื้อหาอยู่ที่นี่… </tagname> HTML element คือทุกอย่างตั้งแต่ tag เริ่มต้นจนถึง tag ปิดท้าย ตัวอย่าง <h1>My First Heading</h1> […]

HTML Elements

HTML Elements HTML Elements ถูกกำหนดโดยแท็กเริ่มต้น เนื้อหาบางส่วน และแท็กปิดท้าย : <tagname>เนื้อหา</tagname> จากตัวอย่าง HTML Element คือ ทุกอย่างตั้งแต่เปิด Tag ไปจนถึงปิด Tag ตัวอย่างบางส่วนของ HTML Element : <h1>My First Heading</h1> <p>My first paragraph.</p> tag เปิด เนื้อหา element tag ปิด <h1> My First Heading </h1> <p> My first paragraph. </p> <br> ไม่มี ไม่มี หมายเหตุ:HTML Element บางตัวไม่มีเนื้อหา ( […]

Core Web Vitals คืออะไร

Core Web Vitals คือ Core Web Vitals คือ มาตรฐานในการเช็คประสิทธิภาพเกี่ยวกับประสบการณ์ของผู้ใช้กับหน้าเว็บไซต์ หรือเรียกอีกอย่าง ว่าการให้คะแนน UX (User Experience) สำหรับเว็บไซต์ เพราะนอกจากเนื้อหาเว็บไซต์ที่มีคุณภาพแล้ว Google ต้องการให้ผู้ใช้งานนั้น ได้รับประสบการณ์ที่ดีด้วย ไม่ว่าจะเป็นเรื่องของ ความเร็วในการโหลดเนื้อหาในเว็บ, การตอบสนองของเว็บไซต์ และความเสถียรของดีไซน์ในเว็บไซต์ เป็นเรื่องที่ทุกคนให้ความสำคัญเป็นอย่างมากเพราะนี่ถือเป็นเรื่องที่จะช่วยคุณในการเช็คคุณภาพของเว็บไซต์ได้แล้ว ยังส่งผลต่อ SEO ของเว็บไซต์อีกด้วย ดังนั้นเราจึงนำวิธีการเช็คที่เข้าใจง่ายมาบอกทุกคนด้วย การเช็ค Core Web Vitals เราจะทำการเช็ค Core Web Vitals ว่าวัดผลอย่างไร เริ่มง่ายๆ โดยควรรู้ถึง การใช้งาน Google PageSpeed Insights ซึ่งเป็นหน้าทีี่จะทำให้เราเห็นค่าต่างๆ ในการวัดผลของเว็บไซต์ หัวข้อที่เราเช็คนี้จะมี 3 ปัจจัยหลักในการวัดผล ได้แก่  Largest Contentful Paint (LCP) First Input Delay […]