STELLA MARIS COLLEGE (AUTONOMOUS), CHENNAI
DEPARTMENT OF COMPUTER SCIENCE
23CS/MC/P342 – Web Programming Practical
Exercise 5 – Tutorial
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>SMCSoft</title>
<meta charset="utf-8">
<style type="text/css">
/* Set the background color of the body to gray */
body {
background-color: gray;
}
/* Style the fullpage div, which contains all content */
#fullpage {
width:90%; /* Make the width 90% of the page */
position: absolute;
top:0;
bottom: 0;
1
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
left: 0;
right: 0;
margin: auto; /* Center the div horizontally and vertically */
background-color: ghostwhite;
}
/* Style the main element, which contains all the main content */
main {
background-color: ghostwhite;
}
/* Style the header navigation */
#headernav {
display:inline; /* Display elements inline */
text-align: right; /* Align navigation items to the right */
position:absolute;
top:20px;
right:80px; /* Position navigation items according to the design */
}
/* Style for the telephone number in the header */
#tel {
display:inline;
}
/* Style for anchor (a) tags */
2
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
a{
color:black; /* Change link color to black */
text-decoration: none; /* Remove underline from links */
padding:10px; /* Add padding around each link */
}
/* Style for the page name inside the header */
#pagename {
font-family: Arial; /* Set font family */
font-size: 20px; /* Set font size */
padding-left: 50px; /* Add left padding */
}
/* Style for the banner image */
#bannerimg {
width:100%; /* Set the image width to 100% of the div */
height: 300px; /* Set the height of the image */
}
/* Style for the logo images */
.logo {
height:50px;
width:55px;
vertical-align: middle; /* Vertically align images to the middle */
}
3
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
/* Style for table and table data (td) elements */
table, td {
vertical-align: middle;
text-align: center;
}
/* Style for paragraphs within table data cells */
td p {
text-align: justify; /* Justify text */
padding:0 30px 0 30px; /* Add padding around paragraphs */
}
/* Additional styling for table data cells */
td {
padding-top:30px; /* Add padding on top */
margin:0 20px 0 20px; /* Add margin around cells */
}
/* Style for the article element */
article {
background-color: lightgray; /* Set background color */
padding:50px; /* Add padding around article */
}
/* Style for section elements inside article */
section {
4
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
display: inline-block; /* Display sections inline-block */
width: 49%; /* Set width to make sections fit side by side */
}
/* Style for section 1 to align it to the top */
#sec1 {
vertical-align: top;
}
/* Style for the button */
button {
border-style: none; /* Remove border */
padding:3px 10px; /* Add padding around text */
font-family: Times New Roman; /* Change font */
border-radius: 3px; /* Make button edges rounded */
}
/* Style for the secondary table below the article */
#tabletwo {
width:100%; /* Make the table take full width */
background-color: white; /* Set background color */
}
/* Style for table data cells in #tabletwo */
#tabletwo td {
padding: 0; /* Remove padding */
5
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
}
/* Style for paragraphs in #tabletwo cells */
#tabletwo p {
text-align: center;
vertical-align: top; /* Align text to the top */
}
/* Style for the empty div below #tabletwo */
#spacediv {
background-color: white; /* Set background color */
height:175px; /* Set height */
}
/* Style for footer */
footer {
background-color:#565656; /* Set footer background color */
height:28px; /* Set height */
margin-top: 0px;
padding-top: 25px; /* Add top padding */
text-align: center;
font-size: 10px; /* Make font smaller */
color: white; /* Change text color to white */
line-height: 0; /* Remove space between lines */
}
6
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
/* Style for links in the footer navigation */
#footernav a {
color:white; /* Set link color to white */
padding:3px; /* Add padding around links */
}
</style>
</head>
<body>
<div id="fullpage">
<!-- Header section with website name and navigation links -->
<header>
<b><p id="pagename">SMCSoft</p></b>
<nav id="headernav">
<a href="#">HOME</a>
<a href="#">PRODUCTS</a>
<a href="#">SERVICES</a>
<a href="#">SOLUTIONS</a>
<a href="#">ABOUT US</a>
<a href="#">CONTACT</a>
<p id="tel">+880 1717 270 043</p>
</nav>
</header>
7
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
<!-- Main section containing banner, logos, and additional sections -->
<main>
<img src="[Link]" id="bannerimg">
<table>
<tr>
<td>
<img src="[Link]" class="logo">
<b><p><center>Software Solutions</center></p></b>
<p>We provide cutting-edge software solutions for businesses to enhance efficiency and productivity.</p>
</td>
<td>
<img src="[Link]" class="logo">
<b><p><center>IT Consulting</center></p></b>
<p>Our expert IT consultants help businesses optimize their IT infrastructure and digital strategy.</p>
</td>
<td>
<img src="[Link]" class="logo">
<b><p><center>Cloud Services</center></p></b>
<p>We offer cloud-based solutions that help businesses scale, store data securely, and enhance collaboration.</p>
</td>
<td>
<img src="[Link]" class="logo">
8
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
<b><p><center>Digital Transformation</center></p></b>
<p>We help businesses undergo digital transformation by integrating the latest technologies into their operations.</p>
</td>
</tr>
</table>
<br>
<br>
<!-- Article containing two sections and a button -->
<article>
<section id="sec1">
<p>Welcome to SMCSoft, your trusted partner for all your IT needs.</p>
<h2>Our Vision</h2>
<p>At SMCSoft, we aim to empower businesses with innovative IT solutions that drive success and transformation in the digital
age.</p>
<button>Learn More</button>
</section>
<section>
<center><img src="[Link]"></center>
</section>
<!-- Secondary table with titles inside article -->
<table id="tabletwo">
<tr>
9
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
<td>
<center><p>Our Expertise in</p></center>
<h2>Software Development</h2>
</td>
<td>
<center><p>Innovative</p></center>
<h2>IT Consulting</h2>
</td>
<td>
<p>End-to-End Solutions</p>
<h2>Cloud Integration</h2>
</td>
</tr>
</table>
<div id="spacediv">
</div>
</article>
</main>
<!-- Footer section with links and copyright text -->
<footer>
<nav id="footernav">
<a href="#">Home</a>|
10
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
<a href="#">Our Work</a>|
<a href="#">Testimonials</a>|
<a href="#">Projects</a>|
<a href="#">Contact</a>
<p>© SMCSoft 2021. All Rights Reserved</p>
</nav>
</footer>
</div>
</body>
</html>
11
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical
Output:
12
Stella Maris College (Autonomous) 23CS/MC/P342 Web Programming Practical