ภาษา HTML เบื้องต้น

สารบัญ

1. HTML คืออะไร?..........................................................................................................................................2
2. HTML Element .......................................................................................................................................2
3. โครงสร้างโค้ด (HTML web page Structure) ...........................................................................................3
4. การกาหนดรายละเอียดในส่วน Head ...................................................................................................... 4
5. ส่วนเนื้อหาของเว็บเพจ (Body) .................................................................................................................. 8
6. รหัสสี ........................................................................................................................................................ 9
7. การกาหนดหัวเรื่อง (Heading) ................................................................................................................... 9
8. การขึ้นย่อหน้าใหม่ และกาหนดตาแหน่งข้อความ .................................................................................... 11
9. การจัดรูปแบบการแสดงผลให้ข้อความ .................................................................................................... 12
10. สิสต์รายการ (List) ............................................................................................................................... 15
11. ตาราง (Table) ...................................................................................................................................... 16
12. การกาหนด Link ................................................................................................................................... 18
13. รูปภาพ (Image) .................................................................................................................................. 19
14. แบบฟอร์ม (Form)................................................................................................................................ 19
 2

1. HTML คืออะไร?

HTML (ย่อมาจาก Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้
ในการสร้างเว็บเพจ มีแม่แบบมาจากภาษา SGML (Standard Generalized Markup Language) ที่ตัด
ความสามารถบางส่วนออกไป เพื่อให้สามารถทาความเข้าใจและเรียนรู้ได้ง่าย ปัจจุบันมีการพัฒนาและ
กาหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1, HTML 2.0, HTML 3.0, HTML
3.2 และ HTML 4.0 ในปัจจุบัน ทาง W3C ได้ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึง่
เป็นลักษณะของโครงสร้าง XML แบบหนึ่ง ที่มีหลักเกณฑ์ในการกาหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่
มาตรฐานกว่า ปัจจุบัน HTML ถูกพัฒนาเวอร์ชั่นล่าสุดคือ HTML 5.0 หรือมักเรียก HTML5
HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือ
วัตถุอื่น ๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สาหรับจัดรูปแบบเพิ่มเติม
การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทาโดยใช้โปรแกรม Text Editor ต่างๆ เช่น
Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage,
Dream Weaver ซึ่งอานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is
What You Get)
แต่มีข้อเสียคือ โปรแกรมเหล่านี้มัก generate code ที่เกินความจาเป็นมากเกินไป ทาให้ไฟล์ HTML
มีขนาดใหญ่ และแสดงผลช้า ดังนั้นหากเรามีความเข้าใจภาษา HTML จะเป็นประโยชน์ให้เราสามารถแก้ไข
code ของเว็บเพจได้ตามความต้องการ และยังสามารถนา script มาแทรก ตัดต่อ สร้างลูกเล่นสีสันให้กับเว็บ
เพจของเราได้
การเรียกใช้งานหรือทดสอบการทางานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser
เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Google Chrome เป็นต้น

2. HTML Element

ส่วนประกอบที่สาคัญของภาษา HTML ได้แก่ Tag และ Attribute

Tag คือ คาสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย < และ > ใช้สาหรับจัดรูปแบบข้อความ ภาพหรือ วัตถุ
อื่นๆ ซึ่ง tag ในภาษา HTML ส่วนมาก จะมี tag เปิด และ tag ปิด เช่น
<h1>…</h1> ใช้เน้นหัวข้อเรื่อง
<p>…</p> ใช้จัดพารากราฟ
<b>…</b> ใช้กาหนดให้ตัวอักษรเป็นตัวหนา

แต่บาง tag ก็ไม่มี tag ปิด เช่น

<hr> ใช้สร้างเส้นคั่น
<br> ใช้สาหรับการขึ้นบรรทัดใหม่
Attribute เป็นส่วนขยาย หรือคุณสมบัตใิ น tag ใช้สาหรับจัดรูปแบบเพิ่มเติม โดยสามารถกาหนดค่า
ให้กับ Attribute เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "…" เช่น
 3

tag Attribute Value

<p align="center">ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ</p>
<hr width="200" color="red" > ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ

<hr width="200" color="red" > จากโค้ดนี้ส่วนใดคือ tag………….. Attribute …………. และ value…………

ในการเขียน tag, attribute และค่าของ attribute จะใช้เป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้

แต่เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ ขอให้ใช้เป็นตัวอักษรพิมพ์เล็กทั้งหมด และสาหรับ tag
ที่ไม่มี tag ปิด ให้ใส่ เป็น " / >" เช่น <hr />, <br />

3. โครงสร้างโค้ด (HTML web page Structure)

ภาษา HTML จะมีโครงสร้างหลักที่สาคัญ ซึ่งจะทาหน้าที่การแสดงผลในแต่ละส่วนแตกต่างกัน

<html>

<head>

<title>หัวข้ อเรื่ องของเว็บเพจ ที่จะแสดงใน title bar ด้ านบน</title>

และส่วนการกาหนดค่าต่างๆของเว็บ เช่น การเรี ยกใช้ javaScript css หรื อการกาหนก meta ต่างๆ
</head>

<body>

ส่วนเนื ้อหา ประกอบด้ วยข้ อความ ตาราง รูป และวัตถุอื่นๆ หรื อกล่าวได้ วา่ ส่วนแสดงผลบนหน้ า Web
Browser

</body>

</html>

1) <html>...</html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html>

เสมอ ส่วนภายใน Element <html> ประกอบด้วยส่วนของ <head>...</head> และ
<body>...</body>
2) <head>...</head> ใช้กาหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ ซึ่งคาสั่งที่อยู่ในส่วนนี้จะไมได้
แสดงผลให้เห็นในหน้าเว็บเพจ เช่น กาหนดหัวข้อเรื่องของเว็บเพจ ที่จะแสดงให้เห็นใน title bar ด้านบนของ
เว็บเบราเซอร์์ โดยใช้ Element <title>...</title> นอกจากนี้ในส่วนของ <head> ยังใช้กาหนด meta
 4

