โครงสร้าง HTML นั้น จะประกอบไปด้วย 2 ส่วนหลักๆ คือ ส่วน Head และส่วนของ Body ครับ
โครงสร้าง HTML ส่วน Head
จะประกอบไปด้วย Meta ต่างๆ <title>, <style>, <meta>, <link>, <script>
<title> ใช้สำหรับแสดงข้อความบน Title Bar
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
</head>
<body>
...
</body>
</html>
<style> ใช้สำหรับเขียน CSS ตกแต่ง HTML Elements ในหน้านี้เท่านั้น
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>พารากราฟ</p>
</body>
</html>
<meta> มีหลายตัว ขออธิบายทีละตัวนะครับ
<meta charset=”UTF-8″> เป็นแอตทริบิวต์ชุดอักขระระบุการเข้ารหัสอักขระสำหรับเอกสาร HTML ข้อกำหนด HTML สนับสนุนให้นักพัฒนาเว็บไซต์ใช้ชุดอักขระ UTF-8 ซึ่งครอบคลุมอักขระและสัญลักษณ์เกือบทั้งหมดในโลก!
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
</head>
<body>
...
</body>
</html>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> เป็นการกำหนดให้เว็บไซต์ของเราสามารถแสดงผลได้ดีในมือถือ
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
...
</body>
</html>
<mata name=”description”> ใช้กำหนดคำอธิบายในเว็บไซต์ของเราว่าเกี่ยวกับอะไร
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
</head>
<body>
...
</body>
</html>
<meta name=”keywords”> ใช้สำหรับกำหนด Kyewords ที่ต้องการทำอันดับให้เว็บไซต์ของเรา
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
</head>
<body>
...
</body>
</html>
<meta name=”author”> กำหนดชื่อผู้เขียน
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
<meta name="author" content="Theethawat Chetjeerasioon">
</head>
<body>
...
</body>
</html>
<link> ใช้สำหรับดึงไฟล์ CSS จากภายนอกมาใช้งาน
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
<meta name="author" content="Theethawat Chetjeerasioon">
<link href="style" rel="stylesheet">
</head>
<body>
...
</body>
</html>
จากโค้ดชุดบน เรียกไฟล์ CSS ชื่อ style.css มาใช้งานในหน้านี้
<script> ใช้สำหรับเขียน JavaScript ทำได้ 2 วิธี
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
<meta name="author" content="Theethawat Chetjeerasioon">
<link href="style" rel="stylesheet">
</head>
<body>
...
<script>
<!-- ถ้าเขียน JavaScript ไม่เยอะ แก้เพฉาะบางจุดจริงๆ แนะนำเขียนในนี้ครับ -->
</script>
<script src="main.js"></script><!-- ถ้าเขียน JavaScript ใช้ทั้งเว็บไซต์ แนะนำให้เขียนในนี้ครับ -->
</body>
</html>
ส่วน Body
เป็นส่วนเนื้อหาหลักของหน้าเว็บเพจ ซึ่งการที่เราจะทำเว็บให้สวยงามนั้นต้องใช้ HTML Elements จำนวนมาก ขึ้นอยู่กับหน้าตาของเว็บไซต์ว่าเป็นแบบไหน และข้อมูลอื่นๆ ข้อความ รูปภาพ เสียง วีดิโอ ว่าจะให้อยู่ในส่วนใด
ตัวอย่าง
<body>
<header>
<nav>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Service</li>
<li><a href="#"></a>Contact</li>
</ul>
</nav>
</header>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
จับมารวมกัน โดยผมเพิ่ม CSS กับ JavaScript นิดหน่อย แล้วหน้าตาจะออกมาเป็นแบบนี้
ตัวอย่าง
<!DOCTYPE html>
<html lang="th-TH">
<head>
<title>nkaub | โครงสร้างของ HTML</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript jQuery PHP MySql">
<meta name="description" content="วิธีทำเว็บเอง HTML CSS JavaScript jQuery PHP MySql">
<meta name="author" content="Theethawat Chetjeerasioon">
<link href="style.css" rel="stylesheet">
<style>
header {
height: 100px;
width: 50%;
margin: auto;
border: 5px solid red;
}
main {
height: 700px;
width: 50%;
margin: auto;
border: 5px solid blue;
}
footer {
height: 150px;
width: 50%;
margin: auto;
border: 5px solid green;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Service</li>
<li><a href="#"></a>Contact</li>
</ul>
</nav>
</header>
<main>
<p id="demo">My First JavaScript</p>
</main>
<aside>
</aside>
<footer>
</footer>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
ซึ่งการใช้ทำงานหลักๆ ก็มีแค่ 2 ส่วนนี้ครับ