HTML Elements , Attributes and Comments

1.Elements

ในส่วนเริ่มต้นของบทที่ 3 นั้นได้มีการกล่าวถึง element หรือเรียกว่า “แท็ก” ซึ่งภาษา HTML เป็นภาษามาร์กอัพ ที่จะต้องมีการกำหนดแท็กเปิด/ปิด เพื่อบอกถึงส่วนเริ่มต้นและสิ้นสุดของแท็ก 

ไวยากรณ์

<tagname>content</tagname>

ตัวอย่างของ Elements

  • <h1>Elements H1</h1>
  • <p>Elements P</p>
  • <a>Element A</a>
  • อื่นๆ

 

2.Attribute

Elements สามารถเพิ่ม Attibutes หรือคุณสมบัติอื่นๆ ที่ทำให้แท็กมีความพิเศษมากยิ่งขี้น 

  • แท็ก HTML ทั้งหมดสามารถเพิ่ม Attributes ได้
  • Attribute จะต้องระบุในแท็กเริ่มต้น (แท็กเปิด)
  • Attribute มักจะเพิ่มโดยมีคีย์เวิร์ด 2 ตัว เช่น name=”value” 

 

ตัวอย่างการเพิ่ม Attributes ให้กับ Elements (แท็ก)

<h1 style="color:red">เพิ่มคุณสมบัติให้แท็ก h1</h>
<p align="center">เพิ่มคุณสมบัติให้แท็ก p</p>
<a href="https://wwww.narasak.com">Narasak.com</a>

ไฟล์ที่ 1 add_att.html

อธิบายไฟล์ที่ 1 

  • บรรทัดที่ 1 เป็นการเพิ่ม attribute กำหนดรูปแบบการแสดงผลตัวหนังสือของแท็ก h1 เป็นสีแดง
  • บรรทัดที่ 2 เพิ่ม attibute จัดตำแหน่งตัวหนังสือของแท็ก p ให้แสดงผลกึ่งกลางหน้าจอ
  • บรรทัดที่ 3 เพิ่ม attribute ลิงค์ให้กับแท็ก a

 

3.Comments

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

ไวยากรณ์ของ comment

<!-- ข้อคความหรือ element ใดๆก็ได้ -->

 

ตัวอย่างการใช้งาน comment

<html>
 <body>
  <h1>Comment</h1>
  <!-- comment -->
<!-- <p>เนื้อหานี้จะไม่ถูกแสดงผล</p> --> </body> </html>

 

ตัวอย่าง แท็ก HTML ทั่วไป

Tag Name คำอธิบาย
<!–…–> สร้างคอมเมนต์ เพื่อให้ผู้เขียนโค้ดเข้าใจ แต่ไม่มีการแสดงผลออกหน้าเว็บ
<!DOCTYPE>  กำหนดประเภทเอกสารเป็น HTML
<a> สร้างลิงค์ (hyperlink)
<abbr> กำหนดอักษรย่อ เช่น กฟผ (การไฟฟ้าฝ่ายผลิตแห่งประเทศไทย)
<area> สร้างแผนที่ภายในภาพ ซึ่งสามารถคลิกได้เป็นพิเศษ
<article> กำหนดส่วนของบทความ หรือเนื้อหา
<audio> ฝังคอนเทนต์ประเภทเสียง เพื่อให้เล่นเสียงได้ในหน้าเว็บ
<b> ตัวอักษรหนา
<base> ระบุ URL หลักของปลายทาง 
<body> ส่วนที่ใช้ในการเขียนโครงสร้างอื่นเพื่อแสดงผลในหน้าเว็บ
<br> บรรทัดใหม่
<button> สร้างปุ่มที่สามารถคลิกได้
<code> สร้างเนื้อหาส่วนของโค้ดคอมพิวเตอร์
<div> กำหนดส่วนของเนื้อหา หรือแบ่งการจัดกลุ่มเนื้อหา
<embed> เป็นเหมือนภาชนะที่รองรับเนื้อหาภายนอก เช่น หน้าเว็บภายนอก ,รูปภาพ ,วิดีโอ เป็นต้น
<footer> กำหนดส่วนด้านล่างของเอกสาร
<form> สร้างฟอร์มในการป้อนข้อมูลของผู้ใช้งาน
<h1> to <h6> กำหนดส่วนหัวของ HTML (หัวข้อ)
<head> แท็กข้อมูลของส่วนเมต้า ซึ่งเมต้าจะไม่แสดงผลเหมือนส่วนของ body
<header> กำหนดส่วนหัวของเอกสาร
<hr> เส้นนอน
<i> ตัวเอียง
<iframe> กรอบสำหรับฝังเนื้อหาภายนอกเว็บ
<img> แสดงรูปภาพ
<li> สร้างข้อมูลแบบรายการ
<style> กำหนดรูปแบบของเอกสาร HTML
<table> กำหนดตาราง
<td> สร้างคอลัมน์ในตาราง
<th> สร้างคอลัมน์ส่วนหัวข้อของตาราง
<tr> สร้างแถวของตาราง
<u> ขีดเส้นใต้

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: