The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

Home Explore HTML บทที่ 2 การกาหนดรูปแบบตัวอักษร

View in Fullscreen

HTML บทที่ 2 การกาหนดรูปแบบตัวอักษร

Like this book? You can publish your book online for free in a few minutes!

Download PDF

Related Publications

Discover the best professional documents and content resources in AnyFlip Document Base.

Published by จิรศักดิ์ ยอดชะลูด, 2021-03-12 01:33:46

HTML บทที่ 2 การกาหนดรูปแบบตัวอักษร

Pages:

1 - 16

HTML บทที่ 2 การกาหนดรูปแบบตัวอักษร

วชิ าการพฒั นาเว็บไซต์ทางธุรกจิ เบ้อื งตน้ BC10203 7

บทที่ 2
การกาหนดรปู แบบตัวอักษร

การกาหนดรูปแบบตวั อักษร เพ่อื ใหเ้ กดิ ความแตกตา่ งของข้อความทตี่ ้องการนาเสนอในเว็บ
เพจ มีดงั นี้

1. การทาตวั อักษรหนา,เอียง,ขีดเส้นใต้

รปู แบบคาสง่ั :
 ...ข้อความ..... :คาส่งั ตัวหนา
 ...ขอ้ ความ..... :คาส่งั ตวั เอียง
 ...ขอ้ ความ..... :คาส่งั ขดี เสน้ ใต้

คาอธบิ าย : เมื่อเราตอ้ งการทาให้ตวั อักษรหนา เอียง หรือขีดเส้นให้ ให้นาคาสง่ั ข้างต้นไปคร่อม
ขอ้ ความน้นั ไว้

เช่น ตอ้ งการแต่งคาว่า "การเขียนเว็บเพจด้วยภาษา HTML " ใหเ้ อียงและหนา
ให้ทาดังน้ี การเขียนเวบ็ เพจดว้ ยภาษา HTML
ผลลัพธท์ ่ีไดค้ ือ การเขียนเวบ็ เพจดว้ ยภาษา HTML

ตัวอยา่ ง : ทดสอบการทาตวั อักษรหนา,เอียง,ขดี เสน้ ใต้
รูปแบบคาส่งั
<HTML>
<HEAD>
<TITLE>การใสส่ อี กั ษร</TITLE>
</HEAD>
<BODY bgcolor=white>

ข้อความหนา 
ขอ้ ความเอียง 
ขอ้ ความขดี เสน้ ใต้ 
ขอ้ ความหนา+เอียง 
ข้อความหนา+เอยี ง+ขีดเส้นใต้ 
ขอ้ ความเอยี ง+ขดี เส้นใต้ 
ขอ้ ความขีดเส้นใต้+หนา 


วิชาการพฒั นาเวบ็ ไซตท์ างธรุ กิจเบ้อื งต้น BC10203 8

</BODY>
</HTML>
การแสดงผล

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

ตัวอยา่ ง : การตกแต่งสีอกั ษร

รูปแบบคาส่ัง

<HTML>
<HEAD> <TITLE> การใส่สอี ักษร</TITLE> </HEAD>
<BODY bgcolor=white>

 อักษรสีแดง 
 อกั ษรสีนา้ เงนิ 
 อักษรสีฟา้ 

</BODY>
</HTML>

วชิ าการพัฒนาเว็บไซตท์ างธุรกิจเบอ้ื งต้น BC10203 9

การแสดงผล

3. การใส่ขนาดอักษร
รูปแบบคาสง่ั : .....ข้อความ...... .
คาอธบิ าย : เปน็ คาส่ังท่ีใชใ้ นการตกแตง่ อักษรใหเ้ ป็นมีขนาดตา่ ง ๆ โดยทข่ี นาดอกั ษรย่ิงมาก
อักษรกจ็ ะมีขนาดใหญ่ตามลาดบั โดยนาคาส่งั นไ้ี ปคร่อมข้อความทจ่ี ะตกแต่ง

ตวั อย่าง : การตกแต่งขนาดอักษร
รปู แบบคาสงั่
<HTML>
<HEAD>
<TITLE> การใส่ขนาดอกั ษร</TITLE>
</HEAD>
<BODY bgcolor=white>
 อกั ษรขนาด=10 
 อกั ษรขนาด=3 
 อกั ษรขนาด=1 
</BODY>
</HTML>

วชิ าการพฒั นาเวบ็ ไซต์ทางธรุ กจิ เบอ้ื งตน้ BC10203 10

การแสดงผล

4. การใส่รปู แบบอกั ษร
รูปแบบคาสง่ั : .....ข้อความ...... .
คาอธบิ าย : เป็นคาส่งั ที่ใชใ้ นการตกแตง่ อักษรให้เปน็ มีรปู แบบต่าง ๆ ตาม font ที่กาหนด
เช่น AngsanaUPC, MS sans serif Cordia New, โดยนาคาสง่ั นี้ไปครอ่ มขอ้ ความท่ีจะ
ตกแต่ง
ตวั อย่าง : การตกแตง่ รูปแบบอกั ษร
รปู แบบคาสั่ง
<HTML>
<HEAD>
<TITLE>การใสร่ ูปแบบอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>
 อกั ษรแบบ Ms sans serif 
 อกั ษรแบบ AngsanaUPC 
 อักษรแบบ Cordia New 
</BODY>
</HTML>

การแสดงผล

วชิ าการพัฒนาเว็บไซต์ทางธรุ กิจเบอ้ื งต้น BC10203 11

5. การประยุกตก์ ารกาหนดรปู แบบอกั ษร
ตัวอยา่ ง : การตกแตง่ รปู แบบอักษร+ใส่ส+ี ใส่ขนาด+หนา+เอียง+ขีดเส้นใต้
รปู แบบคาสง่ั
<HTML>
<HEAD>
<TITLE> การตกแตง่ อักษร</TITLE>
</HEAD>
<BODY bgcolor=white>
 อักษรแบบ Ms sans serif ,สีแดง,
ขนาด=2 
 อกั ษรแบบ AngsanaUPC ,สนี ้าเงิน 
 
 อักษรแบบ Cordia New ,ขนาด=3,ขีดเสน้ ใต้
 
 อกั ษรหนา, ขนาด=4,สีแดง 
 อักษร ms sans serif ,หนา+เอยี ง,สี
แดง 
</BODY>
</HTML>

การแสดงผล

วิชาการพฒั นาเว็บไซต์ทางธุรกจิ เบือ้ งต้น BC10203 12

6. Lists : หวั ข้อแบบรายการ

ในบางครั้งการปอ้ นข้อความในหน้าเว็บเพจ เราอาจมีความต้องการในการจดั ขอ้ ความย่อย เพื่อ
การอธิบาย หรอื แยกความสาคญั ให้เหน็ แตกตา่ งชดั เจน การทาหัวข้อย่อยในภาษา HTML ก็สามารถ
ทาได้ โดยแบ่งออกเปน็ 2 รปู แบบดังนี้

1. หวั ข้อย่อยแบบเรยี งลาดับ (Order List) เปน็ การกาหนดความสาคญั ของหัวข้อย่อยท่ี
ตอ่ เนือ่ งกนั เป็นลาดับข้อ 1, 2, 3,... จะมรี ูปแบบคาสั่งดงั นี้

รปู แบบคาสงั่

<OL>
<LI>ขอ้ ย่อยลาดับท่ี 1</LI>
<LI>ขอ้ ย่อยลาดบั ที่ 2</LI>
<LI>ข้อย่อยลาดบั ท่ี 3</LI>

</OL>

การแสดงผล

วชิ าการพฒั นาเว็บไซต์ทางธรุ กิจเบ้อื งต้น BC10203 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"

วชิ าการพัฒนาเว็บไซตท์ างธุรกิจเบ้อื งตน้ BC10203 14

2. หัวข้อย่อยแบบไม่เรียงลาดับ (Unorder List) เปน็ การสรา้ งหัวข้อย่อยชนิดไมเ่ รยี งลาดับ
ความสาคญั ในแตล่ ะขอ้ ในเอกสารทั่วๆ ไปจะเรยี กว่า Bullet ซ่งึ จะมรี ปู แบบคาสง่ั และ
รปู แบบตามตวั อย่าง
รูปแบบคาสัง่

<UL TYPE="disc">
<LI>ข้อย่อยที่ 1</LI>
<LI>ขอ้ ย่อยที่ 2</LI>

</OL>

การแสดงผล

คาสงั่ TYPEรูปแบบอ่นื ๆ รปู แบบของบุลเล็ตจะเปน็ วงกลมทบึ
รปู แบบของบลุ เล็ตจะเป็นสเี่ หลยี่ มทึบ
TYPE="disc" รูปแบบของบลุ เล็ตจะเปน็ วงกลมโปรง่
TYPE="square"
TYPE="circle"

วิชาการพฒั นาเวบ็ ไซต์ทางธรุ กจิ เบ้อื งต้น BC10203 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>

การแสดงผล

วชิ าการพัฒนาเวบ็ ไซต์ทางธุรกิจเบื้องต้น BC10203 16

8. Horizontal Separator Rule : เสน้ แบ่งก้ันหนา้ เพจตามแนวนอน

