ใบความรทู้ ่ี 2
การจัดรูปแบบตัวอักษร
1. การใสข่ อ้ ความ
สาหรับการใส่ข้อความลงในเวบ็ เพจ ดว้ ยภาษา HTML นนั้ ขอ้ ความท่ีตอ้ งการจะ
ใหป้ รากฎบนจอภาพ จะต้องใส่ขอ้ ความมาในส่วนของ <body>… </body> รวมถึง
การจัดรปู แบบขอ้ ความ ตวั อักษร รูปแบบต่าง ๆ
การใสข่ อ้ ความ สามารถพิมพ์ตัวอกั ษรหรือข้อความท่ตี ้องการใส่ในหนา้ เว็บเพจใน
ส่วน <body>… </body> ดงั ตัวอย่างต่อไป
2. การทาตัวอักษรหนา เอยี ง ขดี เสน้ ใต้
หลงั จากท่ีเราได้ทาการใส่ขอ้ ความแลว้ จะเห็นว่าข้อความทใี่ สไ่ ปนน้ั ยังไม่มีการ
จดั รปู แบบของข้อความแต่อยา่ งได้ ในการจัดรปู แบบตัวอักษรหรอื ข้อความใน
ภาษา HTML น้ันจะต้องมี Tag คาสั่งสาหรบั การจดั รูปแบบตวั อักษร หรอื ขอ้ ความ
โดยเฉพาะ
การจัดรูปแบบตัวอักษร รูปแบบแรก คอื การเน้นข้อความในเวบ็ เพจ เชน่ การเนน้
ข้อความทส่ี าคญั หรอื ตอ้ งการแสดงว่าขอ้ ความนัน้ เป็นสว่ นหวั ขอ้ หรอื หวั เรื่อง ของ
เอกสาร จะใชค้ าสง่ั ดังนี้
ตวั หนา = ใชก้ าหนดข้อความท่ีอยภู่ ายในคาส่ัง ใหแ้ สดงผลดว้ ยตัวอักษรแบบ
ตัวหนา (bold) มจี ดุ ประสงค์เพื่อเนน้ ขอ้ ความในประโยคน้นั ใช้ Tag <b>...</b>
ตัวเอียง = ใชก้ าหนดข้อความทีอ่ ยู่ภายในคาสง่ั ใหแ้ สดงผลดว้ ยตัวอักษรแบบเอน
(Italic) มีจุดประสงคเ์ พ่อื เนน้ ขอ้ ความในประโยคน้นั ใช้ Tag <i>...</i>
ขีดเส้นใต้ = ใชก้ าหนดข้อความทอี่ ยู่ภายในคาสั่ง ใหแ้ สดงผลดว้ ยตัวอกั ษรขีดเส้น
ใต้ (underline) มจี ุดประสงคเ์ พ่ือเนน้ ขอ้ ความในประโยคน้ัน ใช้ Tag <u>...</u>
ทดสอบการจัดรูปแบบขอ้ ความดว้ ยการเนน้ ข้อความ
3. การกาหนดขนาดตัวอกั ษร
การจัดรปู แบบตัวอักษรหรือข้อความ ในเว็บเพจด้วยภาษา HTML น้ัน เรา
สามารถกาหนดขนาดของตัวอักษรตามความตอ้ งการและเหมาะสมกับแต่ละลักษณะ
ของเว็บเพจ และการกาหนดขนาดของตวั อกั ษร ขอ้ ความสามารถกาหนดได้หลายขนาด
ขนาดของตวั อักษร จะกาหนดโดยใชต้ ัวเลขทม่ี ีค่า 1 - 7 เป็นตวั กาหนด โดยค่า
ตัวเลข 1 และ 2 จะเปน็ การย่อขนาดของตัวอักษร ค่าตวั เลข 3 ตวั อักษรจะอยใู่ นระดบั
มาตราฐาน และค่าตวั เลข 4 ถงึ 7 จะเปน็ ตัวอักษรใหญ่ขนึ้ ตามลาดบั
คาสง่ั ทีใ่ ช้ คำส่งั จดั รูปแบบ (font) ตำมดว้ ย คุณสมบัตขิ องรูปแบบ (attribute) ซง่ึ
ในการกาหนดขนาดตัวอกั ษร จะใช้ attribute ช่ือ size
<font size="ค่าตัวเลขกาหนดขนาดของตวั อักษร">...ขอ้ ความ...</font>
นอกจากจะกาหนดขนาดของตัวอกั ษร ขอ้ ความ ด้วยคาสงั่ font size แลว้ ใน
ภาษา HTML ยังสามารถกาหนดขนาดของข้อความให้มลี ักษณะเป็นหัวเรือ่ ง โดยเรยี ง
ต้ังแต่หัวเรือ่ งใหญ่ ไลล่ งมาถึงหัวเร่อื งทีเ่ ล็กสุดได้
การกาหนดหัวเรอ่ื ง สามารถกาหนดได้ โดยใช้คาส่งั ดังนี้
<h1>หัวเร่อื งขนาดใหญ่ 1</h1>
<h2>หวั เรอ่ื งขนาดใหญ่ 2</h2>
<h3>หัวเร่อื งขนาดใหญ่ 3</h3>
<h4>หัวเร่อื งขนาดใหญ่ 4</h4>
<h5>หัวเรือ่ งขนาดใหญ่ 5</h5>
<h6>หัวเรอื่ งขนาดใหญ่ 6</h6>
โดยที่ <h1> นนั้ จะมขี นาดใหญ่ท่ีสดุ ส่วน <h6> จะมีขนาดเลก็ ท่สี ุด
ทดสอบคาส่ังกาหนดขนาดตัวอักษร และกาหนดหวั เรอื่ ง
<html><head><title> โฮมเพจของขา้ พเจา้ </title>
</head>
<body>
<font size=5>กาหนดขนาดข้อความหของหนา้ เวบ็ เพจเทา่ กับ 5</font><br>
<font size=3>การจัดรปู แบบตัวอักษรหรือข้อความ (font) ในหนา้ เวบ็ เพจของเรา โดยใชภ้ าษา HTML
นั้นเราสามารถขนาดของตัวอกั ษรตามความต้องการและเหมาะสมกบั แตล่ ะลกั ษณะของเว็บ เพจ และการ
กาหนดขนาดของตวั อักษร ขอ้ ความ นนั้ กาหนดได้ขนาดของตัวอักษรหลายแบบ
ในการกาหนดขนาดจะใช้ตวั เลขซึ่งจะมีคา่ 1 - 7 เปน็ ตวั กาหนด โดยค่าตัวเลข 1 และ 2 จะเป็นการ
ยอ่ ขนาดของตวั อกั ษร คา่ ตวั เลข 3 ตวั อกั ษรจะอย่ใู นระดับมาตราฐาน และค่าตวั เลข 4 ถงึ 7 นั้นจะเปน็
การขยายขนาด</font> <br>
<font size=4>การกาหนดขนาดของข้อความให้มลี กั ษณะเปน็ หวั เร่ือง </font>
สามารถกาหนดได้ โดยใช้คาสงั่ ดังน<้ี br>
<h1>หัวเรอื่ งขนาดใหญ่ 1</h1><br>
<h2>หัวเรอ่ื งขนาดใหญ่ 2</h2> <br>
<h3>หัวเรอื่ งขนาดใหญ่ 3</h3> <br>
<h4>หัวเรอื่ งขนาดใหญ่ 4</h4> <br>
<h5>หัวเรอ่ื งขนาดใหญ่ 5</h5> <br>
<h6>หัวเรอ่ื งขนาดใหญ่ 6</h6>
</body>
</html>
4. การกาหนดรปู แบบและสีของตัวอักษร
ในการจัดรูปแบบของข้อความหรือตัวอกั ษรนัน้ การใช้สีกเ็ ป็นสว่ นสาคัญเชน่ กนั ใน
การจัดรปู แบบ ซ่งึ ในการกาหนดรปู แบบสามารถกาหนดได้ ดงั น้ี
การกาหนดรูปแบบ
ในการกาหนดรปู แบบของตวั อักษร หรอื ขอ้ ความ สามารถกาหนดได้ด้วย
คณุ สมบตั ิ(attribute) ชอื่ face แลว้ ตามดว้ ยชื่อ font ท่ีเราตอ้ งการ เอกสารเว็บ
กาหนดฟอนต์ ไดห้ ลายฟอนต์ โดยโปรแกรมเบราเซอรจ์ ะมีการตรวจสอบการใช้ฟอนตใ์ ห้
อตั โนมตั ิ
เราสามารถการกาหนดรปู แบบของตวั อกั ษร ได้โดยใช้คาสง่ั
<font face="ชอ่ื font">..ขอ้ ความต้องการกาหนด font..</font>
font สาหรับข้อความภาษาไทย/อังกฤษ ทเี่ หมาะสมได้แก่ MS Sans Serif,
Microsoft Sans Serif, Thonburi และ font สาหรับข้อความภาษาองั กฤษทเี่ หมาะสม
คือ Arial, Helvetica, sans-serif ชนดิ ของ font ปกติ = MS Sans Serif
การกาหนดสี
การกาหนดสขี องตัวอกั ษร หรอื ข้อความที่ตอ้ งการนั้น คาสง่ั ในภาษา HTML จะ
ใชค้ ณุ สมบัติ (attribute) สาหลบั กาหนดสีท่ชี อ่ื color
การกาหนดสีของตวั อักษรหรอื ข้อความ นัน้ จะสามารถกาหนดได้ 2 แบบ ดังน้ี
1. กาหนดโดยใชช้ อ่ื สี เชน่ red, yellow, blue หรอื pink เป็นตน้
2. การกาหนดสีโดยระบุชือ่ สีแบบนี้จะมีข้อจากดั มาก เพราะไมส่ ามารถใชโ้ ทนสี
ได้มากเทา่ ที่ใจตอ้ งการ (จะใช้ได้ประมาณ 16 สี) ถา้ ต้องการใหม้ ีสมี ากกว่านี้จะต้องใช้
การกาหนดเปน็ รหสั คา่ สดี ว้ ยระบบตวั เลขฐานสิบหก กาหนดค่าสขี องแสง (RGB)
เลขฐานสบิ หกประกอบดว้ ยตวั เลข 0 1 2 3 4 5 6 7 8 9 และตัวอักษร a b c d
e f ซึง่ จะแทนคา่ สตี ง้ั แต่มดื สดุ (คา่ เป็น 0) จนถึงสว่างสดุ (ค่าเป็น f) ค่าสีตวั เลขฐานสิบ
หกจะประกอบดว้ ยกลมุ่ ตวั เลข 2 ตวั 3 ชุด แทนค่าสี RR GG BB และมเี คร่อื งหมาย #
กากบั หน้าตัวเลขดังตัวอยา่ งสี #RRGGBB (code สีเพิ่มเติม)
คาสงั่ ทีใ่ ช้คอื
<font color="ชอ่ื สี หรือ code สี ทีต่ ้องการ">..........</font>
ทดสอบการกาหนด font และสตี ัวอกั ษร
แหล่งท่ีมาของข้อมลู : https://pirun.ku.ac.th
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
ใบความรู้ที่ 2 การจัดรูปแบบตัวอักษร
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
ใบความรู้ที่ 2 การจัดรูปแบบตัวอักษร
- 1 - 6
Pages: