Easyhome 2010
IsanGate.net
Review Programs Navigation Bar

当広告について : Sponsor Links
blWait to Order

 
Step by Step
Getting Organized!
HTML Editors
FTP to your site
Search Engine
HTML (TAG)
RGB to HEX Color
CGI Forms
Frames Tutorial
JavaScript
HTML Q&A

 

 
 
ADS 250x250
Step by Step to build your homepage.

Go! HTML Questions & Answers

  • ทำอย่างไรไม่ให้มีเส้นขอบรอบรูปโดยเฉพาะเมื่อทำเป็นจุดเชื่อมโยง (link) ?
    • ไม่ยากนี่ครับ เพียงแต่เพิ่มคำสั่ง BORDER=0 เข้าไปในคำสั่ง <IMG SRC="picture.gif" border=0>
       
  • เห็นบางเว็บไซต์เขามีภาพเคลื่อนไหวเปลี่ยนไปมาสลับกันได้ ทำยังไงนะ?
    • มีทางออกอยู่ 2 ทาง คือ
      1. ใช้ภาพเคลื่อนไหว Animation gif มาแทนที่ภาพนิ่งธรรมดา (ไปดูรายละเอียดการทำภาพเคลื่อนไหวคลิกที่นี่)
      2. ใช้คำสั่งภาษาจาวาเข้าช่วย คลิกตรงนี้ดูโค๊ด แล้วเอาไปเปลี่ยนเป็นภาพคุณ
         
  • อยากเปลี่ยนสีของจุดเชื่อมโยงให้เป็นสีที่เหมาะสมกับพื้นหลังแบบไม่มีขีดเส้นใต้ ทำอย่างไร?
    • คุณสามารถกำหนดสีโดยรวมของการเชื่อมโยงไว้ในส่วนของ BODY โดยการเพิ่ม LINK= ตามด้วยชื่อหรือรหัสค่าสีที่ต้องการแสดงจุดเชื่อมโยง และ VLINK= ตามด้วยชื่อหรือรหัสค่าสีของจุดเชื่อมโยงที่คลิกไปดูมาแล้ว ตรงไหนไม่อยากให้มีขีดเส้นใต้ก็เอา text-decoration: none ไปไว้หลังคำสั่งเชื่อมโยง เช่น
      <a href="index.html" text-decoration: none>Home</a>
    • วิธีที่สองคุณเล่นกับ Style Sheet เลยอย่างเว็บผมนี่ก็ง่ายดีเหมือนกันครับ ไปเปลี่ยนสีเอาเองนะ คำสั่งนี้จะอยู่ในส่วน HEAD ครับ
      <style type="text/css">
      <!--
      body { margin: 0px 0px; padding: 0px 0px}
      a:link { color: #00FFFF; text-decoration: none}
      a:visited { color: #ff99ff; text-decoration: none}
      a:active { color: #0099FF; text-decoration: underline}
      a:hover { color: #0099FF; text-decoration: underline}
      TextArea {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";
            font-style : normal; line-height: 14pt}
      td {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";
          font-style : normal; line-height: 16pt}
      -->
      </style>

      จากคำสั่งนี้ขออธิบายคร่าวๆ นะครับ
      body เป็นการกำหนดขอบเขตของเพจในที่นี้ผมสั่งให้ห่างจากขอบจอเป็นศูนย์ทุกด้าน
      a:link คือสีของจุดเชื่อมโยง ไม่ต้องมีขีดเส้นใต้
      a:visited คือจุดเชื่อมโยงที่คลิกไปดูแล้วเปลี่ยนสีและไม่มีขีดเส้นใต้
      a:active, a:hover ทั้งสองตัวเหมือนกันคือเมื่อนำเมาท์ไปวางเหนือจุดเชื่อมโยงให้เปลี่ยนสีและมีขีดเส้นใต้
      TextArea กำหนดรูปแบบและขนาดของฟอนต์ที่อยู่ในช่องกรอกข้อความให้เป็นขนาดที่กำหนดนี้
      td กำหนดรูปแบบของฟอนต์และขนาดที่แสดงผลในตารางทั้งหมด ยกเว้นที่มีกำกับไว้เป็นอย่างอื่น
  • อยากทำหน้าต่าง PopUp เล็กๆ ขึ้นมาเมื่อผู้ชมคลิกที่จุดเชื่อมโยง ทำอย่างไรครับ ?
    • ทำได้ง่ายๆ โดยอาศัยคำสั่ง JavaScript เข้าช่วยครับดังนี้
      <script LANGUAGE="JavaScript">
          <!--
          function showMenu(){
          window.open('popup1.htm', 'MENU', 'height=200,width=450');
          }
          //--> 
      </script>
      ใส่คำสั่งนี้ใต้คำสั่ง <BODY> ครับ ต่อไปก็เป็นการทำจุดเชื่อมโยงสำหรับให้ผู้ชมคลิกครับ ตามคำสั่งข้างล่าง
      <a href="#" onclick="showMenu();"><b>คลิกที่นี่ดูผลของคำสั่งนี้</b></a>
      คุณอาจใช้รูปภาพแทนข้อความได้ครับ ลองคลิกที่ปุ่มข้างล่างซิครับคุณจะได้เห็นตัวอย่างหน้าต่าง Popup ที่ใช้คำสั่งนี้
      คลิกซิจ๊ะ

       
  • แล้วถ้าผมอยากให้หน้าต่างใหม่ที่เปิดขึ้นมามีปุ่มให้ผู้ชมคลิกปิดหน้าต่างนั้น ต้องใช้คำสั่งอะไรครับ ?
    • คำสั่งที่ใช้คล้ายๆ กับการคลิกเพื่อเปิดเมนูครับ เราเรียกว่า การใช้คำสั่งสถานการณ์ของวินโดว์ง่ายๆ ดังนี้
      <input TYPE="BUTTON" NAME="Close" VALUE="ปิดหน้านี้" onclick="window.close( )">
    • คำสั่งนี้มีแสดงในหน้าต่าง Popup แล้วครับ ลองคลิกที่ปุ่มข้างบนดูแล้วกัน

            ยังมีอีกนะครับจะทยอยลงให้เพิ่มเติมตามคำถามที่มีเข้ามาตามลำดับไป หมั่นเข้ามาเยี่ยมบ่อยๆ เพราะเนื้อหาจะทยอยลงลึกไปเรื่อยๆ โปรดติดตามกันต่อไปครับ

 

BACK Step by Step Next

 

red line
Home | What's new? | Basic HTML | Reviews Programs | Tip&Tricks | Download | Site Map
red line

 

 

Home Basic HTML Review Software More Tip & Tricks Download Software Site Map Learning Step by Step to build your home by Easyhome in Thailand/title> <meta name="description" content="EasyHome is a complete webpage to learn about building homepage by using the basic tool & HTML." /> <meta name="Keywords" content="opensource, linux, ubuntu, kde, gnome, open, office, คอมพิวเตอร์, เว็บเพจ, เว็บไซต์, โปรแกรม, ซอฟท์แวร์, ดาวน์โหลด, easyhome, homepage, webpage, design, html, build homepage, tip, tricks, technic, technique, tool, shareware, freeware, humnoi, thai, ubon, ubonratchathani, isan, sa-on." /> <meta name="Author" content="Montree Kotkanta - webmaster@easyhome.in.th" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index,follow" /> <link href="../easystyle2.css" rel=stylesheet type=text/css /> </head> <body bgcolor="#000000" text="#CCCCCC" link="#66FFFF" vlink="#FF99FF" alink="#66FF66" > <table id="new_design_2010" width="1000" height="160" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="2" rowspan="2"><img src="../header/top_header.jpg" width="510" height="121" alt="Easyhome 2010"></td> <td><img src="../header/header_03.jpg" width="470" height="60" border="0"></td> <td><img src="../header/header_04.jpg" width="20" height="60" border="0"></td> </tr> <tr> <td><a href="http://www.isangate.net" target="_blank"><img src="../ads_banner/isangate_net_02.gif" alt="IsanGate.net" width="468" height="60" border="0"></a></td> <td><img src="../header/header_08.jpg" width="20" height="61" border="0"></td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td><img src="../header/review.jpg" width="440" height="39" alt="Review Programs"></td> <td colspan="2"><img src="../header/navbar.jpg" alt="Navigation Bar" width="560" height="39" border="0" usemap="#Map"></td> <td><img src="../header/header_12.jpg" width="20" height="39" border="0"></td> </tr> </table> </td> </tr> <tr> <td> <hr width="1000" color="#008080" size="2" /> </td> </tr> </table> <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000" > <tr> <td> <table width="100%"> <tr> <td align="center" width="270" valign="top"> <table width="268" border="0" cellpadding="1" cellspacing="0" bgcolor="#999999" align="center"> <tr><td align="center"><font color="#ffffff"><b>当広告について : Sponsor Links</b></font></td></tr> <tr><td> <table width="100%" cellpadding="3" cellspacing="0" border="0" bgcolor="#000000"> <tr> <td> <!-- 16 April 2011 --> <img src="../images1/bullet3.gif" alt="bl" width="9" height="9" hspace="5" vspace="5" border="0" align="absmiddle">Wait to Order<br> </td></tr> </table> </td></tr> </table><br /> <br /> <table width="268" border="0" cellpadding="1" cellspacing="0" align="center" bgcolor="#CCCCCC"> <tr><td align="center"><font color="#000000"><b>Step by Step</b></font></td></tr> <tr><td> <table width="100%" cellpadding="3" cellspacing="0" border="0" bgcolor="#000000"> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_organ.html"><b>Getting Organized!</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_html.html"><b>HTML Editors</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_ftp.html"><b>FTP to your site</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_sub.html"><b>Search Engine</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_tags.html"><b>HTML (TAG)</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_rgb1.html"><b>RGB to HEX Color</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_cgi.html"><b>CGI Forms</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_frames.html"><b>Frames Tutorial</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_java.html"><b>JavaScript</b></a></td> </tr> <tr> <td><img src="../images1/bullet1.gif" width="8" height="8" border="0" hspace="5" align="absmiddle" vspace="8" /><a href="ht_qa.html"><b>HTML Q&A</b></a></td> </tr> </table> </td></tr></table> <p> </p> <!-- Silkspan Ads ประกันภัย --> <div align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="250" height="250" id=ShockwaveFlash1><param name=movie value="http://www2.silkspan.com/banner/partner_ins/banner250x250_ins/banner250x250.swf?partner=easyhome"><param name=quality value=high><embed src="http://www2.silkspan.com/banner/partner_ins/banner250x250_ins/banner250x250.swf?partner=easyhome" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="250" height="250"></embed></object></div> <table width="100%" border="0" height="200"> <tr><td> </td></tr> </table> <div align="center"> <a href="../advertise.htm"><img src="../ads_banner/banner_ads_250x250.gif" alt="ADS 250x250" width="250" height="250" border="0"></a></div> </td> <td width="730" valign="top"> <div align="center"> <img src="../images4/step_by_step.gif" alt="Step by Step to build your homepage." width="474" height="75" border="0"> </div> <p><img src="../images3/rarrow.gif" width="52" height="40" hspace="5" border="0" align="absmiddle" alt="Go!"> <font color="#2EDDB3" class="bArial"><b>HTML Questions & Answers</b></font></p> <ul type="disc"> <li><font color="#2EDDB3">ทำอย่างไรไม่ให้มีเส้นขอบรอบรูปโดยเฉพาะเมื่อทำเป็นจุดเชื่อมโยง (link) ?</font> <ul type="square"> <li>ไม่ยากนี่ครับ เพียงแต่เพิ่มคำสั่ง <font color="#2EDDB3" >BORDER=0</font> เข้าไปในคำสั่ง <IMG SRC="picture.gif" <font color="#FFFF00">border=0</font>> <br> </li> </ul> <li><font color="#2EDDB3">เห็นบางเว็บไซต์เขามีภาพเคลื่อนไหวเปลี่ยนไปมาสลับกันได้ ทำยังไงนะ?</font></li> <ul type="square"> <li>มีทางออกอยู่ 2 ทาง คือ</li> <ol> <li> ใช้ภาพเคลื่อนไหว <b>Animation gif</b> มาแทนที่ภาพนิ่งธรรมดา (ไปดูรายละเอียดการทำภาพเคลื่อนไหว<a href="../review/gifanimat.htm">คลิกที่นี่</a>)</li> <li>ใช้คำสั่งภาษาจาวาเข้าช่วย <a href="random_img.html" target="_blank">คลิกตรงนี้ดูโค๊ด</a> แล้วเอาไปเปลี่ยนเป็นภาพคุณ <br> </li> </ol> </ul> <li><font color="#2EDDB3">อยากเปลี่ยนสีของจุดเชื่อมโยงให้เป็นสีที่เหมาะสมกับพื้นหลังแบบไม่มีขีดเส้นใต้ ทำอย่างไร?</font></li> <ul type="square"> <li>คุณสามารถกำหนดสีโดยรวมของการเชื่อมโยงไว้ในส่วนของ <font color="#2EDDB3" >BODY</font> โดยการเพิ่ม <font color="#2EDDB3" >LINK=</font> ตามด้วยชื่อหรือรหัสค่าสีที่ต้องการแสดงจุดเชื่อมโยง และ <font color="#2EDDB3" >VLINK=</font> ตามด้วยชื่อหรือรหัสค่าสีของจุดเชื่อมโยงที่คลิกไปดูมาแล้ว ตรงไหนไม่อยากให้มีขีดเส้นใต้ก็เอา <b>text-decoration: none</b> ไปไว้หลังคำสั่งเชื่อมโยง เช่น<br> <a href="index.html" <font color="#FFFF00">text-decoration: none</font>>Home</a></li> <li>วิธีที่สองคุณเล่นกับ Style Sheet เลยอย่างเว็บผมนี่ก็ง่ายดีเหมือนกันครับ ไปเปลี่ยนสีเอาเองนะ คำสั่งนี้จะอยู่ในส่วน <b>HEAD</b> ครับ<br> <font color="#FFFF00"><style type="text/css"><br> <!--<br> body { margin: 0px 0px; padding: 0px 0px}<br> a:link { color: #00FFFF; text-decoration: none}<br> a:visited { color: #ff99ff; text-decoration: none}<br> a:active { color: #0099FF; text-decoration: underline}<br> a:hover { color: #0099FF; text-decoration: underline}<br> TextArea {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";<br>       font-style : normal; line-height: 14pt}<br> td {font-size : 10pt; font-family : "MS Sans Serif", Tahoma, "MS Sans Serif";<br>     font-style : normal; line-height: 16pt}<br> --><br> </style></font><br> จากคำสั่งนี้ขออธิบายคร่าวๆ นะครับ <br> <b>body</b> เป็นการกำหนดขอบเขตของเพจในที่นี้ผมสั่งให้ห่างจากขอบจอเป็นศูนย์ทุกด้าน<br> <b>a:link</b> คือสีของจุดเชื่อมโยง ไม่ต้องมีขีดเส้นใต้<br> <b>a:visited</b> คือจุดเชื่อมโยงที่คลิกไปดูแล้วเปลี่ยนสีและไม่มีขีดเส้นใต้<br> <b>a:active, a:hover</b> ทั้งสองตัวเหมือนกันคือเมื่อนำเมาท์ไปวางเหนือจุดเชื่อมโยงให้เปลี่ยนสีและมีขีดเส้นใต้<br> <b>TextArea</b> กำหนดรูปแบบและขนาดของฟอนต์ที่อยู่ในช่องกรอกข้อความให้เป็นขนาดที่กำหนดนี้<br> <b>td</b> กำหนดรูปแบบของฟอนต์และขนาดที่แสดงผลในตารางทั้งหมด ยกเว้นที่มีกำกับไว้เป็นอย่างอื่น</li> </ul> <li><font color="#2EDDB3">อยากทำหน้าต่าง <b>PopUp</b> เล็กๆ ขึ้นมาเมื่อผู้ชมคลิกที่จุดเชื่อมโยง ทำอย่างไรครับ ?</font> <ul type="square"> <li>ทำได้ง่ายๆ โดยอาศัยคำสั่ง <b>JavaScript</b> เข้าช่วยครับดังนี้<br> <font color="#FFFF00"><script LANGUAGE="JavaScript"><br>     <!-- <br>     function showMenu(){<br>     window.open('popup1.htm', 'MENU', 'height=200,width=450');<br>     }<br>     //--> <br> </script><br></font> ใส่คำสั่งนี้ใต้คำสั่ง <b><BODY></b> ครับ ต่อไปก็เป็นการทำจุดเชื่อมโยงสำหรับให้ผู้ชมคลิกครับ ตามคำสั่งข้างล่าง<br> <font color="#FFFF00"> <a href="#" onclick="showMenu();"><b><font color="#FFFFFF">คลิกที่นี่ดูผลของคำสั่งนี้</font></b></a></font><br> คุณอาจใช้รูปภาพแทนข้อความได้ครับ ลองคลิกที่ปุ่มข้างล่างซิครับคุณจะได้เห็นตัวอย่างหน้าต่าง <b>Popup</b> ที่ใช้คำสั่งนี้ <div align="center"><a href="#" onClick="showMenu();"><img src="../images1/click01.gif" width="100" height="50" border="0" alt="คลิกซิจ๊ะ"></a></div> <br> </li> </ul> <li><font color="#2EDDB3">แล้วถ้าผมอยากให้หน้าต่างใหม่ที่เปิดขึ้นมามีปุ่มให้ผู้ชมคลิกปิดหน้าต่างนั้น ต้องใช้คำสั่งอะไรครับ ?</font> <ul type="square"> <li>คำสั่งที่ใช้คล้ายๆ กับการคลิกเพื่อเปิดเมนูครับ เราเรียกว่า การใช้คำสั่งสถานการณ์ของวินโดว์ง่ายๆ ดังนี้<br> <font color="#FFFF00"><input TYPE="BUTTON" NAME="Close" VALUE="ปิดหน้านี้" onclick="window.close( )"></font></li> <li>คำสั่งนี้มีแสดงในหน้าต่าง <b>Popup</b> แล้วครับ ลองคลิกที่ปุ่มข้างบนดูแล้วกัน</li> </ul> </ul> <p>             <b><font class="h3">ยั</font></b>งมีอีกนะครับจะทยอยลงให้เพิ่มเติมตามคำถามที่มีเข้ามาตามลำดับไป หมั่นเข้ามาเยี่ยมบ่อยๆ เพราะเนื้อหาจะทยอยลงลึกไปเรื่อยๆ โปรดติดตามกันต่อไปครับ </p> <p> </p> <p align="center"> <a href="ht_java.html"><img src="../images1/backbut.gif" width="79" height="17" border="0" alt="BACK" align="absmiddle"></a> <a href="start_here.html"><img src="../images1/butline.gif" width="399" height="26" border="0" alt="Step by Step" align="absmiddle"></a> <img src="../images2/nextbut.gif" width="74" height="17" border="0" alt="Next" align="absmiddle"> </p><p> </p> </td> </tr> </table> <!-- Bottom Page --> <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000" > <tr> <td align="right" width="350"> <img hspace=10 src="../images3/update.gif" /> </td> <td align="center"> <font color="#FFFFFF" class="h1"><strong> <script language="JavaScript"> <!-- document.write("Last Updated : "+document.lastModified) //--> </script> </strong></font> </td> <td align="left" width="350"> <img hspace=10 src="../images3/update.gif" /> </td> </tr> </table> <!-- Link bottom bar --> <table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#000000" > <tr> <td> <img src="../images3/redline.gif" width="1000" height="3" border="0" alt="red line" /> </td> </tr> <tr> <td height="30" align="center"> <a href="../index.html"><font class="h1"><b>Home</b></font></a> <b>|</b> <a href="../index.html#update"><b><font class="h1">What's new? </font></b></a> <b>|</b> <a href="../basichtml.htm"><b><font class="h1">Basic HTML</font></b></a> <b>|</b> <a href="../review.htm"><font class="h1"><b>Reviews Programs </b></font></a> <b>|</b> <a href="../tip_trick.htm"><b><font class="h1">Tip&Tricks</font></b> </a> <b>|</b> <a href="http://www.easyhome.in.th/download/" target="_blank"><b><font class="h1">Download</font></b></a> <b>|</b> <a href="../sitemap.htm"><font class="h1"><b>Site Map </b></font> </a> </td> </tr> <tr> <td> <img src="../images3/redline.gif" width="1000" height="3" border="0" alt="red line" /> </td> </tr> </table> </div> <div align="center"> <!--BEGIN WEB STAT CODE----> <script language="javascript1.1" src="http://hits.truehits.in.th/data/a0000253.js"></script> <!-- END WEBSTAT CODE --> </div> <p> </p> <p> </p> <map name="Map"> <area shape="rect" coords="5,9,75,36" href="../index.html" alt="Home"> <area shape="rect" coords="78,10,179,39" href="../basichtml.htm" alt="Basic HTML"> <area shape="rect" coords="184,11,255,36" href="../review.htm" alt="Review Software"> <area shape="rect" coords="260,12,368,39" href="../tip_trick.htm" alt="More Tip & Tricks"> <area shape="rect" coords="374,14,467,40" href="http://www.easyhome.in.th/download/" target="_blank" alt="Download Software"> <area shape="rect" coords="472,10,556,41" href="../sitemap.htm" alt="Site Map"> </map> </body> </html>