Scribd
Upload
13 views

Chapter 1 Introduction to Web Technology

Uploaded by

Dej Ayn
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

Chapter 1 Introduction to Web Technology

Uploaded by

Dej Ayn
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 134

Technical and Vocational

Training Institute

Department of Information Technology

Web Application Development

Compiled By: Dejenie A.

November, 2024
Chapter 1
Introduction to Web Technologies
• HTML:
 Getting started with HTML,
 Why HTML,
 Tags and Elements,
 Attributes,
 Properties.
• CSS:
 Why CSS,
 Types of CSS,
 How to use CSS,
 Properties, Classes,
 Child-Class (Nested CSS)
• BOOTSTRAP:
 Why Bootstrap,
 CSS over Bootstrap,
 How to Use Bootstrap
• W3C:
 What is W3C ,
Getting started with HTML
• What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content.
Cont’d
• HTML was first created by Tim Berners-Lee, Robert Cailliau, and others
starting in 1989.
• It stands for Hyper Text Markup Language.
• Hypertext means that the document contains links that allow the reader to
jump to other places in the document or to another document altogether.
The latest version is known as HTML5.
• A Markup Language is a way that computers speak to each other to control
how text is processed and presented. To do this HTML uses two things: tags
and attributes.
Why HTML?
• HTML is used to provide structure to a webpage and make it accessible to users
of the internet through text, visual formatting and search factors. It is
commonly known as the most basic building block of the web, working
alongside CSS and JavaScript to create the websites we see while browsing.
• HTML is used to create things other than web pages, too.
• You can also use it to make:
• Emails
• Web forms
• Ebooks
• Custom HTML modules in a CMS or a website builder
• Mobile and web apps
• Data tables and visualizations
Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
Tags and Elements
• Compared to other coding languages, HTML is easy to read and understand
since it’s essentially plain English text with extra symbols.
• The main building block of an HTML file is an element.
• An HTML element is a component that defines a piece of content or a
section on a web page. An element could be a piece of text like a
paragraph, an interactive component like a button, or a section of the page
like a header or footer.
• Here’s what a basic element looks like written out in HTML. This element is
called the p element, which stands for paragraph. It’s the most common
element we use to display text on a page.
• Let's take a closer look at each component of this element.
• Start Tag
• HTML elements are designated by tags. For most elements, the start tag (or opening tag) and end tag (or
closing tag) mark the beginning and end of an element, respectively. The opening tag contains the name of
the element (in this case, p for paragraph) enclosed in angle brackets (<>).
• A start tag may also contain additional information called attributes. I’ll cover those in more detail later
soon.
• Also, element names are case-insensitive. For example, the <p> tag can also be written as <P>. However, I
recommend writing in exclusively lowercase — that’s what you’ll see in almost all HTML.
• Content
• The content of the element is placed between the opening and closing tags. This is what the user actually
sees on the webpage. An element’s content could be text, a link, an image or other multimedia, a list, or a
table. It can also contain other elements — we’ll touch on this soon.
• End Tag
• The end tag defines the end of the HTML element. Like the start tag, it contains the element name. The
difference is that a forward slash (/) precedes the element name.
• Most HTML elements have a closing tag. However, some HTML elements only have an opening tag. For
example, <img> (image) and <br> (line break) do not require closing tags. Elements with only a start tage
are called empty elements.
• Element
HTML Attributes
• An opening tag may also contain one or more attributes. An attribute is
extra information that defines how the element looks and/or behaves.
Some elements require certain attributes, and almost any element can
take optional attributes.
• An attribute is always found in the opening tag of an HTML element. Most
have the syntax name=“value” though some attributes only require the
name without any assigned value.
• Let’s look at another element, the a (anchor) element. This element
creates a hyperlink. It requires one attribute called href that specifies the
destination URL.
Exercise 1: HTML Elements and Text Formatting
• Create HTML web page with following elements:
• Web page title “Review HTML”
• Add page main title heading 1 “HTML Elements and Attributes”
• Add page subtitle with heading 2 “1.1 HTML Elements ”
• Add horizontal line next to the subtitle.
• Add a paragraph to your page as shown the following lines of text.
“HTML is a very simple language used to describe the logical structure and layout of a web
document”.
• Show these text with the following formatting along with the line break.
• Italics: “This text is in italics.”
• Bold: “This text is in Bold.”
• <b>This text is in Bold.</b><br>
• <u>This text is in Underlined.</u>
• <p>The following statement uses superscript: <b>x<sup>2</sup></b></p>
• <p>The following statement uses subscript: <b>H<sub>2</sub></b></p>
• <p>I want to drink <del>Coca</del> <ins>Fanta</ins></p>
• Add page subtitle with heading 2 “1.2 HTML Attributes ”
• Add background color <body style="background-color: lightblue">
• Add some text with border <p style="border-style:solid;border-
width:2px;border-color:red">This is some text with border</p>
• Add some text with red color <p style="color:red;">This is some text with
red color </p>
• Add some text with courier font <p style="font-family: courier;">This is
some text with courier font .</p>
• Add some text with font-size 300%<p style="font-size: 300%;">This is
some text with font-size 300%< </p>.
• Add some text with text align center <p style="text-align: center;">This is
some text with text align center</p>.
• Add page subtitle with heading 2 “1.4 HTML Table”
<h2> 1.3 HTML Tables</h2>
<table border="1" width="400" height="150"
bordercolor="orange" bgcolor="green">
<tr><th>No</th><th>Subject</th><th>Mark</
th></tr>
<tr> <td>1</td> <td>Abebe</td>
<td>75</td></tr>
<tr> <td>2</td> <td>Alemayehu</td>
<td>85</td></tr>
<tr><td colspan="2">Total</td>
<td>160</td></tr>
</table>
• Add page subtitle with heading 2 “1.4 HTML Forms”
Add <h2> 1.4 HTML Forms</h2>
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value=“eth">Ethiopia</option>
<option value=“Eritrea">Eritrea</option>
<option value=“kenya">Kenya</option>
</select><br><br>
<label for="web">Select Your Favorite Scripting Language</label><br>
<input type="checkbox" name="html" id="html">
<label for="web">HTML</label>
<input type="checkbox" name="CSS" id="CSS">
<label for="web">CSS</label>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="web">JavaScript</label><br><br>
<input type="submit" value="Submit">
• Add page subtitle with heading 2 “1.3 HTML Links and Medias ”
• Add your own background image <p style="background-image: url('img_girl.jpg');">
• Add your own background image within a paragraph<p style="background-image:
url('img_girl.jpg');">This is some text with background image</p>.
• Add sample video to your page <video width="320" height="240" controls>
<source src="maleda.mp4" type="video/mp4">
• Add sample image to your page <img src="BDFun.jpg" alt="Bahir Dar Kenema Fun"
width="200" height="100">
• Add your favorite link to your page <a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
HTML Semantic Elements
• A semantic element clearly describes its meaning to both the browser and the
developer.
• Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines
its content.
• Semantic elements = elements with a meaning.
Semantic Elements in HTML
• Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation,
header, and footer.
• In HTML there are some semantic elements that can be used to define different parts of a web page:
• Below is a list of some of the semantic elements in HTML.
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
HTML<section> Element
• The <section> element defines a section in a document.
• According to W3C's HTML documentation: "A section is a thematic grouping of
content, typically with a heading."
• Examples of where a <section> element can be used:
• Chapters
• Introduction
• News items
• Contact information
• A web page could normally be split into sections for introduction, content, and
contact information.
Example: Two sections in a document:
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on
issues regarding the conservation, research and restoration of the environment, formerly
named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the
London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
HTML <article> Element
• The <article> element specifies independent, self-contained content.
• An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.
• Examples of where the <article> element can be used:
• Forum posts
• Blog posts
• User comments
• Newspaper articles.
• The <article> element specifies independent, self-contained content.
• The <section> element defines section in a document.
• It is possible Nesting <article> in <section> or Vice Versa.
• So, you will find HTML pages with <section> elements containing <article>
elements, and <article> elements containing <section> elements.
Example: Three articles with independent, self-contained content:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released
in 2008. Chrome is the world's most popular web browser today!
</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser
since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet
Explorer.</p>
HTML <header> Element
• The <header> element represents a container for introductory content or a set of
navigational links.
• A <header> element typically contains:
• One or more heading elements (<h1> - <h6>)
• Logo or icon
• Authorship information
• Note: You can have several <header> elements in one HTML document. However,
<header> cannot be placed within a <footer>, <address> or another <header>
element.
Example: A header for an <article>:
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
</body>
</html>
• HTML <footer> Element
• The <footer> element defines a footer for a document or section.
• A <footer> element typically contains:
• Authorship information
• Copyright information
• Contact information
• Sitemap
• Back to top links
• Related documents
• You can have several <footer> elements in one document.
Example: A footer section in a document:
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Author: George Orwell</p>
<p><a
href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html>
HTML <nav> Element
• The <nav> element defines a set of navigation links.
• Notice that NOT all links of a document should be inside a <nav> element.
• The <nav> element is intended only for major blocks of navigation links.
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
Example: Use CSS to style the <aside> element:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together
with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning
fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together
with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together
with my family!</p>

