.jpg)
.jpg)
.jpg)
บทนำ HTML
.jpg)
HTML
ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบัน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 หรือ fire fox เปิดดูก็จะเห็นผลตามรูปด้านล่าง
การทำงานของ 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
.jpg)
HTML
การใช้งานในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้
1. คำสั่ง หรือ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
2. Attributes
Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย
3. not case sensitive
หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน
โครงสร้างของหลักของ HTML
โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ
1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง
2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง
|
<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
ในบทความนี้จะเป็นเนื้อหาของคำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้าซึ่งการเรียนรู้ที่ดีที่สุดคือการลองพิมพ์ดู ดังนั้น Hellomyweb.com จึงได้ทำ text editor และหน้าจอแสดงผลไว้ด้วยกันให้คุณลองพิมพ์ลองแก้ไขกันดู โดยคลิกที่ลิงก์ที่หัวข้อได้เลย
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง
รูปแบบ p tag
|
<p> ย่อหน้าที่ 1 </p> <p> ย่อหน้าที่ 2 </p> <p> ย่อหน้าที่ 3 </p> |
2.คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง
รูปแบบ br tag
|
บรรทัดที่ 1 <br> บรรทัดที่ 2 <br> บรรทัดที่ 3 <br> |
3.คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่น ขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ
รูปแบบ h tag
|
<h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6> |
4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น
รูปแบบ hr
|
<p>เนื้อหาบทที่ 1</p> <hr> <p>เนื้อหาบทที่ 2</p> <hr> |
5.คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')
รูปแบบ align
|
<h3 align = 'left'>ชิดซ้าย</h3> <h3 align = 'right'>ชิดขวา</h3> <h3 align = 'center'>จัดเข้ากลาง</h3> |
6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้
รูปแบบ bgcolor
|
<body bgcolor ='green'> <h1> ดูสีพื้นหลัง </h1> </body> |
7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข
รูปแบบการเขียนคำบรรยาย source code
| <!-- คำบรรยาย source code --!> |
เชื่อมต่อเอกสารของเราด้วย hyperlink
HTML
hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์เรามาลองสร้าง hyperlink กันง่ายๆดู
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.สร้าง hyperlink
ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ
1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง
รูปแบบของ hyperlink ภายใน directory เดียวกัน
| <a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
รูปแบบของ hyperlink จาก directory ที่สูงกว่า
| <a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น
| <a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a> |
1.2. ลิงค์กับเว็บภายนอก
รูปแบบของ hyperlink กับเว็บภายนอก
| <a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a> |
2.สร้าง hyperlink ด้วยรูปภาพ
ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ
รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ
|
<a href='หน้าที่ต้องการเชื่อมโยง'> <img border = '0' src ='ที่อยู่ภาพ/ชื่อภาพ'> </a> |
3.สร้าง hyperlink ในหน้าเดียวกัน
ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>
รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน
สร้างจุดที่ต้องการจะลิงค์ไป
| <a name='ชื่อจุดลิงค์'> </a> |
สร้างลิงค์
| <a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a> |
4.เปิด browser ใหม่เมื่อคลิกที่ลิงค์
การสร้าง link ให้เปิด browser ใหม่เราจะใช้ Attributes โดยพิมพ์ target="_blank" ใน a tag
เปิด browser ใหม่เมื่อคลิกที่ลิงค์
<a href="เป้าหมาย" target="_blank">ตัวอักษรที่ใช้แสดง</a>