HTML Basic ภาษา HTML เบื้องต้น

ทุกหน้าเว็บเพจจะต้องเริ่มต้นด้วยแท็ก <!DOCTYPE html> สำหรับประกาศว่าเอกสารนี้เป็นเอกสาร HTML เสมอ

ต่อจากนั้นคือแท็ก <html> เป็นแท็กเริ่มต้น และสุดท้ายจะต้องปิดด้วย </html>

เนื้อหาที่จะแสดงให้ผู้ใช้เห็นจะอยู่ระหว่างแท็ก <body> และ </body>

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h1>First Heading</h1>
<p>Paragraph.</p>

</body>
</html> 

HTML Headings ส่วนหัวเรื่อง

ส่วนหัวเรื่องในเนื้อหาของ HTML จะกำหนดด้วยแท็ก <h1> ถึง <h6>

<h1> คือหัวเรื่องที่มีความสำคัญมากที่สุด

<h6> คือหัวเรื่องที่มีความสำคัญน้อยที่สุด

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3> 
<h4>This is heading 4</h4> 
<h5>This is heading 5</h5> 
<h6>This is heading 6</h6> 

HTML Paragraphs ย่อหน้าในเอชทีเอ็มแอล

การขึ้นย่อหน้าใหม่ใน HTML จะใช้แท็ก <p></p> ซึ่งมีรูปแบบการใช้งานดังนี้

<p>This is a paragraph.</p>
<p>This is another paragraph.</p> 

HTML Links การแสดงลิงค์

การสร้างลิงค์ไปยังเว็บไซต์อื่นหรือหน้าอื่น ๆ ในเว็บไซต์เดียวกัน จะใช้แท็ก <a> ซึ่งมีรูปแบบการใช้งานดังนี้

 <a href="https://www.dcrub.com">DCRUB DOT COM</a> 

โดยลิงค์ปลายทางจะกำหนดไว้ในแอททริบิวต์ href

HTML Images การแสดงรูปภาพ

การแสดงรูปภาพใน HTML จะใช้แท็ก <img> โดยมีแอททริบิวต์ดังนี้

  • src สำหรับกำหนดรูปภาพที่จะใช้แสดง
  • alt สำหรับกำหนดข้อความ alternative text
  • width สำหรับกำหนดความกว้าง
  • height สำหรับกำหนดความสูง

รูปแบบการใช้งานแท็ก <img>

<img src="https://www.dcrub.com/wp-content/uploads/2020/02/HTML5-introduction.jpg" alt="HTML Intro" width="1280" height="720">

HTML Buttons การใช้งานปุ่ม

การสร้างปุ่มกดใน HTML จะใช้แท็ก <button> ซึ่งมีตัวอย่างการใช้งานดังนี้

<button>Click me</button> 

HTML Lists การแสดงข้อมูลประเภทรายการ

การแสดงข้อมูลประเภทรายการใน HTML จะใช้แท็ก <ul> (unordered/bullet list) สำหรับข้อมูลที่ไม่เรียงลำดับ หรือแท็ก <ol> (ordered/numbered list) สำหรับข้อมูลที่เรียงลำดับเป็นตัวเลขลำดับ โดยภายในจะใช้แท็ก <li> (list items) สำหรับแสดงรายการข้อมูลอีกที

ตัวอย่างการใช้งานแท็ก <ul>

<ul>
  <li>Mango</li>
  <li>Orange</li>
  <li>Apple</li>
</ul>

ตัวอย่างการใช้งานแท็ก <ol>

<ol>
  <li>Mango</li>
  <li>Orange</li>
  <li>Apple</li>
</ol>