Some Basic HTML Codes for Beginners
1. WEEK INPUT
label for="week">Select a week:</label>
<input type="week" id="week" name="week">
<input type="submit" value="Submit">
2. TIME INPUT
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
<input type="submit" value="Submit">
3. RANGE
<label for="vol">Range (0 to 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
<input type="submit" value="Submit">
4. DATE INPUT
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>
5. RADIO BUTTON
<p>Select Gender</p>
<input type="radio" id="Male" name="Gender" value="Male">
<label for="html">Male</label><br>
<input type="radio" id="Female" name="Gender" value="Female">
<label for="css">Female</label><br>
<input type="radio" id="Other" name="Gender" value="Other">
<label for="javascript">Other</label><br><br>
6. PASSWORD INPUT
<input type="password" id="pwd" name="pwd">
7. FORM DEMO
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Tech"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Bajao"><br><br>
<input type="submit" value="Submit">
</body>
</html>
8. DATE & TIME
<!DOCTYPE html>
<html>
<body>
<div align="center">
<h1>Date And Time</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click Me</button>
<p id="demo"></p>
</div>
</body>
</html>
9. CLASS ELEMENT
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: powderblue;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Ahmedabad</h2>
<p>Gujarat</p>
</div>
<div class="city">
<h2>Mumbai</h2>
<p>Maharashtra</p>
</div>
<div class="city">
<h2>Jaipur</h2>
<p>Rajasthan</p>
</div>
10. BORDERED TEXT
<p style="border: 1px solid black">Hello World</p>
11. ORDERED AND UNODERED LIST
<h2>An Unordered HTML List</h2>
<ul>
<li>Hrishi</li>
<li>Siddharth</li>
<li>Meetraj</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Hrishi</li>
<li>Siddharth</li>
<li>Meetraj</li>
</ol>
12. ALIGN TEXT
<div align="center">
Hello
</div>
13. HTML TABLE
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>HTML table</h2>
<table style="width:100%">
<tr>
<th>App Name</th>
<th>Downloads</th>
</tr>
<tr>
<td>ToolKit</td>
<td>810000</td>
</tr>
<tr>
<td>HTML Creator</td>
<td>280000</td>
</tr>
</table>
14. IMAGE EXAMPLE
<p>Step-1 Upload the image
<a href="https://postimages.org/">here</a>
<p>Step-2 Copy the "Direct Link" and use it in src
<p><img src="https://i.postimg.cc/Zq5Fj4cr/unnamed-1.png"
width="100"
height="100">
15. STYLE ELEMENT
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
16. COMMENT TAG
<!-- Write your comments here -->
17. MARK ELEME3NT
<p>Do not forget to <mark>rate the app</mark></p>
18. STRONG ELEMENT
<p><strong>Example of Strong Element</strong></p>
19. SUBSCRIPT & SUPERCRIPT
<sup>5</sup>p<sub>3</sub>=5×4×3=60
20. BOLD ITALIC
<p><b>Bold</b></p>
<p><i>Italic</i></p>
21. TEXT BACKGROUND
<p style="background-color:powderblue;">Text Background</p>
22.FONT SIZE
<p style="font-size:50px;">50px</p>
23. FONT COLOR
<p style="color:yellow;">Yellow</p>
24. SMALL ELEMENT
<p>Example of normal text
<p><small>Example of smaller text</small>
25. SELECT ELEMENT
<label for="rate">Rate the App:</label>
<select name="rate">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
26. HYPERLINK
<a href=https://www.google.com>Click Me</a>
27. S ELEMENT
<s>9999</s>
<p>7990</p>
28. PARAGRAPH
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
29. LINE BREAK
<br>Example of line break element</br>
30. TEXT SIZE
<h1>DEVANSH</h1>
<h2>DEVANSH</h2>
<h3>DEVANSH</h3>
<h4>DEVANSH</h4>
<h5>DEVANSH</h5>
<h6>DEVANSH</h6>
31. BG COLOR
<body style="background-color:black;">
32. BUTTON EXAMPLE
<button type="button"
onclick="alert('Button Clicked')">
Click Me!
</button>
THESE EXAMPLES WILL BE VERY HELPFUL FOR BEGINNERS WHO ARE LEARNING HTML .
Comments
Post a Comment