สร้าง Webpage ด้วยภาษา HTML

Hyper Text Markup Language

HTML (Hyper Text Markup Language) เป็นภาษามาตรฐานสำหรับการสร้างหน้าเว็บ โดย องค์ประกอบ HTML จะเป็นตัวบอกเบราว์เซอร์ว่าจะแสดงเนื้อหาอย่างไร

ตัวอย่างโครงสร้างของการเขียนภาษา HTML


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

ส่วนประกอบของภาษา HTML

<!DOCTYPE html> ระบุว่าเอกสารนี้เป็นเอกสาร HTML5
<html> คือองค์ประกอบหลักของหน้า Webpage และจะมีการระบุจุดสิ้นสุดขอบเขตโปรแกรมไว้ที่ท้ายโปรแกรมด้วย </html>
<head> ตือข้อมูลส่วนหัวโปรแกรมที่จะกำหนดคุณสมบัติต่างเกี่ยวกับหน้า Webpage
<title> ใช้กำหนดชื่อเรื่องสำหรับหน้า Webpage (ซึ่งจะแสดงอยู่ที่แถบชื่อเรื่องของเบราว์เซอร์หรือบนแท็บของหน้า Webpage)
<body> ทำหน้าที่กำหนดส่วนเนื้อหาของเอกสาร และเป็นภาชนะที่บรรจุเนื้อหาทั้งหมดที่จะแสดงผลให้มองเห็นได้ทางหน้า Webpage เช่น หัวข้อ ย่อหน้า รูปภาพ ไฮเปอร์ลิงก์ ตาราง รายการ ฯลฯ
<h1> กำหนดหัวข้อขนาดใหญ่
<p>ใช้กำหนดส่วนที่เป็นย่อหน้า

Link การเรียนรู้ HTML เพิ่มเติม

องค์ประกอบ HTML ประกอบด้วยแท็กเริ่มต้น เนื้อหา และแท็กปิด

<tagname> Content goes here...</tagname>

ตัวอย่างเช่น

<h1>My First Heading</h1>

เครื่องมือสำหรับการเขียนโค้ดภาษา HTML

เครื่องมือที่ใช้สำหรับการเขียนโค้ด มีหลากหลาย เป็นโปรแกรมที่สามารถ Editor ได้ ได้ Notepad หรืออื่น ๆ แต่ที่จะแนะนำคือโปรแกรม VS Code (Visual Studio Code) คือ โปรแกรมแก้ไขซอร์สโค้ด (Code Editor) มีขนาดกะทัดแต่ทรงพลัง พัฒนาโดย Microsoft สำหรับใช้งานบนระบบปฏิบัติการ Windows, macOS และ Linux โดยเปิดให้ใช้งานได้ฟรี
รองรับหลากหลายภาษา: รองรับการเขียนโค้ด เช่น Python, JavaScript, C++, HTML, CSS และอื่นๆ อีกมาก
เครื่องมือในตัว: มีระบบ Debugging ช่วยหาจุดผิดพลาด และเชื่อมต่อ Git/GitHub ได้ทันที
ส่วนขยาย (Extensions): ติดตั้งปลั๊กอินเสริมเพื่อเพิ่มความสามารถและเปลี่ยนธีมได้ตามต้องการ
ทำงานเร็ว: ใช้ทรัพยากรเครื่องน้อย เปิดใช้งานได้รวดเร็วเมื่อเทียบกับโปรแกรม IDE ขนาดใหญ่

เรียนรู้การใช้งาน Visual Studio Code

HTML Headings

คือการแสดงหัวข้อหรือหัวข้อย่อยที่คุณต้องการแสดงบนหน้าเว็บ โดยใช้ Tag เช่น <h1>หัวข้อที่จะนำเสนอ <h1>


<!DOCTYPE html>
<html>
<head>
<title>ทดลอง HTML Head </title>
</head>
<body>

<h1>หัวข้อที่ 1 </h1>
<h2>หัวข้อที่ 2 </h2>
<h3>หัวข้อที่ 3 </h3>
<h4>หัวข้อที่ 4 </h4>
<h5>หัวข้อที่ 5 </h5>
<h6>หัวข้อที่ 6 </h6>

</body>
</html>

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

HTML Styles

style ของ HTML ใช้สำหรับกำหนดรูปแบบให้กับองค์ประกอบต่างๆ เช่น สี แบบอักษร ขนาด และอื่นๆ

การกำหนดสไตล์ให้กับองค์ประกอบ HTML สามารถทำได้โดยใช้แอตทริบิวต์ style ซึ่งแอตทริบิวต์ style ของ HTML มีรูปแบบไวยากรณ์ดังนี้

<tagname style="property:value;"> ข้อความ </tagname>

เช่นต้องการเปลี่ยน สีของตัวอักษรของข้อความในหัวข้อ h สามารถทำได้โดยใช้แอตทริบิวต์ ดังนี้

<h2 style="color: blue;">ข้อความ</h2>

ข้อความของหัวข้อก็จะแสดงเป็นสีน้ำเงิน ดังรูป

หรือหากต้องการเปลี่ยนสีพื้นหลัง background-color ของตัวอักษร สามารถใช้ style ได้ดังนี้

การแสดงผลสีของพื้นหลังจะเปลี่ยนเป็นสี ดังนี้

หัวข้อ

หรือหากต้องการเปลี่ยนทั้งสีอักษรและพื้นหลัง สามารถเปลี่ยน style ได้ดังนี้

หัวข้อ

ชื่อสีต่าง ๆ

HTML Comments

HTML comments จะไม่แสดงผลบนเบราว์เซอร์ แต่สามารถช่วยอธิบายหรือระบุรายละเอียดในซอร์สโค้ด HTML สามารถเพิ่มความคิดเห็น (comments) ลงในซอร์สโค้ด HTML ได้โดยใช้รูปแบบไวยากรณ์ดังต่อไปนี้

สังเกตว่ามีเครื่องหมายอัศเจรีย์ (!) อยู่ในแท็กเริ่มต้น แต่ไม่มีในแท็กปิด

การสร้าง Link

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

แท็ก HTML `<a>` ใช้สำหรับกำหนดไฮเปอร์ลิงก์ โดยมีรูปแบบไวยากรณ์ดังนี้

<a href="url">ข้อความที่แนะนำลิ้ง </a>

ตัวอย่างเช่น

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>


<!DOCTYPE html>
<html>
<head>
<title>ทดลอง HTML Link </title>
</head>
<body>

<h1>หัวข้อที่ 1 </h1>
<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>
</html>

โดยค่าเริ่มต้น ลิงก์จะปรากฏในลักษณะต่อไปนี้ในเบราว์เซอร์ทุกตัว

ลิงก์ที่ยังไม่ได้เข้าชมจะมีเส้นขีดเส้นใต้และเป็นสีน้ำเงิน
ลิงก์ที่เคยเข้าชมแล้วจะมีเส้นขีดเส้นใต้และเป็นสีม่วง
ลิงก์ที่ใช้งานอยู่จะมีเส้นขีดเส้นใต้และเป็นสีแดง

The target Attribute

โดยค่าเริ่มต้น หน้า weboage ที่เชื่อมโยงเมื่อมีการคลิ๊ก จะแสดงในหน้าต่างเบราว์เซอร์ปัจจุบัน (ทับหน้าเดิม) หากต้องการเปลี่ยนไปแสดงในหน้าหรือ Tab อื่น สามารถระบุเป้าหมายในการสร้างลิ้งได้ โดยใช้ แอตทริบิวต์ target สามารถมีค่าใดค่าหนึ่งต่อไปนี้ได้

_self หมายถึง ค่าเริ่มต้น เปิดเอกสารในหน้าต่างหรือแท็บเดิมที่คลิก
_blank หมายถึง เปิดเอกสารในหน้าต่างหรือแท็บใหม่
_parent หมายถึง เปิดเอกสารในเฟรมแม่ (parent frame)
_top หมายถึง เปิดเอกสารในพื้นที่หลักของหน้าต่าง

ตัวอย่างเช่น

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>


<!DOCTYPE html>
<html>
<head>
<title>webpage1 </title>
</head>
<body>

<h1>การสร้างลิ้งเชื่อมโยงภายใน </h1>
<p><a href="webpage2.html" target="_blank">webpage2</a> </p>

</body>
</html>

ตัวอย่างการสร้างลิ้งที่ผ่านมาจะเป็นสร้งแบบ Absolute URLs ซึ่งเป็นลิ้งที่เชื่อมโยงไปยัง website อื่น ๆ ซึ่งต้องกำหนดที่อยู่เว็ปไซต์แบบเต็ม แต่หากเป็นการสร้างลิ้งเชื่อมโยงไปยัง Webpage ที่อยู่ในเครื่องเดียวกันจะเป็นการสร้างลิ้งแบบ Relative URLs ซึ่งจะเป็นแค่การระบุชื่อไฟล์และ path ของไฟล์ที่ต้องการเชื่อมโยง

เช่นเรามี webpage จำนวน 2 webpage และในหน้า webpage แรกมีการสร้างลิ้งเพื่อเปิดหน้า webpage ที่ 2 การสร้างลิ้งมีลักษณะดังตัวอย่างโค้ด

ให้สร้างไฟล์ webpage1.html โดยใช้โค้ดดังนี้


<!DOCTYPE html>
<html>
<head>
<title>webpage1 </title>
</head>
<body>

<h1>การสร้างลิ้งเชื่อมโยง webpage 1 </h1>
<p><a href="webpage2.html" target="_blank">webpage2</a> </p>

</body>
</html>

ให้สร้างไฟล์ webpage2.html โดยใช้โค้ดดังนี้


<!DOCTYPE html>
<html>
<head>
<title>webpage2 </title>
</head>
<body>

<h1>การสร้างลิ้งเชื่อมโยง webpage 2 </h1>
<p><a href="webpage1.html" target="_blank">webpage1</a> </p>

</body>
</html>

HTML Image

คือการใส่รูปใน webpage ซึ่งเราสามารถนำรูปชนิดต่าง ๆ มาแสดงบน webpage ได้อย่างง่าย ๆ โดยใช้ Tag คำสั่ง <img> แทรกรูปเข้าไปใน webpage

ในทางเทคนิคแล้ว รูปภาพไม่ได้ถูกแทรกลงในหน้าเว็บโดยตรง แต่เป็นการเชื่อมโยงรูปภาพเข้ากับหน้าเว็บ โดยแท็ก <img> จะทำหน้าที่สร้างพื้นที่สำหรับรองรับรูปภาพที่ถูกอ้างถึง โดยการใช้ tag การแทรกรูปมีลักษณะดังนี้

<img src="url" alt="alternatetext">

โดย แอตทริบิวต์ src เป็นการระบุเส้นทาง (URL) หรือ path ของไฟล์ ไปยังรูปภาพเช่น

<img src="image_telecom.png" alt="โครงข่าย5G">


<!DOCTYPE html>
<html>
<head>
<title>webpage2 </title>
</head>
<body>

<h1>การใส่รูปใน webpage  </h1>
<img src="image_telecom.png" alt="โครงข่าย5G">


</body>
</html>

การแสดงผลในหน้าเวป ดังรูป

นอกจากนี้ยังสามารถกำหนดหรือระบุขนาดความกว้าง ความสูงของรูปได้เช่น

เรายังสามารถนำรูปภาพจากเวปไซต์อื่น มาแสดงผลในเวปไซต์เราเองโดยไม่ต้องโหลดรูปเหล่านั้น เพียงแต่กำหนดลิ้งเชื่อมโยงไปยังเวปไชต์ของรูปนั้น ๆ โดยใช้คำสั่ง

<img src="https://www.tosh.or.th/media/k2/items/cache/cc49f8fe58339a73a36a496e4b8c3389_XL.jpg" alt="iot" style="width:400px;height:300px;">

รูปที่อ้างที่อยู่จากเวปอื่นจะถูกนำมาแสดงในเวปไซต์ดังรูป

การสร้างลิ้งจากรูป

เป็นการใช้รูปเป็นลิ้งสำหรับเชื่อมโยงไปยังหน้า webpage อื่น ๆ เมื่อมีการคลิ๊กบนรูป สามารถนำคำสั่ง Img และ a มาใช้ร่วมกันดังคำสั่งในตัวอย่างนี้


  <a href="https://www.tosh.or.th/index.php/blog/item/1369-iot"target="_blank">
  <img src="iot.png"  style="width:200px;height:300px;">
</a>

