หน่วยการเรียนรู้ที่ 3 html

เอกสารประกอบรายวิชาการเขียนเว็บไซต์ด้วยภาษา HTML หน่วยที่ 3 ความรู้เบื้องต้นเกี่ยวกับภาษา HTML

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

สาระการเรียนรู้
1. ภาษา HTML
2. โครงสร้างของเอกสาร HTML
3. การสร้างเว็บเพจเบื้องต้น
4. คาสั่งเบื้องต้นสาหรับการสร้างเว็บเพจ

ผลการเรียนรู้ที่คาดหวัง
1. อธิบายลักษณะโดยทั่วไปของภาษา HTML ได้
2. สามารถบอกโครงสร้างของเอกสาร HTML
3. สามารถบอกขั้นตอนในการออกแบบเว็บเพจเบื้องต้น
4. สามารถบอกคาสั่งเบื้องต้นสาหรับการสร้างเจ็บเพจ
5. มีทักษะในการสร้างเว็บเพจโดยการใช้คาสั่งเบื้องต้น

คุณครูจิรัชยาพร ทองลือ หน้า 1

ภาษา HTML
HTML เป็นตัวย่อมาจาก Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บ
บราวเซอร์ในอินเตอร์ โดยสามารถนาเสนอข้อมูลตัวอักษร รวมทั้งเชื่อมต่อเพื่อ แสดงภาพ, เสียง และไฟล์ในรูปแบบ
อื่นๆ
ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ
1. ส่วนของคาสั่ง (tag) เป็นส่วนที่กาหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ใน
เครื่องหมาย < ... >
2. ส่วนของบทความทั่วๆ ไป เป็นส่วนของข้อความที่เราต้องการแสดงผล
ตัวอย่างการใช้งานภาษา HTML
ลองพิมพ์ตามตัวอักษรด้านล่างนี้ ใน Text editer เช่น Notepad
<html>
<head>
<title> หัวข้อเรื่อง ของหน้านี้ </title>
</head>
<body>
เนื้อหาที่จะแสดงใน web browser
</body>
</html>

เมื่อพิมพ์เสร็จก็ให้ save ในชื่อ mypage.html และลองใช้ web browser อย่าง internet explorer เปิดดู

การใช้งานโปรแกรม notepad
โปรแกรม notepad เป็นโปรแกรมที่อยู่ในประเภท Text editor ใช้ในการแก้ไขข้อความ มีความสาคัญมากใน
การทาเว็บไซต์ เพราะจริงๆแล้วเว็บไซต์ที่เราเห็นว่ามีหน้าตาสวยงาม มีรูปภาพ หรือมีการเคลื่อนไหวต่างๆ ซึ่งจริงๆแล้ว
ตัวเว็บไซต์นั้นก็ประกอบด้วย ตัวหนังสือมากมายรวมกันอยู่เป็นไฟล์ (เราจะเรียกว่าเว็บเพจ) แต่มีการถูกแปลงที่เครื่อง
ของคุณให้เป็นรูป หรือหน้าตาตามที่เราเห็น

1. เปิดโปรแกรม Notepad ขึ้นมา โดยไปที่ All programs > Accessories > Notepad


จะได้โปรแกรม notepad

2. ให้พิมพ์ข้อความต่อไปนี้ ใน notepad



เมื่อพิมพ์เสร็จแล้วให้ทาการบันทึก โดยไปที่เมนู File เลือก save as จะมีหน้าต่างออกมา ให้เราใส่ชื่อไฟล์เป็น
mypage.html และเลือกชนิดไฟล์ (save as type) เป็นแบบ All files จากนั้นก็ save ไฟล์


การทางานของ code ด้านบน
1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ
2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วน
ของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google, yahoo) การ
ใช้งานก็จะมีคาสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title>, <meta> และอื่นอีกมากมาย
3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคาสั่งนี้จะอยู่ใน title bar ของ web page
4. <body> .......... </body> ตัวอักษรที่อยู่ในคาสั่งนี้จะแสดงส่วนแสดงผลของ web browser

โครงสร้างคาสั่งของ HTML
รายละเอียดคาสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้
1. คาสั่ง หรือ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคาสั่ง หรือการลงรหัสคาสั่ง HTML ภายใน
เครื่องหมาย less-than bracket (<) และ greater-than bracket (>) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, เป็นต้น
Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
2. Attributes
Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น ... เป็นการบอกว่าให้
อักษรที่อยู่ใน tag นี้ชิดซ้าย
3. not case sensitive
หมายถึง จะพิมพ์ หรือ ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

โครงสร้างหลักของ HTML
โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคาสั่งที่ใช้จะแยกเป็น 2
ส่วนคือ
1. head คาสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page
โดยตรง
2. body คาสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดง
ที่ web browser โดยตรง
<html>
<head>
คาสั่งในหัวข้อของ head
</head>
<body>
คาสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล
</body>
</html>

1. คาสั่งในหัวข้อของ head (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title),
ชื่อผู้จัดทาเว็บ (Author), คีย์เวิร์ดสาหรับการค้นหา (Keyword) โดยมี Tag สาคัญ คือ
<HEAD>
<TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

<META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">
<META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 ">
</HEAD>

TITLE
ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดย
ข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser
META
Tag META จะไม่ปรากฏผลบนเบราว์เซอร์ แต่จะเป็นส่วนสาคัญ ในการจัดอันดับบัญชีเว็บ สาหรับผู้ให้บริการ
สืบค้นเว็บ (Search Engine เช่น google, yahoo)
charset = TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรือ
อาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนาให้ใช้เป็น charset=utf-8
keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คาได้โดยใช้เครื่องหมาย (,) ในการ
คั่นระหว่างคา
การพิมพ์ชุดคาสั่งของภาษาเอชทีเอ็มแอล (HTML) สามารถใช้ได้ทั้งตัวอักษรพิมพ์เล็กและตัวอักษรพิมพ์ใหญ่
หรือผสมกันทั้งสองแบบ และสามารถใช้ย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถทาได้อย่างอิสระ โปรแกรมเว็บ
เบราว์เซอร์จะไม่สนใจเกี่ยวกับระยะเว้นบรรทัด ย่อหน้าหรือช่องว่าง แต่จะเป็นประโยชน์สาหรับการอ่านคาสั่งของ
ผู้สร้างเอกสารเว็บ และประโยชน์ทาการพัฒนาเว็บเพจ

2. คาสั่งในส่วนของ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จานวนมาก ขึ้นอยู่กับลักษณะ
ของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ
ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทางานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของ
ข้อมูล ที่ต้องการนาเสนอ การป้อนคาสั่งในส่วนนี้ ไม่มีข้อจากัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คาสั่งก็ได้ แต่
มักจะยึดรูปแบบที่อ่านง่าย คือ การทาย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคาสั่งทั้งหมดภายใต้ Tag <BODY>
</BODY> และแบ่งกลุ่มคาสั่งได้ดังนี้
 กลุ่มคาสั่งเกี่ยวกับการจัดรูปแบบเอกสาร
 กลุ่มคาสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร
 กลุ่มคาสั่งการทาเอกสารแบบรายการ (List)
 กลุ่มคาสั่งเกี่ยวกับการทาลิงค์
 กลุ่มคาสั่งจัดการรูปภาพ
 กลุ่มคาสั่งจัดการตาราง (Table)
 กลุ่มคาสั่งควบคุมเฟรม
 กลุ่มคาสั่งอื่นๆ

คาสั่งเบื้องต้นสาหรับการสร้างเว็บเพจ

คาสั่งเริ่มต้น
คาสั่งเริ่มต้นที่ใช้สาหรับการบอกว่าเอกสารนั้น คือเอกสารเว็บที่เป็นภาษาเอชทีเอ็มแอล คือคาสั่ง <HTML>
</HTML> เป็นการบอกจุดสิ้นสุดของเอกสารเอชทีเอ็มแอล โดยคาสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราว์เชอร์ แต่
จะเขียนเพื่อบอกให้ทราบว่าเอกสารนี้เป็นเอกสารของภาษาเอชทีเอ็มแอล (HTML) กล่าวคือข้อความที่อยู่ระหว่างคาสั่ง
<HTML> และ</HTML> เป็นเอกสารที่เป็นภาษาเอชทีเอ็มแอลนั่นเอง
<HTML> (ภาษาเอชทีเอ็มแอล) </HTML>

