การแต่งตัวอักษร
1.การกำหนดแบบอักษร
รูปแบบ tag code คือ<font face="รูปแบบตัวอักษร">ข้อความ</font>
code ที่เขียนใน Notepad
ผลที่แสดงได้
Panisara
Earng
2.ขนาดตัวอักษร
รูปแบบ tag code คือ<font size="ตัวเลข">ข้อความ</font>
code ที่เขียนใน Notepad
ผลที่แสดงได้
Panisara
Earng3.สีตัวอักษร
รูปแบบ tag code คือ
<font color="สี/โค้ดสี">ข้อความ</font>
code ที่เขียนใน Notepad
ผลที่แสดงได้
Panisara
Earng
4.ตัวเอียง ตัวหนา ขีดเสีนใต้
รูปแบบคำสั่ง :<B>...ข้อความ..... </B> :คำสั่งตัวหนา
<I>...ข้อความ..... </I> :คำสั่งตัวเอียง<U>...ข้อความ..... </U> :คำสั่งขีดเส้นใต้
ตัวอย่างแสดง
ข้อความตัวหนา
ข้อความตัวไม่หนา
ตัวอย่างแสดง
จะเห็นว่า<B></B>ค่อม"ข้อความตัวหนา" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวหนาเราก็นำแทค B ไปใส่ค่อมไว้นั้นเอง
ทำตัวเอียงด้วยแทค i
<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง </Title>
</Head>
<Body>
<i>ข้อความตัวเอียง</i> ข้อความตัวไม่เอียง
</Body>
</HTML>
ตัวอย่างแสดง
ข้อความตัวเอียง
ข้อความตัวไม่เอียง
จากตัวอย่างจะเห็นว่า<i></i>ค่อม"ข้อความตัวเอียง" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวเอียงเราก็นำแทค i ไปใส่ค่อมไว้นั้นเอง
ทำตัวขีดเส้นใต้ด้วยแทค U
<HTML>
<Head>
<Title> ดูผลลัพท์ตัวอย่าง</Title>
</Head>
<Body>
<U>ข้อความตัวขีดเส้นใต้</U> ข้อความตัวไม่ขีดเส้นใต้
</Body>
</HTML>
ตัวอย่างแสดง
ข้อความตัวขีดเส้นใต้
ข้อความตัวไม่ขีดเส้นใต้
จากตัวอย่างจะเห็นว่า<U></U>ค่อม"ข้อความตัวขีดเส้นใต้" อยู่ นั้นคือหากเราให้ข้อความใดมีตัวขีดเส้นใต้เราก็นำแทค U ไปใส่ค่อมไว้นั้นเอง
5.ตัวขีดฆ่า ตัวยก ตัวห้อย
รูปแบบ tag code คือ
ตัวขีดฆ่า<del> ข้อความที่ต้องการขีดฆ่า </del>
ตัวยก <sup> ข้อความหรือตัวเลข<sup>ข้อความหรือตัวเลขที่ต้องการยก</sup>
ตัวห้อย <sub> ตัวอักษร,ตัวเลข,ข้อความ<sub>ตัวอักษร,ตัวเลขที่ต้องการห้อย</sub>
ตัวอักษรวิ่ง ตัวอักษรกระพริบ
รูปแบบ tag code คือ
<BLINK></BLINK>
code ที่เขียนใน Notepad
<HTML>
<HEAD>
<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>
ผลที่แสดง
6.ตัวอักษรวิ่่ง
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจนำไปใช้ในการตกแต่งเวบเพจ
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์
นำไปใช้ในการตกแต่งเวบเพจนำไปใช้ในการตกแต่งเวบเพจ
รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง
ทิศทาง
|
คำอธิบาย
|
UP
|
วิ่งจากด้านล่างขึ้นด้านบน
|
DOWN
|
วิ่งจากด้านบนลงด้านล่าง
|
LEFT
|
วิ่งจากด้านขวาไปด้านซ้าย
|
RIGHT
|
วิ่งจากด้านซ้ายไปด้านขวา
|
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>
ผลที่แสดงได้
7.การจัดตำแหน่งข้อความ
ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ
1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
<p align = "ตำแหน่ง"> ...ข้อความ...</p>
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
<p align = "ตำแหน่ง"> ...ข้อความ...</p>
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right
| รูปแบบการจัดตำแหน่งข้อความ |
<html> <head><title> <head><title> <head><title> <head><title> <head><title> ....การจัดตำแหน่งข้อความ....</title></head> <body> <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br> <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br> <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br> <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br> </body> <body> <center><font size = "2"> ข้อความนี้อยู่กึ่งกลาง</font></center><br> <p align = "left"><font size = "2"> ข้อความชิดซ้าย </font></p><br> <p align = "center"><font size = "2"> ข้อความนี้อยู่กึ่งกลาง </font></p><br> <p align = "right"><font size = "2"> ข้อความนี้ชิดขวา </font></p><br> </body> |
ที่มา
วันที่ี 25 กรกฎาคม 2555
