Lab 1.

WEBSITE Layout
UNIVERSITY OF INFORMATION TECHNOLOGY

1
1. WEBSITE LAYOUT AND CSS
Website Design and Development

A. OVERVIEW
1. Learning Objective
In this lab, students will learn how to structure and style the web page:

▪ Create engaging web pages using HTML5.

▪ How to include CSS into HTML document.

▪ Learn more about CSS rules.

2. Tools and environments

You are recommended to use Text Editor when developing web pages with
HTML. Visual Studio Code is a free coding editor that helps you start coding
quickly. You need to browse to https://code.visualstudio.com/ and choose the
appropriate installer for your machine's platform to download and install.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

2
Figure 1: Visual Code Studio

3. Knowledge Base
a. Cascading Style Sheets - CSS
CSS (Cascading Style Sheets) is the language used to style a Web page. CSS
describes how HTML elements will be displayed on screen, paper, or other media.

Figure 2: A CSS rule1

▪ The selector points to the HTML element you want to style.

▪ The declaration block contains one or more declarations separated by
semicolons.
▪ Each declaration includes a CSS property name and a value, separated by a
colon.
▪ Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
b. CSS selectors

The CSS selectors are used to "find" (or identify) HTML elements you want to
style. We can divide CSS selectors into five categories:

▪ Simple selectors (select elements based on tag name, id, or class)

1
https://www.w3schools.com/css/css_syntax.asp

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

3
Example: select all <div> elements
div {
background-color: yellow;
}

Example: select element has the ID section1

#section1 {
background-color: yellow;
}

Example: select all elements have class section1

.section1 {
background-color: yellow;
}

▪ Combination selectors (select elements based on a specific relationship

between them)

o Descendant selector: match all elements that are descendants of a

specific element.

Example: select all <p> elements inside <div> elements

div p {
background-color: yellow;
}

o Child selector (>): match all elements that are children of a specific
element.

Example: select all <p> elements that are children of a <div> elements
div > p {
background-color: yellow;
}

o Adjacent Sibling Selector (+): used to select an element directly after

another specific element. Sibling elements must have the same
parent element, and "adjacent" means "immediately following"

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

4
Example: select the first <p> elements that are placed immediately after
<div> elements:
div + p {
background-color: yellow;
}

o General Sibling Selector (~): used to select all elements that are the
next siblings of a specified element.

Example: select all <p> elements that are next siblings of <div> elements:
div ~ p {
background-color: yellow;
}

▪ Pseudo-class selectors (select elements based on a particular state, such as

on hover, visited link, active, etc.)

Syntax:
selector::pseudo-element {
property: value;
}

Example
p::first-letter {
color: #ff0000;
font-size: xx-large;
}

▪ Pseudo-elements selectors (select and style a part of an element, such as

first-letter, first-line, before, after, marker, etc.)

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

5
Syntax:
selector::pseudo-element {
property: value;
}

Example
p::first-letter {
color: #ff0000;
font-size: xx-large;
}

c. CSS Color

The color can be specified using a color name, RGB, HEX, HSL, RGBA, and HSLA
values.

▪ Text color: color: <color-value>;

▪ Background Color: background-color: <color-value>;
▪ Border color: border-color: <color-value>; border-style: solid;
d. CSS Margin

The CSS margin properties are used to create space around elements outside of
any defined borders.

CSS has properties for specifying each side of an element, including margin-top,
margin-right, margin-bottom, margin-left.

All the margin properties can have the following values:

▪ auto – the browser calculates the margin.

▪ length – specifies a margin in px, pt, cm, etc.

▪ % - specifies a margin in % of the containing element's width.

▪ inherit – specifies that the margin should be inherited from the parent
element.

Negative values are allowed.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

6
Example
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

To shorten the code, it is possible to specify all the margin properties in one
property.

Syntax
margin: <top-margin> <right-margin> <bottom-margin> <left-margin>;
margin: <top-margin> <right-margin> <bottom-margin>;
margin: <top-and-bottom-margin> <right-and-left-margin>;
margin: <margin>;

e. CSS Padding

The CSS padding properties create space around an element's content inside
defined borders.

CSS has properties for specifying padding for each side of an element, including
padding-top, padding-right, padding-bottom, padding-left.

All the padding properties can have the following values:

▪ length – specifies padding in px, pt, cm, etc.

▪ % - specifies a padding in % of the containing element's width.

▪ inherit – specifies that the padding should be inherited from the parent
element.

Negative values are allowed.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

7
Example
p {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
}

To shorten the code, it is possible to specify all the padding properties in one
property.

Syntax
padding: <top-padding> <right-padding> <bottom-padding> <left-padding>;
padding: <top-padding> <right-padding> <bottom-padding>
padding: <top-and-bottom-padding> <right-and-left-padding>;
padding: <padding>;

Read more about CSS properties at https://www.w3schools.com/css/default.asp

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

8
B. LAB TASKS
In this lab, we will learn how to design a web page like Figure 3. You need to
specify the texts and images that you like.

Figure 3: The sample page

Structuring the web page

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

9
Figure 4: Breakdown the webpage into components

The page can be broken down into three main parts:

▪ Header: the content is positioned at the top of the page. It usually

contains the site’s logo, page title, and main navigation menu.
▪ Footer: the content is positioned at the bottom of the page. We can place
a brief introduction of the website or organization, contact information,
shared links, etc.
▪ Main section
Below is an example of the source code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<title>Zozor - Travel diaries</title>
</head>

<body>
<div id="main_wrapper">
<header>
<div id="logo">
// Logo image and text
</div>

<nav>
//Navigation items
</nav>
</header>

<section>
<aside>
//Addition information
</aside>

<main>
//Main content
<article>
//Main content
</article>

<div id="book-metadata">
//Main content
</div>
[...]

</main>

</section>

<footer>
// Footer of page

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

10
</footer>
</div>
</body>
</html>
HTML5 has defined some semantics tags, such as header, section, article, etc.…
to represent the contents that it means. Although these tags can be replaced with
div or span tags, it is still recommended to use such semantic tags.

You need to insert the necessary components into a suitable position of the
example code above to get the layout, as shown in Figure 3.

Grading criteria

1. HTML structure (30%):

▪ Breakdown the page layout into the three core components (header,
footer, main section).
▪ Sematic Elements Usage: proper use of HTML5 sematic tags such as
<header>, <nav>, <main>, <aside>, <footer>, etc. to logically separate
different parts of the page.
▪ Logical and Readable HTML Structure: HTML should be structured in
a logic order. For example, the header appears before the main content,
which is followed by the footer.
▪ Container Divs for Layout Control: use of container <div> elements
for layout structure, such as a main content wrapper or grid/flex
containers, to enable CSS styling.
2. Section Grouping (15%)
▪ Proper Grouping of Elements: content related to the same section (e.g.,
book information, community reviews) should be grouped into
sections or divs. For example, all book-related information is wrapped
in a single section, with sub-containers for details, similar books, and
reviews.
▪ Use of IDs and Classes for Section Identification: Assign appropriate
IDs for unique sections and classes for reusable elements. IDs should
be reserved for unique sections, while classes should be used for
repeatable styles (e.g., class="review-item" for each review).

3. Layout and UI (30%)

▪ Spacing and Alignment: Consistent use of padding, margins, and
alignment for a clean and balanced layout. Content should not be
cluttered, and there should be appropriate space between sections.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

11
▪ Typography and Color: Use of readable fonts, consistent font sizes,
and a cohesive color scheme that makes the page visually appealing.
Titles, headings, and body text should have a clear hierarchy.
▪ Interactive Elements Styling: Basic hover effects on interactive
elements like buttons and links (e.g., color change, underline) to
improve the user experience.
▪ Element Styling Consistency: Consistent styling for similar elements,
such as buttons, card backgrounds, and icons. Repeated elements
should look the same throughout the page to provide a uniform UI.
▪ Border and box shadows: Use of borders, shadows, and background
colors on containers (e.g., cards for books, review items) to visually
separate and enhance elements.
4. Code quality (15%)
▪ Readable HTML and CSS Code: Proper indentation, spacing, and use
of comments to make the code easy to read and understand. HTML
and CSS should be well-organized with comments labeling major
sections.
▪ Consistent Naming Conventions: Consistent, descriptive naming for
classes and IDs (e.g., using btn-primary for main buttons) to improve
readability and make the code easier to maintain.
▪ Use of Semantic CSS classes: use of descriptive class names that reflect
their purpose (e.g., .borrow-button instead of .btn-1)
▪ Organized and commented code: CSS code is well-organized with the
comments for major sections (e.g., /* Button Styles */ )
▪ Efficient and DRY code: avoids repetitive CSS by using classes
effectively and leveraging inheritance and grouping where possible)
▪ Minimal Inline Styles: All styling should be done in the CSS file,
avoiding inline styles within HTML, which keeps structure and
presentation separated.

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]
 Lab 1. WEBSITE Layout

12
C. REQUIREMENTS AND SUBMISSION
You must complete all tasks in section B (Lab tasks). Advanced tasks are optional,
and you could get bonus points for completing those tasks. This lab is designed
for individuals. You have seven days to clear all tasks.

Your submission must meet the following requirements:

▪ Take a screenshot of your application/website.

▪ If the submission contains more than one file, you must place all
files/folders inside a folder whose name pattern is "StudentID-Name".
Then, archive this folder in the zip format.

Your submissions must be your own. You are free to discuss with other classmates
to find the solution. However, copying is prohibited, even if only a part of your
report. Both reports of the owner and the copier will be rejected. Please remember
to cite any source of the material (website, book, etc.) that influences your solution.

D. REFERENCES
1. W3Scholl HTML Tutorial: https://www.w3schools.com/html/
2. HTML elements reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
3. HTML Tutorial: https://www.geeksforgeeks.org/html
4. CSS: https://www.w3schools.com/css/default.asp

University of Information Technology WEBSITE DESIGN AND DEVELOPMENT LABS – v09/2023

[email protected]