Scribd
Upload
12 views

Ecom File

Uploaded by

Amit Rai.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Ecom File

Uploaded by

Amit Rai.
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

List Of Programs

S.no Title Remark

1 Design a page having suitable background color


and text color with title “My First Web Page” using all the
attributes of the Font tag.
2 Create a HTML document giving details of your [Name,
Age], [Address, Phone] and [Register Number, Class]
aligned in proper order using
alignment attributes of Paragraph tag.
3 Write HTML code to design a page containing
some text in a paragraph by giving suitable heading style.

4 Write HTML code to create a Web Page that


contains an Image at its center.
5 Create a web page with an appropriate image towards the
left-hand side of the page, when the user clicks on the image
another web page should
open.
6 Create web Pages using Anchor tag with its attributes for
external links.
7 Create a web page for internal links; when the user clicks on
different links on the web page it should go to the
appropriate locations/sections in the
same page.
8 Write a HTML code to create a web page with a pink color
background and display moving
messages in red color.
9 Create a web page, showing an ordered list of all sixth
semester courses
10 Create a HTML document containing a nested list showing a
content page of any book.
1. Design a page with a suitable background color and text color with the title “My
First Web Page” using all the Font tag attributes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body bgcolor="#f0f0f0" text="#333333">
<h1><font face="Arial" size="6" color="blue">My First Web Page</font></h1>
<p><font face="Verdana" size="4" color="green">Welcome to my first web page!</font></p>
<p><font face="Helvetica" size="3" color="black">This page demonstrates the use of various
attributes of the font tag to style text.</font></p>
<p><font face="Times New Roman" size="3" color="red">Feel free to explore!</font></p>
</body>
</html>

Output

2. Create an HTML document giving details of your [Name, Age], [Address, Phone] and [Register
Number, Class] aligned in the proper order using alignment attributes of the Paragraph tag.

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Details</title>
</head>
<body>

<h1>Personal Details</h1>

<p><strong>Name:</strong> <span align="right">Mahima Kumari</span></p>


<p><strong>Age:</strong> <span align="right">21</span></p>
<p><strong>Address:</strong> <span align="right">21/D Railway Colony, New Farakka, West Bengal, India
742232</span></p>
<p><strong>Phone:</strong> <span align="right">+91 9608922595</span></p>
<p><strong>Register Number:</strong> <span align="right">College Roll No: 218030 </span></p>
<p><strong>Class:</strong> <span align="right">Your Class</span></p>

</body>
</html>
Output

3. Write HTML code to design a page containing some text in a paragraph by


giving a suitable heading style.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Heading and Paragraph</title>
<style>
/* CSS for styling */
h1 {
color: #333; /* Heading color */
font-family: Arial, sans-serif; /* Heading font family
*/ font-size: 24px; /* Heading font size */
text-decoration: underline; /* Heading underline */
}

p{
color: #666; /* Paragraph color */
font-family: Arial, sans-serif; /* Paragraph font family
*/ font-size: 16px; /* Paragraph font size */
line-height: 1.5; /* Paragraph line height */
}
</style>
</head>
<body>

<!-- Heading -->


<h1>About Me</h1>

<!-- Paragraph -->


<p>Hi, I am Mahima Kumari currently pursuing BBA from St Andrews institute of technology and
Management. Highly motivated and results-oriented SEO Executive student with a passion for driving
organizational success. Eager to leverage theoretical knowledge gained through coursework to make a
significant impact in a dynamic business environment. Possess analytical, and problem-solving skills,
coupled with a collaborative mindset to achieve out comes. Committed to continuous learning and
professional development as a SEO Off page. Seeking an entry-level Digital Marketing Job position to
contribute to a forward-thinking organization's growth and success
</p>

</body>
</html>

Output
4. Write HTML code to create a Web Page that contains an Image at its center.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Image</title>
<style>
/* Style for the container */
.container {
display: flex; /* Use flexbox for centering */
justify-content: center; /* Center horizontally
*/ align-items: center; /* Center vertically */
height: 100vh; /* Full viewport height */
}

/* Style for the image */


img {
max-width: 100%; /* Ensure the image doesn't exceed container width */
max-height: 100%; /* Ensure the image doesn't exceed container height
*/
}
</style>
</head>
<body>
<!-- Container for centering -->
<div class="container">
<!-- Image to be centered -->
<img src="C:\Users\DELL\Desktop\image.JPEG" alt="Centered Image">
</div>

</body>
</html>

Output
5. Create a web page with an appropriate image towards the left-hand side of the
page, when the user clicks on the image another web page should open.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Link</title>
</head>
<body>

<!-- Anchor tag containing the image -->


<a href="https://saitm.ac.in/">
<img src="C:\Users\DELL\Desktop\images.jpg" alt="Clickable Image" style="float:
left; margin-right: 20px;">
</a>

<!-- Text content -->


<p>St. Andrews Institute of Technology & Management is located in the industrial hub
of India Gurgaon, Delhi (NCR). It is spread across 22 acres of lush green campus with
the globally acknowledged infrastructure. The Classrooms are centrally air-conditioned
equipped with modern technology for teaching. The Teaching and Non-Teaching Staff of
the Institute is a blend of Senior Experienced and Young, Dynamic faculty members
devoted to the noble cause of education. We, at St. Andrews look towards creating a
workforce that lives and breathes the same spirit. We give importance to Practical
Training, Self-Learning, Coupled with Discipline, which attracts students from overall
India.</p>

</body>
</html>

Output-
6. Create web Pages using an Anchor tag with its attributes for external links.

● Simple External Link:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>St. Andrews Institute</title>
</head>
<body>
<!-- Anchor tag for external link -->
<a href="https://saitm.ac.in/">St. Andrews Institute</a>

</body>
</html>

Output

● External Link with Target Attribute (Opens in New Tab):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>St. Andrews Institute</title>
</head>
<body>

<!-- Anchor tag with target attribute for external link -->
<a href="https://saitm.ac.in/" target="_blank">St. Andrews Institute (Opens in New Tab)</a>

</body>
</html>

Output

● External Link with Title Attribute (Tooltip):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>St. Andrews Institute</title>
</head>
<body>

<!-- Anchor tag with title attribute for external link -->
<a href="https://saitm.ac.in/" title="St. Andrews Institute">Hover to see tooltip</a>

</body>
</html>
Output

● External Link with Class Attribute (Styled Link):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>St. Andrews Institute</title>
<style>
/* Style for the link */
.external-link {
color: Red;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Anchor tag with class attribute for external link -->
<a href="https://saitm.ac.in/" class="https://saitm.ac.in/course/bachelor-of-business-administration/">St. Andrews
Institute</a>
</body>
</html>
Output

7. Create a web page for internal links; when the user clicks on different links on
the web page it should go to the appropriate locations/sections on the same page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COURSE</title>
<style>
/* Style for the sections */
section {
margin-bottom: 20px; /* Add some space between sections */
}

/* Style for the navigation links */


nav a {
display: block; /* Display links as block elements */
margin-bottom: 10px; /* Add some space between links
*/
}
</style>
</head>
<body>

<!-- Navigation links -->


<nav>
<a href="#BTech - Computer Science Engineering (CSE)">Go to BTech - Computer Science
Engineering (CSE)</a>
<a href="#BBA">Go to BBA</a>
<a href="#BCA">Go to BCA</a>
</nav>

<!-- Sections -->


<section id="BTech - Computer Science Engineering (CSE)">
<h2>BTech - Computer Science Engineering (CSE)</h2>
<p>B.Tech in Computer Science and Engineering (CSE) is more than just a degree; it's a
gateway to the evolving world of technology. This program not only equips students with a
profound understanding of computing systems but also prepares them for innovative
contributions in the tech world. In today's fast-paced digital era, the importance of CSE cannot
be overstated, as it forms the backbone of various technological advancements shaping our
future.</p>
<p><a href="#top">Back to Top</a></p>
</section>

<section id="BBA">
<h2>BBA</h2>
<p>Bachelor of Business Administration or BBA at SAITM is one of the trending bachelor’s
degree programs that students opt for after completing school. The Bachelor of Business
Administration (BBA) course offered by SAITM is comprehensive and inclusive of various
aspects of new-age learning.</p>
<p><a href="#top">Back to Top</a></p>
</section>

<section id="BCA">
<h2>BCA</h2>
<p>The Bachelor of Computer Applications (BCA) program is a highly sought-after degree in
the field of computer science. BCA is an undergraduate program that offers a comprehensive
understanding of computer applications and equips students with the necessary skills to excel in
the ever-evolving world of technology.</p>
<p><a href="#top">Back to Top</a></p>
</section>
<!-- Anchor for top -->
<p id="top"><a href="#">Back to Top</a></p>

</body>
</html>

Output
8. Write an HTML code to create a web page with a pink color background and
display moving messages in red color.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving Messages</title>
<style>
/* Style for the body */
body {
background-color: #ffcccc; /* Pink background color */
overflow: hidden; /* Hide overflow content */
position: relative; /* Set position relative */
}

/* Style for the moving messages */


.moving-message {
position: absolute; /* Set position absolute */
top: 50%; /* Position from top */
left: -100%; /* Initially start from left */
color: red; /* Red text color */
font-size: 24px; /* Font size */
animation: moveMessage 10s linear infinite; /* Animation for moving message */
}

/* Keyframes for moving the message


*/ @keyframes moveMessage {
0% {
left: -100%; /* Start position */
}
100% {
left: 100%; /* End position */
}
}
</style>
</head>
<body>

<!-- Moving message -->


<div class="moving-message">St. Andrews Institute of Technology & Management (SAITM) is a top
private institute of engineering and management in Gurugram</div>

</body>
</html>

Output
9. Create a web page, showing an ordered list of all sixth-semester courses

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BBA Sixth (6th) Semester Courses</title>
</head>
<body>
<h1>BBA Sixth (6th) Semester Courses</h1>
<ol>
<li>Income Tax</li>
<li>System Analysis and Design</li>
<li>Foundations of International Business</li>
<li>Consumer Protection</li>
<li>E-Commerce</li>
<!-- Add more courses as needed -->
</ol>
</body>
</html>

Output
10. Create an HTML document containing a nested list showing a content page of
any book.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Content Page</title>
</head>
<body>

<h1>MDU BBA Notes</h1>

<h2>Contents</h2>

<!-- Nested list representing the content page -->


<ul>
<li>Chapter 1: Introduction
<ul>
<li>Section 1: Overview</li>
<li>Section 2: Background</li>
</ul>
</li>
<li>Chapter 2: The Main Idea
<ul>
<li>Section 1: Definition</li>
<li>Section 2: Examples</li>
</ul>
</li>
<li>Chapter 3: Conclusion</li>
<!-- Add more chapters and sections as needed -->
</ul>

</body>
</html>

Output -

You might also like