Advertisements

How to build a website Using a web page using HTML and CSS

Design a web page using HTML and CSS: Making a good-looking web page can be hard if you don’t know CSS well. You need CSS to make the page look better. To build a web page, you must understand HTML and CSS. This article will mainly talk about how to use CSS. We start by making the basic shape of the web page with HTML.

Building the layout: Here, we will make a basic layout for a web page using the “li” (list item) and “section” tags. This will set up a straightforward design that you can see by running the code provided.

Advertisements

HTML code: 

<!DOCTYPE html>
 
<html>
 
<head>
<title>
Simple web Development Template
</title>
</head>
 
<body>
<nav class=”navbar background”>
<ul class=”nav-list”>
<div class=”logo”>
<img src=”logo.png”>
</div>
<li><a href=”#web”>Web Technology</a></li>
<li><a href=”#program”>C Programming</a></li>
<li><a href=”#course”>Courses</a></li>
</ul>
 
<div class=”rightNav”>
<input type=”text” name=”search” id=”search”>
<button class=”btn btn-sm”>Search</button>
</div>
</nav>
 
<section class=”firstsection”>
<div class=”box-main”>
<div class=”firstHalf”>
<h1 class=”text-big” id=”web”>
Web Technology
</h1>
 
<p class=”text-small”>
HTML stands for HyperText Markup 
Language. It is used to design 
web pages using a markup language.
HTML is the combination of Hypertext
and Markup language. Hypertext 
defines the link between the web 
pages. A markup language is used 
to define the text document within 
tag which defines the structure of 
web pages. HTML is a markup language
that is used by the browser to 
manipulate text, images, and other
content to display it in the required 
format.
</p>
 
 
</div>
</div>
</section>
 
<section class=”secondsection”>
<div class=”box-main”>
<div class=”secondHalf”>
<h1 class=”text-big” id=”program”>
C Programming
</h1>
<p class=”text-small”>
C is a procedural programming language.
It was initially developed by Dennis 
Ritchie as a system programming 
language to write operating system. 
The main features of C language include
low-level access to memory, simple set 
of keywords, and clean style, these 
features make C language suitable for
system programming like operating system 
or compiler development.
</p>
 
 
</div>
</div>
</section>
 
<section class=”section”>
<div class=”paras”>
<h1 class=”sectionTag text-big”>Java</h1>
 
<p class=”sectionSubTag text-small”>
Java has been one of the most 
popular programming language 
for many years. Java is Object 
Oriented. However it is not 
considered as pure object oriented
as it provides support for primitive
data types (like int, char, etc) The
Java codes are first compiled into byte
code (machine independent code). Then
the byte code is run on Java Virtual
Machine (JVM) regardless of the
underlying architecture.
</p>
 
 
</div>
 
<div class=”thumbnail”>
<img src=”img.png” alt=”laptop image”>
</div>
</section>
 
<footer class=”background”>
<p class=”text-footer”>
Copyright ©-All rights are reserved
</p>
 
 
</footer>
</body>
 
</html>
 
We have included classes named “section” and “section-left” which are used in CSS to add styling and make the web page look better.
 
CSS styling: We will apply CSS to enhance the design of the HTML web page we made. The challenge is to arrange the picture and text in opposite directions. If the picture starts on the right and text on the left, using “flex-direction: row-reverse” in CSS will switch them. The picture will move to the left and the text to the right.
 
CSS code: 
 
<style>
* {
margin: 0;
padding: 0;
}
 
.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
 
.background {
background: black;
background-blend-mode: darken;
background-size: cover;
}
 
.nav-list {
width: 70%;
display: flex;
align-items: center;
}
 
.logo {
display: flex;
justify-content: center;
align-items: center;
}
 
.logo img {
width: 180px;
border-radius: 50px;
}
 
.nav-list li {
list-style: none;
padding: 26px 30px;
}
 
.nav-list li a {
text-decoration: none;
color: white;
}
 
.nav-list li a:hover {
color: grey;
}
 
.rightnav {
width: 30%;
text-align: right;
}
 
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
 
.firstsection {
background-color: green;
height: 400px;
}
 
.secondsection {
background-color: blue;
height: 400px;
}
 
.box-main {
display: flex;
justify-content: center;
align-items: center;
color: black;
max-width: 80%;
margin: auto;
height: 80%;
}
 
.firsthalf {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
 
.secondhalf {
width: 30%;
}
 
.secondhalf img {
width: 70%;
border: 4px solid white;
border-radius: 150px;
display: block;
margin: auto;
}
 
.text-big {
font-family: ‘Piazzolla’, serif;
font-weight: bold;
font-size: 35px;
}
 
.text-small {
font-size: 18px;
}
 
.btn {
padding: 8px 20px;
margin: 7px 0;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
}
 
.btn-sm {
padding: 6px 10px;
vertical-align: middle;
}
 
.section {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
max-width: 90%;
margin: auto;
}
 
.section-Left {
flex-direction: row-reverse;
}
 
.paras {
padding: 0px 65px;
}
 
.thumbnail img {
width: 250px;
border: 2px solid black;
border-radius: 26px;
margin-top: 19px;
}
 
.center {
text-align: center;
}
 
.text-footer {
text-align: center;
padding: 30px 0;
font-family: ‘Ubuntu’, sans-serif;
display: flex;
justify-content: center;
color: white;
}
</style>
 

Final code: We will combine both HTML and CSS in order to create the web page.

<!DOCTYPE html>
 
<html>
 
<head>
<title>Simple web Development Template</title>
 
<style>
* {
margin: 0;
padding: 0;
}
 
.navbar {
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
cursor: pointer;
}
 
.background {
background: black;
background-blend-mode: darken;
background-size: cover;
}
 
.nav-list {
width: 70%;
display: flex;
align-items: center;
}
 
.logo {
display: flex;
justify-content: center;
align-items: center;
}
 
.logo img {
width: 180px;
border-radius: 50px;
}
 
.nav-list li {
list-style: none;
padding: 26px 30px;
}
 
.nav-list li a {
text-decoration: none;
color: white;
}
 
.nav-list li a:hover {
color: grey;
}
 
.rightnav {
width: 30%;
text-align: right;
}
 
#search {
padding: 5px;
font-size: 17px;
border: 2px solid grey;
border-radius: 9px;
}
 
