# Tiny HTML & CSS A web page is a text file the browser understands. ## HTML — the bones ```html <h1>My Science Project</h1> <p>Plants need sunlight.</p> <img src="leaf.jpg" alt="A green leaf"> ``` - `h1` — big heading - `p` — paragraph - `img` — image (`alt` describes it for screen readers) ## CSS — the clothes ```css h1 { color: darkorange; } p { font-size: 18px; } ``` HTML says *what* it is. CSS says *how it looks*. > Start one file: `index.html`. Open it in a browser. You just published a page… to yourself! ## A five-line page you should actually type ``` <!doctype html> <html> <head><title>My garden</title></head> <body> <h1>Garden</h1> <p>We grow tomatoes.</p> </body> </html> ``` Save as `garden.html` and double-click it. Your browser is the output device. ### Then one CSS rule ``` h1 { color: seagreen; } ``` Either in a `<style>` box or a `.css` file. The heading turns green. Structure stayed the same. That split is the whole lesson. ### Tags to know this year `html` `head` `title` `body` `h1` `h2` `p` `img` `a` (link)