WUTTHIPHON PROJECTS SITE

HTML เบื้องต้น

 HTML ย่อมาจาก Hyper Text Markup Language เป็น Markup Language ไม่ใช่ภาษาโปรแกรมมิ่ง มีโครงสร้างการเขียนโดยอาศัยตัวกำกับหรือที่เรียกว่า Tag <tag> ใช้แสดงผลหน้าเว็บไซต์ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) สำหรับการการสร้างเว็บ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Visual Studio Code , Notepad++, Notepad

โครงสร้าง HTML ประกอบไปด้วย

5 Tag หลักที่ต้องรู้

<html>
    <head> <-- กำหนดหัวของ Website
      <title>Hi</title> <-- กำหนดชื่อของ Website
    </head>

    <body> <-- ส่วนของการแสดงผล Website
    </body>
</html>

Tag เบื้องต้นที่ควรรู้จัก

หัวเรื่อง

Tag ที่ใช้ทำหัวเรื่องทำให้ข้อความในส่วนนี้เป็นตัวหนาและตัวใหญ่ โดยมีขนาดตั้งแต่ h1 – h6 โดยมีรูปแบบการใช้คือ

<h...>...Content...</h...>

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>
<h6></h6>

เนื้อหา หรือ Paragraph

Tag ที่ใช้ทำในส่วนของข้อความหรือเนื้อหาบน Website โดยจะมีการขึ้นบรรทัดใหม่ให้อัตโนมัติเมื่อมีการปิด Tag โดยมีรูปแบบการใช้คือ

<p>...Content...</p>

This is some text in a paragraph 1.

This is some text in a paragraph 2.

การกำหนดตำแหน่งของข้อความ

สามารถเติม Attribute align ลงไปใน tag p ได้ เช่น

<!-- ซ้าย -->
<p align="left">Left</p>

<!-- กลาง -->
<p align="center">Center</p>

<!-- ขวา -->
<p align="right">Right</p>

<!-- จัดให้ข้อความยาวเต็มบรรทัด -->
<p align="justify">Justify</p>

Left

Center

Right

การขีดเส้นขั้น

Tag ที่ใช้ขีดเส้นขั้นระหว่างกัน โดยมีรูปแบบการใช้คือ

<hr>

การขึ้นบรรทัดใหม่ (แบบเก่า)

Tag ที่ใช้ขึ้นบรรทัดใหม่ โดยมีรูปแบบการใช้คือ 
<br>
เนื้อหา 1
เนื้อหา 2
เนื้อหา 3

การจัดรูปแบบเอกสารตามที่กำหนด

Tag ที่ใช้กำหนดตำแหน่งการแสดงผลโดยคงรูปแบบทุกอย่างเอาไว้ ไม่ว่าจะเป็นการเว้นวรรค การใช้ tag อื่น ๆ จะไม่มีผลใด ๆ โดยมีรูปแบบการใช้คือ

<pre>...Content...</pre>
Hello World
   สวัสดีครับ
      เว้นจากข้างหน้า 6 วรรค

การกำหนดกรอบพื้นที่ทำงาน

Tag ที่ใช้กำหนดพื้นที่สำหรับการทำเนื้อหาต่าง ๆ เพื่อแยกกลุ่มของเนื้อหาเป็นส่วน ๆ โดยมีรูปแบบการใช้คือ

<div>...Content...</div>
<div>
เนื้อหาที่ 1
</div>
<div>
เนื้อหาที่ 2
</div>

การสร้างรายการ

การสร้างรายการมี 2 รูปแบบคือแบบเป็นตัวเลขหรือสื่งที่สามารถนับได้ และ Object หรือสิ่งที่ไม่สามารถนับได้ และจะมี Tag li (list) เป็นตัวกำหนดรายการ โดยมีตัวอย่างดังนี้

Tag ol เป็น Tag ที่ใช้ทำรายการที่สามารถนับได้ โดยสามารถกำหนด Type ได้ 5 แบบคือ

1 ตัวเลขปกติ

a นับเป็น a , b , c… ไปเรื่อย ๆ

A นับเป็น A , B , C… ไปเรื่อย ๆ

i นับเป็นเลขโรมันไปเรื่อย ๆ (ตัวพิมพ์เล็ก)

I นับเป็นเลขโรมันไปเรื่อย ๆ (ตัวพิมพ์ใหญ่)

