MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

Micro project on :
Design a Web page for opening multiple windows in
browser at once
Is submitted as per I scheme curriculum and the
requirement for the program: Diploma in computer
ENENGINEERING
Course on:-
Cascading style sheets

Project Guide :- Prof Mr.S.R.Sheikh

Sr.No GROUP MEMBER NAME Roll.No

1 Chavan Vishal Motiram 41
2 Bhanj Anjali Shridhar 42
3 Sonar Kunal Purushottam 43
4 Waghulade Vaibhav Promod 44
 CERTIFICATE
This is to certify the Students :-

1) Chavan Vishal Motiram

2) Bhanj Anjali Shridhar
3) Sonar Kunal Purushottam
4) Waghulade Vaibhav Promod

Have successfully presented the micro project on “Design a

Web page for opening multiple windows in browser at
once.” And submitted in satisfactory manner.

The micro project is submitted in partial fulfillment for the Third year
(Fifth sem) diploma in Computer Engineering, affiliated to Maharashtra State
Board of Technical education for Academic Year 2023-2024.

Place: Date:

(GUIDE) (HOD) (PRINCIPAL )

 MICRO-PROJECT REPORT

Aims/Benefits of the micro project :- Design a Web page

for opening multiple windows in browser at once
Action Plans :

SrNo. Details of activity Names

Discussion and finalization of topic. Anjali
1
Preparation and submission of abstract. Vishal
2
Literature review Kunal
3
Collection of data Vaibhav
4
Formulation of content Anjali
5
Submission of project Vishal
6
 Device Specifications:
Device name – Vishal
Processor - AMD Ryzen 5 5000 U with Radeon Graphics 2.00
GHz Installed RAM - 16.00 GB (12.35 GB usable)
Device ID - 1FFF5026-F1DE-4330-B013-7045695AEB64xx
Product ID - 04812-42906-67319-AAOEMxx System type - 64-
bit operating system, x64-based processor
Pen and touch - No pen or touch input is available for this
display.
 WEBSITE DESIGN PRINCIPLES
An effective website design should serve its purpose
by communicating its specific message while also engaging
the visitor.
Consistency, colors,typography,imagery,simplicity, and
functionality are all elements of an honest website design.
Creating an excellent user experience entails ensuring that
your website's design is optimized for usability (form and
aesthetics) yet as how easy it's to use (functionality).
Websites need to meet the needs of their users. The simple
and clear intent of every page helps users interact with what
you have to offer. When it comes to user experience and
website value, simplicity is the best it can offerThe
techniques listed below can help you achieve simplicity
through your design. Color has the ability to convey
additional messages and evoke emotional reactions. Once
you find the right color palette for your brand, you can
influence your customers' behavior. Limit the color palette to
a maximum of 5 colors. Colors that complement each other
look fantastic together. The visually appealing color
combination enhances customer loyalty and gives the user a
good mood. Do not use more than two different fonts on
your website, as the fonts need to be readable. Every
appearance utilized in communication is mentioned as
imagery.
Website navigation systems enable visitors to
interact and find what they're trying to find. Flexibility when
navigating a website is very important for retaining visitors. If
it is difficult to identify the navigation of the site, the visitor
will abandon it. It is important that navigation across all
pages is simple, intuitive and consistent. The most common
way for website visitors to scan text is the F-based patter
According to eye tracking research, most of what people see
is in the upper left and lower left corners of the screen. The
Shaped layout is modeled after our natural reading pattern
within the West (left to right and top to bottom). A well-
designed website will accommodate a reader's natural
scanning pattern. Visual hierarchy refers to the arrangement
of elements in descending order of importance. Size, color,
imagery, contrast, typography, whitespace, texture, and
elegance are wont to achieve this. one amongst the foremost
important functions of visual hierarchy is that the
establishment of a focus that shows visitors where the
foremost important information is. A good website
encompasses a good design similarly as a decent content.
Using compelling language, great content can attract and
influence visitors, converting them into customers. Grids aid
within the structure and organization of your design and
content. The grid helps to align and keep elements on the
page clean. The grid-based layout organizes content into a
clean rigid grid structure with columns, sections that line up,
feel balanced, and impose order, leading to a visually
appealin
 Creating an HTML document