name เพื่อบอกว่าในหน้าเว็บเพจนี้มีเนื้อหาเกี่ยวกับอะไร สาหรับการใช้งานของ Search Engine (เช่น

Google, Yahoo, Bing), กาหนดสไตล์ CSS และ Script ต่างๆ (จะพูดถึงอย่างละเอียดในบทต่อไป)
3) <body>...</body> เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด มีส่วนประกอบ ได้แก่
ข้อความ ตาราง ลิสต์ รูป ภาพ ลิงค์ เป็นต้น

comment <!-- …..ส่วนที่ต้องการ comment.. -->

Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่าง เช่น ใช้เพื่อเตือนความจา กากับ

code แต่ละส่วนที่เราเขียนว่าเพื่อทาอะไร ทาให้อ่านและแก้ไข code ภายหลังได้ง่าย
ข้อความใน tag comment จะไม่ถูกเว็บเบราเซอร์แสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อ
มีการ view source code เท่านั้น

4. การกาหนดรายละเอียดในส่วน Head

หัวข้อนี้จะต่อเนื่องจากหัวข้อที่ 3 โดยจะเป็นรายละเอียดของส่วน head ซึง่ รายละเอียดในส่วน Head

ได้แก่ ข้อความ title, meta, การกาหนด style sheet และ คาสั่ง script สามารถอธิบายตัวอย่างในส่วน
head ได้ดังนี้
4.1 Title ใช้สาหรับให้แสดงข้อความที่อยู่ใน title bar ของ web browser ตัวอย่างเช่น <title>
www.abcd.com สอนเขียนเว็บด้วย HTML</title>
4.2 Meta ใช้กาหนดคุณสมบัติให้เว็บเพจ เช่น กาหนดคาสาคัญ (keyword) สาหรับ Search
Engine, กาหนดชุดตัวอักษร เป็นต้น Meta Element มี 2 รูปแบบ คือ
1. Meta Name ใช้สาหรับกาหนดคาค้นหา, รายละเอียดเกี่ยวกับเว็บไซต์ สาหรับให้ Search Engine
เช่น google, yahoo, msn นาข้อมูลที่เราระบุไว้ใน meta name ไปใช้ในการประมวลผลจัดเก็บเว็บไซต์
รูปแบบคาสั่งและ attribute value ของ name ที่ใช้หลักๆ มีแค่ 3 value
1) บรรยายเว็บไซต์ด้วยคาสาคัญ

<meta name="Keywords" content="สอนทาเว็บไซต์ สอนเขียนเว็บเพจ, HTML, CSS, XHTML,

JavaScript">

คือพวก คา,วลี,กลุ่มคาที่สื่อความหมายเกี่ยวกับเว็บไซต์ ที่คนนิยมใช้ในการค้นหาข้อมูล

2) บรรยายเว็บไซต์ด้วยประโยคสรุป
<meta name="Description" content="แนะนาการสร้ างเว็บไซต์ บทเรี ยนการสอนเขียนเว็บเพจด้ วย
HTML, CSS, XHTML, JavaScript และข้ อมูลข่าวสารในแวดวงคอมพิวเตอร์ และอินเตอร์ เน็ตที่นา่ สนใจ">
 5

เมื่อมีการค้นหา Search Engine จะนาข้อความใน Description ไปแสดงในผลการค้นหา ถ้าเรา

ไม่ได้ระบุไว้ Search Engine อาจจะนาข้อความ หรือเนื้อหาที่ปรากฏอยู่ในหน้าเว็บเพจนั้นไปแสดงแทน ซึ่ง
อาจไม่ใช่ใจความสาคัญที่เราต้องการ
3) คาสั่งสาหรับบอกให้ Robot ของ Search Engine ทาอะไรกับหน้าเว็บเพจได้บ้าง
โดยปกติเมื่อ Robot ของ Search Engine มาเจอเว็บของเรา ก็จะเข้ามาเก็บข้อมูล หรือ index
ข้อมูลในหน้าเว็บกลับไปฐานข้อมูลของ Search Engine เพื่อนาไปประมวลผลต่อไป แต่ถ้าเราไม่ต้องการให้
Search Engine เก็บข้อมูลในเว็บเพจหน้าใด เราสามารถกาหนดได้
- noindex ไม่ให้ index เนื้อหาในหน้านี้ (แต่ถ้าเจอลิงค์ในหน้า ก็ให้ตามไปทา index หน้าเว็บเพจ
ต่างๆ ด้วยตามปกติ)
- nofollow ไม่ให้วิ่งตาม link ทั้งหมดที่เจอในหน้านี้
- noarchive ไม่ให้ทาการ cached เก็บหน้าเว็บเพจของเราไว้ใน Search Engine
ใช้สาหรับบอก Robot ของ Search Engine ไม่ให้ทาการ index หน้าปัจจุบัน และทุกหน้าที่หน้า
ปัจจุบัน link ไป รวมถึงไม่ให้เก็บข้อมูลใน cache ของ Search Engine ด้วย

<meta name="Robots" content="noindex,nofollow,noarchive">

<meta name="Robots" content="none">

ใช้สาหรับบอก Robot ของ Search Engine ทาการ index หน้าปัจจุบัน และทุกหน้าที่หน้าปัจจุบัน

link ไป (การใส่ meta index, follow กับการไม่ใส่ ผลไม่แตกต่างกัน)
<meta name="Robots" content="index,follow">

ใช้สาหรับบอก Robot ของ Search Engine ทาการ index หน้าปัจจุบัน และทุกหน้าที่หน้าปัจจุบัน

