Scribd
Upload
7 views

msd lab1

The document outlines various experiments related to enhancing an HTML webpage for IEKart's Shopping Application. It includes aims and descriptions for adding metadata, sectioning elements, grouping elements, linking pages, adding special characters, and incorporating global attributes. Each experiment is accompanied by sample HTML code demonstrating the implementation of the described features.

Uploaded by

ftuy5435
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

msd lab1

The document outlines various experiments related to enhancing an HTML webpage for IEKart's Shopping Application. It includes aims and descriptions for adding metadata, sectioning elements, grouping elements, linking pages, adding special characters, and incorporating global attributes. Each experiment is accompanied by sample HTML code demonstrating the implementation of the described features.

Uploaded by

ftuy5435
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

EXPERIMENT 1A)

AIM:
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.

DESCRIPTION:Case-insensitivity: HTML is case-insensitive, meaning that tags


and attributes can be written in uppercase or lowercase letters and will still
be recognized by the browser. Platform-independency: HTML is platform-
independent, meaning that it can be viewed on any device or operating
system with a web browser.

DOCTYPE Declaration: The DOCTYPE declaration is used at the beginning of


an HTML document to specify the version of HTML being used and to ensure
that the document is rendered correctly by web browsers.

Types of Elements: HTML has several types of elements, including structural


elements (such as <html>, <head>, and <body>), text-level elements (such
as <p> and <span>), and multimedia elements (such as <img>, <audio>,
and <video>).

HTML Elements - Attributes: HTML elements can be customized with


attributes, which provide additional information about the element and how
it should be displayed or used. Examples of attributes include "class" for
defining CSS styles, "id" for identifying a specific element, and "href" for
specifying a hyperlink.

Metadata Element: The metadata element (<meta>) is used to provide


information about the HTML document that is not displayed in the browser
window. This includes information such as the author, description, and
keywords, which can be used by search engines to index and display the
webpage in search results.
PROGRAM:
<!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 bgcolor=teal>
<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>

1.b )
AIM:
Enhance the Homepage.html of IEKart's Shopping Application by adding
appropriate sectioning elements.
DESCRIPTION:
Sectioning elements in HTML are used to divide the content of a web page
into logical sections,making it easier for users to understand and navigate
the content. These elements include <header>, <nav>, <section>,
<article>, <aside>, and <footer>. The <header> element is used to
identify the header section of a page, while the <nav> element is used to
define a set of navigation links.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IEKart's Shopping Application Homepage</title>
<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.">
</head>
<body>
<header>
<!-- Header content goes here -->
</header>
<nav>
<!-- Navigation links go here -->
</nav>
<main>
<section>
<h1>Featured Products</h1>
<!-- Content for featured products section goes here -->
</section>
<section>
<h1>Categories</h1>
<!-- Content for categories section goes here -->
</section>
<section>
<h1>Deals of the Day</h1>
<!-- Content for deals section goes here -->
</section>
</main>
<aside>
<!-- Sidebar content goes here -->
</aside>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
</html>

1.c )
AIM: Make use of appropriate grouping elements such as list
items to "About Us" page of IEKart's Shopping Application
DESCRIPTION:Paragraph Element: The <p> element is used to define a
paragraph of
text in HTML.
Division and Span Elements: The <div> and <span> elements are used to
group elements and apply styles or classes to them. The <div> element is a
block-level element, while the <span> element is an inline-level element.
List Element: The <ul>, <ol>, and <li> elements are used to create lists in
HTML. The <ul> element creates an unordered list, the <ol> element
creates an ordered list, and the <li> element defines each item in the list.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>About Us - IEKart's Shopping Application</title>
</head>
<body bgcolor=orange>
<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>

1.d )
AIM:
Link "Login", "SignUp" and "Track order" to "Login.html", "SignUp.html" and
"Track.html" page respectively. Bookmark each category to its details of
IEKart's
Shopping application.
DESCRIPTION:
The Link element (<link>) is an HTML element used to define a relationship
between the current document and an external resource. This element is
commonly used to link stylesheets to an HTML document, allowing the page
to be styled with CSS.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>IEKart's Shopping Application</title>
</head>
<body>
<ul>
<li><a href="Homepage.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Login.html">Login</a></li>
<li><a href="SignUp.html">Sign Up</a></li>
<li><a href="Track.html">Track Order</a></li>
</ul>
<h1>About Us</h1>
<p>...</p>
<h2>Categories</h2>
<ul>
<li><a href="#electronics">Electronics</a></li>
<li><a href="#clothing">Clothing</a></li>
<li><a href="#accessories">Accessories</a></li>
</ul>
<h2 id="electronics">Electronics</h2>
<p>...</p>
<h2 id="clothing">Clothing</h2>
<p>...</p>
<h2 id="accessories">Accessories</h2>
<p>...</p>
<footer>
<p>Copyright © 2023 IEKart's Shopping Application</p>
</footer>
</body>
</html>

1.e )
AIM: Add the © symbol in the Home page footer of IEKart's
Shopping application.
DESCRIPTION:
In HTML, character entities are special codes used to represent special
characters that are not part of the standard character set. These entities are
defined by their unique entity name or a numeric code and are used to
display symbols, foreign characters, mathematical symbols, and more.
Examples of character entities include < for <, > for >, and & for &.
PROGRAM:
<footer>
<p>Copyright © 2023 IEKart's Shopping Application</p>
</footer>
1.F)
AIM:
Add the global attributes such as contenteditable, spellcheck, id etc. to
enhance the
Signup Page functionality of IEKart's Shopping application.
DESCRIPTION:HTML5 Global Attributes are attributes that can be used on any
HTML
element and are not limited to specific elements. These attributes can be
used to provide additional information about an element, such as defining
the class or id, setting styles, and assigning event handlers. Some commonly
used global attributes include "class", "id", "style","title", and "data-*".

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Signup Page - IEKart's Shopping Application</title>
</head>
<body>
<h1>Signup</h1>
<form action="signup.php" method="POST">
<label for="username">Username:</label>
<input type="text" name="username" id="username" required
contenteditable="true"><br><BR>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required spellcheck="true">
<br><BR>
<label for="password">Password:</label>
<input type="password" name="password" id="password" required>
<br><BR>
<label for="confirm_password">Confirm Password:</label>
<input type="password" name="confirm_password" id="confirm_password"
required><br><BR>
<input type="submit" value="Signup">
</form>
</body>
</html>

You might also like