สร้าง Web page ด้วยภาษา HTML และ CSS

Web Development 19 กรกฎาคม พ.ศ. 2565 1,030

Home / Articles / 17

HTML (Hypertext Markup Language) เป็นภาษาที่ใช้เขียน Hypertext Markup คือ การสร้างโครงสร้างของข้อความ และ hypertext ซึ่งจะไม่เหมือนภาษาอื่นๆ ที่สามารถเขียน logic เข้าไปได้ เช่น Javascripts, C, C++ หรือ Python แต่ HTML เป็นเพียงภาษาที่กำหนดโครงสร้างของเอกสารรูปแบบหนึ่งเท่านั้น

การจะจัดรูปแบบของ HTML จำเป็นต้องใช้ภาษา CSS (Cascading Style Sheets) ซึ่งเป็นภาษาในกลุ่มที่เรียกว่า Style Sheets

โครงสร้างพื้นฐานของ HTML

HTML จะประกอบด้วย สองส่วน คือ ส่วน <head> ที่มีไว้สำหรับเรียกใช้ไฟล์ต่างๆ เช่น Javascripts และ CSS ซึ่งจะไม่แสดงผลบนหน้าเว็บ ส่วนที่จะแสดงผลบนหน้าเว็บจะอยู่ในส่วน <body> เราลองมาดูตัวอย่างกัน

<html>
    <head>
        <title>ตัวหนังสือใน title จะแสดงบน tab bar ของเบราว์เซอร์</title>
    </head>
    <body>
        ตัวหนังสือ และข้อมูลต่างๆ ที่ถูกเขียนลงใน body จะถูกแสดงบน web page
    </body>
</html>

Tags พื้นฐานใน HTML

<p>นี่คือตัวอย่างการสร้าง paragraphs หรือข้อความหนึ่งย่อหน้า</p>

<h1>ส่วนหัวแบบที่ 1</h1>

<h2>ส่วนหัวแบบที่ 2</h2>

<h3>ส่วนหัวแบบที่ 3</h3>

<h4>ส่วนหัวแบบที่ 4</h4>

<u>ตัวขีดเส้นใต้</u>
<i>ตัวเอียง</i>
<b>ตัวหนา</b>
<a href="page.html">HyperLinks</a>
<a href="https://google.com">External HyperLinks</a>

ตัวอย่างการใช้งาน

ตัวอย่างไฟล์ .html ที่ประกอบไปด้วย <h1>, <p> และ <b>

<html>
    <head>
        <title>หัวข้อ</title>
    </head>
    <body>
       <h1>ข้อความส่วนหัว</h1>
       <p>ย่อหน้า <b>ตัวหนา</b> </p>
    </body>
</html>

สร้างรายการ (Lists)

ใน HTML เราสามารถสร้างรายการของข้อมูลต่างๆ ได้ ผ่าน tag ul และ ol ซึ่ง ul จะเป็นการแสดงรายการแบบไม่มีลำดับ 123 หรือ abc ต่างจาก ol ที่จะแสดงลำดับของรายการใน tag และสามารถตั้งค่าได้

ตัวอย่างการใช้งาน ul

<ul>
    <li>abc</li>
    <li>def</li>
</ul>

ตัวอย่างการใช้งาน ol ให้แสดงลำดับ 1234

<ol>
    <li>abc</li>
    <li>def</li>
<ol>

ตัวอย่างการตั้งค่า ol ให้แสดงลำดับ ABCD แทนตัวเลข

<ol type="A">
    <li>abc</li>
    <li>def</li>
<ol>

ใส่รูปภาพลงใน HTML

เราสามารถใส่รูปภาพเข้าไปใน HTML ได้ โดยคำสั่งดังนี้ โดยเราสามารถใส่ความกว้างความสูงเป็น px หรือ % ก็ได้ หรือหากเราไม่กำหนดความกว้างความสูงของภาพ รูปก็จะแสดงผลเท่ากับขนาดดั้งเดิมของรูป

<img src="ที่อยู่รูปภาพ" alt="ตัวหนังสือที่จะแสดงเมื่อภาพไม่โหลด" width="ความกว้าง" height="ความสูง">
<img src="images/banner.jpg" alt="This is banner.jpg" width="800" height="100">
<img src="images/banner.jpg" alt="This is banner.jpg" width="100%">

สร้างตาราง

ชื่อ	นามสกุล	อายุ
ซันนี่	จิรกิตติ์	21
เจมส์มี่	พัทยา	25

วิธีการสร้างตารางใน HTML เราก็จะสร้าง tag table ขึ้นมา จากนั้นแต่ละแถวของตารางจำเป็นจะต้องอยู่ใน tag ที่ชื่อว่า tr (ย่อมาจาก table row) และคอลัมน์ต่างๆ เช่น td และ th ซึ่งสองอันนี้แตกต่างกันที่ th จะนิยมใช้เป็นแถวสำหรับแสดงหัวข้อตาราง และ td นิยมใช้เป็นแถวสำหรับเนื้อหาของตาราง และทั้งสองอันนี้จะอยู่ใน tr อีกที ตัวอย่างดังนี้

<table>
    <tr>
        <th>ชื่อ</th>
        <th>นามสกุล</th>
        <th>อายุ</th>
    </tr>
    <tr>
        <td>ซันนี่</td>
        <td>จิรกิตติ์</td>
        <td>21</td>
    </tr>
    <tr>
        <td>เจมส์มี่</td>
        <td>พัทยา</td>
        <td>25</td>
    </tr>
</table>

สร้างฟอร์มสำหรับส่งข้อมูล

หากต้องการจะส่งข้อมูลไปยังหน้าเว็บต่างๆ (หากมี Back-End) เช่น การเข้าสู่ระบบ การสมัครสมาชิก เราจะส่งข้อมูลโดยใช้ tag form ซึ่งจะมีโครงสร้างดังนี้

<form action="/login" method="get">
    Username: <input type="text" name="username" required><br>
    Password: <input type="password" name="password"><br>
    <input type="submit" value="Login">
</form>

ซึ่งผมจะมาอธิบายส่วนต่างๆ ส่วนแรก action คือ url ของหน้าที่เราจะรับข้อมูลของฟอร์มนี้ ส่วน method จะมีสองอย่างคือ get และ post

GET คือการส่งข้อมูลในฟอร์มไปยังหน้าต่างๆ ผ่านทาง URL ผลลัพท์ก็จะได้ /login?username=admin&password=123

POST คือการส่งข้อมูลในฟอร์มไปยังหน้าต่างๆ โดยข้อมูลจะไม่แสดงใน URL เหมือน GET

และประเภทของ Input หรือ input type จะมีหลายอย่าง ที่เราใช้คือ text สำหรับรับตัวอักษรเข้ามา และ password สำหรับรับรหัสผ่านเข้ามาโดยจะไม่แสดงสิ่งที่พิมพ์เข้าไปในช่อง input นอกจากนี้ยังมีประเภทอื่นๆ อีก เช่น

submit คือ ปุ่มที่ส่งข้อมูลในฟอร์มไปยังหน้าต่างๆ
checkbox คือ input type ที่ใช้สำหรับรับ check หรือ uncheck
date คือ input type ที่ใช้สำหรับรับวันที่
email คือ input type ที่ใช้สำหรับรับอีเมล์
file คือ input type ที่ใช้สำหรับรับไฟล์
hidden คือ input type ที่ใช้สำหรับใส่ข้อมูล และจะถูกส่งไปกับฟอร์มด้วย แต่จะไม่แสดงให้ผู้ใช้เห็น
number คือ input type ที่ใช้สำหรับรับตัวเลขเท่านั้น
radio คือ input type ที่ใช้สำหรับเลือกตัวเลือกต่างๆ
range คือ input type ที่ใช้สำหรับรับค่าระหว่างจุดสองจุด (slider)
reset คือ input type ที่ใช้รีเซ็ตฟอร์ม
tel คือ input type ที่ใช้สำหรับรับเบอร์โทรศัพท์
url คือ input type ที่ใช้สำหรับรับ URL

ส่วน reqired attributes เราจะใส่เข้าไปใน tag input ก็ต่อเมื่อ เราต้องการให้ HTML แจ้งเตือนผู้ใช้ ให้ใส่ข้อมูลลงใน input ดังกว่าวก่อนจึงจะสามารถกดปุ่ม submit ได้

Select / Options

Select คือ Tag ที่ให้ผู้ใช้สามารถเลือกตัวเลือกต่างๆ และสามารถส่งค่าที่อยู่ใน value attributes ไปยัง form ได้

<select name="Gender">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

เรายังสามารถจัดกลุ่ม options ต่างๆ โดยใช้ optgroup ได้ ดังนี้

<select name="Products">
    <optgroup label="Admin">
        <option value="admin">admin</option>
        <option value="tester">tester</option>
    </optgroup>
    <optgroup label="Members">
        <option value="user01">user01</option>
        <option value="user02">user02</option>
    </optgroup>
</select>

โครงสร้างพื้นฐานของ CSS

การใช้งาน CSS ร่วมกับ HTML นั้น จำเป็นต้องเพิ่มที่อยู่ของไฟล์ .css ลงในส่วน head ของ .html ตัวอย่างเช่น ต้องการเชื่อมต่อ stylesheet ที่ชื่อว่า style.css ที่อยู่ใน folder css/

<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>    
    </body>
</html>

CSS Selector

ทั้งสองภาษาจะมี attribute ของ elements ไว้สำหรับอ้างอิง class จาก HTML ไปหา CSS ตัวอย่างเช่น ต้องการจะอ้างอิง div elements ไปหา class ที่ชื่อว่า "box" ไฟล์ .html ก็จะต้องสร้าง div ขึ้นมา โดยใส่ class attribute ว่า "box"

<div class="box"></div>

ในไฟล์ .css หากต้องการให้ class เจาะจง เฉพาะ div elements เท่านั้น (คำสั่ง margin คือการ เพิ่มช่องว่างจากขอบ โดยตัวเลขสองชุดคือ แกน y และ x)

div.box {
    margin: 0 50px;
}

หากต้องการให้ class แสดงผลกับ elements ใดๆก็ได้ ก็จะเขียนแบบนี้

.box {
    margin: 0 50px;
}

หากใช้แบบที่สอง ก็จะหมายความว่า เราจะสามารถใช้ได้ทุก elements ด้วยการใส่ class attribute ว่า "box" เช่น

<p class="box">This is box on p!</p>
<a href="" class="box">This is box on hyperlink!</a>

แต่หากต้องการให้มีผลเฉพาะกับ div เท่านั้น จะใส่ชื่อ tag เข้าไปข้างหน้าจุด ดังนี้

div.box {
    margin: 0 50px;
}

นอกเหนือจาก class attribute ก็ยังมี id attribute ที่เราสามารถใช้อ้างอิงได้ ตัวอย่างเช่น

<p id="box">This is box on p!</p>

ในไฟล์ .css ก็จะใช้เครื่องหมาย "#" ในการอ้างอิงแทนจุด "."

#box {
    margin: 0 50px;
}

ซึ่ง CSS ยังสามารถ styling "child elements" ได้ด้วย ตัวอย่าง

.box .item {
    padding: 10px;
}

หมายความว่า class "item" ที่เรากำหนด จะแสดงรูปแบบก็ต่อเมื่อ อยู่ข้างใน class "box" เท่านั้น

<div class="box">
    <div class="item">
    </div>
</div>

หรือต้องการให้ style เข้าเงื่อนไข ต่อเมื่อมีสอง classes นี้อยู่ด้วยกัน ใน element เดียว ตัวอย่าง

.box.bigtext {
    font-size: 17px;
}

เวลาเรียกใช้จะนำสอง classes มารวมกันคำสั่ง font-size ถึงจะทำงาน ดังนี้

<div class="box bigtext">
</div>

คำสั่งพื้นฐานใน CSS

คำสั่ง	ตัวอย่างการใช้งาน	ความหมาย
margin	margin: 15px 10px 20px 10px;	เพิ่มระยะจากขอบของ elements ออกไปหาด้านนอก (บน 15px, ขวา 10px, ล่าง 20px, ซ้าย 10px)
padding	padding: 15px 10px 20px 10px;	เพิ่มระยะจากขอบด้านใน elements (บน 15px, ขวา 10px, ล่าง 20px, ซ้าย 10px)
background	background: #222;	เปลี่ยนสีพื้นหลังของ elements เป็นสี #222
background	background: url('https://sunny420x.xyz/img/icon.png');	เปลี่ยนภาพพื้นหลังของ elements เป็นภาพ "https://sunny420x.xyz/img/icon.png"
width	width: 500px;	กำหนดความกว้างของ elements ให้มีขนาดกว้าง 500px
height	height: 500px;	กำหนดความสูงของ elements ให้มีความสูง 500px
width	width: 20%;	กำหนดความกว้างของ elements ให้มีขนาดกว้าง 20%
height	height: 20%;	กำหนดความสูงของ elements ให้มีความสูง 20%
display	display: block;	การแสดงผลของ elements หรือ child elements ให้จัดเรียง โดยให้อยู่คนละบรรทัด
display	display: inline;	การแสดงผลของ elements หรือ child elements ให้จัดเรียงอยู่ในบรรทัดเดียวกัน โดยอ้างอิงความกว้างของเนื้อหาใน elements
position	position: absolute;	จัดตำแหน่งโดยไม่อ้างอิงจาก elements รอบข้าง
position	position: relative;	จัดตำแหน่งโดยอ้างอิงจาก elements รอบข้าง และสามารถใช้คำสั่ง top bottom left right เพื่อให้ขยับออกจากที่เดิมได้
position	position: fixed;	จัดตำแหน่งโดยไม่อ้างอิงจาก elements รอบข้าง และถูกกำหนดตำแหน่งโดยอ้างอิงจากขนาดจอ
position	position: sticky;	คล้ายกับ fixed แต่ทำงานเมื่อเลื่อนผ่าน element