<ol type="1">
<li>รายการที่ 1</li>
<li>รายการที่ 2</li>
<li>รายการที่ 3</li>
<li>รายการที่ 4</li>
<li>รายการที่ 5</li>
</ol>
  1. รายการที่ 1
  2. รายการที่ 2
  3. รายการที่ 3
  4. รายการที่ 4
  5. รายการที่ 5

Tag ul เป็น Tag ที่ใช้ทำรายการที่ไม่สามารถนับได้ โดยสามารถกำหนด Type ได้ 3 แบบคือ

circle เป็นวงกลมที่มีแต่เส้นขอบ

square เป็นสี่เหลี่ยม

disc เป็นวงกลมแบบเต็ม

<ul type="disc">
    <li>รายการที่ 1</li>
    <li>รายการที่ 2</li>
    <li>รายการที่ 3</li>
    <li>รายการที่ 4</li>
    <li>รายการที่ 5</li>
</ul>
  • รายการที่ 1
  • รายการที่ 2
  • รายการที่ 3
  • รายการที่ 4
  • รายการที่ 5

การกำหนดลักษณะตัวอักษร

ตัวหนา <b></b>
ตัวเอียง <i></i>
ขีดเส้นใต้ </u></u>
ตัวยก <sup></sup>
ตัวห้อย <sub></sub>
ขีดฆ่า <del></del>
นิยาม <dnf></dnf>

การใส่สี

เราสามารถใช้ css เข้ามาช่วยกำหนดสีได้ เช่น 
<p style="color: red">Hi!</p>

Hi!

การใส่รูปภาพ

การใส่รูปภาพสามารถใช้งานได้ 2 รูปแบบคือการเรียกรูปภาพที่มีไฟล์ภายใน Website (Internal Link) และการเรียกรูปภาพที่อยู่ภายนอก Website (External Link) แต่ทั้ง 2 แบบมีการใช้งาน Tag เดียวกันคือ 
<img src="ที่อยู่รูปภาพ" />
กรณีที่รูปภาพอยู่ภายใน หากไฟล์เว็บไซต์กับไฟล์ภาพอยู่ใน folder เดียวกันเราสามารถใส่ชื่อไฟล์ได้เลย เช่น 1.png 
<img src="1.png" />

+
|-- index.html
|-- 1.png
หากไฟล์เว็บไซต์กับไฟล์ภาพอยู่คนละ folder เราสามารถเรียกใช้โดยใช้หลักการทำงานของ Directory เช่น ../ ./ 
<img src="../2.png" />
<img src="./assets/3.png" />

+
|-- 2.png
|-- website
    |-- index.html
    |-- 1.png
    |-- assets
        | -- 3.png
กรณีที่รูปภาพอยู่ภายนอก เราสามารถนำ URL ของรูปภาพในใช้ได้เลย เช่น 
<img src="https://wutthiphon.space/assets/images/WoodyCH_Logo.png" />

การทำตาราง

การทำตารางจะใช้ Tag

<table></table>

ในการทำ โดยมีรูปแบบดังนี้

<table>
    <tr> <-- ทำแถวที่ 1 ของตาราง
        <th>หัวคอลัมน์ที่ 1</th>
        <th>หัวคอลัมน์ที่ 2</th>
        <th>หัวคอลัมน์ที่ 3</th>
        <!-- th (table head) นิยมใช้ทำหัวเพราะจำทำให้ข้อความเป็นตัวหนาอัตโนมัติ -->
    </tr>
    <tr> <-- ทำแถวที่ 2 ของตาราง
        <td>แถวที่ 2 คอลัมน์ที่ 1</td>
        <td>แถวที่ 2 คอลัมน์ที่ 2</td>
        <td>แถวที่ 2 คอลัมน์ที่ 3</td>
        <!-- td (table body) ใช้ทำเนื้อหาในตาราง -->
    </tr>
    <!-- tr สามารถประกาศได้เรื่อย ๆ ตามจำนวนแถวที่ต้องการ -->
</table>

 

หัวคอลัมน์ที่ 1หัวคอลัมน์ที่ 2หัวคอลัมน์ที่ 3
แถวที่ 2 คอลัมน์ที่ 1แถวที่ 2 คอลัมน์ที่ 2แถวที่ 2 คอลัมน์ที่ 3

การผสานเซลล์มี 2 แบบคือ ผสานระหว่าง column(ช่อง) และผสานระหว่าง row(แถว) โดยมีการใช้ดังนี้

