หน่วยที่ 3(ตอน 2)

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

ผลการเรียนรู้

เข้าใจและปฏิบัติการเขียนเว็บเพจ การจัดตัวอักษรและตกแต่งข้อความได้

จุดประสงค์

- อธิบายการจัดตัวอักษรและตกแต่งข้อความได้

- ปฏิบัติการเขียนเว็บเพจ การจัดตัวอักษรและตกแต่งข้อความได้

วิธีการตกแต่งตัวอักษรและข้อความ

1. การกำหนดความหนา

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

รูปแบบการใช้งาน

ชื่อแท็ก B

รูปแบบ ตัวอักษรที่ต้องการเพิ่มความหนา

ตัวอย่าง ตัวอักษรปกติมีค่าเท่ากับ 3 หลังจากแท็ก b ตัวอักษรหนาขึ้น

การนำไปใช้

การกำหนดให้ตัวอักษรเพิ่มความหนา สามารถทำได้ดังนี้

<body>

ข้อความที่ต้องการให้เพิ่มความหนา ต้องแสดงกลางแท็ก b เสมอ

</body>

2. กำหนดตัวอักษรเอียง

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

รูปแบบการใช้งาน

ชื่อแท็ก I

รูปแบบ ตัวอักษรที่ต้องการเอียง

ตัวอย่าง ตัวอักษรปกติ หลังจากแท็ก i ตัวอักษรจะเอียง

การนำไปใช้

การกำหนดให้ตัวอักษรเอียง สามารถทำได้ดังนี้

<body>

ข้อความที่ต้องการให้เอียง ต้องแสดงกลางแท็ก I เสมอ

</body>

3. การขีดเส้นใต้ตัวอักษร

เราสามารถเน้นข้อความ หรือกำหนดหัวข้อให้เด่นได้ด้วยการขีดเส้นใต้โดยใช้ ซึ่งรูปแบบการใช้งาน เป็นดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก U

รูปแบบ ตัวอักษรที่ต้องการขีดเส้นใต้

ตัวอย่าง ตัวอักษรปกติ หลังจากแท็ก U จะขีดเส้นใต้ตัวอักษร

การนำไปใช้

การกำหนดให้ตัวอักษรที่ต้องการขีดเส้นใต้ สามารถทำได้ดังนี้

<body>

ข้อความที่ต้องการให้ขีดเส้นใต้ ต้องแสดงกลางแท็ก U เสมอ

</body>

4. การขีดเส้นพาดกลางข้อความ

ในการพิมพ์เอกสารโดยทั่วไปมีการขัดเส้นกลางพาดข้อความ เพื่อเป็นการเน้นข้อความอีกวิธีหนึ่ง ในการเขียนเว็บเพจก็สามารถเน้นข้อความในลักษณะเช่นนี้ได้ไม่ยาก โดยใช้แท็ก <s> มีรูปแบบการใช้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก S

รูปแบบ <s>ตัวอักษรที่ต้องการขีดเส้นพาดกลาง</s>

ตัวอย่าง ตัวอักษรปกติ <s>หลังจากแท็ก S จะขีดเส้นพาดกลางตัวอักษร</s>

การนำไปใช้

การกำหนดให้ตัวอักษรที่ต้องการขีดเส้นใต้ สามารถทำได้ดังนี้

<body>

ข้อความที่ต้องการให้ขีดเส้นพาดกลาง <s> ต้องแสดงกลางแท็ก S เสมอ</s>

</body>

5. การเพิ่มขนาดตัวอักษร

การเพิ่มขนาดตัวอักษรให้ใหญ่กว่าปกติเป็นการเพิ่มจุดเด่นให้กับข้อความให้เด่นยิ่งขึ้น รูปแบบการใช้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก BIG

รูปแบบ <big>ตัวอักษรที่ต้องการเพิ่มขนาด</big>

ตัวอย่าง ตัวอักษรปกติ <big> หลังจากแท็ก BIG ขนาดเพิ่มหนึ่งระดับ</big>

การนำไปใช้

การเพิ่มขนาดตัวอักษรให้ใหญ่กว่าปกติ สามารถทำได้ดังนี้

<body>

ข้อความปกติ <big> ข้อความที่ต้องการให้ใหญ่กว่าปกติ</big>

</body>

6. การลดขนาดตัวอักษร

ตัวอักษรขนาดเล็กลงกว่าปกติ มีไว้สำหรับจัดรูปแบบตัวอักษรหรือข้อความบางอย่างให้ดูเหมาะสมมากขึ้น รูปแบบการใช้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก SMALL

รูปแบบ ตัวอักษรที่ต้องการลดขนาด

ตัวอย่าง ตัวอักษรปกติ ตัวอักษรลดขนาดหนึ่งระดับ

การนำไปใช้

การเพิ่มขนาดตัวอักษรให้ใหญ่กว่าปกติ สามารถทำได้ดังนี้

<body>

ข้อความปกติ ข้อความที่ต้องการให้ลดขนาดหนึ่งระดับ

</body>

7. การปรับขนาดตัวอักษร

ขนาดของตัวอักษรสามารถปรับเปลี่ยนได้ตามที่ผู้เขียนเว็บต้องการได้หลายขนาด ซึ่งเราสามารถกำหนดขนาดเข้าไปโดยตรง และกำหนดขนาดโดยเปรียบเทียบกับขนาดของตัวอักษรปกติ มีรูปแบบการใช้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก FONT

แอตทริบิวต์ SIZE

รูปแบบ ค่าตัวเลขปรับขนาดตัวอักษรได้ตั้งแต่ 1-7

ตัวอย่าง สวัสดี

รักเอย

อุ้มรัก

การนำไปใช้

การปรับขนาดตัวอักษร สามารถทำได้ดังนี้

<body>

ข้อความปกติ ข้อความที่ต้องการปรับขนาดใหม่

</body>

ค่าที่กำหนดให้ขนาดตัวอักษรกำหนดได้ตั้งแต่ 1 – 7 หรือเพิ่มและลดขนาดเปรียบเทียบจากปกติโดยใช้ + หรือ - เพื่อให้มากกว่าหรือน้อยกว่าขนาดตัวอักษรที่แสดงในขณะนั้น

8. การเลือกรูปแบบให้ตัวอักษรบางกลุ่ม

เมื่อเราต้องการให้บราวเซอร์ใช้ฟอนต์ที่เรากำหนดแทนฟอนต์ที่ผู้ใช้งานเว็บเพจกำหนดไว้ในบราวเซอร์ เราสารถใช้แอตทริบิวต์ Face ของ ได้โดยมีรูปแบบดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก FONT

แอตทริบิวต์ FACE

รูปแบบ ตัวอักษร

ตัวอย่าง กลุ่มข้อความ

กลุ่มข้อความ

การนำไปใช้

การเลือกรูปแบบให้กับตัวอักษร สามารถทำได้ดังนี้

<body>

ข้อความที่ต้องการกำหนดรูปแบบตัวอักษรใหม่

</body>

9. การกำหนดรูปแบบตัวอักษรเหมือนกันทั้งหน้าเว็บ

จากวิธีการกำหนดชนิดของรูปแบบตัวอักษรที่ผ่านมา เราได้กำหนดเฉพาะตัวอักษรบางตัวที่อยู่ระหว่าง… เท่านั้น ถ้าเราต้องการกำหนดให้ตัวอักษรทั้งหน้าเว็บเพจใช้รูปแบบอักษรชนิดเดียวกัน ถึงแม้ว่าเราจะสามารถทำได้ด้วย แต่จะไม่สะดวกสบายเท่ากับการกำหนดด้วย <basefont> ซึ่งมีรูปแบบการใช้งานดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก BASEFONT

รูปแบบ <basefont face= ชื่อฟอนต์>ตัวอักษร

ตัวอย่าง <basefont font = FreesiaUPC>กลุ่มข้อความ

<basefont font = CordiaUPC>กลุ่มข้อความ

การนำไปใช้

การเลือกรูปแบบให้กับตัวอักษรทั้งหมดบนหน้าเว็บ สามารถทำได้ดังนี้

<body>

<Basefont face=CordiaUPC>ข้อความที่ต้องการกำหนดรูปแบบตัวอักษร....

</body>

รูปแบบการใช้งาน <basefont> ปกติแล้วจะไม่มีการใช้แท็กปิด </basefont> ซึ่งถ้ามีการใช้แท็กปิดจะทำให้ตัวอักษรที่อยู่ระหว่าง </basefont> เท่านั้นที่เปลี่ยนไปตามที่กำหนดไว้

นอกจากการใช้งาน <basefont> เพื่อกำหนดชนิดของฟอนต์แล้ว เรายังสามารถใช้กำหนดขนาด หรือกำหนดสีของตัวอักษรได้ด้วย เช่น <Basefont size= 5>

10. การกำหนดสีให้ตัวอักษรบางกลุ่ม

นอกจากแอตทริบิวต์ face และแอตทริบิวต์ size ของ ที่ใช้สำหรับกำหนดชนิดของรูปแบบตัวอักษรและขนาดให้กับตัวอักษรแล้ว ยังมีแอตทริบิวต์ color ที่ใช้กำหนดสีให้กับตัวอักษรเพื่อให้มีสีสันตามต้องการได้ โดยมีรูปแบบการใช้งานดังต่อไปนี้

รูปแบบการใช้งาน

ชื่อแท็ก FONT

แอตทริบิวต์ COLOR

รูปแบบ ตัวอักษร

ตัวอย่าง กลุ่มข้อความที่ต้องการเปลี่ยนสี

กลุ่มข้อความที่ต้องการเปลี่ยนสี

การนำไปใช้

การกำหนดสีให้กับตัวอักษรบางกลุ่ม สามารถทำได้ดังนี้

<body>

ข้อความที่ต้องการเปลี่ยนสีตัวอักษรโดยเปลี่ยนเป็นสีแดง

ข้อความที่ต้องการเปลี่ยนสีตัวอักษรโดยกำหนดเป็นค่าของสี

</body>

11. กำหนดสีให้ตัวอักษรทั้งหน้า

นอกจากเราจะใช้ <basefont> กำหนดสีตัวอักษรทั้งหน้าเว็บเพจให้มีสีเดียวกันได้เช่นเดียวกับที่เราสามารถกำหนดรูปแบบตัวอักษรทั้งหน้าเว็บเพจใช้ฟอนต์และขนาดเท่ากันได้ทั้งหมดด้วย <basefont> แล้ว เรายังสามารถกำหนดสีให้กับตัวอักษรทั้งหน้าด้วยแอตทริบิวต์ text ของ <body> ได้อีกด้วย รูปแบบดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก BODY

แอตทริบิวต์ TEXT

รูปแบบ <body text= ชื่อสีหรือค่าของสี>กลุ่มตัวอักษรหรือข้อความ</body>

ตัวอย่าง <body text = ”Purple”>กลุ่มข้อความ</body>

<body text = ”#7F007F”>กลุ่มข้อความ</body>

การนำไปใช้

การกำหนดสีให้กับตัวอักษรทั้งหน้า สามารถทำได้ดังนี้

ข้อความที่ทั้งหมดที่ต้องการกำหนดสีให้ตัวอักษร ......

</body>

ถ้าต้องการให้สีปกติของตัวอักษรเป็นสีอื่นที่ไม่ใช้สีดำและต้องการให้ตัวอักษรบางกลุ่มมีสีแตกต่างออกไปอีก ก็ให้กำหนดสีปกติของตัวอักษรในหน้าเว็บเพจนั้นด้วยแอตทริบิวต์ text ของ <body> ส่วนกลุ่มตัวอักษรที่ต้องการให้มีสีแตกต่างออกไปก็ให้กำหนดด้วย อีกครั้ง เทคนิคนี้ยังใช้ได้กับการกำหนดฟอนต์ให้กับตัวอักษรอีกด้วย

12. การขีดฆ่าตัวอักษร

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

รูปแบบการใช้งาน

ชื่อแท็ก STRIKE

รูปแบบ <STRIKE>ตัวอักษร</STRIKE>

ตัวอย่าง ราคา <strike>550.00 บาท</strike> เราไม่ขาย

การนำไปใช้

การขีดฆ่าตัวอักษรที่ไม่ต้องการ สามารถทำได้ดังนี้

<body>

ราคา <strike>550.00</strike>บาท เหลือเพียง 500.00 บาท เท่านั้น

</body>

การจัดลำดับข้อความและอักษรพิเศษ

1. การแสดงลำดับข้อความหรือรายการ

รายการที่มีลำดับแตกต่างจากรายการที่ไม่มีลำดับตรงที่สัญลักษณ์ข้างหน้ารายการ ซึ่งปรากฏเป็นตัวเลข ตั้งแต่ลำดับที่ 1 เป็นต้นไป วิธีการกำหนดรายการแบบนี้ ทำได้ด้วยแท็ก <ol></ol> ย่อมาจาก Ordered List มีรูปแบบการใช้ดังต่อไปนี้

รูปแบบการใช้งาน

ชื่อแท็ก OL

รูปแบบ <ol><li>รายการที่ 1<li>รายการที่ 2 <li>รายการที่ 3 ... </ol>

ตัวอย่าง <ol><li>1<li>I,i<li>A,a<li></ol>

การนำไปใช้

การแสดงลำดับรายการหน้าข้อความ สามารถทำได้ดังนี้

<body>

ค่าที่สามารถกำหนดให้แอตทริบิวต์ type ได้มีดังนี้

<ol>

<li>1. การเงิน<li>I. การงาน<li>i.โชคลาภ<li>A.วาสนา<li>a.บุญญา

</ol>

</body>

การกำหนดแอตทริบิวต์ type มีดังนี้

Type = ชนิดของการแสดงผลแบบรายการ

I, i = เป็นการแสดงผลแบบโรมัน

A, a = เป็นการแสดงผลแบบภาษาอังกฤษ

1 = เป็นการแสดงผลลำดับรายการปกติ (Default)

start = การเริ่มของค่าการแสดงรายการ (สามารถกำหนดค่าเริ่มต้นได้)

value = การกำหนดค่าเฉพาะแต่ละค่าของการแสดงรายการ

1.1 การเปลี่ยนสัญลักษณ์หน้ารายการที่มีลำดับ

รูปแบบการใช้งาน

แอตทริบิวต์ TYPE

รูปแบบ <ol type = a หรือ A หรือ i หรือ I ><li>รายการที่ 1

<li>รายการที่ 2 <li>รายการที่ 3 ... </ol>

ตัวอย่าง <ol type = a><li>รายการที่ 1<li>รายการที่ 2<li>รายการที่ 3

</ol>

การนำไปใช้

การแสดงสัญลักษณ์หน้ารายการที่มีลำดับ สามารถทำได้ดังนี้

<body>

ข้อใดไม่ใช่ลักษณะของการแสดงผลแบบรายการ

<li>a<li>A<li>i<li>O

</ol>

</body>

1.2 ปรับรายการให้เริ่มต้นด้วยลำดับที่ต้องการ

บางครั้งการแสดงรายการที่มีลำดับ อาจมีเนื้อหาอื่นคั่นระหว่างแต่ละรายการ ซึ่ง ทำให้ไม่สามารถแสดงลำดับรายการที่ต่อเนื่องกันได้ แต่เราสามารถแก้ไขปัญหานี้ด้วยแอตทริบิวต์ start ของ <ol> ซึ่งมีรูปแบบดังนี้

รูปแบบการใช้งาน

แอตทริบิวต์ START

รูปแบบ <ol start = ตัวเลขที่ต้องการเริ่มต้น><li>รายการที่ 1

<li>รายการที่ 2 <li>รายการที่ 3 ... </ol>

