.HTML - นามสกุลไฟล์
.html เป็นไฟล์ภาษามาร์กอัปไฮเปอร์เท็กซ์
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ส่วนขยายไฟล์ | .html |
| ประเภทไฟล์ | ภาษามาร์กอัปไฮเปอร์เท็กซ์ |
| นามแฝงที่ใช้กันทั่วไป | .htm |
| ใช้โดย | เว็บเบราว์เซอร์ |
| วัตถุประสงค์ | เพื่อสร้างหน้าเว็บ |
| การลบ | ไม่ถูกลบโดยอัตโนมัติ |
.html เป็นไฟล์ภาษามาร์กอัปไฮเปอร์เท็กซ์
| คุณสมบัติ | คำอธิบาย |
|---|---|
| ส่วนขยายไฟล์ | .html |
| ประเภทไฟล์ | ภาษามาร์กอัปไฮเปอร์เท็กซ์ |
| นามแฝงที่ใช้กันทั่วไป | .htm |
| ใช้โดย | เว็บเบราว์เซอร์ |
| วัตถุประสงค์ | เพื่อสร้างหน้าเว็บ |
| การลบ | ไม่ถูกลบโดยอัตโนมัติ |
มีอะไรอยู่ในหน้านี้
ไฟล์ html (Hypertext Markup Language) เป็นเอกสารข้อความธรรมดาที่มีแท็กมาร์กอัปที่ใช้ในการจัดโครงสร้างและรูปแบบเนื้อหาสำหรับการแสดงบนอินเทอร์เน็ต มันเป็นภาษามาตรฐานสำหรับการสร้างหน้าเว็บและเป็นสิ่งจำเป็นสำหรับการสร้างส่วนประกอบภาพและโครงสร้างของเว็บไซต์
ไฟล์ .html ใช้เพื่อกำหนดองค์ประกอบและโครงสร้างของหน้าเว็บเช่นหัวเรื่อง, ย่อหน้า, รายการ, รูปภาพ, ลิงก์, รูปแบบและอื่น ๆ องค์ประกอบเหล่านี้จะถูกล้อมรอบในแท็ก html ซึ่งเป็นคำแนะนำพิเศษที่ตีความโดยเว็บเบราว์เซอร์เพื่อแสดงเนื้อหาอย่างเหมาะสม
นี่คือตัวอย่างง่ายๆของไฟล์ html:
<!DOCTYPE html > < html > < head > < title > My First Web Page </ title > </ head > < body > < h1 > Welcome to My Website </ h1 > < p > This is a paragraph of text. </ p > < img src = "image.jpg" alt = "An example image" > < a href = "https://www.example.com" > Visit Example Website </ a > </ body > </ html >ในตัวอย่างนี้:
<!DOCTYPE html> ประกาศประเภทเอกสารและเวอร์ชันของ html ที่ใช้<html> เป็นองค์ประกอบรูทที่มีองค์ประกอบอื่น ๆ ทั้งหมด<head> มีข้อมูลเมตาเกี่ยวกับเอกสารเช่นชื่อที่แสดงในแท็บเบราว์เซอร์<body> มีเนื้อหาที่มองเห็นได้ของหน้าเว็บ<h1> และ <p> กำลังมุ่งหน้าและองค์ประกอบย่อหน้าตามลำดับ<img> แสดงภาพบนหน้า<a> สร้างไฮเปอร์ลิงก์ไปยังหน้าเว็บอื่นเว็บเบราว์เซอร์ตีความรหัส html และแสดงเนื้อหาตามนั้น html มักจะใช้ร่วมกับ CSS (Cascading Style Sheets) สำหรับการจัดแต่งทรงผมและเลย์เอาต์รวมถึง JavaScript สำหรับการเพิ่มการโต้ตอบในหน้าเว็บ เมื่อผู้ใช้เข้าถึงเว็บไซต์เบราว์เซอร์ของพวกเขาจะดึงและตีความไฟล์ html เพื่อแสดงหน้าตามที่ผู้สร้างเว็บไซต์ตั้งใจไว้
ส่วนขยายของไฟล์ html เป็น .html หรือ .HTM ส่วนขยายทั้งสองนั้นถูกต้องและจะได้รับการยอมรับจากเว็บเบราว์เซอร์ อย่างไรก็ตาม .html เป็นส่วนขยายที่ต้องการ
ส่วนขยาย. htm ถูกนำมาใช้โดยทั่วไปในวันแรก ๆ ของเว็บ แต่ .html ได้กลายเป็นมาตรฐานในช่วงไม่กี่ปีที่ผ่านมา ไม่มีความแตกต่างทางเทคนิคระหว่างทั้งสองส่วนขยายดังนั้นคุณสามารถใช้แบบใดที่คุณต้องการ
หากคุณกำลังสร้างไฟล์ html ใหม่ฉันขอแนะนำให้ใช้ส่วนขยาย .html สิ่งนี้จะทำให้ชัดเจนสำหรับนักพัฒนาและเว็บอื่น ๆ ว่าไฟล์เป็นไฟล์ html
ไฟล์ html สามารถเปิดได้ด้วยเว็บเบราว์เซอร์ใด ๆ เว็บเบราว์เซอร์ทั่วไปบางส่วน ได้แก่ :
เมื่อคุณเปิดไฟล์ html ในเว็บเบราว์เซอร์เบราว์เซอร์จะอ่านคำแนะนำในไฟล์และแสดงหน้าตามนั้น เบราว์เซอร์จะตีความสื่อที่ฝังตัวเช่นรูปภาพวิดีโอและไฟล์เสียง
นอกเหนือจากเว็บเบราว์เซอร์แล้วยังมีตัวแก้ไขข้อความบางตัวที่สามารถเปิดไฟล์ html ได้ บรรณาธิการเหล่านี้อนุญาตให้คุณดูและแก้ไขรหัส html ในไฟล์ บรรณาธิการข้อความยอดนิยมสำหรับ html รวมถึง:
หากคุณเพิ่งเริ่มต้นด้วย HTML ฉันขอแนะนำให้ใช้ตัวแก้ไขข้อความเพื่อเปิดและแก้ไขไฟล์ html ของคุณ สิ่งนี้จะช่วยให้คุณเข้าใจวิธีการทำงานของรหัส เมื่อคุณคุ้นเคยกับ HTML มากขึ้นคุณสามารถเริ่มใช้เว็บเบราว์เซอร์เพื่อดูหน้าของคุณ
นี่คือเคล็ดลับเพิ่มเติมสำหรับการเปิดและทำงานกับไฟล์ html:
ไฟล์ html มีสี่ประเภทหลัก:
นี่คือตารางที่สรุปไฟล์ html ประเภทต่าง ๆ :
| พิมพ์ | คำอธิบาย | สนับสนุนโดยเบราว์เซอร์ |
|---|---|---|
| HTML มาตรฐาน | ใช้มาตรฐาน html ล่าสุดและได้รับการสนับสนุนจากเว็บเบราว์เซอร์ที่ทันสมัยทั้งหมด | ใช่ |
| HTML แบบคงที่ | ไม่มีเนื้อหาแบบไดนามิกใด ๆ เพียงแค่รวบรวมองค์ประกอบ html ที่แสดงบนหน้าตามที่เขียนไว้ | ใช่ |
| HTML แบบไดนามิก | ใช้ภาษาสคริปต์เช่น JavaScript เพื่อเพิ่มเนื้อหาแบบไดนามิกลงในหน้า ซึ่งอาจรวมถึงสิ่งต่าง ๆ เช่นเมนูแบบโต้ตอบกราฟิกภาพเคลื่อนไหวและหน้าต่างป๊อปอัพ | ใช่ |
| Extensible html (XHTML) | html เวอร์ชันที่เข้มงวดซึ่งสอดคล้องกับมาตรฐาน W3C มากขึ้น โดยทั่วไปจะใช้สำหรับเว็บแอปพลิเคชันและเว็บไซต์ประสิทธิภาพสูงอื่น ๆ | ใช่ |
ในการสร้างไฟล์ html คุณสามารถใช้ตัวแก้ไขข้อความใด ๆ เช่น Notepad, TextEdit หรือ Sublime Text นี่คือขั้นตอนในการสร้างไฟล์ html สำหรับผู้เริ่มต้น:
<!DOCTYPE html > < html > < head > < title > My First html Page </ title > </ head > < body > < h1 > This is my first html page! </ h1 > </ body > </ html >index.htmlรหัสด้านบนเป็นไฟล์ html ที่ง่ายมาก มันมีองค์ประกอบต่อไปนี้:
<!DOCTYPE html> การประกาศซึ่งบอกเบราว์เซอร์ว่าไฟล์เป็นเอกสาร html<html> ซึ่งทำเครื่องหมายจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร html<head> ซึ่งมีข้อมูลเกี่ยวกับเอกสารเช่นชื่อ<title> ซึ่งระบุชื่อของเอกสาร<body> ซึ่งมีเนื้อหาหลักของเอกสาร<h1> ซึ่งสร้างหัวเรื่องคุณสามารถเพิ่มองค์ประกอบเพิ่มเติมลงในไฟล์ html ของคุณเพื่อสร้างหน้าเว็บที่ซับซ้อนมากขึ้น ตัวอย่างเช่นคุณสามารถเพิ่มรูปภาพลิงก์และแบบฟอร์ม มีแหล่งข้อมูลมากมายออนไลน์เพื่อช่วยให้คุณเรียนรู้เพิ่มเติมเกี่ยวกับ HTML
นี่คือเคล็ดลับเพิ่มเติมสำหรับการสร้างไฟล์ html:
ในการแก้ไขไฟล์ html (ภาษามาร์กอัปไฮเปอร์เท็กซ์) คุณสามารถใช้ตัวแก้ไขข้อความธรรมดาหรือตัวแก้ไขรหัสพิเศษ นี่คือวิธีที่คุณทำได้:
การใช้ตัวแก้ไขข้อความธรรมดา: ตัวแก้ไขข้อความธรรมดาเช่น Notepad (Windows), TextEdit (MacOS) หรือแอปพลิเคชันอื่น ๆ ที่คล้ายกันสามารถใช้ในการแก้ไขไฟล์ html นี่คือกระบวนการพื้นฐาน:
การใช้โปรแกรมแก้ไขรหัสเฉพาะ: ตัวแก้ไขรหัสเฉพาะได้รับการออกแบบมาสำหรับงานการเขียนโปรแกรมและการพัฒนาเว็บ พวกเขามีคุณสมบัติเช่นการไฮไลต์ไวยากรณ์การกรอกรหัสและอื่น ๆ ตัวอย่าง ได้แก่ Visual Studio Code, Sublime Text, Atom และ Brackets นี่คือวิธีที่คุณสามารถใช้หนึ่งในบรรณาธิการเหล่านี้:
ในการตรวจสอบไฟล์ html (ภาษามาร์กอัปไฮเปอร์เท็กซ์) คุณสามารถใช้เครื่องมือตรวจสอบความถูกต้องของ html ออนไลน์หรือแอปพลิเคชันเดสก์ท็อปที่ออกแบบมาเพื่อจุดประสงค์นี้โดยเฉพาะ การตรวจสอบความถูกต้องทำให้มั่นใจได้ว่ารหัส html ของคุณเป็นไปตามไวยากรณ์ที่ถูกต้องและปฏิบัติตามมาตรฐานที่กำหนดโดย World Wide Web Consortium (W3C) นี่คือวิธีที่คุณสามารถตรวจสอบไฟล์ html:
การใช้เครื่องมือตรวจสอบความถูกต้องของ html ออนไลน์:
มีเครื่องมือออนไลน์หลายอย่างที่อนุญาตให้คุณตรวจสอบรหัส html ของคุณ เครื่องมือยอดนิยมอย่างหนึ่งคือบริการตรวจสอบมาร์กอัป W3C นี่คือวิธีการใช้งาน:
การใช้ Editors Desktop html:
บรรณาธิการเดสก์ท็อป html บางตัวเช่น Adobe Dreamweaver หรือ Visual Studio Code นำเสนอเครื่องมือตรวจสอบความถูกต้องในตัว นี่คือวิธีการใช้ใน Visual Studio Code เป็นตัวอย่าง:
การใช้เครื่องมือนักพัฒนาเบราว์เซอร์:
เว็บเบราว์เซอร์ที่ทันสมัยยังมีเครื่องมือนักพัฒนาในตัวที่สามารถช่วยคุณระบุและแก้ไขปัญหาการตรวจสอบความถูกต้องของ html นี่คือวิธีการทำโดยใช้ Google Chrome:
Ctrl + Shift + I (Windows/Linux) หรือ Cmd + Option + I (MacOS)เป็นสิ่งสำคัญที่จะต้องทราบว่าในขณะที่เครื่องมือตรวจสอบความถูกต้องสามารถช่วยจับข้อผิดพลาดทางไวยากรณ์และปัญหาทั่วไปบางอย่างพวกเขาอาจไม่ได้รับข้อผิดพลาดทุกประเภทที่อาจส่งผลกระทบต่อการทำงานหรือการออกแบบหน้าเว็บของคุณ ดังนั้นจึงขอแนะนำให้ทดสอบหน้าเว็บของคุณด้วยตนเองในเบราว์เซอร์ที่แตกต่างกันเพื่อให้แน่ใจว่ามันทำงานตามที่ตั้งใจไว้
มีหลายวิธีในการเพิ่มประสิทธิภาพไฟล์ html สำหรับเครื่องมือค้นหา นี่คือสิ่งที่สำคัญที่สุดที่ควรคำนึงถึง:
โดยทำตามเคล็ดลับเหล่านี้คุณสามารถเพิ่มประสิทธิภาพไฟล์ html ของคุณสำหรับเครื่องมือค้นหาและปรับปรุงโอกาสในการจัดอันดับที่สูงขึ้นในผลการค้นหา
นี่คือเคล็ดลับเพิ่มเติมสำหรับการเพิ่มประสิทธิภาพไฟล์ html ของคุณสำหรับเครื่องมือค้นหา:
มีบางสิ่งที่คุณสามารถทำได้เพื่อรักษาความปลอดภัยไฟล์ html:
โดยทำตามเคล็ดลับเหล่านี้คุณสามารถช่วยรักษาความปลอดภัยไฟล์ html ของคุณและปกป้องเว็บไซต์ของคุณจากแฮ็กเกอร์
นี่คือเคล็ดลับเพิ่มเติมสำหรับการรักษาความปลอดภัยไฟล์ html ของคุณ:
ไฟล์ HTML มีส่วนขยาย .html เนื่องจากนี่คือส่วนขยายไฟล์มาตรฐานสำหรับไฟล์ภาษามาร์กอัปไฮเปอร์เท็กซ์ ส่วนขยายของ .html บอกเว็บเบราว์เซอร์ว่าไฟล์มีรหัส html ซึ่งสามารถใช้ในการสร้างเว็บเพจ
ใช่คุณสามารถเปลี่ยนส่วนขยายของไฟล์ html อย่างไรก็ตามหากคุณเปลี่ยนส่วนขยายเป็นสิ่งอื่นที่ไม่ใช่ .html หรือ. HTM เว็บเบราว์เซอร์จะไม่สามารถจดจำไฟล์เป็นไฟล์ html และจะไม่สามารถแสดงได้อย่างถูกต้อง
หากคุณเปิดไฟล์ html ในตัวแก้ไขข้อความคุณจะเห็นรหัส html ที่ทำขึ้นไฟล์ รหัสนี้สามารถใช้เพื่อสร้างหน้าเว็บที่ไฟล์แสดง
มีบางสิ่งที่คุณสามารถทำได้เพื่อให้ไฟล์ html ของคุณอ่านได้มากขึ้น:
นี่คือแนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนโค้ด html:
นี่คือข้อผิดพลาดที่พบบ่อยที่สุดในรหัส html:
มีแหล่งข้อมูลมากมายที่จะช่วยให้คุณเรียนรู้เพิ่มเติมเกี่ยวกับ HTML นี่คือคำแนะนำบางประการ: