Chapter 8

การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่งข้อความ (Paragraph)

ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align  และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

<p align="left | center | right |justify">...</p>
tag <p> การแสดงผล
<p align="left">ข้อดวามในพารากราฟ</p>
<p>ข้อดวามในพารากราฟ</p>

ข้อดวามในพารากราฟ

HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<p align="center">ข้อดวามในพารากราฟจัดวางกึ่งกลาง</p>

ข้อดวามในพารากราฟจัดวางกึ่งกลาง

HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
<p align="right">ข้อดวามในพารากราฟจัดชิดขวา</p>

ข้อดวามในพารากราฟจัดชิดขวา

HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)

<p align="justify">ข้อดวามในพารากราฟ กระจายคำให้พอดี</p>

ข้อดวามในพารากราฟ กระจายคำให้พอดี

HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)



การขึ้นบรรทัดใหม่

โดยปกติ ถ้าข้อความยาวมากๆ เว็บเบราเซอร์์จะตัดคำขึ้นบรรทัดใหม่ให้อยู่แล้ว แต่ถ้าต้องการกำหนดการขึ้นบรรทัดใหม่เอง ให้ใช้ tag <br> ถ้าให้เป็นไปตามมาตรฐานใหม่ของ (X)HTML ใช้ <br />

และสามารถกำหนดรูปแบบการขึ้นบรรทัดใหม่ได้หลายแบบ ผ่าน attribute clear ที่มีค่่าเป็น left / right / all /none
<br clear="left | right | all | none">
หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้
<br clear="left | right | all | none" />
tag <br>, <br /> การแสดงผล
<p>HTML (Hyper Text Markup Language)<br /> เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ<br /><br /> เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) </p>

HTML (Hyper Text Markup Language)
เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ

เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)

<img src="../images/ryoma.jpg" align="left">
ข้อความข้างรูป<br />
เอจิเซ็น เรียวมะ
 ข้อความข้างรูป
เอจิเซ็น เรียวมะ
<img src="../images/ryoma.jpg" align="left">
ข้อความข้างรูป<br clear="left" />
เอจิเซ็น เรียวมะ
 ข้อความข้างรูป
เอจิเซ็น เรียวมะ


การจัดกลุ่มข้อความ (div, span)

tag <div> และ tag <span> ใช้สำหรับกำหนดรูปแบบหรือลักษณะข้อความที่อยู่ภาย tag   มักใช้ร่วมกับ CSS

tag <div> เป็น tag ที่มีไว้แบ่งส่วนเนื้อหาของ HTML ออกจากกันเป็นส่วนๆ (block) ถ้า <div> ไม่ได้กำหนดคุณลักษณะใดๆ ก็จะมีผลเหมือนกับการใช้ tag <p> และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

<div align="left | center | right |justify">...</div>
ส่วน tag <span> คล้ายกับ tag <div> แต่มักใช้จัดแต่ง ข้อความสั้นๆ (inline) ที่อยู่ใต้การกำหนดรูปแบบของ tag อื่นอยู่แล้ว เพื่อให้มีรูปแบบที่ต่างไปจากรูปแบบเหล่านั้น และจะไม่ขึ้นบรรทัดใหม่ (ไม่เหมือนกับ <div>)

<span>...</span>
Example
<div align="center">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</div>
Output
 
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language) ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
Exampleใช้งาน <div> และ <span> ร่วมกับ CSS (จะได้เรียนเรื่อง CSS ในบทต่อๆ ไปค่ะ)
<div style="color:#003399">
<h2>หัวข้อ</h2>
<p>ข้อความใน <span style="font-weight:bold">พารากราฟ</span></p>
</div>
Output
 

หัวข้อ

ข้อความใน พารากราฟ

ปัจจุบัน <div> ถูกนำมาใช้จัด Layout ให้กับหน้าเว็บเพจแทนการใช้ Table เราสามารถใช้ <div> แบ่งสัดส่วนหน้าเว็บเพจเป็นส่วน Header, Footer, Navigation และส่วนเนื้อหา Article ทำให้สามารถเปลี่ยนแปลง CSS ได้ง่ายกว่า และไม่เยิ่นเย้อเหมือน Table, โหลดได้เร็วกว่า และยังเพิ่มความสามารถในการเข้าถึงข้อมูลให้กับคนพิการทางสายตา ซึ่งจะอาศัยโปรแกรม Screen Readers อ่านเนื้อหาในเว็บให้ฟัง เรื่อง Page Layout นี้จะพูดถึงในเรื่อง CSS บทที่ 23

« Chapter 7
Chapter 9 »