ตัวอย่าง <ol start = 3><li>ตื่นนอน<li>อาบน้ำ<li>แต่งตัว

<li>ไปโรงเรียน </ol>

การนำไปใช้

การปรับรายการให้เริ่มต้นด้วยลำดับที่ต้องการ สามารถทำได้ดังนี้

<body>

จงบอกลำดับการปฏิบัติตนก่อนไปโรงเรียน

<ol><li>ตื่นนอน

<li>อาบน้ำ

<li>รับประทานอาหารเช้า

</ol>

หลังจากอาบน้ำเสร็จข้าพเจ้าไม่รับประทานอาหาร

<li>แต่งตัว

<li>ไปโรงเรียน

</ol>

</body>

2. การแสดงผลรายการแบบไม่มีลำดับ

ข้อมูลแบบรายการอาจถูกกำหนดให้แสดงโดยมีสัญลักษณ์ปรากฏอยู่ข้างหน้าแต่ละรายการ (bullet) ซึ่งปกติเมื่อใช้ (ul) โดยไม่ปรับแต่งใด ๆ เราจะเห็นสัญลักษณ์รูปวงกลมแบบทึบรูปแบบการใช้งาน (ul) เป็นดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก UL

รูปแบบ <ul><li>รายการที่ 1<ul>รายการที่ 2 <ul>

รายการที่ 3 ... </ul>

ตัวอย่าง <ul><li>disc<li>square<li>circle</ul>

การนำไปใช้

การกำหนดให้แสดงสัญลักษณ์หน้าลำดับรายการ สามารถทำได้ดังนี้

<body>

ค่าที่สามารถกำหนดให้แอตทริบิวต์ type ได้มีดังนี้

<ul> <li>disc

<li>square

<li>circle

</ul>

</body>

2.1 เปลี่ยนสัญลักษณ์หน้ารายการที่ไม่มีลำดับ

สำหรับสัญลักษณ์ที่ปรากฏข้างหน้ารายการ เราสามารถเปลี่ยนแปลงให้เป็นแบบที่ต้องการได้โดย อาจกำหนดให้เป็นรูปสี่เหลี่ยมแบบทึบ หรือวงกลมแบบโปร่งก็ได้ โดยใช้ แอตทริบิวต์ type ของ <ul> ในการกำหนดสัญลักษณ์ข้างหน้ารายการ ดั้งนี้

2.1.1 กำหนดให้ แอตทริบิวต์ type มีค่าเป็น circle

รูปแบบการใช้งาน

แอตทริบิวต์ TYPE

รูปแบบ <ul type=circle><li>รายการที่ 1<li>รายการที่ 2 <li>รายการที่ 3 ... </ul>

ตัวอย่าง <ul type=circle><li>disc<li>square<li>circle</ul>

การนำไปใช้

การกำหนดให้แสดงสัญลักษณ์หน้าลำดับรายการเป็นแบบ circle สามารถทำได้ดังนี้

<body>

ค่าที่สามารถกำหนดให้แอตทริบิวต์ type ได้มีดังนี้

<ul type=circle> <li>disc

<li>square

<li>circle </ul>

</body>

2.1.2 กำหนดให้ แอตทริบิวต์ type มีค่าเป็น square

รูปแบบการใช้งาน

แอตทริบิวต์ TYPE

รูปแบบ <ul type=sauare><li>รายการที่ 1<li>รายการที่ 2 <li>รายการที่ 3 ... </ul>

ตัวอย่าง <ul type=square><li>disc<li>square<li>circle</ul>

การนำไปใช้

การกำหนดให้แสดงสัญลักษณ์หน้าลำดับรายการเป็นแบบ square สามารถทำได้ดังนี้

<body>

ค่าที่สามารถกำหนดให้แอตทริบิวต์ type ได้มีดังนี้

<ul type=square> <li>disc

<li>square

<li>circle </ul>

</body>

3. การแสดงตัวอักษรพิเศษ