.firstsection {
background-color: green;
height: 400px;
}
 
.secondsection {
background-color: blue;
height: 400px;
}
 
.box-main {
display: flex;
justify-content: center;
align-items: center;
color: black;
max-width: 80%;
margin: auto;
height: 80%;
}
 
.firsthalf {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
 
.secondhalf {
width: 30%;
}
 
.secondhalf img {
width: 70%;
border: 4px solid white;
border-radius: 150px;
display: block;
margin: auto;
}
 
.text-big {
font-family: ‘Piazzolla’, serif;
font-weight: bold;
font-size: 35px;
}
 
.text-small {
font-size: 18px;
}
 
.btn {
padding: 8px 20px;
margin: 7px 0;
border: 2px solid white;
border-radius: 8px;
background: none;
color: white;
cursor: pointer;
}
 
.btn-sm {
padding: 6px 10px;
vertical-align: middle;
}
 
.section {
height: 400px;
display: flex;
align-items: center;
justify-content: center;
max-width: 90%;
margin: auto;
}
 
.section-Left {
flex-direction: row-reverse;
}
 
.paras {
padding: 0px 65px;
}
 
.thumbnail img {
width: 250px;
border: 2px solid black;
border-radius: 26px;
margin-top: 19px;
}
 
.center {
text-align: center;
}
 
.text-footer {
text-align: center;
padding: 30px 0;
font-family: ‘Ubuntu’, sans-serif;
display: flex;
justify-content: center;
color: white;
}
</style>
</head>
 
<body>
<nav class=”navbar background”>
<ul class=”nav-list”>
<div class=”logo”>
<img src= “logo.png”>
</div>
<li><a href=”#web”>Web Technology</a></li>
<li><a href=”#program”>C Programming</a></li>
<li><a href=”#course”>Courses</a></li>
</ul>
 
<div class=”rightNav”>
<input type=”text” name=”search” id=”search”>
<button class=”btn btn-sm”>Search</button>
</div>
</nav>
 
<section class=”firstsection”>
<div class=”box-main”>
<div class=”firstHalf”>
<h1 class=”text-big” id=”web”>Web Technology</h1>
<p class=”text-small”>
HTML stands for HyperText Markup Language.
It is used to design web pages using a markup
language. HTML is the combination of Hypertext
and Markup language. Hypertext defines the
link between the web pages. A markup language
is used to define the text document within tag
which defines the structure of web pages.
HTML is a markup language that is used by the
browser to manipulate text, images, and other
content to display it in the required format.
</p>
 
 
</div>
</div>
</section>
 
<section class=”secondsection”>
<div class=”box-main”>
<div class=”firstHalf”>
<h1 class=”text-big” id=”program”>
C Programming
</h1>
<p class=”text-small”>
C is a procedural programming language. It
was initially developed by Dennis Ritchie
as a system programming language to write
operating system. The main features of C
language include low-level access to memory,
simple set of keywords, and clean style,
these features make C language suitable for
system programming like operating system or
compiler development.
</p>
 
 
</div>
</div>
</section>
 
<section class=”section”>
<div class=”paras”>
<h1 class=”sectionTag text-big”>Java</h1>
 
<p class=”sectionSubTag text-small”>
Java has been one of the most popular
programming language for many years.
Java is Object Oriented. However it is
not considered as pure object oriented
as it provides support for primitive
data types (like int, char, etc) The
Java codes are first compiled into byte
code (machine independent code). Then
the byte code is run on Java Virtual
Machine (JVM) regardless of the
underlying architecture.
</p>
 
 
</div>
 
<div class=”thumbnail”>
<img src= “img.png” alt=”laptop image”>
</div>
</section>
 
<footer class=”background”>
<p class=”text-footer”>
Copyright ©-All rights are reserved
</p>
 
 
</footer>
</body>
 
</html>
 
 
Output: 
 
 
Design a web page using HTML and CSS web page HTML and CS website web pge HTML and CSS web page using HTML and CSS
 

 Supported Browser for HTML and CSS 

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

In conclusion, CSS is essential for beautifying a web page, enabling us to effectively switch the positions of elements like images and text for a more appealing layout. Mastery of CSS, combined with HTML, is key to crafting visually engaging web pages. web page HTML and CSS.

WHAT'S IN THIS POST ?

FAQ About web page using HTML and CSS

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create and structure sections, paragraphs, and links on a web page.

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen.

Advertisements
Do I need to learn HTML before CSS?

Yes, it is generally recommended to learn HTML first because it forms the structure of your web pages, while CSS is used to style them.

Govinda Rauniyar is a graduate of journalism, psychology, English and Business Management. He is passionate about communication- with the words spoken and unspoken, written and unwritten- and always looks forward to learning and growing at every opportunity. He is a postgraduate in business management and translation studies; he aims to…

This is a new paragraph added to the author box.

Leave a Comment

Advertisements