WEEK 1 – Introduction to Web
Development & HTML Basics
🎯 Objectives:
• Understand how websites work
• Learn the structure of HTML
• Create a basic HTML page
WHAT IS WEB DEVELOPMENT?
🧠 Topics:
• What is Web Development?
• Frontend and Backend
• What is HTML?
• HTML Tags: <html>, <head>, <body>
• Headings: <h1>–<h6>
• Paragraphs, Images, Links, Lists
WHAT IS WEB DEVELOPMENT?
• Web development is the process of creating and maintaining
websites or web applications that run on the internet.
• It covers everything from how a website looks and feels (design) to
how it functions behind the scenes (logic, databases, servers).
• It can be divided into three main areas:
1. Frontend Development
2.Backend Development
3.Database Management
WHAT IS WEB DEVELOPMENT?
1.FRONTEND DEVELOPMENT (Client-side)
•What users see and interact with directly.
•Uses languages like HTML (structure), CSS (styling), and
JavaScript (interactivity).
•Example: buttons, forms, animations, layouts, menus.
WHAT IS WEB DEVELOPMENT?
2.BACKEND DEVELOPMENT (Server-side)
•What happens in the background to make the website work.
•Involves handling databases, user accounts, security, and server
logic.
•Uses languages/frameworks like Python (Flask/Django), PHP
(Laravel), Node.js, Java, etc.
•Example: storing user details when they sign up, processing
payments, fetching data.
WHAT IS WEB DEVELOPMENT?
3.DATABASE MANAGEMENT
•Where website data is stored and retrieved.
•Examples: MySQL, PostgreSQL, MongoDB, SQLite.
4.FULL-STACK DEVELOPMENT
•A developer who can handle both frontend and backend (and
sometimes deployment).
WEB DEVELOPMENT OVERVIEW
WHAT IS HTML?
HTML (HyperText Markup Language) is the standard language used to create
the structure of web pages.
Think of it as the skeleton of a website — it defines what elements appear on
a page (like headings, text, images, links, forms, tables, etc.), but it doesn’t
control how they look (that’s CSS) or how they behave (that’s JavaScript).
Key Points about HTML:
•HyperText → Links different web pages together (using hyperlinks).
•Markup Language → Uses tags (<tag>) to “mark up” content.
•Not a programming language → It doesn’t have logic (like loops or
conditions); it’s just for structure.
SAMPLE HTML TAGS
Example of HTML code
<!DOCTYPE html>
<html>
<head> <title>My First Web page</title> </head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Click here to visit Example</a>
</body>
</html>
CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is the language used to style and design
web pages.
If HTML is the skeleton, then CSS is the skin, clothes, and colors that
make a website look nice.
What CSS Does
•Controls colors, fonts, spacing, and layout
•Makes websites responsive (look good on phones, tablets,
computers)
•Adds design effects like animations, transitions, and hover effects
Types of CSS
1.Inline CSS → Written inside an HTML tag (<p>
style="color:red;">Text</p>)
2.Internal CSS → Written inside <style> in the HTML <head>
3.External CSS → Saved in a separate .css file and linked with <link
rel="stylesheet" href="style.css">
JavaScript
JavaScript is a programming language mainly used to make websites
interactive and dynamic. While HTML structures the content of a
webpage and CSS styles it, JavaScript adds behavior.
For example:
•Without JavaScript: A button on a webpage is just a picture or text.
•With JavaScript: Clicking the button can open a popup, play a video,
send data to a server, or change the webpage instantly without
reloading.
JavaScript
Key Points about JavaScript:
1.Client-Side Language – Runs directly in the user’s web browser (e.g.,
Chrome, Firefox, Edge).
2.Interactivity – Enables animations, dropdown menus, slideshows,
form validation, games, etc.
3.Versatility – Can be used both on the front-end (browser) and back-
end (with tools like Node.js).
4.Popular – It is one of the most widely used programming languages
in the world.
JavaScript
Examples of Use:
•Live chat boxes
•Updating content without refreshing (AJAX)
•Validating login forms
•Online calculators
In short: JavaScript = The language that makes web pages come alive.
