0% found this document useful (0 votes)
4 views

4webdesign HTML Programs

Web designing
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views

4webdesign HTML Programs

Web designing
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

1.

Basic HTML Structure


html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic HTML Structure</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a simple HTML page.</p>
</body>
</html>

2. Head Section and Meta Tag


html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Example of meta tags in HTML">
<title>Head Section Example</title>
</head>
<body>
<h1>Head Section and Meta Tags</h1>
</body>
</html>

3. Bold, Italic, and Underline Formatting


html
<!DOCTYPE html>
<html>
<body>
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
</body>
</html>

4. Strikethrough Text
html
<!DOCTYPE html>
<html>
<body>
<p>This is <s>strikethrough</s> text.</p>
</body>
</html>
5. Div and Preformatted Text
html
<!DOCTYPE html>
<html>
<body>
<div>This is content inside a div element.</div>
<pre>
Line 1
Line 2 with spaces and formatting preserved.
</pre>
</body>
</html>

6. Anchor Links and Named Anchors


html
<!DOCTYPE html>
<html>
<body>
<a href="section">Go to Section</a>
<p id="section">This is a named anchor section.</p>
</body>
</html>

7. Image Tag
html
<!DOCTYPE html>
<html>
<body>
<img src="image.jpg" alt="Example Image" width="200" height="150">
</body>
</html>

8. Paragraphs and Comments


html
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<!-- This is a comment -->
</body>
</html>

9. Table with Border, Cellpadding, and Cellspacing


html
<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
</body>
</html>

10. Rowspan and Colspan


html
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Details</th>
</tr>
<tr>
<td>Age</td>
<td>Country</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>USA</td>
</tr>
</table>
</body>
</html>

11. Ordered and Unordered Lists


html
<!DOCTYPE html>
<html>
<body>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</body>
</html>

12. Definition List


html
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</body>
</html>

13. Form with Text Input and Submit Button


html
<!DOCTYPE html>
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

14. Text Area and Reset Button


html
<!DOCTYPE html>
<html>
<body>
<form>
<label for="comments">Comments:</label><br>
<textarea id="comments" name="comments"></textarea><br>
<input type="reset" value="Reset">
</form>
</body>
</html>

15. Dropdown List


html
<!DOCTYPE html>
<html>
<body>
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
</form>
</body>
</html>

16. Radio Buttons


html
<!DOCTYPE html>
<html>
<body>
<form>
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</form>
</body>
</html>

17. Checkboxes
html
<!DOCTYPE html>
<html>
<body>
<form>
<p>Select hobbies:</p>
<input type="checkbox" id="hobby1" name="hobby" value="sports">
<label for="hobby1">Sports</label><br>
<input type="checkbox" id="hobby2" name="hobby" value="music">
<label for="hobby2">Music</label>
</form>
</body>
</html>

18. Frameset Example


html
<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
</html>
19. HTML5 Section and Article
html
<!DOCTYPE html>
<html>
<body>
<section>
<article>
<h2>Article Title</h2>
<p>This is an article inside a section.</p>
</article>
</section>
</body>
</html>

20. HTML5 Video Tag


html
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>

You might also like