Lv.20 HTML File Paths

HTML File Paths อธิบายการอ้างอิงไฟล์และตำแหน่งของไฟล์ต่างๆในเว็บไซต์

ตัวอย่าง

  • <img src=”logo.png” alt=”Logo”> รูปภาพ logo.png อยู่ในโฟลเดอร์เดียวกับหน้าปัจจุบัน
  • <img src=”images/logo.png” alt=”Logo”> รูปภาพ logo.png อยู่ในโฟลเดอร์ images
  • <img src=”../logo.png” alt=”Logo”> ออกมาจากหน้าปัจจุบัน 1 ชั้น

HTML File Paths เรียกจากที่อื่น

เป็นการดึงไฟล์จากเว็บไซต์อื่นๆ มาใช้งานในเว็บไซต์ของเรา

ตัวอย่าง

<img src=”https://www.nkaub.com/images/apple.png” alt=”Apple”>

Lv.19 HTML JavaScript

HTML เรียกใช้ JavaScript ด้วยนะ เพราะถ้าไม่ใช้ JavaScript หน้าเว็บก็ไม่มีความเป็นไดนามิกและไม่สามารถโต้ตอบผู้ใช้งานได้

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML ต้องมี JavaScript</title>
	</head>
	<body>
		<h1>JavaScript</h1>

		<button type="button" onclick="document.getElementById('text').innerHTML = Date()">กดปุ่มเพื่อแสดงเวลา</button>

		<p id="text"></p>
		
	</body>
</html>

HTML เรียกใช้ JavaScript เปลี่ยนเนื้อหา

ใช้ inerHTML Property เพื่อเปลี่ยนเนื้อหา

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML ต้องมี JavaScript</title>
	</head>
	<body>
		<h1>JavaScript</h1>

		<button type="button" onclick="myFunction()">กดปุ่มเพื่อเปลี่ยนเนื้อหา</button>

		<p id="text">ข้อความ</p>
		
		<script>
			function myFunction() { 
				document.getElementById("text").innerHTML = "Hello JavaScript!";
			}
		</script>

	</body>
</html>

ใช้ JavaScript เปลี่ยนสไตล์ของ CSS

ใช้ Style fontSize Property เพื่อเปลี่ยนขนาดตัวอักษร

ใช้ Style Color Property เพื่อเปลี่ยนสี

ใช้ Style backgroundColor Property เพื่อเปลี่ยนสีพื้นหลัง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML ต้องมี JavaScript</title>
	</head>
	<body>
		<h1>JavaScript</h1>
		
		<p id="text">ข้อความ</p>
		
		<button type="button" onclick="myFunction()">กดปุ่มเพื่อเปลี่ยนเนื้อหา</button>
		
		<script>
			function myFunction() {
			  document.getElementById("text").style.fontSize = "36px";
			  document.getElementById("text").style.color = "red";
			  document.getElementById("text").style.backgroundColor = "blue";        
			}
		</script>
	</body>
</html>

วิธีเรียกใช้ JavaScript ใน HTML

สามารถทำได้ด้วย 2 วิธี

1.เขียนในแท็ก <script>

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML ต้องมี JavaScript</title>
	</head>
	<body>
		<h1>JavaScript</h1>
		
		<p id="text">ข้อความ</p>
		
		<button type="button" onclick="myFunction()">กดปุ่มเพื่อเปลี่ยนเนื้อหา</button>
		
		<script>
			function myFunction() {
			  document.getElementById("text").style.fontSize = "36px";        
			}
		</script>
	</body>
</html>

2.เรียกใช้งานไฟล์ JavaScript จากภายนอก

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML ต้องมี JavaScript</title>
	</head>
	<body>
		<h1>JavaScript</h1>
		
		<p id="text">ข้อความ</p>
		
		<button type="button" onclick="myFunction()">กดปุ่มเพื่อเปลี่ยนเนื้อหา</button>
		
		<script src="main.js"></script>
	</body>
</html>

จากตัวอย่างผมได้เขียนไฟล์ JavaScript แยกไว้ชื่อ main.js และใช้แอตทริบิวต์ src เรียกไฟล์ main.js มาใช้งาน สะดวกดีครับ เขียนที่เดียว ใช้ได้ทั้งเว็บไซต์

Lv.17 HTML class

HTML การใช้งาน class แอตทริบิวต์ คือการกำหนดคลาสให้กับ HTML อิลิเมนต์ ให้มีคลาสเหมือนกัน เวลาแก้ไขคุณสมบัติของคลาส ก็แก้ที่เดียว ใช้ได้ทั้งเว็บ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML การใช้งาน class แอตทริบิวต์</title>
		<style>
			.color-red {
				color: red;
			}
		</style>
	</head>
	<body>
		
		<h1 class="color-red">หัวเรื่อง</h1>
		<p class="color-red">พารากราฟ</p>
		
	</body>
