วิชาการพัฒนาเว็บไซต์ HTML 7
บทที่ 2
การกาหนดรปู แบบตัวอักษร
การกาหนดรูปแบบตวั อักษร เพื่อใหเ้ กดิ ความแตกต่างของขอ้ ความที่ต้องการนาเสนอในเว็บ
เพจ มีดังน้ี
1. การทาตวั อกั ษรหนา,เอียง,ขดี เส้นใต้
รปู แบบคาส่งั :
<B> ...ขอ้ ความ..... </B> :คาสง่ั ตัวหนา
<I> ...ขอ้ ความ..... </I> :คาสง่ั ตัวเอยี ง
<U> ...ข้อความ..... </U> :คาสงั่ ขดี เส้นใต้
คาอธิบาย : เมือ่ เราตอ้ งการทาให้ตัวอักษรหนา เอยี ง หรือขีดเส้นให้ ให้นาคาส่งั ข้างตน้ ไปคร่อม
ขอ้ ความนนั้ ไว้
เชน่ ต้องการแต่งคาวา่ "การเขียนเว็บเพจด้วยภาษา HTML " ให้เอียงและหนา
ใหท้ าดังนี้ <I><B> การเขยี นเว็บเพจดว้ ยภาษา HTML</B></I>
ผลลพั ธท์ ี่ได้คือ การเขยี นเว็บเพจด้วยภาษา HTML
ตัวอยา่ ง : ทดสอบการทาตัวอกั ษรหนา,เอียง,ขีดเสน้ ใต้
รูปแบบคาส่งั
<HTML>
<HEAD>
<TITLE>การใส่สีอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>
<font size=2 face="ms sans serif">
<B>ขอ้ ความหนา</B><br>
<I>ข้อความเอียง</I><br>
<U>ข้อความขีดเส้นใต้<U><br>
<B><I>ขอ้ ความหนา+เอยี ง</I></B><br>
<B><I><U>ขอ้ ความหนา+เอียง+ขีดเสน้ ใต้</U></i></B> <br>
<I><U>ขอ้ ความเอียง+ขดี เส้นใต้</U></I><br>
<U><B>ข้อความขดี เสน้ ใต+้ หนา</B></U><br>
</font>
วิชาการพัฒนาเวบ็ ไซต์ HTML 8
</BODY>
</HTML>
การแสดงผล
2. การใส่สอี กั ษร
รปู แบบคาส่งั : <font color=ชอ่ื สีหรือ#รหัสสี > .....ขอ้ ความ.....</font>
คาอธิบาย : เป็นคาส่งั ท่ีใช้ในการตกแตง่ อักษรให้เปน็ สตี า่ งๆ ตามชอ่ื สีหรอื รหสั สี โดยนาคาสง่ั
นีไ้ ปคร่อมข้อความทจ่ี ะตกแต่ง
ตัวอยา่ ง : การตกแตง่ สีอกั ษร
รูปแบบคาส่งั
<HTML>
<HEAD> <TITLE> การใส่สีอกั ษร</TITLE> </HEAD>
<BODY bgcolor=white>
<font color=red> อักษรสีแดง </font> <br>
<font color=blue> อักษรสนี า้ เงิน </font> <br>
<font color=#66CCFF> อักษรสีฟา้ </font> <br>
</BODY>
</HTML>
วิชาการพฒั นาเวบ็ ไซต์ HTML 9
การแสดงผล
3. การใสข่ นาดอกั ษร
รูปแบบคาสัง่ : <font size=ขนาดอักษร> .....ข้อความ...... </font>.
คาอธิบาย : เปน็ คาสงั่ ท่ีใช้ในการตกแต่งอักษรใหเ้ ปน็ มีขนาดตา่ ง ๆ โดยทข่ี นาดอักษรยิง่ มาก
อกั ษรกจ็ ะมีขนาดใหญ่ตามลาดับ โดยนาคาส่ังนไ้ี ปคร่อมขอ้ ความท่จี ะตกแต่ง
ตวั อยา่ ง : การตกแตง่ ขนาดอักษร
รปู แบบคาสั่ง
<HTML>
<HEAD>
<TITLE> การใสข่ นาดอกั ษร</TITLE>
</HEAD>
<BODY bgcolor=white>
<font size=10> อกั ษรขนาด=10 </font> <br><br>
<font size=3> อกั ษรขนาด=3 </font> <br><br>
<font size=1> อกั ษรขนาด=1 </font>
</BODY>
</HTML>
วชิ าการพัฒนาเว็บไซต์ HTML 10
การแสดงผล
4. การใสร่ ปู แบบอักษร
รปู แบบคาสง่ั : <font face="ช่ือรูปแบบอักษร" > .....ขอ้ ความ...... </font>.
คาอธบิ าย : เปน็ คาส่ังที่ใช้ในการตกแต่งอักษรใหเ้ ปน็ มีรปู แบบต่าง ๆ ตาม font ที่กาหนด
เช่น AngsanaUPC, MS sans serif Cordia New, โดยนาคาส่ังน้ีไปคร่อมขอ้ ความทีจ่ ะ
ตกแตง่
ตัวอยา่ ง : การตกแต่งรูปแบบอกั ษร
รูปแบบคาสงั่
<HTML>
<HEAD>
<TITLE>การใสร่ ูปแบบอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>
<font face="MS sans serif" > อักษรแบบ Ms sans serif </font> <br>
<font face="AngsanaUPC"> อกั ษรแบบ AngsanaUPC </font> <br>
<font face="Cordia New" > อกั ษรแบบ Cordia New </font> <br>
</BODY>
</HTML>
การแสดงผล
วิชาการพัฒนาเว็บไซต์ HTML 11
5. การประยุกตก์ ารกาหนดรปู แบบอกั ษร
ตวั อย่าง : การตกแต่งรปู แบบอกั ษร+ใสส่ +ี ใสข่ นาด+หนา+เอยี ง+ขดี เส้นใต้
รปู แบบคาสงั่
<HTML>
<HEAD>
<TITLE> การตกแต่งอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>
<font face="MS sans serif" color=red size=2> อกั ษรแบบ Ms sans serif ,สีแดง,
ขนาด=2</font> <br><br>
<font face="AngsanaUPC" color=blue> อกั ษรแบบ AngsanaUPC ,สีนา้ เงนิ </font>
<br> <br>
<U> <font face="Cordia New" size=3> อกั ษรแบบ Cordia New ,ขนาด=3,ขดี เส้นใต้
</font> </U> <br><br>
<B><font size=4 color=red > อักษรหนา, ขนาด=4,สแี ดง </font> </B> <br><br>
<B><I> <font face="Ms sans serif" color=red > อกั ษร ms sans serif ,หนา+เอยี ง,สี
แดง </font> </B></I>
</BODY>
</HTML>
การแสดงผล
วชิ าการพฒั นาเว็บไซต์ HTML 12
6. Lists : หัวข้อแบบรายการ
ในบางครัง้ การปอ้ นขอ้ ความในหน้าเว็บเพจ เราอาจมีความตอ้ งการในการจดั ข้อความย่อย เพ่ือ
การอธิบาย หรือแยกความสาคัญใหเ้ หน็ แตกตา่ งชัดเจน การทาหัวขอ้ ย่อยในภาษา HTML ก็สามารถ
ทาได้ โดยแบ่งออกเปน็ 2 รูปแบบดงั นี้
1. หัวข้อย่อยแบบเรียงลาดับ (Order List) เป็นการกาหนดความสาคัญของหวั ข้อย่อยท่ี
ตอ่ เนอ่ื งกันเป็นลาดบั ข้อ 1, 2, 3,... จะมรี ูปแบบคาส่ังดงั น้ี
รปู แบบคาสั่ง
<OL>
<LI>ข้อย่อยลาดับท่ี 1</LI>
<LI>ขอ้ ย่อยลาดบั ที่ 2</LI>
<LI>ข้อย่อยลาดบั ที่ 3</LI>
</OL>
การแสดงผล
วชิ าการพัฒนาเวบ็ ไซต์ HTML 13
เรายงั สามารถเปลย่ี นลาดบั จากตัวเลข 1, 2, 3,... เปน็ ตัวอกั ษร A, B, C,... หรอื ตัวเลขแบบ
โรมนั i, ii, iii,... ได้ดว้ ยการกาหนดลักษณะ Type ตอ่ จากคาสง่ั OL ดังน้ี
รูปแบบคาสงั่
<OL TYPE="A">
<LI>ขอ้ ย่อยลาดบั ท่ี 1</LI>
<LI>ขอ้ ย่อยลาดับที่ 2</LI>
</OL>
การแสดงผล
คาสง่ั TYPEรปู แบบอนื่ ๆ การเรียงลาดับเป็นตัวเลข 1, 2, 3, 4,...
กาเรยี งลาดับเปน็ ตวั อกั ษร A, B, C, D,...
TYPE="1" หรือไมร่ ะบุ การเรียงลาดับเปน็ ตัวอักษร a, b, c, d,...
TYPE="A" การเรียงลาดับเป็นตัวเลขโรมันใหญ่ I, II, III, IV,...
TYPE="a" การเรยี งลาดับเป็นตัวเลขโรมันเลก็ i, ii, iii, iv,...
TYPE="I"
TYPE="i"
วชิ าการพัฒนาเว็บไซต์ HTML 14
2. หัวข้อย่อยแบบไม่เรียงลาดบั (Unorder List) เปน็ การสรา้ งหัวข้อย่อยชนดิ ไมเ่ รยี งลาดับ
ความสาคัญในแตล่ ะขอ้ ในเอกสารท่ัวๆ ไปจะเรยี กวา่ Bullet ซงึ่ จะมรี ูปแบบคาสง่ั และ
รปู แบบตามตวั อย่าง
รปู แบบคาสั่ง
<UL TYPE="disc">
<LI>ขอ้ ย่อยท่ี 1</LI>
<LI>ขอ้ ย่อยที่ 2</LI>
</OL>
การแสดงผล
คาสง่ั TYPEรูปแบบอน่ื ๆ รูปแบบของบลุ เลต็ จะเปน็ วงกลมทบึ
รปู แบบของบุลเลต็ จะเป็นสีเ่ หลยี่ มทึบ
TYPE="disc" รปู แบบของบลุ เลต็ จะเปน็ วงกลมโปร่ง
TYPE="square"
TYPE="circle"
วิชาการพฒั นาเวบ็ ไซต์ HTML 15
7. การกาหนดหัวเรื่อง
หวั เรื่อง (Heading) ของเว็บเพจสามารถกาหนดได้ด้วยการใชค้ าส่ัง <Hx> ... </Hx> เมื่อ x
คอื ค่าตัวเลขต้งั แต่ 1 - 7 ซ่ึงจะกาหนดใหต้ ัวอักษรที่อยภู่ ายในคาสัง่ นม้ี ีขนาดใหญ่ไปจนถึงเล็กเรียง
ตามลาดบั จากตวั เลข 1 มีขนาดใหญ่สดุ และ ตัวเลข 7 จะมีขนาดเล็กทส่ี ุด (คาสัง่ นี้จะทาใหค้ าหรอื
ขอ้ ความนี้เปน็ ตวั หนา และตัดคาขนึ้ บรรทัดใหมเ่ สมอ) ดังตวั อยา่ ง
รปู แบบคาสัง่
<H1>ขนาดหัวเรอ่ื ง 1</H1>
<H2>ขนาดหัวเรื่อง 2</H2>
<H3>ขนาดหัวเรอ่ื ง 3</H3>
<H4>ขนาดหัวเรอื่ ง 4</H4>
<H5>ขนาดหัวเรื่อง 5</H5>
<H6>ขนาดหวั เรื่อง 6</H6>
<H7>ขนาดหวั เรื่อง 7</H7>
การแสดงผล
วชิ าการพฒั นาเว็บไซต์ HTML 16
8. Horizontal Separator Rule : เส้นแบ่งก้นั หน้าเพจตามแนวนอน
เม่ือมีการบรรจุข้อความ/รูปภาพลงในเว็บเพจจานวนมาก บางครง้ั เรากม็ ีความจาเปน็ อยาก
แบ่งเนอื้ หาออกเปน็ ส่วนๆ ด้วยเสน้ กัน้ ตามแนวนอน เราสามารถใชค้ าสัง่ <HR> แทรกในตาแหนง่ ท่ี
แบง่ เน้ือหานนั้
รูปแบบคาสงั่
<BODY>
เนอ้ื หาสว่ นที่ 1
<HR>
เนอื้ หาส่วนที่ 2
</BODY>
การแสดงผล
เรายงั สามารถกาหนดคุณสมบตั ิของเสน้ ได้เพ่มิ เติม เชน่ กาหนดความยาว ความหนา สี และ
การวางตาแหนง่ ของเส้นได้ ด้วยการแทรกคุณสมบตั ลิ งไปหลังคาสงั่ <HR> ดงั ตวั อยา่ ง
กาหนดความกวา้ งเป็นเปอร์เซนต์
<HR WIDTH="80%">
กาหนดความกว้างเปน็ พิกเซล
<HR WIDTH="300">
กาหนดความหนาของเส้น (หน่วยพกิ เซล)
<HR WIDTH="70%" size="5">
วิชาการพัฒนาเว็บไซต์ HTML 17
กาหนด shade สีของเสน้ ใหท้ บึ
<HR WIDTH="90%" size="5" noshade>
กาหนดสขี องเส้นตามต้องการ
<HR WIDTH="400" color="#ff0000">
กาหนดตาแหนง่ ของเสน้ ชิดด้านซา้ ย
<HR WIDTH="300" color="#ff0000" align="left">
กาหนดตาแหนง่ ของเสน้ กงึ่ กลาง
<HR WIDTH="400" color="#ff0000" align="center">
กาหนดตาแหนง่ ของเส้นชิดด้านขวา
<HR WIDTH="300" color="#ff0000" align="right">
9. Line Break : การตดั คาขึน้ บรรทัดใหม่
ในบททีผ่ า่ นมาจากไฟล์ตวั อย่าง จะพบว่าหากพิมพ์ขอ้ ความยาวๆ เมอ่ื ต้องการจะตัดคาข้ึน
บรรทดั ใหมต่ ้องใช้คาสง่ั <br> แทรก ณ ตาแหนง่ ทต่ี อ้ งการให้ขึ้นบรรทดั ใหม่ ดงั ตวั อยา่ ง
ตัวอย่าง
การเขียนข้อความทตี่ อ้ งการตัดคาข้ึนบรรทัดใหมส่ ามารถทาไดด้ ว้ ยการใช้คาสัง่ Break (br) แทรก<br>ตวั อย่างบรรทดั
นจ้ี ะถูกตัดลงบรรทดั ถดั ไป
วชิ าการพฒั นาเว็บไซต์ HTML 18
ผลทไ่ี ด้
นอกจากนัน้ เรายังสามารถแบ่งข้อความในรปู ของย่อหนา้ (Paragraph) สาหรับกลมุ่ ขอ้ ความ
จานวนมากได้ ดว้ ยการใชค้ าส่ัง <P> ... </P> ผลท่ีไดจ้ ะแตกตา่ งจากการใชค้ าสั่ง <br> นัน่ คอื จะมี
การเว้นช่องวา่ งหนึ่งบรรทดั ก่อนและหลังย่อหน้า ดังตวั อย่าง
ตวั อยา่ ง
<P>นีค่ ือตวั อย่างของการจดั กลุม่ ข้อความแบบย่อหน้าทใ่ี ช้คาสัง่ Paragraph กากบั นค่ี ือ
ยอ่ หนา้ แรก</P>
<P>น่คี อื ตวั อย่างของการจัดกลุม่ ข้อความแบบย่อหนา้ ท่ีใช้คาสั่ง Paragraph กากบั นค่ี ือ
ย่อหน้าทีส่ อง</P>
ประโยคใหม่ท่ีไม่มีคาสัง่ กากบั
ผลทไ่ี ด้
วิชาการพฒั นาเว็บไซต์ HTML 19
10. Space between texts : การกาหนดช่องวา่ งระหวา่ งข้อความ
บราวเซอรจ์ ะไม่สนบั สนุนการแสดงผลการเคาะเวน้ วรรคมากเกินกวา่ 1 เคาะ (จะเวน้ วรรค
10 ช่องก็แสดงเพยี งช่องเดียว) และการกดปุ่มเยื้องย่อหนา้ กจ็ ะแสดงเพียง 1 ชอ่ งวา่ งเท่านนั้ เรา
สามารถกาหนดให้แสดงช่องว่างได้มากกวา่ 1 ช่องวา่ งไดด้ ว้ ยการแทรกอักขระพเิ ศษลงไป
คือ แทน 1 ชุดตอ่ 1 ช่องว่างตัวอักษร ดังตวั อย่าง
ตัวอย่าง
การแทรกชอ่ งวา่ งเกนิ กวา่ 1 ช่องว่าง เช่น นายวนั ฉลอง
เศรษฐบตุ ร (เว้น 5 ช่อง ระหวา่ งชื่อ - นามสกุล)
ผลทไ่ี ด้
11. Indented Text : การจดั เย้อื งยอ่ หน้าข้อความ
ถ้าเราต้องการให้ขอ้ ความมีการเยือ้ งจากขอบทั้งสองขา้ งของหน้าเว็บเพจ สามารถใชค้ าส่ัง
<BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความที่อยู่ระหวา่ งคาสง่ั ดังกลา่ วจะเย้ืองระยะจาก
ขอบท้ังสองดา้ นดงั ตัวอยา่ ง
ตวั อย่าง
<BLOCKQUOTE> ข้อความนต้ี ้องการเย้อื งใหห้ ่างจากขอบทัง้ สองข้าง เพื่อให้เกิดกลุ่มข้อความที่ดู
สวยงามอา่ นง่าย ด้วยการใช้คาส่ัง <BLOCKQUOTE> </BLOCKQUOTE>
วิชาการพัฒนาเว็บไซต์ HTML 20
ผลท่ไี ด้
แตถ่ า้ หากต้องการเย้ืองย่อหน้าในบรรทดั แรกเพยี งบรรทดั เดียว สามารถใช้การแทรก
ตวั อักษรวา่ งลงไปเทา่ กับจานวนเคาะวรรคทต่ี ้องการได้โดยตรง หรอื จะกาหนดในคาส่งั ย่อหนา้ <p
style="text-indent: 30"> ก็ได้ (ใชไ้ ดด้ ีกับบราวเซอร์ IE บราวเซอร์อนื่ อาจไมแ่ สดงผล) ดังตัวอย่าง
ตวั อย่าง
การเยอ้ื งยอ่ หนา้ ด้วยการแทรกอักษรว่างลงไป 6 ชุด
(ตัวอกั ษร)
<p style="text-indent: 30">การเย้อื งย่อหน้าดว้ ยการกาหนดสไตล์ใหก้ บั คาส่ังยอ่ หนา้ คา่ ตวั เลข 30 คือ
หนว่ ยพกิ เซล </p>
ผลที่ได้
วิชาการพฒั นาเวบ็ ไซต์ HTML 21
12. Alignments : การจัดวางตาแหนง่ ของข้อความ
เราสามารถจดั วางตาแหน่งข้อความหรอื รปู ภาพในหนา้ เวบ็ เพจได้ ทัง้ การกาหนดใหต้ ัวอักษร
ข้อความหรอื รูปภาพชดิ ด้านซ้าย/กลาง/ขวาของหนา้ เวบ็ เพจ (ปกติขอ้ ความจะถกู จดั ชดิ ซา้ ยอยูแ่ ลว้
ดว้ ย)
ดว้ ยการใช้คาสั่ง <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความ/
รูปภาพน้ัน
ตัวอย่าง
<DIV ALIGN="LEFT">ขอ้ ความนี้จัดชดิ ซา้ ย</DIV><br>
<DIV ALIGN="CENTER">ขอ้ ความน้จี ัดก่งึ กลาง</DIV><br>
<DIV ALIGN="RIGHT">ข้อความน้จี ดั ชดิ ขวา</DIV>
ผลทีไ่ ด้
วิชาการพฒั นาเว็บไซต์ HTML 22
สรุปคาสงั่ รายละเอียด
TAGS
คาส่งั กาหนดการแสดงผลในส่วนเนอ้ื หาของเว็บเพจ
<body> ... </body>
<b> ... </b>, การกาหนดรูปแบบตัวอักษรเป็นตัวหนา
<i> ... </i>, ตัวเอยี ง
<u> ... </u> และขดี เสน้ ใต้
<Hx> ... </Hx>
การกาหนดขนาดตวั อักษรหัวเร่อื ง เม่อื x คอื ตัวเลข 1-7 เปน็ ขนาด
<font size="n"> เรยี งลาดบั จากใหญส่ ดุ ไปเล็กสุด
การกาหนดขนาดตวั อักษร เมื่อ n คอื ตัวเลข 1-7 เป็นขนาด
<font face="name"> เรยี งลาดับจากเล็กสดุ ไปใหญ่สดุ
<font color="name">
การกาหนดช่ือแบบตวั อักษรให้แตกต่างจากข้อความส่วนอ่ืน
<div
align="ตาแหน่ง"> ...</div> การกาหนดสขี องตัวอกั ษรให้แตกตา่ งจากข้อความส่วนอน่ื ใชไ้ ดท้ ้ัง
<p align="ตาแหน่ง">...</p> แบบระบุชื่อสี หรือกาหนดค่าตวั เลขฐาน 16 (Hexadecimal)
<br>
<BLOCKQUOTE> ... สาหรบั จดั วางตาแหน่งข้อความหรือรูปภาพในหน้าเวบ็
</BLOCKQUOTE> เพจ ประกอบดว้ ย LEFT/CENTER/RIGHT
สาหรับจดั ยอ่ หน้าข้อความ
สาหรบั ตัดคาขนึ้ บรรทัดใหม่
สาหรับจัดเยอ้ื งหนา้ ข้อความ
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
1. การทาตัวอักษรหนา,เอียง,ขีดเส้นใต้
2. การใส่สีอักษร
3. การใส่ขนาดอักษร
4. การใส่รูปแบบอักษร
5. การประยุกต์การกาหนดรูปแบบอักษร
6. Lists : หัวข้อแบบรายการ
7. การกาหนดหัวเรื่อง
8. Horizontal Separator Rule : เส้นแบ่งกั้นหน้าเพจตามแนวนอน
9. Line Break : การตัดคาขึ้นบรรทัดใหม่
10. Space between texts : การกาหนดช่องว่างระหว่างข้อความ
11. Indented Text : การจัดเยื้องย่อหน้าข้อความ
12. Alignments : การจัดวางตาแหน่งของข้อความ
*** สรุปคาสั่ง ****
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
การกําหนดรูปแบบตัวอักษร
- 1 - 16
Pages: