Lv.2 โครงสร้าง HTML

HTML Page Structure

โครงสร้าง 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>
HTML Page Structure Preview
HTML Page Structure Preview

ซึ่งการใช้ทำงานหลักๆ ก็มีแค่ 2 ส่วนนี้ครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น

Top