</html>

จากตัวอย่าง เราได้กำหนดให้แท็ก h1 และแท็ก p มีคลาสชื่อ color-red และได้กำหนดคุณสมบัติของคลาส color-red ให้มีตัวอักษรสีแดง เราสามารถใช้คลาส color-red กับอิลิเมนต์อื่นๆได้ ถ้าต้องการให้อิลิเมนต์นั้นมีตัวอักษรสีแดง ก็แค่เพื่อคลาส color-red เข้าไปที่อิลิเมนต์นั้นๆ เช่น

<h2 class="color-red">หัวเรื่อง h2</h2>
<div class="color-red">กล่องว่างเปล่า</div>

HTML การใช้งาน class ต้องเขียน CSS

การกำหนดคุณสมบัติต่างๆ ต้องเขียนเป็นภาษา CSS นะครับ

ตัวอย่าง

.color-red {
  color: red;
}

.bg-blue {
  background-color: blue;
}

การใช้งานคลาส ช่วยลดเวลาการเขียนคุณสมบัติที่เหมือนๆกัน เพราะเราเขียนชุดเดียว แต่ใช้ได้หลายๆที สะดวกขึ้นเยอะเลย

Lv.15 HTML Lists

HTML การใช้งาน Lists

  • ส้ม
  • มะละกอ
  • มะม่วง
  • กล้วย
  1. ส้ม
  2. มะละกอ
  3. มะม่วง
  4. กล้วย

HTML การใช้งาน Lists แบบมีลำดับ

ตัวอย่าง

<ol>
	<li>ส้ม</li>
	<li>มะละกอ</li>
	<li>มะม่วง</li>
	<li>กล้วย</li>
</ol>

HTML การใช้งาน Lists แบบไม่มีลำดับ

<ul>
	<li>ส้ม</li>
	<li>มะละกอ</li>
	<li>มะม่วง</li>
	<li>กล้วย</li>
</ul>

Lv.14 HTML ตาราง

HTML ตาราง ช่วยให้เราสามารถจัดเรียงข้อมูลเป็นแถวและคอลัมน์ได้

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML ตาราง</title>
	</head>
	<body>
		<table>
			<tr>
				<th>ชื่อ-นามสกุล</th>
				<th>ที่อยู่</th>
				<th>เบอร์โทรศัพท์</th>
			</tr>
			<tr>
				<td>นาย สมชาย ใจดี</td>
				<td>จ.น่าน</td>
				<td>0812345678</td>
				</tr>
			<tr>
				<td>นางสาว สมใจ เอาเก่ง</td>
				<td>จ.ระยอง</td>
				<td>0855555555</td>
			</tr>
			<tr>
				<td>นาง แก้ว นมดี</td>
				<td>จ.แพร่</td>
				<td>0975623145</td>
			</tr>
		</table>
	</body>
</html>

HTML ตาราง เพิ่ม Cells

ในแต่ละเซลล์ของตารางสามารถกำหนดได้โดยเพิ่มแท็ก <td> ลงไปในตาราง ข้อมูลที่สามารถใส่ลงไปในแท็ก <td> ได้นั้น มีทั้งข้อความ, รูปภาพ, Lists, ตารางและอื่นๆ

ตัวอย่าง

<table>
	<tr>
		<td>ชื่อ</td>
		<td>ที่อยู่</td>
		<td>เบอร์โทรศศัพท์</td>
	</tr>
</table>

HTML ตาราง เพิ่ม Rows

เพิ่มแถวได้โดยใช้แท็ก <tr>

ตัวอย่าง

<table>
	<tr>
		<th>ชื่อ-นามสกุล</th>
		<th>ที่อยู่</th>
		<th>เบอร์โทรศัพท์</th>
	</tr>
	<tr>
		<td>นาย สมชาย ใจดี</td>
		<td>จ.น่าน</td>
		<td>0812345678</td>
	</tr>
</table>

HTML ตาราง เพิ่มส่วนหัวของตาราง

เพิ่มแท็ก <th> ไว้บนสุดของตาราง

ตัวอย่าง

<table>
	<tr>
		<th>ชื่อ-นามสกุล</th>
		<th>ที่อยู่</th>
		<th>เบอร์โทรศัพท์</th>
	</tr>
</table>

เพิ่มเส้นขอบให้ตาราง

ตัวอย่าง

<head>
	<style>
		table, th, td {
			border: 1px solid black;
		}
    </style>
</head>

สีเส้นขอบ

th, td {
	border-color: blue;
}

การใช้งานต้องดูลำดับความสัมพันธ์ของ <tr> และ <td> ด้วย ส่วนมากๆแล้วการใช้งานทั่วๆ จะเป็นการดึงข้อมูลต่างๆ มาจากฐานข้อมูลเพราะถ้าให้เขียนเองทุกช่องก็ไม่ไหวครับ

Top