In html, บทความทั้งหมด

HTML ในตอนที่ 2 นี้จะกล่าวถึงวิธีแสดงข้อความบนเว็บเพจ ซึ่งเราสามารถแสดงข้อความทั้งย่อหน้า (block-element) หรือนำเอาข้อความย่อยๆ มาเรียงต่อกันก็ได้ (inline-element) แน่นอนว่า บทความนี้จะช่วยให้เราเข้าใจว่า HTML คืออะไร ได้ดียิ่งขึ้น

กำหนดย่อหน้าด้วยแท็ก <p>

วิธีแสดงข้อความบนเว็บเพจ มีด้วยการหลายแบบ แต่ถ้าต้องการแสดงข้อความเป็นย่อหน้า เราจะใช้แท็ก <p> ข้อความในแต่ละย่อหน้าอยู่ภายในบล็อกของ <p></p> ถ้าเราต้องการแสดงหลายย่อหน้า ก็ใช้แท็ก <p> หลายๆ ชุด ดังตัวอย่างต่อไปนี้

ข้อความในแต่ละย่อหน้าจะอยู่ภายในแท็ก <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> ตามลำดับ ดังตัวอย่างต่อไปนี้

แท็ก <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> ครอบข้อความ ดังตัวอย่างต่อไปนี้

จากตัวอย่างข้างบน  <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 อื่นๆ ใส่เข้าไปได้

จากข้างบนเราได้ใช้แท็ก <div> เพื่อแบ่งข้อมูลออกเป็น 2 ส่วน คือ แท็ก <div> บน กับแท็ก <div> ด้านล่าง ซึ่งผลลัพธ์การแสดงบนเว็บเพจเราอาจไม่รู้ แต่ภายในโครงสร้างของ HTML การใช้ แท็ก <div> จะทําเพื่อแบ่งและจัดโครงสร้างของแท็กต่างๆ

ต่อไปนี้เป็นตัวอย่างการใช้ แท็ก <div> ซ้อนแท็ก <div>

เมื่อทดลองเปิดโค๊ตนี้บนบราวเซอร์ ผู้ใช้จะไม่รู้ว่ามีการใช้ <div> แบ่งข้อมูล เพราะจะเห็นเป็นย่อหน้าธรรมดาเท่านั้นเองดังรูป

thaidemy-html-11

และเพื่อให้เห็นความแตกต่างระหว่างข้อความที่อยู่ในแท็ก <div> หลักกับแท็ก <div> ย่อย ผมจึงได้เพิ่มโค้ตเพื่อกําหนดสีอักษรให้เป็นสี แดง เฉพาะในแท็ก <div> ย่อย ดังนี้

จากโค๊ตข้างบนมีการกําหนด Attribute ที่ชื่อว่า Style ซึ่งจุดประสงค์คือ การกําหนด style ให้กับ แท็ก <div> โดยในที่นี้กําหนด Value ก็คือ การทําให้เป็นสีแดงโดยใช้คําสั่ง <div style = “color:red;”>

thaidemy-html-12

กําหนด Attribute ให้กับแท็ก <div>

Style พื้นฐานที่ต้องทราบ คือ การกําหนดความกว้างและความสูง โดยกําหนดด้วย width และ height ดังตัวอย่างต่อไปนี้

จากโค๊ตตัวอย่าง ได้กําหนด Attribute ที่ชื่อว่า Style ซึ่งเป็นการปรับแต่ง Style ให้กับแท็ก <div> โดยรูปแบบที่ใช้มีดังนี้

จะเห็นได้ว่าในเครื่องหมาย Double Quote จะมีค่า color ตามด้วย : จากนั้นก็บอกชื่อสี แล้วปิด ท้ายด้วย ; ซึ่งถ้าเราต้องการกําหนดค่าอื่นๆ เช่นเปลี่ยนสีพื้นเป็นสีน้ําเงิน ก็ให้เพิ่มคําสั่งใน style ลง ไปดังนี้

ในการใช้งานจริง เราจะไม่นิยมวิธีกําหนด Style ด้วยวิธีข้างต้น แต่จะกําหนด style ผ่านคําสั่ง CSS ดังนี้

คําสั่ง 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 ชุด โดยมี เครื่องหมาย # นําหน้า ซึ่งหากเราต้องการสีที่นอกเหนือจากสีตามตารางข้างต้น ก็สามารถกําหนด ด้วยตัวเองได้ ดังตัวอย่างต่อไปนี้

Parent element กับ Child element

ดังที่กล่าวไปแล้วว่า block element เป็น element ที่สามารถบรรจุ element อื่นๆ ลงไป ได้ ทําหน้าที่คล้ายกับกล่อง ที่สามารถบรรจุกล่องย่อยๆ เราสามารถซ้อน element ได้หลายระดับ ดัง โค๊ตตัวอย่างต่อไปนี้

การอ้างอิง element ที่มีลําดับที่ซ้อนกันข้างต้น เรามักอ้างอิงจากความสัมพันธ์ระหวาง element เช่น แท็ก <div> ที่อยู่บนสุดเรียกว่า parent element ส่วนแท็ก <div> ที่อยู่ภายใต้จะ เรียกว่า child element ซึ่งถ้าอธิบายอย่างตรงๆ ก็คือ element พ่อแม่ กับ element ลูก นั่นเอง

จากโค๊ตข้างต้น แท็ก <p> ทั้งสองแท็ก ถือว่าเป็น child element ของแท็ก <div> และแท็ก <div> ก็ถือว่าเป็น parent element ของแท็ก <p>

การทำความเข้าใจเกี่ยวกับ parent element กับ child element มีประโยชน์มาก เพราะจะทำให้เราเข้าใจโครงสร้างของเว็บเพจได้เป็นอย่างดี และสามารถนำไปประยุกต์ใช้กับการเขียนโค๊ต CSS, JavaScript ซึ่งมักอ้างอิง parent element และ child element อยู่เสมอๆ

ติดต่อเรา

หากสมาชิกท่านใดพบปัญหา หรือมีข้อสงสัยประการใด สามารถติชม หรือเสนอแนะ มายังเว็บมาสเตอร์ได้ตลอดเวลานะครับ

Not readable? Change text. captcha txt
0

Start typing and press Enter to search