HTML Program For Beginners 

  • By
  • September 3, 2022
  • Web Development
Html program for beginners 

HTML Program For Beginners 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Document</title> 

</head> 

<body> 

  

 <form > 

<label for=”Fill the Color”> Fill the Color</label> 

<input type=”color” name=”red” id=””> 

<br><br> 

<label for=”Upload File”>Upload File</label> 

 <input type=”file” name=”file” > 

  

 <br><br>  

 <label for=”Serch”>Search</label>  

 <input type=”search” name=”search” id=””> 

 <br><br>  

 <label for=”number”>Number</label> 

 <input type=”number” name=”number” id=””>  

 <br><br> 

 <input type=”submit”> 

 </form> 

  

</body> 

</html> 

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Document</title> 

</head> 

<body> 

  

 <form> 

 <label for=”Date”>Date</label> 

 <input type=”date” name=”date” >

 <br><br> 

 <label for=”DateTime”>DateTIMe</label> 

 <input type=”datetime” name=”DateTime” > 

 <br><br> 

 <label for=”DateTImeLocal”></label> 

 <input type=”datetime-local” name=”datetimelocal” id=””>  <br><br> 

 <label for=”month”>month</label> 

 <input type=”month” name=”month” id=””> 

 </form> 

  

</body> 

</html> 

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Application Form</title>

</head> 

<body> 

 <marquee> <u> <h2>Application Form</h2> </u> </marquee> 

 <br> 

 <form> 

 <label for=”First Name”>First Name :</label> 

 <input type=”First Name” name=”First Name” placeholder=”Enter Your First Name”><br>  <label for=”Middle Name”>Middle Name :</label> 

 <input type=”Middle Name” name=”Middle Name” placeholder=”Enter Your Middle Name”><br>  <label for=”Sirname Name”>Sirname Name :</label> 

 <input type=”Sirname Name” name=”Sirname Name” placeholder=”Enter Your Sirname  Name”><br><br><hr> 

 <label for=”Gender”>Gender :</label><br> 

 <input type=”radio” name=”Gender”>Male 

 <input type=”radio” name=”Gender”>Female <br><br><hr> 

 <label for=”Email”>Email :</label> 

 <input type=”Email” name=”Email” placeholder=”Enter Email ID”><br> 

 <label for=”Password”>Password</label> 

 <input type=”Password” name=”Password” placeholder=”Enter Password”><br><br><hr> 

 <label for=”City”>Select Your City :</label><br> 

 <input type=”radio” name=”City”>Jalgaon

 <input type=”radio” name=”City”>Mumbai 

 <input type=”radio” name=”City”>Pune 

 <input type=”radio” name=”City”>Nashik <br><br><hr> 

 <label for=”Interest”>Interest In :</label><br> 

 <input type=”checkbox” name=”Interest”>Web Designer  <input type=”Checkbox” name=”Interest”>Data Scientist  <input type=”Checkbox” name=”Interest”>Graphic Designer <br><br><hr> 

 <input type=”Submit” placeholder=”submit”> 

 </form> 

  

</body> 

</html> 

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

Exmple3 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>form1</title>

</head> 

<body> 

<form> 

<label for=”Enter the Name”>Enter the Name:</label> 

<input type=”text” name=”firstName” value=”Enter the name”> <label for=”Enter the LastName”>Enter the LastName:</label> <input type=”text” name=”laststName” value=”Enter the lastname”> <input type=”submit”> 

<!– f1.html?firstName=meena&laststName=kumari –> 

</form> 

  

</body> 

</html> 

 

Example4 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>my first web application</title> 

</head> 

<body> 

 wlecome to my class..

 <h1>Heading1…..</h1> 

 <h2>headibg2….</h2> 

 <h3>heading3…..</h3> 

 <h4>heading4…</h4> 

 <h5>heading5…</h5> 

 <h6>heading6…</h6> 

</body> 

</html> 

 

example  

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Document</title> 

</head> 

<body> 

 <!– break line –> 

 <p>my name is pooja. </br> this is my secound pargraph. </p>

</body> 

</html> 

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 

 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Document</title> 

</head> 

<body> 

 <h1>My Facebook Link</h1> 

 <!– Anchore Tag (hyperlink) –> 

 <a href=”https://www.facebook.com/” target=”_self”>Facbook</a> <br>  <a href=”https://www.sevenmentor.com/” target=”_blank”>Seven Mentore</a>  <br> 

 <a href=”img.html”>my Image page</a> 

<br> 

 <a href=”https://shop.mango.com/in”> 

 <img src=”/images/mango.png” width=”100px” height=”100px” alt=””>  </a>

</body> 

</html> 

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 

 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 

 <title>Document</title> 

</head> 

<body> 

<!– underline –> 

 <u> <h1>heading</h1> </u> 

<!– bold / Strong (import)–> 

 <p> 

Seven mentor’s strong placement cell has magnified its network amidst corporates over the years and is leveraged to realize nearly 100% placements of its students. 

 <strong>String tag</strong> 

 </p>  

<!– italic / emphasized –> 

 <i><h2>Italic</h2></i> 

 <em><h2>emphasized</h2></em> 

<!– Strike –> 

<p>welcome to my <strike> class </strike>…</p> 

<!– del –>

<p><del>somthing…</del></p> 

<!– mark –> 

 <p>this my <mark>important</mark> data</p>   

<!– marquee –> 

 <marquee><h1> seven mentor</h1></marquee> 

<!– small –> 

 <p>larg <small>my data is small text sized</small></p> <!– Subscript / superScript –> 

 <p>co<sub>2</sub></p> 

<!– superscript –> 

 <p>10<sup>th</sup></p> 

</body> 

</html> 

example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″>

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 

 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 

 <title>Document</title> 

</head> 

<body> 

  

 <a href=”#”>link1</a> 

 <a href=”#”>link2</a> 

 <img src=”/images/meat1.jpg” alt=”” width=”100px” height=”100px”> 

 <p> 

 “SevenMentor” takes pride in having instructors who are engrossed beyond Fifteen Years in enjoying as a trainer for Various Verticles of Education.

 </p> 

  

</body> 

</html> 

 

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 

 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 <title>Document</title> 

</head> 

<body> 

 <h2>unored list</h2> 

 <ul type=”circle”> 

 <li>html</li> 

 <li>Css</li> 

 <li>javascript</li> 

 </ul> 

 <ul type=”square”> 

 <li>html</li> 

 <li>Css</li> 

 <li>javascript</li> 

 </ul> 

</body> 

</html> 

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Document</title> 

</head>

<body> 

 <h2>order list</h2>  <ol type=”i”> 

 <li>html</li> 

 <li>css</li> 

 <li>javascript</li>  </ol> 

 <h2>order list</h2>  <ol type=”A”> 

 <li>html</li> 

 <li>css</li> 

 <li>javascript</li> </ol> 

<h2>order list</h2> <ol type=”I”> 

 <li>html</li> 

 <li>css</li> 

 <li>javascript</li> </ol> 

<h2>order list</h2> <ol type=”a”> 

 <li>html</li> 

 <li>css</li> 

 <li>javascript</li> </ol>

</body> 

</html> 

 

Example 

<!DOCTYPE html> 

<html lang=”en”> 

<head> 

 <meta charset=”UTF-8″> 

 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>  <title>Document</title> 

</head> 

<body> 

  

 <!– 

 dd-> description data 

 dt->description title 

 dl-> description list 

 –> 

<dl> 

 <dt>html</dt> 

 <dd>hypertext markup lang</dd> 

 <dt>CSS</dt> 

 <dd>Cascading style sheet</dd> 

 <dt>JS</dt>

 <dd>JAVA script</dd>  </dl> 

</body> 

</html>

 

Author:-

Pooja Ghodekar

Call the Trainer and Book your free demo Class  Call now!!!

| SevenMentor Pvt Ltd.

© Copyright 2021 | Sevenmentor Pvt Ltd.

Submit Comment

Your email address will not be published. Required fields are marked *

*
*