Empty Elements

#HelloFront-end #HelloErmine #HelloWorld2021

Line breaks : <br>

<br> ใช้สำหรับขึ้นบรรทัดใหม่

Presentational elements : <hr>

<hr> ใช้สำหรับแสดงเส้นขั้นบรรทัด

Image element : <img>

ใช้ในการเพิ่มรูปภาพให้กับเว็บเพจโดยมักใช้คู่กับ src attribute และยังสามารถเพิ่มคุณลักษณะต่าง ๆ ให้ภาพได้อีกโดยใช้ attributes เช่น alt (ใช้ตั้งชื่อภาพกรณีภาพมีปัญหาแล้วไม่แสดงผลบนหน้าเว็บไซต์ จะแสดงชื่อภาพแทน), width (ใช้กำหนดความกว้างของภาพ), height (ใช้กำหนดความสูงของภาพ)

ตัวอย่าง

<html>

<head>
    <meta charset="utf-8">
    <title>Page Title</title>
</head>

<body>
    <img src="Camp/HelloWorld/scot123.jpg" alt="cat" width="50%" height="50%">
    <img src="https://us-fbcloud.net/wb/data/1014/1014670-img.sb272x.0.jpg" alt="น้องชิบะ" width="50%" height="50%">
    <img src="Camp/HelloWorld/Scottish-Fold-cat.png" alt="แมว2">
</body>
</html>

ผลลัพธ์

ภาพแมวเป็นภาพที่เกิดจาก Internal link และภาพน้องหมาชิบะเป็นภาพที่ได้จาก External link ในขณะที่ภาพสุดท้ายได้เกิดปัญหาทำให้ภาพไม่แสดงผลแต่เราจะรู้ได้ว่าเป็นภาพอะไรจากข้อความแสดงขึ้นมาแทน โดยข้อความดังกล่าวถูกกำหนดโดยใช้ alt attribute

PreviousClose Elements NextWhat are Attributes?

Last updated 3 years ago

Was this helpful?

<html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <img src="Camp/HelloWorld/scot123.jpg" alt="cat" width="50%" height="50%"> <img src="https://us-fbcloud.net/wb/data/1014/1014670-img.sb272x.0.jpg" alt="น้องชิบะ" width="50%" height="50%"> <img src="Camp/HelloWorld/Scottish-Fold-cat.png" alt="แมว2"> </body> </html>