</body>
HTML <figure> and <figcaption> Elements
• The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
• The <figcaption> tag defines a caption for a <figure> element.
• The <figcaption> element can be placed as the first or as the last child of a
<figure> element.
• The <img> element defines the actual image/illustration.
<html>
<body>
<h2>Places to Visit</h2>
<p>Lalibela’s most famous sight is the unique Rock Hewn Church's found
in the area around Noth Wollo, a declared UNESCO World Heritage
Site.</p>
<figure>
<img src=“lalibela.png" alt=" Lalibela Rock Hewn Church's "
style="width:100%">
<figcaption>Fig.1 - Lalibela Rock Hewn Church's , Ethiopia.</figcaption>
</figure>
</body>
</html>
1.2 CSS: Introduction
• CSS is the language used to design the web pages or specifying the presentation
of a document written in a markup language like HTML.
• CSS helps web developers to control the layout and other visual aspects of the
web pages.
• CSS stands for Cascading Style Sheets, it is a simple design language intended to
simplify the process of making web pages presentable using CSS properties.
• CSS specify how an HTML element should be displayed on the web page.
Why CSS?
• Reason to use CSS:
• Responsive Design: CSS offers features like media queries that enable developers to create
responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user
experience.
• Flexibility and Control: CSS provides precise control over the presentation of HTML elements,
allowing developers to customize layout, typography, colors, and other visual properties.
• Consistency and Reusability: Developers can ensure consistency across the entire website, by
defining styles in a central CSS file. Styles can be reused across multiple pages, reducing
redundancy and making updates easier.
• Search Engine Optimization (SEO): CSS can be used to structure content in a way that
improves search engine visibility.
• Ease of Maintenance: Centralized CSS files make it easier to maintain and update styles
across a website. Changes can be applied globally, ensuring uniformity and reducing the risk
of inconsistencies.
• Faster Page Loading: External CSS files can be cached by browsers, resulting in faster page
loading times for subsequent visits to a website. This caching mechanism reduces server load
and bandwidth consumption.
Types of CSS
• There are three ways to use CSS on HTML documents.
• Inline CSS:
• Inline CSS are directly applied on the HTML elements and it is the most
prioritize CSS among these three.
• This will override any external or internal CSS.
• Internal CSS:
• Internal CSS are defined in the HTML head section inside of <style> tag to
let the browser know where to look for the CSS.
• External CSS:
• External CSS are defined in a separate file that contains only CSS
properties, this is the recommended way to use CSS when you are working
on projects.
• It is easy to maintain and multiple CSS files can be created and you can use
<html>
<head>
<title>CSS Tutorial</title>

