บทความนี้เป็นส่วนหนึ่งของซีรีส์ Full-Stack PHP 8 + Bootstrap 5 + MySQL — สร้างเว็บไซต์แบบ Full Stack ตั้งแต่พื้นฐานจนใช้งานได้จริง พร้อมสร้างและเผยแพร่เว็บไซต์ Portfolio ของตนเอง (เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD.) — ตอนที่ 4/10
HTML ย่อมาจาก HyperText Markup Language เป็นภาษา Markup (ไม่ใช่ภาษาโปรแกรม) ใช้กำหนด โครงสร้างและเนื้อหาของหน้าเว็บ ด้วยตัวกำกับที่เรียกว่า Tag เขียนในรูปแบบ <tag>…</tag> ส่วน CSS (Cascading Style Sheets) ใช้ ตกแต่งหน้าตาให้สวยงาม ทั้งสองทำงานคู่กัน คือ HTML สร้างโครง แล้ว CSS แต่งหน้าตา
ส่วนที่ 1 โครงสร้างการแสดงผลหน้าเว็บ (HTML)
โครงสร้างพื้นฐาน 5 Tag หลัก
| Tag | ความหมาย |
|---|---|
| !DOCTYPE html | ใช้บอกเอกสารว่าเอกสารนี้เป็น HTML5 |
| html | บอกว่าเนื้อหาภายใต้ tag นี้เป็น html |
| head | ส่วนหัว |
| title | ชื่อของเว็บซึ่งจะปรากฏบน Tab ของ Browser |
| body | ส่วนของการแสดงผล |
โครงสร้างของ HTML Tag
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
Content
</body>
</html>🧪 Workshop 1: สร้างไฟล์ HTML แรก
สร้างไฟล์ HTML ที่สามารถเปิดผ่านโปรแกรม Web Browser ได้ โดยกำหนดให้ตั้งชื่อไฟล์ index.html
วิธีทำ
- คลิกขวาที่ Desktop > New folder > ตั้งชื่อ Workshop
- เปิดโปรแกรม VS Code เลือกเมนู File > Open Folder > แล้วเลือก Desktop > Workshop
- ที่เมนู Explorer ใน VS Code คลิกขวาแล้วเลือก New File จากนั้นตั้งชื่อ index.html แล้ว Enter
- ใน VS Code จะมีตัวช่วยอยู่ ที่ไฟล์ index.html พิมพ์ htm จะมีตัวช่วยแสดงขึ้นมาเลือก html:5 ได้เลย
- ลองแก้ title ให้เป็นชื่อตัวเอง เช่น …… Portfolio
- ทดสอบ Double Click เปิดไฟล์ index.html ด้วย Web Browser
หมายเหตุ: Web Server บนเครื่อง Server มักจะถูกตั้งค่าให้อ่านไฟล์ที่มีการตั้งชื่อว่า index ก่อนเสมอ
Tag เบื้องต้นภายใต้ส่วนของ body
การกำหนดกรอบพื้นที่ทำงาน / กล่องจัดกลุ่มเนื้อหา
tag คือ section หรือ div โดยปกติจะนิยมใช้ div มากกว่า ใช้เพื่อแบ่งส่วนของเนื้อหาให้ชัดเจน สามารถแบ่งได้ทั้งแบ่งส่วนหลักและส่วนย่อย
ตัวอย่าง
<div>
<h1>ข้อมูลส่วนตัว</h1>
</div>
<section>
<h1>ข้อมูลส่วนตัว</h1>
</section>
หัวเรื่อง (Heading)
tag คือ h แล้วตามด้วยขนาด โดยหัวเรื่องจะมีขนาดตั้งแต่ h1 จนถึงขนาด h6 โดย h1 จะมีขนาดใหญ่ที่สุดและจะเล็กลงเรื่อย ๆ โดยข้อความจะเป็นตัวหนาอัตโนมัติ
ตัวอย่าง
<h1>หัวเรื่องหลัก</h1>
<h2>คำอธิบายหัวเรื่อง</h2>
<h3>หัวเรื่องย่อย</h3>
ย่อหน้า (Paragraph)
tag คือ p โดยปกติจะใช้แสดงข้อความเนื้อหาทั่วไป มักใช้ในการแบ่งย่อหน้าภายใต้กรอบพื้นที่การทำงาน (tag div) อีกทีหนึ่ง
ตัวอย่าง
<p>
นี่คือย่อหน้าที่หนึ่ง สวัสดีครับ นี่คือเว็บแนะนำ......</p>
<p>นี่คือย่อหน้าที่สอง ความชอบของผม......</p>
รูปภาพ (Image)
tag คือ img ใช้เพื่อแสดงผลรูปภาพลงในหน้าเว็บโดยสามารถใช้ได้ทั้ง link รูปภาพผ่าน URL ภายนอกหรือไฟล์ที่อยู่ภายในเว็บเดียวกันก็ได้ โดยให้ระบุตำแหน่งของรูปภาพที่ attribute src
ตัวอย่าง
<img src="https://example.com/images/img1.png">
<img src="./images/profile1.png">
<img src="profile1.png">
ลิงก์ (Link)
tag คือ a ใช้สำหรับเชื่อมโยงไปยังหน้าหรือเว็บไซต์อื่น โดยสามารถกำหนด attribute href เพื่อกำหนดปลายทางที่จะไปและ attribute target เพื่อให้เปิดใน tab ใหม่ได้ และเมื่อครอบ tag นี้เนื้อหาที่อยู่ภายใต้จะเป็นการลิงค์ทั้งหมด
ตัวอย่าง
<a href="https://example.com" target="_blank">
คลิกที่นี่เพื่อไปยัง ...
</a>
<a href="./award.html">ผลงานและรางวัล</a>
รายการ (List)
tag มี ol กับ ul โดยแต่ละข้อจะใช้ li ใช้เพื่อแสดงผลเป็นรายการลำดับ และนอกจากนี้สามารถกำหนด attribute type เพื่อให้แสดง bullet หรือตัวเลขในรูปแบบอื่น ๆ ได้
ตัวอย่าง
<ol>
<li>อันดับที่ 1</li>
<li>อันดับที่ 2</li>
</ol>
<ul>
<li>HTML</li>
<li>PHP</li>
</ul>
การจัดรูปแบบอักษร
- b – ตัวหนา
- i – ตัวเอียง
- u – ขีดเส้นใต้
- br – บังคับขึ้นบรรทัดใหม่
โดยสามารถใช้งานซ้อนกันได้ ไม่จำเป็นต้องปิดอันใดอันหนึ่งก่อน แต่สุดท้ายต้องปิดให้ครบ
ตัวอย่าง
<b>สำคัญ</b>
<i><u>หมายเหตุ:</u> นี่คือตัวอย่าง</i>
<br />
<b>ขึ้นบรรทัดใหม่แล้ว</b>
ส่วนที่ 2 การตกแต่งหน้าตาด้วย CSS
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้กำหนดรูปแบบและการแสดงผลของหน้าเว็บ HTML ใช้ตกแต่งสีสัน ฟอนต์ ระยะห่าง การจัดวาง การทำขอบต่าง ๆ รวมถึง animation ด้วย
รูปแบบการเขียน CSS
property: value;
เช่น
color: blue;
color คือ property
blue คือ ค่าที่กำหนด
รูปแบบการใช้งานมี 3 แบบ
- inline ใช้เฉพาะจุดมีผลภายใต้ tag ที่มีการกำหนด
- internal ใช้กำหนดภายในไฟล์นั้น ๆ
- external กำหนดจากไฟล์ภายนอกและเรียกใช้งานที่แต่ละไฟล์
โดยความสำคัญเรียงจาก inline > internal > external
โดยใน Workshop จะใช้แบบ inline และแบบเรียกใช้ class สำเร็จรูป
แบบ Inline
เขียนใน attribute style ของ tag นั้นโดยตรง เหมาะกับการแต่งจุดเดียว ใส่หลายค่าได้โดยคั่นด้วย ;
<p style="color: red;">ข้อความสีแดง</p>
<div style="background-color: green; color: white; padding: 10px;">
กล่องสีเขียว
</div>
แบบเรียกใช้ class
เรียกใช้ที่ tag ของ html โดยการใส่ attribute class ที่ tag นั้น ๆ โดยส่วนใหญ่ tag มาตรฐานเกือบทั้งหมดสามารถเรียกใช้ class ได้ยกเว้นในส่วนของ head
ตัวอย่าง
<head>
<style>
.box1 {
background-color: green;
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">กล่องนี้สีเขียว</div>
</body>Property ที่นิยม
| Property | ความหมาย |
|---|---|
| color | สีของตัวอักษร (รองรับ HEX , rgb) |
| background-color | สีของพื้นหลัง (รองรับ HEX , rgb , rgba) |
| padding | ระยะห่างจากด้านในของกรอบ (px) |
| margin | ระยะห่างจากด้านนอกของกรอบ (px) |
| text-align | จัดข้อความ (left , center , right , justify) |
| font-size | ขนาดตัวอักษร (pt , px) |
| border-radius | ความมนของขอบ (pt , px) |
🧪 Workshop 2: ประกอบและตบแต่งหน้าเว็บด้วย Basic HTML และ CSS
จากไฟล์ที่สร้างก่อนหน้าให้ทำต่อในส่วน body โดยเพิ่มการแนะนำตัวคร่าว ๆ ความสามารถและความชอบ โดยอย่างน้อยต้องมี หัวเรื่อง ชื่อตัวเอง ย่อหน้าแนะนำตัว รูปภาพ 1-2 รูป รายการภาษาโปรแกรมที่ใช้ในการพัฒนาหรือสิ่งที่ชอบ
วิธีทำ
- ในส่วนของ body เดิมให้เพิ่ม div ในส่วนของการแนะนำตัว ความสนใจ ความชอบ หรือสิ่งต่าง ๆ จากที่ได้เรียนรู้ด้านบน
- ทดลองดูผลลัพธ์หลังจาก Code เสร็จแล้ว แก้ไขได้ตามที่พอใจในระดับนึงแต่ไม่ต้องสวยงามมาก เพื่อที่จะไปใช้ class สำเร็จรูปในบทถัดไป
โจทย์พิเศษ: เปลี่ยนสี background ของทั้งหน้า
