ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 14 HTML  Blocks
แท็กแบบ Block มีไว้เพื่อเป็นโครงสร้างและแท็กแบบ Inline มีไว้เสริมรายละเอียด หลักในการแสดงผลบนหน้าเว็บจึงมีความแตกต่างกัน ดังนี้คือ
   -แท็กแบบ Block จะมีความกว้างเต็มบรรทัดเต็มพื้นที่ แต่แท็กแบบ Inline จะมีความกว้างเท่ากับข้อความที่อยู่ในนั้น 
   -แท็กแบบ Block จะขึ้นบรรทัดใหม่เสมอ แต่แท็กแบบ Inline จะเกาะกลุ่มเรียงกันอยู่บนบรรทัดเดียวกัน    
  
1. Block
ใช้แท็ก <div>
นอกจากนี้แล้วเรายังสามารถเพิ่มกล่องข้อความได้โดยเพิ่ม แท็ก
display: block;background: ชื่อสีภาษาอังกฤษ; width: เลขบอกความกว้าง px; height: เลขบอกความสูง px;
ตัวอย่าง

<html>
<body>

<div style="color:blue">
  <h3>หัวข้อใหญ่ของฉัน</h3>
  <p>ข้อความของฉัน</p>
</div>

<div style="color:blue; display:block;
background:pink; width:200px; height:100px;">

  <h3>หัวข้อใหญ่ของฉัน</h3>
  <p>ข้อความของฉัน</p>

</div>

</body>
</html>

ผลลัพธ์คือ


2. Inline
ใช้แท็ก <span>
นอกจากนี้แล้วเรายังสามารถเพิ่มกล่องข้อความได้โดยเพิ่ม แท็ก
display: block;background: ชื่อสีภาษาอังกฤษ; width: เลขบอกความกว้าง px; height: เลขบอกความสูง px;
ตัวอย่าง

<html>
<body>

<p>ฉันไปตลาดซื้อ<span style="color:blue;font-weight:bold">กุ้ง</span>และ<span style="color:red;font-weight:bold">หอย</span></p>

<p>ฉันไปตลาดซื้อ<span style="color:blue;font-weight:bold ;display:block;
background:pink; width:20px; height:30px;">กุ้ง</span>
และ<span style="color:red;font-weight:bold; display:block; background:pink; width:35px; height:30px;"> หอย</span></p>


</body>
</html>

ผลลัพธ์คือ

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากให้ธุรกิจเป็นที่รู้จักบนโลกออนไลน์ ลองหาบริษัทรับทำ SEO ดูซิ !
โดย totheworld จ 17 ก.พ. 2020 3:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
จ 17 ก.พ. 2020 3:34 pm โดย totheworld
สี่เหตุผลที่ควรปรับปรุงเว็บไซต์
โดย phasamon จ 17 ก.พ. 2020 2:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
จ 17 ก.พ. 2020 2:05 pm โดย phasamon
อย่าได้พลาดเชียว
โดย noppadonsk จ 17 ก.พ. 2020 10:52 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
จ 17 ก.พ. 2020 10:52 am โดย noppadonsk
วิธีการแก้ไขปํญหา undefined index กรณีกำหนดเงือนไขเทียบค่าอาร์เรย์
โดย Ittichai_chupol ศ 14 ก.พ. 2020 5:50 pm บอร์ด PHP Knowledge
0
51
ศ 14 ก.พ. 2020 5:50 pm โดย Ittichai_chupol
เรื่องน่าเศร้า
โดย noppadonsk ศ 14 ก.พ. 2020 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
ศ 14 ก.พ. 2020 10:19 am โดย noppadonsk
อยากทรบวิธีจัดการไม่ให้สมาชิกที่อยู่ในกลุ่มที่กำหนดมาส่องโพสต์ของผู้อื่นได้
โดย Ittichai_chupol พฤ 13 ก.พ. 2020 3:22 pm บอร์ด Programming - PHP
3
65
พฤ 13 ก.พ. 2020 5:31 pm โดย thatsawan
กลับไปเริ่มใหม่
โดย noppadonsk พฤ 13 ก.พ. 2020 10:57 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
40
พฤ 13 ก.พ. 2020 10:57 am โดย noppadonsk
อยากทราบการเอาเลขมาคุณในช่อง 10อัน แล้วมาแล้วผลข้างล่างครับ
โดย comopal พ 12 ก.พ. 2020 6:49 pm บอร์ด Programming - PHP
1
80
พฤ 13 ก.พ. 2020 9:39 am โดย LEG
ต้องรีบเดี๋ยวลืม
โดย noppadonsk พ 12 ก.พ. 2020 10:56 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
39
พ 12 ก.พ. 2020 10:56 am โดย noppadonsk
วิธีการเลือกงาน
โดย jataz2 พ 12 ก.พ. 2020 9:47 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
พ 12 ก.พ. 2020 9:47 am โดย jataz2
วิธีการไปสัมภาษณ์งาน
โดย jataz2 พ 12 ก.พ. 2020 9:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
พ 12 ก.พ. 2020 9:25 am โดย jataz2
วิธีการ insert ข้อมูลในขั้นตอนติดตั้ง Extension phpbb
โดย Ittichai_chupol อ 11 ก.พ. 2020 5:55 pm บอร์ด PHP Knowledge
1
58
อ 11 ก.พ. 2020 6:01 pm โดย thatsawan
visual studio 2008 crystal reports viewer มี ในToolbox แต่ใช้งานไม่ได้
โดย d.direk อ 11 ก.พ. 2020 2:33 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
62
อ 11 ก.พ. 2020 2:33 pm โดย d.direk
การเดินทางจากปลวกแดง (ระยอง)- กรุงเทพฯ
โดย panudda อ 11 ก.พ. 2020 12:07 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
39
อ 11 ก.พ. 2020 12:07 pm โดย panudda
จะหยามกันเกินไปแล้ว
โดย noppadonsk อ 11 ก.พ. 2020 11:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
อ 11 ก.พ. 2020 11:19 am โดย noppadonsk
อยู่ห้องเช่าหรือคอนโดก็ทำอาหารได้เมนูง่ายๆ อยากแชร์ค่ะ
โดย Anonymous อ 09 ก.พ. 2020 5:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
94
อ 09 ก.พ. 2020 5:39 pm โดย บุคคลทั่วไป
FLIR AX8-9Hz กล้องถ่ายภาพความร้อนแบบต่อเนื่อง | IP67
โดย LEG ศ 07 ก.พ. 2020 2:39 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
90
ศ 07 ก.พ. 2020 2:39 pm โดย LEG
คัดกรองคนมีไข้ด้วยกล้องถ่ายภาพความร้อน | Thermal Imaging Camera
โดย LEG ศ 07 ก.พ. 2020 1:27 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
56
ศ 07 ก.พ. 2020 1:27 pm โดย LEG
สอบถามการใช้ selenium บน ubuntu หน่อยครับ
โดย jirawoot ศ 07 ก.พ. 2020 10:52 am บอร์ด Programming - C/C++ & java & Python
2
116
ศ 07 ก.พ. 2020 1:22 pm โดย jirawoot
อย่าคิดว่าง่ายๆนะ
โดย noppadonsk ศ 07 ก.พ. 2020 9:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
82
ศ 07 ก.พ. 2020 9:23 am โดย noppadonsk