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.16 HTML Block และ Inline

การแสดงผลของ HTML Block และ Inline นั้นคือเรียงต่อกัน หรือขึ้นบรรทัดใหม่

HTML Block และ Inline มีแท็กอะไรบ้าง

HTML Block มีดังต่อไปนี้

<fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> และ <video>

การใช้งานจริง HTML Block

ถ้าเราใช้แท็ก <h1>-<h6> แบบนี้

<body>
	<h1>หัวเรื่อง h1</h1><h2>หัวเรื่อง h2</h2><h3>หัวเรื่อง h3</h3><h4>หัวเรื่อง h4</h4><h5>หัวเรื่อง h5</h5><h6>หัวเรื่อง h6</h6>
</body>
<!-- คงไม่มีใครเขียนแบบนี้นะ แค่ยกตัวอย่างเฉยๆนะ -->

ต่อให้เราเขียนติดกันแบบนี้ การแสดงผลก็ขึ้นบรรทัดใหม่ให้เสมอ เพราะแท็ก h1-h6 มีค่า display เป็น block เพราะเป็นค่าเริ่มต้นอยู่แล้ว แต่ถ้าเราอยากเปลี่ยนเป็นการแสดงผลบรรทัดเดียวก็ให้เปลี่ยน display เป็น inline

h1,
h2,
h3,
h4,
h5,
h6 {
	display: inline;
}

HTML Inline มีดังต่อไปนี้

<a>, <abbr>,<acronym>, <b>,<bdo>,<big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>

การใช้งานจริง HTML Inline

<a href="#">nkaub 1</a>
<a href="#">nkaub 2</a>
<a href="#">nkaub 3</a>
<a href="#">nkaub 4</a>

เราเขียนแท็ก a คนละบรรทัดก็จริง แต่การแสดงผลเป็นบรรทัดเดียวนะครับ

ถ้าเราต้องการให้ขึ้นบรรทัดใหม่ ต้องเปลี่ยน display เป็น block

a {
  display: block;
}

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>
Top