home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML Basics

Hypertext หมายถึงวิธีที่หน้าเว็บ (เอกสาร HTML) ถูกลิงก์เข้าด้วยกัน ดังนั้น ลิงก์ที่มีอยู่บนหน้าเว็บเรียกว่า Hypertext ตามชื่อของมัน HTML คือ Markup Language ซึ่งหมายถึงคุณใช้ HTML เพื่อ "mark-up" เอกสารข้อความด้วยแท็กที่บอกเบราว์เซอร์ว่าจะโครงสร้างอย่างไรเพื่อแสดง ย่อมาจาก Hypertext Markup Language และเป็นภาษาที่ใช้กันอย่างแพร่หลายที่สุดในการเขียนเว็บเพจ

HTML5 เป็นการปรับปรุงครั้งใหญ่ต่อไปของมาตรฐาน HTML แทนที่ HTML 4.01, XHTML 1.0, และ XHTML 1.1 HTML5 เป็นมาตรฐานสำหรับโครงสร้างและนำเสนอเนื้อหาบน World Wide Web มาตรฐานใหม่รวมฟีเจอร์เช่น video playback และ drag-and-drop ที่ก่อนหน้านี้ขึ้นอยู่กับ browser plug-ins ของบุคคลที่สาม เช่น Adobe Flash, Microsoft Silverlight, และ Google Gears

HTML Doctype

เมื่อสร้างเอกสาร HTML แทรก doctype เป็นสิ่งแรกในเอกสาร มันบอกเบราว์เซอร์เกี่ยวกับเวอร์ชันของ HTML ที่หน้านี้เขียน ไม่ case-sensitive

HTML5 doctype:

<!DOCTYPE html>

HTML Character Encoding

แอตทริบิวต์ charset ใน HTML ใช้กับ <meta> เพื่อระบุ character encoding

Syntax ดังนี้:

<meta charset="char_set">

ด้านบน char_set คือ character set ที่ระบุ character encoding ของเอกสาร HTML

มาดูตัวอย่างระบุ character encoding:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <h2>Example</h2>
  <p>We have added demo text:<p>
  <textarea rows="4" cols="50">
    Here, we are mentioned the demo content. This is just to display an example of charset in an HTML document.
  </textarea><br>
  <button type="button">Previous</button>
  <button type="button">Next</button>
</body>
</html>

ผลลัพธ์

HTML Basics

HTML Headings

เอกสารใดๆ เริ่มต้นด้วยหัวข้อ คุณสามารถใช้ขนาดต่างๆ สำหรับหัวข้อ HTML มีหกระดับของหัวข้อ ใช้ elements <h1>, <h2>, <h3>, <h4>, <h5>, และ <h6> ขณะแสดงหัวข้อ เบราว์เซอร์เพิ่มบรรทัดหนึ่งก่อนและหลังหัวข้อนั้น

HTML Elements

HTML element ถูกกำหนดโดย starting tag หาก element มีเนื้อหาอื่น จะจบด้วย closing tag ที่ชื่อ element นำหน้าด้วย forward slash

HTML Attributes

Attribute ใช้กำหนดลักษณะของ HTML element วางอยู่ภายใน opening tag ของ element ทุก attribute ประกอบด้วยสองส่วน — name และ value ตัวอย่าง:

<canvas id="newCanvas" width="400" height="300">

ตัวอย่างอื่นๆ:

<img alt="alternate text">

การใส่เครื่องหมายคำพูดรอบ attribute ไม่บังคับตามมาตรฐาน HTML5 แต่เป็น best practice ที่ดีที่ควรใส่เสมอ

HTML Formatting

Formatting หมายถึงวิธีจัดรูปแบบข้อความบนหน้าเว็บใน HTML รวมถึง bold text, italic text, strike text, highlight text ฯลฯ มาดูตัวอย่าง:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Tags for formatting text in HTML</h2>
<strong>Strong text</strong><br>
<b>Bold text</b><br>
<em>Emphasized text</em><br>
<i>Italic Text</i><br>
<mark>Highlighted text</mark>
</body>
</html>

ผลลัพธ์

HTML Basics

HTML Comments

HTML comments วางระหว่างแท็ก <!-- ... --> ดังนั้น เนื้อหาที่วางภายใน <!-- ... --> จะถูกจัดว่าเป็น comment และจะถูกเพิกเฉยโดยเบราว์เซอร์อย่างสมบูรณ์