The first step of creating a web page is to create an HTML

document. An HTML document can be created in any text
editor even on a notepad. So any text editor can be used to
make an Html file. We just need to add extension .html
/.htm . Let us create the first basic HTML program.
To create an HTML document follow the following steps:

<!DOCTYPE html>
<html>
<head>
<title>First HTML file</title>
</head>
<body>
Hello Everyone!!
</body>
 Designing Web Page
To design a webpage in HTML we need to learn
about tags and attributes available in HTML. In HTML, tags
are some instructions that are enclosed in angle braces. With
the help of these tages, we can design a more attractive
HTML page. Some of the important tags to be used are as
follows:
1. <h1> … </h1> to <h5> … </h5>: These tags are called
header tags and they are used to give heading to your
webpage of different sizes.<h1>…</h1> being the Largest
Heading to <h5> …</h5> being the Smallest Heading.
2. Bold Tag (<strong>…</strong> or<b>…</b>): These
tags are used to make text look bold.
3. Italic Tag (<i> …</i> or <em>… </em>): These tags are
used to make text look italics. The only difference between
<i> and <em > is that <em>semantically emphasis on
important text or word whereas <i> tag is used to make is
just used to make text italics.
4. Ordered List ( <ol> … </ol>): The HTML <ol> tag
defines an ordered list. An ordered list can be numerical or
alphabetical ., An ordered list starts and ends with a <ol> tag.
Each list item starts with <li> tag. We can use the type
attribute to define type of ordered list we need to make:

Type Description

type=”1″ Numbered with numbers(default)

type=”A” Numbered with Uppercase Alphabets

type=”a” Numbered with Lowercase Alphabets

type=”I” Numbered with Uppercase Roman Numbers

type=”i” Numbered with Lowercase Roman Numbers

5. Unordered List (<ul>…</ul>): It displays elements in

bulletin form . An unordered list starts with <ul > tag and
each item starts with <li> tag. We can use the type attribute
to define the type of unordered list we need to make:
Type Description

type=”disc” Items are marked in Bulletin. (default)

type=”circle” Items are marked with hollow circles.

type=”square” Items are marked with squares.

 Type Description

type=”none” Items are not marked.

6. Image Tag: If we need to add an image to our website we

need to use the following syntax.
Syntax:
<img src=”filename” alt=”name / bit about image”>
Here,
 img: Tells browser that we want to add an image.

 src: Tells source of image for eg image from desktop or a

website.
 alt: This attribute is used to describe an image. If the

image is not able to download in a web browser due to

some reason then alt is shown.
7. Anchor Tag: This tag is mainly used to connect one web
page to another.
Syntax:
<a href=”https://www.geeksforgeeks.org/c-plus-
plus/?ref=shm”> Click
Example:

<!DOCTYPE html>
<html>
<head>
<title> Steps To Form Spread Cookies </title>
</head>
<body>
<h1> Spread Cookies</h1>
<br>
<h2> Steps:- </h2>
<ol type="I">
<li>Preheat kitchen appliance to 350ºF (180ºC).</li>
<li> In a massive bowl, combine along the spread, sugar, and
egg. </li>
<li>Scoop out a spoon of dough and roll it into a ball.
Place the cookie balls onto a slippy baking sheet. </li>
<li>For further decoration and to form them cook additional
equally, flatten the cookie balls by pressing a fork down
on prime of them, then press it down once more at a
90º
angle to form a criss-cross pattern.</li>
<li>Bake for 8-10 minutes or till rock bottom of
the cookies square measure golden brown.</li>
<li>Remove from baking sheet and freeze it.</li>
<li><b>ENJOY!!</b></li>
</ol>
</body<
/html>
HTML Web Page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>GeeksForGeeks</title>
</head>

<body style="background-color:#D5F5E3 ">

<img
src="https://upload.wikimedia.org/wikipedia/commons/4/43
/GeeksforGeeks.svg"
style="display: block; margin-left: auto;margin-
right: auto; width: 10%;" >

<h1 style="color:green;text-
align:center"><strong>GeeksForGeeks</strong></h1>
<h1><strong>Table of Content</strong></h1>

<h2><strong>C++</strong></h2>
<div>C++ is an object-oriented programming language
that is widely used for competitive programming,
 Data structure, and Algorithms, developing
operating Systems, etc.</div>

<h3><em>Some of its topic are given below:-

</em></h3>
<ul>
<li><a href="https://www.geeksforgeeks.org/c-
plus-plus/?ref=shm#Basics">Basics</a></li>
<li><a
href="https://www.geeksforgeeks.org/difference-c-
structures-c-structures/">Difference Between C Structures
and C++ Structures</a></li>
<li><a
href="https://www.geeksforgeeks.org/comparison-of-
inheritance-in-c-and-java/">Comparison of Inheritance in C++
and Java</a></li>
<li><a href="https://www.geeksforgeeks.org/static-
keyword-in-java/">Comparison of static keyword in C++ and
Java</a></li>
<li><a
href="https://www.geeksforgeeks.org/comparison-of-
exception-handling-in-c-and-java/">Comparison of Exception
Handling in C++ and Java</a></li>
<li><a href="https://www.geeksforgeeks.org/basic-
input-output-c/">Basic Input / Output in C++</a></li>
<li><a href="https://www.geeksforgeeks.org/write-
a-c-program-that-wont-compile-in-cpp/">Write a C program
that won’t compile in C++</a></li>
 <li><a
href="https://www.geeksforgeeks.org/references-in-
c/">References in C++</a></li>
</ul>

<h2 style="color:red;"><em>Java</em></h2>
<div>Java has been one amongst the foremost standard
programming languages for several years. When
compared with C++, Java codes are typically
additional reparable as a result of Java
doesn't enable several things which can
cause bad/inefficient programming if used
incorrectly.For instance, non-primitives are
references in Java.
</div>
<h3><em>Some of its Topics are given below:-
</em></h3>
<ul>
<li><a
href="https://www.geeksforgeeks.org/introduction-to-
java/">Introduction to Java</a></li>
<li><a href="https://www.geeksforgeeks.org/c-vs-
java-vs-python/">C++ vs Java vs Python</a></li>
<li><a href="https://www.geeksforgeeks.org/jvm-
works-jvm-architecture/">How JVM Works – JVM
Architecture?</a></li>
<li><a href="https://www.geeksforgeeks.org/java-
basic-syntax/">Java Basic Syntax</a></li>
<li><a href="https://www.geeksforgeeks.org/java-
identifiers/">Java Identifiers</a></li>
 <li><a
href="https://www.geeksforgeeks.org/variable-scope-in-
java/">Scope of Variables In Java</a></li>
<li><a
href="https://www.geeksforgeeks.org/decision-making-
javaif-else-switch-break-continue-jump/">Decision Making in
Java (if, if-else, switch, break, continue, jump)</a></li>
<li><a href="https://www.geeksforgeeks.org/java-
arithmetic-operators-with-examples/">Java Arithmetic
Operators with Examples</a></li>
</ul>

<h2 style="color: blue;">Python</h3>

<div> Python language is being employed in website
development, Machine Learning applications,
at the side of all innovative technology in
Software World. Python language is extremely
compatible for Beginners, additionally for
knowledgeable programmers with alternative
programming languages like C++ and Java.
</div>
<h3><em>Some of its topics given below are:-
</em></h3>
<ul>
<li><a
href="https://www.geeksforgeeks.org/python-language-
introduction/">Python Language Intro</a></li>
<li><a
href="https://www.geeksforgeeks.org/structuring-python-
programs/">Structures</a></li>
 <li><a
href="https://www.geeksforgeeks.org/python-
keywords/">Keywords</a></li>
<li><a
href="https://www.geeksforgeeks.org/python-if-
else/">Decision Making</a></li>
<li><a
href="https://www.geeksforgeeks.org/python-3-
basics/">Python 3 basics</a></li>
</ul>
<h1 style="text-align: center">Thank You</h1>

</body>
</html>