BASIC CODEโค้ดที่ควรรู้ โค้ดรูปภาพ โค้ดตัวอักษรและอื่นๆ

 

Code link พื้นฐาน

 

การ link ไปยัง URL หรือเว็บไซต์บนอินเตอร์เน็ท
มีรูปแบบการใช้คำสั่งดังนี้
<A HREF="ชื่อ URL ที่ต้องการจะไป">ข้อความหรือรูปภาพที่ใช้เป็นตัว Link </A>

ตัวอย่าง การทำลิ้งค์โดยข้อความ
<A HREF="http://www.zalim-code.com">เข้าสู่เว็บซาหลิ่มโค๊ดคลิกที่นี้ค่ะี่</A>
ผลที่ได้ เข้าสู่เว็บซาหลิ่มโค๊ด คลิกที่นี่

ตัวอย่าง การทำลิ้งค์โดยรูปภาพ
<A HREF="http://www.zalim-code.com"><img src="URL รูปภาพ "></A>
ผลที่ได้
การ link ไปยัง File อื่น
สน http://www.zalim-code.com
แต่ถ้า link ไปยังเอกสารที่อยู่ภายในระบบของเราเอง ให้ทำได้รูปแบบดังนี้
อยู่ใน Directory เดียวกัน ให้ใส่เฉพาะชื่อ file เช่น Abouts.Html
อยู่ใน Subdirectory ของ Directory ปัจจุบัน เช่น ถ้าปัจจุบันอยู่ที่ nilenile/myhtml/basic.htm และต้องการ link ไปที่ nilenile/myhtml/image/linking.htm ให้กำหนดเป็น <A HREF="linking.htm">
อยู่ใน Directory ที่สูงกว่า Directory ปัจจุบัน เช่น ปัจจุบันอยู่ที่ nilenile/myhtml/image ต้องการ link ไปที่ tetra.htm ซึ่งอยู่ที่ Root Directory ให้กำหนดเป็น <a HREF="../../tetra.htm">
การ link ไปยังส่วนอื่นของเอกสารที่อยู่ในหน้าเดียวกัน
  บางครั้งเราอาจต้องการ link ไปยังตำแหน่งอื่น ๆ แต่ยังคงอยู่ในเอกสารเดียวกัน ให้กำหนด label หรือชื่อให้กับตำแหน่งที่ต้องการจะ link ไปโดยนำตัวเลือก name มาใช้ร่วมกับคำสั่ง <A>
การ link ไปยังส่วนใด ๆ ในเอกสารอื่น
  ถ้าเป็นการ link ภายในเอกสารเดียวกัน ก็เพียงแต่ระบุชื่อ ของส่วนนั้นลงไป แต่ถ้าเป็นเอกสารอื่น เราจะต้องระบุชื่อเอกสารลงไปด้วยพร้อมทั้งอย่าลืมตั้งชื่อ label ให้กับส่วนของเอกสารนั้น ๆ ด้วย
การ link ไปยัง E-Mail
  สามารถ link ไปใช้ E-Mail ได้โดยใช้คำว่า mailto เพิ่มลงไปใน URL เช่น ต้องการ link ไปยัง webmaster@zalim-code.comให้กำหนดดังนี้

<A HREF ="mailto:webmaster@zalim-code.com">Contact by E-Mail</A>

 

ดูโค้ดเกี่ยวกับลูกเล่นลิงค์เจ๋งๆ ทั้งหมด คลิ๊ก

 

Code แทรกรูปภาพ

1.โค้ดแทรกรูปภาพ
<img src="ใส่ลิ้งค์รูปที่นี่">

2.โค้ดแทรกรูปภาพ โดยที่ภาพนั้นเป็นลิงค์ด้วย
<a href="Url ลิงค์" target="_blank"><img src="url ภาพ" border="0" alt="คำโฆษณาเว็บ" /></a>

3.กำหนดขนาดของรูปภาพได้จะให้ใหญ่หรือเล็กโดยแก้ไขตรงส่วน height และ width

<img src="ชื่อภาพ" height=XX width=XX>

 

 

Code จัดตำแหน่งรูปภาพ
คำสั่งในการจัดตำแหน่งรูปภาพคล้ายกับการจัดตำแหน่งข้อความ ดังนี้
ตัวอย่าง 1. การจัดชิดซ้าย :
<img src="http://www.mamuangjung.com/forum/attachments/month_1410/1410111308e5816d087af44e39.png="left">
 
ตัวอย่าง 2. การจัดกลางหน้า
<center><img src="http://www.mamuangjung.com/forum/attachments/month_1410/1410111308e5816d087af44e39.png"></center>
 
ตัวอย่าง 2. การจัดชิดขวา
<img src="http://www.mamuangjung.com/forum/attachments/month_1410/1410111308e5816d087af44e39.png"align="right">

 

ตัวอย่างที่3 การทำภาพ สองภาพติดกัน

<pre> <img src="http://YOUR PICTURE URL"><img src="http://YOUR PICTURE URL"> </pre>

arrow arrow

 

ตัวอย่างที่4 การทำภาพสองภาพอยู่คนละบรรทัดกัน

<center><img src="http://YOUR PICTURE URL"><br><br>
<img src="http://YOUR OTHER PICTURE URL"></center>
                              

arrow

arrow

 

โค้ด marquee ลูกเล่น การทำภาพมีการเคลื่อนไหวแบบต่างๆ

These only works in Internet Explorer Color & size of text can be changed to meet your needs.
<marquee>MARQUEE</marquee>
MARQUEE
<marquee direction=right>MARQUEE</marquee>
MARQUEE
<marquee behavior=alternate>MARQUEE</marquee>
MARQUEE
<center><marquee behavior=alternate width=50%> MARQUEE</marquee></center>
MARQUEE
<marquee direction=up height=50>MARQUEE</marquee>
MARQUEE
<marquee direction=down height=50>MARQUEE</marquee>
MARQUEE
<marquee direction=down height=50 behavior=alternate>MARQUEE</marquee>
MARQUEE
Replace your text with a picture URL
<marquee><img src=http://Your picture URL></marquee> picture
<marquee direction=up height=50 behavior=alternate><img src=http://Your picture URL></marquee> picture
<marquee direction=right width=40%><img src=http://Your picture URL></marquee> <marquee width=40%><img src=http://Your picture URL></marquee>
picture picture

 

โค้ด marquee ลูกเล่น การทำตัวหนังสือเคลื่อนไหว

ซาหลิ่มโค้ด
www.zalim-code.com

&ltmarquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"&gt&ltcenter&gtข้อความที่ต้องการ&ltbr&gtข้อความที่ต้องการ&lt/center&gt&lt/marquee&gt

www.zalim-code.com
&ltmarquee behavior="alternate"&gt&ltmarquee width="150"&gtข้อความที่ต้องการ&lt/marquee&gt&lt/marquee&gt

4 | | | www.zalim-code.com | | | 3
&ltMARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"&gt&ltfont face=Webdings&gt4&lt/font&gt&lt/MARQUEE&gt&ltMARQUEE scrollAmount=1 direction=left width="2%"&gt| | |&lt/MARQUEE&gtข้อความที่ต้องการ&ltMARQUEE scrollAmount=1 direction=right width="2%"&gt| | |&lt/MARQUEE&gt&ltMARQUEE behavior=alternate direction=right scrollAmount=3 width="4%"&gt&ltfont face=Webdings&gt3&lt/font&gt&lt/MARQUEE&gt


3 | | | www.zalim-code.com | | | 4

&ltMARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"&gt&ltfont face=Webdings&gt3&lt/font&gt&lt/MARQUEE&gt&ltMARQUEE scrollAmount=1 direction=left width="2%"&gt| | |&lt/MARQUEE&gtข้อความที่ต้องการ&ltMARQUEE scrollAmount=1 direction=right width="2%"&gt| | |&lt/MARQUEE&gt&ltMARQUEE behavior=alternate direction=right scrollAmount=3 width="4%"&gt&ltfont face=Webdings&gt4&lt/font&gt&lt/MARQUEE&gt


>> www.zalim-code.com <<
&ltmarquee behavior="alternate" width="10%"&gt&gt&gt&lt/marquee&gtข้อความที่ต้องการ&ltmarquee behavior="alternate" width="10%"&gt&lt&lt&lt/marquee&gt

<<<< www.zalim-code.com >>>>
&ltmarquee scrollAmount="3" width="10%"&gt&lt&lt&lt&lt&lt/marquee&gtข้อความที่ต้องการ&ltmarquee direction="right" scrollAmount="3" width="10%"&gt&gt&gt&gt&gt&lt/marquee&gt

www.zalim-code.com
&ltmarquee behavior="alternate" direction="up" width="80%"&gt&ltmarquee direction="right"&gtข้อความที่ต้องการ&lt/marquee&gt&lt/marquee&gt

www.zalim-code.com

&ltmarquee behavior="alternate" direction="up" width="80%"&gt&ltmarquee direction="right" behavior="alternate"&gtข้อความที่ต้องการ&lt/marquee&gt&lt/marquee&gt

www.zalim-code.com
&ltmarquee style="border:BLUE 2px SOLID"&gtข้อความที่ต้องการ&lt/marquee&gt

www.zalim-code.com
&ltmarquee style="border:#FF0033 2px SOLID"&gtข้อความที่ต้องการ&lt/marquee&gt


www.zalim-code.com
<font color="#FFFFFF"><marquee direction="left" style="background:#FF0000">ข้อความที่ต้องการ</marquee></font>


www.zalim-code.com


www.zalim-code.com
<marquee direction="up">ข้อความที่ต้องการ</marquee>


<marquee direction="down">ข้อความที่ต้องการ</marquee>




www.zalim-code.com
<marquee direction="up" behavior="alternate">ข้อความที่ต้องการ</marquee>


www.zalim-code.com
<marquee behavior="alternate">ข้อความที่ต้องการ</marquee>


www.zalim-code.com
<marquee direction="right">ข้อความที่ต้องการ</marquee>


www.zalim-code.com
<marquee>ข้อความที่ต้องการ</marquee>



 

 

ดูลูกเล่น ภาพและตัวอักษร ทั้งหมด CLICK !!

 

 

Code การใส่ภาพ Backgound
1.ใส่ bg แบบ tile

<style>body{background-image:url(XXX);}</style>





2.ใส่ bg แบบ fixed ไม่ให้ bg เลื่อนลงตาม scroll bar

<style>body{background-attachment: fixed;background-image:url(XXX);}</style>





3.ใส่ bg เป็นรูปภาพเดียวทั้งหน้า

<style>Body{background-image:url(http:XXX);background-position: center (bottom left..etc..);background-repeat: no-repeat;background-attachment: fixed;background-color:color code;}</style>





4.ใส่ bg โดยใช้สี

<style>body{background:color code}></style>





5. ใส่ bg โดยไล่เฉดสี (gradient)

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='color code 1', startColorstr='color code 2', gradienttype=0);">


gradienttype 0 ไล่สีตามแนวนอน
gradienttype 1 ไล่สีตามแนวตั้ง


หารูปภาพสวยๆทำblackgound ได้ที่นี้ คลิ๊ก!

 



Code ตัวอักษร

1.การกำหนดรูปแบบตัวอักษร

<b> ข้อความที่ต้องการ </b> เพื่อทำให้ตัวหนังสือเป็นตัวหนา
<i> ข้อความที่ต้องการ </i> เพื่อทำให้ตัวหนังสือเป็น ตัวเอียง
<u> ข้อความที่ต้องการ </u> เพื่อ ขีดเส้นใต้ ให้กับตัวหนังสื
<s> ข้อความที่ต้องการ </s>เพื่อ ตัวอักษรที่มีเส้นขวางพาดทับ

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

ขนาดของตัวอักษรในภาษา html จะมีอยู่ด้วยกัน 7 ขนาดด้วยกัน โดยรูปแบบคำสั่งจะมีรูปแบบดังนี้
<font size=n>ข้อความ</font>
<font size=1>ข้อความ size=1</font>
<font size=2>ข้อความ size=2</font>
<font size=3>ข้อความ size=3</font>
<font size=4>ข้อความ size=4</font>
<font size=5>ข้อความ size=5</font>
<font size=6>ข้อความ size=6</font>
<font size=7>ข้อความ size=7</font>

โดยที่ n จะแทนจำนวนเต็มตั้งแต่ 1-7 ตัวอักษรขนาดปกติ จะใช้ n=3   และขนาด 1 จะเล็กสุดไล่ไปจนถึงขนาด 7 จะใหญ่สุด

3.กำหนดรูปแบบตัวอักษร

<font face="AngsanaUPC">ข้อความที่ต้องการ</font>


สามารถดาวโหลดฟอนต์ที่ต้องการได้ ที่นี้ คลิ๊ก

4.กำหนดสีให้ตัวอักษร

การกำหนดสีของ font (Font Color) ถ้าเราไม่มีการกำหนดสีของ font ภายในเอกสาร html ของเรา เมื่อนำไปเปิดในโปรแกรม บราวเซอร์ font ในเอกสารเราจะเป็น font ตามที่ browser นั้น ๆ ได้ตั้งค่าไว้ เช่น สีดำ ฯลฯ แต่ถ้าเราต้องการที่จะให้โปรแกรม browser แสดง font ตามที่เราต้องการ เราต้องมีการกำหนด font ในภาษา html ของเรา โดยมีรูปแบบดังนี้

แบบที่ 1 ใส่ชื่อสีเข้าไปโดยตรง
     <font color="blue"
>ข้อความที่ต้องการให้เป็นสีน้ำเงิน</font >
     <
font color="green">ข้อความที่ต้องการให้เป็นสีเขียว
</font >
     <
font color="red"
>ข้อความที่ต้องการให้เป็นสีแดง</font >

แบบที่ 2 ใส่ตัวเลขฐาน 16 แทนสีที่ต้องการ(ซึ่งจะได้สีมากกว่าใส่ชื่อสีลงธรรมดา)

     <
font color="#0000ff">สีFont</font >
     <
font color="#00ff00">สีFont</font >
     <
font color="#ff0000">สีFont</font >

[ ดูรหัสสีต่างๆ คลิกที่นี่ ]

ตัวอย่างการรวมคำสั่งทั้งขนาดตัวอักษร แบบตัวอักษร และสีตัวอักษรไว้ใน คำสั่งเดียวกัน

 

Hi! เพื่อนๆซาหลิ่มโค๊ด

 

<b><font color="blue" face="AngsanaUPC" size="7"> สวัสดีชาวซาหลิ่มโค๊ด</font></b>

ดูโค้ดTEXT ลูกเล่นต่างๆได้ ที่นี้ค่ะคลิ๊ก!