หน้าแรก » ข่าวสาร » การจัดวางตัวหนังสือร่วมกับรูปภาพ html

บทเรียนการเขียนเว็บด้วยภาษา html

การจัดวางตัวหนังสือร่วมกับรูปภาพ

มีผู้คนมากมายถามถึงการนำรูปมาไว้ในหน้าเว็บ ถ้าคุณยังไม่แน่ใจนัก ให้กลับไปดูใน บทเรียนที่ 5 แต่หลังจากที่หลายคนรู้วิธีการใส่ภาพแล้ว พวกเขาก็มีคำถามอีกว่า จะจัดวางตัวหนังสือให้รายล้อมรูปภาพได้อย่างไร และการตอบคำถามนี้ คือจุดมุ่งหมายของบทเรียนนี้ครับ

วางตัวหนังสือรายล้อมรูปภาพ

วิธีทำนั้นง่ายกว่าที่คุณคิดมากครับ คุณเห็นรูปเดิมๆ 2 รูปที่ผมนำมาวางไว้ทั้งซ้ายและขวาไหมครับ ทั้งสองรูปนี้มีตัวหนังสือขนาบข้างอยู่ ผมทำเช่นนี้ได้โดยใช้คำสั่ง :

<IMG SRC=”t2006.jpg” WIDTH=”161″ HEIGHT=”114″ ALIGN=”left” ALT=”ธรรมามูล”>

และ

<IMG SRC=”t2010.jpg” WIDTH=”161″ HEIGHT=”114″ ALIGN=”right” ALT=”ธรรมามูล”>

 

แต่คุณคิดว่า รูปภาพอยู่ทางซ้ายอยู่แล้ว จะต้องจัดซ้ายทำไมอีก …เพราะว่าเราต้องการให้คำสั่ง ALIGN บอก Browser ว่าให้ทำตัวหนังสือขนาบข้าง ไม่งั้นตัวหนังสือจะตกลงไปข้างล่างแทนครับ

ให้สังเกตว่าผมใช้คำสั่ง กำหนดความกว้างและสูง เพื่อให้ได้ขนาดที่ผมต้องการ และใช้คำสั่ง ALT เพื่อสร้างคำอธิบายรูป ซึ่งคุณควรนำไปใช้กับทุกๆรูปเช่นเดียวกัน

การจัดให้รูปภาพอยู่ซ้ายและขวา ทำได้ด้วยคำสั่ง ALIGN=”–” โดย left หมายถึง ซ้าย และ right หมายถึง ขวา

รูปอยู่ตรงกลาง ตัวหนังสือขนาบซ้ายขวา

 

ก็คือด้านบนที่คุณผ่านมาล่ะครับ ซึ่งจริงๆแล้วไม่ได้ใช้เทคนิคอะไรนัก ที่เห็นนั้นเป็นตารางสามช่อง ซึ่งช่องกลางใส่รูปภาพ อีกสองช่องทีเหลือใส่ตัวหนังสือ   ผมทำเริ่มทำแบบนั้น จากการแยกเนื้อหาออกเป็นสองส่วน และต้องมั่นใจว่า มีข้อความมากพอ เพื่อให้มีความสูงใกล้เคียงกับรูป นี่เป็นวิธีที่ผมใช้ครับ…

 

<TABLE BORDER=”0″ CELLPADDING=”3″ CELLSPACING=”3″WIDTH=”70%” STYLE=”font-size:25px”>

<TR>

<TD>ตัวหนังสือส่วนแรก</TD>

<TD><CENTER> รูปภาพ </CENTER></TD>

<TD>ตัวหนังสือส่วนที่สอง</TD>

</TR>

</TABLE>

 

(การใช้ STYLE=”font-size:25px” เพื่อปรับตัวอักษรให้ใหญ่ขึ้น จะอยู่ในหัวข้อของ CSS ครับ)

วางตัวหนังสือข้างตารางได้เช่นกัน :

ตารางนี้ใช้	ALIGN=”left”
เพื่อให้ตัวหนังสือ	อยู่ติดทางขวาได้

ตารางนี้สร้างจาก TABLE BORDER=”2″ CELLPADDING=”3″ CELLSPACING=”3″ ALIGN=”left”

วางตัวหนังสือตามตำแหน่งรูป

<ใช้ ALIGN=”top”>

<ใช้ ALIGN=”middle”>

<ใช้ ALIGN=”bottom”>

ตัวหนังสือที่ใช้คำสั่ง H ไม่สามารถจัดวางเช่นนี้ได้

 

คำสั่ง H ชอบอยู่โดดเดี่ยว ไม่ชอบร่วมมือกับใคร หากคุณต้องการปรับขนาดตัวอักษรข้างๆรูปภาพ ให้ใช้คำสั่ง

<FONT SIZE>

วางตัวหนังสือตามตำแหน่งที่ต้องการ

 

ถ้าคุณใช้การจัดวางบนสุด ตรงกลาง หรือล่างสุดของขอบรูป ดังตัวอย่างข้างบน แล้วเผลอพิมพ์ตัวหนังสือเกินบรรทัดนั้น ส่วนที่เหลือจะกระโดดลงมาอยู่ใต้รูป …เวรจริง   แต่มีวิธีแก้ครับ ต้องใช้เทคนิคหน่อย อย่างแรกคุณต้องจัดรูปให้อยู่ทางซ้ายหรือขวา เพื่อเตรียมวางตัวหนังสือไว้ข้างๆ (ซึ่งจะถูกจัดไว้บนสุดของขอบรูป) เมื่อคุณใส่ตัวหนังสือไปมากพอแล้ว ให้ใช้คำสั่งนี้ :

 

 

<BR CLEAR=”all”>

12345

6789

รูปและตัวเลขบนนี้สร้างจาก :

 

<IMG SRC=”t2010.jpg” width=”265″ height=”172″ ALIGN=”left” ALT=”ธรรมามูล”>

<BR>12345<BR CLEAR=”all”>6789

 

ผมวางรูปมาทางซ้ายก่อน แล้วเว้นหนึ่งบรรทัด(<BR>) เพื่อให้ “12345” ตกลงมาเล็กน้อย แล้วใช้คำสั่ง <BR CLEAR=”all”> เพื่อเว้นบรรทัดยาวตลอดจนหลุดออกจากขอบรูป “6789” จึงตกอยู่ใต้รูป

 

การเว้นที่ว่างหลายๆบรรทัด

 

คุณเคยใส่คำสั่ง <P> เข้าไปติดๆกันหลายสิบตัวไหมครับ ผมที่ออกมาไม่ต่างกับการใช้คำสั่ง <P> ตัวเดียว เหตุที่เป็นเช่นนี้เพราะว่าคุณไม่ได้ใส่อะไรหลังคำสั่ง <P> ลองใช้แบบนี้ดูสิครับ :

<P>&nbsp;<P>

 

เหตุที่ใส่ &nbsp; เพราะมันเป็นที่ว่าง ซึ่งมองไม่เห็น และเพื่อให้คำสั่ง <P> ต่อๆไปทำงานได้ เท่านี้คุณก็จะได้บรรทัดว่างๆมา 2 บรรทัด   ยังมีอีกวิธีคือใช้แต่เพียงคำสั่ง <BR> แค่จะต้องใส่ไปมากหน่อยครับ หรือจะใช้ <BR> และ <P> สลับติดกันไปก็ได้

 

การสร้างที่ว่างตามต้องการ

 

อย่างนี้ไม่มีวิธีลัดครับ หากคุณต้องการเว้นว่างตรงนี้หน่อย เว้นบรรทัดตรงนั้นหน่อย คุณต้องพิมพ์ลงไปด้วย :

 

• <BR> ใช้สำหรับขึ้นบรรทัดใหม่
• <P> ใช้สำหรับเว้น 1 บรรทัดแล้วขึ้นบรรทัดใหม่
• &nbsp; ใช้สำหรับเว้นช่องว่างขนาด 1 ตัวอักษร

กลับ_ย่อหน้าและสัญญลักษณ์   หน้านี้การวางตัวหนังสือร่วมกับภาพ   ไป_การใส่เสียงเพลง

 

Tags: บริษัทรับทำเว็บไซต์ กรอบรูป, บริษัทรับทำเว็บไซต์ รองเท้าหนัง, บริษัทรับทำเว็บไซต์ เครื่องกรองไฟฟ้าชนิดแห้ง (FilterDrier), บริษัทรับทำเว็บไซต์ เสื้อผ้า เครื่องแต่งกาย (Sweater Children SweaterMen SweaterWomen), บริษัทรับทำเว็บไซต์ ใบชาอูลอง