พื้นฐานของ HTML คืออะไร?

เผยแพร่แล้ว: 2023-09-25

HTML (Hypertext Markup Language) เป็นส่วนสำคัญของการออกแบบเว็บไซต์ในออเรนจ์เคาน์ตี้ เป็นภาษามาร์กอัปที่ใช้ในการสร้างโครงสร้างและเนื้อหาของหน้าเว็บและเป็นรากฐานของเว็บไซต์ทั้งหมด นักออกแบบเว็บไซต์ทุกคนอาจเคยพบกับ HTML ในอาชีพของพวกเขา!

HTML เป็นภาษามาตรฐานที่ใช้ในการสร้างหน้าเว็บแบบคงที่ ซึ่งเป็นหน้าเว็บที่ไม่เปลี่ยนแปลงหากไม่มีการแก้ไขโค้ด HTML ด้วยตนเอง ซึ่งหมายความว่าผู้ใช้ไม่สามารถส่งผลกระทบต่อมันได้

พื้นฐานของภาษาการเขียนโค้ด-HTML-in-web-design-orange-county-pinterest

พื้นฐานของ HTML

HTML คือชุดขององค์ประกอบหรือแท็ก และแต่ละองค์ประกอบแสดงถึงองค์ประกอบของหน้าเว็บที่เฉพาะเจาะจง ฟังดูง่ายใช่มั้ย? นั่นเป็นเพราะมันเป็น! เอกสาร HTML เหล่านี้สร้างขึ้นโดยใช้โปรแกรมแก้ไขข้อความและบันทึกด้วยนามสกุล .html เอกสาร HTML พื้นฐานควรมีองค์ประกอบต่อไปนี้เพื่อให้ทำงานได้อย่างถูกต้อง:

ประกาศ <!DOCTYPE>

การประกาศ <!DOCTYPE> ทำหน้าที่เป็นส่วนเริ่มต้นสำหรับเอกสาร HTML ของคุณ โดยแจ้งเบราว์เซอร์เกี่ยวกับเวอร์ชันเฉพาะของ HTML ที่คุณใช้อยู่ ให้คิดว่ามันเป็นการแนะนำที่เป็นมิตรที่บอกว่า “เฮ้ เบราว์เซอร์ เราจะเต้นไปตามจังหวะ HTML5!” HTML5 เป็นดาวเด่นในปัจจุบันในโลกการพัฒนาเว็บ และนำคุณลักษณะที่น่าตื่นเต้นและการปรับปรุงมาสู่ตาราง ดังนั้น เมื่อคุณรวมการประกาศนี้ คุณกำลังบอกเบราว์เซอร์ให้เตรียมพร้อมสำหรับประสบการณ์ HTML ที่ทันสมัยและเต็มไปด้วยฟีเจอร์ เป็นวิธีของคุณในการรับรองว่าเนื้อหาเว็บของคุณจะถูกนำเสนออย่างถูกต้อง และใช้ประโยชน์จากความสามารถเจ๋งๆ ของ HTML5 ทั้งหมด

<!DOCTYPE html>

องค์ประกอบ <HTML>

คิดว่าองค์ประกอบ <html> เป็นหัวหน้าใหญ่ในเอกสาร HTML ของคุณ มันคือหัวหน้า หัวหน้า สุนัขชั้นยอด และคนที่รักษาทุกอย่างให้เป็นระเบียบ เช่นเดียวกับเจ้านายที่จัดการบริษัท องค์ประกอบ <html> จะจัดการหน้าเว็บทั้งหมดของคุณ เป็นจุดเริ่มต้นและคอนเทนเนอร์สำหรับองค์ประกอบอื่นๆ ทั้งหมดที่คุณจะใช้ในการสร้างเนื้อหาเว็บของคุณ

ภายในองค์ประกอบ <html> นี้ คุณจะพบพิมพ์เขียวสำหรับหน้าเว็บของคุณ รวมถึงองค์ประกอบ <head> และ <body> องค์ประกอบ <head> เก็บข้อมูลสำคัญเกี่ยวกับเอกสารของคุณ เช่น ชื่อ เมตาแท็ก และลิงก์ไปยังแหล่งข้อมูลภายนอก ในขณะเดียวกัน องค์ประกอบ <body> ประกอบด้วยเนื้อหาที่มองเห็นได้ทั้งหมดที่ผู้ใช้เห็นเมื่อเข้าชมเว็บไซต์ของคุณ

โดยสรุป องค์ประกอบ <html> คือภาพรวม ผู้บัญชาการทหารสูงสุด และเครื่องมือจัดระเบียบเอกสาร HTML ของคุณขั้นสูงสุด ช่วยให้มั่นใจได้ว่าทุกอย่างทำงานได้อย่างราบรื่นและหน้าเว็บของคุณมีโครงสร้างและนำเสนอต่อผู้ชมของคุณอย่างถูกต้อง

องค์ประกอบ <Head>

องค์ประกอบ <head> เปรียบเสมือนสมองของเอกสารของคุณ ซึ่งเก็บข้อมูลสำคัญ เช่น ชื่อ เมตาแท็ก และลิงก์ไปยังสิ่งแฟนซี เช่น สไตล์ชีตและสคริปต์ ดังนั้น แม้ว่าองค์ประกอบ <head> อาจไม่ปรากฏบนหน้าเว็บของคุณ แต่องค์ประกอบนี้มีบทบาทสำคัญในการทำให้เว็บไซต์ของคุณดูดี ทำงานได้ดี และสื่อสารอย่างมีประสิทธิภาพกับทั้งผู้ใช้และเครื่องมือค้นหา เหมือนกับศูนย์บัญชาการที่ช่วยให้หน้าเว็บของคุณทำงานได้ดีที่สุด

องค์ประกอบ <Title>

องค์ประกอบ <title> ระบุชื่อเรื่องของเอกสารซึ่งปรากฏในแถบชื่อเรื่องของเบราว์เซอร์ มันไม่ได้เป็นเพียงข้อกำหนดทางเทคนิค แต่ยังเป็นเครื่องมือที่ทรงพลังสำหรับการสื่อสารอีกด้วย การสร้างชื่อที่ชัดเจน กระชับ และเกี่ยวข้องถือเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าหน้าเว็บของคุณเป็นที่รู้จัก เข้าถึงได้ง่าย และดึงดูดทั้งผู้ใช้และเครื่องมือค้นหา

องค์ประกอบ <ร่างกาย>

องค์ประกอบ <body> ประกอบด้วยเนื้อหาหน้าเว็บทั้งหมด เช่น ข้อความ รูปภาพ วิดีโอ และองค์ประกอบอื่นๆ มันเหมือนกับเวทีหลักของโรงละคร—เป็นที่ที่ทุกการกระทำเกิดขึ้นในเอกสาร HTML ของคุณ เป็นหนึ่งในองค์ประกอบพื้นฐานของหน้าเว็บใดๆ และบทบาทของหน้าเว็บนั้นค่อนข้างตรงไปตรงมาแต่มีความสำคัญ: ประกอบด้วยเนื้อหาทั้งหมดที่ผู้ใช้เห็นเมื่อเยี่ยมชมเว็บไซต์

องค์ประกอบ HTML

องค์ประกอบ HTML อยู่ในแท็กเปิดและปิด ล้อมรอบด้วยวงเล็บมุม แท็กเปิดเริ่มต้นด้วยชื่อขององค์ประกอบ ตามด้วยแอตทริบิวต์ใดๆ ในรูปแบบของคู่ชื่อ-ค่า แท็กปิดจะเหมือนกันทุกประการกับแท็กเปิด แต่มีเครื่องหมายทับ (/) หน้าชื่อองค์ประกอบเป็นคำพูดปิด

ตัวอย่างเช่น รหัสต่อไปนี้จะสร้างหน้า HTML แบบธรรมดา:

<!DOCTYPE html>

<html>

<หัว>

<title>หน้าแรก HTML ของฉัน</title>

</หัว>

<ร่างกาย>

<h1>ยินดีต้อนรับสู่เว็บไซต์ของฉัน</h1>

<p>นี่คือหน้า HTML หน้าแรกของฉัน</p>

</ร่างกาย>

</html>

ในที่นี้ องค์ประกอบ <html> คือองค์ประกอบราก และมีองค์ประกอบ <head> และ <body> องค์ประกอบ <head> ประกอบด้วยองค์ประกอบ <title> ซึ่งระบุชื่อเรื่องของเอกสาร องค์ประกอบ <body> ประกอบด้วยเนื้อหาของหน้า ซึ่งรวมถึงส่วนหัวและย่อหน้า ในเอกสาร HTML ทั่วไป คุณควรเริ่มต้นด้วยองค์ประกอบที่ใหญ่ที่สุดก่อน (ในกรณีนี้คือ HTML) จากนั้นไปที่บิตที่เล็กกว่าในขณะที่คุณสร้างเพจ (เช่น หัว ชื่อเรื่อง เนื้อหา ฯลฯ)

แอตทริบิวต์ HTML

แอตทริบิวต์ HTML ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบและรวมอยู่ในแท็กเปิด พวกมันทำหน้าที่เป็นตัวอธิบาย คุณลักษณะที่พบบ่อยที่สุดมีดังต่อไปนี้:

แอตทริบิวต์ ID

แอตทริบิวต์ id ระบุองค์ประกอบและใน JavaScript และ CSS เพื่อจัดการองค์ประกอบ

คุณสมบัติคลาส

แอ็ตทริบิวต์คลาสจะจัดกลุ่มอิลิเมนต์เข้าด้วยกัน ทำให้สามารถจัดสไตล์ด้วย CSS

คุณลักษณะสไตล์

แอตทริบิวต์ style เป็นคุณลักษณะ HTML ที่ดีที่ช่วยให้คุณสามารถใช้สไตล์กับแต่ละองค์ประกอบได้โดยตรงในโค้ด HTML มันเหมือนกับการปรับโฉมองค์ประกอบเฉพาะนั้น โดยระบุสิ่งต่างๆ เช่น สี แบบอักษร และการเว้นวรรค โดยไม่ต้องสร้างสไตล์ชีตแยกต่างหาก สิ่งนี้มีประโยชน์เมื่อคุณต้องการเปลี่ยนแปลงรูปลักษณ์ขององค์ประกอบอย่างรวดเร็วเพียงครั้งเดียว โดยไม่ส่งผลกระทบต่อสไตล์ที่เหลือของเว็บไซต์ของคุณ ดังนั้นจึงเป็นเครื่องมือที่คุณนำไปใช้ในการเพิ่มความเป็นเอกลักษณ์ให้กับองค์ประกอบเฉพาะในการออกแบบเว็บของคุณ

แอตทริบิวต์ Href

แอตทริบิวต์ href ใช้ในลิงก์เพื่อระบุ URL ของหน้าปลายทาง

บทสรุป

HTML เป็นรากฐานของการออกแบบเว็บไซต์และจำเป็นต่อการสร้างหน้าเว็บที่มีโครงสร้างที่ดี พวกเขาเป็นก้าวแรกสู่เว็บไซต์ที่ครบครัน! ดังนั้นการทำความเข้าใจพื้นฐานของ HTML จึงเป็นสิ่งจำเป็นสำหรับผู้ที่ต้องการสร้างเว็บไซต์ HTML เป็นภาษามาร์กอัปที่ประกอบด้วยองค์ประกอบ คุณลักษณะ และเนื้อหา แต่ละองค์ประกอบแสดงถึงองค์ประกอบเฉพาะของหน้าเว็บ และแอตทริบิวต์ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ ด้วย HTML คุณสามารถสร้างเว็บไซต์ที่มีโครงสร้าง ดึงดูดสายตา และโต้ตอบได้

ดูบทความที่เกี่ยวข้องที่นี่: https://www.drivetrafficmedia.com/the-different-coding-languages-of-web-design/