ให้เรตสมาชิก: 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>

ผลลัพธ์คือ

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
อยากเป็นแฮกเกอร์
โดย ชื่อ ต้า ส 23 ก.ย. 2017 6:38 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
10
ส 23 ก.ย. 2017 6:38 pm โดย ชื่อ ต้า
อยากเป็นแฮกเกอร์ แค่ไม่รู้อะไรเลย
โดย ชื่อ ต้า ส 23 ก.ย. 2017 6:37 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
14
ส 23 ก.ย. 2017 6:37 pm โดย thatsawan
ฉันมีความกังวนในความเป็นส่วนตัว
โดย สิทธิ์ ของหัวจัย ศ 22 ก.ย. 2017 10:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ศ 22 ก.ย. 2017 10:40 pm โดย สิทธิ์ ของหัวจัย
เฟสให้ยืนยันตัวตนด้วยรูปเพื่อนในเฟสแต่หนูจำไม่ได้จากนั้นก็เข้าไม่ได้เลยค๊ะ
โดย บุคคลทั่วไป ศ 22 ก.ย. 2017 1:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
ศ 22 ก.ย. 2017 1:25 pm โดย บุคคลทั่วไป
สีผิวของ โปรแกรมเมอร์ และอาชีพต่างๆในฤดูร้อน
โดย Before Dong ศ 22 ก.ย. 2017 10:10 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ศ 22 ก.ย. 2017 10:10 am โดย Before Dong
เรียกใช้คำสั่งในการวาดสี่เหลี่ยมและวงกลม
โดย Ik Kat พฤ 21 ก.ย. 2017 7:28 pm บอร์ด JavaScript & Jquery Ajax
0
21
พฤ 21 ก.ย. 2017 7:28 pm โดย Ik Kat
อยากรู้วิธีใส่ Google Structure ใน Joomla ว่าใส่ตำแหน่งไหนและแก้ตรงไหนบ้างครับ
โดย Before Dong พฤ 21 ก.ย. 2017 2:20 pm บอร์ด Joomla Development
0
13
พฤ 21 ก.ย. 2017 2:20 pm โดย Before Dong
เมื่อ "ลูกค้า" บอกความต้องการของระบบ
โดย Before Dong พฤ 21 ก.ย. 2017 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
25
พฤ 21 ก.ย. 2017 10:29 am โดย Before Dong
oracle Sql loader
โดย jataz2 พ 20 ก.ย. 2017 5:13 pm บอร์ด SQL - Database
0
8
พ 20 ก.ย. 2017 5:13 pm โดย jataz2
ประกันสังคมพร้อมก้าวสู่ Digital SSO ไม่ต้องพกบัตรรับรองสิทธิ ตั้งแต่วันที่ 1 ม.ค. 61 เป็นต้นไป
โดย thatsawan พ 20 ก.ย. 2017 11:03 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
30
พ 20 ก.ย. 2017 11:03 am โดย thatsawan
เมื่อคุณประชุมทีมแล้ว ทีมไม่เข้าใจที่คุณพูด
โดย Before Dong พ 20 ก.ย. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
พ 20 ก.ย. 2017 10:19 am โดย Before Dong
Joomla 3.8 มาแล้ว
โดย mindphp อ 19 ก.ย. 2017 9:14 pm บอร์ด PHP News
0
17
อ 19 ก.ย. 2017 9:14 pm โดย mindphp
สถานะสถานพยาบาลที่เข้าร่วมประกันสังคม 2560 อัพเดทล่าสุด
โดย thatsawan อ 19 ก.ย. 2017 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 19 ก.ย. 2017 11:32 am โดย thatsawan
ทุกปัญหาใหญ่สำหรับ "User" เสมอ!!
โดย Before Dong อ 19 ก.ย. 2017 10:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
26
อ 19 ก.ย. 2017 10:16 am โดย Before Dong
เจอ Process ไม่พึงประสงค์ ผังและรัน ภายใต้ /tmp ป้องกันไม่ใช้ รันไฟล์ใน tmp
โดย mindphp อ 19 ก.ย. 2017 7:52 am บอร์ด Linux - Web Server
0
15
อ 19 ก.ย. 2017 7:52 am โดย mindphp
ใครใช้ CCleaner เวอร์ชั่นเก่า อัพเกรดด่วน ให้ใหม่กว่า เวอร์ชัน 5.33
โดย mindphp อ 19 ก.ย. 2017 5:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
18
อ 19 ก.ย. 2017 5:29 am โดย mindphp
facebook มันมันบังคับให้ตั้งชื่อใหม่ ให้เป็นชื่อจริงๆ
โดย บุคคลทั่วไป อ 19 ก.ย. 2017 5:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
17
อ 19 ก.ย. 2017 5:18 am โดย บุคคลทั่วไป
สอบถามการประยุกต์ใช้คำสั่ง rect()
โดย Ik Kat จ 18 ก.ย. 2017 6:00 pm บอร์ด JavaScript & Jquery Ajax
0
21
จ 18 ก.ย. 2017 6:00 pm โดย Ik Kat
วิธีแก้ปัญหา Can't create/write to file '/tmp/#sql_6182_0.MAI' (Errcode: 2)
โดย mindphp จ 18 ก.ย. 2017 3:40 pm บอร์ด Linux - Web Server
0
13
จ 18 ก.ย. 2017 3:40 pm โดย mindphp
ทำ pop up ให้ login wordpress
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 1:26 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
32
จ 18 ก.ย. 2017 1:26 pm โดย บุคคลทั่วไป