Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating Browsers Window using HTML and CSS
A browser window is the graphical user interface (GUI) element of a web browser that displays web pages and web applications. It usually consists of a title bar, menu bar, address bar, navigation buttons, and content area.
Algorithm
Make a container div with rounded corners, a border, and concealed overflow.
Make a header with a background color, padding, and navigation bar inside the container.
Links to various pages should be added to the navigation bar.
Add a search button and text input field to the header.
In the main paragraph you can include a heading.
The upper right corner of the container should have the 3 buttons to minimize, maximize, and close.
Make the search bar and buttons to be at the center of the header.
The main paragraph should be put in the center of the container.
Apply CSS styles to each element, such as font sizes, colors, margins, and padding.
Example
<!DOCTYPE html>
<html>
<head>
<title>Tutorialspoint</title>
<style>
/* CSS styles */
/* Style for the container */
.container {
width: 80%;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
/* Style for the header */
header {
background-color: #f2f2f2;
padding: 10px;
display: flex;
justify-content: space-around;
flex-direction: column;
}
/* Style for the navigation bar */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
/* Style for the navigation links */
nav a {
color: #333;
text-decoration: none;
font-weight: bold;
}
/* Style for the hover effect on navigation links */
nav a:hover {
text-decoration: underline;
}
/* Style for the buttons */
.buttons {
display: flex;
align-items: center;
}
/* Styling buttons */
.minimize, .maximize, .close {
height: 10px;
width: 10px;
margin-right: 5px;
border-radius: 50%;
}
/* Styling minimize button */
.minimize {
background-color: #ff9800;
color: #ff9800;
}
/* Maximize button */
.maximize {
background-color: #4caf50;
}
/* Close button colour */
.close {
background-color: #f44336;
}
/* Form styles */
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
/* Styling the search input */
input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 5px;
width: 50%;
}
/* search button styles */
button[type="submit"] {
padding: 10px;
border: none;
border-radius: 5px;
margin-right: 5px;
cursor: pointer;
background-color: #f2f2f2;
color: #333;
}
/* Hover effect on buttons */
button[type="submit"]:hover,
button:not([type="submit"]):hover {
background-color: #333;
color: #fff;
}
/* Padding the main content */
main {
padding: 10px;
}
h1 {
font-size: 36px;
color: #333;
margin-bottom: 10px;
}
/* Styling main paragraph */
p {
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<div class="buttons">
<button class="minimize"></button> <!-- Minimize button -->
<button class="maximize"></button> <!-- Maximize button -->
<button class="close"></button> <!-- Close button -->
</div>
<header>
<nav>
<!-- Nav elements -->
<a href="#">Gmail</a>
<a href="#">Images</a>
<a href="#">Apps</a>
<a href="#">Notifications</a>
<a href="#">Account</a>
</nav>
<!-- Search Bar -->
<form>
<input type="text" placeholder="https://www.tutorialspoint.com/">
<button type="submit">Search</button>
</form>
</header>
<main>
<!-- Heading -->
<h1>Welcome to Tutorialspoint</h1>
<!-- Paragraph -->
<p>Tutorialspoint is a free online learning platform where you can learn various programming and technology-related subjects. We aim to provide high-quality education to everyone, everywhere.</p>
</main>
</div>
</body>
</html>
Conclusion
In addition to this method, we may also make this using the following techniques:
We can make use of Bootstrap, a popular front-end framework that provides a variety of pre-made UI components. It is possible to create a browser window using the Bootstrap modal component. You can modify the modal to suit your needs.
The window.open() method in JavaScript opens a fresh browser tab. The URL of the current browser window can also be changed using the window.location.href attribute.
To build a browser window, various CSS frameworks like Bulma, Tailwind, and Foundation offer pre-made UI components.
614 Views
