Scribd
Upload
5 views

Practical File html

The document contains various HTML code examples demonstrating how to create lists, tables, frames, and multimedia elements such as images, audio, and video. It also includes examples of using CSS for styling, creating forms, and employing HTML tags like <marquee>. Each example is structured with a complete HTML document format.

Uploaded by

terrifictravel17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Practical File html

The document contains various HTML code examples demonstrating how to create lists, tables, frames, and multimedia elements such as images, audio, and video. It also includes examples of using CSS for styling, creating forms, and employing HTML tags like <marquee>. Each example is structured with a complete HTML document format.

Uploaded by

terrifictravel17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

1.

Write HTML code to create ordered and unordered list


<!DOCTYPE html>
<html>
<head>
<title>Lists Example</title>
</head>
<body>
<h2>Ordered List:</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
<h2>Unordered List:</h2>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
</ul></body><html>
2. Write HTML code to create definition list
<!DOCTYPE html>
<html>
<head>
<title>Definition List Example</title>
</head>
<body>
<h2>Definition List:</h2>
<dl>
<dt>HTML</dt>
<dd>Stands for HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Stands for Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>Stands for JavaScript</dd>
</dl>
</body>
</html>
3. Write HTML code to add image in a page
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>

<h2>Displaying an Image:</h2>

<img src="https://4.bp.blogspot.com/-
fDScWpSMCmM/WPXmuj06VGI/AAAAAAAAAp8/KOvM-
LIN24MSRk70NlQL0zT8HPd495kqQCLcB/s1600/tech.png" alt="Example Image"
width="300" height="200">

</body>
</html>
4. Write HTML code to use external and internal links
<!DOCTYPE html>
<html>
<head>
<title>Links Example</title>
</head>
<body>

<h2>External Link:</h2>
<p><a href="https://www.example.com">Visit Example</a></p>

<h2>Internal Link:</h2>
<p><a href="page2.html">Go to Page 2</a></p>

</body>
</html>
5. Write HTML code to create a table
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>

<h2>Simple Table:</h2>

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>

</body>
</html>
6. Write HTML code to create table with rowspan and colspan
<!DOCTYPE html>
<html>
<head>
<title>Table with Rowspan and Colspan Example</title>
</head>
<body>
<h2>Table with Rowspan and Colspan:</h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr><td colspan="2">Row 2, Cell 2 and Cell 3</td> </tr>
</table>
</body></html>
7. Write HTML code to divide a page into two horizontal sections, The second
section should further be divided into two vertical sections using <frameset>. All
three sections must have different pages
<!DOCTYPE html>
<html>
<head>
<title>Page Layout Example</title>
</head>
<frameset rows="50%, 50%">
<frame src="first_page.html" name="topFrame">
<frameset cols="50%, 50%">
<frame src="second_page.html" name="leftFrame">
<frame src="third_page.html" name="rightFrame">
</frameset>
</frameset>
</html>
8. Divide a page into two frames . Left frame should contain a list with links that
open a new web page in the second frame using target attribute
<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<body>
<div style="display: flex; height: 100vh;">
<div style="flex: 0 0 30%;">
<h2>Links</h2>
<ul><li><a href="https://www.example.com/page1" target="rightFrame">Page
1</a></li>
<li><a href="https://www.example.com/page2" target="rightFrame">Page 2</a></li>
<li><a href="https://www.example.com/page3" target="rightFrame">Page 3</a></li>
</ul>
</div>
<div style="flex: 0 0 70%;">
<iframe src="https://www.example.com/page1" name="rightFrame" style="width: 100%;
height: 100%;"></iframe>
</div>
</div></body>
</html>
9. Write HTML code to use iframe tag
<!DOCTYPE html>
<html>
<head>
<title>Iframe Example</title>
</head>
<body>
<h2>Embedded Webpage using Iframe:</h2>
<iframe src="https://www.example.com" title="Embedded Page" width="800"
height="600">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
10. Add an audio to a web page using HTML
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>

