# 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](../../../../translated_images/pcm/webdev101-html.4389c2067af68e98.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) HTML, or HyperText Markup Language, na di foundation of every website wey you don ever visit. Think of HTML as di skeleton wey dey give structure to web pages – e dey define where content go, how e dey organized, and wetin each piece mean. While CSS go later "dress up" your HTML with colors and layouts, and JavaScript go bring am to life wit interactivity, HTML na di essential structure wey dey make everything else possible. For dis lesson, you go create di HTML structure for virtual terrarium interface. Dis hands-on project go teach you fundamental HTML concepts while you dey build something wey go dey visually engaging. You go learn how to organize content using semantic elements, work wit images, and create di foundation for interactive web application. By di end of dis lesson, you go get working HTML page wey dey show plant images for organized columns, ready for styling for di next lesson. No worry if e look basic at first – na exactly wetin HTML suppose do before CSS add di 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 dis 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, mek we set up proper workspace for your terrarium project. Creating organized file structure from di beginning na important habit wey go serve you well throughout your web development journey. ### Task: Create Your Project Structure You go create dedicated folder for your terrarium project and add your first HTML file. Here be two approaches wey you fit 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 new folder wey dem name `terrarium` and select am 4. For Explorer pane, click "New File" icon 5. Name your file `index.html` ![VS Code Explorer showing new file creation](../../../../translated_images/pcm/vs-code-index.e2986cf919471eb9.webp) **Option 2: Using Terminal Commands** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Here na wetin these commands dey do:** - **Creates** new directory wey dem name `terrarium` for your project - **Navigates** inside di terrarium directory - **Creates** empty `index.html` file - **Opens** di file for Visual Studio Code make you fit edit > 💡 **Pro Tip**: Di filename `index.html` special for web development. When person visit website, browsers dey automatically look for `index.html` as di default page wey dem go show. Dis mean URL like `https://mysite.com/projects/` go automatically serve di `index.html` file from `projects` folder without you needing to specify di filename for di URL. ## Understanding HTML Document Structure Every HTML document follow specific structure wey browsers need to understand and display well. Think of dis structure like formal letter – e get required elements for particular order wey dey help di recipient (na di browser) process di content well. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Hed"] G --> I["<div> Kontena dem"] G --> J["<img> Picha dem"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Make we start by adding di essential foundation wey every HTML document need. ### The DOCTYPE Declaration and Root Element Di first two lines of any HTML file na di document's "introduction" to di browser: ```html <!DOCTYPE html> <html></html> ``` **Understanding wetin dis code dey do:** - **Declares** di document type as HTML5 using `<!DOCTYPE html>` - **Creates** di root `<html>` element wey go 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 for VS Code to see helpful information from MDN Web Docs, including usage examples and browser compatibility details. > 📚 **Learn More**: Di DOCTYPE declaration dey stop browsers from entering "quirks mode," wey dem dey use to support very old websites. Modern web development use 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 you continue, make sure say you understand: - ✅ Why every HTML document need DOCTYPE declaration - ✅ Wetin di `<html>` root element contain - ✅ How dis structure dey help browsers render pages well **Quick Self-Test**: Fit explain with your own words wetin "standards-compliant rendering" mean? ## Adding Essential Document Metadata Di `<head>` section of HTML document get important information wey browsers and search engines need, but visitors no dey see am directly on di page. Think am as "behind-the-scenes" info wey help your webpage work well and show correctly across different devices and platforms. Dis metadata dey tell browsers how to display your page, wetin character encoding to use, and how to handle different screen sizes – all na important for creating professional, accessible web pages. ### Task: Add the Document Head Put dis `<head>` section between your opening and closing `<html>` tags: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Breaking down wetin each element dey do:** - **Sets** di page title wey go show for browser tabs and search results - **Specifies** UTF-8 character encoding for proper text display around di world - **Ensures** compatibility with modern versions of Internet Explorer - **Configures** responsive design by setting di viewport to match device width - **Controls** initial zoom level make content show normally > 🤔 **Think About This**: Wetin go happen if you set viewport meta tag like dis: ``? Dis one go force di page to always be 600 pixels wide, and e go spoil responsive design! Learn more about [proper viewport configuration](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Building the Document Body Di `` element get all di visible content of your webpage – everything wey users go see and interact with. While di `` section dey give instructions to di browser, di `` section get di actual content: text, images, buttons, and other elements wey go create your user interface. Make we add body structure and understand how HTML tags dey work together to create meaningful content. ### Understanding HTML Tag Structure HTML dey use paired tags to define elements. Most tags get opening tag like `

` and closing tag like `

`, with content inside: `

Hello, world!

`. Dis one create paragraph element wey contain di text "Hello, world!". ### Task: Add the Body Element Update your HTML file to include di `` element: ```html Welcome to my Virtual Terrarium ``` **Here na wetin dis complete structure dey provide:** - **Establishes** di basic HTML5 document framework - **Includes** important metadata for proper browser rendering - **Creates** empty body ready for your visible content - **Follows** modern web development best practices Now you ready to add di visible elements of your terrarium. We go use `
` elements as containers to organize different sections of content, and `` elements to show di plant images. ### Working with Images and Layout Containers Images special for HTML because dem dey use "self-closing" tags. Unlike elements like `

` wey dey wrap content, di `` tag contain all info e need inside di tag itself using attributes like `src` for di image file path and `alt` for accessibility. Before you add images to your HTML, you gats organize your project files well by creating images folder and adding di plant graphics. **First, set up your images:** 1. Create folder wey dem call `images` inside your terrarium project folder 2. Download di plant images from [solution folder](../../../../3-terrarium/solution/images) (14 plant images total) 3. Copy all di plant images enter your new `images` folder ### Task: Create the Plant Display Layout Now add di 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, na wetin dey happen for dis code:** - **Creates** main page container with `id="page"` to hold all content - **Establishes** two column containers: `left-container` and `right-container` - **Organizes** 7 plants for left column and 7 plants for right column - **Wraps** each plant image inside `plant-holder` div for individual positioning - **Applies** consistent class names for CSS styling later - **Assigns** unique IDs to each plant image for JavaScript interaction later - **Includes** correct file paths wey point to di images folder > 🤔 **Consider This**: Notice say all images get di same alt text "plant". Dis no good for accessibility. Screen reader users go hear "plant" 14 times without knowing which particular plant each image show. Fit think better, more descriptive alt text for each image? > 📝 **HTML Element Types**: `
` elements be "block-level" and dem take full width, while `` elements be "inline" and dem only take as much width as dem need. Wetin you think go happen if you change all these `
` tags to `` tags? ### 🔄 **Pedagogical Check-in** **Structure Understanding**: Take small time to review your HTML structure: - ✅ Fit identify main containers for your layout? - ✅ You understand why each image get unique ID? - ✅ How you go describe di purpose of `plant-holder` divs? **Visual Inspection**: Open your HTML file for browser. You suppose see: - Basic list of plant images - Images arranged for two columns - Simple, unstyled layout **Remember**: Dis plain look na wetin HTML suppose be before CSS styling! With dis markup added, di plants go show for screen, though dem no go look polished yet – na di work for CSS for di next lesson! For now, you get solid HTML foundation wey organize your content well and follow accessibility best practices. ## Using Semantic HTML for Accessibility Semantic HTML mean say you dey pick HTML elements based on their meaning and purpose, no be only their appearance. When you use semantic markup, you dey talk di 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{Wetin kain?} B -->|Main heading| C["

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

,

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

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

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