Easyhome 2010
IsanGate.net
Review Programs Navigation Bar


 
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 : Tahoma, "MS Sans Serif";
            font-style : normal; line-height: 14pt}
      td {font-size : 10pt; font-family : 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"> <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 : Tahoma, "MS Sans Serif";<br>       font-style : normal; line-height: 14pt}<br> td {font-size : 10pt; font-family : 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="../main_index.html"><font class="h1"><b>Home</b></font></a> <b>|</b> <a href="../main_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="../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="../main_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="../download/" target="_blank" alt="Download Software"> <area shape="rect" coords="472,10,556,41" href="../sitemap.htm" alt="Site Map"> </map> </body> </html>