<h2>Audio Example:</h2>

<audio controls>
<source src="example_audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</body>
</html>
11. Add video to a web page using HTML
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h2>Video Example:</h2>

<video width="640" height="360" controls>


<source src="example_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
12. Create a page using inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: lightblue;">

<h1 style="color: navy; text-align: center;">Welcome to My Page</h1>

<p style="color: darkgreen; font-size: 18px;">This is an example of a paragraph on my page.


It demonstrates the usage of inline CSS for styling.</p>

<div style="width: 50%; margin: 0 auto; background-color: lightgray; padding: 20px;">


<p style="color: darkred; font-size: 16px;">This is a div with some text in it.
The text is styled using inline CSS for demonstration purposes.</p>
</div>
</body>
</html>
13. Create a webpage using internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightblue;
}

h1 {
color: navy;
text-align: center;
}

p{
color: darkgreen;
font-size: 18px;
}

div {
width: 50%;
margin: 0 auto;
background-color: lightgray;
padding: 20px;
}

.special {
color: darkred;
font-size: 16px;
}
</style>
</head>
<body>

<h1>Welcome to My Page</h1>

<p>This is an example of a paragraph on my page. It demonstrates the usage of internal


CSS for styling.</p>

<div class="special">
<p>This is a div with some text in it. The text is styled using internal CSS for
demonstration purposes.</p>
</div>

</body>
</html>
14. Create a web page using external CSS
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>Welcome to My Page</h1>

<p>This is an example of a paragraph on my page. It demonstrates the usage of external


CSS for styling.</p>

<div class="special">
<p>This is a div with some text in it. The text is styled using external CSS for
demonstration purposes.</p>
</div>

</body>
</html>

CSS
body {
font-family: Arial, sans-serif;
background-color: lightblue;
}

h1 {
color: navy;
text-align: center;
}

p{
color: darkgreen;
font-size: 18px;
}

div {
width: 50%;
margin: 0 auto;
background-color: lightgray;
padding: 20px;
}

.special {
color: darkred;
font-size: 16px;
}
15. Create a web page that uses class attribute
<!DOCTYPE html>
<html>
<head>
<title>Web Page with Class Attribute</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1 class="heading">Welcome to My Page</h1>

<p class="paragraph">This is an example of a paragraph on my page. It demonstrates the


usage of the class attribute for styling.</p>

<div class="special-div">
<p>This is a div with some text in it. The text is styled using the class attribute for
demonstration purposes.</p>
</div>

</body>
</html>

CSS
.heading {
color: navy;
text-align: center;
}

.paragraph {
color: darkgreen;
font-size: 18px;
}

.special-div {
width: 50%;
margin: 0 auto;
background-color: lightgray;
padding: 20px;
color: darkred;
font-size: 16px;
}
16. Create a web page to change the font attributes using CSS
<!DOCTYPE html>
<html>
<head>
<title>Web Page with Font Attributes</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>Welcome to My Page</h1>

<p>This is an example of a paragraph on my page. It demonstrates the usage of CSS for


changing font attributes.</p>

<div class="special-div">
<p>This is a div with some text in it. The text has different font attributes applied for
demonstration purposes.</p>
</div>

</body>
</html>

CSS
body {
font-family: Arial, sans-serif;
font-size: 16px;
}

h1 {
font-family: 'Times New Roman', Times, serif;
font-size: 24px;
font-style: italic;
color: navy;
text-align: center;
}

p{
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
color: darkgreen;
}

.special-div {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
font-style: normal;
color: darkred;
}
17. Write a HTML code to use <marquee> tag
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag Example</title>
</head>
<body>

<h2>Using the Marquee Tag:</h2>

<marquee behavior="scroll" direction="left" scrollamount="10">This text will move from


right to left.</marquee>

</body>
</html>
18. Create a login form in HTML with username and password fields
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>

<h2>Login Form</h2>

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

You might also like