การใช้งาน Flexbox ในการจัดโครงสร้าง

เมื่อท่านผู้อ่านได้ลองเขียนเอง จะพบว่าการสร้างกล่องหลายอันข้างใน elements หนึ่ง ค่าเริ่มต้น กล่องจะอยู่คนละบรรทัดกัน ไม่เรียงต่อกัน วิธีการแก้ปัญหาคือการ ใช้ Flexbox ตัวอย่างดังนี้

<div class="bigbox">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
</div>

ผมจะต้องเขียน Styling ดังนี้ เพื่อให้กล่องเรียงต่อกัน

.bigbox {
  display: flex;
}

ซึ่งค่าเริ่มต้น การจัดเรียงจะมีลักษณะคล้ายกับ display: block; (การที่แสดง 1 element ต่อหนึ่งบรรทัด)

.bigbox {
  display: block;
}

การใช้ Grid เพื่อจัดโครงสร้างแบบคงที่

ในการจัดว่าง elements แบบคงที่ จะใช้คุณสมบัติ grid ของ css ที่สามารถจัดโครงสร้างลักษณะคล้ายตารางได้ สามารถกำหนดระยะขอบระหว่างคอลัมน์กับแถวได้ ตัวอย่างผมจะสร้างกล่องสามกล่องจำนวนสามแถว ให้มีความห่างระหว่างคอลัมน์เท่ากับ 20px กำหนดโดยคุณสมบัติที่ชื่อ "column-gap"

.grid-3 {
  display: grid;
  column-gap: 20px;
  grid-template-columns: auto auto auto;
}

ระยะห่างระหว่างแถวโดยใช้ "row-gap"

.grid-3 {
  display: grid;
  row-gap: 20px;
  grid-template-columns: auto auto auto;
}

หรือจะกำหนดระยะห่างให้กับทั้งแถวและคอลัมน์โดยใช้ "gap"

.grid-3 {
  display: grid;
  gap: 20px;
  grid-template-columns: auto auto auto;
}

สำหรับตัวอย่างใน HTML จะมี grid-3 และ box elements ดังนี้

<div class="grid-3">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  ...
  <div class="box">6</div>
</div>

grid-template-columns

grid-template-columns นั้นเป็นการกำหนดสัดส่วนของ grid ซึ่งมีหน่วยเป็น fr สามารถแบ่งให้มีคอลัมน์ของแถวมากขึ้นได้ โดยการเพิ่มค่าขึ้นไปอีกค่าหนึ่ง ตัวอย่างเป็นการจัดแถวที่มีสามคอลัมน์ ซึ่งมีสัดส่วนต่างกันไป ดังนี้

grid-template-columns: 2fr 1fr 2fr;

grid-template-columns: 2fr 1fr 1fr;


grid-template-columns: 1fr 2fr 1fr;

grid-template-columns: 1fr 2fr 1fr 1fr;

หลังจากนี้ก็จะเป็นเรื่องของการศึกษาด้วยตนเอง และนำไปประยุกต์ใช้

อ้างอิง: w3schools.com/css/css_grid.asp

Name (Pen name): Sunny Jirakit (Sunny420x)
Study: Bachelor Degree of Computer Science from Chiang Mai Rajabhat University
Personality: Architect (INTJ-T)
Experience: JavaScript, Angular.js, React.js, Next.js Express.js, Unity C#, Socket.io