จากบทเรียนที่ผ่านมาเราได้ศึกษาคำสั่งเกี่ยวกับตัวอักษรมาแล้ว และพบว่า มีเฉพาะคำสั่ง <Hx> ... </Hx> เท่านั้นที่มีการตัดคำหรือข้อความขึ้นบรรทัดใหม่ ซึ่งในความเป็นจริงนั้น การป้อนข้อความในหน้าเว็บเพจจะต้องมีการตัดคำขึ้นบรรทัดใหม่ เพื่อให้เกิดความสวยงาม น่าอ่าน และเพื่อการเน้นข้อความสำคัญ และเพื่อให้มีความน่าสนใจยิ่งขึ้นก็จำเป็นจะต้องมีการแทรกภาพเข้าไปด้วย
 Line Break : การตัดคำขึ้นบรรทัดใหม่ |
ในบทที่ผ่านมาจากไฟล์ตัวอย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมื่อต้องการจะตัดคำขึ้นบรรทัดใหม่ต้องใช้คำสั่ง <br> แทรก ณ ตำแหน่งที่ต้องการให้ขึ้นบรรทัดใหม่ ดังตัวอย่าง
|
ตัวอย่าง การเขียนข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่สามารถทำได้ด้วยการใช้คำสั่ง Break (br) แทรก<br>ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป |
|
ผลที่ได้ การเขียนข้อความที่ต้องการตัดคำขึ้นบรรทัดใหม่สามารถทำได้ด้วยการใช้คำสั่ง Break (br) แทรก ตัวอย่างบรรทัดนี้จะถูกตัดลงบรรทัดถัดไป |
นอกจากนั้นเรายังสามารถแบ่งข้อความในรูปของย่อหน้า (Paragraph) สำหรับกลุ่มข้อความจำนวนมากได้ ด้วยการใช้คำสั่ง <P> ... </P> ผลที่ได้จะแตกต่างจากการใช้คำสั่ง <br> นั่นคือจะมีการเว้นช่องว่างหนึ่งบรรทัดก่อนและหลังย่อหน้า ดังตัวอย่าง
|
ตัวอย่าง <P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก</P> <P>นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง</P> ประโยคใหม่ที่ไม่มีคำสั่งกำกับ |
|
ผลที่ได้ นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าแรก นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าที่ใช้คำสั่ง Paragraph กำกับ นี่คือย่อหน้าที่สอง ประโยคใหม่ที่ไม่มีคำสั่งกำกับ |
| Space between texts : การกำหนดช่องว่างระหว่างข้อความ |
บราวเซอร์จะไม่สนับสนุนการแสดงผลการเคาะเว้นวรรคมากเกินกว่า 1 เคาะ (จะเว้นวรรค 10 ช่องก็แสดงเพียงช่องเดียว) และการกดปุ่มเยื้องย่อหน้าก็จะแสดงเพียง 1 ช่องว่างเท่านั้น เราสามารถกำหนดให้แสดงช่องว่างได้มากกว่า 1 ช่องว่างได้ด้วยการแทรกอักขระพิเศษลงไปคือ แทน 1 ชุดต่อ 1 ช่องว่างตัวอักษร ดังตัวอย่าง
|
ตัวอย่าง การแทรกช่องว่างเกินกว่า 1 ช่องว่าง เช่น นายมนตรี โคตรคันทา (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล) |
|
ผลที่ได้ การแทรกช่องว่างเกินกว่า 1 ช่องว่าง เช่น นายมนตรี โคตรคันทา (เว้น 5 ช่อง ระหว่างชื่อ - นามสกุล) |
| Indented Text : การจัดเยื้องย่อหน้าข้อความ |
ถ้าเราต้องการให้ข้อความมีการเยื้องจากขอบทั้งสองข้างของหน้าเว็บเพจ สามารถใช้คำสั่ง <BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความที่อยู่ระหว่างคำสั่งดังกล่าวจะเยื้องระยะจากขอบทั้งสองด้านดังตัวอย่าง
|
ตัวอย่าง <BLOCKQUOTE> ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE> </BLOCKQUOTE> |
ผลที่ได้ข้อความนี้ต้องการเยื้องให้ห่างจากขอบทั้งสองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดูสวยงามอ่านง่าย ด้วยการใช้คำสั่ง <BLOCKQUOTE> |
แต่ถ้าหากต้องการเยื้องย่อหน้าในบรรทัดแรกเพียงบรรทัดเดียว สามารถใช้การแทรกตัวอักษรว่างลงไปเท่ากับจำนวนเคาะวรรคที่ต้องการได้โดยตรง หรือจะกำหนดในคำสั่งย่อหน้า <p style="text-indent: 30"> ก็ได้ (ใช้ได้ดีกับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล) ดังตัวอย่าง
|
ตัวอย่าง การเยื้องย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอักษร) <p style="text-indent: 30">การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล </p> |
|
ผลที่ได้ การเยื้องย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด (ตัวอักษร) การเยื้องย่อหน้าด้วยการกำหนดสไตล์ให้กับคำสั่งย่อหน้า ค่าตัวเลข 30 คือหน่วยพิกเซล |
| Alignments : การจัดวางตำแหน่งของข้อความหรือรูปภาพ |
เราสามารถจัดวางตำแหน่งข้อความหรือรูปภาพในหน้าเว็บเพจได้ ทั้งการกำหนดให้ตัวอักษรข้อความหรือรูปภาพชิด ด้านซ้าย/กลาง/ขวาของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชิดซ้ายอยู่แล้วด้วย)
ด้วยการใช้คำสั่ง <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความ/รูปภาพนั้น
|
ตัวอย่าง <DIV ALIGN="LEFT">ข้อความนี้จัดชิดซ้าย</DIV><br> <DIV ALIGN="CENTER">ข้อความนี้จัดกึ่งกลาง</DIV><br> <DIV ALIGN="RIGHT">ข้อความนี้จัดชิดขวา</DIV> |
|
ผลที่ได้ ข้อความนี้จัดชิดซ้าย ข้อความนี้จัดกึ่งกลาง ข้อความนี้จัดชิดขวา
|
| Images in ypur web page : การแทรกรูปภาพในเว็บเพจ |
จากบทที่สองเราได้มีการแทรกรูปภาพลงไปเป็นพื้นหลังด้วยคำสั่ง Background="ชื่อรูปภาพ" มาแล้ว รูปภาพที่นำมาใช้ในเว็บเพจนั้นจะต้องอยู่ในสกุล JPG, GIF, PNG เท่านั้นและจะต้องมีขนาดที่เหมาะสมเพื่อให้สามารถดาวน์โหลดได้เร็ว สำหรับในการแทรกรูปภาพบนหน้าเว็บเพจนั้นสามารถทำได้ง่ายๆ ด้วยการระบุคำสั่ง <IMG SRC="ชื่อรูปภาพ"> ดังตัวอย่างนี้จะเป็นการแทรกรูปภาพทั้งเป้นพื้นหลังและในหน้าเว็บเพจ
|
<html> <head> <title> Insert Images : การแทรกภาพ </title> </head> <body background="bgimage.gif"> ข้อความที่แสดงในส่วนเนื้อหา <img src="kerokero.gif"> </body> </html> |
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ
ข้อความที่แสดงในส่วนเนื้อหา  |
จะสังเกตได้ว่าคำสั่ง IMG นี้เป็นคำสั่งเดี่ยวไม่ต้องมีคำสั่งปิด เมื่อมีการเก็บรูปภาพไว้ในโฟลเดอร์ใดเป็นการเฉพาะ จะต้องกำหนดเส้นทางชี้ไปยังรูปภาพให้ถูกต้องด้วย เช่น เมื่อเก็บรูปภาพไว้ในโฟลเดอร์ชื่อ images เราจะต้องอ้างในคำสั่งเป็น <IMG SRC="images/name.gif"> หากอ้างผิดไฟล์ภาพนั้นก็จะไม่แสดงดังตัวอย่างภาพนี้ 
เพราะไม่มีรูปนี้อยู่จริง
หากเราต้องการแสดงรูปให้มีขนาดต่างจากขนาดจริงของภาพ ก็สามารถทำได้ด้วยการกำหนดเพิ่มในส่วนของความกว้าง ความยาวของรูปภาพ ดังตัวอย่าง ภาพแรกคือภาพขนาดจริง ภาพที่สองเป็นการลดขนาดลง และภาพที่สามเป็นการเพิ่มขนาดขึ้น
|
<html> <head> <title> Insert Images : การกำหนดขนาดภาพ </title> </head> <body> แสดงการกำหนดขนาดภาพ<br> <img src="daffy.gif"><br> <img src="daffy.gif" width="50" height="51"><br> <img src="daffy.gif" width="150" height="153"><br> </body> </html> |
|
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ แสดงการกำหนดขนาดภาพ  |
| Alignment and border size for images : การวางตำแหน่งและเส้นขอบรูปภาพในเว็บเพจ |
การจัดวางตำแหน่งรูปภาพจะใช้คำสั่งเดียวกันกับการวางตำแหน่งตัวอักษร และยังสามารถกำหนดเส้นขอบรอบรูปภาพด้วยการเพิ่มคำสั่งคุณสมบัติเส้นขอบ border ต่อจากชื่อรูปภาพได้ดังตัวอย่าง
|
<html> <head> <title> Insert Images : ตำแหน่งและเส้นขอบรูปภาพ </title> </head> <body> <div align="center"> ตำแหน่งและเส้นขอบรูปภาพ<br> <img src="kerokero.gif" border="3"> </div> </body> </html> |
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ
ตำแหน่งและเส้นขอบรูปภาพ |
นอกจากนี้แล้วเรายังสามารถกำหนดให้มีการแสดงชื่อรูปภาพ หรือคำบรรยาย หรือรายละเอียดของรูปภาพได้เมื่อนำเมาท์ไปชี้บนรูปนั้น หรือในกรณีที่ผู้ชมบางคนกำหนดให้บราวเซอร์ไม่ต้องแสดงผลรูปภาพเพื่อความรวดเร็วในการชมเว็บ รูปจะถูกแทนที่ด้วยชื่อ ที่เรียกว่า Alternative text โดยใช้วิธีการเพิ่มคุณสมบัติลงไปในคำสั่งแทรกรูปภาพดังตัวอย่าง
| END : สรุปคำสั่งที่ใช้ในบทนี้ |
|
