ใบความรู้ที่ 3
การตกแต่งข้อความ
การตกแต่งข้อความ
คำสั่ง
BGCOLER : TEXT : BLINK : MARQUEE
BGCOLER
การกำหนดสีของพื้นฉากหลัง
เป็นคำสั่งที่ใช้กำหนดสีของ Background จอภาพให้มีสีต่างๆตามต้องการโดยการกำหนดเลขฐาน16
รูปแบบคำสั่ง
<BODY BGCOLOR="#เลขฐาน16 จำนวน 6 ตัว">......</BODY>
ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>การกำหนดสีของพื้นฉากหลัง</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF" >
กำหนดBACKGROUNDเป็นสีน้ำเงิน
</BODY>
</HTML>
|
TEXT
การกำหนดสีของตัวอักษร
เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆตามต้องการโดยการกำหนดเลขฐาน16รูปแบบคำสั่ง
<BODY TEXT="#เลขฐาน16 จำนวน 6 ตัว">......</BODY>
ตัวอย่างการใช้คำสั่ง
<BODY TEXT="#เลขฐาน16 จำนวน 6 ตัว">......</BODY>
ตัวอย่างการใช้คำสั่ง
| <HTML> <HEAD> <TITLE>การกำหนดสีของตัวอักษร</TITLE> </HEAD> <BODY TEXT="#00ff00"> กำหนดตัวอักษร เป็นสีเขียว </BODY> </HTML> |
BLINK
ตัวอักษรกระพริบ
เป็นคำสั่งที่ใช้กำหนดตัวอักษรที่อยู่ใน Tag เกิดการกระพริบ ซึ่งคำสั่งนี้จะใช้ได้กับ Browser ของ Netscape เท่านั้น
รูปแบบคำสั่ง
copy โ้้ค้ด ไปวางไว้ระหว่าง <HEAD>ฺฺฺ.....................</HEAD>
<script type="text/javascript">
window.onload=function(){
setInterval('blinkIt()',500)
}
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags('blink').length;i++){
s=document.all.tags('blink')[i];
s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible';
}
}
}
</script>
<blink> ตัวอักษรกระพริบ </blink>
ตัวอย่างการใช้คำสั่ง
<HTML>
<HEAD>
<TITLE>ตัวอักษรกระพริบ</TITLE>
<script type="text/javascript">window.onload=function(){ setInterval('blinkIt()',500) } function blinkIt() { if (!document.all) return; else { for(i=0;i<document.all.tags('blink').length;i++){ s=document.all.tags('blink')[i]; s.style.visibility=(s.style.visibility=='visible')?'hidden':'visible'; } } } </script>
</HEAD>
<BODY>
</BODY>
</HTML>
|
MARQUEE
การทำตัวอักษรวิ่ง
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจ
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจ
รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง
ทิศทาง
|
คำอธิบาย
|
UP
|
วิ่งจากด้านล่างขึ้นด้านบน
|
DOWN
|
วิ่งจากด้านบนลงด้านล่าง
|
LEFT
|
วิ่งจากด้านขวาไปด้านซ้าย
|
RIGHT
|
วิ่งจากด้านซ้ายไปด้านขวา
|
ตัวอย่างโปรแกรม
<HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
<HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
ตัวอย่างโค้ดสี
| #FFFFFF | #FFFFCC | #FFFF99 | #FFFF66 | #FFFF33 | #FFFF00 |
| #FFCCFF | #FFCCCC | #FFCC99 | #FFCC66 | #FFCC33 | #FFCC00 |
| #FF99FF | #FF99CC | #FF9999 | #FF9966 | #FF9933 | #FF9900 |
| #FF66FF | #FF66CC | #FF6699 | #FF6666 | #FF6633 | #FF6600 |
| #FF33FF | #FF33CC | #FF3399 | #FF3366 | #FF3333 | #FF3300 |
| #FF00FF | #FF00CC | #FF0099 | #FF0066 | #FF0033 | #FF0000 |
 | |||||
| #CCFFFF | #CCFFCC | #CCFF99 | #CCFF66 | #CCFF33 | #CCFF00 |
| #CCCCFF | #CCCCCC | #CCCC99 | #CCCC66 | #CCCC33 | #CCCC00 |
| #CC99FF | #CC99CC | #CC9999 | #CC9966 | #CC9933 | #CC9900 |
| #CC66FF | #CC66CC | #CC6699 | #CC6666 | #CC6633 | #CC6600 |
| #CC33FF | #CC33CC | #CC3399 | #CC3366 | #CC3333 | #CC3300 |
| #CC00FF | #CC00CC | #CC0099 | #CC0066 | #CC0033 | #CC0000 |
| |||||
| #99FFFF | #99FFCC | #99FF99 | #99FF66 | #99FF33 | #99FF00 |
| #99CCFF | #99CCCC | #99CC99 | #99CC66 | #99CC33 | #99CC00 |
| #9999FF | #9999CC | #999999 | #999966 | #999933 | #999900 |
| #9966FF | #9966CC | #996699 | #996666 | #996633 | #996600 |
| #9933FF | #9933CC | #993399 | #993366 | #993333 | #993300 |
| #9900FF | #9900CC | #990099 | #990066 | #990033 | #990000 |
| |||||
| #66FFFF | #66FFCC | #66FF99 | #66FF66 | #66FF33 | #66FF00 |
| #66CCFF | #66CCCC | #66CC99 | #66CC66 | #66CC33 | #66CC00 |
| #6699FF | #6699CC | #669999 | #669966 | #669933 | #669900 |
| #6666FF | #6666CC | #666699 | #666666 | #666633 | #666600 |
| #6633FF | #6633CC | #663399 | #663366 | #663333 | #663300 |
| #6600FF | #6600CC | #660099 | #660066 | #660033 | #660000 |
| |||||
| #33FFFF | #33FFCC | #33FF99 | #33FF66 | #33FF33 | #33FF00 |
| #33CCFF | #33CCCC | #33CC99 | #33CC66 | #33CC33 | #33CC00 |
| #3399FF | #3399CC | #339999 | #339966 | #339933 | #339900 |
| #3366FF | #3366CC | #336699 | #336666 | #336633 | #336600 |
| #3333FF | #3333CC | #333399 | #333366 | #333333 | #333300 |
| #3300FF | #3300CC | #330099 | #330066 | #330033 | #330000 |
| |||||
| #00FFFF | #00FFCC | #00FF99 | #00FF66 | #00FF33 | #00FF00 |
| #00CCFF | #00CCCC | #00CC99 | #00CC66 | #00CC33 | #00CC00 |
| #0099FF | #0099CC | #009999 | #009966 | #009933 | #009900 |
| #0066FF | #0066CC | #006699 | #006666 | #006633 | #006600 |
| #0033FF | #0033CC | #003399 | #003366 | #003333 | #003300 |
| #0000FF | #0000CC | #000099 | #000066 | #000033 | #000000 |
| |||||
| #465584 | #EEF2F7 | #3A4F6C | #00D | #434951 | #555 |
| #777 | #DFE6EF | #345487 | #F5F9FD | #3860BB | #BCD0ED |
| #C2CFDF | #F0F5FA | #D1DCEB | #003 | #900 | #CCE9FD |
| #E4EAF2 | #4C77B6 | #DFE6EF | #EEF2F7 | #FAFCFE | #F90 |
ขอบคุณที่มาจาก:http://school.obec.go.th/krurenu/html/p2-8.html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น