E Commerce Lab File

Fairfield Institute of Management and
Technology
Ecommerce Lab File
Subject Name: Ecommerce Lab
Subject Code: BCOM308
Submitted to: Submitted by:

Name of the Faculty Name: _
Enrollment no:
Course:
Semester/Section:
Index
Sr. No. Topic Date

1. To Create a Simple Webpage using HTML coding
2. HTML headings
3. HTML paragraphs
4. HTML links
5. HTML images
6. The HTML title attributes
7. The width and height attributes
8. HTML Horizontal rules
9. HTML head
10. HTML Paragraphs
11. Line Breaks in HTML
12. Pre Tag in HTML
13. HTML Styles
14. HTML Background Color
15. HTML text color
16. HTML Text Font
17. HTML Text Size
18. HTML text alignment
19. Bold formatting using the <b> element
20. Italic formatting using the <i> element
21. Linking, using an absolute URL
22. HTML Tables
23. HTML Table with borders
24. HTML Table with Cell Padding
25. HTML Table with Headings
26. HTML Table with Caption
27. HTML Table with Cell spacing
28. HTML Table with Horizontal and Vertical Headings
29. Unordered HTML List
30. Ordered HTML List
31. Ordered List with Letters
32. Nested List
33. HTML Form with Text Input
34. HTML form with Radio Button
35. HTML Form with Text field and submit Button
36. A simple Drop down list
37. TEXT Area in an HTML form.
38. User Name and Password Option in an HTML form
1. To Create a Simple Webpage using HTML coding
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:
2. HTML headings
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
3. HTML paragraphs
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
4 HTML links
<html>
<body>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
5 HTML images
<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
6 The HTML title attributes
<html>
<body>
<h2 title="I'm a header">The title attribute</h2>
<p title="I'm a tooltip">

Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>
7 The width and height attributes
<html>
<body>
<img src="1.jpg" width="500" height="600">
</body>
</html>
8 HTML Horizontal rules
<html>
<body>

<p>This is some text.</p>
<hr>

<p>This is some other text.</p>
<hr>

<p>This is some other text.</p>
</body>
</html>
9 HTML head
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>
</body>
</html>
10 HTML Paragraphs
<html>
<body>
<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 the browser window. If you resize the
browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
11 Line Breaks in HTML
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
12. Pre Tag in HTML
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
</body>
</html>
13. HTML Styles
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
</body>
</html>
14. HTML Background Color
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
15. HTML text color
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
16. HTML Text Font
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
17. HTML Text Size
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
18. HTML text alignment
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
19. Bold formatting using the <b> element
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
20. Italic formatting using the <i> element
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
21. Linking, using an absolute URL
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
22. HTML Tables
<html>
<body>
<h2>HTML Tables</h2>
<p>HTML tables start with a table tag.</p>

<p>Table rows start with a tr tag.</p>
<p>Table data start with a td tag.</p>
<hr>
<h2>1 Column:</h2>
<table>
<tr>
<td>100</td>
</tr>
</table>
<hr>
<h2>1 Row and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<hr>
<h2>3 Rows and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
<hr>
</body>
</html>
23. HTML Table with borders
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
24. HTML Table with Cell Padding
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>

</body>
</html>
25. HTML Table with Headings
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
26. HTML Table with Caption
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
27. HTML Table with Cell spacing
<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
28. HTML Table with Horizontal and Vertical Headings
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Horizontal Headings:</h2>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>Vertical Headings:</h2>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
29. Unordered HTML List
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
30. Ordered HTML List
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
31. Ordered List with Letters
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
32. Nested List
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
33. HTML Form with Text Input
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
34. HTML form with Radio Button
<html>
<body>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
35. HTML Form with Text field and submit Button
<html>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
36. A simple Drop down list
<html>
<body>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
37. TEXT Area in an HTML form.
<html>
<body>
<textarea name="message" rows="10" cols="30">The cat was playing in the
garden.</textarea>
<br>
<input type="submit">
</form>
</body>
</html>
38. User Name and Password Option in an HTML form
<html>
<body>
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>

E Commerce Lab File

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E Commerce Lab File

Uploaded by

Copyright:

Available Formats

Fairfield Institute of Management and

Ecommerce Lab File

Subject Name: Ecommerce Lab

Subject Code: BCOM308

Submitted to: Submitted by:

Sr. No. Topic Date

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<h1>This is heading 1</h1>

<a href="https://www.w3schools.com">This is a link</a>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

<h2 title="I'm a header">The title attribute</h2>

<p title="I'm a tooltip">

<img src="1.jpg" width="500" height="600">

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h2>This is heading 2</h2>

<p>The HTML head element contains meta data.</p>

<p>This is<br>a paragraph<br>with line breaks</p>

<p>The pre tag preserves both spaces and line breaks:</p>

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

<h1 style="color:blue;">This is a heading</h1>

<h1 style="font-family:verdana;">This is a heading</h1>

<h1 style="font-size:300%;">This is a heading</h1>

<h1 style="text-align:center;">Centered Heading</h1>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

<p>HTML tables start with a table tag.</p>

<p>Try to change the padding to 5px.</p>

<p>Try to change the border-spacing to 5px.</p>

<h2>An unordered HTML list</h2>

<h2>An ordered HTML list</h2>

<h2>Ordered List with Letters</h2>

<h2>A Nested List</h2>

<p>Note that the form itself is not visible.</p>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

You might also like