---
# System prepended metadata

title: Lecture-01 (HTML5 & Web Apps)

---

# 🎓 Lecture 01: Introduction to Web Development & HTML5 Fundamentals

## 🕒 Duration

**3 hours** (can be split into two parts with a 10-minute break)

---

## ⚠️ Pre-requisites

Before starting this lecture, make sure you have:

- **Visual Studio Code (VS Code)** installed
- **Git** installed on your machine
- **GitHub account** ready

### Recommended VS Code Extensions

- ESLint
- Prettier
- JavaScript (ES6) Code Snippets
- Live Server
- GitLens

---

## 🌟 Learning Objectives

By the end of this lecture, you will:

- Understand what web development is and how web apps work.
- Recognize the basic structure of a web page.
- Learn what **HTML**, **tags**, **elements**, and **attributes** are.
- Use Developer Tools in the browser to explore and inspect HTML elements.
- Write your first HTML5 page with different common tags.
- Understand why some elements behave differently (block vs inline).
- Learn about opening/closing tags and self-closing tags.
- Understand pixels in web design.

---

## 📖 Section 1: Introduction to Web Development
![Dom-Tree-of-An-Example-Web-Page](https://hackmd.io/_uploads/BJONAa-Flg.png)


A **website** is like a house:

- **HTML** = the structure or skeleton
- **CSS** = the design, paint, and decoration
- **JavaScript** = the brain, adds interaction

Browsers (Chrome, Edge, Safari, Firefox) read your HTML file and display it.

---

## 📖 Section 2: HTML Basics

HTML (**HyperText Markup Language**) describes the **structure** of your web page.

### Example of a Minimal HTML Page

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
```

---

## 📖 Section 3: Tags, Elements, Attributes

- **Tag**: A keyword wrapped in `< >`. Example: `<p>`
- **Element**: A complete unit including start tag, content, and end tag.\
  Example: `<p>This is a paragraph</p>`
- **Attributes**: Extra info written inside the opening tag. Example:
  ```html
  <img src="cat.png" alt="A cute cat">
  ```

### Opening and Closing Tags

- Example: `<p>content</p>` → has **start tag** and **end tag**.
- **Self-closing tags**: don’t need closing. Example:\
  `<img />`, `<input />`, `<br />`


![html-syntax](https://hackmd.io/_uploads/Skp36abFeg.png)

---


## 📖 Section 4: Block vs Inline Elements

- **Block elements** (e.g., `<div>`, `<p>`, `<h1>`) → take full width, start on a new line.
- **Inline elements** (e.g., `<span>`, `<a>`, `<strong>`) → only take the space of their content, stay in line with text.

💡 Developers can check this in **DevTools → Elements tab**. Hover on an element to see:

- Its size
- The default **user agent stylesheet** (the browser’s built-in CSS).

For example:

- `<p>` is block by default.
- `<span>` is inline by default.

---

## 📖 Section 5: Common HTML Tags

### Headings

```html
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Smaller Title</h3>
```

### Paragraphs

```html
<p>This is a paragraph of text.</p>
```

### Links

```html
<a href="https://example.com">Go to Example</a>
```

### Images

```html
<img src="image.jpg" alt="Description of image">
```

- `src` can be a **local path** (`/images/cat.jpg`) or **online link**.
- `alt` is for accessibility (what screen readers say if the image doesn’t load).

### Lists

- Unordered List (bullets):

```html
<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>
```

- Ordered List (numbers):

```html
<ol>
  <li>Step One</li>
  <li>Step Two</li>
</ol>
```

### Div & Span

- `<div>`: Block-level container, used to group content.
- `<span>`: Inline container, used to style or mark small parts of text.

### Forms

```html
<form>
  <input type="text" placeholder="Enter your name">
  <input type="email" placeholder="Enter your email">
  <input type="password" placeholder="Enter password">
  <button type="submit">Submit</button>
</form>
```

- `input type="text"` → for normal text.
- `input type="email"` → expects email format.
- `input type="password"` → hides the typed characters.
- `button type="submit"` → sends the form.

### Tables

```html
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
  </tr>
</table>
```

- `<tr>` → table row
- `<th>` → table header (bold by default)
- `<td>` → table data cell

---

## 📖 Section 6: Pixels in Web Design

A **pixel** is the smallest unit of your screen display.\
When you set width/height in CSS, you often use pixels (`px`).\
Browsers calculate how many pixels each element takes on the screen.\
We’ll go deeper into this in **CSS Lecture 2**.

---

## 📖 Section 7: Developer Tools

- Open DevTools → **Elements tab**
- Hover over an element to:
  - See its box (margin, border, padding, content)
  - See computed styles
  - Check default user-agent stylesheet

This helps developers debug **why elements look the way they do**.

---

## 📝 Task Assignment

👉 **Recreate everything we wrote in this lecture in your own HTML file.**

- Create `index.html`
- Add headings, paragraphs, images, links, lists, forms, and tables.
- Use both block and inline elements.
- Open DevTools, inspect elements, and notice default styles.

