ปรับรูปแบบตัวหนังสือ

ปรับรูปแบบตัวหนังสือ

กลับหน้าแรก


           พื้นฐานของการใช้คำสั่งที่ปรับเปลี่ยนรูปแบบตัวหนังสือ ให้เป็นตัวหนา เอียง หรือขีดเส้นใต้  คำสั่ง <HR> , <BR> และ <P>   ซึ่งช่วยให้จัดวางข้อความในบรรทัดต่างๆ   คราวนี้ เราจะพูดถึงการเปลี่ยนขนาดตัวอักษร

คำสั่ง Heading(แปลว่าหัวข้อ)

                คำสั่ง Heading ถูกใช้อย่างมากในเอกสาร HTML ซึ่งนำมาใช้สร้างตัวอักษร แบบหัวข้อ ที่เป็นตัวใหญ่ๆ กว่าปกติ คำสั่ง Heading มี 6 คำสั่ง ไล่ตั้งแต่ <H1> ถึง <H6> โดยในคำสั่งเหล่านี้ <H1> เป็นคำสั่งที่ทำให้ตัวหนังสือใหญ่สุด ส่วน <H6> ทำให้ตัวอักษรเล็กสุด   ด้านล่างเป็นตัวอย่างจริงๆที่ใช้ Heading แบบต่างๆ (ถ้าเห็นเป็นตัวเล็กมาก ให้ปรับโดยกดที่ View บนเมนูแล้วเลือก Text Size แล้วกดเลือก Largest)

    <H1>ข้อความนี้ใช้ H1</H1>

      <H2>ข้อความนี้ใช้ H2</H2>

        <H3>ข้อความนี้ใช้ H3</H3>

          <H4>ข้อความนี้ใช้ H4</H4>

            <H5>ข้อความนี้ใช้ H5</H5>

              <H6>ข้อความนี้ใช้ H6</H6>

                คำสั่ง Heading ทำให้ตัวหนังสือใหญ่และหนา(ผมว่ายังเล็กไปหน่อยนะครับ) และง่ายต่อการนำมาใช้ แต่ว่ามีคุณลักษณะที่ไม่ดีอย่าง คือไม่สามารถนำคำสั่งอื่นๆมาหุ้มเพื่อสร้างผลเพิ่มเติมได้


คำสั่งปรับขนาดอักษร

                บางที คุณอาจต้องการควบคุมขนาดตัวหนังสือให้ได้มากกว่านี้ และผู้ที่จะทำหน้าที่นี้ คือคำสั่ง <FONT SIZE> คำสั่ง Heading อาจเหมาะสำหรับหัวข้อของหน้า แต่ในหัวข้อนี้ เราสามารถนำไปปรับใช้กับทั้งหน้า

คำสั่งปรับขนาด 12 แบบให้คุณเลือก : +6 ถึง +1 และ -6 ถึง -1

คุณอาจเดาได้ว่า +6 เป็นขนาดใหญ่สุด(ใหญ่มาก) และ -6 เป็นขนาดเล็กสุด(เล็กมากไปหน่อย) และนี่เป็นตัวอย่างจริงๆของคำสั่งเหล่านี้ ซึ่งผมขอแสดงเพียงคำสั่ง +6 , +3 , -1 และ -6 ซึ่งคำสั่งอื่นๆ คุณคงพอประมาณขนาดได้นะครับ

<FONT SIZE="+6"> ข้อความนี้ใช้ +6 </FONT>
<FONT SIZE="+3"> ข้อความนี้ใช้ +3 </FONT>
<FONT SIZE="-1"> ข้อความนี้ใช้ -1 </FONT>
<FONT SIZE="-6"> ข้อความนี้ใช้ -6 </FONT>

โปรดสังเกตว่า คำสั่ง <FONT SIZE="--"> จะทำหน้าที่ 2 อย่าง :

1. บอกว่าจะปรับเปลี่ยนขนาดตัวอักษร (ในส่วน <FONT)
2. ให้ค่าขนาดอักษรที่ต้องการเปลี่ยน (ในส่วน SIZE="--")

                ซึ่งแบบนี้ผมจะเรียกว่ามีคำสั่งอยู่ภายในคำสั่ง หรือในทางเทคนิคของ HTML จะเรียกคำสั่งภายในว่า "attribute"(แปลว่า คุณสมบัติ) ซึ่งในตัวอย่างข้างบน SIZE คือคุณสมบัติของ FONT ซึ่งคำสั่งปรับคุณสมบัติจะตามด้วยเครื่องหมายเท่ากับแล้วเครื่องหมายคำพูด ซึ่งมีค่าของคุณสมบัติอยู่ภายใน
                และสังเกตว่าคำสั่ง <FONT SIZE="--"> จะถูกปิดด้วย </FONT> ไม่ต้องปิดด้วย </FONT SIZE="--">   ซึ่งผมหมายความว่า ยังมีคุณสมบัติอื่นๆอีกสองตัว ที่สามารถนำมาใช้ในคำสั่ง FONT ได้แก่ : COLOR และ FACE  ถึงแม้ว่าคุณจะใช้ทั้งสามคุณสมบัติร่วมกันในคำสั่ง FONT คุณยังคงต้องปิดคำสั่งด้วย </FONT>

การจัดให้อยู่กลางหน้า

                จากที่คุณได้ทดลองเขียนมา คุณไม่สงสัยบ้างหรือครับว่า ทำไมข้อความที่ปรากฎในหน้าจอจะอยู่ทางซ้ายสุดเสมอ นั่นเป็นเพราะการตั้งค่าดั้งเดิมของ HTML ที่เรียกกันว่า default   ซึ่งจะเกิดขึ้นเมื่อคุณไม่ได้ระบุรูปแบบหรือค่าต่างๆ   ตัวอย่างต่อไปนี้จะเป็นข้อความที่ถูกจัดให้อยู่กลางจอพอดี ด้วยคำสั่งง่ายๆอย่าง <CENTER> และ </CENTER>

<CENTER>
ทุกตัวหนังสือในนี้จะอยู่กลางหน้า
</CENTER>

 

(หัวข้ออยู่ทางขวาครับ)

การจัดให้อยู่ขวาสุด

                มองเห็นหัวข้อที่อยู่ขวาสุดมั้ยครับ   ทำเช่นนั้นได้ด้วยการผลักตัวหนังสือให้อยู่ทางขวาของย่อหน้านั้น ซึ่งต้องใช้คำสั่งปรับคุณสมบัติของคำสั่ง <P> ที่เราเรียนไปแล้วในบทที่ 2 แต่มาถึงจุดนี้ เราต้องปรับเปลี่ยนใหม่ตามแบบข้างขวาล่างนี้

<P ALIGN="right">ตัวหนังสือในนี้จะถูกจัดให้อยู่ขวาสุด</P>

                เห็นรึเปล่าครับว่าผมเพิ่ม ALIGN="right" (align แปลว่า จัดวาง , right แปลว่า ขวา) เข้าไปในคำสั่ง <P> OK มั้ยครับ แต่หากคุณเพิ่มคุณสมบัติ(attribute) เข้าไปในคำสั่งเดี่ยวที่ไม่มีคำสั่งปิดในตอนแรก อย่างเช่น <P> หรือ <BR>(ใช่แล้วครับ มีคุณสมบัติสำหรับ BR ด้วย) คุณต้องจำเป็นต้องเพิ่มคำสั่งปิดเข้าไป ในกรณีนี้เป็น </P> สังเกตเห็นไหมครับ..

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

 

 
;