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

ผลลัพธ์คือ

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามวิธีดึงค่าจาก sql มาเข้าไลน์
โดย 2kkkkk จ 17 ส.ค. 2020 6:43 pm บอร์ด Programming - PHP
3
180
พฤ 20 ส.ค. 2020 6:57 pm โดย mindphp
วิธีใส่เสียงประกอบด้วย ลงในวีดีโอ ด้วย DaVinci Resolve 16
โดย nai_cyp จ 17 ส.ค. 2020 5:53 pm บอร์ด Graphic design
0
91
จ 17 ส.ค. 2020 5:53 pm โดย nai_cyp
สอบถามโปรแกรมอัดหน้าจอ (Windows)
โดย nai_cyp จ 17 ส.ค. 2020 1:16 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
208
จ 17 ส.ค. 2020 1:17 pm โดย thatsawan
วิธีใส่ข้อความในวิดีโอด้วย DaVinci Resolve 16
โดย nai_cyp จ 17 ส.ค. 2020 10:37 am บอร์ด Graphic design
0
99
จ 17 ส.ค. 2020 10:37 am โดย nai_cyp
วิธีเบลอวิดีโอด้วย DaVinci Resolve 16
โดย nai_cyp อ 16 ส.ค. 2020 5:33 am บอร์ด Graphic design
0
85
อ 16 ส.ค. 2020 5:33 am โดย nai_cyp
การต่อวิดีโอด้วย DaVinci Resolve 16
โดย nai_cyp อ 16 ส.ค. 2020 5:07 am บอร์ด Graphic design
0
74
อ 16 ส.ค. 2020 5:07 am โดย nai_cyp
วิธีตัดวิดีโอด้วย DaVinci Resolve 16
โดย nai_cyp อ 16 ส.ค. 2020 4:50 am บอร์ด Graphic design
0
104
อ 16 ส.ค. 2020 4:50 am โดย nai_cyp
ติดตั้ง Joomla บน ubuntu ไม่ได้ค่ะ
โดย bolue ส 15 ส.ค. 2020 6:35 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
6
181
จ 17 ส.ค. 2020 10:50 am โดย bolue
การใส่ เมนู ใน editor ของ mindphp ไม่ขึ็นข้อมูล
โดย bolue ส 15 ส.ค. 2020 10:14 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
113
ส 15 ส.ค. 2020 10:14 am โดย bolue
Joomla 4 beta 3 มาแล้ว มีอะไรใหม่ บ้างมาดูกัน
โดย mindphp ศ 14 ส.ค. 2020 2:12 pm บอร์ด MindPHP News & Feedback
0
112
ศ 14 ส.ค. 2020 2:12 pm โดย mindphp
การใช้ try-catch จับ Exception ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 2:47 pm บอร์ด Share Knowledge
0
103
พฤ 13 ส.ค. 2020 2:47 pm โดย nai_cyp
การใช้ switch ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 2:45 pm บอร์ด Share Knowledge
0
103
พฤ 13 ส.ค. 2020 2:45 pm โดย nai_cyp
การใช้คำสั่ง break และ continue ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 2:44 pm บอร์ด Share Knowledge
0
85
พฤ 13 ส.ค. 2020 2:44 pm โดย nai_cyp
การใช้ Do-While loop ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 1:37 pm บอร์ด Share Knowledge
0
119
พฤ 13 ส.ค. 2020 1:37 pm โดย nai_cyp
การใช้ For-loop ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 1:36 pm บอร์ด Share Knowledge
0
108
พฤ 13 ส.ค. 2020 1:36 pm โดย nai_cyp
การใช้ While-loop ในภาษา Java
โดย nai_cyp พฤ 13 ส.ค. 2020 1:33 pm บอร์ด Share Knowledge
0
117
พฤ 13 ส.ค. 2020 1:33 pm โดย nai_cyp
โปรแกรมตัดต่อ VDO ที่ฟรี บน windows
โดย nai_cyp พฤ 13 ส.ค. 2020 11:35 am บอร์ด Share Knowledge
2
129
พฤ 13 ส.ค. 2020 12:36 pm โดย nai_cyp
สร้าง crontab ใน Directadmin แล้ว Error Error Creating Cron Job
โดย mindphp พ 12 ส.ค. 2020 5:08 am บอร์ด Linux - Web Server
1
152
พ 12 ส.ค. 2020 5:17 am โดย mindphp
Undertaker เปิดตัวด้วยเพลงของ Metalica (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
106
จ 24 ส.ค. 2020 10:53 am โดย Sirayu
Green Day ปล่อยเพลงใหม่ช่วง COVID-19 (ดนตรี)
โดย nai_cyp อ 11 ส.ค. 2020 5:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
91
จ 24 ส.ค. 2020 10:54 am โดย Sirayu