ตัวอย่างพื้นฐาน HTML
ในบทนี้เราจะแสดงตัวอย่าง HTML พื้นฐานบางส่วน
ไม่ต้องกังวลหากเราใช้แท็กที่คุณยังไม่ได้เรียนรู้
เอกสาร HTML
เอกสาร HTML ทั้งหมดต้องขึ้นต้นด้วยการประกาศประเภทเอกสาร<!DOCTYPE html>:
เอกสาร HTML เองเริ่มต้นด้วย<html>และลงท้ายด้วย</html>.
ส่วนที่มองเห็นได้ของเอกสาร HTML อยู่ระหว่าง<body>และ</body>
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ประกาศ <!DOCTYPE>
การ<!DOCTYPE>ประกาศแสดงถึงประเภทเอกสาร และช่วยให้เบราว์เซอร์แสดงหน้าเว็บได้อย่างถูกต้อง
ต้องปรากฏเพียงครั้งเดียวที่ด้านบนของหน้า (ก่อนแท็ก HTML)
การ<!DOCTYPE>ประกาศไม่คำนึงถึงขนาดตัวพิมพ์
การ<!DOCTYPE>ประกาศสำหรับ HTML5 คือ:
<!DOCTYPE html>
ส่วนหัว HTML
ส่วนหัว HTML ถูกกำหนดด้วยแท็ก<h1>ถึง<h6>
<h1>กำหนดหัวเรื่องที่สำคัญที่สุด <h6>กำหนดหัวเรื่องที่สำคัญน้อยที่สุด:
ตัวอย่าง
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
ย่อหน้า HTML
ย่อหน้า HTML ถูกกำหนดด้วย<p>แท็ก:
ตัวอย่าง
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
ลิงค์ HTML
ลิงก์ HTML ถูกกำหนดด้วย<a>แท็ก:
ตัวอย่าง
<a href="https://www.w3schools.com">This is a link</a>
ปลายทางของลิงก์ระบุไว้ในhrefแอตทริบิวต์
แอตทริบิวต์ถูกใช้เพื่อให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับคุณลักษณะในบทต่อไป
รูปภาพ HTML
ภาพ HTML ถูกกำหนดด้วย<img>แท็ก
ไฟล์ต้นฉบับ ( src) ข้อความแสดงแทน ( alt),
widthและheightจัดเตรียมเป็นแอตทริบิวต์:
ตัวอย่าง
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
วิธีดูซอร์ส HTML
คุณเคยเห็นหน้าเว็บและสงสัยว่า "เฮ้ พวกเขาทำได้อย่างไร"
ดูซอร์สโค้ด HTML:
คลิกขวาในหน้า HTML แล้วเลือก "ดูที่มาของหน้า" (ใน Chrome) หรือ "ดูแหล่งที่มา" (ใน Edge) หรือคล้ายกันในเบราว์เซอร์อื่นๆ ซึ่งจะเปิดหน้าต่างที่มีซอร์สโค้ด HTML ของหน้า
ตรวจสอบองค์ประกอบ HTML:
คลิกขวาที่องค์ประกอบ (หรือพื้นที่ว่าง) และเลือก "ตรวจสอบ" หรือ "ตรวจสอบองค์ประกอบ" เพื่อดูว่าองค์ประกอบใดบ้างที่สร้างขึ้น (คุณจะเห็นทั้ง HTML และ CSS) คุณยังสามารถแก้ไข HTML หรือ CSS ได้ทันทีในแผงองค์ประกอบหรือสไตล์ที่เปิดขึ้น