Munuบทเรียนการเขียนเว็บด้วยภาษา html
บทที่ 3 ปรับขนาดตัวอักษร
ปรับขนาดตัวหนังสือ
เอ่อ.. HTML หน้าแรกที่คุณทำเมื่อคืนนี้เป็นอย่างไรบ้างครับ ? ผมเดาว่ามันต้องไปได้สวยแน่ เพราะว่าถ้าไม่ คุณก็จะเรียนบทต่อไปไม่ได้ เอาล่ะครับ ตอนนี้คุณรู้พื้นฐานของการใช้คำสั่งที่ปรับเปลี่ยนรูปแบบตัวหนังสือ ให้เป็นตัวหนา เอียง หรือขีดเส้นใต้ เรียบร้อยแล้ว และรู้คำสั่ง <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> เพียงเพื่อเว้นหนึ่งบรรทัดและขึ้นบรรทัดใหม่ ก็ให้ใช่เดี่ยวๆได้ครับ แต่หากต้องการปรับเปลี่ยนคุณสมบัติ คุณต้องใช้คำสั่งปิดเพิ่มเข้ามา
ในที่สุดก็จบบทที่ 3 …สังเกตว่าบทนี้มีตัวหนังสือน้อยลงไหมครับ ?… ตอนนี้เราอยากให้คุณใช้คำสั่ง Heading , FONTSIZE และ CENTER เขียนลงในหน้าที่คุณสร้างขึ้น การปฎิบัติคือการเรียนรู้… นักปราชญ์เขาเคยพูดไว้เช่นนั้น ผมคิดว่าเขามีหนวดยาวๆด้วย
กลับ_บทที่ 2 คำสั่งของ html กำลังอ่านบทที่ 3 ปรับขนาดตัวอักษร ไป_บทที่ 4 การสร้าง link
