HTML Documents เอกสารเอชทีเอ็มแอล
ทุกหน้าเว็บเพจจะต้องเริ่มต้นด้วยแท็ก <!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>
