HTML ในตอนที่ 2 นี้จะกล่าวถึงวิธีแสดงข้อความบนเว็บเพจ ซึ่งเราสามารถแสดงข้อความทั้งย่อหน้า (block-element) หรือนำเอาข้อความย่อยๆ มาเรียงต่อกันก็ได้ (inline-element) แน่นอนว่า บทความนี้จะช่วยให้เราเข้าใจว่า HTML คืออะไร ได้ดียิ่งขึ้น
กำหนดย่อหน้าด้วยแท็ก <p>
วิธีแสดงข้อความบนเว็บเพจ มีด้วยการหลายแบบ แต่ถ้าต้องการแสดงข้อความเป็นย่อหน้า เราจะใช้แท็ก <p> ข้อความในแต่ละย่อหน้าอยู่ภายในบล็อกของ <p></p> ถ้าเราต้องการแสดงหลายย่อหน้า ก็ใช้แท็ก <p> หลายๆ ชุด ดังตัวอย่างต่อไปนี้
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE HTML> <html> <head> <title>หัวเรื่องที่ใช้แสดงบนแท็บของบราวเซอร์</title> <meta charset = "UTF-8"> </head> <body> <p>ย่อหน้าแรก อธิบายประวัติความเป็นมาของ Thaidemy คอร์สออนไลน์ วิดีโอคอร์ส สื่อการเรียนการสอนคุณภาพ เรียนฟรี ไม่จำกัดจำนวนครั้ง จุดประสงค์เพื่อเผยแพร่ความรู้แก่คนไทยทุกๆ คน</p> <p>ย่อหน้าที่สอง นักเรียนที่อยู่ตามที่ห่างไกล หากมีอินเทอร์เน็ต ก็สามารถเรียนออนไลน์กับ Thaidemy ได้ฟรี </p> </body> </html> |
ข้อความในแต่ละย่อหน้าจะอยู่ภายในแท็ก <p></p> เช่น <p>ย่อหน้าแรก</p> ดังนั้นถ้าเราต้องการหลายๆ ย่อหน้า ก็ให้กำหนดแท็ก <p></p> ขึ้นมาหลายๆ แท็ก แล้วกรอกข้อความลงไป
เนื่องจากแท็ก <p> เป็น block-element ดังนั้น จึงจะขึ้นบรรทัดใหม่เสมอ และยังใช้ความกว้างเต็ม 100% อีกด้วย (อ้างอิงกับ Parent element)
กำหนดหัวข้อหลักด้วยแท็ก <h1>,<h2>,<h3>,<h4>,<h5> หรือ <h6>
เพื่อให้ข้อความที่แสดงบนเว็บเพจสามารถอ่านได้ง่าย เราควรจัดความสำคัญของเนื้อหา โดยกำหนดหัวข้อหลัก หัวข้อรอง หัวข้อย่อย และส่วนที่เป็นเนื้อหา การกำหนดหัวข้อใน HTML จะใช้แท็ก <h1>,<h2>,<h3>,<h4>,<h5> หรือ <h6>โดยจะเรียงลำดับความสำคัญเริ่มต้นที่แท็ก <h1> ส่วนเนื้อหาของเว็บเพจเราก็จะใช้แท็ก <p>
ข้อความที่ต้องการแสดงเป็นหัวข้อใหญ่ เราจะใส่ลงในแท็ก <h1></h1> เช่น <h1>หัวข้อใหญ่สุด</h1> ส่วนข้อความที่เป็นหัวข้อรองลงมา ก็จะใส่ลงในแท็ก <h2>,<h3>,<h4>,<h5> หรือ <h6> ตามลำดับ ดังตัวอย่างต่อไปนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML> <html> <head> <title>หัวเรื่องที่ใช้แสดงบนแท็บของบราวเซอร์</title> <meta charset = "UTF-8"> </head> <body> <h1>เกี่ยวกับ Thaidemy</h1> <p>Thaidemy คอร์สออนไลน์ วิดีโอคอร์ส สื่อการเรียนการสอนคุณภาพ เรียนฟรี ไม่จำกัดจำนวนครั้ง</p> <h2>เรียนฟรีกับ Thaidemy</h2> <p>หากมีอินเทอร์เน็ต ก็สามารถเรียนออนไลน์กับ Thaidemy ได้ฟรี </p> <h3>รายชื่อคอร์สยอดนิยม</h3> <p>คอร์สพื้นฐานภาษา swift</p> <p>คอร์สสร้างเว็บไซต์</p> </body> </html> |
แท็ก <h1>,<h2>,<h3>,<h4>,<h5> หรือ <h6> มีลักษณะเป็น block-element เช่นเดียวกับแท็ก <p> ดังนั้น เมื่อเรากำหนดแท็ก <h1>,<h2>,<h3>,<h4>,<h5> หรือ <h6> ก็จะขึ้นบรรทัดใหม่เสมอ และใช้ความกว้าง 100% เต็มพื้นที่
เน้นข้อความด้วยแท็ก <strong>, <em> และ <u>
วิธีเน้นข้อความให้เป็นตัวหนา ตัวเอียงหรือขีดเส้นใต้นั้น เราจะใช้แท็ก <strong>, <em> และ <u> ตามลำดับ ซึ่งแท็กเหล่านี้จะเป็น inline-element คือ เมื่อกำหนดลงไปบนเว็บเพจจะไม่มีการขึ้นบรรทัดใหม่
- การทำให้ข้อความเป็นตัวหนา เราจะต้องใส่ข้อความแทรกลงไปในแท็ก <strong></strong> เช่น <strong>เน้นข้อความตรงนี้</strong>
- การทำให้ข้อความเป็นตัวเอียง เราสามารถแทรกข้อความลงในแท็ก <em></em> เช่น <em></em> ตัวอย่างเช่น <em>ข้อความนี้เอียงแล้วนะ</em>
- ส่วนวิธีขีดเส้นใต้ข้อความ สามารถทำได้ง่ายๆ โดยให้แทรกข้อความลงในแท็ก <u></u> เช่น <u>เน้นด้วยการขีดเส้นใต้</u>
เราสามารถทำให้ข้อความเป็นทั้งตัวหนา ตัวเอียง และขีดเส้นใต้พร้อมกัน โดยการใส่แท็ก <strong>, <em> และ <u> ครอบข้อความ ดังตัวอย่างต่อไปนี้
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE HTML> <html> <head> <title>หัวเรื่องที่ใช้แสดงบนแท็บของบราวเซอร์</title> <meta charset = "UTF-8"> </head> <body> <h1>เกี่ยวกับ Thaidemy</h1> <p><strong><em><u>Thaidemy</u></em></strong> คอร์สออนไลน์ เรียนฟรี ไม่จำกัดจำนวนครั้ง</p> </body> </html> |
จากตัวอย่างข้างบน <strong><em><u>Thaidemy</u></em></strong> คือ กำหนดให้ขีดเส้นใต้ให้ข้อความ Thaidemy ด้วยโค้ต <u>Thaidemy</u> จากนั้นก็กำหนดให้เป็นตัวเอียง <em><u>Thaidemy</u></em> และสั่งให้เป็นตัวหนา <strong><em><u>Thaidemy</u></em></strong> ตามลำดับ (พิจารณาคำสั่งจากในไปนอก)
แบ่งเนื้อหาบนเว็บเพจเป็นส่วนๆ ด้วยแท็ก <div>
บนเว็บเพจ มักจะมีการแบ่งข้อมูลออกเป็นส่วนๆ ซึ่งที่นิยมใช้คือแท็ก <div></div> ซึ่งแท็ก <div> ถือว่าเป็น Block Element ที่สามารถบรรจุ Element อื่นๆ ใส่เข้าไปได้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> </head> <body> <div> <p>ข้อความในย่อหน้าแรก</p> <p>ข้อความในย่อหน้าที่สอง</p> </div> <div> <p>ข้อความในย่อหน้าที่สาม</p> <p>ข้อความในย่อหน้าที่สี่</p> </div> </body> </html> |
จากข้างบนเราได้ใช้แท็ก <div> เพื่อแบ่งข้อมูลออกเป็น 2 ส่วน คือ แท็ก <div> บน กับแท็ก <div> ด้านล่าง ซึ่งผลลัพธ์การแสดงบนเว็บเพจเราอาจไม่รู้ แต่ภายในโครงสร้างของ HTML การใช้ แท็ก <div> จะทําเพื่อแบ่งและจัดโครงสร้างของแท็กต่างๆ
ต่อไปนี้เป็นตัวอย่างการใช้ แท็ก <div> ซ้อนแท็ก <div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> </head> <body> <div> <p>ข้อความอยู่ในแท็ก div หลัก</p> <div> <p>ข้อความในย่อหน้าแรก อยู่ในแท็ก div ย่อย</p> </div> </div> </body> </html> |
เมื่อทดลองเปิดโค๊ตนี้บนบราวเซอร์ ผู้ใช้จะไม่รู้ว่ามีการใช้ <div> แบ่งข้อมูล เพราะจะเห็นเป็นย่อหน้าธรรมดาเท่านั้นเองดังรูป
และเพื่อให้เห็นความแตกต่างระหว่างข้อความที่อยู่ในแท็ก <div> หลักกับแท็ก <div> ย่อย ผมจึงได้เพิ่มโค้ตเพื่อกําหนดสีอักษรให้เป็นสี แดง เฉพาะในแท็ก <div> ย่อย ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> </head> <body> <div> <p>ข้อความอยู่ในแท็ก div หลัก</p> <div style="color:red;"> <p>ข้อความสีแดงอยู่ในแท็ก div ย่อย</p> </div> </div> </body> </html> |
จากโค๊ตข้างบนมีการกําหนด Attribute ที่ชื่อว่า Style ซึ่งจุดประสงค์คือ การกําหนด style ให้กับ แท็ก <div> โดยในที่นี้กําหนด Value ก็คือ การทําให้เป็นสีแดงโดยใช้คําสั่ง <div style = “color:red;”>
กําหนด Attribute ให้กับแท็ก <div>
Style พื้นฐานที่ต้องทราบ คือ การกําหนดความกว้างและความสูง โดยกําหนดด้วย width และ height ดังตัวอย่างต่อไปนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> </head> <body> <div style = "color:white; background-color:blue; width:240px; height: 200px;" > <p>ข้อความในแท็ก p</p> </div> </body> </html> |
จากโค๊ตตัวอย่าง ได้กําหนด Attribute ที่ชื่อว่า Style ซึ่งเป็นการปรับแต่ง Style ให้กับแท็ก <div> โดยรูปแบบที่ใช้มีดังนี้
|
1 |
<div style = "color:white;" ></div> |
จะเห็นได้ว่าในเครื่องหมาย Double Quote จะมีค่า color ตามด้วย : จากนั้นก็บอกชื่อสี แล้วปิด ท้ายด้วย ; ซึ่งถ้าเราต้องการกําหนดค่าอื่นๆ เช่นเปลี่ยนสีพื้นเป็นสีน้ําเงิน ก็ให้เพิ่มคําสั่งใน style ลง ไปดังนี้
|
1 |
<div style = "color:white; background-color:blue;" ></div> |
ในการใช้งานจริง เราจะไม่นิยมวิธีกําหนด Style ด้วยวิธีข้างต้น แต่จะกําหนด style ผ่านคําสั่ง CSS ดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> <style> div { color:white; background-color:blue; width:240px; height:200px; } </style> </head> <body> <div> <p>ข้อความในแท็ก p</p> </div> </body> </html> |
คําสั่ง CSS จะอยู่ภายในแท็ก <style></style> โดยเราจะต้องเลือกว่าจะใช้ CSS แก้ไขใน ส่วนใดของเว็บเพจ ซึ่งจากโค๊ต ได้เลือกแท็ก div { } จากนั้นก็ได้กําหนดว่า ต้องการแก้ไขอะไรในแท็ก <div> นี้บ้าง ซึ่งรายละเอียดวิธีใช้งาน CSS สามารถศึกษาได้จากบทความของ Thaidemy : พื้นฐาน CSS
ค่าสีที่ใช้ใน HTML
สีที่ใช้ใน HTML คือ 32bit สามารถใช้ชื่อสี เช่น red, green, blue, yellow, black, white, cyan หรือสีอื่นๆ ดังตารางข้างล่างนี้
| ชื่อสี | โค้ตสี | ชื่อสี | โค้ตสี |
|---|---|---|---|
| Red | #FF0000 | White | #FFFFFF |
| Cyan | #00FFFF | Silver | #C0C0C0 |
| Blue | #0000FF | Gray | #808080 |
| DarkBlue | #0000A0 | Black | #000000 |
| LightBlue | #ADD8E6 | Orange | #FFA500 |
| Purple | #800080 | Brown | #A52A2A |
| Yellow | #FFFF00 | Maroon | #800000 |
| Lime | #00FF00 | Green | #008000 |
| Fuchsia | #FF00FF | Olive | #808000 |
จากตารางข้างบน จะเห็นได้ว่าได้แสดงโค๊ตสีในรูปของเลขฐาน 16 จํานวน 6 ชุด โดยมี เครื่องหมาย # นําหน้า ซึ่งหากเราต้องการสีที่นอกเหนือจากสีตามตารางข้างต้น ก็สามารถกําหนด ด้วยตัวเองได้ ดังตัวอย่างต่อไปนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> <style> div { //ใช้ css เลือกแท็ก div มาปรับแต่ง color:fuchsia; //กำหนดสีอักษรเป็นสีชื่อว่า fuchsia background-color:#e4e4e4; //กำหนดสีพื้นหลังโดยใช้โค้ตสี #e4e4e4 width:240px; //กำหนดความกว้าง 240 พิกเซล height:200px; //กำหนดความสูง 200 พิกเซล } </style> </head> <body> <div> <p>ข้อความในแท็ก p</p> </div> </body> </html> |
Parent element กับ Child element
ดังที่กล่าวไปแล้วว่า block element เป็น element ที่สามารถบรรจุ element อื่นๆ ลงไป ได้ ทําหน้าที่คล้ายกับกล่อง ที่สามารถบรรจุกล่องย่อยๆ เราสามารถซ้อน element ได้หลายระดับ ดัง โค๊ตตัวอย่างต่อไปนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE HTML> <html> <head> <title>ทดสอบแท็ก div</title> <meta charset = "UTF-8"> </head> <body> <div style = "color:yellow;" > <div style = "color:red;"> <div style = "color:blue;" > <p>Hello!</p> </div> </div> </div> </body> </html> |
การอ้างอิง element ที่มีลําดับที่ซ้อนกันข้างต้น เรามักอ้างอิงจากความสัมพันธ์ระหวาง element เช่น แท็ก <div> ที่อยู่บนสุดเรียกว่า parent element ส่วนแท็ก <div> ที่อยู่ภายใต้จะ เรียกว่า child element ซึ่งถ้าอธิบายอย่างตรงๆ ก็คือ element พ่อแม่ กับ element ลูก นั่นเอง
|
1 2 3 4 |
<div> <p>Hello!</p> <p>World</p> </div> |
จากโค๊ตข้างต้น แท็ก <p> ทั้งสองแท็ก ถือว่าเป็น child element ของแท็ก <div> และแท็ก <div> ก็ถือว่าเป็น parent element ของแท็ก <p>
การทำความเข้าใจเกี่ยวกับ parent element กับ child element มีประโยชน์มาก เพราะจะทำให้เราเข้าใจโครงสร้างของเว็บเพจได้เป็นอย่างดี และสามารถนำไปประยุกต์ใช้กับการเขียนโค๊ต CSS, JavaScript ซึ่งมักอ้างอิง parent element และ child element อยู่เสมอๆ