link ไป รวมถึงให้เก็บข้อมูลใน cache ของ Search Engine ด้วย
<meta name="Robots" content="all">

meta name อื่นๆ เช่น ใช้สาหรับบอกกับ Robot ของ Search Engine ว่า ให้มาเก็บข้อมูลอีกครั้ง
เมื่อไหร่ เช่น ทุก 7 วัน, ทุก 2 เดือน
<meta name="revisit-after" content="7 days">

<meta name="revisit-after" content="2 months">

ใช้สาหรับบอก โปรแกรมที่ใช้สร้างเว็บเพจนี้, ผู้เขียนหน้านี้, ผู้เป็นเจ้าของลิขสิทธิ์ เป็นต้น

<meta name="Generator" content="EditPlus 1.2">

<meta name="Author" content="abcd.net">

<meta name="Copyright" content="&copy; 2009 abcd.net">

 6

2. Meta HTTP-EQUIV ใช้สาหรับกาหนดชุดของตัวอักษรที่ใช้ หรือสาหรับสั่ง refresh หน้าเว็บเพจ

หรือ ให้ไปที่เว็บไซต์ หรือไฟล์อื่นๆ ตามเวลาที่กาหนด (delay เป็นวินาที)
คาสั่งสาหรับกาหนดชุดตัวอักษรที่ใช้ในหน้าเว็บเพจ ปัจจุบันนิยมกาหนดเป็น utf-8 สาหรับการ
แสดงผลในภาษาไทย ใช้ windows-874 หรือ tis-620

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=windows-874">

<meta http-equiv="Content-Type" content="text/html; charset=tis-620">

คาสั่งสาหรับสั่งให้ Re-direct หน้าเว็บเพจอื่นๆ หรือเพื่อ Refresh หน้าเว็บเพจปัจจุบัน

<meta http-equiv="Refresh" content="10; URL=http://www.google.com">

จากคาสั่งด้านบนให้เปลี่ยนแสดงผลไปหน้า www.google.com ใน 10 วินาที

สาหรับ meta tag ที่จาเป็นต้องใส่ คือ

<meta name="Keywords" content="การสร้ างเว็บไซต์, สอนเขียนเว็บเพจ, HTML, CSS, XHTML,
JavaScript">

<meta name="Description" content="แนะนาการสร้ างเว็บไซต์ สอนเขียนว็บเพจด้ วย HTML และ CSS

และข่าวสารในแวดวงคอมพิวเตอร์ และอินเตอร์ เน็ต">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="Author" content="abcd.net">

4.3 Style style sheet ใช้กาหนดคุณลักษณะ เช่น สี ขนาด font ตาแหน่งการจัดวาง ให้กับ HTML
element ต่างๆ โดยจะกาหนดในหน้าเว็บเพจนั้นๆ หรือสร้างเป็นไฟล์ style sheet แยกเป็นอีกไฟล์ แล้ว
เรียกใช้อีกที
คาสั่งสาหรับสร้าง style sheet ที่ใช้ในเอกสาร กาหนดดังนี้
<style type= "MIME Type" media= "Media Type">...</style>

MIME Type (Multipurpose Internet Mail Extension) เป็นการกาหนดชนิดข้อมูลมาตรฐานสาหรับ

อินเทอร์เน็ตในแบบ Content-type เป็นตัวบ่งชี้ว่าชนิดข้อมูลนั้นๆคืออะไร เว็บเบราเซอร์จะนาข้อมูลนั้นมา
โดยวิธีใด และจะจัดการกับข้อมูลเหล่านั้นต่อไปอย่างไร อาจแสดงเป็นชนิดข้อมูลหลัก type เปล่าๆ หรือแสดง
ชนิดข้อมูลรองด้วย type/subtype เช่น Text, Text/html
 7

1. text เป็นข้อมูลชนิดข้อความ ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ text/plain(ข้อความล้วนๆ ไม่มีคาสั่ง

จัดรูปแบบใดๆ)text/html text/css text/JavaScript
2. image ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ image/jpeg image/gif
3. audio เป็นข้อมูลชนิดไฟล์เสียง ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ audio/basic audio/mid audio/wav
audio/mpeg
4. video เป็นข้อมูลสาหรับวีดีโอ และภาพเคลื่อนไหว ที่ใช้บ่อยๆ ได้แก่ video/mpeg video/x-msvideo
(avi) video/quicktime
5. application เป็นชนิดข้อมูลแบบเจาะจงให้ใช้กับโปรแกรมชนิดต่างๆ ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่
application/postscript application/pdf application/msword

Media Type
ชนิดอุปกรณ์ที่เจาะจงนา Style sheet ไปใช้แสดงผล มีลักษณะการใช้งาน ดังนี้
1. screen แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์
2. tty แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
3. tv แสดงผลออกทางจอภาพของเครื่องรับโทรทัศน์
4. projection แสดงผลออกทางจอภาพที่มีความต่างสี (contrast) และความสว่าง (brightness) ต่า เช่น
จอภาพ LCD, การแสดงผลผ่านเครื่อง projector
5. handheld แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่
สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลต่า
6. print แสดงผลออกทางเครื่องพิมพ์เท่านั้น
7. braille แสดงผลออกทางเครื่องช่วยอ่านสาหรับคนตาบอด
8. aural แสดงผลโดยระบบช่วยอ่านออกเสียง
9. all ใช้ในอุปกรณ์ทุกชนิด
หากมีมากกว่า 1 media ใช้ comma คั่น
<style type="text/css" media="screen">

p { color:blue; }

</style>

4.4 Link ใช้กาหนดความสัมพันธ์ระหว่างเว็บเพจกับข้อมูลภายนอกเพื่อนามาใช้งานในเว็บเพจ

นอกจากการสร้าง style sheet ในส่วน head เพื่อเรียกใช้ในเว็บเพจหน้านั้นๆแล้ว ยังสามารถเรียกใช้ ไฟล์
style sheet จากภายนอกมาใช้ โดยใช้คาสั่ง link

