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

การเขียนและพัฒนาเว็บไซต์ มีองค์ความรู้มากมายที่เราต้องทราบ แต่โดยพื้นฐานหลักๆ ของการเขียนเว็บไซต์จะต้องทราบพื้นฐาน 3 ส่วน ดังนี้

  • HTML สําหรับเป็นโครงสร้างของเว็บเพจ
  • CSSใช้ตกแต่งหน้าตาของเว็บเพจ
  • JavaScriptใช้เพื่อทําให้เว็บเพจสามารถโต้ตอบกับผู้ใช้ได้

เริ่มที่ HTML เป็นการเขียนโค๊ตสร้างเว็บเพจ ถ้าเปรียบกับการสร้างตึก ก็เป็นเหมือนโครงสร้างของตัว ตึก ต้องมีเสา มีคาน ลําดับต่อไปก็เขียนส่วนของ CSS ซึ่งคล้ายกับเป็นการตกแต่งตัวตึก เช่น การทาสี การใส่กระจก ใส่ ประตู การใช้ CSS ทําให้เว็บเพจสวยงาม สำหรับในบทแรกนี้จะเป็นการปูพื้นฐานของ HTML ก่อน พร้อมกันนั้นก็จะใช้ CSS ในการจัดการปรับแต่งเว็บเพจให้สวยงาม

นอกจาก HTML, CSS และ JavaScript แล้ว แนะนำให้ศึกษาพื้นฐานอีก 2 ส่วน ได้แก่

  • PHP, ASP หรือภาษาสคริปต์อื่นๆ สำหรับติดต่อสื่อสารระหว่างเว็บเพจกับ Server เช่น ส่งรหัสนักเรียนจากเว็บเพจไปยัง Server จากนั้น Server ก็ตอบกลับมาพร้อมส่งรายละเอียดของนักเรียนกลับมาแสดงบนเว็บเพจ เป็นต้น
  • SQL เป็นภาษาที่ใช้สำหรับจัดการฐานข้อมูล เช่น การเพิ่มรายชื่อนักเรียนลงในฐานข้อมูล การค้นข้อมูลนักเรียน การแก้ไขคะแนนสอบของนักเรียน ฯลฯ

Text Editor สําหรับการแก้ไขโค๊ต

เครื่องมือสําหรับสร้างหรือแก้ไขเว็บเพจ คือ Text Editor ซึ่งใช้สําหรับแก้ไขโค๊ต ซึ่ง แนะนําว่าไม่ควรใช้ Notepad หรือ Microsoft Word แต่ควรจะเป็นโปรแกรมที่ถูกออกแบบมา สําหรับการป้อนโค๊ต HTML โดยเฉพาะ เช่น Notpad++, Brackets, EditPlus, Aptana, Dreamweaver, E Text Editor, Intype หรือจะใช้ UltraEdit ก็ได้

Text Editor บางตัวจะมีระบบช่วยเหลือให้เราเขียนโค๊ต HTML ได้ง่ายขึ้น เช่น หากเราใส่ แท็กเปิดอย่าง <body> โปรแกรมก็จะช่วยใส่แท็กปิด </body> มาให้โดยอัตโนมัติ มีการใช้สีที่แตก ต่างกันระหว่างแท็ก ตัวแปร ข้อความ ทําให้สามารถอ่านโค๊ตได้ง่าย

ในกรณีที่ผู้อ่านที่ใช้เครื่องแมคอินทอช โปรแกรมประเภท Text Editor ก็มีอยู่หลายตัวด้วยกัน อาทิเช่น TextMate, TextWrangler, BBEdit, Aptana หรือ Coda เป็นต้น

thaidemy-html-01

HTML คือ อะไรและใช้งานยังไง

HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นสคริปต์ที่ใช้กำหนดโครงสร้างให้กับเว็บเพจ เราจะใช้โค้ต HTML เพื่อกำหนดข้อความลงไปในเว็บเพจ ใช้โค้ต HTML เพื่อกำหนดรูปภาพบนเว็บเพจ ใช้ HTML กำหนดตารางลงในเว็บเพจ ใช้โค้ต HTML เพื่อสร้างลิงก์เชื่อมระหว่างเว็บเพจ ใช้โค้ต HTML กำหนดแบบฟอร์มบนเว็บเพจ ฯลฯ

