Scribd
Upload
185 views16 pages

Experiment No 1

1. The document provides instructions for an experiment on creating a responsive web page using HTML, CSS, and Bootstrap. 2. Students will learn basic concepts of HTML, CSS, and Bootstrap and use them to design a responsive webpage with a sidebar and statistics cards. 3. The document outlines the objectives, problem statement, outcomes, requirements, and provides theory on HTML, CSS, Bootstrap and instructions for completing the experiment.

Uploaded by

Uddhav Rodge
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
185 views16 pages

Experiment No 1

1. The document provides instructions for an experiment on creating a responsive web page using HTML, CSS, and Bootstrap. 2. Students will learn basic concepts of HTML, CSS, and Bootstrap and use them to design a responsive webpage with a sidebar and statistics cards. 3. The document outlines the objectives, problem statement, outcomes, requirements, and provides theory on HTML, CSS, Bootstrap and instructions for completing the experiment.

Uploaded by

Uddhav Rodge
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/ 16

Web Technology Lab Manual

Experiment No. : 1
TITLE

Title: HTML, CSS, Bootstrap


OBJECTIVES

1. Understand about basic concepts of html


2. Understand the basic concepts of bootstrap
3. Understand the basic concepts of CSS

PROBLEM STATEMENT

Create a responsive web page which shows the ecommerce/college/exam admin dashboard with
sidebar and statistics in cards using HTML, CSS and Bootstrap.

OUTCOME

Students will be able to,


1. Design responsive webpage using HTML.
2. Apply Bootstrap, CSS to HTML pages.

SOFTWARE & HARDWARE REQUIREMENTS

Software: Notepad, Browser, Visual Studio Code

THEORY-CONCEPT

HTML: HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language


 HTML describes the structure of Web pages using markup
Web Technology Lab Manual

 HTML elements are the building blocks of HTML pages


 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page

 HTML Versions:

HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
Table.1: HTML Versions

Bootstrap:

Bootstrap is a free, open source front-end development framework for the creation of websites and
web apps. Designed to enable responsive development of mobile-first websites, Bootstrap provides
a collection of syntax for template designs.

As a framework, Bootstrap includes the basics for responsive web development, so developers
only need to insert the code into a pre-defined grid system. The Bootstrap framework is built on
Hypertext Markup Language (HTML), cascading style sheets (CSS) and JavaScript. Web
developers using Bootstrap can build websites much faster without spending time worrying about
basic commands and functions.

What is Bootstrap CSS?

The most popular CSS framework for developing responsive and mobile-first websites is Bootstrap.
The newest version is Bootstrap 5.

What is bootstrapping in statistics?

In statistics, bootstrapping describes the process of resampling a data set to create many simulated
samples. This approach enables users to calculate standard errors, perform hypothesis testing and
construct confidence intervals for different types of sample statistics

CSS:

CSS stands for Cascading Style Sheet. It is nothing, but design language intended to simplify
the process of making web pages presentable.CSS handles the feel and look part of a web
Web Technology Lab Manual
page.By using CSS, one can control the color of text, style of fonts, spacing between
paragraphs, layout designs.

CSS is easy to learn, easy to understandand it provides powerful control on presentation of an


HTML document.

Advantages of CSS:

It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML, Multiple
Device Compatibility, Global web standards, Offline Browsing, Platform Independence.
CSS3 Modules:
CSS3 Modules are having old CSS specifications as well as extension features.

 Box Model
 Selectors
 Background
 Border
 Image Values and Replaced Content
 Text Effect
Web Technology Lab Manual

 Animations
 2D/3D Transformations
 Multiple Column Layout
 User Interface

TECHNOLOGY / TOOL

 The <!DOCTYPE html> declaration defines this document to be HTML5


 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
 HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

CSS can be added to HTML elements in 3 ways:

 Inline - by using the style attribute in HTML elements. An inline CSS is used to apply a
unique style to a single HTML element.

Ex. <h1 style="color:blue;">This is a Blue Heading</h1>

 Internal - by using a <style> element in the <head> section. An internal CSS is used to
define a style for a single HTML page. An internal CSS is defined in the <head> section
of an HTML page, within a <style> element.

Example:<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Web Technology Lab Manual

 External - by using an external CSS file. An external style sheet is used to define the style
for many HTML pages. With an external style sheet, you can change the look of an entire
web site, by changing one file!To use an external style sheet, add a link to it in the
<head> section of the HTML page.

Example: <link rel="stylesheet" href="styles.css">

 Use the HTML <head> element to store <style> and <link> elements
 Use the CSS color property for text colors
 Use the CSS font-family property for text fonts
 Use the CSS font-size property for text sizes
 Use the CSS border property for borders
 Use the CSS padding property for space inside the border
 Use the CSS margin property for space outside the border

DESIGN / EXECUTION STEPS

Following steps are used to Create and Execute web applications,


1. Write the HTML code in notepad and save with .html extension.
2. Write the CSS code in notepad and save with .css extension.
3. Import CSS file in HTML page.
4. Open HTML page in the browser.

TEST CASES

Manual testing is used to check whether CSS gets applied or not.

CONCLUSION/ANALYSIS

Hence, we have designed static web pages using HTML and CSS.
Web Technology Lab Manual

Program Code

index.HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1" />

<!-- Bootstrap CSS -->


<link
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<link rel="stylesheet"
href="style.css" />
<link rel="preconnect"
href="https://fonts.gstatic.com" />
<link
href=
"https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
rel="stylesheet"
/>
<title>GFG</title>
</head>
<body>
<section id="navbar">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
Geeks for Geeks
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
Web Technology Lab Manual
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a class="nav-link active"
aria-current="page"
href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#product">Products</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#social">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</section>

<!-- banner -->


<section id="banner">
<div class="container-fluid" id="banner-container">
<div class="row" id="banner-row">
<div class="col-md-6" id="banner-col">
<h3>
BEST PROFESSIONAL WEBSITE DESIGN
SOFTWARE DEVELOPMENT COMPANY
</h3>

<p>
The fastest way to grow your business with the leader in
Technology
</p>

<div class="d-grid gap-2 d-md-flex justify-content-center">


<a class="btn btn-primary"
href="#"
role="button">Contact Us</a>
</div>
</div>
<div class="col-md-6" id="banner-col2">
Web Technology Lab Manual
<img
class="img-responsive rounded mx-auto d-block"
src="images/gfg.png"
alt=""
/>
</div>
</div>
</div>
</section>

<!-- services -->


<section id="service">
<h1 class="text-center">SERVICES</h1>
<div class="container-fluid" id="service-container">
<div class="row" id="banner-row">
<div class="col-md-4" id="service-col1">
<img
src="images/gfg.png"
class="img-fluid rounded mx-auto d-block"
alt="..."
/>
<h3>Website Design</h3>

<p>
User Experience Design.
Website Content Strategy.
Cross Browser
and Platform Testing.
</p>

</div>
<div class="col-md-4" id="service-col2">
<img
src="images/gfg.png"
class="img-fluid rounded mx-auto d-block"
alt="..."
/>
<h3>Bulk SMS</h3>

<p>
1.Toll Free Number
2. IVR
3. Virtual Number
4. Political or any
Voice Broadcasting
</p>

</div>
<div class="col-md-4" id="service-col3">
<img
src="images/gfg.png"
class="img-fluid rounded mx-auto d-block"
Web Technology Lab Manual
alt="..."
/>
<h3>Payment Gateways</h3>

<p>
PayU India is the flagship company of
Naspers group which is a $25
Billion internet and media conglomerate
listed on London and
Johannesburg stock exchanges respectively.
</p>

</div>
</div>
</div>
</section>
<hr />

<!-- about Us -->


<section id="about">
<h1 class="text-center">About Us</h1>
<div class="container-fluid" id="about-container">
<div class="row" id="banner-row">
<div class="col-md-6" id="about-col">
<h3>Why Us</h3>
<ul>
<li>
Probuz is all about Delivering High
Quality web design and development
services, Cost effective and
reliable solutions.
</li>
<li>SCHOOL/COLLEGE MANAGEMENT SOFTWARE
(CAMPUS PRO)</li>
<li>
Let us take care of your Business needs.
Customer Productivity is our Priority.
</li>
<li>Our expertise in Business includes</li>
</ul>
</div>
<div class="col-md-6" id="banner-col2">
<img
class="img-responsive rounded mx-auto d-block"
src="images/gfg.png"
alt=""
/>
</div>
</div>
</div>
</section>
<hr />
Web Technology Lab Manual
<!-- product -->

<section id="product">
<h1 class="text-center">Our Products</h1>
<div class="container-fluid" id="product-container">
<div class="row" id="banner-row">
<div class="col-md-6" id="about-col">
<img
class="img-responsive rounded mx-auto d-block"
src="images/gfg.png"
alt=""
/>
</div>
<div class="col-md-6" id="product-col2">
<h3>Product List</h3>