สำหรับตัวอักษรบางอย่างที่ไม่สามารถพิมพ์เข้าไปในเว็บเพจได้โดยตรงด้วยการกดปุ่มคีย์บอร์ด เช่น เครื่องหมาย @ หรือ ! จะมีวิธีในการทำให้ปรากฏบนหน้าต่างเว็บเพจได้ เหมือนตัวอักษรปกติดังนี้

3.1 กำหนดตัวอักษรพิเศษด้วยชื่อตัวอักษร

วิธีง่ายที่สุดในการกำหนดให้ปรากฏตัวอักษรพิเศษ คือ ใช้ชื่อของตัวอักษรที่ต้องการซึ่งมีรูปแบบการใช้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก &ชื่อของตัวอักษรที่ต้องการ;

รูปแบบ ©

การนำไปใช้

การแสดงตัวอักษรพิเศษ copyright สามารถทำได้ดังนี้

<body>

</body>

3.2 กำหนดตัวอักษรพิเศษด้วยรหัสตัวอักษร

นอกจากการกำหนดให้ปรากฏตัวอักษรพิเศษด้วยการใช้ชื่อแล้ว เรายังสามารถกำหนดด้วยรหัสของตัวอักษรได้อีกด้วย โดยมีรูปแบบเป็นการพิมพ์เครื่องหมาย & ตามด้วยเครื่องหมาย # และรหัสของตัวอักษร สุดท้ายให้ปิดด้วยเครื่องหมาย ; ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก &#รหัสตัวอักษรที่ต้องการ;

รูปแบบ ©

การนำไปใช้

การแสดงตัวอักษรพิเศษ copyright สามารถทำได้ดังนี้

<body>

</body>

4. การทำอักษรให้เป็นตัวยก

การกำหนดระดับของตัวอักษรให้อยู่เหนือกว่าระดับปกติในบรรทัดเดียวกัน โดยใช้แท็ก ซึ่งจะมีผลทำให้ตัวอักษรปรากฏเป็นตัวยก ลักษณะเช่นนี้มักจะใช้เมื่อต้องการแสดงสูตรทางคณิตศาสตร์ เช่น ตัวเลขยกกำลัง การใช้ มีรูปแบบดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก SUB

รูปแบบ ข้อความตัวอักษรที่ต้องการให้ยก

ตัวอย่าง 104 = 1000

การนำไปใช้

การแสดงตัวยกสูงกว่าปกติ สามารถทำได้ดังนี้

<body>

1001002

</body>

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

5. การทำอักษรให้เป็นตัวห้อย

ลักษณะที่ตรงกันข้ามกับลักษณะตัวยกก็คือ ลักษณะตัวห้อย ซึ่งเรากำหนดได้ด้วยการใช้ ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก SUP

รูปแบบ ข้อความตัวอักษรที่ต้องการให้ห้อย

ตัวอย่าง H2O

การนำไปใช้

การแสดงตัวห้อยต่ำกว่าปกติ สามารถทำได้ดังนี้

<body>

H2O

</body>

6. การทำให้ข้อความเลื่อน

การทำให้ข้อความเลื่อนได้ เป็นการตกแต่งข้อความเพื่อให้ดูโดดเด่น เป็นที่น่าประทับใจของผู้พบเห็น ข้อความที่เลื่อนเองได้เกิดจากการกำหนดด้วย <marquee> โดยจะมีผลกับบราวเซอร์ทุกตัว

เมื่อไม่ได้กำหนดแอตทริบิวต์ใด ๆ ให้กับ <marquee> ข้อความจะเลื่อนจากด้านขวาสุด ไปยังด้านซ้ายสุดของพื้นที่แสดงผล โดยพื้นที่ในการเลื่อนจะมีความกว้างเท่ากับพื้นที่แสดงผลของเว็บเพจ ส่วนความสูงจะขึ้นอยู่กับขนาดของข้อความว่ามีกี่บรรทัด

รูปแบบการใช้งาน

ชื่อแท็ก MARQUEE

รูปแบบ <marquee> ข้อความที่ต้องการให้เลื่อน</marquee >