เวลาท่องอินเทอร์เน็ต เราจะใช้โปรแกรมที่เรียกว่าบราวเซอร์ (Browser) ซึ่งมีอยู่หลายตัวให้เลือกใช้งาน เช่น Microsoft Edge, Google Chrome, Safari, Firefox, Opera, ฯลฯ ซึ่งบราวเซอร์เหล่านี้มีหน้าที่แปลความหมายของโค้ต HTML ที่อยู่บนเว็บเพจ (รวมถึงโค้ตอื่นๆ เช่น CSS, JavaScript) แล้วจึงค่อยแสดงผลออกมาบนหน้าจอ

สรุป HTML คือโค้ตที่ใช้จัดโครงสร้างของเว็บเพจ ส่วนบราวเซอร์ทำหน้าที่อ่านโค้ต HTML และแปลความหมายของโค้ต (Interpreted) แล้วนำเอาผลลัพธ์ที่ได้แสดงออกมาบนหน้าจอบราวเซอร์

รูปเปรียบเทียบโค้ต HTML กับผลลัพธ์ที่ปรากฎบนเว็บเพจ

HTML ได้เริ่มใช้กันมานานตั้งแต่ปีต้นทศวรรษที่ 90 จากนั้นในปี 1999 ก็พัฒนามาเป็น HTML 4.01 และหลังจากนั้นก็ไม่มีอะไรเปลี่ยนแปลงอีกเลยเป็นเวลานานหลายสิบปี แต่ด้วยเทคโนโลยี อื่นๆ หรือ application ที่เกี่ยวข้องมีการพัฒนาที่ต่างจากเดิมไปมาก เช่น เราสามารถโต้ตอบกันผ่าน Twitter มีการใช้งานสังคมออนไลน์อย่างกว้างขวาง ไม่ว่าจะเป็น Facebook, Hi5, Digg ฯลฯ มี การพัฒนาแอปพลิเคชันในลักษณะเป็นตัวเสริมแบบ Extension (บางทีก็เรียกว่า Add on ไม่ก็ Plug in) เพื่อให้เว็บเพจรองรับกับเทคโนโลยีใหม่ๆ นี้ได้ ด้วยเหตุผลดังกล่าว HTML 4.01 จึงเริ่มถึงทางตัน

ในปัจจุบัน HTML เวอร์ชันล่าสุดคือ HTML5 เป็นรุ่นที่ถูกปรับปรุงขนานใหญ่ สามารถใช้ง่ายขึ้นกว่าเดิม ในแบบที่ไม่ต้องพึ่งส่วนเสริม (Extension) มากนัก สามารถรองรับบราวเซอร์ได้ทุกแบบ สามารถทํางานข้าม Platform ได้อย่าง ไม่มีปัญหา สามารถใช้กับอุปกรณ์อื่นๆ ได้สะดวกขึ้น โดยเฉพาะกับโทรศัพท์มือถือ หรืออุปกรณ์ที่ มีหน้าจอหลายขนาด เช่น iPhone, iPad, Samsung Galaxy Tab เป็นต้น

เริ่มสร้างไฟล์ HTML กันดีกว่า

ถ้าต้องการสร้างไฟล์ HTML ขึ้นมาใหม่ วิธีที่สะดวกที่สุดคือ การสร้างจากโปรแกรมประเภท Text Editor เช่น Notepad++, Brackets, Dreamweaver, ฯลฯ เพราะโปรแกรมเหล่านี้มีเครื่องมือช่วยในการเขียนโค้ต

  1. เปิดโปรแกรมประเภท TextEditor ซึ่งในตัวอย่างคือ Brackets แล้วเลือกเมนู File>New

thaidemy-html-03

  1. กรอกโค้ตต่อไปนี้ซึ่งเป็นโค้ตพื้นฐานสำหรับ HTML ลงไป
  1. เลือกคำสั่ง File>Save เพื่อเซฟไฟล์

thaidemy-html-04

  1. ตั้งชื่อไฟล์โดยลงท้ายด้วย .html หรือ .htm แล้วคลิก Save

thaidemy-html-05

ดูผลลัพธ์ HTML ด้วยบราวเซอร์

สำหรับการตรวจสอบผลลัพธ์การสร้างไฟล์ HTML ก็สามารถทำง่ายโดยดับเบิ้ลเพื่อเปิดไฟล์ บราวเซอร์ก็จะถูกเรียกขึ้นมาโดยอัตโนมัติ

  1. ทดลองเปิดดูผลลัพธ์ โดยดับเบิ้ลคลิกที่ไฟล์

thaidemy-html-06

  1. เราจะพบผลลัพธ์เว็บเพจที่เป็น HTML5 ตามต้องการ

thaidemy-html-07

จากโค๊ตข้างต้น สิ่งที่บ่งบอกว่านี่คือ HTML 5 ไม่ใช่ HTML รุ่นเก่า คือโค๊ตบรรทัดแรกสุด ได้แก่ <!DOCTYPE HTML> ส่วนความหมายและรายละเอียดเกี่ยวกับ DOCTYPE จะอธิบายอีกครั้ง ในหัวข้อต่อๆ ไป

เนื่องจากเราต้องการแสดงเว็บเพจที่เป็นภาษาไทย เราจึงใส่บรรทัด <meta charset = “UTF-8”> เพิ่มลงไปด้วย ซึ่งจะเห็นได้ว่า การกําหนด character encoding เพื่อให้สามารถใช้งาน ภาษาไทยได้นั้นง่ายกว่าเดิมมาก

แก้ไขโค๊ต HTML

ในกรณีที่ต้องการแก้ไขโค๊ต HTML เราจะไม่ใช้การดับเบิ้ลคลิกที่ไฟล์ HTML แต่จะวิธีคลิกขวาแล้วเลือกโปรแกรมที่ใช้สำหรับแก้ไข HTML ดังตัวอย่างต่อไปนี้

  1. คลิกขวาที่ไฟล์ HTML
  2. เลือก Open with
  3. คลิกเลือกโปรแกรมที่ใช้แก้ไขโค๊ต เช่น Brackets, Notepad++ , Dreamweaver เป็นต้น

thaidemy-html-08

พื้นฐานเกี่ยวกับ HTML

HTML เป็นไฟล์ที่มีนามสกุลเป็น .htm หรือ .html โดยภายในไฟล์จะเป็นข้อความ ที่ไม่ใช่ ข้อความธรรมดา แต่มีโครงสร้างและรูปแบบที่แน่นอน ใช้เพื่อแสดงข้อมูลบนเว็บเพจ หรือเป็นคําสั่ง สําหรับจัดการข้อมูลบนเว็บเพจ

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

ก่อนที่เราจะเริ่มเขียนโค๊ต HTML นั้น สิ่งที่ต้องทําความเข้าใจมี 2 ประการ ดังนี้

  • ประการแรก เราต้องทราบ รูปแบบในการเขียนโค๊ตคําสั่ง เช่น ถ้าต้องการเขียนไฟล์ HTML 5 ซึ่งเป็นเวอร์ชันล่าสุดจะต้องขึ้นต้นด้วย <!DOCTYPE HTML> หรือถ้าต้องการแสดงตารางบนเว็บเพจจะต้องขึ้นด้วย <table> ลงท้าย ด้วย </table> หรือถ้าต้องการแสดงรูปภาพก็จะใช้แท็ก <img  /> เป็นต้น
  • ประการที่สอง ต้องเขียนโค้ตให้รองรับกับทุกบราวเซอร์ ซึ่งบราวเซอร์ที่เป็นนิยมแพร่หลายในปัจจุบัน ได้แก่ Microsoft Edge, Internet Explorer, Firefox, Safari, Chrome และ Opera เป็นต้น บราวเซอร์เวอร์ชันเก่า อาจไม่สนับสนุน HTML5 ดังนั้น หากเราต้องการให้โค้ต HTML ของเราสามารถใช้ได้กว้างขวาง ก็อาจต้องมีโค้ตสำหรับตรวจสอบว่าผู้เยี่ยมชมเว็บไซต์ใช้บราวเซอร์อะไร เวอร์ชันไหนด้วย

รู้จักกับ Element

เอลิเมนต์ (Element) คือ ส่วนประกอบที่เล็กที่สุด ที่รวมกันอยู่ใน HTML ในแต่ละ Element จะมีการใช้ แท็ก (tag) เพื่อแสดงให้ทราบว่าแต่ละ Element มีโครงสร้างหรือขอบเขตเป็นเช่นไร เช่น body element ซึ่งเป็นส่วนที่ใช้แสดงเนื้อหาบนเว็บเพจ จะใช้แท็กเปิด (start tag) และแท็กปิด (end tag) ดังนี้

จากตัวอย่างข้างบน <body> คือแท็กเปิด (start tag) ส่วน </body> คือแท็กปิด (end tag) การใช้แท็กเปิดและแท็กปิดเป็นตัวกำหนดขอบเขตของแท็ก และใช้กำหนดโครงสร้างของเว็บเพจ

