xon
HTML
Home
Services
Web Development
Android Development
Content Writing
Video Editing
Internships
Web Development Internship
Android Development Internship
Graphic Design Internship
Machine Kearning Internship
Contact Us
HTML Project
HTML Introduction
HTML History
HTML Text Editors
HTML Comments
HTML Basic Programs
HTML Attributes
HTML Tags
HTML Headings
HTML Paragraphs
HTML Text Formating
HTML Lists
HTML Colors
HTML Links
HTML Images
HTML favicons
HTML Form
HTML Responsive
HTML Project
HTML Project
Here's a basic HTML code for a project:
HTML Code for Form:
<!DOCTYPE html> <html> <head> <title>Form</title> </head> <body> <h1>Registration Form</h1> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <label for="gender">Gender:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br><br> <label for="country">Country:</label> <select id="country" name="country"> <option value="usa">USA</option> <option value="canada">Canada</option> <option value="mexico">Mexico</option> </select><br><br> <label for="message">Message:</label> <textarea id="message" name="message"></textarea><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Copy Codes
HTML Calculator Code:
<!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <h1>Calculator</h1> <form> <label for="num1">First number:</label> <input type="number" id="num1" name="num1"><br><br> <label for="num2">Second number:</label> <input type="number" id="num2" name="num2"><br><br> <input type="button" value="+" onclick="document.getElementById('result').value = parseInt(document.getElementById('num1').value) + parseInt(document.getElementById('num2').value)"><br><br> <input type="button" value="-" onclick="document.getElementById('result').value = parseInt(document.getElementById('num1').value) - parseInt(document.getElementById('num2').value)"><br><br> <input type="button" value="*" onclick="document.getElementById('result').value = parseInt(document.getElementById('num1').value) * parseInt(document.getElementById('num2').value)"><br><br> <input type="button" value="/" onclick="document.getElementById('result').value = parseInt(document.getElementById('num1').value) / parseInt(document.getElementById('num2').value)"><br><br> <label for="result">Result:</label> <input type="text" id="result" name="result"><br><br> </form> </body> </html>
Copy Codes
HTML Unit Converter Code:
<!DOCTYPE html> <html> <head> <title>Unit Converter</title> </head> <body> <h1>Unit Converter</h1> <form> <label for="value">Value:</label> <input type="number" id="value" name="value"><br><br> <label for="from">From:</label> <select id="from" name="from"> <option value="meter">Meter</option> <option value="kilometer">Kilometer</option> <option value="mile">Mile</option> <option value="yard">Yard</option> <option value="foot">Foot</option> <option value="inch">Inch</option> </select><br><br> <label for="to">To:</label> <select id="to" name="to"> <option value="meter">Meter</option> <option value="kilometer">Kilometer</option> <option value="mile">Mile</option> <option value="yard">Yard</option> <option value="foot">Foot</option> <option value="inch">Inch</option> </select><br><br> <input type="button" value="Convert" onclick="convert()"><br><br> <label for="result">Result:</label> <input type="text" id="result" name="result"><br><br> </form> <script> function convert() { var value = parseFloat(document.getElementById("value").value); var from = document.getElementById("from").value; var to = document.getElementById("to").value; var meters; switch(from) { case "meter": meters = value; break; case "kilometer": meters = value * 1000; break; case "mile": meters = value * 1609.34; break; case "yard": meters = value * 0.9144; break; case "foot": meters = value * 0.3048; break; case "inch": meters = value * 0.0254; break; } var result; switch(to) { case "meter": result = meters; break; case "kilometer": result = meters / 1000; break; case "mile": result = meters / 1609.34; break; case "yard": result = meters / 0.9144; break; case "foot": result = meters / 0.3048; break; case "inch": result = meters / 0.0254; break; } document.getElementById("result").value = result.toFixed(2); } </script> </body> </html>
Copy Codes
HTML Temperature Converter Code:
<!DOCTYPE html> <html> <head> <title>Temperature Converter</title> </head> <body> <h1>Temperature Converter</h1> <form> <label for="value">Value:</label> <input type="number" id="value" name="value"><br><br> <label for="from">From:</label> <select id="from" name="from"> <option value="celsius">Celsius</option> <option value="fahrenheit">Fahrenheit</option> <option value="kelvin">Kelvin</option> </select><br><br> <label for="to">To:</label> <select id="to" name="to"> <option value="celsius">Celsius</option> <option value="fahrenheit">Fahrenheit</option> <option value="kelvin">Kelvin</option> </select><br><br> <input type="button" value="Convert" onclick="convert()"><br><br> <label for="result">Result:</label> <input type="text" id="result" name="result"><br><br> </form> <script> function convert() { var value = parseFloat(document.getElementById("value").value); var from = document.getElementById("from").value; var to = document.getElementById("to").value; var result; switch(from) { case "celsius": switch(to) { case "celsius": result = value; break; case "fahrenheit": result = (value * 1.8) + 32; break; case "kelvin": result = value + 273.15; break; } break; case "fahrenheit": switch(to) { case "celsius": result = (value - 32) / 1.8; break; case "fahrenheit": result = value; break; case "kelvin": result = (value + 459.67) / 1.8; break; } break; case "kelvin": switch(to) { case "celsius": result = value - 273.15; break; case "fahrenheit": result = (value * 1.8) - 459.67; break; case "kelvin": result = value; break; } break; } document.getElementById("result").value = result.toFixed(2); } </script> </body> </html>
Copy Codes
Images
HTML My Portfolio Code:
<!DOCTYPE html> <html> <head> <title>My Portfolio</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> </head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } header h1 { margin: 0; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-right: 20px; } nav li:last-child { margin-right: 0; } nav a { color: #fff; text-decoration: none; } section { padding: 50px 20px; } section h2 { margin-bottom: 20px; } ul { list-style: none; padding: 0; } li { margin-bottom: 20px; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="email"], textarea { padding: 10px; border-radius: 5px; margin-bottom: 20px; } input[type="submit"] { background-color: #333; color: #fff; padding: 10px 20px; border-radius: 5px; cursor: pointer; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> <body> <header> <h1>My Portfolio</h1> <nav> <ul> <li><a href="#about">About Me</a></li> <li><a href="#projects">My Projects</a></li> <li><a href="#contact">Contact Me</a></li> </ul> </nav> </header> <section id="about"> <h2>About Me</h2> <p>Insert your description here.</p> </section> <section id="projects"> <h2>My Projects</h2> <ul> <li> <h3>Project 1</h3> <p>Description of Project 1</p> </li> <li> <h3>Project 2</h3> <p>Description of Project 2</p> </li> <li> <h3>Project 3</h3> <p>Description of Project 3</p> </li> </ul> </section> <section id="contact"> <h2>Contact Me</h2> <form> <label for="name">Name:</label> <input type="text" id="name" name="name" /><br /> <label for="email">Email:</label> <input type="email" id="email" name="email" /><br /> <label for="message">Message:</label> <textarea id="message" name="message"></textarea><br /> <input type="submit" value="Send" /> </form> </section> <footer> <p>© 2023 My Portfolio</p> </footer> </body> </html>
Copy Codes
« Previous
Next »
xon