การกำหนดสีตัวอักษร ใช้คำสั่งแบบใด แถบเครื่องมือในข้อใดที่ใช้ในการตกแต่งสี และขนาดของตัวอักษร คำสั่ง เป็นคำสั่งในการกำหนดสิ่งใด คำสั่งที่ใช้สำหรับกำหนดฟอนต์ของตัวอักษรให้เป็น “tahoma” คือข้อใด

คำสั่ง ใน การกำหนด รูป แบบ ตัวอักษร ให้ เป็น แบบ dilleniaupc คือ ข้อ ใด

การกำหนดรูปแบบตัวอักษรในเว็บเพจนั้นเป็นการใช้ Tag คู่เป็นส่วนมาก โดยข้อความที่อยุ่ใน Tag นั้นจะเป็นข้อความที่ถูกกำหนดลักษณะ ตาม Tag ต่างๆ โดย Tag พื้นฐานที่ควรทราบมีดังต่อไปนี้

การกำหนดตัวอักษรให้เป็นตัวหนา

<b>ข้อความที่ต้องการจัดรูปแบบ</b> หรือ <strong>ข้อความที่ต้องการจัดรูปแบบ</strong>

การกำหนดตัวอักษรให้เป็นตัวขีดเส้นใต้

<u>ข้อความที่ต้องการจัดรูปแบบ</u>

การกำหนดตัวอักษรให้เป็นตัวเอียง

<i>ข้อความที่ต้องการจัดรูปแบบ</i> หรือ <em>ข้อความที่ต้องการจัดรูปแบบ</em>

ตัวอย่าง ex05.html

<html> <head> <title>Head 1-6</title> </head> <body> <B>ข้อความที่เป็นตัวหนา</B> <U>ข้อความที่เป็นตัวขีดเส้นใต้</U> <I>ข้อความที่เป็นตัวเอียง</I> </body> </html>

ผลลัพธ์

**********************************************************************************************

การกำหนดสี, ขนาด และรูปร่างตัวอักษร

<font face= “รูปแบบตัวอักษร” color= “สีตัวอักษร” size= “ขนาดตัวอักษร”>ข้อความที่ต้องการจัดรูปแบบ</font>

***หมายเหตุ font ที่นิยมนำมาสร้างเว็บไซต์คือ Tahoma, MS Sans serif และ Verdana เป็นต้น

ตัวอย่าง ex06.html

<html> <head> <title>Head 1-6</title> </head> <body> <font face= “Tahoma" color= “#FF0000" size= “3">ข้อความสีแดง ขนาด 3 รูปแบบ Tahoma</font> </body> </html>

ผลลัพธ์

***********************************************************************************************

การกำหนดขนาดตัวอักษรให้ลดลง 1 ขนาด โดยไม่ต้องใช้ Tag <font size= “…”>

<small>ข้อความที่ต้องการจัดรูปแบบ</small>

การกำหนดขนาดตัวอักษรให้เพิ่มขึ้น 1 ขนาด โดยไม่ต้องใช้ Tag <font size= “…”>

<big>ข้อความที่ต้องการจัดรูปแบบ</big>

การกำหนดขนาดตัวอักษรแบบตัวห้อย

<sub>ข้อความที่ต้องการจัดรูปแบบ</sub>

การกำหนดขนาดตัวอักษรแบบตัวยก

<sup>ข้อความที่ต้องการจัดรูปแบบ</sup>

ตัวอย่าง ex07.html

<html> <head> <title>Head 1-6</title> </head> <body> <small>ลด 1 ขนาด</small> <big>เพิ่ม 1 ขนาด</big> <sub>ตัวห้อย</sub> <sup>ตัวยก</sup> </body> </html>

ผลลัพธ์

*********************************************************************************************

การกำหนดขนาดตัวอักษรแบบเคลื่อนที่

<marquee scrollamount= “ความเร็ว” behavior= “รูปแบบ”>ข้อความที่ต้องการทำให้เคลื่อนไหว</marquee>

ความเร็ว คือ ความเร็วในการเลื่อน
รูปแบบ คือ ลักษณะของการเลื่อน alternate/scroll/slide

การขึ้นบรรทัดใหม่

<br><p>ข้อความในพารากราฟ</p>

ตัวอย่าง ex08.html

<html> <head> <title>Head 1-6</title> </head> <body> <marquee scrollamount= "10" behavior= “alternate”>ข้อความที่ต้องการทำให้เคลื่อนไหว</marquee> บรรทัดแรก<br> บรรทัดที่สอง <p>ข้อความในพารากราฟ</p> </body> </html>

ผลลัพธ์

*************************************************************************************************

การกำหนดข้อความย่อหน้า

<blockquote>ข้อความในการย่อหน้า</blockquote>

ตัวอย่าง ex9.html

ผลลัพธ์

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง

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

การจัดรูปแบบตัวอักษรหรือข้อความ ในเว็บเพจด้วยภาษา HTML นั้น เราสามารถกำหนดขนาดของตัวอักษรตามความต้องการและเหมาะสมกับแต่ละลักษณะของเว็บเพจ และการกำหนดขนาดของตัวอักษร ข้อความสามารถกำหนดได้หลายขนาด

ขนาดของตัวอักษร จะกำหนดโดยใช้ตัวเลขที่มีค่า 1 - 7 เป็นตัวกำหนด โดยค่าตัวเลข 1 และ 2 จะเป็นการย่อขนาดของตัวอักษร ค่าตัวเลข 3 ตัวอักษรจะอยู่ในระดับมาตราฐาน และค่าตัวเลข 4 ถึง 7 จะเป็นตัวอักษรใหญ่ขึ้น ตามลำดับ

คำสั่งที่ใช้ คำสั่งจัดรูปแบบ (font) ตามด้วย คุณสมบัติของรูปแบบ (attribute)ซึ่งในการกำหนดขนาดตัวอักษร จะใช้ attribute ชื่อ size

<font size="ค่าตัวเลขกำหนดขนาดของตัวอักษร">...ข้อความ...</font>

นอกจากจะกำหนดขนาดของตัวอักษร ข้อความ ด้วยคำสั่ง font size แล้ว ในภาษา HTML ยังสามารถกำหนดขนาดของข้อความให้มีลักษณะเป็นหัวเรื่อง โดยเรียงตั้งแต่หัวเรื่องใหญ่ ไล่ลงมาถึงหัวเรื่องที่เล็กสุดได้

การกำหนดหัวเรื่อง สามารถกำหนดได้ โดยใช้คำสั่งดังนี้

       <h2>หัวเรื่องขนาดใหญ่ 1</h2>
       <h2>หัวเรื่องขนาดใหญ่ 2</h2>
       <h3>หัวเรื่องขนาดใหญ่ 3</h3>
       <h4>หัวเรื่องขนาดใหญ่ 4</h4>
       <h5>หัวเรื่องขนาดใหญ่ 5</h5>
       <h6>หัวเรื่องขนาดใหญ่ 6</h6>

โดยที่ <h1> นั้นจะมีขนาดใหญ่ที่สุด ส่วน <h6> จะมีขนาดเล็กที่สุด

ทดสอบคำสั่งกำหนดขนาดตัวอักษร และกำหนดหัวเรื่อง

กระทู้ที่เกี่ยวข้อง

Toplist

โพสต์ล่าสุด

แท็ก