ชนิดของ Element

เราแบ่ง element ได้เป็น 3 แบบ คือ Void Elements, Text Elements และ Nested Elements ซึ่งมีรายละเอียด ดังนี้

  • Void Elements เป็น element ที่ไม่จําเป็นต้องมีแท็กปิด โดยภายในแท็กจะมีการกําหนดค่า ให้กับ element โดยใช้ attribute เช่น <meta charset = "UTF-8">  ในแท็กจะมี attribute ที่ ชื่อว่า charset ใช้สําหรับกําหนดการเข้ารหัสตัวอักษรที่ใช้บนเว็บเพจ (ถ้าไม่ใส่จะแสดงภาษาไทยไม่ถูกต้อง) เป็นต้น
  • Raw Text Elements เป็น element ที่ประกอบไปด้วย 3 ส่วน ได้แก่ แท็กเปิด (open tag) ข้อความ (text content) และแท็กปิด (close tag) โดยเน้นว่าเนื้อหาที่อยู่ในแท็กเหล่านี้จะเป็นข้อความล้วนๆ ไม่มีการบรรจุ element อื่นๆ เข้าไปด้วย เช่นแท็ก <script> และ <style> เป็นต้น
  • Normal Elements เป็น element ที่ประกอบไปด้วย 3 ส่วนเช่นกัน คือ แท็กเปิด (open tag), ข้อความ หรือ elements อื่นๆ (element content) และจบด้วยแท็กปิด (close tag) โดยส่วนเนื้อหาที่อยู่ใน element อาจเป็นข้อความหรือประกอบด้วย element อื่นๆ ก็ได้ ซึ่ง element ส่วนใหญ่ใน HTML จะมีลักษณะเป็น Normal Elements ต่อไปนี้คือตัวอย่างของแท็ก <ul> ที่ภายในแท็กจะบรรจุด้วยแท็ก <li> ดังนั้นแท็ก <ul> จึงถือว่าเป็น Normal Element เป็นต้น
จากตัวอย่าง ภายในแท็ก <ul> จะประกอบไปด้วยแท็ก <li> ในกรณีเช่นนี้ เราจะเรียกแท็ก <ul> ว่าเป็น parent element ของแท็ก <li> และเรียกแท็ก <li> ว่าเป็น child element (เอลิเมนต์ลูก) ของแท็ก <ul> การอ้างอิง element ต่างๆ ด้วยวิธีกําหนดความสําพันธ์ระหว่าง parent และ child element เช่นนี้ ช่วยให้การเขียนโค๊ตในการจัดการ element ต่างๆ ทําได้ง่ายขึ้น

รูปแบบมาตรฐานบนเว็บเพจ

HTML เวอร์ชันล่าสุดคือ HTML5 มีโครงสร้างที่ไม่ซับซ้อน โดยจะมีโครงสร้างพื้นฐาน เป็นดังนี้

  • บรรทัดที่ 1 ใส่ <!DOCTYPE HTML>  เพื่อบอกว่าเป็น HTML5 ซึ่งเป็น HTML เวอร์ชันล่าสุด
  • บรรทัดที่ 2 ใส่แท็ก <html> เป็นการบอกว่าเป็นจุดเริ่มต้นของโค้ต HTML
  • บรรทัดที่ 3 ใส่แท็ก <head> เป็นส่วนที่ใช้เก็บข้อมูลของเว็บเพจ (Metadata) ซึ่งส่วนนี้ไม่ได้ถูกนำมาแสดงบนหน้าเว็บเพจโดยตรง แต่บราวเซอร์จะนำเอาข้อมูลเหล่านี้ไปใช้ประโยชน์ได้ ภายใน <head> สามารถใส่แท็กอื่นๆ ที่เกี่ยวกับข้อมูลของเว็บเพจ เช่น แท็ก <title> และ <meta> เป็นต้น
  • บรรทัดที่ 4 แท็ก <title> ใช้กำหนดชื่อให้กับเว็บเพจ โดยชื่อนี้จะแสดงอยู่บนแถบด้านบนของบราวเซอร์ (หรือแสดงบริเวณแท็บของบราวเซอร์)
  • บรรทัดที่ 5 แท็ก <meta> ใช้กำหนดชุดข้อมูลกำกับบนเว็บเพจ (metadata) เช่น สามารถกำหนดว่าจะใช้ชุดตัวอักษรอะไรบนเว็บเพจ จากตัวอย่างได้กำหนด charset = “UTF-8” หมายถึงการใช้ชุดตัวอักษรแบบ Unicode โดยใช้ Code Unit จำนวน 8 บิต หรือถ้าต้องการกำหนดชื่อผู้สร้างเว็บเพจนี้ ก็อาจใส่เป็น <meta name=”author” content=“Thaidemy”> หรือถ้าต้องการใส่คำอธิบายเกี่ยวกับเว็บเพจนี้เพิ่มเติม ก็สามารถใส่เป็น <meta name=”description” content=“course online free”> เป็นต้น
  • บรรทัดที่ 6 แท็ก <style> สำหรับการตกแต่งเว็บเพจ โดยสามารถเขียนโค้ต CSS เพื่อตกแต่งเว็บเพจได้ตามต้องการ
  • บรรทัดที่ 10 แท็ก <body> ใช้บอกว่านี่คือส่วนของเนื้อหาที่จะแสดงบนเว็บเพจ
  • บรรทัดที่ 12 แท็ก <script> ในส่วนนี้สามารถใส่โค้ต JavaScript เพื่อกำหนดลูกเล่น หรือสั่งให้เว็บเพจสามารถโต้ตอบกับผู้ใช้ได้
  • บรรทัดที่ 15 แท็ก </body> คือแท็กปิดของแท็ก <body>
  • บรรทัดที่ 16 แท็ก </html> คือแท็กปิดของแท็ก <html>

