Munu

ปรับขนาดตัวอักษร html

หน้าแรก » ข่าวสาร » ปรับขนาดตัวอักษร html

บทเรียนการเขียนเว็บด้วยภาษา 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

 

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

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

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com