ตัวอย่าง <marquee>โรงเรียนของเราน่าอยู่ คุณครูใจดีทุกคน</marquee>

การนำไปใช้

การแสดงข้อความหรือตัวอักษรเลื่อน สามารถทำได้ดังนี้

<body>

<marquee>โรงเรียนของเราน่าอยู่ คุณครูใจดีทุกคน เด็ก ๆ ก็ไม่ซุกซน</marquee>

</body>

6.1 การปรับความเร็วของตัวอักษรเลื่อน

การกำหนดความเร็วให้กับตัวอักษรที่เลื่อน ใช้แอตทริบิวต์ scrolldelay ในรูปแบบต่อไปนี้

รูปแบบการใช้งาน

แอตทริบิวต์ SCROLLDELAY

รูปแบบ <marquee scrolldelay=ค่าของมิลลิวินาที> ข้อความที่ต้องการให้เลื่อน</marquee>

ตัวอย่าง <marquee scrolldelay =1000>โรงเรียนของเราน่าอยู่คุณครูใจดีทุกคน</marquee>

การนำไปใช้

การกำหนดความเร็วข้อความหรือตัวอักษรเลื่อน สามารถทำได้ดังนี้

<body>

<marquee scrolldelay=1000>โรงเรียนของเราน่าอยู่ คุณครูใจดีทุกคน เด็ก ๆ ก็ไม่ซุกซนพวกเรา

ทุกคนชอบมาโรงเรียน</marquee>

</body>

6.2 การปรับทิศทางตัวอักษรเลื่อน

การปรับทิศทางให้กับตัวอักษรที่เลื่อน ใช้แอตทริบิวต์ direction ในรูปแบบต่อไปนี้

รูปแบบการใช้งาน

แอตทริบิวต์ DIRECTION

รูปแบบ <marquee direction = ทิศทาง เช่น left, right, up, down>ข้อความที่ต้องการให้เลื่อน

</marquee>

ตัวอย่าง <marquee direction=up>โรงเรียนของเราน่าอยู่คุณครูใจดีทุกคน</marquee>

การนำไปใช้

การกำหนดความเร็วข้อความหรือตัวอักษรเลื่อน สามารถทำได้ดังนี้

<body>

<marquee direction=up>โรงเรียนของเราน่าอยู่ คุณครูใจดีทุกคน เด็ก ๆ ก็ไม่ซุกซน

พวกเราทุกคนชอบมาโรงเรียน</marquee>

<marquee scrolldelay = 2000 direction = up> ขอบคุณทุกท่านที่มาเยือน </marquee>

</body>

การกำหนดให้แอตทริบิวต์ direction นั้น ค่าที่สามารถกำหนดได้คือ left, right, up, down และ ถ้าต้องการกำหนดความเร็วในการเลื่อนเป็น 1 นาที โดยให้เลื่อนจากด้านล่างขึ้นไปยังด้านบนให้ทำดังนี้

1. กำหนดความเร็วเป็น 1000 มิลลิวินาทีซึ่งก็เท่ากับ 1 นาทีนั่นเอง

2. กำหนดทิศทางขึ้นโดยกำหนดค่าให้แอตทริบิวต์ direction เป็น up

นอกจากเราจะกำหนดความเร็วและทิศทางการเลื่อนของตัวอักษรได้แล้ว เรายังสามารถกำหนดความกว้าง ความสูงและสีพื้นหลังของพื้นที่ในการเลื่อนได้ด้วยแอตทริบิวต์ width, height และ bgcolor ตามลำดับ

การกำหนดความกว้าง ความสูงและสีพื้นของตัวอักษรเลื่อน สามารถทำได้ดังนี้

<body>

<marquee direction=up>โรงเรียนของเราน่าอยู่ คุณครูใจดีทุกคน เด็ก ๆ ก็ไม่ซุกซนพวกเราทุกคนชอบมา

โรงเรียน</marquee>

<marquee scrolldelay = 2000 direction = up width= 500 height =50

bgcolor=violet>ขอบคุณทุกท่านที่มาเยือน</marquee>

</body>