ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytการจัดและตกแต่งข้อความ


ตัวอักษรหนา,ตัวเอียง,ตัวขีดเส้นใต้ | การใส่สีอักษร | การใส่ขนาดอักษร | การใส่รูปแบบอักษร | การประยุกต์การกำหนดรูปแบบอักษร
หัวข้อแบบรายการ | กำหนดหัวเรื่อง | เส้นแบ่งกั้นหน้า | ตัดคำขึ้นบรรทัดใหม่ | กำหนดช่องว่างระหว่างข้อความ | จัดเยื้องย่อหน้าข้อความ | จัดวางตำแหน่งข้อความ

ytLine Break : การตัดคำขึ้นบรรทัดใหม่

ในบทที่ผ่านมาจากไฟล์ตัวอย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมื่อต้องการจะตัดคำขึ้นบรรทัดใหม่ต้องใช้คำสั่ง <br> แทรก ณ ตำแหน่งที่ต้องการให้ขึ้นบรรทัดใหม่ ดังตัวอย่าง

ตัวอย่าง
        การเขียนข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่สามารถทำได้ด้วยการใช้คำสั่ง Break (br) แทรก<br>ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป
 
ผลที่ได้
        การเขียนข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่สามารถทำได้ด้วยการใช้คำสั่ง Break (br) แทรก
        ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป
 

นอกจากนั้นเรายังสามารถแบ่งข้อความในรูปของย่อหน้า (Paragraph) สำหรับกลุ่มข้อความจำนวนมากได้ ด้วยการใช้คำสั่ง <P> ... </P> ผลที่ได้จะแตกต่างจากการใช้คำสั่ง <br> นั่นคือจะมีการเว้นช่องว่างหนึ่งบรรทัดก่อนและหลังย่อหน้า ดังตัวอย่าง

ตัวอย่าง
<P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก</P>
<P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง</P>
ประโยคใหม่ที่ไม่มีคำสั่งกำกับ
 
ผลที่ได้

นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก

นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง

                ประโยคใหม่ที่ไม่มีคำสั่งกำกับ

Click to TOP
ytSpace between texts : การกำหนดช่องว่างระหว่างข้อความ

บราวเซอร์จะไม่สนับสนุนการแสดงผลการเคาะเว้นวรรคมากเกินกว่า 1 เคาะ (จะเว้นวรรค 10 ช่องก็แสดงเพียงช่องเดียว) และการกดปุ่มเยื้องย่อหน้าก็จะแสดงเพียง 1 ช่องว่างเท่านั้น เราสามารถกำหนดให้แสดงช่องว่างได้มากกว่า 1 ช่องว่างได้ด้วยการแทรกอักขระพิเศษลงไปคือ   &nbsp;   แทน 1 ชุดต่อ 1 ช่องว่างตัวอักษร ดังตัวอย่าง

ตัวอย่าง
การแทรกช่องว่างเกินกว่า 1 ช่องว่าง เช่น นายวันฉลอง &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; เศรษฐบุตร (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล)
 
ผลที่ได้
การแทรกช่องว่างเกินกว่า 1 ช่องว่าง เช่น นายวันฉลอง      เศรษฐบุตร (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล)
 

Click to TOP
ytIndented Text : การจัดเยื้องย่อหน้าข้อความ

ถ้าเราต้องการให้ข้อความมีการเยื้องจากขอบทั้งสองข้างของหน้าเว็บเพจ สามารถใช้คำสั่ง <BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความที่อยู่ระหว่างคำสั่งดังกล่าวจะเยื้องระยะจากขอบทั้งสองด้านดังตัวอย่าง

ตัวอย่าง
<BLOCKQUOTE> ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE> </BLOCKQUOTE>
ผลที่ได้
ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE>

แต่ถ้าหากต้องการเยื้องย่อหน้าในบรรทัดแรกเพียงบรรทัดเดียว สามารถใช้การแทรกตัวอักษรว่างลงไปเท่ากับจำนวนเคาะวรรคที่ต้องการได้โดยตรง หรือจะกำหนดในคำสั่งย่อหน้า <p style="text-indent: 30"> ก็ได้ (ใช้ได้ดีกับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล) ดังตัวอย่าง

ตัวอย่าง
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; การเยื้องย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอักษร)
<p style="text-indent: 30">การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล </p>
ผลที่ได้
          การเยื้องย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอักษร)

การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล

Click to TOP
ytAlignments : การจัดวางตำแหน่งของข้อความ

เราสามารถจัดวางตำแหน่งข้อความหรือรูปภาพในหน้าเว็บเพจได้ ทั้งการกำหนดให้ตัวอักษรข้อความหรือรูปภาพชิด ด้านซ้าย/กลาง/ขวาของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชิดซ้ายอยู่แล้วด้วย)
                ด้วยการใช้คำสั่ง <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความ/รูปภาพนั้น

ตัวอย่าง
<DIV ALIGN="LEFT">ข้อความนี้จัดชิดซ้าย</DIV><br>
<DIV ALIGN="CENTER">ข้อความนี้จัดกึ่งกลาง</DIV><br>
<DIV ALIGN="RIGHT">ข้อความนี้จัดชิดขวา</DIV>
ผลที่ได้
ข้อความนี้จัดชิดซ้าย
ข้อความนี้จัดกึ่งกลาง

ข้อความนี้จัดชิดขวา

Click to TOP
ytEND : สรุปคำสั่งที่ใช้ในบทนี้
TAGS รายละเอียด
<body> ... </body> คำสั่งกำหนดการแสดงผลในส่วนเนื้อหาของเว็บเพจ
<b> ... </b>,
<i> ... </i>,
<u> ... </u>
การกำหนดรูปแบบตัวอักษรเป็นตัวหนา
ตัวเอียง
และขีดเส้นใต้
<Hx> ... </Hx> การกำหนดขนาดตัวอักษรหัวเรื่อง เมื่อ x คือ ตัวเลข 1-7 เป็นขนาดเรียงลำดับจากใหญ่สุดไปเล็กสุด
<font size="n"> การกำหนดขนาดตัวอักษร เมื่อ n คือ ตัวเลข 1-7 เป็นขนาดเรียงลำดับจากเล็กสุดไปใหญ่สุด
<font face="name"> การกำหนดชื่อแบบตัวอักษรให้แตกต่างจากข้อความส่วนอื่น
<font color="name"> การกำหนดสีของตัวอักษรให้แตกต่างจากข้อความส่วนอื่น ใช้ได้ทั้งแบบระบุชื่อสี หรือกำหนดค่าตัวเลขฐาน 16 (Hexadecimal)
<div align="ตำแหน่ง"> ... </div> สำหรับจัดวางตำแหน่งข้อความหรือรูปภาพในหน้าเว็บเพจ  ประกอบด้วย LEFT/CENTER/RIGHT
<p align="ตำแหน่ง">...</p> สำหรับจัดย่อหน้าข้อความ
<br> สำหรับตัดคำขึ้นบรรทัดใหม่
<BLOCKQUOTE> ... </BLOCKQUOTE> สำหรับจัดเยื้องหน้าข้อความ

ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP