โครงสร้างของเอกสาร HTML: เรียนรู้โครงสร้างพื้นฐานของ HTML

เผยแพร่แล้ว: 2020-12-14

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

ได้เปลี่ยนวิธีการทำงานของผู้คน HTML และ CSS ใช้เพื่อสร้างและจัดการองค์ประกอบบนหน้าเว็บพร้อมกับจาวาสคริปต์ ให้ผู้สร้าง HTML กำหนดบทบาทที่แตกต่างกันสำหรับแต่ละองค์ประกอบให้เสรีภาพในการปรับแต่งอย่างเต็มที่ในกระบวนการสร้าง

HTML ย่อมาจาก Hyper Text Markup Language และใช้ในการออกแบบหน้าเว็บที่แสดงบนเว็บไซต์

มีสามประเด็นหลักที่เมื่อนำมารวมกันจะช่วยสร้างหน้าเว็บ

โครงสร้าง HTML —รองรับองค์ประกอบโครงสร้าง
สไตล์ CSS —ช่วยออกแบบและกำหนดสไตล์ให้กับองค์ประกอบโครงสร้างเหล่านั้น
การโต้ตอบ JS —เปิดใช้งานการโต้ตอบระหว่างองค์ประกอบเหล่านั้น

ใน โครงสร้าง HTML องค์ประกอบและแท็กจะจับคู่กันเพื่อทำเครื่องหมายเนื้อหา

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

องค์ประกอบเปิดและปิดเปลี่ยนแปลง แต่แท็กยังคงเหมือนเดิม แท็กจะถูกแทรกก่อนและท้ายประโยค ทำให้สามารถจัดรูปแบบบนหน้าได้ หน้าเว็บในอุดมคติประกอบด้วยสามส่วนหลักและส่วนสำคัญ:

ชื่อ
ศีรษะ
ตัว

องค์ประกอบส่วนหัว ใช้เพื่อเน้นจุดเริ่มต้น/ส่วนหัวของส่วนหัว ส่วนหัวจะช่วยเป็นคำอธิบายเกี่ยวกับหน้าเสมอ เนื้อหาภายในแท็ก head เช่น ส่วนหัว คือสิ่งที่ใช้เป็นแหล่งที่มาในการระบุเนื้อหาของหน้า

รายการด้านล่างนี้คือแท็กทั้งหมดที่สามารถใช้ได้ในองค์ประกอบส่วนหัว:

<base>
<link>
<เมต้า>
<noscript>
<script>
<style>
<title>

ตัวอย่างเช่น:

<HEAD>

<TITLE> ตัวอย่าง Hello world ใน HTML<TITLE>

</HEAD>

องค์ประกอบระดับบล็อก ใช้เพื่อระบุส่วนเฉพาะของหน้าเว็บ ไม่ว่าจะเป็นย่อหน้า หัวข้อย่อย หรือรายการบางรายการที่จะสร้าง

ย่อหน้า: <P>และ </P>

หัวเรื่อง ระดับหนึ่ง:<H1>หัวเรื่อง ระดับสอง:<H2>และ </H2>

กฎแนวนอน:<HR> การจัดกึ่งกลาง:<CENTER>

ส่วน ท้าย : ไม่มีแท็กพิเศษเพื่อระบุ แต่ยังคงแนะนำให้มีส่วนท้ายบนหน้าเว็บเพื่อช่วยระบุส่วนที่ต้องติดต่อกับผู้เขียน อาจมีส่วนคำถามที่พบบ่อยหรืออีเมลเพื่อสมัครรับจดหมายข่าว

<HTML>

<HEAD>

<TITLE>บริษัทรองเท้า <TITLE>

</HEAD>

<BODY>

<H1>ยินดีต้อนรับสู่รองเท้าที่น่าทึ่ง! </H1>: </H2>

<CENTER> ทำไมไม่ไปที่ <A HREF =..http://www.example1.com/..>ตัวอย่างเว็บไซต์

</A>

</CENTER>

</BODY>

</HTML>

ส่วนข้างต้นอธิบายองค์ประกอบหลักในหน้าเว็บของ โครงสร้าง HTML

ตอนนี้ เราย้ายไปยังซอร์ส HTML และพยายามทำความเข้าใจว่าสามารถใช้เพื่อทำความเข้าใจโครงสร้างโปรแกรมและองค์ประกอบต่างๆ ได้อย่างไร

สำหรับมือใหม่ วิธีนี้ช่วยให้เข้าใจวิธีการพัฒนาหน้าอื่นๆ ได้มาก และสามารถใช้เป็นข้อมูลอ้างอิงเพื่อสร้างเวอร์ชันที่กำหนดเองสำหรับหน้าเว็บของคุณเองได้

คลิกปุ่มขวาที่ใดก็ได้บนหน้าเว็บแล้วเลือก 'ดูแหล่งที่มาของหน้า' ซึ่งจะเปิดหน้าต่างที่มีซอร์สโค้ดของหน้า

