Scribd
Upload
30 views

E Commerce Lab File

The document is an index for an ecommerce lab file submitted by a student to their faculty member. It lists 38 topics related to HTML coding concepts covered in the lab, including how to create basic HTML pages and elements, format text, add images and links, and structure information using tables, lists and forms. The index provides a high-level overview of the key areas of HTML addressed in the student's ecommerce lab assignment.

Uploaded by

R.S Cheetah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views

E Commerce Lab File

The document is an index for an ecommerce lab file submitted by a student to their faculty member. It lists 38 topics related to HTML coding concepts covered in the lab, including how to create basic HTML pages and elements, format text, add images and links, and structure information using tables, lists and forms. The index provides a high-level overview of the key areas of HTML addressed in the student's ecommerce lab assignment.

Uploaded by

R.S Cheetah
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 47

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>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

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

<h1>This is heading 1</h1>


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

<h2>This is heading 2</h2>


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

<h2>This is heading 2</h2>


<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: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</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>

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


</body>
</html>
25. HTML Table with Headings

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</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>
26. HTML Table with Caption
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<table style="width:100%">
<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 {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</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>

<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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

<h2>Horizontal Headings:</h2>

<table style="width:100%">
<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>

<table style="width:100%">
<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>

<form action="/action_page.php">
<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>

<form action="/action_page.php">
<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>

You might also like