Scribd
Upload
4 views

E-Commerce_Lab_HTML_with_Outputs

Uploaded by

nikhul666
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
4 views

E-Commerce_Lab_HTML_with_Outputs

Uploaded by

nikhul666
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/ 4

E-Commerce Lab HTML Code with Output

1. Basic HTML Structure


<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to E-Commerce Lab</h1>
<p>This is a simple HTML page.</p>
</body>
</html>

Output: Displays a heading 'Welcome to E-Commerce Lab' and a paragraph underneath.

2. Text Formatting
<!DOCTYPE html>
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<h1>Formatting Example</h1>
<p><b>Bold</b> text</p>
<p><i>Italic</i> text</p>
<p><u>Underline</u> text</p>
<p style="color:blue; font-family:Arial;">Styled text</p>
</body>
</html>

Output: Displays bold, italic, underlined, and styled text in different formats.

3. Lists
<!DOCTYPE html>
<html>
<head><title>Lists</title></head>
<body>
<h2>Ordered List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Amazon</li>
<li>Flipkart</li>
<li>Snapdeal</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
</body>
</html>

Output: Shows ordered, unordered, and definition lists with example items.

4. Hyperlinks
<!DOCTYPE html>
<html>
<head><title>Links</title></head>
<body>
<a href="https://www.google.com" target="_blank">Visit Google</a><br>
<a href="page2.html">Go to Page 2</a>
</body>
</html>

Output: Displays two links, one to Google and one to a second page.

5. Tables
<!DOCTYPE html>
<html>
<head><title>Tables</title></head>
<body>
<table border="1">
<tr>
<th>Name</th><th>Course</th>
</tr>
<tr>
<td>Rahul</td><td>BBA</td>
</tr>
<tr>
<td>Priya</td><td>BBA</td>
</tr>
</table>
</body>
</html>

Output: Displays a table with Name and Course headers and two rows.

6. Forms
<!DOCTYPE html>
<html>
<head><title>Forms</title></head>
<body>
<form>
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
Gender:
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br>
Hobbies:
<input type="checkbox" name="hobby" value="Reading"> Reading
<input type="checkbox" name="hobby" value="Music"> Music<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output: Displays form elements including inputs, radio buttons, checkboxes, and submit.

7. Frames
<!DOCTYPE html>
<html>
<frameset cols="50%,50%">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
</html>

Output: Splits the browser into two frames loading separate pages (note: outdated).

8. Multimedia
<!DOCTYPE html>
<html>
<head><title>Multimedia</title></head>
<body>
<img src="image.jpg" alt="Sample Image" width="300"><br>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio><br>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
</body>
</html>

Output: Displays an image, audio player, and video player.

9. Webpage Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container { width: 100%; display: flex; }
.left { width: 30%; background-color: #f0f0f0; padding: 10px; }
.right { width: 70%; padding: 10px; }
</style>
</head>
<body>
<div class="container">
<div class="left">Sidebar</div>
<div class="right">
<h1>Content Area</h1>
<p>This is a sample layout using div.</p>
</div>
</div>
</body>
</html>

Output: Shows a layout with sidebar and content section using flexbox.

You might also like