Bloggang.com : Jจุ้ย : โค้ดตัวอักษร แบบต่าง ๆ

<*TD> รูปภาพ
<*TD>ตัวหนังสือส่วนที่สอง
<*/TR>
<*/TABLE>

การจัดวางรูปภาพที่อยู่รวมกับข้อความ
บางครั้งคุณต้องการให้มีข้อความบรรยายภาพอยู่ด้วย ไม่ต้องการภาพอย่างเดียว
ซึ่งคุณสามารถจัดวางภาพโดยอ้างอิงตำแหน่งของตัวหนังสือด้วยคำสั่ง
ALIGN="--"ซึ่งจัดได้สามตำแหน่งคือ
"top"(บนสุด), "middle"(ตรงกลาง), หรือ "bottom"(ล่างสุด)
ต้องการแบบใหนตามโค้ดเลยค่ะ
1 <*IMG ALIGN="top" SRC="รูปภาพ"> ข้อความอยู่บนสุด

2 <*IMG ALIGN="middle" SRC="รูปภาพ"> ข้อความอยู่ตรงกลาง

3 <*IMG ALIGN="bottom" SRC="รูปภาพ"> ข้อความอยู่ล่างสุด

คุณจะสังเกตได้ว่า การใช้ "top" "middle" หรือ "bottom"
จะยอมให้มีข้อความได้เพียงบรรทัดนั้นบรรทัดเดียว ส่วนที่เกินมาจะขึ้นบรรทัดใหม่ใต้รูป
ซึ่งวิธีแก้คือ... ให้คุณใช้ การจัดซ้ายและขวาแทน ซึ่งแม้ว่าต้องการให้ภาพอยู่ทางซ้าย
ก็ให้ใช้ ALIGN="left" เพื่อให้ข้อความสามารถอยู่ข้างๆรูปได้ ลองทำดูสินะค่ะ
แต่ถ้าคุณต้องการให้ข้อความหนึ่งบรรทัดอยู่ตรงกลาง(middle)รูป
และให้รูปภาพอยู่ทางขวา(right)ของหน้า จะใช้ ALIGN="--"
สองอันในคำสั่ง IMG ได้ไหม ? ...คำตอบคือ ไม่ได้
แต่คุณสามารถทำได้โดย กำหนดให้ข้อความอยู่ตรงกลางรูปโดยใช้
ALIGN="middle" ในคำสั่ง IMG แล้วจัดทั้งรูปและข้อความ
ให้อยู่ทางขวาด้วยคำสั่ง<*P ALIGN="right"> และปิดท้ายด้วย <*/P>

คำสั่ง <*HR> (ตีเส้น)

คำสั่งกำหนดความกว้าง เข่น
<*HR WIDTH="40%">

เปลี่ยนสีตัวหนังสือทั้งหน้า

คุณสามารถเปลี่ยนสีทั้งหน้าด้วย 4 คำสั่ง ซึ่งแยกตามประเภทตัวหนังสือได้ดังนี้ :
TEXT="######" ใช้เปลี่ยนสีตัวหนังสือธรรมดาทั้งหน้า
LINK="######" ใช้เปลี่ยนสีตัวหนังสือที่เป็น link ทั้งหน้า
ALINK="######" ใช้เปลี่ยนสีตัวหนังสือที่เป็น link หลังจากคลิ๊ก ทั้งหน้า
VLINK="######" ใช้เปลี่ยนสีตัวหนังสือที่เป็น link ที่เคยเข้าแล้วทั้งหน้า
ให้ใช้คำสั่งบางอันหรือ ทั้งหมดนี้ตามความต้องการ
ซึ่งคุณสามารถเปลี่ยนสีพื้นหลังโดยเพิ่มคำสั่ง BGCOLOR เข้าไป ดังตัวอย่างต่อไปนี้ :

สัญลักษณ์ที่ใช้สร้างโค้ดคือตัว < และ > คือ

ที่เขียนแล้งยังเป็นโค้ด ไม่เปลี่ยน
< แทนตัว <
> แทนตัว >

ข้อมูลนำมาจาก ; //www.bloggang.com/mainblog.php?id=keerinoy&month=12-11-2007&group=7&gblog=21

โค้ดตัวอักษร แบบต่าง ๆ

โค้ดตัวหนังสือ เขียนตัวสี-ใหญ่-ขีดเส้น-เอียงได้
By EZ Editor Bow, พฤศจิกายน 11, 2009 5:51 pm
เกี้ยวกับรูปแบบ

ก่อนนำไปใช้ให้ลบ " * " ออกให้หมดนะครับ

<*br> : เว้นบรรทัด

: เว้นวรรค

<*div align=”left”>ข้อความ<*/div> : ข้อความชิดซ้าย
<*div align=”right”>ข้อความ<*/div> : ข้อความชิดขวา

<*div align=”center”>ข้อความ<*/div> : ข้อความอยู่กลาง

<*center>ข้อความ<*/center> : ข้อความอยู่กลาง

————————————————————

เกี้ยวกับสีสันข้อความ

<*b>ข้อความ<*/b> : ตัวหนา

<*strong>ข้อความ<*/strong> : ตัวหนา

<*i>ข้อความ<*/i> : ตัวเอียง

<*em>ข้อความ<*/em> : ตัวเอียง

<*u>ข้อความ<*/u> ขีดเส้นใต้

<*font size=”10″>ข้อความ<*/font> : ขนาดข้อความ

<*font color=”#000000″>ข้อความ<*/font> : สีข้อความ

<*font color=”#000000″ size=”10″>ข้อความ<*/font> : ขนาดและสีข้อความ

ใส่ในช่องเกี่ยวกับฉัน หรือ ความสนใจ ^^

✿ ย่อหน้า,สัญลักษณ์และรูป ✿

ย่อหน้าและสัญลักษณ์

การย่อหน้าให้พิมพ์ สำหรับการย่อหน้า 1 ช่อง
หากต้องการย่อหน้าหลายช่อง ให้พิมพ์ติดกันหลายๆตัว เช่น
จะเว้นได้สองช่อง

ใส่ตัวเลขลำดับ
ถ้าคุณต้องการแสดงเลขลำดับ 1 2 3... มากกว่า
ที่จะเป็นสัญลักษณ์ HTML สามารถทำให้คุณได้เช่นกัน แน่นอนว่า คุณก็สามารถพิมพ์
ตัวเลขเองได้ ถ้าไม่ต้องพิมพ์ตัวเลข ใช้โค้ดนี้ค่ะ
<*OL>
<*LI> ไปใหน
<*LI> เมื่อไร
<*LI> ที่ใหน
<*/OL>

สัญลักษณ์ต่างๆ(จุดดำ)หน้าหัวข้อ ใช้โค้ดนี้ค่ะ
<*UL>
<*LI> ไปใหน
<*LI> เมื่อไร
<*LI> ที่ใหน
<*/UL>

หาก อยากได้สี่เหลี่ยมมากกว่า ใช้โค้ดนี้ค่ะ
<*UL TYPE="square">
<*LI> ไปใหน
<*LI> เมื่อไร
<*LI> ที่ใหน
<*/UL>

อยากได้แบบเลขโรมัน ใช้โค้ดนี้ค่ะ
<*OL TYPE="I">
<*LI> ไปใหน
<*LI> เมื่อไร
<*LI> ที่ใหน
<*/OL>

อยากได้แบบตัวอักษร ABC ใช้โค้ดนี้ค่ะ
<*OL TYPE="A">
<*LI> ไปใหน
<*LI> เมื่อไร
<*LI> ที่ใหน
<*/OL>

ตัวใหญ่ไม่ชอบ อยากได้ตัวเล็ก!!
คุณสามารถเปลี่ยนเลขโรมันและตัวอักษรภาษาอังกฤษ
ให้อยู่ในรูปตัวเล็กโดยการใช้คำสั่งต่อไปนี้

<*OL TYPE="i">
และ
<*OL TYPE="a">

สังเกตได้มั้ย ว่าเพียงเปลี่ยนเป็นไอตัวเล็ก และเอตัวเล็ก

บางทีคุณอาจไม่ต้องการให้เริ่มนับที่เลขหนึ่ง ซึ่งมีวิธีทำง่ายๆ
เพียงเพิ่มคำสั่ง START="เลขเริ่มต้น" ใช้โค้ดนี้ค่ะ

<*OL START="4">
<*LI> ไปใหน
<*LI> เมื่อไร
<*LI> ที่ใหน
<*/OL>

จะรวมหลายๆแบบเข้าด้วยกันได้ไหม ?
แน่นอน ต้อง ตอบได้ แต่อย่าลืมปิดคำสั่งในแต่ละอัน ยกตัวอย่างเช่น
การเรียงเนื้อหาแบบ OL และในแต่ละ LI คุณสามารถเพิ่มการเรียงเนื้อหาแบบ UL
เข้าไปได้ ใช้โค้ดนี้ค่ะ
<*OL>
<*LI>หัวข้อแรก
<*UL>
<*LI>เนื้อหาแรกของหัวข้อแรก
<*LI>เนื้อหาสองของหัวข้อแรก
<*/UL>
<*LI>หัวข้อที่สอง
<*UL>
<*LI>เนื้อหาแรกของหัวข้อที่สอง
<*LI>เนื้อหาสองของหัวข้อที่สอง
<*/UL>
<*/OL>

การปรับรูปแบบตัวอักษร (FONT)

FONT รูปแบบต่างๆ ไม่สามารถทำงานได้ในทุกๆแห่ง...
สิ่งนี้สำคัญมาก คำสั่งปรับรูปแบบตัวอักษรจะได้ผล
ก็ต่อเมื่อ เครื่องของคุณหรือผู้ใช้มีข้อมูลของ FONT
นั้นๆอยู่ ยกตัวอย่างเช่น คุณอยู่ในไทย แต่จะเปิดเว็บของประเทศเกาหลีเหนือ
ซึ่งมี FONT ที่เครื่องของคุณไม่มี เวลาแสดงบนหน้าจอ
ก็จะเป็นภาษาต่างดาว อะไรทำนองนั้น หากคุณจะเปิดอ่านได้ก็ต้องโหลด FONT
มาเข้าเครื่องก่อน ซึ่งทั้งโลกนี้คงมี FONT เป็นหมื่นเป็นแสนแบบ กระจายอยู่ในเครื่องคอมฯทั่วโลก
แล้วจะทำยังไงให้ผู้ใช้ทั่วโลกอ่านตัวอักษรได้แน่ๆ ไม่ผิดเพี้ยนล่ะ !?
ทำได้ คุณต้องจัดการทำตัวหนังสือที่คุณพิมพ์ให้กลายเป็นรูปภาพ
จะด้วยโปรแกรมตกแต่งรูปภาพ หรืออะไรก็ตามที เมื่อคอมฯโหลดรูปขึ้นมา
ตัวอักษรก็จะโผล่ขึ้นมาด้วยไม่ผิดเพี้ยน
แต่คุณคงไม่จำเป็นต้องทำถึงขนาดนั้น เพียงเลือกรูปแบบตัวอักษรที่นิยมใช้กัน
ซึ่ง มีตัวอย่างให้คุณ ด้านล่างนี้...

<*FONT FACE="arial"> FONT แบบ arial <*/FONT>

<*FONT FACE="arial"> FONT แบบ garamond <*/FONT>

<*FONT FACE="arial"> FONT แบบ courier <*/FONT>

<*FONT FACE="cordia new"> FONT แบบ cordia new <*/FONT>

<*FONT FACE="eucrosiaupc"> FONT แบบ eucrosiaupc <*/FONT>

<*FONT FACE="angsana new"> FONT แบบ angsana new <*/FONT>
เป็น FONT ไทยที่ใช้กันมาก

<*FONT FACE="tahoma"> FONT แบบ tahoma <*/FONT>

<*FONT FACE="jasmineupc"> FONT แบบ jasmineupc <*/FONT>

<*FONT FACE="impact"> FONT แบบ impact <*/FONT>

<*FONT FACE="kodchiangupc"> FONT แบบ kodchiangupc <*/FONT>

<*FONT FACE="lilyupc"> FONT แบบ lilyupc <*/FONT>

<*FONT FACE="modern"> FONT แบบ modern <*/FONT>

<*FONT FACE="symbol"> FONT แบบ symbol <*/FONT>
กลายเป็นสัญลักษณ์(symbol)เพี้ยนๆซะแล้ว

<*FONT FACE="wingdings"> FONT แบบ wingdings <*/FONT>
โอ้... อักษรรูปภาพสมัยใหม่รึเปล่า !? คนที่เคยใช้ WORD บ่อยๆ อาจเคยปรับไปเจอ FONT ประหลาดๆแบบนี้

เทคนิคอีกอย่างหนึ่ง
คุณสามารถกำหนดหลายๆ FONT ในคราวเดียวได้ แบบนี้ :
<*FONT FACE="arial, cordia new, angsana new"> ข้อความ
สังเกตว่า FONT สามแบบ ซึ่งคั่นแต่ละแบบออกจากกันด้วยเครื่องหมายลูกน้ำ( , )
คุณจะกำหนดมากกว่านี้ก็ได้ เมื่อคอมฯโหลดหน้าที่กำหนดเช่นนี้ขึ้นมา
Browser จะตรวจสอบว่าในเครื่องคอมฯมี FONT อันแรก(arial)รึเปล่า
หากมี Browser จะใช้ FONT นี้แสดงตัวอักษร แต่หากไม่มี
จะตรวจสอบ FONT ที่สอง(cordia new) หากไม่มีอีก
ก็จะตรวจสอบ FONT ที่สาม(angsana new)
สุดท้ายหากในเครื่องไม่มีเลย ก็คงจะออกมาเป็นภาษาต่างดาว

การจัดวางตัวหนังสือร่วมกับรูปภาพ

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

<*TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3"
WIDTH="70%" STYLE="font-size:14px">
<*TR>
<*TD>ตัวหนังสือส่วนแรก

Create Date : 30 ตุลาคม 2554

Last Update : 1 พฤศจิกายน 2554 10:33:43 น.

0 comments

Counter : 1496 Pageviews.