คาสั่งกาหนดส่วนหัวของเอกสารเว็บ
ดังที่กล่าวมาแล้วว่าเอกสารเอชทีเอ็มแอลนั้น แบ่งออกเป็น 2 ส่วน คือ ส่วนหัวเรื่องของเอกสารเว็บ และส่วน
เนื้อหาเอกสารเว็บ โดยคาสั่งที่ใช้บอกส่วนหัวเรื่องของเอกสารเว็บนั้น คือคาสั่ง<HEAD>…</HEAD> ซึ่งคาสั่งที่อยู่
ภายในส่วนหัวของเอกสารเว็บนั้น เป็นคาสั่งที่ใช้กาหนดข้อความที่ใช้เป็นชื่อเรื่องของเอกสารเอชทีเอ็มแอล และคาสั่งที่
ใช้สาหรับบอกคาสาคัญ (Keyword) ของเอกสารเอชทีเอ็มแอล เพื่อใช้ในการค้นหาเอกสารนั้นบนระบบเครือข่าย
อินเทอร์เน็ต
<HEAD> (คาสั่งย่อยสาหรับส่วนหัวของเอกสาร) </HEAD>

คาสั่งกาหนดข้อความในส่วนหัวของโปรแกรมเว็บเบราว์เซอร์
ค าสั่ ง ที่ ใ ช้ ส าหรั บ ก าหนดข้ อ ความที่ จ ะปรากฏบนส่ ว นหั ว ของของโปรแกรมเว็ บ เบราว์ เ ซอร์ คื อ ค าสั่ ง
<TITLE>…</TITLE> หากต้องการให้ข้อความใดปรากฏที่ตาแหน่งใส่วนหัวของโปรแกรม เว็บเบราว์เซอร์ ทาได้โดยเอา
ข้อความที่ต้องการแสดงผลนั้นใส่เข้าไปในระหว่างคาสั่งเปิด <TITLE> และคาสั่งเปิด </TITEL> ซึ่งคาสั่งนี้จะอยู่ในส่วน
หัวของเอกสารเว็บ
<TITLE> (ข้อความที่ต้องการให้ปรากฏที่ส่วนหัวของโปรแกรมเว็บเบราว์เซอร์) </TITLE>

คาสั่งกาหนดส่วนเนื้อหาของเอกสารเว็บ
คาสั่งที่ใช้กาหนดส่วนที่เป็นเนื้อหาของเอกสารเว็บคือ คาสั่ง <BODY> …</BODY> ซึ่งใช้เป็นคาสั่งสาหรับ
บอกแก่โปรแกรมเว็บเบราว์เซอร์ว่า ส่วนที่อยู่ระหว่างคาสั่งนี้เป็นส่วนที่จะนาไปแสดงผลบนโปรแกรมเว็บเบราว์เซอร์ ซึ่ง
อาจประกอบไปด้วย ตัวอักษร รูปภาพ เป็นต้น
<BODY> …</BODY>

ตัวอย่างที่ 3.1
<HTML>
<HEAD>
<TITLE> ชื่อเรื่องของเอกสารHTML </TITLE>
</HEAD>
<BODY>
เอกสาร HTML เอกสารแรก
</BODY>

ผลลัพธ์ตัวอย่างที่ 3.1

การกาหนดสีพื้นหลังและสีของตัวอักษร
การกาหนดสีพื้นหลังของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอล นั้นสามารถทาได้โดยใช้การอธิบายลักษณะ
พิเศษ (Attribute) ของคาสั่ง <BODY> โดยการกาหนดสีของพื้นหลังของเอกสารและสีของตัวอักษรในเอกสารได้ดังนี้
การกาหนดสีพื้นหลังเอกสาร
การกาหนดสีพื้นหลังของเอกสารเว็บหรือเอกสารเอชทีเอ็มแอล นั้นสามารถทาได้โดยใช้การอธิบายลักษณะ
พิเศษ (Attribute) คือ BGCOLOR ซึ่งการกาหนดสีพื้นของเอกสารเอชทีเอ็มแอลนั้น สามารถกาหนดภายใต้คาสั่งเปิด
ของคาสั่ง <BODY> โดยการกาหนดสีพื้นหลังของเอกสารเอชทีเอ็มแอลสามารถแสดงได้ดังนี้
<BODY BGCOLOR=สีที่ต้องการ> จะมี“สีที่ต้องการ”หรือไม่มเี ครื่องหมาย” ”
ก็ได้
......
</BODY>

โดยสีที่ต้องการกาหนดนี้สามารถทาการกาหนดได้ 2วิธี คือ
 ระบุชื่อของสีที่ต้องการ เช่น Blue, Green, Red, Yellow เป็นต้น
ตัวอย่างที่ 3.2 การกาหนดพื้นสีหลัง โดยการระบุชื่อ
<HTML>
<HEAD>
<TITLE> การกาหนดสีพื้นหลังโดยการกาหนดสี </TITLE>
</HEAD>
<BODY BGCOLOR=Yellow >
การกาหนดสีพื้นหลังของเอกสาร โดยการกาหนดเป็นสีเหลือง
</BODY>
</HTML>

 ระบุตัวเลข โยใช้การกาหนดค่าสีในระบบเลขฐาน 16 จานวน 6 หลักสาหรับการผสมสี (RGB) โดยค่าตัวเลข 2
หลักแรกหมายถึงระดับสีแดง ตัวเลข 2 หลักต่อมาหมายถึงระดับของสีเขียว และตัวเลข2หลักสุดท้าย หมายถึง
ระดับของสีน้าเงิน
ตัวอย่างที่ 3.3 การกาหนดสีพื้นหลัง โดยการระบุตัวเลข
<HTML>
<HEAD>
<TITLE> การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลข </TITLE>
</HEAD>
<BODY BGCOLOR= #00FFFF>
การกาหนดสีพื้นหลังของเอกสาร โดยการระบุตัวเลขเป็น 00FFFF
</BODY>
</HTML>

การกาหนดสีของตัวอักษร
การกาหนดสีของตัวอักษรทั้งหมดของเอกสารเว็บหรือเอกสาร HTML นั้น สามารถ ทาได้โดยใช้การอธิบาย
ลักษณะพิเศษ (Attribute) คือ TEXT ซึ่งกาหนดอยู่ที่ตาแหน่งสาคัญเปิดของคาสั่ง <BODY>รูปแบบของคาสั่งสาหรับ
การกาหนดสีของเอกสารเว็บ สามารถทาได้ดังนี้
<BODY TEXT = สีทีต้องการ> จะมีเครื่องหมาย “ ” หรือไม่มีกได้
็
......
</BODY>

โดยสีที่ต้องการกาหนดมีดังนี้ สามารถทาการกาหนดได้ 2 วิธีคือ
 ระบุชื่อของสีที่ต้องการ เช่น Blue, Green, Red, Yellow เป็นต้น
 ระบุตัวเลข โดยใช้การกาหนดสีในระบบเลขฐาน 16
ตัวอย่างที่ 3.4 การกาหนดสีตัวอักษร โดยการระบุชื่อ
<HTML>
<HEAD>
<TITLE> การกาหนดสีของตัวอักษร โดยการกาหนดสี </TITLE>
</HEAD>
<BODY TEXT= Blue>
การกาหนดสีของตัวอักษร โดยการกาหนดให้เป็นสีน้าเงิน
</BODY>
</HTML>

ตัวอย่างที่ 3.5 การกาหนดสีตัวอักษร โดยการระบุตัวเลข
<HTML>
<HEAD>
<TITLE>การกาหนดสีของตัวอักษร โดยการะบุรหัสสี</TITLE>
</HEAD>
<BODY TEXT= #FF00FF>
การกาหนดสีของตัวอักษร โดยการระบุรหัสสีเป็น FF00FF
</BODY>
</HTML>

ตัวอย่างที่ 3.6 การกาหนดสีพื้นหลังและตัวอักษร
<HTML>
<HEAD>
<TITLE>การกาหนดสีพื้นหลังและตัวอักษรของเอกสาร</TITLE>
<HEAD>
<BODY BGCOLOR=Yellow TEXT=#FF00FF>
การกาหนดสีพื้นหลังและตัวอักษร
</BODY>
</HTML>

หน่วยการเรียนรู้ที่ 3 html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to หน่วยการเรียนรู้ที่ 3 html

Similar to หน่วยการเรียนรู้ที่ 3 html (20)

More from devilp Nnop

More from devilp Nnop (14)

หน่วยการเรียนรู้ที่ 3 html