<link rel= "..." type="MIME Type" href="url" src="url">

rel = "stylesheet" | "next" |"previous" | "section" | "subsection" | "contents"

 8

type = "MIME Type"

href = "ไฟล์ที่ต้องการ link ไป"
src = "ไฟล์ที่ต้องการแทรก"

4.5 Script สามารถเขียน script เช่น javascript, vbscript เป็น function เพื่อใช้งาน หรือจะเขียน
ฟังก์ชั่นเก็บเป็นไฟล์ .js ก่อนแล้วค่อยเรียกใช้งานก็ได้
<script type="text/javascript">

function Sayhello()

alert("Welcome to abcd.net");

</script>

<script type="text/javascript" language="javascript" src="script/js_function.js" ></script>

5. ส่วนเนื้อหาของเว็บเพจ (Body)

Body คือ ส่วนที่แสดงเนื้อหาที่ปรากฏบนเว็บบราวเซอร์ ไม่ว่าจะเป็น โครงสร้างของเว็บ ข้อความ

รูปภาพ วีดีโอ เสียง ซึ่งส่วนนี้จาเป็นต้องมีการออกแบบโครงสร้างให้เหมาะสมกับเว็บไซต์ที่จะทา กล่าวคือต้อง
มีการออกแบบส่วนต่างๆให้เหมาะสม เช่น เมนู เนื้อหา สี รูปแบบฟ้อนต์ เป็นต้น
สามารถกาหนดคุณสมบัติให้กับ body โดยการใช้ style เข้าไป เช่น การกาหนดพื้นหลัง สีข้อความ
ทั้งเว็บไซต์ เป็นต้น
<html>
<head>
<title> ....ส่วนของข้ อความที่จะปรากฏที่ Title Bar ของ Browser....</title>
</head>
<body bgcolor=”#fff”>
.... ส่วนข้ อความหรื อเนื ้อหา รายละเอียดที่ต้องการให้ ปรากฏที่ Web browser ....
</body>
</html>
 9

6. รหัสสี

ในการสร้างเว็บไซต์จะเกี่ยวข้องกับการใช้สีอยู่บ่อยๆ ไม่ว่าจะเป็นการกาหนดสีพื้นหลัง สีข้อความ สี

เส้นขอบ เป็นต้น ดังนั้นการรูปจะรหัสสีจึงเป็นสิ่งสาคัญ แต่โดยปกตินักพัฒนาเว็บไซต์จะไม่ใช้การจารหัสสี
เพราะรหัสสีนั้นมีหลายค่ายากต่อการจา แต่สิ่งที่ควรรู้คือการรู้วิธีการเรียกใช้ และรู้ว่าแต่ละตาแหน่งของค่าสี
จะเป็นสีเข้ม หรือสีอ่อน
สาหรับการเรียกใช้สีนอกจากจะเรียกแบบรหัสสีที่เป็นเลขฐาน 16 จานวน 6 ตัวและนาหน้าด้วย
เครื่องหมาย # เช่น #FFFFFF (หมายถึง สีขาว) ยังสามารถพิมพ์ชื่อสีได้ตรงๆ เช่น white จะเห็นว่าการแทน
ด้วยรหัสเป็น F ซึ่งแทนฐาน 16 ตัวที่มีค่ามากสุด (หรือ 15 ในฐานสิบ) ดังนั้นหากเรียกใช้รหัสเป็นค่าน้อยสุดจะ
ได้สีอะไร เช่น #000000 คาตอบคือจะได้สีดา หรือมีค่าเป็น 0 นอกจากนั้นแล้วรหัสสียังสามารถปรับค่าแต่ละ
หลักได้ เช่น อาจจะเป็น #AFDE12 เป็นต้น
เรามาดูค่าสีบางค่าที่สามารถแทนด้วยชื่อสีได้เลย ส่วนสีอื่นๆต้องใช้รหัส เนื่องจากแต่ละเฉดสีมีจานวน
มากมหาศาลไม่สามารถตั้งเป็นชื่อได้

ชื่ อสี รหัสค่ าสี ฐาน16 การแสดงผลสี

Black #000000

Red #FF0000

Green #00FF00

Blue #0000FF

Yellow #FFFF00

Aqua #00FFFF

Fuchsia #FF00FF

Silver #C0C0C0

White #FFFFFF

ตัวอย่างการเรียกใช้สี

<h1 style=”color=”#67DEFD”;” >…………… </h1>

<p style=”bgcolor=”green”;”>………</p>

7. การกาหนดหัวเรื่อง (Heading)

ในแรกเริ่มของภาษา HTML ได้สร้าง tag สาหรับการกาหนดขนาดหัวเรื่องทั้งหมด 6 ขนาด โดยใช้

tag <h1></h1> ซึ่งมีขนาดใหญ่สุดไปเรื่อยๆ จนถึง <h6></h6> ขนาดเล็กสุด แต่ทั้งนี้ทั้งนั้นเราสามารถ
 10

กาหนดขนาดและรูปแบบของหัวเรื่องได้ ด้วยการใส่ style เข้าไปเพิ่มเติม แต่ในเรื่องนี้มารู้จักการใช้ tag หัว

เรื่องแบบปกติกันก่อน

tag <h1> ถึง <h6> การแสดงผล

<h1>ข้อความของหัวเรื่ อง ขนาด h1</h1> ข้ อความของหัวเรื่ อง ขนาด h1

<h2>ข้อความของหัวเรื่ อง ขนาด h2</h2> ข้ อความของหัวเรื่ อง ขนาด h2
<h3>ข้อความของหัวเรื่ อง ขนาด h3</h3> ข้ อความของหัวเรื่ อง ขนาด h3
<h4>ข้อความของหัวเรื่ อง ขนาด h4</h4> ข้ อความของหัวเรื่ อง ขนาด h4

<h5>ข้อความของหัวเรื่ อง ขนาด h5</h5> ข้ อความของหัวเรื่ อง ขนาด h5

<h6>ข้อความของหัวเรื่ อง ขนาด h6</h6> ข้ อความของหัวเรื่ อง ขนาด h6

<h6 align="center">ข้อความของหัวเรื่ อง ขนาด h6</h6> ข้ อความของหัวเรื่ อง ขนาด h6

เส้นคั่น (Horizontal Rule)

เส้นคั่นเป็น tag ที่อาจจะได้ใช้ร่วมกับการกาหนดหัวเรื่อง หรือการแบ่งส่วนของบทความเพื่อตก

แต่งหน้าเว็บเพจ วิธีการใช้งาน tag เส้นคั่นทาได้โดยการใช้ tag hr แบบ tag เดียวไม่ต้องปิด tag ด้วย <hr>
และสามารถกาหนดสไตล์เพิมเติมได้

tag <hr>,<hr /> การแสดงผล

<hr> หรื อ <hr />

<hr width="50%" />

<hr width="200" />

<hr size="1" />

<hr size="3" />
<hr size="5" />

<hr width="50%" align="right" />

<hr color="red" />

<hr size="3" color="red" />

<hr size="5" />

<hr size="5" noshade> หรื อ
<hr size="5" noshade="noshade">
 11

8. การขึ้นย่อหน้าใหม่ และกาหนดตาแหน่งข้อความ (Paragraph)

ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกาหนดการจัดวางตาแหน่งข้อความว่า

จะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

<p align="left | center | right |justify">...</p>

tag <p> การแสดงผล

ข้อดวามในพารากราฟ

HTML (Hyper Text Markup Language) เป็ นภาษาประเภท

<p align="left">ข้อดวามในพารากราฟ</p>
Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็ นภาษาที่ง่ายต่อการเรี ยนรู ้
<p>ข้อดวามในพารากราฟ</p>
(ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบนั มีการพัฒนา
และกาหนดมาตรฐานโดยองค์กร World Wide Web Consortium
(W3C)

ข้อดวามในพารากราฟจัดวางกึ่งกลาง

HTML (Hyper Text Markup Language) เป็ นภาษาประเภท

<p align="center">ข้อดวามในพารากราฟจัดวางกึ่งกลาง</p> Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็ นภาษาที่ง่ายต่อการเรี ยนรู ้
(ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบนั มีการพัฒนา
และกาหนดมาตรฐานโดยองค์กร World Wide Web Consortium
(W3C)

ข้อดวามในพารากราฟจัดชิดขวา

HTML (Hyper Text Markup Language) เป็ นภาษาประเภท

<p align="right">ข้อดวามในพารากราฟจัดชิดขวา</p> Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็ นภาษาที่ง่ายต่อการเรี ยนรู ้
(ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบนั มีการพัฒนา
และกาหนดมาตรฐานโดยองค์กร World Wide Web Consortium
(W3C)

ข้อดวามในพารากราฟ กระจายคาให้พอดี

HTML (Hyper Text Markup Language) เป็ นภาษาประเภท

<p align="justify">ข้อดวามในพารากราฟ กระจายคาให้พอดี </p> Markup Language ทีใ่ ช้ในการสร้างเว็บเพจ เป็ นภาษาที่ง่ายต่อการเรี ยนรู ้
(ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบนั มีการพัฒนา
และกาหนดมาตรฐานโดยองค์กร World Wide Web Consortium
(W3C)

การขึ้นบรรทัดใหม่
โดยปกติ ถ้าข้อความยาวมากๆ เว็บเบราเซอร์์จะตัดคาขึ้นบรรทัดใหม่ให้อยู่แล้ว แต่ถ้าต้องการ
กาหนดการขึ้นบรรทัดใหม่เอง ให้ใช้ tag <br> ถ้าให้เป็นไปตามมาตรฐานใหม่ของ (X)HTML ใช้ <br /> และ
 12

สามารถกาหนดรูปแบบการขึ้นบรรทัดใหม่ได้หลายแบบ ผ่าน attribute clear ที่ม์าเป็

ีค่ น left / right / all
/none

<br clear="left | right | all | none" />

การจัดกลุ่มข้อความ (div, span)

tag <div> และ tag <span> ใช้สาหรับกาหนดรูปแบบหรือลักษณะข้อความที่อยู่ภาย tag มักใช้
ร่วมกับ CSS
tag <div> เป็น tag ที่มีไว้แบ่งส่วนเนื้อหาของ HTML ออกจากกันเป็นส่วนๆ (block) ถ้า <div>
ไม่ได้กาหนดคุณลักษณะใดๆ ก็จะมีผลเหมือนกับการใช้ tag <p> และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้
อัตโนมัติ ในปัจจุบันจะใช้ div เพื่อแบ่งส่วนต่างๆของเว็บไซต์ เช่น ส่วนหัว ส่วนเนื้อหา ส่วนด้านข้าง ส่วน
ด้านล่าง เป็นต้น แล้วทาการเขียน css กากับการแสดงผล ซึ่งจะได้เรียนในส่วนของ css
ส่วน tag <span> คล้ายกับ tag <div> แต่มักใช้จัดแต่ง ข้อความสั้นๆ (inline) ที่อยู่ใต้การกาหนด
รูปแบบของ tag อื่นอยู่แล้ว เพื่อให้มีรูปแบบที่ต่างไปจากรูปแบบเหล่านั้น และจะไม่ขึ้นบรรทัดใหม่ (ไม่
เหมือนกับ <div>)

9. การจัดรูปแบบการแสดงผลให้ข้อความ

สามารถจัดรูปแบบการแสดงผลให้ข้อความได้หลายรูปแบบ

Tag คาอธิบาย การแสดงผล

<b> กาหนดข้อความเป็ นตัวหนา <b>ตัวหนา</b> ตัวหนา

<big> กาหนดข้อความให้มีขนาดใหญ่ข้ นึ จากขนาด <big>ใหญ่ข้ นึ </big> ใหญ่ข้ ึน

ปัจจุบนั ขึ้น 1 ระดับ <big><big>ใหญ่ข้ ึนอีก
ใหญ่ข้ ึนอีก
</big></big>

<em> เน้นข้อความ (ตัวเอียง) <em>เน้ นข้ อความ</em> เน้ นข้ อความ

<i> กาหนดข้อความเป็ นตัวเอียง <i>ตัวเอียง</i> ตัวเอียง

<small> กาหนดข้อความให้มีขนาดเล็กลง <small>เล็กลง</small> เล็กลง

<strong> เน้นหนักข้อความ (ตัวหนา) <strong>เน้นหนัก</strong> เน้ นหนัก

<sub> กาหนดข้อความตัวห้อย H₂O H2O

<sup> กาหนดข้อความตัวยก 4²=16 42=16

<ins> กาหนดข้อความที่เพิ่มเข้ามา ใช้คู่กบั <del> กาหนดการวันที่ กาหนดการ

(ขีดเส้นใต้) <del>26/3/2009</del> วันที่ 26/3/200931/3/2009!
<ins>31/3/2009</ins>!
<del> กาหนดข้อความที่ลบออกไป (ขีดฆ่า)
 13

<s> กาหนดข้อความขีดฆ่า
เป็ น tag ล้าสมัยให้ใช้ <del> แทน

<strike> กาหนดข้อความขีดฆ่า
เป็ น tag ล้าสมัยให้ใช้ <del> แทน

<u> กาหนดข้อความขีดเส้นใต้ <u>ขีดเส้นใต้</u> ขีดเส้นใต้

เป็ น tag ล้าสมัย ให้ใช้ style sheet
แทน

Computer Output Tags

Tag คาอธิบาย การแสดงผล

<code> กาหนดข้อความเป็ น source code <code>Computer code Computer code text

โปรแกรม (แสดงผลด้วยความกว้างอักษรคงตัว) text</code>

<kbd> กาหนดข้อความที่พิมพ์จากคียบ์ อร์ด (แสดงผล <kbd>Keyboard Keyboard text

ด้วยความกว้างอักษรคงตัว) text</kbd>

<samp> กาหนดข้อความเป็ นตัวอย่าง computer <samp>Sample Sample computer code text

code (แสดงผลด้วยความกว้างอักษรคงตัว) computer code
text</samp>

<tt> กาหนดข้อความแบบ teletype text ให้มี <tt>teletype text</tt> teletype text

ความกว้างคงตัว

<var> กาหนดข้อความเป็ นตัวแปร variable <var>Variable</var> Variable

<pre> กาหนดข้อความที่จดั รู ปไว้ก่อน (แสดงผลด้วย <pre>ข้อความใน pre ข้อความใน pre

ความกว้างอักษรคงตัว)
จะมีความกว้างคงที่ จะมีความกว้างคงที่
แสดงผลเคาะวรรค แสดงผลเคาะวรรค
12 3 4 12 3 4

และขึ้นบรรทัดใหม่ และขึ้นบรรทัดใหม่
ตามที่พิมพ์เลย ่่ตามที่พิมพ์เลย
ไม่ตอ้ งใช้ tag br</pre> ไม่ตอ้ งใช้ tag br
<listing> แสดงข้อมูลรายการคอมพิวเตอร์แบบต่างๆ เช่น
source code program (แสดงผล
ด้วยความกว้างอักษรคงตัว)
เป็ น tag ล้าสมัยให้ใช้ <pre> แทน
 14

<plaintext> กาหนดให้เว็บเบราเซอร์ไม่สนใจตีความคาสั่ง
HTML ใดๆ ให้แสดงออกมาเป็ นข้อความ
ธรรมดา
เป็ น tag ล้าสมัยให้ใช้ <pre> แทน

<xmp> กาหนดข้อความที่จดั รู ปไว้ก่อน

เป็ น tag ล้าสมัยให้ใช้ <pre> แทน

Citations, Quotations และ Definition Tags

Tag คาอธิบาย การแสดงผล

<abbr> กาหนดอักษรย่อหรื อคาย่อ ใช้เพื่อเพิม่ ภาษา <abbr title="Hyper Text ภาษา HTML ใช้สาหรับการเขียนเว็บ
ประสิ ทธิภาพการตีความให้กบั Search Markup เพจ
Engine Language">HTML</abbr> ใช้
สาหรับการเขียนเว็บเพจ

<acronym> กาหนดอักษรย่อหรื อคาย่อ (เมื่อเอา ภาษา <abbr title="Hyper Text ภาษา HTML ใช้สาหรับการเขียนเว็บ
mouse ชี้จะปรากฏคาเต็มในแถบ Markup เพจ
อธิบาย) ใช้เพื่อเพิ่มประสิ ทธิภาพการตีความ Language">HTML</abbr> ใช้
ให้กบั Search Engine สาหรับการเขียนเว็บเพจ

<address> กาหนดที่อยูผ่ สู ้ ร้างเว็บเพจ (ตัวเอียง) บทเรี ยน HTML โดย enjoyday.net บทเรี ยน HTML โดย
<address> <a href= enjoyday.net
"mailto:admin@enjoyday.net">
Email us</a><br /> Email us
Address: Bangkok
Address: Bangkok<br />
Phone: 00-0000000
Phone: 00-0000000
</address>

<bdo> กาหนดทิศทางข้อความ (ซ้ายไปขวา/ขวาไป <bdo dir="ltr">abcdefg!</bdo> abcdefg!

ซ้าย) <bdo dir="rtl">abcdefg!</bdo> abcdefg!

<blockquote> กาหนดข้อความหรื อเนื้อหาที่หยิบยกมาจาก HTML คืออะไร? HTML คืออะไร?

แหล่งอื่น (quotation) แบบยาว
(แสดงผลโดยเพิ่มกั้นหน้าและกั้นหลัง ห่ าง
จากขอบเท่ากัน หากต้องการให้ก้ นั หน้า และ
หลังแคบลง ก็สามารถใช้
<blockquote> หลายๆครั้งซ้อนกัน
ได้)
<blockquote>HTML เป็ นภาษา
HTML เป็ นภาษาประเภท Markup
ประเภท Markup Language ที่ใช้ในการ
Language ที่ใช้ในการสร้างเว็บเพจ
สร้างเว็บเพจ พัฒนาและกาหนดมาตรฐานโดย
พัฒนาและกาหนดมาตรฐานโดยองค์กร
องค์กร W3C</blockquote>
W3C

<q> กาหนดคาพูดที่ยกมาแบบสั้น (ใน HTML คืออะไร?<br /><q>HTML HTML คืออะไร?

Firefox จะเติมเครื่ องหมายคาพูดใ่้ห้) เป็ นภาษาประเภท Markup Language ที่ HTML เป็ นภาษาประเภท Markup
ใช้ในการสร้างเว็บเพจ พัฒนาและกาหนดมาตรฐาน Language ที่ใช้ในการสร้างเว็บเพจ
โดยองค์กร W3C</q>
 15

พัฒนาและกาหนดมาตรฐานโดยองค์กร
W3C

<cite> กาหนดแหล่งอ้างอิง (citation) (ตัว <cite>แหล่งอ้างอิง</cite> แหล่ งอ้ างอิ ง

เอียง)

<dfn> กาหนดข้อความเป็ นการนิ ยามศัพท์ (ตัว <dfn>HTML คือ ภาษาที่ใช้ในการเขียนเว็บ HTML คือ ภาษาที่ใช้ ในการเขียนเว็บเพจ
เอียง) เพจ</dfn>

10. สิสต์รายการ (List)

<ol> ใช้คู่กับ <li> ในการแสดงผลลิสต์รายการแบบมีลาดับ เราสามารถกาหนดลาดับเป็น ตัวเลข

ตัวอักษร หรือ ตัวเลขโรมัน ก็ได้ โดยใช้ attribute type และยังสามารถกาหนดจุดเริ่มต้นของการนับได้ โดย
ใช้ attributer start

tag <ol>,<li> การแสดงผล

<ol> 1. HTML
<li>HTML 2. CSS
<li>CSS 3. XHTML
<li>XHTML
</ol>

<ol start="3"> 3. HTML

<li>HTML 4. CSS
<li>CSS 5. XHTML
<li>XHTML
</ol>

<ol type="A"> A. HTML

<li>HTML</li> B. CSS
<li>CSS</li> C. XHTML
<li>XHTML</li>
</ol>

<ol type="a"> a. HTML

<li>HTML</li> b. CSS
<li>CSS</li> c. XHTML
<li>XHTML</li>
</ol>

<ol type="I" start="5"> V. HTML

<li>HTML</li> VI. CSS
<li>CSS</li> VII. XHTML
<li>XHTML</li>
</ol>

ลิสต์รายการ แบบไม่มีลาดับ โดยใช้สัญลักษณ์กากับ (Unordered List หรือ Bullet List)

 16

<ul> ใช้คกู่ ับ <li> ในการแสดงผลลิสต์รายการแบบไม่มีลาดับ เราสามารถกาหนดสัญลักษณ์หน้ารายการที่

ต้องการ ผ่าน attribute type ที่มีค่าเป็น
disc = จุดกลมทึบ
circle = จุดกลมใหญ่ ไม่ทึบ
square = สี่เหลี่ยมทึบ

ag <ul>,<li> การแสดงผล

<ul>  HTML
<li>HTML  CSS
<li>CSS  XHTML
<li>XHTML
</ul>

<ul type="disc">  HTML

<li>HTML  CSS
<li>CSS  XHTML
<li>XHTML
</ul>

<ul type="circle"> o HTML

<li>HTML o CSS
<li>CSS o XHTML
<li>XHTML
</ul>

<ul type="square">  HTML

<li>HTML  CSS
<li>CSS  XHTML
<li>XHTML
</ul>

<ul>  HTML
<li type="disc">HTML</li> o CSS
<li type="circle">CSS</li>  XHTML
<li type="square">XHTML</li>
</ul>

<ul type="disc">  HTML

<li>HTML</li> o item1
<ul type="circle"> o item2
<li>item1</li>  CSS
<li>item2</li>  XHTML
</ul>
<li>CSS</li>
<li>XHTML</li>
</ul>

11. ตาราง (Table)

Tag Description
<table> ใช้สร้างตารางข้อมูล
 17

<th> สาหรับข้อความที่เป็ นหัวคอลัมน์ จะเป็ นตัวหนา

<tr> สาหรับแถวของตาราง
<td> สาหรับข้อมูลในแต่ละ cell
<caption> คาอธิบายตาราง

<thead> กาหนดส่ วน head ของตาราง

<tbody> กาหนดส่ วน body ของตาราง
<tfoot> กาหนดส่ วน footer ของตาราง

<colgroup> กาหนดคุณสมบัติให้ groups ของคอลัมน์ในตาราง ใช้ร่วมกับ <col>

(Firefox ไม่สนับสนุน)
<col> กาหนดคุณสมบัติให้คอลัมน์ใดๆ (Firefox ไม่สนับสนุน)

สามารถกาหนดคุณสมบัติให้ตาราง <table> ผ่าน attribute ต่างๆ ได้แก่

- align="left" | "center" | "right" จัดตาแหน่งของตาราง
- border="number" กาหนดความหนาของเส้นขอบตาราง
- bordercolor="สี" สีของเส้นขอบ
- width="number" กาหนดความกว้างให้ตาราง
- bgcolor="สี" กาหนดสี background
- cellspacing="number" กาหนดช่องว่างภายใน cell
- cellpadding="number" กาหนดระยะห่างระหว่าง cell

attribute กาหนดคุณสมบัติให้แถวของตาราง <tr> ได้แก่

- align="left" | "center" | "right" จัดตาแหน่งของข้อความใน cell แนวนอนทั้งแถว
- valign= "top" | "middle" | "bottom" | "baseline" จัดตาแหน่งของข้อความใน cell แนวตั้งทัง้ แถว
- bgcolor ="สี" กาหนดสี background ให้ทั้งแถว

attribute กาหนดคุณสมบัติให้ cell ข้อมูล <td> ได้แก่

- align="left" | "center" | "right" จัดตาแหน่งของข้อความใน cell แนวนอน
- valign= "top" | "middle" | "bottom" | "baseline" จัดตาแหน่งของข้อความใน cell แนวตั้ง
- width="ความกว้างของคอลัมน์"
- height="ความสูงของแถว"
- colspan="number" จานวนคอลัมน์ที่จะให้รวมเป็นคอลัมน์เดียวกัน
- rowspan="number" จานวนแถวที่จะให้รวมแถวเป็นแถวเ์ดียวกัน
- bgcolor="สี" กาหนดสี background ให้ cell
 18

ตัวอย่าง code ตาราง

<table align="center" border="1" width="80%" bgcolor="#FFFF99">
<tr>
<td>รหัสพนักงาน</td>
<td>ชื่อ</td>
<td align="right">เงินเดือน</td>
</tr>
<tr>
<td>01</td>
<td>อานาจ</td>
<td align="right">30,000</td>
</tr>
<tr>
<td>02</td>
<td>สมชาย</td>
<td align="right">25,000</td>
</tr>
<tr>
<td>03</td>
<td>วีระ</td>
<td align="right">20,000</td>
</tr>
</table>

12. การกาหนด Link

1. การเชื่อมโยงไปจุดต่างๆ ในหน้าเว็บเพจปัจจุบัน
ในหน้าเว็บเพจที่ข้อมูลยาวมาก เราอาจทาหัวข้อกาหนดไว้ให้เลือกอ่านได้ง่ายๆ เมื่อผู้ชมเลือกหัวข้อ
แล้ว เราก็เลื่อน scrollbar ไปยังตาแหน่งเนื้อหาของหัวข้อนั้นๆ
กาหนดลิงค์เชื่อมโยง ไปตาแหน่ง anchor

<a href="#anchor name" title="คาอธิบายลิงค์">ลิงค์</a>

2. การเชื่อมโยงไปยังหน้าเว็บเพจอื่นๆ หรือเว็บไซต์ อื่นๆ

<a href="url" target="window name" title="คาอธิบายลิงค์">

ค่าที่ใช้ใน target
 19

"_blank" เปิดหน้าเว็บเพจในหน้าต่าง Browser ใหม่

"_self" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม และ Frame เดิม
"_parent" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม
"_top" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิมแบบเต็มหน้า และยกเลิก frame ทั้งหมด
หรือ จะใส่เป็นชื่อหน้าต่างที่เรากาหนดก็ได้

13. รูปภาพ (Image)

การใส่รูปภาพในเว็บเพจสามารถทาได้ดังนี้

<img src="ไฟล์รูปภาพ" alt="คาอธิบายรู ปภาพ" width="number" height="number">

Attribute ของรูปภาพ ได้แก่

- src="ไฟล์รูปภาพ"
- alt="คาอธิบายรูปภาพ"
- width="number" ความกว้างของรูป ค่าของความกว้างมีหน่วยเป็น pixel โดยไม่ต้องเติมหน่วยตามหลัง
แต่สามารถใส่เป็น % ได้ โดยเติม % ตามหลัง เช่น width=”200” หรือ width=”50%”
- height="number" ความสูงของรูป ค่าของความสูงมีหน่วยเป็น pixel โดยไม่ต้องเติมหน่วยตามหลัง แต่
สามารถใส่เป็น % ได้ โดยเติม % ตามหลัง เช่น width=”200” หรือ width=”50%”

14. แบบฟอร์ม (Form)

Form มักจะใช้รับค่าจากผู้ใช้งานเว็บ และจะทางานร่วมกับภาษาโปรแกรมมิ่งฝั่ง Server หรือ

Server side script โครงสร้างของโค้ดในการสร้างแบบฟอร์มมีดังนี้

โครงสร้าง Element สาหรับสร้างแบบฟอร์ม

<form name="form_name" method="get | post" action="url" target="window
name">....</form>

- name="ชื่อของ Form"
- method="get | post" เป็นรูปแบบของวิธีในการส่งข้อมูล มี 2 รูปแบบ
get เป็นตัวรับ - ส่ง ข้อมูลขนาดจากัดจาก Server ไม่เกิน 256 ตัวอักษร
post เป็นตัวรับ - ส่ง ข้อมูลไม่จากัดจาก Server
- action="URL" คือตาแหน่งหรือ URL ของ Script ที่วางไว้ที่ Server
- target="_blank | _self | _parent" หน้าต่างที่จะให้ผลของ Script แสดงผล
 20

ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ

1. <input>...</input>
2. <select>...</select>
3. <textarea>
4. อื่นๆ

ศึกษาเพิ่มเติมที่ http://www.enjoyday.net/webtutorial/html/html_chapter15.html

อ้างอิง
http://www.enjoyday.net/webtutorial/html/

หมายเหตุ ใช้เพื่อประกอบการเรียนการสอนเท่านั้น