💻
Lesson 1
1. What is a Website?
A website is a collection of web pages that are accessible through the internet.
Each page is built using HTML, styled with CSS, and can include JavaScript for
interactive features. Websites can be:
Static (fixed content, like a portfolio or blog).
Dynamic (interactive and constantly updated, like social media or e-commerce
sites).
Websites are hosted on servers and accessed via browsers like Chrome, Firefox,
and Edge.
2. What is Web Development?
Web development is the process of building and maintaining websites. It involves:
1. Frontend Development (Client-Side): Frontend development focuses on what
users see and interact with on a website. It includes:
HTML – Structure of the website.
CSS – Styling and layout.
JavaScript – Adds interactivity (buttons, animations, forms, etc.).
2. Backend Development (Server-Side): Backend development handles the
logic, database, and server-side operations of a website. It includes:
Programming languages like Python, PHP, Java, and JavaScript (Node.js).
Databases (MySQL, MongoDB) to store and manage data.
Servers that process requests and send responses to the frontend.
Lesson 1 1
3. What is HTML?
HTML (HyperText Markup Language) is the standard language used to create and
structure web pages. It consists of elements represented by tags (e.g., <p>, <h1>,
<a>), which define the content and layout of a webpage. HTML is not a
programming language but a markup language that works alongside CSS (for
styling) and JavaScript (for functionality).
4. How to Open a New HTML File in Visual Studio
Code?
1. Open VS Code.
2. Click on "New File".
3. In the bar at the top, type your file name with the .html extension (e.g.,
index.html).
4. Press Enter.
5. Choose where to save your file and click "Create File".
6. Write your HTML code inside the file.
7. To view your webpage, you can:
Install the Live Server extension (recommended) and click "Go Live" to
preview the file in a browser.
Manually open the file by right-clicking and selecting "Open with Browser".
5. Structure of an HTML File with Meaning
of the Codes
A basic HTML file follows a standard structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Lesson 1 2
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<a href="<https://www.google.com>">Click here to visit Google</a>
<button>Click Me</button>
<span style="color: red;">This is a span element.</span>
</body>
</html>
Explanation of HTML Tags Used:
• <!DOCTYPE html> → Declares the document type as HTML5.
<html lang="en"> → The root element, with a language attribute set to English.
<head> → Contains metadata about the page (not visible on the webpage).
<meta charset="UTF-8"> → Ensures the webpage supports all characters and
symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> →
Makes the webpage responsive on different screen sizes.
<title> → Sets the title of the webpage (seen on the browser tab).
<body> → Contains all the visible content of the webpage.
<h1> → A heading tag, with h1 being the largest and h6 the smallest.
<p> → A paragraph tag used for text.
<a href="URL"> → A hyperlink tag that links to another page.
<button> → Creates a clickable button.
<span> → A small inline element used for styling or grouping text.
Lesson 1 3
