# Terrarium Project Part 1: Introduction to HTML ```mermaid journey title Your HTML Learning Journey section Foundation Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Content Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantics Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![Introduction to HTML](../../sketchnotes/webdev101-html.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) HTML, or HyperText Markup Language, is the foundation of every website you've ever visited. Think of HTML as the skeleton that gives structure to web pages – it defines where content goes, how it's organized, and what each piece represents. While CSS will later "dress up" your HTML with colors and layouts, and JavaScript will bring it to life with interactivity, HTML provides the essential structure that makes everything else possible. In this lesson, you'll create the HTML structure for a virtual terrarium interface. This hands-on project will teach you fundamental HTML concepts while building something visually engaging. You'll learn how to organize content using semantic elements, work with images, and create the foundation for an interactive web application. By the end of this lesson, you'll have a working HTML page displaying plant images in organized columns, ready for styling in the next lesson. Don't worry if it looks basic at first – that's exactly what HTML should do before CSS adds the visual polish. ```mermaid mindmap root((HTML Fundamentals)) Structure DOCTYPE Declaration HTML Element Head Section Body Content Elements Tags & Attributes Self-closing Tags Nested Elements Block vs Inline Content Text Elements Images Containers (div) Lists Semantics Meaningful Tags Accessibility Screen Readers SEO Benefits Best Practices Proper Nesting Valid Markup Descriptive Alt Text Organized Structure ``` ## Pre-Lecture Quiz [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Watch and Learn**: Check out this helpful video overview > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Setting Up Your Project Before we dive into HTML code, let's set up a proper workspace for your terrarium project. Creating an organized file structure from the beginning is a crucial habit that will serve you well throughout your web development journey. ### Task: Create Your Project Structure You'll create a dedicated folder for your terrarium project and add your first HTML file. Here are two approaches you can use: **Option 1: Using Visual Studio Code** 1. Open Visual Studio Code 2. Click "File" → "Open Folder" or use `Ctrl+K, Ctrl+O` (Windows/Linux) or `Cmd+K, Cmd+O` (Mac) 3. Create a new folder called `terrarium` and select it 4. In the Explorer pane, click the "New File" icon 5. Name your file `index.html` ![VS Code Explorer showing new file creation](images/vs-code-index.png) **Option 2: Using Terminal Commands** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Here's what these commands accomplish:** - **Creates** a new directory called `terrarium` for your project - **Navigates** into the terrarium directory - **Creates** an empty `index.html` file - **Opens** the file in Visual Studio Code for editing > 💡 **Pro Tip**: The filename `index.html` is special in web development. When someone visits a website, browsers automatically look for `index.html` as the default page to display. This means a URL like `https://mysite.com/projects/` will automatically serve the `index.html` file from the `projects` folder without needing to specify the filename in the URL. ## Understanding HTML Document Structure Every HTML document follows a specific structure that browsers need to understand and display correctly. Think of this structure like a formal letter – it has required elements in a particular order that help the recipient (in this case, the browser) process the content properly. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Heading"] G --> I["<div> Containers"] G --> J["<img> Images"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Let's start by adding the essential foundation that every HTML document needs. ### The DOCTYPE Declaration and Root Element The first two lines of any HTML file serve as the document's "introduction" to the browser: ```html <!DOCTYPE html> <html></html> ``` **Understanding what this code does:** - **Declares** the document type as HTML5 using `<!DOCTYPE html>` - **Creates** the root `<html>` element that will contain all page content - **Establishes** modern web standards for proper browser rendering - **Ensures** consistent display across different browsers and devices > 💡 **VS Code Tip**: Hover over any HTML tag in VS Code to see helpful information from MDN Web Docs, including usage examples and browser compatibility details. > 📚 **Learn More**: The DOCTYPE declaration prevents browsers from entering "quirks mode," which was used to support very old websites. Modern web development uses the simple `<!DOCTYPE html>` declaration to ensure [standards-compliant rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Pedagogical Check-in** **Pause and Reflect**: Before continuing, make sure you understand: - ✅ Why every HTML document needs a DOCTYPE declaration - ✅ What the `<html>` root element contains - ✅ How this structure helps browsers render pages correctly **Quick Self-Test**: Can you explain in your own words what "standards-compliant rendering" means? ## Adding Essential Document Metadata The `<head>` section of an HTML document contains crucial information that browsers and search engines need, but that visitors don't see directly on the page. Think of it as the "behind-the-scenes" information that helps your webpage work properly and appear correctly across different devices and platforms. This metadata tells browsers how to display your page, what character encoding to use, and how to handle different screen sizes – all essential for creating professional, accessible web pages. ### Task: Add the Document Head Insert this `<head>` section between your opening and closing `<html>` tags: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Breaking down what each element accomplishes:** - **Sets** the page title that appears in browser tabs and search results - **Specifies** UTF-8 character encoding for proper text display worldwide - **Ensures** compatibility with modern versions of Internet Explorer - **Configures** responsive design by setting the viewport to match device width - **Controls** initial zoom level to display content at natural size > 🤔 **Think About This**: What would happen if you set a viewport meta tag like this: ``? This would force the page to always be 600 pixels wide, breaking responsive design! Learn more about [proper viewport configuration](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Building the Document Body The `` element contains all the visible content of your webpage – everything users will see and interact with. While the `` section provided instructions to the browser, the `` section contains the actual content: text, images, buttons, and other elements that create your user interface. Let's add the body structure and understand how HTML tags work together to create meaningful content. ### Understanding HTML Tag Structure HTML uses paired tags to define elements. Most tags have an opening tag like `

` and a closing tag like `

`, with content in between: `

Hello, world!

`. This creates a paragraph element containing the text "Hello, world!". ### Task: Add the Body Element Update your HTML file to include the `` element: ```html Welcome to my Virtual Terrarium ``` **Here's what this complete structure provides:** - **Establishes** the basic HTML5 document framework - **Includes** essential metadata for proper browser rendering - **Creates** an empty body ready for your visible content - **Follows** modern web development best practices Now you're ready to add the visible elements of your terrarium. We'll use `
` elements as containers to organize different sections of content, and `` elements to display the plant images. ### Working with Images and Layout Containers Images are special in HTML because they use "self-closing" tags. Unlike elements like `

` that wrap around content, the `` tag contains all the information it needs within the tag itself using attributes like `src` for the image file path and `alt` for accessibility. Before adding images to your HTML, you'll need to organize your project files properly by creating an images folder and adding the plant graphics. **First, set up your images:** 1. Create a folder called `images` inside your terrarium project folder 2. Download the plant images from the [solution folder](../solution/images) (14 plant images total) 3. Copy all plant images into your new `images` folder ### Task: Create the Plant Display Layout Now add the plant images organized in two columns between your `` tags: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Step by step, here's what's happening in this code:** - **Creates** a main page container with `id="page"` to hold all content - **Establishes** two column containers: `left-container` and `right-container` - **Organizes** 7 plants in the left column and 7 plants in the right column - **Wraps** each plant image in a `plant-holder` div for individual positioning - **Applies** consistent class names for CSS styling in the next lesson - **Assigns** unique IDs to each plant image for JavaScript interaction later - **Includes** proper file paths pointing to the images folder > 🤔 **Consider This**: Notice that all images currently have the same alt text "plant". This isn't ideal for accessibility. Screen reader users would hear "plant" repeated 14 times without knowing which specific plant each image shows. Can you think of better, more descriptive alt text for each image? > 📝 **HTML Element Types**: `
` elements are "block-level" and take up full width, while `` elements are "inline" and only take up necessary width. What do you think would happen if you changed all these `
` tags to `` tags? ### 🔄 **Pedagogical Check-in** **Structure Understanding**: Take a moment to review your HTML structure: - ✅ Can you identify the main containers in your layout? - ✅ Do you understand why each image has a unique ID? - ✅ How would you describe the purpose of the `plant-holder` divs? **Visual Inspection**: Open your HTML file in a browser. You should see: - A basic list of plant images - Images organized in two columns - Simple, unstyled layout **Remember**: This plain appearance is exactly what HTML should look like before CSS styling! With this markup added, the plants will appear on screen, though they won't look polished yet – that's what CSS is for in the next lesson! For now, you have a solid HTML foundation that properly organizes your content and follows accessibility best practices. ## Using Semantic HTML for Accessibility Semantic HTML means choosing HTML elements based on their meaning and purpose, not just their appearance. When you use semantic markup, you're communicating the structure and meaning of your content to browsers, search engines, and assistive technologies like screen readers. ```mermaid flowchart TD A[Need to add content?] --> B{What type?} B -->|Main heading| C["

"] B -->|Subheading| D["

,

, etc."] B -->|Paragraph| E["

"] B -->|List| F["

    ,
      "] B -->|Navigation| G["