🌐 Basic Website Creation using HTML & CSS
(Easy & student-friendly notes by your Computer Teacher)
📌 What is a Website?
A website is a collection of web pages that are displayed on the internet
using a web browser (like Chrome, Edge, Firefox).
Each website is made using: - HTML → Structure of the website - CSS →
Design and styling of the website
👉 Think of it like this: - HTML = Skeleton of the body - CSS = Clothes, colors,
and style
🧱 What is HTML?
HTML (HyperText Markup Language) is used to create the structure of
a web page.
HTML uses tags to tell the browser what to display.
🔹 Basic Structure of an HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page.</p>
</body>
</html>
🔹 Explanation:
<!DOCTYPE html> → Tells browser this is an HTML5 document
<html> → Root of the HTML page
<head> → Contains page information (title, links)
<title> → Shows text on browser tab
<body> → Actual content shown on page
Common HTML Tags
Tag Use
<h1> to <h6> Headings
<p> Paragraph
<br> Line break
<hr> Horizontal line
<b> Bold text
<i> Italic text
<u> Underline
<a> Link
<img> Image
<ul> Unordered list
<ol> Ordered list
<li> List item
🔗 Creating a Link
<a href="[Link] to Google</a>
Adding an Image
<img src="[Link]" width="200" height="150">
🎨 What is CSS?
CSS (Cascading Style Sheets) is used to design and style the website.
CSS controls: - Colors - Fonts - Size - Alignment - Layout
🎯 Ways to Apply CSS
1️⃣Inline CSS (inside tag)
<p style="color:red;">This is red text</p>
2️⃣Internal CSS (inside <style> tag)
<head>
<style>
p { color: blue; }
</style>
</head>
3️⃣External CSS (recommended)
Create a file: [Link]
body {
background-color: lightyellow;
}
h1 {
color: green;
text-align: center;
}
p {
font-size: 18px;
}
Link it to HTML file:
<link rel="stylesheet" href="[Link]">
🎨 Common CSS Properties
Property Use
color Text color
background-color Background color
font-size Text size
font-family Font style
text-align Alignment
border Border
margin Outer space
padding Inner space
🧩 Using Classes in CSS
HTML
<p class="info">This is information text</p>
CSS
.info {
color: purple;
font-weight: bold;
}
Creating a Simple Web Page (HTML + CSS)
HTML File ([Link])
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>My First Website</h1>
<p>This website is made using HTML and CSS.</p>
</body>
</html>
CSS File ([Link])
body {
background-color: #f0f8ff;
}
h1 {
color: darkblue;
}
p {
font-size: 16px;
}
✅ Steps to Create Your Own Website
1. Open Notepad
2. Write HTML code
3. Save file as [Link]
4. Create [Link] in same folder
5. Open HTML file in browser
🧠 Remember
HTML gives structure
CSS gives beauty
Practice makes you perfect 💪
✨ With these basics, you can easily create your first website!