อะไรคือ Attributes และ Value

เอลิเมนต์ (Element) คือ Tag ต่างๆ ที่อยู่บนเว็บเพจ เช่น แท็ก <p> แท็ก <div> แท็ก <h1> ฯลฯ ซึ่งในทุกๆ แท็ก จะมีคุณสมบัติประจำตัวที่เรียกว่า Attributes เช่น แท็ก <p> คือแท็กที่ใช้แสดงข้อความบนเว็บเพจ เราสามารถกำหนดให้ข้อความชิดซ้าย อยู่กึ่งกลาง หรือชิดขวา ด้วยการเข้าไปแก้ไข Attribute ที่ชื่อว่า align ดังตัวอย่างต่อไปนี้

  • บรรทัดที่ 7 Element ในที่นี้คือแท็ก <p> ส่วน Attributes ในที่นี้คือ align และค่า Value ในที่นี้คือ left หมายถึงกําหนดให้ข้อความอยู่ชิดซ้าย
  • บรรทัดที่ 8 Element ในที่นี้คือแท็ก <p> ส่วน Attributes ในที่นี้คือ align และค่า Value ในที่นี้คือ center หมายถึงกําหนดให้ข้อความอยู่กึ่งกลาง
  • บรรทัดที่ 9 Element ในที่นี้คือแท็ก <p> ส่วน Attributes ในที่นี้คือ align และค่า Value ในที่นี้คือ right หมายถึงกําหนดให้ข้อความอยู่ชิดขวา
  • บรรทัดที่ 10 Element ในที่นี้คือแท็ก <p> ส่วน Attributes ในที่นี้คือ align และค่า Value ในที่นี้คือ justify หมายถึงกําหนดให้ข้อความกระจาย ด้วยการปรับระยะห่างระหว่างตัวอักษรอัตโนมัติ เพื่อให้ข้อความชิดทั้งขอบซ้ายและขวา

พื้นฐานการใช้ Single Quote และ Double Quote

ใน HTML การกําหนดค่า Attribute นั้น เราอาจใช้ ‘ ‘ (Single Quote) หรือจะใช้ ” ” (Double Quote) ก็ได้ เช่น <table width='100%' align ="center">  แต่มีเงื่อนไขว่า จะผสมระหว่าง Single Quote กับ Double Quote ไม่ได้ เช่น <Table width='100%" border="1'>  อย่างนี้ถือว่าผิด

แต่ในทางปฏิบัติแล้ว เรามักจะใช้ ” ” (Double Quote) สำหรับกำหนดค่า Attribute ให้กับแท็กต่างๆ ของ HTML ส่วน  ‘ ‘ (Single Quote) จะใช้กับสคริปต์อื่นๆ บนเว็บเพจ เช่น ใช้กับ PHP เป็นต้น

  • บรรทัดที่ 4 สังเกตว่าเราจะใช้ “” กำหนดค่า Attribute ในแท็ก <meta> เช่น   <meta charset="UTF-8">
  • บรรทัดที่ 7 เราใช้ “” กำหนดค่า Attribute ในแท็ก <p> เช่น   <p align="center">