<ul>
<li>CLINIC MANAGMENT SYSTEM</li>
<li>SCHOOL/COLLEGE MANAGEMENT
SOFTWARE (CAMPUS PRO)</li>
<li>SERVICE MANAGEMENT SOFTWARE</li>
<li>E-COMMERCE WEBSITE</li>
</ul>
</div>
</div>
</div>
</section>
<hr />
<!-- social -->
<section id="social">
<h1 class="text-center">Get In Touch</h1>
<div class="d-grid gap-2 d-md-flex justify-content-center">
<div class="row align-items-center" id="social-row">
<div class="col-md-4 social-col">
<a href=""
><img
class="img-responsive rounded mx-auto d-block"
src="images/gfg.png"
alt=""
/></a>
</div>
<div class="col-md-4 social-col">
<a href=""
><img
class="img-responsive rounded mx-auto d-block"
src="images/icons8-instagram-64.png"
alt=""
/></a>
</div>
<div class="col-md-4 social-col">
<a href=""
><img
Web Technology Lab Manual
class="img-responsive rounded mx-auto d-block"
src="images/icons8-twitter-64.png"
alt=""
/></a>
</div>
</div>
</div>
</section>

<!-- footer -->


<section id="footer">
<section id="banner">
<div class="container-fluid" id="banner-container">
<div class="row" id="banner-row">
<div class="col-md-4" id="footer-col1">
<h3>My Website</h3>

<p>
At XYZ we believe that customers should
always get easy-to-use, best in the kind
and fast services.xyz has achieved
standards which helps customer to
achieve satisfaction and realize
value for their hard earned money.
</p>

</div>
<div class="col-md-4" id="footer-col2">
<h3>Contact Us</h3>

<p>Call Us- 1800-121-6532</p>

<p>Email Us- [email protected]</p>

</div>

<div class="col-md-4" id="footer-col2">


<h3>Subscribe To Newsletter</h3>
<form>
<div class="mb-3">
<input
type="email"
placeholder="Enter Your Email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
<div id="emailHelp"
class="form-text">
We'll never share your email with anyone else.
</div>
Web Technology Lab Manual
</div>
<button type="submit"
class="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
</div>
</section>
</section>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->


<script
src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
</body>
</html>

style.CSS file

*{
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
}

/* navbar */

.navbar-nav{
margin-right: 0 !important;
padding-right: 100px;
}

.navbar{
background-color: #0a193d;
color: white !important;
}

.nav-item a{
color: white !important;
}
Web Technology Lab Manual
.nav-item{
padding-left: 2px;
}

.navbar-brand{
color: white !important;
padding-left: 100px;
}

#navbar button{
color: white !important;
}

/* banner */

#banner-container{
background-color: #0a193d;
color: white !important;
padding-top: 80px;
padding-bottom: 80px;

#banner-row img{
max-width: 70%;
height: auto;
display: block;
padding-left: 30px;
}

#banner-row h3, p{
padding-left: 20px;
padding-top: 20px;
text-align: center;
}

#banner-row a{
background-color: white !important;
color: black !important;
border: none;
margin-left: 20px;
margin-top: 20px;

}
#banner-col{
padding-left: 20px;
}
/* service */
#service{
padding-top: 80px;
padding-bottom: 80px;
}
Web Technology Lab Manual

#service h1{
padding-bottom: 70px;
}

/* about */

#about{
padding-top: 80px;
padding-bottom: 80px;
}

#about h1{
padding-bottom: 70px;
}

#about-col ul{
padding-top: 50px;
padding-left: 50px;
}

#about-col ul li{
padding-top: 15px;

/* product */

#product{
padding-top: 80px;
padding-bottom: 80px;
}

#product h1{
padding-bottom: 70px;
}

#product-col2 ul{
padding-top: 90px;
}

#product-col2 ul li{
padding-top: 15px;
}

/* social */

#social{
padding-top: 80px;
padding-bottom: 80px;
}
Web Technology Lab Manual
#social h1{
padding-bottom: 70px;
}

.social-col a:hover img{


transform: translateY(-10px);
}

#social-row{
flex-direction: row;
}

/* footer */

.mb-3{
padding-top: 10px;
}

/* media */
@media only screen and (max-width: 987px){
.navbar-brand{
padding-left: 0px;
}
}

@media only screen and (max-width: 768px){


#banner-row img{
padding-top: 20px;
}

.social-col{
width: 33%;
}

}
Web Technology Lab Manual

ORAL QUESTIONS

1. What is the difference between HTML and HTML5?


2. What is the difference between html elements and tags?
3. What is marquee?
4. What is the use of span tag? Give an example?
5. What is the use of ‘required ’attribute in HTML5?
6. What is External stylesheet? What are the advantages and disadvantages?
7. What is CSS selector?
8. What are the components of CSS style?
9. What are browser safe color?

You might also like