Saturday, January 29, 2022

புதியவர்களுக்கு html பற்றிய குறிப்புகள்.

 


பட்டன் ஆன் கிளிக் ஈவண்ட்.

பட்டன் ஆன் கிளிக் ஈவண்ட் ஆனது ஒரு பட்டனை கிளிக் செய்தவுடன் ஒரு ஜாவாஸ்கிரிப்ட் நிரலை  இயக்கப் பயன்படுகின்றது.

பட்டனை கிளிக் செய்யும் பொழுது ஒரு ஃபங்க்சனையும் அழைக்கலாம்.

சிண்டாக்ஸ்.

1.    <button onclick=" single value script">  

சான்று நிரல்.

<!DOCTYPE HTML>   

<html>   

<head>    

<title>   

example of onclick button  

</title>   

<script>   

function welcome() {   

window.open("https://www.javatpoint.com/");  

}   

</script>   

</head>   

<body style = "text-align:center">   

<button onclick="welcome()"> Welcome to our website </button>           

</body>   

</html>  


       

Html check box டேக்.

இது பயனரை  ஆப்சன்களின் செட்டில் இருந்து  ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட ஆப்சன்களை தேர்வு செய்ய பயன்படுகின்றது.

இது<input> எலிமெண்டின் type ஆட்ரிபியூட் மூலம் அறிவிக்கப்படுகின்றது.

<input type="checkbox" name="field name" value="Initial value"> 

ஒரு செக் பாக்சை டிஃபால்ட் ஆக செலெக்ட் செய்ய checked என்ற ஆட்ரிபியூட்டிற்கு yes என மதிப்பிருத்தப்பட வேண்டும்.

1.    <input type="checkbox" name="field name" value="Initial value" checked="yes">    

சான்று நிரல்.

1.    <html>  

2.    <head>  

3.    </head>  

4.    <body>  

5.    <form>  

6.    Programming Languages: <br>    

7.                  <input type="checkbox" id="C" name="C" value="C"/>    

8.                     <label>C</label> <br>    

9.                  <input type="checkbox" id="Java" name="Java" value="Java" checked=?yes?/>    

10.                                        <label>Java</label> <br>    

11.                                     <input type="checkbox" id="Python" name="Python" value="Python"/>    

12.                                        <label>Python</label> <br>  

13.                                <input type="checkbox" id="PHP" name="PHP" value="PHP"/>    

14.                                        <label>PHP</label>  

15.                       </form>  

16.                       </body>  

17.                       </html>  

வெளியீடு:



Html favicon.

இது ஒன்று அல்லது ஒன்றுக்கு மேற்பட்ட ஐக்கான்கள் கொண்ட ஃபைல் ஆகும்.இது ஒரு வெப் சைட் அல்லது பிளாக்கை ரெஃபரசென்ட் செய்ய பயன்படுகின்றது.

இந்த ஐக்கான் ஆனது அட்ரஸ் பார்,பிரவுசர் டேப்,பிரவுசர் ஹிஸ்டரி ஆகியவற்றில் display செய்யப்படுகின்றது.

இது .ico ஃபார்மட்டில் இருக்கும் மற்ற ஃபார்மட்டிலும் உள்ளது. ஆனால் .ico ஃபார்மட் ஆனது எல்லா பிரவுசராலும் சப்போர்ட் செய்யப்படுகின்றது.

ஒரு favicon உருவாக்குவது எப்படி?

Favicon உருவாக்குவதற்கு கீழே உள்ள முகவரியை அணுகவும்.

https://www.favicon.cc/

favicon உருவாக்கிய பிறகு download favicon ஆப்சன் மூலம் டவுன் லோட் செய்யவும்.

டவுன் லோட் செய்த பிறகு favicon.ico ஃபார்மட்டில் நம் கணினியின் ஃபைல் சிஸ்டத்தில் இருக்கும்.

சான்று நிரல்.

<html>  

<head>  

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">  

</head>  

<title> Example of favicon</title>  

<body>  

<br>  

<br>  

<p align="center">  

<img src="download.jpg">  

</p>  

</body>  

</html>  

Html radio tag.

இதன் மூலம் ஒரு செட் ஆஃப் அப்சனில் இருந்து ஏதாவது ஒரு ஆப்சனை தேர்வு செய்ய பயன்படுகின்றது. இதன் மூலம் ஒன்றுக்கு மேற்பட்ட ஆப்சன்களை செலெக்ட் செய்ய இயலாது.

1.    <input type="radio" name ="Any_name"/>  

சான்று நிரல்.

html>  

<head>  

</head>  

<title> Example of Radio Button</title>  

<body>  

<form>  

    

<label>  

Gender:   

</label>  <br>  

<input type="radio" id="gender" name="gender" value="male"/> Male    

<br>  

<input type="radio" id="gender" name="gender" value="female"/> Female <br/>   

</form>    

</body>  

</html>  



HTML Required ஆட்ரிபியூட்.

ரெக்யுயர்ட் ஆட்ரிப்யூட் ஆனது ஒரு பூலியன் மதிப்பை ஏற்றுக் கொள்ளும் . yes என மதிப்பிடப்பட்டிருந்தால் இந்த ஃபீல்டில் நாம் கட்டாயம் உள்ளீடு செய்ய வேண்டும்.

இந்த ஆட்ரிபியூட் ஆனது பின் வரும் எலிமெண்டுகளில் பயன்படுத்தப்படுகின்றது.

1.    <input>

2.    <select>

3.    <textarea>

நாம்  இதை <input> உடன் எளிதாக இதை பயன்படுத்தலாம்.

1.    <input required>  

சான்று நிரல்.

<html>  

<head>  

<title>  

Example of required attribute with input element   

</title>  

<style>  

div  

{  

padding: 10px 0;  

}  

</style>  

<head>  

<body>  

<form>  

<div>  

<label>Name</label>   

<input type="text" placeholder="Enter Name" name="name" required>   

</div>  

<div>   

<label> E-mail </label>   

<input type="email" placeholder="Enter email ID" name="email" required>   

  

</div>  

<div>  

 <label> Mobile No. </label>   

<input type="text" placeholder="Enter Your Mobile No." name="mobileno" required>  

</div>  

  

<div>  

<label>Password</label>   

<input type="password" placeholder="Enter Password" name="psw" required>   

<br>  

  </div>   

<button type="submit" VALUE="SUBMIT"> SUBMIT </button>  

</form>  

</body>  

</html>  

வெளியீடு:



Select உடன் பயன்படுத்துவதற்கான சான்று நிரல்.

<html>  

<head>  

<title>  

Example of required attribute with input element   

</title>  

<style>  

div  

{  

padding: 10px 0;  

}  

</style>  

<head>  

<body>  

<form>  

<div>  

<label>Name</label>   

<input type="text" placeholder="Enter Name" name="name" required>   

</div>  

<div>   

<label> E-mail </label>   

<input type="email" placeholder="Enter email ID" name="email" required>   

  

</div>  

<div>  

 <label> Mobile No. </label>   

<input type="text" placeholder="Enter Your Mobile No." name="mobileno" required>  

</div>  

  

<div>  

<label>Password</label>   

<input type="password" placeholder="Enter Password" name="psw" required>   

<br>  

  </div>   

<button type="submit" VALUE="SUBMIT"> SUBMIT </button>  

</form>  

</body>  

</html>


  

<textarea> உடன் பயன்படுத்துவதற்கான சான்று நிரல்.

<html>  

<head>  

<title> Example of required attribute with textarea </title>  

<style>  

div  

{  

padding: 10px 0;  

}  

</style>  

<head>  

<body>  

<form>  

Any Comment :  

<br>  

<textarea cols="80" rows="5" placeholder="Enter a comment" value="address" required>  

</textarea>  

<button type="submit" VALUE="SUBMIT"> SUBMIT </button>  

</form>  

</body>  

</html>  

 


நன்றி.

முத்து கார்த்திகேயன் ,மதுரை.

ads Udanz

No comments:

Post a Comment