องค์ประกอบระดับบล็อก อินไลน์ และองค์กร

องค์ประกอบระดับบล็อก อินไลน์ และองค์กร

 

บทเรียนนี้เป็นส่วนหนึ่งของชุด  วิชาการเขียนโปรแกรมคอมพิวเตอร์ คุณสามารถไปที่  Intro to Programming  หากคุณต้องการเริ่มต้นตั้งแต่ต้น

เมื่อคุณโหลดหน้าเว็บในเบราว์เซอร์ องค์ประกอบ HTML ทั้งหมดในหน้าเว็บจะมีวิธีเริ่มต้นในการจัดระเบียบตัวเอง ตัวอย่างเช่น  <p> องค์ประกอบทั้งหมดเรียงซ้อนกันอย่างสวยงามในบรรทัดของตัวเอง ในขณะที่  <a> องค์ประกอบเรียงกันเป็นบรรทัดเดียว องค์ประกอบ HTML อื่นๆ เกือบทั้งหมดเป็นไปตามรูปแบบเหล่านี้เช่นกัน เนื่องจากโดยทั่วไปองค์ประกอบทั้งหมดจะจัดอยู่ในประเภทใดประเภทหนึ่งจากสองประเภท ได้แก่  องค์ประกอบ ระดับบล็อก  หรือ  องค์ประกอบแบบอินไลน์

องค์ประกอบระดับบล็อก

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

• <p>
• <h1>ผ่าน<h6>
• <ul>

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

เนื่องจากองค์ประกอบระดับบล็อกใช้ความกว้างทั้งหมดที่มีอยู่ จึงวางซ้อนกันแทนที่จะเรียงกัน:

องค์ประกอบแบบอินไลน์

องค์ประกอบแบบอินไลน์เป็นองค์ประกอบ HTML ที่ใช้ความกว้างของเนื้อหาเท่านั้น คุณเคยเห็นสิ่งเหล่านี้เช่นกัน:

• <a>
• <b>
• <i>
• <img>

เพื่อให้เห็นภาพ ลองนำกอง<p>องค์ประกอบจากส่วนสุดท้ายมาสร้าง<a>เป็นองค์ประกอบทั้งหมดแทน <a>องค์ประกอบเป็นองค์ประกอบแบบอินไลน์ แทนที่จะเป็นระดับบล็อก ซึ่งหมายความว่าแทนที่จะใช้ความกว้างทั้งหมดที่มีอยู่ กลับใช้พื้นที่เพียงพอสำหรับเนื้อหาเท่านั้น ในกรณีนี้ นั่นคือข้อความ นี่คือสีสำหรับการมองเห็น:

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

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

อย่ากังวลกับการท่องจำว่าองค์ประกอบใดเป็นบล็อกและองค์ประกอบใดอยู่ในบรรทัด หรือรู้สึกว่ามีข้อมูลมากเกินไปที่จะรับเข้าไป สิ่งสำคัญคือต้องจำแนวคิดขององค์ประกอบระดับบล็อกและองค์ประกอบในบรรทัด ตลอดจนความแตกต่างทั่วไประหว่าง ทั้งสอง. โปรแกรมเมอร์ทุกคนจะลืมว่าองค์ประกอบใดเป็นบางครั้ง แต่หากคุณจำแนวคิดได้ คุณจะมีความคิดที่ดีว่าจะเริ่มต้นจากที่ใดเมื่อบางสิ่งบนหน้าเว็บของคุณไม่แสดงตามที่คุณคาดไว้ 

องค์ประกอบขององค์กร

รูปแบบที่บริสุทธิ์ที่สุดขององค์ประกอบระดับบล็อกและอินไลน์คือองค์ประกอบ HTML สององค์ประกอบที่ใช้เป็นหลักในการจัดระเบียบองค์ประกอบอื่นๆ: <div>และ<span>

แผนก

องค์ประกอบ<div>นี้เป็นองค์ประกอบระดับบล็อกที่ใช้เพื่อจัดกลุ่มองค์ประกอบอื่นๆโดยเฉพาะ ตัวอย่างเช่น คุณอาจจัดกลุ่มย่อหน้าสองสามย่อหน้าด้วย<div>องค์ประกอบหนึ่งๆ และจะมีลักษณะดังนี้:

<div>
  <p>นี่คือองค์ประกอบย่อหน้า ซึ่งเป็นระดับบล็อก</p>
  <p>นี่คือองค์ประกอบย่อหน้าอื่น สิ่งเดียวกัน.</p>
  <p>ลองดูสิ มันกำลังกองรวมกัน</p>
</div>

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

จุดประสงค์ของ<div>องค์ประกอบจะชัดเจนยิ่งขึ้นเมื่อคุณเริ่มเรียนรู้CSSและJavaScript เมื่อจัดกลุ่มองค์ประกอบต่างๆ เข้าด้วยกัน<div>องค์ประกอบจะทำให้กำหนดเป้าหมายเฉพาะบางส่วนของหน้าเว็บได้ง่ายขึ้น เมื่อคุณต้องการเปลี่ยนรูปลักษณ์หรือทำบางสิ่งกับองค์ประกอบเหล่านั้น

ช่วง

องค์ประกอบ<span>ทำหน้าที่คล้ายกับ<div>องค์ประกอบ แต่สำหรับองค์ประกอบแบบอินไลน์ แทนที่จะเป็นระดับบล็อก ตัวอย่างเช่น สมมติว่าคุณต้องการจัดกลุ่มคำบางคำใน<p>องค์ประกอบใดองค์ประกอบหนึ่ง แต่ไม่ใช่ทั้งหมด เนื่องจาก<div>องค์ประกอบเป็นระดับบล็อก จึงไม่เหมาะกับงานนั้น แต่<span>จะ:

<p>นี่คือย่อหน้า แต่ <span>คำเหล่านี้</span> จะถูกจัดกลุ่ม</p>

เช่นเดียวกับ<div>องค์ประกอบ สิ่งนี้จะดูไม่แตกต่างจาก<p>องค์ประกอบทั่วไปด้วยตัวมันเอง หากคุณโหลดไว้ในเบราว์เซอร์ คุณจะไม่เห็นคำใบ้ว่ามี<span>องค์ประกอบอยู่ที่นั่น อย่างไรก็ตาม การกำหนดเป้าหมายเฉพาะคำเหล่านั้นด้วย CSS หรือ JavaScript จะทำให้ง่ายขึ้น

ทำด้วยตัวคุณเอง!

เปิด   ไฟล์  index.html ของโครงการบทช่วย สอนการเขียนโปรแกรม GCF  ในโปรแกรมแก้ไขข้อความ แล้วเพิ่มองค์ประกอบองค์กร ก่อนที่คุณจะเริ่มใช้ CSS และ JavaScript มันอาจจะดูเหมือนไม่จำเป็น แต่ต่อไป คุณจะดีใจที่ได้ใช้มัน สำหรับตอนนี้ เรามาเพิ่ม<div>องค์ประกอบหนึ่งรอบเนื้อหาบทวิจารณ์ภาพยนตร์ของคุณ

1. ขั้นแรก ค้นหา<h2>ส่วนหัวขององค์ประกอบของคุณ:

   <h2>รีวิว: Basketball Dog (2018)</h2>

2. เพิ่ม<div>แท็กเปิดของคุณก่อนองค์ประกอบนั้น:

   <div>

3. จากนั้น ค้นหาย่อหน้าสุดท้ายของคุณด้วยลิงก์: 

   เรียนรู้เพิ่มเติมที่ <a href="https://edu.gcfglobal.org/">GCFLearnFree.org</a>

4. เพิ่ม</div>แท็กปิดของคุณหลังองค์ประกอบนั้น: 

   </div>

5. ตอนนี้ องค์ประกอบทั้งหมดระหว่าง แท็ก <div>และ</div> อยู่ในองค์ประกอบนั้น ดังนั้นคุณควรเยื้องทุกอย่างระหว่างแท็ก เพื่อให้ HTML ของคุณสามารถอ่านได้

เมื่อคุณทำทั้งหมดนี้แล้ว โค้ดแบบเต็มของคุณควรมีลักษณะดังนี้:

<html>
  <เนื้อหา>
    <h1>บทวิจารณ์ภาพยนตร์คลาสสิกของ Cinema</h1>
    <div>
      <h2>รีวิว: Basketball Dog (2018)</h2>
      <img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">
      <p><i>4 จาก 5 ดาว</i>
      <p>จากผู้กำกับ <b>วิคกี เฟลมมิง</b> สู่เรื่องราวอันอบอุ่นของเด็กชายชื่อพีท (เทรนต์ ดักสัน) และโรเวอร์ สุนัขของเขา (ให้เสียงโดยบรินสัน ลัมเบิลบรันต์) คุณอาจคิดว่าเด็กผู้ชายกับสุนัขของเขาเรียนรู้คุณค่าที่แท้จริงของมิตรภาพฟังดูคุ้นเคย แต่การหักมุมครั้งใหญ่ทำให้ภาพยนตร์เรื่องนี้แตกต่างออกไป นั่นคือ Rover เล่นบาสเก็ตบอล และเขาก็เล่นเก่งไม่แพ้กัน</p>
      <p>ภาพยนตร์เรื่องนี้มีทุกสิ่งที่คุณต้องการ:</p>
      <ul>
        <li>บาสเก็ตบอล</li>
        <li>สุนัข</li>
        <li>ใจจดใจจ่อกัดเล็บ</li>
      </ul>
      <p>แม้ว่าอาจไม่จำเป็นต้องรวมเกมการแข่งขันชิงแชมป์ของ Rover ทั้ง 150 นาทีแบบเรียลไทม์ แต่ Basketball Dog จะทำให้คุณสนใจตลอดรันไทม์ 4 ชั่วโมง และตอนจบจะทำให้คนรักสุนัขต้องเสียน้ำตา หากคุณรักกีฬาบาสเก็ตบอลหรือสัตว์เลี้ยง นี่คือภาพยนตร์สำหรับคุณ</p>
      <p>ค้นหารายชื่อนักแสดงทั้งหมดได้ที่เว็บไซต์ <a href="https://edu.gcfglobal.org">Basketball Dog</a></p>
      <ปุ่ม>แสดงรีวิวถัดไป</ปุ่ม>
    </div>
  </body>
</html>

เปิดFile ExplorerหรือFinderและไปที่ โครงการ GCF Programming Tutorialsจากนั้นดับเบิลคลิกที่ไฟล์ index.html หน้าเว็บของคุณควรเปิดขึ้นในเบราว์เซอร์เริ่มต้น แต่โปรดจำไว้ว่า<div>องค์ประกอบนั้นควรมองไม่เห็น คุณเพียงแค่วางไว้ที่นั่นเพื่อเตรียมพร้อมสำหรับขั้นตอนต่อไป ในเบราว์เซอร์ของคุณ คุณควรเห็นสิ่งนี้

ขอแสดงความยินดี คุณได้สร้างสิ่งแรกของคุณแล้ว<div>!

 

Posted in: