Technology - การจัดและการตกแต่งข้อความ

การจัดและการตกแต่งข้อความ

--------------------------------------------------------------

การกําหนดสีตัวอักษร

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

1. กําหนดโดยระบุชื่อของสีนั้น

รูปแบบ ข้อความ 
เช่น ข้อความนี้เป็นสีแดง 
 ข้อความนี้เป็นสีนํ้าเงิน

2. กําหนดโดยระบุรหัสของสีนั้น

รูปแบบ ข้อความ 
เช่น ข้อความนี้สีส้ม 
 ข้อความนี้สีม่วง

(***รหัสสีเพิ่มเติม***)

ตัวอย่างการใช้คําสั่ง

<HTML>
<HEAD>
<TITLE>การกําหนดรูปแบบตัวอักษร</TITLE>
</HEAD>
<BODY>
 ข้อความนี้เป็นสีแดง 
</BODY>
</HTML>

การใช้คําสั่ง HTML ทําพื้นหลัง

การทําพื้นหลังของ Webpage มี 2 แบบ คือ

1. การกําหนดพื้นหลังโดยใช้สี
2. การกําหนดพื้นหลังโดยใช้ภาพพื้นหลัง

1. การกําหนดพื้นหลังโดยการกําหนดสี

ภาพพื้นหลังเป็นสิ่งที่ทําให้เว็บของเราดูสวยงามแต่ถ้าเราใช้ภาพพื้นหลังที่ไม่ดี อาจส่งผลเสียกับเว็บเราได้ ในบทความนี้จะเป็นตัวอย่างของการใส่พื้นหลังที่ดี และไม่ดี คําสั่งที่ใช้ในการกําหนดภาพพื้นหลังโดยกําหนดสี คือ <BODY BGCOLOR=” ”>

ในการกําหนดภาพพื้นหลัง โดยการกําหนดสี มี 3 แบบ คือ

1.1 กําหนดสีโดยใช้ ชื่อรหัสสี (hexadecimal number)
รูปแบบ <BODY BGCOLOR="#000000">
1.2 กําหนดสีโดยใช้ RGB value
รูปแบบ < BODY BGCOLOR ="rgb(0,0,0)">
1.3 กําหนดสีโดยใช้ชื่อของสีเอง
รูปแบบ < BODY BGCOLOR ="black">

(***รหัสสีเพิ่มเติม***)

ตัวอย่างการใช้คําสั่ง

<HTML>
<HEAD>
<TITLE>การกําหนดสีพื้นหลังโดยการกําหนดสี</TITLE>
</HEAD>
<BODY BGCOLOR= "YELLOW" >การกําหนดสีพื้นหลังโดยการกําหนดสี
</BODY>
</HTML>

2. การกําหนดภาพพื้นหลัง โดยใส่ภาพพื้นหลัง

คําสั่งที่ใช้ในการกําหนดภาพพื้นหลังโดยกําหนดสี คือ <BODY BACKGROUND=” ”> ในการกําหนดภาพพื้นหลัง โดยการกําหนดสี มี 2 แบบ คือ

1. แบบกําหนดโดยใช้ชื่อไฟล์ภาพนั้น
รูปแบบ <BODY BACKGROUND=" ชื่อไฟล์ภาพ.jpg ">
เช่น <BODY BACKGROUND="logo.jpg">
2. แบบกําหนดโดยใช้ URL ที่อ้างอิงที่อยู่ของภาพ
รูปแบบ <body background="ชื่อ URL นั้น">
เช่น <body background="http://www.hellomyweb.com/images/logo.jpg">

ข้อแนะนําในการใช้สีพื้นหลัง

ภาพพื้นหลังเป็นสิ่งที่ทําให้เว็บของเราดูดีขึ้น แต่เราต้องคํานึงถึงเรื่องต่อไปนี้ด้วย
1. การใส่ภาพพื้นหลังที่ใหญ่มาก จะทําให้เว็บของเราโหลดได้ช้าลง
2. การใส่ภาพพื้นหลังที่ไม่ดีจะทําให้อ่านข้อความได้ยาก
3. การใส่ภาพพื้นหลังอาจทําให้สับสนระหว่างภาพที่เราใช้สื่อความหมายกับภาพพื้นหลังได้
4. การใส่ภาพพื้นหลังทําให้ตัวอักษรอาจลดความเด่นชัดลงไป
5. การใส่ภาพพื้นหลังที่ไม่ดี ทําให้เว็บไซต์มีประสิทธิภาพลดลงไป

การกําหนดพื้นหลังโดยการกําหนดรูปภาพ

ตัวอย่างการใช้คําสั่ง

<HTML>
<HEAD>
<TITLE>การกําหนดพื้นหลังโดยการกําหนดรูปภาพ</TITLE>
</HEAD>
<BODY BACKGROUND=" ชื่อรูปภาพที่มีนามสกุลเป็น .jpg หรือ .gif ">การกําหนดพื้นหลังโดยการกําหนดรูปภาพ
</BODY>
</HTML>

การใช้คําสั่ง HTML จัดตําแหน่งตัวอักษร

การใช้คําสั่งจัดตําแหน่งชิดซ้าย กึ่งกลาง ชิดขวา การจัดย่อหน้า หรือการจัดพารากราฟ จะทําให้การแบ่งเนื้อหาเป็นสัดส่วน และดูง่ายโดยใช้ Tag

มีรูปแบบดังนี้

LEFT จัดชิดซ้าย
CENTER จัดกึ่งกลาง
RIGHT จัดชิดขวา

รูปแบบคําสั่ง HTML ที่ใช้ในการจัดย่อหน้า

ข้อมูลที่ต้องการจัด

ตัวอย่างคําสั่ง

นี่คือข้อมูลที่จัดชิดซ้าย
นี่คือข้อมูลที่จัดกึ่งกลาง
นี่คือข้อมูลที่จัดชิดขวา

ตัวอย่างการใช้คําสั่ง

<HTML>
<HEAD>
<TITLE>การจัดตําแหน่งข้อความ</TITLE>
</HEAD>
<BODY>
การจัดตําแหน่งชิดซ้าย 
การจัดตําแหน่งกึ่งกลาง 
การจัดตําแหน่งชิดขวา
</BODY>
</HTML>

การการกําหนดตัวอักษรเป็นหัวเรื่อง

1. กําหนดขนาดตัวอักษรเป็นหัวเรื่อง โดยการขยายฟ้อนต์ (Font Size)
การกําหนดขนาดตัวอักษร ถ้าไม่กําหนดขนาดให้เมื่อนําเอกสาร HTML ไปแสดงบนบราวเซอร์ ขนาดของตัวอักษรจะถูกกําหนดเป็นค่าพื้นฐาน หากต้องการกําหนดเอง ก็สามารถทําได้โดยขนาดของตัวอักษรจะมี 7 ขนาด คือ 1 – 7 โดยจะเรียงจากเล็กไปใหญ่
รูปแบบคําสั่ง HTML ในการกําหนดขนาดตัวอักษรโดยการขยายฟ้อนต์
ข้อความ

ตัวอย่างคําสั่ง

นี่คือขนาดตัวอักษรเท่ากับ 7 
นี่คือขนาดตัวอักษรเท่ากับ 6 
นี่คือขนาดตัวอักษรเท่ากับ 5 
นี่คือขนาดตัวอักษรเท่ากับ 4 
นี่คือขนาดตัวอักษรเท่ากับ 3 
นี่คือขนาดตัวอักษรเท่ากับ 2 
นี่คือขนาดตัวอักษรเท่ากับ 1

2. การกําหนดขนาดของหัวเรื่อง โดยใช้แท็ก Hn

การกําหนดตัวอักษรหัวเรื่อง กําหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 6 โดยเรียงจากใหญ่ไปเล็กคําสั่ง h จะมีทั้งหมด 6 ลําดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา

รูปแบบคําสั่ง HTML ในการกําหนดตัวอักษรเป็นหัวเรื่อง

<Hn> ข้อความ </Hn>

หมายเหตุ: n คือ ตัวเลขที่ต้องการใส่
*** ในการจัดตําแหน่งข้อความของคําสั่ง Tag Hn ให้อยู่ตรงกลาง ใช้รูปแบบคําสั่งดังนี้

<CENTER> <Hn> ข้อความ </Hn></CENTER>

ตัวอย่างคําสั่ง

<h1>นี่คือขนาดหัวเรื่องเท่ากับ 1</h1> 
<h2>นี่คือขนาดหัวเรื่องเท่ากับ 2</h2> 
<h3>นี่คือขนาดหัวเรื่องเท่ากับ 3</h3> 
<h4>นี่คือขนาดหัวเรื่องเท่ากับ 4</h4> 
<h5>นี่คือขนาดหัวเรื่องเท่ากับ 5</h5> 
<h6>นี่คือขนาดหัวเรื่องเท่ากับ 6</h6>

การกําหนดฟ้อนต์

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

รูปแบบคําสั่ง HTML ในการกําหนดแบบตัวอักษร
ข้อความ
ตัวอย่างคําสั่งการกําหนดแบบตัวอักษร (Font)

แสดงตัวอักษรแบบ AngsanaUPC
แสดงตัวอักษรแบบ CordiaUPC 
แสดงตัวอักษรแบบ BrowallaiUPC

การกําหนดลักษณะและแบบของตัวอักษร

คําอธิบาย

... เป็นคําสั่งที่ใช้กําหนดรูปแบบตัวหนา
... เป็นคําสั่งที่ใช้กําหนดรูปแบบตัวอักษร-ตัวเอียง
<S>...</S> เป็นคําสั่งที่ใช้กําหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
... เป็นคําสั่งที่ใช้กําหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
... เป็นคําสั่งที่ใช้กําหนดรูปแบบตัวอักษรยกขึ้น (Super Script)
... เป็นคําสั่งที่ใช้กําหนดรูปแบบตัวอักษรห้อยลง (Sub Script)

การกําหนดตัวอักษรให้มีความหนา มีการเอน มีขีดเส้นใต้

ตัวอย่างการใช้คําสั่ง

<HTML>
<HEAD>
<TITLE>การกําหนดรูปแบบตัวอักษร</TITLE>
</HEAD>
<BODY>
กําหนดตัวอักษรให้มีความหนา
กําหนดตัวอักษรให้มีการเอน
กําหนดตัวอักษรให้มีขีดเส้นใต้
 กําหนดให้มีทุกแบบ 
</BODY>
</HTML>

การกําหนดขนาดตัวอักษร

ตัวอย่างการใช้คําสั่ง

<HTML>
<HEAD>
<TITLE>การกําหนดรูปแบบตัวอักษร</TITLE>
</HEAD>
<BODY>
 ตัวอักษรนี้เท่ากับขนาด 5 
 ตัวอักษรนี้เท่ากับขนาด 6 
</BODY>
</HTML>
**** หมายเหตุ เราสามารถใช้คําสั่งกําหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น
ข้อความ