HTML ย่อมาจาก HyperText Markup Language เป็นภาษามาร์กอัปที่ใช้ในการสร้างเอกสารบนเว็บ เอกสาร HTML ประกอบด้วยแท็กต่างๆ ที่ใช้ในการจัดโครงสร้างข้อความ รูปภาพ และองค์ประกอบอื่นๆ ของหน้าเว็บ
โครงสร้างพื้นฐานของ HTML
เอกสาร HTML เริ่มต้นด้วยแท็ก <!DOCTYPE html> ซึ่งระบุว่าเอกสารนี้เป็นเอกสาร HTML จากนั้นจึงมีแท็ก <html> และ </html> ซึ่งล้อมรอบส่วนเนื้อหาทั้งหมดของเอกสาร แท็ก <head> และ </head> ล้อมรอบส่วนหัวของเอกสาร ซึ่งมักใช้สำหรับข้อมูลเกี่ยวกับเอกสาร เช่น ชื่อเรื่องและคำอธิบาย
ส่วนเนื้อหาของเอกสาร HTML อยู่ภายในแท็ก <body> และ </body> แท็ก <body> สามารถใช้เพื่อกำหนดเนื้อหาหลักของหน้าเว็บ เช่น ข้อความ รูปภาพ และองค์ประกอบอื่นๆ
แท็ก HTML พื้นฐาน
ต่อไปนี้เป็นแท็ก HTML พื้นฐานบางตัว:
<h1>ถึง<h6>ใช้สำหรับสร้างหัวเรื่องระดับต่างๆ<p>ใช้สำหรับสร้างย่อหน้า<img>ใช้สำหรับแทรกรูปภาพ<a>ใช้สำหรับสร้างลิงก์<table>ใช้สำหรับสร้างตาราง<form>ใช้สำหรับสร้างฟอร์ม
ตัวอย่างเอกสาร HTML
ต่อไปนี้เป็นตัวอย่างเอกสาร HTML ง่ายๆ:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
<img src="image.jpg" alt="My image">
<a href="https://www.google.com">Google</a>
</body>
</html>
เอกสาร HTML นี้สร้างหน้าเว็บที่มีข้อความ รูปภาพ และลิงก์
การเขียน CSS
CSS (Cascading Style Sheets) ใช้เพื่อจัดรูปแบบเอกสาร HTML CSS ช่วยให้คุณสามารถกำหนดขนาด สี และลักษณะอื่นๆ ของข้อความ รูปภาพ และองค์ประกอบอื่นๆ ของหน้าเว็บ
คุณสามารถเขียน CSS แยกต่างหากจากเอกสาร HTML หรือรวมไว้ในเอกสาร HTML ก็ได้
ตัวอย่างเอกสาร HTML กับ CSS
ต่อไปนี้เป็นตัวอย่างเอกสาร HTML กับ CSS:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Document</title>
<style>
body {
background-color: #ffffff;
}
h1 {
color: #ff0000;
}
p {
font-size: 16px;
}
img {
width: 100px;
}
a {
color: #0000ff;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML document.</p>
<img src="image.jpg" alt="My image">
<a href="https://www.google.com">Google</a>
</body>
</html>
เอกสาร HTML นี้ใช้ CSS เพื่อกำหนดขนาด สี และลักษณะอื่นๆ ของข้อความ รูปภาพ และลิงก์
สรุป
HTML เป็นภาษามาร์กอัปพื้นฐานที่ใช้ในการสร้างเอกสารบนเว็บ เอกสาร HTML ประกอบด้วยแท็กต่างๆ ที่ใช้ในการจัดโครงสร้างข้อความ รูปภาพ และองค์ประกอบอื่นๆ ของหน้าเว็บ
CSS ใช้เพื่อจัดรูปแบบเอกสาร HTML CSS ช่วยให้คุณสามารถกำหนดขนาด สี และลักษณะอื่นๆ ของข้อความ รูปภาพ และองค์ประกอบอื่นๆ ของหน้าเว็บ
หวังว่าบทความนี้จะเป็นประโยชน์สำหรับคุณในการเริ่มต้นใช้งาน HTML และ CSS