# 🎓 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.