Lv.1 CSS รู้จักป่ะ

CSS ย่อมาจาก Cascading Style Sheet ซึ่งเป็นภาษาที่ใช้จัดการรูปแบบเอกสารของ HTML ให้เว็บไซต์มี รูปร่าง หน้าตาสวยงาม สีสัน รูปแบบ ขนาด เส้น และอื่นๆอีกมากมาย

CSS และ HTML

เว็บไซต์ต่างๆที่ออนไลน์อยู่บนโลกอินเตอร์เน็ตนั้น มีพื้นฐานมาจากภาษา HTML ทั้งนั้น แต่ถ้าหากเราต้องการความสวยความงามให้เว็บเพจ และสามารถปรับแต่งแก้ไขรูปแบบการแสดงผลให้ใช้งานได้ทุกอุปกรณ์ละก็ หนีไม่พ้น CSS แน่นอน ยังไงก็ต้องใช้ CSS อยู่แล้ว

จุดเด่น

  • ทำแสงและเงา
  • เปลี่ยนภาพพื้นหลังหรือตัวอักษรตามขนาดหน้าจอ
  • สามารถทำให้รูปสีเหลี่ยมกลายเป็นมุนมนได้
  • สามารถกำหนดความโปร่งแสง(Opacity) โดยสามารถแสดงภาพเป็นจางๆ หรือแบบทึบ ปรับได้ตามต้องการ
  • สามารถสร้างอนิเมชั่นต่างๆได้
  • และอื่นๆ อีกมากมาย

เปรียบเทียบเว็บเพจที่ใช้สไตล์กับไม่ใช้สไตล์

ก่อนใช้

Not use CSS
Not use CSS

หลังใช้

Use CSS
Use CSS

ลงมือเขียน CSS สักที

ผมจะไม่เขียน CSS ร่วมกับ HTML นะครับ ขอแยกคนละไฟล์เลยละกัน ง่ายต่อการปรับปรุงแก้ไข

ตัวอย่าง

* {
	box-sizing: border-box;
}

body {
	font-size: 16px;
}

h1 {
	color: red;
}

p {
	font-size: 16px;
}

div {
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

กำหนดแท็ก h1 มีอักษรสีแดง

กำหนดให้แท็ก p มีขนาดตัวอักษร 16 พิกเซล

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.18 HTML Id

HTML Id นั้นเหมือนเลขบัตรประชาชนครับ ใช้ชื่อ Id ซ้ำไม่ได้ หนึ่งอิลิเมนต์มีชื่อ Id ได้แค่หนึ่งชื่อเท่านั้น

ตัวอย่าง

<h1 id="h1">หัวเรื่อง</h1>

HTML Id การใช้งานที่เหมาะสม

คำแนะนำจากการใช้งานจริง ตั้ง Id ให้กับอิลิเมนต์ที่อยู่ชั้นบนสุด

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML การใช้งาน Id</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			* {
				box-sizing: border-box;
			}
			#wrap {
				margin: auto;
				width: 100%;
				height: 100vh;
				background-color: blue;
			}
			.left {
				margin: auto;
				width: 75%;
				float: left;
				height: 500px;
				background-color: green;
			}
			.right {
				margin: auto;
				width: 25%;
				float: left;
				height: 400px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="left">
				<h1>Left Side</h1>
				<p>พารากราฟ</p>
			</div>
			<div class="right">
				<h2>Right Side</h2>
			</div>
		</div>
	</body>
</html>

จากตัวอย่างผมตั้ง Id wrap ให้ <div> เพื่อห่อทั้ง 2 กล่อง ซ้ายและขวา การใช้งานก็ประมาณนี้ครับ

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>

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> ด้วย ส่วนมากๆแล้วการใช้งานทั่วๆ จะเป็นการดึงข้อมูลต่างๆ มาจากฐานข้อมูลเพราะถ้าให้เขียนเองทุกช่องก็ไม่ไหวครับ

Lv.13 HTML Links

HTML Links ลิงค์มีอยู่ในทุกๆหน้าของเว็บไซต์ ทำให้เราสามารถคลิกจากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้

Syntax:

<a href="url">=ชื่อลิงค์</a>

HTML Links Target Attribute

คือการกำหนดตำแหน่งที่จะเปิดลิงค์นั่นเอง

  • _self – ค่าเริ่มต้น เปิดในหน้านั้นๆ (ถ้าไม่ได้กำหนดเลย จะใช้ค่านี้นะ)
  • _blank – เปิดในหน้าต่างใหม่หรือแท็บใหม่
  • _parent – เปิดในกรอบหลัก
  • _top – เปิดแบบเต็มหน้าต่าง

ตัวอย่าง

<li><a href="contact.html" target="_blank ">Contact</a></li>

ทำรูปภาพให้เป็นลิงค์

สามารถทำได้โดยการใช้แท็ก <a> ไปครอบแท็ก <img>

ตัวอย่าง

<a href="www.nkaub.com"><img src="nkaub.jpg" alt="nkaub logo" style="width:50px;height:50px;"></a>

Lv.12 HTML CSS

HTML เรียกไฟล์ CSS มาใช้งานนั้น ก็เพื่อการจัดรูปแบบเลย์เอาต์ของหน้าเว็บเพจ เพิ่ม สี ขนาด เส้น อักษร CSS ช่วยประหยัดเวลาทำงานได้มาก สามารถควบคุมเลย์เอาต์ของหน้าเว็บหลายๆ หน้าพร้อมกันได้ โดยที่เราปรับแก้แค่ที่เดียว แต่ใช้ได้ทั้งเว็บไซต์

HTML เรียกไฟล์ CSS มาใช้งาน

สามารถเรียกใช้งาน CSS ได้ 3 วิธี

  • Inline เขียนในแท็กนั้นๆเลย โดยใช้แอตทริบิวต์ style
  • Internal ใช้อิลิเมนต์ <style> ใน <head>
  • External เรียกไฟล์ CSS จากที่อื่น หรือ อยู่ในโฟลเดอร์อื่นๆ มาใช้งาน โดยใช้อิลิเมนต์ <link> ใน <head>

การใช้งาน CSS แบบ Inline

การเขียน CSS แบบนี้ไม่แนะนำครับ เพราะแก้ไขงานลำบาก ใช้เฉพาะจำเป็นจริงๆ เท่านั้น

ตัวอย่าง

<h1 style="color:blue;">หัวเรื่อง</h1>

<p style="color:red;">ย่อหน้า</p>

การใช้งาน CSS แบบ Internal

การเขียน CSS แบบนี้ก็ไม่แนะนำเหมือนกันครับ เพราะแก้งานก็ยากอยู่

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML มาใช้ CSS เถอะ</title>
		<style>
			body {
				background-color: blue;
			}
			h1 {
				color: red;
			}
			p {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>หัวเรื่อง</h1>
		<p>ย่อหน้า</p>
	</body>
</html>

การใช้งาน CSS แบบ Internal

การเขียน CSS แบบนี้แนะนำที่สุดเลยครับ แก้ง่ายใช้ได้ทั้งเว็บไซต์

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML มาใช้ CSS เถอะ</title>
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<h1>หัวเรื่อง</h1>
		<p>ย่อหน้า</p>
	</body>
</html>

ในตัวอย่างเรียกไฟล์ CSS ชื่อ style ที่อยู่ในโฟลเดอร์เดียวกันกับไฟล์นี้

Top