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

4webdesign HTML Programs

Web designing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

4webdesign HTML Programs

Web designing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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