Scribd
Upload
15 views

Open Web - Programming - Lab - Report - 5

The document discusses implementing a page layout using HTML and CSS. It describes the key steps which include establishing the HTML structure, then applying CSS styling to sections like the header, navigation, content area, sidebar, and footer. It also discusses ensuring the layout is responsive to different screen sizes. Code examples are provided to demonstrate the HTML structure and CSS styles applied.

Uploaded by

B Mahmud
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Open Web - Programming - Lab - Report - 5

The document discusses implementing a page layout using HTML and CSS. It describes the key steps which include establishing the HTML structure, then applying CSS styling to sections like the header, navigation, content area, sidebar, and footer. It also discusses ensuring the layout is responsive to different screen sizes. Code examples are provided to demonstrate the HTML structure and CSS styles applied.

Uploaded by

B Mahmud
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Green University of Bangladesh

Department of Computer Science and Engineering


(CSE)
Faculty of Sciences and Engineering
Semester: (Spring, Year:2024), B.Sc. in CSE (Day)

Lab Report NO # 05
Course Title: Web Programming Lab
Course Code: CSE-302 Section: 213-D14

Lab Experiment Name: Implementation a page layout using HTML


and CSS

Student Details

ID Name
213002113 Md Mahfuzur Rahman

Lab Date : 13-03-2024


Submission Date : 20-03-2024
Course Teacher’s Name : Sakhaouth Hossan

Lab Report Status


Marks: …………………………………
Signature:.....................
Comments:..............................................
Date:..............................

Title: Implementation a page layout using HTML and CSS.

Objective:
➢ To know about deep knowledge about page layout.
➢ To ensure consistency in design across different pages of the website.
➢ To optimize the layout for different screen sizes and devices through responsive
design techniques.

Introduction:
Creating a compelling webpage layout is a cornerstone of effective web design,
pivotal in engaging visitors and guiding them through the content seamlessly.
Cascading Style Sheets (CSS) serve as the backbone for structuring and styling these
layouts, allowing designers to craft visually appealing and user-friendly interfaces. In
this tutorial, we'll delve into the principles and techniques behind implementing a
basic page layout using CSS. By following along with the examples provided, you'll
gain a comprehensive understanding of how to organize content, optimize space, and
create visual hierarchy within your webpages. Whether you're embarking on a
personal project or developing a professional website, mastering CSS layout design is
indispensable for achieving a polished and cohesive online presence. Let's embark on
this journey together and uncover the keys to designing captivating and intuitive web
layouts.

Implementation:
The implementation process for creating a page layout using CSS involves several
key steps. Firstly, you'll need to establish the HTML structure of your webpage,
outlining sections such as the header, navigation, main content area, sidebar (if
applicable), and footer. With the HTML structure in place, you can then proceed to
apply CSS styling to each section, controlling elements like colors, fonts, spacing, and
layout. This involves customizing the header to feature the website title or logo along
with any navigation links or additional content. Similarly, the navigation bar is styled
to ensure it is visually appealing and functional, with consideration given to list items,
links, and any interactive features. The main content area is then styled to optimize
readability and visual appeal, including adjustments to width, padding, margins, and
typography as necessary. If your layout includes a sidebar, it is styled to complement
the main content, with attention given to its width, padding, margins, and typography
to ensure harmony with the overall design. The footer section is styled to incorporate
copyright information, contact details, or other relevant content, with careful
consideration of layout and appearance. Additionally, responsive design techniques
are implemented to ensure the layout adapts seamlessly to different screen sizes and
devices, with CSS media queries used to apply specific styles as needed. Throughout
the process, thorough testing is conducted across various browsers and devices to
ensure compatibility and responsiveness, with any necessary adjustments made to
refine the layout. Finally, documentation of CSS styles and layout structure is
maintained for future reference, with regular updates and refinements based on user
feedback and evolving design trends.

Html code:
<!DOCTYPE html>
<html lang="en">
<head>

<title>Document</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="main">
<div class="one">Header
<div class="one_one">nav</div>
</div>
<div class="two">
<div class="two_one">section
<div class="two_one_one">article</div>

<div class="two_one_two">article</div>

<div class="two_one_three">article</div>
</div>
<div class="two_two">aside</div>
</div>
<div class="three">footer</div>
</div>

</body>
</html>
CSS code:

.main{
height: 500px;
width: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color:bisque;
border: 2px solid brown;
padding: 10px;
}

.one{
height: 20%;
background-color:aqua;
display: flex;
flex-direction: column;
padding: 5px;
margin: 13px;

}
.one_one{
background-color: darkorchid;
height: 40px;
margin-top: 50px;
margin-bottom: 2px;
margin-left: 20px;
margin-right: 20px;
}
.two{
height: 55%;
display: flex;
margin: 13px;
}
.two_one{
background-color:cornflowerblue;
height: 100%;
width: 65%;
display: flex;
flex-direction: column;
margin-right: 5px;
}

.two_one_one{
background-color: pink;
height: 25%;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;

.two_one_two{
background-color:pink;
height: 25%;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;

.two_one_three{
background-color: pink;
height: 25%;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;

.two_two{
background-color: palevioletred;
height: 100%;
width: 35%;
display: flex;
margin-left: 5px;

}
.three{
height: 10%;
background-color: blueviolet;
display: flex;
flex-direction: column;
padding: 5px;
margin: 13px;
}
Output:

Header

nav

section aside
article

article

article

footer

Discussion:
The implementation of a page layout using CSS, it's essential to emphasize its
significance in web design and user experience. Firstly, CSS empowers designers to
create visually appealing and cohesive layouts that effectively organize content,
enhancing readability and navigation for users. By structuring webpages with clear
divisions such as headers, navigation bars, main content areas, sidebars, and footers,
CSS enables a logical flow of information that guides users through the site
intuitively. Additionally, CSS facilitates the customization of each section's aesthetics,
allowing designers to tailor the appearance to match the website's branding and visual
identity. Moreover, the implementation of responsive design techniques ensures that
the layout remains functional and visually pleasing across various devices and screen
sizes, optimizing the user experience for mobile users as well as desktop users.
Furthermore, CSS enables the creation of accessible layouts, ensuring that all users,
including those with disabilities, can easily navigate and consume the content. Lastly,
ongoing testing, refinement, and documentation of CSS styles and layout structure are
vital for maintaining consistency and usability, as well as for future updates and
enhancements to the website's design. Overall, the discussion underscores the pivotal
role of CSS in creating effective and user-friendly page layouts that contribute to a
positive browsing experience.

You might also like