เพื่อตรวจสอบหน้า

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

ด้วยการอธิบาย โครงสร้างพื้นฐานของ HTML และแท็ก ตอนนี้เรามาทำความเข้าใจองค์ประกอบพื้นฐานที่จำเป็นในการเขียนเนื้อหาใน HTML กัน

<p> แท็กนี้ใช้ในหน้าเว็บเมื่อมีความจำเป็นสำหรับย่อหน้า และเพื่อปิดท้าย จะใช้แท็ก </p>

<br> แท็กนี้ใช้เพื่อแบ่งบรรทัดและส่วนใหญ่ใช้เพื่อเขียนบรรทัดเดียว ไม่ว่าจะเป็นการติดต่อหรือที่อยู่

<hr> แท็กนี้ใช้เพื่อแยกเนื้อหาของหน้าเว็บออกเป็นสองส่วน

แท็กทั้งหมดนี้มีการใช้งานในโค้ดหน้าเว็บตัวอย่าง

เรียนรู้: 21 แนวคิดโครงการพัฒนาเว็บ

ป้อนข้อมูล

<html>

<head>

</head>

<body>

<h1>โครงสร้างของ HTML</h1>

<p>

By upGrad Education<br>

<hr>

เรียนรู้พื้นฐาน <br>

<hr>

By upGrad Education<br>

</p>

</body>

</html>

คุณลักษณะ

สำหรับแท็กทั้งหมดที่กล่าวถึง จะมีการใช้แอตทริบิวต์เมื่อมีความจำเป็นสำหรับข้อมูลเพิ่มเติม แอตทริบิวต์ถูกกำหนดด้วยสองพารามิเตอร์ คือ 'ค่า' และ 'ชื่อ'

ในที่นี้ พารามิเตอร์ 'ชื่อ' มีฟังก์ชันที่ใช้ชื่อของคุณสมบัติที่ถือว่าถูกกำหนดไว้แล้ว และพารามิเตอร์ 'value' มีฟังก์ชันคล้ายกันเพื่อรับค่าของชื่อคุณสมบัติที่สอดคล้องกับองค์ประกอบ

<img> คุณลักษณะนี้ใช้เพื่อเพิ่ม/ฝังรูปภาพลงในหน้าเว็บ แท็กนี้จะช่วยระบุเส้นทางของภาพ และ <height> และ <width> ระบุความสูงและความกว้างของรูปภาพตามลำดับ

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

ลงทะเบียนเรียน หลักสูตรวิศวกรรมซอฟต์แวร์ จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม PG สำหรับผู้บริหาร โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว

อ่าน: 8 แนวคิดและหัวข้อโครงการเต็มกองที่น่าตื่นเต้น

ตัวอย่าง

<html>

<body>

<h2>คุณสมบัติของ src</h2>

<p>รูปภาพ HTML ถูกกำหนดด้วยแท็ก img และชื่อไฟล์ของแหล่งที่มาของรูปภาพถูกระบุในแอตทริบิวต์ src:</p>

</body>

</html>

สำหรับการเปลี่ยนรูปแบบข้อความ ขนาด ฟอนต์ และฟังก์ชันอื่นๆ ที่เกี่ยวข้องกับข้อความ แท็ก <style> จะถูกใช้

ตัวอย่าง

<html>

<body>

<h2>คุณสมบัติของสไตล์</h2>

<p>แอตทริบิวต์นี้ใช้เพื่อเปลี่ยนรูปแบบ เช่น สี:</p>

<p style=”color:red;”>นี่คือย่อหน้าสีแดง</p>

</body>

</html>

ด้วยแอปพลิเคชันการแก้ไขข้อความ HTML ยังมีแท็กเพื่อแก้ไขข้อความตามคำขอที่กำหนดเองโดยใช้แท็กเหล่านี้

<b> – ข้อความตัวหนา
<strong> – ข้อความสำคัญ
<i> – ตัวเอียง
<em> – เน้นข้อความ
<mark> – ทำเครื่องหมายข้อความ
<small> – ข้อความเล็กลง
<del> – ข้อความที่ถูกลบ
<ins> – แทรกข้อความ
<sub> – ข้อความตัวห้อย
<sup> – ข้อความยก

เพื่อสรุปบทความ เราได้เรียนรู้คุณลักษณะและพื้นฐานของ HTML ต่อไปนี้:

โครงสร้าง HTML
แท็ก องค์ประกอบ และประเภท
แท็กพื้นฐานและแอปพลิเคชันของพวกเขา

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

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาซอฟต์แวร์แบบฟูลสแตก โปรดดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์แบบฟูลสแตก ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการมากกว่า 9 โครงการ และการมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักและความช่วยเหลือด้านงานกับบริษัทชั้นนำ

เตรียมความพร้อมสู่อาชีพแห่งอนาคต

สมัครเลยตอนนี้สำหรับปริญญาโทด้านวิศวกรรมซอฟต์แวร์