กรณีผสานระหว่าง column
<table>
    <tr> <-- ทำแถวที่ 1 ของตาราง
        <th colspan="2">หัวคอลัมน์ที่ 1-2</th> <-- colspan=2 คือจองพื้นที่ 2 column นับจากนี้
        <!-- ข้าม column ที่ 2 เพราะโดนจองพื้นที่แล้ว -->
        <th>หัวคอลัมน์ที่ 3</th>
        <!-- th (table head) นิยมใช้ทำหัวเพราะจำทำให้ข้อความเป็นตัวหนาอัตโนมัติ -->
    </tr>
    <tr> <-- ทำแถวที่ 2 ของตาราง 
        <td>แถวที่ 2 คอลัมน์ที่ 1</td>
        <td>แถวที่ 2 คอลัมน์ที่ 2</td>
        <td>แถวที่ 2 คอลัมน์ที่ 3</td> 
    <!-- td (table body) ใช้ทำเนื้อหาในตาราง -->
    </tr>
    <!-- tr สามารถประกาศได้เรื่อย ๆ ตามจำนวนแถวที่ต้องการ -->
</table>
หัวคอลัมน์ที่ 1-2หัวคอลัมน์ที่ 3
แถวที่ 2 คอลัมน์ที่ 1แถวที่ 2 คอลัมน์ที่ 2แถวที่ 2 คอลัมน์ที่ 3
กรณีผสานระหว่าง row
<table>
    <tr> <-- ทำแถวที่ 1 ของตาราง
        <th>หัวคอลัมน์ที่ 1</th>
        <th rowspan="2">หัวคอลัมน์ที่ 2</th> <-- จองพื้นที่ 2 บรรทัดโดยนับตั้งแต่บรรทัดนี้
        <th>หัวคอลัมน์ที่ 3</th>
        <!-- th (table head) นิยมใช้ทำหัวเพราะจำทำให้ข้อความเป็นตัวหนาอัตโนมัติ -->
    </tr>
    <tr> <-- ทำแถวที่ 2 ของตาราง 
        <td>แถวที่ 2 คอลัมน์ที่ 1</td>
        <!-- ข้ามแถวที่ 2 เพราะโดนจองพื้นที่แล้ว -->
        <td>แถวที่ 2 คอลัมน์ที่ 3</td> 
    <!-- td (table body) ใช้ทำเนื้อหาในตาราง -->
    </tr>
    <!-- tr สามารถประกาศได้เรื่อย ๆ ตามจำนวนแถวที่ต้องการ -->
</table>
หัวคอลัมน์ที่ 1หัวคอลัมน์ที่ 2หัวคอลัมน์ที่ 3
แถวที่ 2 คอลัมน์ที่ 1แถวที่ 2 คอลัมน์ที่ 3

การเชื่อมโยงหน้าอื่น ๆ

เราสามารถ Link จากไฟล์หนึ่งไปยังอีกไฟล์หนึ่งได้โดยการใช้ 
<a href="...">...Content with link...</a>
เช่นกำหนดโครงสร้างไฟล์ดังนี้ 
+
|-- index.html
|-- content.html
|-- profile.html
เราสามารถใช้ Tag a เพื่อทำให้เมื่อคลิกที่ ข้อความ ปุ่ม แล้วจะแสดงผลอีกหน้าหนึ่งแทน 
<!-- index.html -->
<a href="./content.html">Content</a>
<a href="./profile.html">Profile</a>
ผลลัพธ์ (ไม่สามารถคลิกได้เนื่องจากไม่มีไฟล์อยู่จริง) Content Profile กรณีที่ต้องการให้เปิด Link ใน Tab ใหม่สามารถใช้ attribute target ได้ โดยกำหนดเป็น “_blank” เช่น 
<a href="./content.html" target="_blank">Content</a>
Content กรณีที่เป็น link ภายนอกสามารถนำ URL มาใช้ได้เลยเช่น 
<a href="https://Wutthiphon.space" target="_blank">Wutthiphon Website</a>
Wutthiphon Website

เราสามารถใช้งาน Tag หลาย ๆ Tag ร่วมกันได้

สวัสดีนี่คือเนื้อหาสำคัญคุณควรจะจดจำเอาไว้ มันจะเป็นประโยชน์ต่อคุณไม่มากก็น้อยในอนาคต

<p style="text-align: center;">
สวัสดีนี่คือ
<b><u>เนื้อหา</u></b>
สำคัญคุณควรจะ
<b style="color: red">จดจำ</b>
เอาไว้ มันจะเป็นประโยชน์ต่อคุณไม่มาก
<del>ก็น้อย</del>
<sup>ในอนาคต</sup>
</p>
Post Views: 251
Wutthiphon Tassana
Wutthiphon Tassana