Scribd
Upload
2 views

MST r

The document outlines exercises for an HTML5 course, focusing on various elements such as metadata, sectioning elements, and grouping elements. It includes code examples for a homepage and an 'About Us' page for an online shopping website named IEKart's. The exercises emphasize the importance of structure and organization in HTML documents.

Uploaded by

Lahari Kastala
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
2 views

MST r

The document outlines exercises for an HTML5 course, focusing on various elements such as metadata, sectioning elements, and grouping elements. It includes code examples for a homepage and an 'About Us' page for an online shopping website named IEKart's. The exercises emphasize the importance of structure and organization in HTML documents.

Uploaded by

Lahari Kastala
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/ 6

MST LAB

EXERCISE -1 DATE :
COURSE NAME: HTML5 - The Language
1(A) MODULE NAME : Case-insensitivity, Platform-independency, DOCTYPE Declaration,
Types of Elements, HTML Elements - Attributes, Metadata Element Include the Metadata
element in Homepage.html for providing description as "IEKart's is an online shopping website
that sells goods in retail. This company deals with various categories like Electronics, Clothing,
Accessories etc.

HOMEPAGE.HTML :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="description" content="IEKart's is an online shopping website that sells goods in retail.
This company deals with various categories like Electronics, Clothing, Accessories etc.">

<title>IEKart's Shopping</title>
</head>
<body>
<h1>Welcome to IEKart's Shopping!</h1>
<p>We sell a variety of products in different categories such as Electronics, Clothing, Accessories and
more!</p>

</body>
</html>

Department of CSE-DS, SVIST, TIRUVURU-521235. Page | 1


MST LAB

OUTPUT:

COURSE NAME: HTML5 - The Language


1(B) MODULE NAME : Sectioning Elements
Enhance the Homepage.html of IEKart's Shopping Application by adding appropriate
sectioning elements.

PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Department of CSE-DS, SVIST, TIRUVURU-521235. Page | 2


MST LAB

<title>IKcart Shopping</title>
</head>
<body>
<link rel="stylesheet" href="new.css">
<script src="https://kit.fontawesome.com/7764471369.js"
crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-dark p-3">
<a class="navbar-brand" style="color: white;"href="#">GVR Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-
controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
Department of CSE-DS, SVIST, TIRUVURU-521235. Page | 3
MST LAB

<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#cont" style="color: white;font-weight: 700;">Home
<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#e" style="color: white;font-weight:
700;">Electronics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#c" style="color: white;font-weight:
700;">Clothing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#a" style="color: white; font-weight:
700;">Sports</a>
</li>
OUTPUT:

Department of CSE-DS, SVIST, TIRUVURU-521235. Page | 4


MST LAB

1(C) COURSE NAME: HTML5 - The Language


MODULE NAME : Paragraph Element, Division and Span Elements, List Element
Make use of appropriate grouping elements such as list items to "About Us" page of IEKart's
Shopping Application

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>About Us - IEKart's Shopping Application</title>
</head>
<body>
<h1>About Us</h1>
<p>We are IEKart's, an online shopping website that sells goods in retail.</p>
<h2>Our Team</h2>
<ul>
<li>John Smith - CEO</li>
<li>Jane Doe - Marketing Director</li>
<li>Bob Johnson - Chief Financial Officer</li>
</ul>
<h2>Our Mission</h2>
<ul>

<li> To provide high-quality products at affordable prices to our customers.</li>

<li>To create a seamless online shopping experience for our customers.</li>


<li>To continuously innovate and improve our offerings to meet the changing needs of our
customers.</li>
</ul>
</body>
</html>

Department of CSE-DS, SVIST, TIRUVURU-521235. Page | 5


MST LAB

OUTPUT:

Department of CSE-DS, SVIST, TIRUVURU-521235. Page | 6

You might also like