## Learning Objectives - Understand the role of HTML and CSS in web development - Learn basic HTML document structure - Link CSS to HTML documents ## What is HTML? HTML (HyperText Markup Language) structures content on a web page using elements and tags. ```html

Hello, World!

This is my first web page.

``` ## What is CSS? CSS (Cascading Style Sheets) controls the presentation and visual styling of HTML elements. ```css h1 { color: blue; font-size: 24px; } p { color: gray; line-height: 1.6; } ``` ## Connecting HTML and CSS ### External CSS ```html ``` ### Internal CSS ```html ``` ### Inline CSS ```html

Blue Heading

``` ## Basic HTML Document Structure ```html ``` ## The DOCTYPE Declaration The `` declaration tells the browser to render the page in standards mode. ## Setting Up Your Environment ### Option 1: Text Editor - Visual Studio Code (recommended) - Sublime Text - Atom ### Option 2: Online Editors - CodePen - JSFiddle - Replit ## Your First Web Page Create a file named `index.html` and add the following content: ```html

Welcome to My Website

About This Site

This is my first web page built with HTML and CSS.

``` ## How Browsers Work 1. Browser fetches HTML document 2. Parser reads HTML and builds DOM tree 3. Browser fetches linked CSS 4. CSSOM (CSS Object Model) is created 5. Render tree combines DOM and CSSOM 6. Layout calculates element positions 7. Painting renders pixels to screen ## Summary - HTML structures content using elements and tags - CSS styles HTML elements - Link CSS to HTML using `` for external styles - Every HTML document needs ``, ``, ``, and ``