HTML Tutorial - Website Designing in Tamil

Post by **ஆதித்தன்** » Fri Oct 12, 2012 8:25 pm

Form Tag உடன் பயன்படுத்தப்படும் டேக்குகள் என்னும் மூன்று இருக்கின்றன, அவைகளைப் பற்றி இப்பொழுது பார்த்துவிடுவோம்.

Password input tag:
இதனை நீங்கள் உறுப்பினர் பயன்பாட்டுத்தளங்கள் அனைத்திலும் காணலாம். நீங்கள் லாக்கின் ஆகும் பொழுது, யூசர் நேம் & பாஸ்வேர்டு கேட்கும் பொழுது பாஸ்வேர்டு காலத்தில் கொடுக்கும் டெக்ஸ் அனைத்தும் டாட் டாட்டாக மறைந்து போவதை நீங்கள் காணலாம். அவ்வாறு, டேட்டா பேஸிலும் ஸ்டோர் ஆகாது, சரியாக மதிப்பினை எடுத்துக் கொண்டு நம்மை உள்ளே நுழைய விடுவதற்காக பயன்படுத்தப்படுவதுதான் password - input tag form. இதனை எப்படி கோடிங்க் ஆக உருவாக்கலாம் என்று பார்ப்போம்.

Password Field Example Code:

<form name=testform>
<input type=password>
</form>

Disable Password Field
இது தேவையில்லை, இருந்தாலும் எப்படி, எவரும் லாக்கின் ஆகாமல் தடுக்க disable செய்வது என்பதனை தெரிந்து கொள்ளுங்கள்.
Code:
<form name=testform>
<input type=password disabled>
</form>

Label Tag
இப்பொழுது பல தளங்களில் label tag பயன்படுத்தப்படுகிறது. இதனை ரன் செய்ய சர்வர் ஸ்கிரிப்ட்டும் வேண்டும் என்றாலும், இதனை கோடிங்க் ஆக எப்படி தளத்திற்குள் கொண்டுவருவது என்பதனை தெரிந்து கொள்ளுங்கள். ஏனெனில் நாம் ஏதேனும் சர்வர் ஸ்கிரிப்ட்டை இன்ஸ்டால் செய்தால், இதன் கோடிங்க் மூலம் எளிதாக அடையாளம் கண்டு கொள்ளலாம் அல்லவா அதற்காக ..

Label Tag: example
<form name=testform>
<label name=testlabel> My Label </label>
</form>

Result:
My Label

=====================

select tag (combo box / drop down box)
நமது தளத்தில் பல லிங்குகளின் தொகுப்பை, செலக்ட் டேக் மூலம் காம்போ பாக்ஸ் அல்லது ட்ராப் டவுன் பாக்ஸ் ஆக உருவாக்க இது பயன்படுகிறது. ஆகையால் இதன் கோடிங்க்கை கவனமாகப் பார்த்து தெரிந்து கொள்ளுங்கள். நமது படுகையில் கூட அங்காங்கே ட்ராப் டவுன் பாக்ஸ் உள்ளது. குறிப்பாக டாபிக் பகுதியில் ரைட் சைடு கீழ் பாகத்தில் ஜம்ப் பாக்ஸ் என இருப்பதனைக் காணலாம்.

Combo box / Dropdown box

Example Code:
<form name=myform>
<select name=mytextarea>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
</select>
</form>

Scrollable Select Option with Size Attribute:

Example Code:
<form name=myform>
<select name=mytextarea size=2>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
<option name=four value=four> four </option>
</select>
</form>

Multi Select Option
Example Code:
<form name=myform>
<select name=mytextarea size=3 multiple>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
<option name=four value=four> four </option>
</select>
</form>

Preselected Select Option
Example Code:
<form name=myform >
<select name=mytextarea size=2>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three selected> three </option>
<option name=four value=four> four </option>
</select>
</form>

இதுவரை நாம் பார்த்த Form Tag கோடிங்கை நாம் எவ்வாறு நமது தேவைக்குத் தகுந்தவாறு சாதாரண HTML webpage-ல் பயன்படுத்தலாம் என்பதனை அடுத்தப் பாகத்தில் பார்க்கலாம்..

தொடரும்...

Post by **ஆதித்தன்** » Fri Oct 19, 2012 9:43 pm

இதுவரைப் பார்த்தவற்றைக் கொண்டு ஒர் வலைப்பக்கத்தை உருவாக்கி கோடிங்க் கொண்டுவந்துள்ளேன். அதில் முக்கியமாக நீங்கள் பார்க்க வேண்டியது, Table, Dynamic Ads image Iframe on right side/Auto Refresh page, Top Earners Iframe with Static content, Video, Check box, Radio box, TextArea, Form, Meta Favi ICO, Meta Refresh என சில உதாரணங்களைக் கொண்டு எளிதாக உருவாக்கப்பட்ட பக்க முகவரி > http://padugai.com/HtmlTamilTutorial/HTMLwebsite.html

கொஞ்சம் நிதானமாக ஒவ்வொரு வார்த்தைகளும் எங்கு அமைந்துள்ளன என்று பக்கத்தையும் கோடிங்கையும் பார்த்து கற்றுக் கொள்ளுங்கள் அல்லது சந்தேகங்களைக் கேளுங்கள் சொல்லித்தருகிறேன்.

அப்பக்கத்தின் HTML CODE:

<html>
<head>
<link rel="shortcut icon" href="http://www.iconj.com/ico/x/g/xg9a4vhb07.ico">
<title>Easy HTML Website</title>
</head>
<body>

<table border=0 width=80% align=center cellpadding=3 cellspacing=0>
<tr bgcolor=blue><td width=30%><img src="http://padugai.com/tamilonlinejob/style ... t/logo.png" title="Tamil Online Job Site"></td> <td align=center width=50%> <u><font size=6.5 face=Ariel color=white>EASY HTML WEBSITE</font></u> <br> <font color=orange><i><b>Designed by Athithan</b></i></font></td></tr></table>
<table border=1 align=center width=80% bgcolor=red cellspacing=3>
<tr>
<td align=center><a href="http://padugai.com">HOME</a></td>
<td align=center><a href="http://padugai.com/tamilonlinejob/viewt ... 1299">HTML TUTORIAL</a></td>
<td align=center><a href="http://padugai.com/tamilonlinejob/viewforum.php?f=47"> TAMIL ONLINE JOB</a></td>
<td align=center><a href="http://padugai.com/freeadvertising/"> Free Classifieds</a> </td>
</tr>
</table>
<table border=0 width=80% height=15 align=center cellpadding=0 cellspacing=0>
<tr bgcolor=white><td>
</td> </tr> </table>
<table border=0 width=80% height=30 align=center cellpadding=3 cellspacing=0>
<tr bgcolor=green><td>
<marquee align=left behavior=alternate>Welcome to EASY HTML WEBSITE.</marquee>
</td> </tr> </table>

<table border=0 bgcolor="#776655" width=80% height=350 align=center cellpadding=0 cellspacing=0>

<tr height=30%>
<td width=20%> <h3> SITE LINKS</h3><ul>
<li><a href="http://padugai.com/tamilonlinejob/viewtopic.php?p=9367"> Web Links 1</a></li>
<li><a href="http://padugai.com/tamilonlinejob/viewtopic.php?p=9387"> Web Links 2</a></li>
<li><a href="http://padugai.com/tamilonlinejob/viewtopic.php?p=9391"> Web Links 3 </a></li></ul><br>
<iframe src="http://padugai.com/HtmlTamilTutorial/dynamicpage.php" width=120 height=150 frameborder=0 scrolling=no>
</iframe></td>
<td rowspan=2 width=40%><center> <img src="http://i627.photobucket.com/albums/tt35 ... center><br>
Welcome! <br>
<font size=4>Are you looking any online job site? If yes, atlast you're find very good site for learning about online job &nature of duty and earning more than $1000/month. It's very easy job and require very less & flexible time for doing work.</font><br> <br /><center> <form name=myText>
<input type="text" name=myText value="Enter Your Full Name" size=35>
</form><br> <a href="http://padugai.com/tamilonlinejob/ucp.php?mode=register" title="online job"><img src="http://padugai.com/speedstart/unlimited ... enter></td>
<td width=20%><center><iframe src="http://padugai.com/HtmlTamilTutorial/framepage.php" width=130 height=130 frameborder=0 scrolling=no>
</iframe><font color=yellow><br><u>FLASH NEWS:</u> PADUGAI.COM ACCEPT FREE REGISTER FOR BASIC MEMBERSHIP<font><center> </td>
</tr>
<tr height=70%>
<td> <font color=red size=4><u> Check Box:</u></font><br><form name=myform>
<input type="checkbox" name=mybox value="1"> Like Cricket <br>
<input type="checkbox" name=mybox value="2"> Like Chat <br>
<input type="checkbox" name=mybox value="3"> Like PADUGAI <br>
</form></td>

<td >
<table background="http://dinakaran.com/images/site-use/to ... line-2.jpg" border=0 width=80% height=80% align=center>
<tr >
<td> <b>Radio Button</b><br><form name=myform>
<input type="radio" name=myradio value="1" > Love <br>
<input type="radio" name=myradio value="2" checked>Arrange <br>
<input type="radio" name=myradio value="3" >L M.AGE<br>
</form> </td>
<td bgcolor=red>DUMMY Box<br>ஆதி</td>
</tr>
<tr >
<td colspan=2><b>Text Area/Link Share</b><br><form name=myform>
<textarea name=mytextarea cols=20 rows=3>
<a href="http://padugai.com><img src="http://padugai.com/tamilonlinejob/style ... t/logo.png" height="150" width="200" title="Tamil Online Job Site"></a>
</textarea>
</form>
</td>
</tr>
</table>
</td>

</tr>
</table>

<table border=2 width=80% align=center cellpadding=3 cellspacing=0><tr><td width=40%><iframe width="420" height="315" src="http://www.youtube.com/embed/pcWUqm8T-Pw" frameborder="0" allowfullscreen></iframe>
</td><td align=center>Add Contents<br> ADD IFrame <br> add script</td><td bgcolor=orange>Advertisement or <br>add anything as your idea</td></tr></table>

<div ><center><font bgcolor=blue>
Page Created & &copy by <a href="http://www.padugai.com" title="padugai">padugai.com</a> <b><i>Athithan</i></b></font><center></div>

</body>
</html>

மேலுள்ள கோடிங்க் காட்டும் வலைப்பக்கம் > http://padugai.com/HtmlTamilTutorial/HTMLwebsite.html

HTML Tutorial - Website Designing in Tamil

HTML Tutorial - Website Designing in Tamil

Re: HTML Tutorial - Website Designing இன் தமிழ்