การใช้ Comment ใน HTML

ในกรณีที่ต้องการอธิบายโค๊ตคําสั่ง เราจะใช้เครื่องหมาย <!– นําหน้าข้อความที่ใช้อธิบาย และ ปิดท้ายด้วย –> ซึ่งข้อความที่อยู่ในเครื่องหมาย <!– และ –> จะไม่ถูกนําไปแปลความหมาย และไม่แสดง บนหน้าจอเว็บเพจ เป็นเพียงข้อความที่่ผู้เขียนโค๊ตต้องการใส่ เพื่ออธิบายโค๊ตคําสั่งเท่านั้นเอง
ต่อไปนี้ คือ ตัวอย่างการใช้ Comment ที่ใช้ HTML

เมื่อเปิดไฟล์นี้บนบราวเซอร์ เราก็จะได้ผลลัพธ์ดังรูป ซึ่งจะเห็นได้ว่า ไม่มีข้อความที่อยู่ในแท็ก <!– และ –> ปรากฏบนหน้าจอเลย

thaidemy-html-09

ระหว่าง inline-element กับ block-element

จากที่ผ่านมาเราได้ทราบไปแล้วว่า เอลิเมนต์ (element) ก็คือส่วนย่อยๆ ของเว็บเพจ ก็คือ แท็กต่างๆ บนเว็บเพจนั่นเอง ซึ่ง element มี 2 แบบ คือ block-element กับ inline-element

  • block-element คือ element ที่ต้องขึ้นบรรทัดใหม่เสมอ และจะใช้เนื้อที่เต็มความกว้าง (ชิดขอบซ้าย และขอบขวา) โดย block element สามารถประกอบด้วย element อื่นๆ อยู่ภายในแท็กนั้นๆ เช่น แท็ก <ul></ul> คือ แท็กที่ใช้แสดงข้อความที่มีเครื่องหมายนำหน้าข้อความ ดังรูป

thaidemy-html-10

ภายในแท็ก <ul></ul> จะประกอบไปด้วยแท็ก <li></li> ดังตัวอย่างต่อไปนี้

ตัวอย่าง block-element ได้แก่แท็ก <div>, <p>, <form>, <ul>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

  • inline-element คือ element ที่ไม่เป็นบล็อค คือจะไม่มีการขึ้นบรรทัดใหม่ โดยใช้ความกว้างเท่าที่จำเป็นเท่านั้น (ไม่ใช้ความกว้าง 100% เหมือนกับ block) inline-element จะมีลักษณะคล้ายการเรียงลำดับตัวอักษรในบรรทัดเดียวกัน inline-element ที่ใช้งานบ่อยๆ ได้แก่ แท็ก <span>, <em>, <strong>, <img>, <a> เป็นต้น

ตัวอย่างการใช้งาน inline-element เช่น การทําให้ข้อความเป็นตัวเอียง เราจะใช้แท็ก <em></em> ครอบข้อความที่ต้องการ ซึ่งจะเห็นได้ว่าแท็ก <em> ไม่ได้ต้องการพื้นที่เพิ่ม

ถ้าต้องการแทรกรูปภาพลงบนเว็บเพจ เราจะใช้แท็ก <img> ซึ่งเป็น inline-elemnt ดังนั้นความกว้างของแท็ก <img> จะขึ้นอยู่กับขนาดความกว้างของรูปภาพ ไม่ได้ใช้ความกว้างเต็มพื้นที่เหมือนกับ block-element

ต่อไปนี้เป็นตัวอย่างแสดงการใช้ inline-element ร่วมกับ block-element

  • บรรทัดที่ 8 แท็ก <img> ใช้แสดงรูปภาพบนเว็บเพจ ซึ่งแท็ก <img> เป็น inline-element ดังนั้นจึงไม่ได้สั่งให้ขึ้นบรรทัดใหม่
  • บรรทัดที่ 9 แท็ก <span> ใช้แสดงข้อความ โดยเป็น inline-element จึงไม่ขึ้นบรรทัดใหม่
  • บรรทัดที่ 10 แท็ก <p> ใช้สำหรับแสดงข้อความในย่อหน้าซึ่ง เป็น block-element ดังนั้นจึงขึ้นบรรทัดใหม่

 

ติดต่อเรา

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

Not readable? Change text. captcha txt
0

Start typing and press Enter to search