<!-- Internal CSS -->


<style>
span{
color: green;
}
</style>

<!-- External CSS -->


<link rel="stylesheet" href=“mystyle.css">
</head>
<body>
<h1><span>Tutorials</span>point</h1>

<!-- Inline CSS -->


<p style="font-weight: bold;
margin-top: 5px;
padding-left: 5px">
Simple and Easy <span>Learning</span>
</p>
</body>
• External CSS File: We should import this file into the above code
through <link> tag.
• Write the following CSS code and save with the file name mystyle.css.
body {
margin-left: 40%;
margin-top: 40%;
}
How to use CSS-Selectors
• CSS selectors are used to find or select the HTML elements you want
to style.
• We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship
between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute
value)
1. The CSS element Selector
• The element selector selects HTML elements based on the element name.
• Example
• Here, all <p> elements on the page will be center-aligned, with a red text
color:
p{
text-align: center;
color: red;
}
• The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element is unique within a page, so the id selector is used to select one unique
element!
• To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
The CSS class Selector
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the class name.
• Example: In this example all HTML elements with class="center" will be red and center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• Example
• The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
• The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style definitions.
• Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
In this example we have grouped the selectors from the code above
h1, h2, p {
text-align: center;
color: red;
}
• CSS Attribute Selector
• An attribute selector targets an element based on a specific attribute or attribute values
on an element.
• For a detailed explanation of attribute selectors, refer this attribute selector article.
• Syntax
/* Style all anchor tag with target attribute */
a[target] {
background-color: red;
}
/* Style all anchor tag that links to tutorialspoint */
a[href="https://www.tutorialspoint.com"] {
background-color: red;
}
<html>
<body>
<head>
<h2>Attribute selector</h2>
<style> <p>
a[href]{ Styling applied to anchor element:
font-size: 2em; </p>
} <a href="https://www.tutorialspoint.com/">
a[target=“_ blank”] { Tutorialspoint
background-color: red; </a>
color: blueviolet; <br><br>
} <a href="index.htm" target="_blank">
/* Attribute with value have more priority*/ HTML Tutorial
/* Hence black background applied to CSS link*/ </a>
a[target="_self"] { <br><br>
<a href="/css/index.htm" target="_self">
background-color: black;
CSS Tutorial
}
</a>
</style>
</body>
</head>
CSS Pseudo Class Selector
• A pseudo-class selector is used to style a specific state of an element, such as :hover is used to style an element when hovered.
<html>
<head>
<style>
a:hover {
background-color: red;
color: green;
font-size: 1px;
}
button:active {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Pseudo-class selector</h2>
<p>
Styling applied to anchor element and
button with a pseudo-class:
</p>
<a href="https://www.tutorialspoint.com">Tutorialspoint
</a>
<br><br>
<button>Click Me</button>
CSS Pseudo Element Selector
• A pseudo-element selector is used to style a specific part of an element rather
than the element itself.
• Syntax:
/* Define contents before paragraph */
a::before {
content: " ";
}
/* Style first letter of paragraph */
p::first-letter {
font-size: 2em;
}
• Example: Following example demonstrates the use of a pseudo-element selector (::before) and (::after):
<html>
<head>
<style>
/* Add and style contents before paragraph */
p::before {
content: "Note: ";
font-weight: bold;
color: red;
}
/* Add and style contents after paragraph */
p::after {
content: " [Read more]";
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<h2>Pseudo-element selector</h2>
<p>This is a paragraph.</p>
</body>
CSS Descendant Selector
• Descendant selector is used in css to style all the tags which are child of a particular specified tag. A single space between parent element and
child element is used to mention as descendant.
<html>
<head>
<style>
div{
border: 2px solid;
}
div p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>
This paragraph is inside a div and will be blue.
</p>
<section>
<p>
This paragraph is inside a section which is inside a div and will also be blue.
</p>
</section>
</div>
<p>
This paragraph is outside the div and will not be blue.
</p>
</body>
• CSS Child Selector
• The child selector in css is used to target all the direct child of a particular element. This is denoted by '>' (Greater than)
symbol.
<html lang="en">
<head>
<style>
div{
border: 2px solid;
}
div > p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>
This paragraph is inside a div and will be blue.
</p>
<section>
<p>
This paragraph is inside a section which is inside a div and will not be blue as this is not direct child
</p>
</section>
</div>
<p>
This paragraph is outside the div
and will not be blue.
</p>
</body>
CSS Properties
• CSS properties and selectors are the main thing in CSS, without the properties
there is no ways to define the styling of any HTML element. So better to know
most frequently used properties in one go will help you to work with CSS.
• Color
• Text
• CSS Background
• CSS Border
• CSS Font
• CSS Padding
• CSS Position
• CSS Animation
• CSS Transition
• …
Practice-CSS Properties
• Create HTML web page and add the following paragraph to your page.
• Add page main title with heading 1 “2. CSS Properties”.
• Add page main title with heading 2 “2.1 CSS Color and Font Properties”.
• Add a class with value para1 to the folloeing paragraph
“CSS is the language for describing the presentation of Web pages, including colors, fonts,
borders, etc, thus making our web pages presentable to the users”.
• Add CSS background color lightblue for your page inside the head section.
body{ background-color: lightblue; }
• Add text color red for the paragraph.
color: color|initial|inherit;
p{ color: red/rgb(0,0,255)/ #FF0000}
• Add font family arial to your paragraph
font-family: arial;
• Add font-size, font-weight and font-style the paragraph.
font-size: 20px/small/large/10%;
font-weight: bold/bolder/100/300;
font-style: italic/normal/oblique;
• Add font variant to your paragraph
• Add a subtitle with heading 2 “2.2 CSS Text Properties”
• Add a class with value para2 to the paragraph
“There are many CSS text properties that can be add to an HTML element.”
• Add color green to your second paragraph.
color: green;
• Align your paragraph to the center.
text-align:left/center/right/justify;
Add text direction to your paragraph
direction:ltr/rtl.
• Add the following text decoration effect to your paragraph
• text-decoration-line: underline|overline|line-through
• text-decoration-color: yellow;
• text-decoration-style: dotted|dashed|solid|wavy|double
• text-decoration-thickness:5px;
• text-emphasis: filled|open|dot|circle|doublecircle|triangle|color
• Add Text Shadow to you paragraph
Syntax: offset-x | offset-y | blur-radius |color
• Add a title with heading 2: 2.3 CSS Background Properties
• Add the following background properties to your subtitle
• background-color:Specifies the background color to be used
background-color: orange;
• background-image:Specifies ONE or MORE background images to be used
background-image: url(“image1.gif");
• background-position: Specifies the position of the background images
background-position: center;
• background-size: Specifies the size of the background images
background-size: 300px 100px;
• background-repeat Specifies how to repeat the background images
background-repeat: repeat-y|x|no-repeat;
• background-origin: Specifies the positioning area of the background images
background-origin: content-box|Padding-box|border-box;
• background-clip: Specifies the painting area of the background images
background-clip: content-box|Padding-box|border-box;
• background-attachment: Specifies whether the background images are fixed or scrolls with the rest of the page
• Add background attachment to the first paragraph
background-attachment: fixed|scrolls;
• Add a subtitle with heading 2: 2.4 CSS Border Properties
• Add border to the above subtitle 3. CSS Border Properties. Use border-styles
none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden
Ex: border:1px solid;
• Add different color to the border
• Border-left-color:
• Border-right-color:
• Border-top-color:
• Border-bottom-color:
• Add different width to the border
• border-bottom-width
• border-top-width
• border-left-width
• border-right-width
• Use the following different and observe the effect
• Add a subtitle with heading 2: 2.5 CSS Padding Properties
• Add padding to the above subtitle.
padding: 25px 50px 75px 100px;
• Set different padding for all four sides of the above subtitle element:
padding-top
padding-right
padding-bottom
padding-left
1.6 CSS Position
• CSS property position helps manipulate position of an element in a web page.
• The properties top, bottom, right, and left are used to control its exact position on the page.
• They specify the offsets of an element from its edges.
• Property position can be used to create floating elements, floating sidebar, and other
interactive features.
• Possible Values
• Static − The element is positioned according to the default or normal flow of the page. So if we set
left/right/top/bottom/z-index, then there will be no effect on that element.
• Relative − The element's original position is according to normal flow of the page just like static value.
But now left/right/top/bottom/z-index will work. The positional properties push the element from the
original position in that direction.
• Absolute − The element is completely removed from the document flow. It is then positioned with
respect to its containing block, and its edges are placed using the side-offset properties.
An absolutely positioned element may overlap other elements, or be overlapped by them.
• Fixed − The element's fixed positioning is just like absolute positioning, except the containing block of a
fixed element is always the viewport.
• Sticky − The element sticks to the top of its nearest positioned ancestor that has a "scrolling
mechanism" .
Example: Static
<html> </style>
<head> </head>
<style>
<body>
.normal-box {
display: inline-block; <div class="normal-box">
background-color: #f2c3ee; <h2>Normal Box</h2>
border: 1px solid #000000; <p>This is a normal box.</p>
padding: 10px;
</div>
margin-bottom: 20px;
width: 300px; <div class="static-box">
height: 100px; <h2>Position: static</h2>
} <p>This is a box with static position.</p>
.static-box { </div>
display: inline-block;
position: static;
</body>
background-color: #bbedbb; </html>
border: 1px solid #000000;
padding: 10px;
width: 300px;
height: 100px;
Example: Relative
<html>
<head>
</style>
<style> </head>
.normal-box { <body>
display: inline-block;
<div class="normal-box">
background-color: #f2c3ee;
border: 1px solid #000000; <h2>Normal Box</h2>
padding: 10px; <p>This is a normal box.</p>
margin-bottom: 20px; </div>
width: 300px;
height: 100px;
<div class="relative-box">
} <h2>Position: relative</h2>
.relative-box { <p>This is a box with relative
display: inline-block; position.</p>
position: relative;
</div>
left: 30px;
background-color: #bbedbb; </body>
border: 1px solid #000000; </html>
padding: 10px;
width: 300px;
height: 100px;
Example: Absolute .bottom-left {
<html>
position: absolute;
bottom: 12px;
<head>
left: 30px;
<style>
}
.container { .bottom-right {
position: relative; position: absolute;
border: 2px solid #ef2c2c; bottom: 12px;
} right: 30px;
.center { }
position: absolute; img {
top: 45%; width: 100%;
width: 100%; opacity: 0.3;
text-align: center; }</style>
}
</head>
.top-left {
<body>
position: absolute;
<div class="container">
top: 12px; <img src="images/red-flower.jpg" alt="abc" width="1000px" height="350px">
left: 30px; <h3 class="center">Text at Centered</h3>
} <h3 class="top-left">Text at Top Left</h3>
.top-right { <h3 class="top-right">Text at Top Right</h3>
position: absolute; <h3 class="bottom-left">Text at Bottom Left</h3>
top: 12px; <h3 class="bottom-right">Text at Bottom Right</h3>
right: 30px; </div>
} </body>
Example: Fixed
<html> </head>
<head> <body>
<style> <div class="position_container">
.position_container { <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
width: 400px;
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
height: 200px;
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
background-color: #f2c3ee;
<p class="fixed-position">Tutorialspoint CSS Position Fixed</p>
overflow: auto;
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
padding: 5px; eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
} <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
.fixed-position { eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
position: fixed; <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
top: 15px; eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
left: 60px; </div>
padding: 5px; </body>
background-color: #bbedbb; </html>
text-align: center;
}
</style>
Example: Sticky </head>
<html> <body>
<head> <div class="position_container">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
<style> eiusmod tempor incididunt ut labore et dolore magna aliqua.
.position_container { "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
width: 400px; eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
height: 200px; <p class="sticky-position">Tutorialspoint CSS Position Sticky</p>
background-color: #f2c3ee; <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
overflow: auto; eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
padding: 5px; <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
} <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
.sticky-position { eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
position: sticky; <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
top: 15px; eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
padding: 5px; </div>
background-color: #bbedbb; </body>
</html>
text-align: center;
}
CSS Animation
• An animation lets an element gradually change from one style to another.
• You can change as many CSS properties you want, as many times as you want.
• To use CSS animation, you must first specify some keyframes for the animation.
• Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
• When you specify CSS styles inside the @keyframes rule, the animation will
gradually change from the current style to the new style at certain times.
• To get an animation to work, you must bind the animation to an element.
• The following example binds the "example" animation to the <div> element.
• The animation will last for 4 seconds, and it will gradually change the background-
color of the <div> element from "red" to "yellow":
Animation Example1:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
Animation Example2:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
Delay an Animation
• The animation-delay property specifies a delay for the start of an animation.
• The following example has a 2 seconds delay before starting the animation:
Animation Example3:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>
<div></div>
</body>
Set Animation Iteration Count
We can set number of times an animation should repeats itself using animation-iteration-count property.
The CSS specification does not support negative values for this property. It can take value as a positive integer (e.g., 1, 2, 3, etc.) or keyword
'infinite‘.
• Example4: </head>
<html>
<head> <body>
<style>
div { <h1>CSS Animation</h1>
width: 100px;
height: 100px; <p>The animation-
background-color: red;
position: relative;
iteration-count property
animation-name: example;
animation-duration: 4s;
can be set to infinite to let
animation-iteration-count: infinite; the animation run for
}
@keyframes example { ever:</p>
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;} <div></div>
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;} </body>
100% {background-color:red; left:0px; top:0px;}
} </html>
Animation Direction Property
• We can specify the direction in which animation should run using animation-
direction property.
• Following are the valid values for animation-direction property
• normal: The animation is played as normal (forwards). This is default.
• reverse: The animation is played in reverse direction (backwards).
• alternate: The animation is played forwards first, then backwards.
• alternate-reverse: The animation is played backwards first, then forwards.
Example: </head>
<html>
<head> <body>
<style> <h1>CSS Animation</h1>
div {
width: 100px; <p>The animation-direction property
height: 100px; specifies whether an animation should
background-color: red; be played forwards, backwards or in
position: relative; alternate cycles. The following example
animation-name: example;
animation-duration: 4s;
will run the animation in reverse
animation-direction: reverse; direction:</p>
} <div></div>
@keyframes example {
0% {background-color:red; left:0px; top:0px;} </body>
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
</html
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
Animation Timing Function
• In CSS, the animation-timing-function property is used to define speed curve of
animation.
• It can take following values.
• ease: The animation will start slow, then fast, then end slowly (The default value).
• linear: Animation with the same speed from start to end.
• ease-in: Animation with a slow start.
• ease-out: Animation with a slow end.
• ease-in-out: Animation with a slow start and end.
• cubic-bezier(n,n,n,n): This lets us to define our own values for speed.
<html> <body>
<head>
<style>
<h1>CSS Animation</h1>
div {
width: 100px;
height: 50px; <p>The animation-timing-function property
background-color: red; specifies the speed curve of the animation. The
font-weight: bold;
following example shows some of the different
speed curves that can be used:</p>
position: relative;
animation: mymove 5s;
animation-fill-mode: forwards; <div id="div1">linear</div>
} <div id="div2">ease</div>
#div1 {animation-timing-function: linear;} <div id="div3">ease-in</div>
#div2 {animation-timing-function: ease;} <div id="div4">ease-out</div>
#div3 {animation-timing-function: ease-in;}
<div id="div5">ease-in-out</div>
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove { </body>
from {left: 0px;} </html>
to {left: 300px;}
}
</style>
Set Animation Fill Modes
• The animation-fill-mode property specifies a style for the target element when
the animation is not playing (before it starts, after it ends, or both).
• The animation-fill-mode property can have the following values:
• none: The animation will not apply any style before or after it starts. This is default.
• forwards: At end of animation element will keep the style set by the last keyframe rule.
• backwards: At end of animation element will keep the style set by the first keyframe rule.
• both: The animation will follow the rules for both forwards and backwards.
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes example {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>
<div></div>
</body>
CSS Transitions
• To create a transition effect, you must specify two things:
• The CSS property you want to add an effect
• The duration of the effect
• Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.
• The transition effect will start when the specified CSS property (width) changes value.
Let us specify a new value for the width property when a user mouse hover the <div> element:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
Example:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
Transition-timing-function
• The transition-timing-function property can have the following values:
• Ease - specifies a transition effect with a slow start, then fast, then end slowly
(this is default)
• Linear - specifies a transition effect with the same speed from start to end
• Ease-in - specifies a transition effect with a slow start
• Ease-out - specifies a transition effect with a slow end
• Ease-in-out - specifies a transition effect with a slow start and end
• Cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier
function
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
</body>
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-delay Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
</body>
Transition + Transformation
• The following example adds a transition effect to the transformation:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>Transition + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
</body>
1.3 Bootstrap
• Bootstrap is a free front-end framework for faster and easier web development.
• Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals/dialogbox, image carousels/sliders and many
other, as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs.
• Responsive web design is about creating web sites which automatically adjust themselves
to look good on all devices, from small phones to large desktops.
• Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and
released as an open source product in August 2011.
• Bootstrap 5 is the newest version of Bootstrap; with new components, faster
stylesheets, more responsiveness etc.
• It supports the latest, stable releases of all major browsers and platforms.
• However, Internet Explorer 11 and down is not supported.
Why Use Bootstrap?
• Advantages of Bootstrap:
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start
using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets,
and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework.
• Browser compatibility: Bootstrap is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera).
• Provides a clean and uniform solution for building an interface for developers.
• It contains functional built-in components which are easy to customize.
• It provides web based customization.
• It is an open source.
Bootstrap Environment Setup
• It is very easy to setup and start using Bootstrap.
• We can download the latest version of Bootstrap from http://getbootstrap.com/.
File structure
• Once the compiled version Bootstrap is downloaded, extract the ZIP file,
and you will see the following file/directory structure:
Setup and Use Bootstrap
• In order to use Bootstrap, you first need to integrate it into your development
environment, aka web page.
• For that, you have two different possibilities: load it remotely from a CDN or
• Download and use Bootstrap locally from getbootstrap.com
• Then follow the steps below
• Build a basic HTML file - Use your preferred code editor to create the file
• Convert the file to a Bootstrap template - Include the Bootstrap CSS CDN and Bootstrap JS
CDN files, along with Popper and Bootstrap jQuery through their CDN links
• Save and view the file - Save the file with extension .html and as a template.
1. Create an HTML Page
• As a first step, create a simple HTML template as a base where we will use Bootstrap.
• For that, first create a folder on your computer or server for the project files.
• Use text editor of your choice (e.g. Notepad++) and create a new text file and call
it index.html
!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
2a. Load Bootstrap via CDN
• Bootstrap consists mainly of style sheets and scripts.
• As such, they can be loaded in the header and footer of your web page like other
assets such as custom fonts.
• The framework offers a CDN (content delivery network) access path for that.
• To get Bootstrap into your page, simply paste the code below into
the <head> section of your template.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@ 4.5.3/
dist/css/bootstrap.min.css" integrity="sha384 TX8t27EcRE3e
/ihU7zmQxVncDAy5uIK z4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
• When you now save the file, any browser that opens it will automatically load the
Bootstrap assets.
• However, for experimenting and development, or if you want to be independent
of an Internet connection, you can also get your own copy of the files
2b. Host Bootstrap Locally
• An alternative way to set up Bootstrap is to download it to your hard drive
and use the files locally. Download the compiled CSS and JS files from
https://getbootstrap.com.
• Once you have finished downloading it, unzip the file and copy its contents
into the same directory as index.html.
• After that, you can load the Bootstrap CSS into your project like this:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
• You will notice that this includes the file path at which to find the Bootstrap
file. In your case, make sure your path corresponds to your actual setup.
• For example, the names of the directories might differ if you downloaded a
different version of Bootstrap.
3. Include jQuery
• In order to get the full functionality of Bootstrap, you also need to load the
jQuery library. Here, you have the possibility to load it remotely or host it locally.
• Bootstrap 5, which is currently in Beta status, will stop using jQuery and use
plain JavaScript instead.
• You find the link to the latest version of the jQuery library here (click on any of
the links to get the remote URL).
• You can use it to load the library into your page by putting the line of code below
right before where it says </body> on your page.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-
9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
• Alternatively, download jQuery (right-click > Save Link As…), unzip, and put it into
the project folder.
• Then, include it in the same place of your file in this way:
<script src="jquery-3.5.1.min.js"></script>
4. Load Bootstrap JavaScript
• The last step in setting up Bootstrap is to load the Bootstrap JavaScript library.
• It’s included in the downloaded version of the framework and you also find links
to remote sources in the same place as mentioned above.
• However, we will load it in a different place than the style sheet. Instead of the
header, it goes into the page footer, right after the call for jQuery.
• You can call it remotely like this:
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr
/aWKhXdBNm Nb5D92v7s" crossorigin="anonymous"></script>
• Or locally like:
<script src="bootstrap/js/bootstrap.min.js"></script>
• If you have followed the steps above correctly, you should end up
with a file that looks like this for the remote solution:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet“ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXe
Med4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-
w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</body>
• And here is what you should have for the version that loads all assets locally:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
5. Design The Page
• When you open your sample site in a browser, you should simply see a blank
page.
• So, we can add different elements to the page.
1. Add a Navigation Bar
• The first thing adding a navigation bar to the top of the page.
• For that, we will use the navbar class.
• It creates a navigation bar that is responsive by default and will automatically
collapse on smaller screens.
• It also offers built-in support for adding branding, color schemes, spacing, and
other components.
• You can start by posting this just after the <body> tag:
Example:
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
• Explanation of the Code
• navbar-expand-md-this denotes at which point the navigation bar expands
from vertical or hamburger icon to a full-size horizontal bar.
• navbar-brand- This is used for your website branding. You can also include a
logo image file here.
• navbar-toggle- denotes the toggle button for the collapsed menu. The piece
data-toggle="collapse" defines that this will turn to a hamburger menu, not to
drop-down, which is the other option.
• navbar-toggler-icon- creates the icon users click on to open the menu on
smaller screens.
• navbar-nav- the class for the <ul> list element that holds the menu items. The
latter are denoted with nav-item and nav-link.
• The output looks like:
2. Include Custom CSS
• We can add your own CSS files which you can use to overwrite existing
styling.
• For that, simply create a blank file with your text editor and call it main.css.
• Save it, then add it to the head section of your Bootstrap site like this:
<link rel="stylesheet" type="text/css" href="main.css">
• This is the code for a style sheet that resides in the main directory. If you decide
to place your inside the css folder, be sure to include the correct path in the link.
• For example, to style the page background as well as the navigation bar and its elements, we
could use markup like this:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
Result
3. Create a Page Content Container
• The next thing is a container for the page content. add underneath the navbar
tag:
<header class="page-header header container-fluid">
</header>
• The container-fluid is one of the default Bootstrap classes. Applying it to the div
element automatically applies a bunch of CSS to it.
• The -fluid part makes sure the container stretches across the entire width of the
screen.
• There’s also just container, which is a class that has fixed widths applied to it.
4. Add a Background Image and Custom JavaScript
• As the next step in this Bootstrap tutorial, we want to include a full-screen background image for our landing
page header.
• To that end, we will have to use some jQuery or JavaScript to make the image stretch all the way across the
screen.
• First, create a text file of the name main.js and place it inside your site folder.
• Then, call it before the closing </body> tag inside index.html.
<script src="main.js"></script>
• After that, you can copy and paste this piece of jQuery code to make the <header> element stretch across the
entire screen:
$(document).ready(function(){
$('.header').height($(window).height());
})
• However, as mentioned, Bootstrap 5 will no longer come with the jQuery library, therefore, use plain JavaScript
like so
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
document.querySelector(".header").style.height = window.innerHeight + "px";
• Then, the only thing that’s left is to set a background image. You can do this
like so inside main.css:
.header {
background-image: url('images/header-background.jpg');
background-size: cover;
background-position: center;
position: relative;
}
5. Add an Overlay
• To make the background image extra stylish, we will also add an overlay.
• For that, create another div inside the <header> element you just created
earlier.
<div class="overlay"></div>
• Then, you can add the following in your custom CSS file:
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
This will create this nice overlay for the image you input earlier:
6. Include a Page Title and Body Text
• As a next step, you probably want to add a page title in the form of a heading plus
some body text.
• To create those, simply add this snippet inside the container you set up in the last
step, below the overlay:
<div class="description">
<h1>Welcome to the Landing Page!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum

quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id
vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in
pharetra sem ullamcorper.</p>
</div>
• After that, add the following markup to main.css.
.description {
left: 50%;
position: absolute;
top: 45%;
transform: translate(-50%, -55%);
text-align: center;
}
.description h1 {
color: #6ab446;
}
.description p {
color: #fff;
font-size: 1.3rem;
line-height: 1.5;
When you do, the landing page now looks like this:
7. Create a CTA Button
• No landing page is complete without a call to action, most often in the form of a button.
• The framework offers plenty of tools to create buttons quickly and easily.
• In our case, we add the following markup right below the page content inside the
<description> container:
<button class="btn btn-outline-secondary btn-lg">See More!</button>
• In addition to that, we add this CSS to main.css:
.description button {
border:1px solid #6ab446;
background:#6ab446;
border-radius: 0;
color:#fff;
}
.description button:hover {
border:1px solid #fff;
background:#fff;
color:#000;
After saving and reloading, it looks like this:
8. Set Up a Three-Column Section
• Next up, we want to create three columns below the main content for additional information
using bootstrap grid.
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src=“BDFun.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat
ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src=“BDFun.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat
ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
• In addition to that, you can include the following styling in the usual place:
.features {
margin: 4em auto;
padding: 1em;
position: relative;
}
.feature-title {
color: #333;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.features img {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
margin-bottom: 16px;
}
Bootstrap Grids
• Bootstrap Grid System
• Bootstrap's grid system allows up to 12 columns across the page.
• If you do not want to use all 12 columns individually, you can group the columns
together to create wider columns:
• Bootstrap's grid system is responsive, and the columns will re-arrange
automatically depending on the screen size.
Grid Classes
• The Bootstrap grid system has four classes:
• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)
• The classes above can be combined to create more dynamic and flexible
layouts.
• Basic Structure of a Bootstrap Grid
• The following is a basic structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
• First, create a row (<div class="row">).
• Then, add the desired number of columns (tags with appropriate col-*-* classes).
• Note that numbers in .col-*-* should always add up to 12 for each row.
• Below we have collected some examples of basic Bootstrap grid layouts.
• Three Equal Columns
col-sm-4 col-sm-4 col-sm-4

• The following example shows how to get a three equal-width columns starting at
tablets and scaling to large desktops.
• On mobile phones or screens that are less than 768px wide, the columns will
automatically stack:
• Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
9. Add a Contact Form
• From the three column, the third fields is still empty. It is to add a contact form to itfor
visitors to get in touch.
• Creating a contact form in Bootstrap is quite easy:
<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
• form-group — Used to wrap around form fields for formatting.
• form-control — Denotes form fields such as inputs, text areas, etc.
• Add this styling in main.css:
.features .form-control,
.features input {
border-radius: 0;
}
.features .btn {
background-color: #589b37;
border: 1px solid #589b37;
color: #fff;
margin-top: 20px;
}
.features .btn:hover {
background-color: #333;
border: 1px solid #333;
}
10. Include a Team Section
• Card Layouts are used to set up a team section, where we display team members and
their positions in the company.
• However, we want to make this section a different color. For that reason, we first
include another <div> element as its background. Inside, there is another container
with a custom class for more customizability, followed by a row.
<div class="background">
<div class="container team">
<div class="row">
</div>
</div>
</div>
• Creating cards is easy, simply give an element the class card. You can also use grid
classes for sizing it and determining how many cards appear in one row. Plus, since we
want all the content in the card to be centered, we will also add the Bootstrap class
text-center to it.
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
• Cards can contain different elements. Image at the top, followed by a title (the
name of the person) and a description that says what they do.
• For images, we will use the card-img-top class to position an image at the roof of
the card. We will also give it the rounded-circle class to make the image round.
• After that, we create a new element with the class card-body that contains a
heading and paragraph with card-title and card-text classes respectively.
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card
image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
• When we now place it inside the row element, replicate
it eight times, and place image files in the respective
locations, we get this result.
• To make it look like this, we also included some custom CSS. Here is the markup you can
add to your style sheet:
.background {
background: #dedec8;
padding: 4em 0;
}
.team {
color: #5e5e55;
padding: 0 180px;
}
.team .card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.team .card {
background:none;
border: none;
}
.team .card-title {
font-size: 1.3rem;
margin-bottom: 0;
text-transform: uppercase;
11. Create a Two-Column Footer
• The last thing we want to add to our page is a footer section with two columns.
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante
luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante
luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>1640 Riverside Drive, Hill Valley, California
<br/>[email protected]
<br/>+ 01 234 567 88
<br/>+ 01 234 567 89</p>
</div>
<div>
<div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
• Besides the usual grid markup, this section highlights a few possibilities to
modify typography with Bootstrap:
• text-uppercase
• font-weight-bold
• text-center
• It should be pretty clear from the names of the classes that they do. You can find
more information about Bootstrap and typography here.
• In addition to the above, you can use styling like this:
.page-footer {
background-color: #222;
color: #ccc;
padding: 60px 0 30px;
}
.footer-copyright {
color: #666;
padding: 40px 0;
}
This results:
Finished site in browser window.
13. Create a Modal
• A modal means an element like a popup that appears on top of a website.
You can use it for all sorts of purposes. In our case, we can create a prompt
to subscribe to a newsletter.
W3C
• The W3C is an international organization founded in 1994 by Tim Berners-Lee, the inventor of the
World Wide Web. The W3C is made up of several hundred member organizations from different IT
industries.
• The World Wide Web Consortium (W3C) supports web technology by creating and promoting
standards that help ensure the web is accessible, functional, and secure:
• Standardization
• W3C standards help ensure that web technologies are standardized, which allows developers to create consistent
and compatible websites and applications.
• Accessibility
• W3C standards help ensure that websites are accessible to all users, regardless of their device or browser. The
W3C's Web Accessibility Initiative (WAI) develops strategies and resources to make the web accessible to people
with disabilities.
• Security
• W3C standards help ensure that web content is secure.
• Technical quality
• W3C standards help maintain a consistent level of technical quality and compatibility across the web.
• Simplicity
• W3C standards simplify the job of web developers by ensuring they have a finite list of skills they need to learn.
W3Scools
• W3Schools is not part of the W3C (World Wide Web Consortium); while its name
is derived from "World Wide Web," it is a separate entity and is not affiliated
with the W3C organization.
• Key points:
• W3Schools is an educational platform: It provides online tutorials and courses for learning
web development languages like HTML, CSS, and JavaScript.
• W3C is a standards body: The World Wide Web Consortium sets standards for web
technologies.
• No official connection: Despite the similar naming, W3Schools is not officially associated
with the W3C.
• W3Schools is a popular online platform that provides web development tutorials and
references for various web technologies.
• W3schools
• W3Schools has focus on simplicity.
• W3Schools practice easy learning.
• W3Schools uses simple code examples and simple illustrations of how to use it.
• W3Schools' tutorials start from basic level and move all the way up to professional
references.
• Try It Yourself
• W3schools presents thousands of code examples.
• By using our online editor, Try it Yourself, you can edit examples and execute computer
code experimentally, to see what works and what does not, before implementing it.
Chapter Slide End!

You might also like