เมือ่ มีการบรรจขุ ้อความ/รปู ภาพลงในเว็บเพจจานวนมาก บางครง้ั เรากม็ ีความจาเปน็ อยาก
แบ่งเน้ือหาออกเป็นสว่ นๆ ดว้ ยเส้นก้ันตามแนวนอน เราสามารถใช้คาส่งั <HR> แทรกในตาแหน่งท่ี
แบ่งเนอ้ื หานัน้

รูปแบบคาสงั่

<BODY>
เนอ้ื หาสว่ นที่ 1
<HR>
เน้อื หาส่วนท่ี 2

</BODY>

การแสดงผล

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

กาหนดความกว้างเป็นเปอร์เซนต์
<HR WIDTH="80%">

กาหนดความกวา้ งเปน็ พกิ เซล
<HR WIDTH="300">

กาหนดความหนาของเส้น (หน่วยพกิ เซล)
<HR WIDTH="70%" size="5">

วิชาการพัฒนาเว็บไซตท์ างธรุ กจิ เบอ้ื งต้น BC10203 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 : การตัดคาขึ้นบรรทดั ใหม่
ในบททผ่ี ่านมาจากไฟล์ตวั อย่าง จะพบว่าหากพิมพ์ข้อความยาวๆ เมอื่ ต้องการจะตดั คาขึ้น

บรรทดั ใหมต่ ้องใช้คาสัง่ แทรก ณ ตาแหน่งที่ตอ้ งการให้ข้นึ บรรทัดใหม่ ดงั ตัวอย่าง

ตวั อย่าง

การเขียนข้อความท่ีตอ้ งการตัดคาขน้ึ บรรทัดใหมส่ ามารถทาได้ด้วยการใช้คาสั่ง Break (br) แทรก ตัวอย่างบรรทดั
นจี้ ะถกู ตัดลงบรรทดั ถดั ไป

วิชาการพฒั นาเวบ็ ไซต์ทางธุรกจิ เบื้องต้น BC10203 18

ผลทไี่ ด้

นอกจากน้ันเรายงั สามารถแบ่งขอ้ ความในรปู ของย่อหนา้ (Paragraph) สาหรับกล่มุ ขอ้ ความ
จานวนมากได้ ด้วยการใช้คาสั่ง ... ผลท่ไี ด้จะแตกตา่ งจากการใช้คาส่ัง นน่ั คอื จะมี
การเว้นชอ่ งว่างหนงึ่ บรรทัดก่อนและหลงั ย่อหน้า ดังตวั อย่าง

ตวั อย่าง

นี่คือตัวอย่างของการจัดกลุ่มข้อความแบบย่อหน้าทใี่ ช้คาส่งั Paragraph กากับ น่คี ือ
ยอ่ หนา้ แรก
นค่ี อื ตัวอย่างของการจัดกลมุ่ ข้อความแบบย่อหนา้ ทีใ่ ช้คาสัง่ Paragraph กากบั นคี่ ือ
ย่อหนา้ ทส่ี อง
ประโยคใหมท่ ี่ไม่มีคาสง่ั กากับ

ผลทีไ่ ด้

วิชาการพฒั นาเวบ็ ไซตท์ างธุรกจิ เบอ้ื งต้น BC10203 19

10. Space between texts : การกาหนดชอ่ งว่างระหว่างข้อความ

บราวเซอรจ์ ะไมส่ นบั สนุนการแสดงผลการเคาะเว้นวรรคมากเกนิ กวา่ 1 เคาะ (จะเวน้ วรรค
10 ชอ่ งก็แสดงเพียงชอ่ งเดยี ว) และการกดป่มุ เย้ืองย่อหนา้ ก็จะแสดงเพยี ง 1 ชอ่ งวา่ งเท่าน้นั เรา
สามารถกาหนดใหแ้ สดงชอ่ งว่างได้มากกวา่ 1 ช่องว่างไดด้ ้วยการแทรกอักขระพเิ ศษลงไป
คือ   แทน 1 ชดุ ตอ่ 1 ช่องว่างตวั อักษร ดงั ตวั อยา่ ง

ตวั อยา่ ง

การแทรกช่องวา่ งเกนิ กว่า 1 ช่องว่าง เช่น นายวันฉลอง          
เศรษฐบุตร (เวน้ 5 ช่อง ระหว่างชอ่ื - นามสกุล)

ผลทไี่ ด้

11. Indented Text : การจดั เยอ้ื งยอ่ หน้าข้อความ

ถา้ เราตอ้ งการให้ขอ้ ความมีการเยื้องจากขอบท้ังสองข้างของหนา้ เว็บเพจ สามารถใชค้ าสั่ง
<BLOCKQUOTE> ... </BLOCKQUOTE> ได้ ข้อความท่ีอยรู่ ะหว่างคาสั่งดังกล่าวจะเยื้องระยะจาก
ขอบทั้งสองดา้ นดังตัวอยา่ ง

ตัวอยา่ ง

<BLOCKQUOTE> ข้อความนีต้ ้องการเยอ้ื งใหห้ ่างจากขอบทง้ั สองข้าง เพื่อใหเ้ กิดกลุ่มข้อความที่ดู
สวยงามอา่ นงา่ ย ด้วยการใชค้ าส่งั <BLOCKQUOTE> </BLOCKQUOTE>

วิชาการพัฒนาเวบ็ ไซต์ทางธุรกิจเบือ้ งตน้ BC10203 20

ผลทีไ่ ด้

แตถ่ ้าหากตอ้ งการเยื้องย่อหน้าในบรรทัดแรกเพยี งบรรทดั เดยี ว สามารถใช้การแทรก
ตัวอักษรวา่ งลงไปเท่ากบั จานวนเคาะวรรคท่ีต้องการไดโ้ ดยตรง หรอื จะกาหนดในคาสัง่ ย่อหน้า ก็ได้ (ใช้ได้ดกี ับบราวเซอร์ IE บราวเซอร์อื่นอาจไม่แสดงผล) ดังตวั อย่าง

ตวั อยา่ ง

            การเยอื้ งย่อหน้าด้วยการแทรกอักษรว่างลงไป 6 ชุด
(ตัวอกั ษร)
การเยอ้ื งย่อหนา้ ด้วยการกาหนดสไตล์ใหก้ บั คาสงั่ ย่อหน้า คา่ ตัวเลข 30 คอื
หน่วยพกิ เซล 

ผลทไ่ี ด้

วิชาการพฒั นาเว็บไซตท์ างธุรกจิ เบอ้ื งตน้ BC10203 21

12. Alignments : การจัดวางตาแหนง่ ของข้อความ

เราสามารถจัดวางตาแหนง่ ข้อความหรอื รูปภาพในหนา้ เว็บเพจได้ ท้ังการกาหนดให้ตัวอักษร
ขอ้ ความหรอื รปู ภาพชดิ ด้านซ้าย/กลาง/ขวาของหน้าเว็บเพจ (ปกติข้อความจะถูกจัดชดิ ซา้ ยอยแู่ ล้ว
ด้วย)

ดว้ ยการใชค้ าส่ัง <DIV ALIGN="LEFT/CENTER/RIGHT"> ... </DIV> ครอบข้อความ/
รูปภาพนนั้

ตัวอย่าง
<DIV ALIGN="LEFT">ข้อความนจี้ ดั ชดิ ซา้ ย</DIV> 
<DIV ALIGN="CENTER">ข้อความนจี้ ดั ก่ึงกลาง</DIV> 
<DIV ALIGN="RIGHT">ข้อความนี้จดั ชดิ ขวา</DIV>

ผลทไี่ ด้

วชิ าการพัฒนาเว็บไซต์ทางธุรกจิ เบอื้ งต้น BC10203 22

สรปุ คาส่ัง รายละเอยี ด
TAGS
คาสัง่ กาหนดการแสดงผลในส่วนเนือ้ หาของเวบ็ เพจ
<body> ... </body>
 ... , การกาหนดรปู แบบตัวอักษรเป็นตัวหนา
 ... , ตวั เอยี ง
 ... และขดี เส้นใต้
<Hx> ... </Hx>
การกาหนดขนาดตวั อักษรหัวเรอื่ ง เม่ือ x คอื ตัวเลข 1-7 เป็นขนาด
 เรยี งลาดับจากใหญส่ ุดไปเลก็ สุด
การกาหนดขนาดตัวอักษร เม่ือ n คือ ตวั เลข 1-7 เปน็ ขนาด
 เรียงลาดับจากเล็กสุดไปใหญ่สดุ

การกาหนดชอ่ื แบบตวั อักษรใหแ้ ตกต่างจากข้อความส่วนอื่น
<div
align="ตาแหน่ง"> ...</div> การกาหนดสีของตัวอักษรให้แตกต่างจากข้อความสว่ นอนื่ ใชไ้ ดท้ ั้ง
... แบบระบชุ ่ือสี หรือกาหนดค่าตัวเลขฐาน 16 (Hexadecimal)
 
<BLOCKQUOTE> ... สาหรบั จัดวางตาแหน่งข้อความหรอื รปู ภาพในหน้าเวบ็
</BLOCKQUOTE> เพจ ประกอบด้วย LEFT/CENTER/RIGHT

สาหรบั จดั ยอ่ หน้าข้อความ

สาหรับตดั คาข้ึนบรรทัดใหม่
สาหรับจดั เยอ้ื งหน้าข้อความ

Click to View FlipBook Version