How to Create a Website Using HTML and CSS? (original) (raw)
Last Updated : 04 Feb, 2025
Creating a website using HTML and CSS is a foundational skill if you are learning web development. **HTML (HyperText Markup Language) is used to structure content, while **CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go through the steps to create a simple, responsive webpage.
Approach
- **Basic HTML Structure:
Start by creating a fundamental layout that includes a navigation bar with a logo and navigation links. - **Search Box:
Add a search box and a search button within the navigation menu. - **Header Section:
Use the<header>tag to include a title and introductory content. - **Main Content Sections:
Divide the primary content into sections using<section>tags and style them with CSS. - **Footer Section:
Use the<footer>tag for copyright information or other footer content. - **Responsive Design:
Implement media queries in CSS to ensure the layout adapts seamlessly across various devices
**Example: Creating a Simple Web Page
Before creating the website, set up the structure of your project. Follow these steps:
1. **Create the HTML File
- Name the file
index.html(or another name of your choice). - This file will contain the structural content of your webpage.
2. **Create the CSS File
- Name the file
style.css(or another name, as long as you link it correctly). - This file will include all the styling rules for your webpage, such as colors, fonts, and layouts.
3. **Link the CSS to the HTML File
- In the
<head>section of your HTML file (index.html), link the CSS file using the<link>tag, as shown below:
Ensure the style.css file is in the same directory as your index.html, or adjust the file path accordingly if it is in a different folder.
HTML `
Simple web page Template<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>
</section>
<footer class="background">
<p class="text-footer">
Copyright ©-All rights are reserved
</p>
</footer>CSS
- { margin: 0; padding: 0; }
.navbar { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; padding: 15px; cursor: pointer; }
.background { background: black; background-blend-mode: darken; background-size: cover; }
.nav-list { width: 70%; display: flex; align-items: center; gap: 20px; list-style: none; }
.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; padding: 10px; }
.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; }
footer { text-align: center; padding: 15px; }
.rightnav { width: 100%; text-align: right; margin-top: 10px; }
#search { box-sizing: border-box; width: 70%; padding: 8px; font-size: 17px; border: 2px solid grey; border-radius: 9px; }
.btn-sm { padding: 8px 20px; margin: 7px 5px; }
img { max-width: 100%; height: auto; }
`
**Output:
Design a web page using HTML and CSS Example Output