เมื่อแสดงบนหน้า webpage จะปรากฏรูปที่ใช้งานและเมื่อนำเมาส์ไปวางบนรูปจะปรากฏเป็นรูปมือ และสามารถคลิ๊กเชื่อมโยงไปยังลิ้งที่กำหนดไว้

HTML Div

<div> ใช้เป็นกล่องหรือคอนเทนเนอร์ (container) สำหรับเก็บองค์ประกอบ HTML อื่น ๆ ไว้เป็นกลุ่มเดียวกัน ซึ่งหากต้องการแก้ไข หรือเปลี่ยนแปลง สามารถกระทำได้เป็นชุด ๆ ไป ทำไห้สามารถปรับปรุงหรือแก้ไขข้อมูลที่เป็นกลุ่มเดียวกันได้ง่า่ย

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


<!DOCTYPE html>
<html>
<head>
<title>ทดลอง HTML Head </title>
</head>
<body>
<div style="background-color: burlywood;">
    <h2>หัวข้อ 1 </h2>
    <p>รายละเอียดของหัวข้อ 1 ซึ่งอยู่ภายใน div </p>
    <p>รายละเอียดที่อาจจะมีเพิ่ม แต่ยังคงอยู่ใน div </p>
</div>

<div style="background-color: aqua;">
    <h2>หัวข้อ 2 </h2>
    <p>รายละเอียดของหัวข้อ 2 ซึ่งอยู่ภายใน div อีกชุดแยกจากชุดแรก </p>
    <p>รายละเอียดที่อาจจะมีเพิ่ม แต่ยังคงอยู่ใน div </p>
    
</div>
</body>
</html>

ซึ่งจะได้ผลลัพธ์ดังในรูป

HTML list

HTML List คือ ชุดคำสั่งหรือแท็กในภาษา HTML ที่ใช้สำหรับสร้างรายการข้อมูลหรือจัดระเบียบข้อความให้ออกมาเป็นหมวดหมู่และอ่านง่าย ใน HTML รายการหลักๆ แบ่งออกเป็น 3 ประเภท ดังนี้

Unordered List (รายการแบบไม่เรียงลำดับ)
Ordered List (รายการแบบเรียงลำดับ)
Definition/Description List (รายการแบบคำนิยาม)

1. Unordered List (รายการแบบไม่เรียงลำดับ)

ใช้แสดงรายการที่ลำดับก่อนหลังไม่สำคัญ โดยหน้าข้อความจะเป็นสัญลักษณ์จุดวงกลม (Bullet points)
ใช้แท็ก <ul> ครอบกลุ่มรายการ และใช้แท็ก <li> (List Item) สำหรับใส่ข้อความในแต่ละข้อ

2. Ordered List (รายการแบบเรียงลำดับ)

ใช้แสดงรายการที่จำเป็นต้องมีลำดับขั้นตอนหรือตัวเลขกำกับ เช่น 1, 2, 3 หรือ ก, ข, ค
ใช้แท็ก <ol> ครอบกลุ่มรายการ และใช้แท็ก <li> สำหรับใส่ข้อความแต่ละข้อ

3. Definition/Description List (รายการแบบคำนิยาม)

ใช้แสดงข้อมูลในรูปแบบจับคู่ระหว่างคำศัพท์กับคำอธิบาย
ใช้แท็ก <dl> เป็นตัวครอบหลัก, แท็ก <dt> สำหรับคำศัพท์ และแท็ก <dd> สำหรับคำอธิบาย

โดยสังเกตจากตัวอย่างโค้ดนี้


  <!DOCTYPE html>
<html>
<body>

<h2>หัวข้อที่ 1 แสดงรายการเครื่องดื่ม</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>หัวข้อที่ 2 แสดงลำดับที่ของรายการอาหาร</h2>

<ol>
  <li>ข้าวแกง</li>
  <li>ข้าวมันไก่</li>
  <li>อาหารตามสั่ง/li>
</ol> 

<dl>
  <dt>HTML</dt>
  <dd>ภาษาสำหรับสร้างโครงสร้างเว็บไซต์</dd>
</dl>

</body>
</html>

ทั้งนี้การนำไปใช้อาจจะอยู่ภายใต้ div เพื่อจัดให้อยู่เป็นหมวดหมู่ หรือ กลุ่มเดียวกันได้

การกำหนด font