diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index f5900ce8..5e1faf3f 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -3,74 +3,87 @@ ![Introduction to HTML](../../sketchnotes/webdev101-html.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) -## Pre-Lecture Quiz - -[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) +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 exciting lesson, you'll create the HTML structure for a beautiful 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. -> Check out video +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. Let's dive in and start building your first web project! -> -> [![Git and GitHub basics video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) +## Pre-Lecture Quiz -### Introduction +[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) -HTML, or HyperText Markup Language, is the 'skeleton' of the web. If CSS 'dresses up' your HTML and JavaScript brings it to life, HTML is the body of your web application. HTML's syntax even reflects that idea, as it includes "head", "body", and "footer" tags. +> πŸ“Ί **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) -In this lesson, we're going to use HTML to layout the 'skeleton' of our virtual terrarium's interface. It will have a title and three columns: a right and a left column where the draggable plants live, and a center area that will be the actual glass-looking terrarium. By the end of this lesson, you will be able to see the plants in the columns, but the interface will look a little strange; don't worry, in the next section you will add CSS styles to the interface to make it look better. +## Setting Up Your Project -### Task +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. -On your computer, create a folder called 'terrarium' and inside it, a file called 'index.html'. You can do this in Visual Studio Code after you create your terrarium folder by opening a new VS Code window, clicking 'open folder', and navigating to your new folder. Click the small 'file' button in the Explorer pane and create the new file: +### Task: Create Your Project Structure -![explorer in VS Code](images/vs-code-index.png) +You'll create a dedicated folder for your terrarium project and add your first HTML file. Here are two approaches you can use: -Or +**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` -Use these commands on your git bash: -* `mkdir terrarium` -* `cd terrarium` -* `touch index.html` -* `code index.html` or `nano index.html` +![VS Code Explorer showing new file creation](images/vs-code-index.png) -> index.html files indicate to a browser that it is the default file in a folder; URLs such as `https://anysite.com/test` might be built using a folder structure including a folder called `test` with `index.html` inside it; `index.html` doesn't have to show in a URL. +**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 -## The DocType and html tags +> πŸ’‘ **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. -The first line of an HTML file is its doctype. It's a little surprising that you need to have this line at the very top of the file, but it tells older browsers that the browser needs to render the page in a standard mode, following the current html specification. +## Understanding HTML Document Structure -> Tip: in VS Code, you can hover over a tag and get information about its use from the MDN Reference guides. +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. -The second line should be the `` tag's opening tag, followed right now by its closing tag ``. These tags are the root elements of your interface. +Let's start by adding the essential foundation that every HTML document needs. -### Task +### The DOCTYPE Declaration and Root Element -Add these lines at the top of your `index.html` file: +The first two lines of any HTML file serve as the document's "introduction" to the browser: -```HTML +```html ``` -βœ… There are a few different modes that can be determined by setting the DocType with a query string: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). These modes used to support really old browsers that aren't normally used nowadays (Netscape Navigator 4 and Internet Explorer 5). You can stick to the standard doctype declaration. +**Understanding what this code does:** +- **Declares** the document type as HTML5 using `` +- **Creates** the root `` 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. -## The document's 'head' +> πŸ“š **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 `` declaration to ensure [standards-compliant rendering](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). -The 'head' area of the HTML document includes crucial information about your web page, also known as [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). In our case, we tell the web server to which this page will be sent to be rendered, these four things: +## Adding Essential Document Metadata -- the page's title -- page metadata including: - - the 'character set', telling about what character encoding is used in the page - - browser information, including `x-ua-compatible` which indicates that the IE=edge browser is supported - - information about how the viewport should behave when it is loaded. Setting the viewport to have an initial scale of 1 controls the zoom level when the page is first loaded. +The `` 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. -### Task +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. -Add a 'head' block to your document in between the opening and closing `` tags. +### Task: Add the Document Head + +Insert this `` section between your opening and closing `` tags: ```html @@ -81,17 +94,28 @@ Add a 'head' block to your document in between the opening and closing `` ``` -βœ… What would happen if you set a viewport meta tag like this: ``? Read more about the [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). +**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). -## The document's `body` +## Building the Document Body -### HTML Tags +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. -In HTML, you add tags to your .html file to create elements of a web page. Each tag usually has an opening and closing tag, like this: `

hello

` to indicate a paragraph. Create your interface's body by adding a set of `` tags inside the `` tag pair; your markup now looks like this: +Let's add the body structure and understand how HTML tags work together to create meaningful content. -### Task +### 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 @@ -106,17 +130,28 @@ In HTML, you add tags to your .html file to create elements of a web page. Each ``` -Now, you can start building out your page. Normally, you use `
` tags to create the separate elements in a page. We'll create a series of `
` elements which will contain images. +**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. -### Images +### Working with Images and Layout Containers -One html tag that doesn't need a closing tag is the `` tag, because it has a `src` element that contains all the information the page needs to render the item. +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. -Create a folder in your app called `images` and in that, add all the images in the [source code folder](../solution/images); (there are 14 images of plants). +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. -### Task +**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 -Add those plant images into two columns between the `` tags: +### Task: Create the Plant Display Layout + +Now add the plant images organized in two columns between your `` tags: ```html
@@ -169,37 +204,62 @@ Add those plant images into two columns between the `` tags:
``` -> Note: Spans vs. Divs. Divs are considered 'block' elements, and Spans are 'inline'. What would happen if you transformed these divs to spans? +**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 -With this markup, the plants now show up on the screen. It looks pretty bad, because they aren't yet styled using CSS, and we'll do that in the next lesson. +> πŸ€” **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? -Each image has alt text that will appear even if you can't see or render an image. This is an important attribute to include for accessibility. Learn more about accessibility in future lessons; for now, remember that the alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). +> πŸ“ **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? -βœ… Did you notice that each image has the same alt tag? Is this good practice? Why or why not? Can you improve this code? +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 markup +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. -In general, it's preferable to use meaningful 'semantics' when writing HTML. What does that mean? It means that you use HTML tags to represent the type of data or interaction they were designed for. For example, the main title text on a page should use an `

` tag. +This approach makes your websites more accessible to users with disabilities and helps search engines better understand your content. It's a fundamental principle of modern web development that creates better experiences for everyone. -Add the following line right below your opening `` tag: +### Adding a Semantic Page Title + +Let's add a proper heading to your terrarium page. Insert this line right after your opening `` tag: ```html

My Terrarium

``` -Using semantic markup such as having headers be `

` and unordered lists be rendered as `
    ` helps screen readers navigate through a page. In general, buttons should be written as `` | `Click me` | +| Article content | `

    ` | `
    ` | -## The terrarium +> πŸŽ₯ **See It in Action**: Watch [how screen readers interact with web pages](https://www.youtube.com/watch?v=OUDV1gqs9GA) to understand why semantic markup is crucial for accessibility. Notice how proper HTML structure helps users navigate efficiently! -The last part of this interface involves creating markup that will be styled to create a terrarium. +## Creating the Terrarium Container -### Task: +Now let's add the HTML structure for the terrarium itself – the glass container where plants will eventually be placed. This section demonstrates an important concept: HTML provides structure, but without CSS styling, these elements won't be visible yet. -Add this markup above the last `

` tag: +The terrarium markup uses descriptive class names that will make CSS styling intuitive and maintainable in the next lesson. + +### Task: Add the Terrarium Structure + +Insert this markup above the last `
` tag (before the closing tag of the page container): ```html
@@ -213,7 +273,14 @@ Add this markup above the last `
` tag:
``` -βœ… Even though you added this markup to the screen, you see absolutely nothing render. Why? +**Understanding this terrarium structure:** +- **Creates** a main terrarium container with a unique ID for styling +- **Defines** separate elements for each visual component (top, walls, dirt, bottom) +- **Includes** nested elements for glass reflection effects (glossy elements) +- **Uses** descriptive class names that clearly indicate each element's purpose +- **Prepares** the structure for CSS styling that will create the glass terrarium appearance + +> πŸ€” **Notice Something?**: Even though you added this markup, you don't see anything new on the page! This perfectly illustrates how HTML provides structure while CSS provides appearance. These `
` elements exist but have no visual styling yet – that's coming in the next lesson! --- @@ -225,9 +292,24 @@ Use the Agent mode to complete the following challenge: **Prompt:** Create a semantic HTML section that includes a main heading "Plant Care Guide", three subsections with headings "Watering", "Light Requirements", and "Soil Care", each containing a paragraph of plant care information. Use proper semantic HTML tags like `
`, `

`, `

`, and `

` to structure the content appropriately. -## πŸš€Challenge +## πŸš€ Explore HTML History Challenge + +**Learning About Web Evolution** -There are some wild 'older' tags in HTML that are still fun to play with, though you shouldn't use deprecated tags such as [these tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) in your markup. Still, can you use the old `` tag to make the h1 title scroll horizontally? (if you do, don't forget to remove it afterwards) +HTML has evolved significantly since its creation in the 1990s. Some older tags like `` are now deprecated because they don't work well with modern accessibility standards and responsive design principles. + +**Try This Experiment:** +1. Temporarily wrap your `

` title in a `` tag: `

My Terrarium

` +2. Open your page in a browser and observe the scrolling effect +3. Consider why this tag was deprecated (hint: think about user experience and accessibility) +4. Remove the `` tag and return to semantic markup + +**Reflection Questions:** +- How might a scrolling title affect users with visual impairments or motion sensitivity? +- What modern CSS techniques could achieve similar visual effects more accessibly? +- Why is it important to use current web standards instead of deprecated elements? + +Explore more about [obsolete and deprecated HTML elements](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) to understand how web standards evolve to improve user experience. ## Post-Lecture Quiz @@ -236,9 +318,31 @@ There are some wild 'older' tags in HTML that are still fun to play with, though ## Review & Self Study -HTML is the 'tried and true' building block system that has helped build the web into what it is today. Learn a little about its history by studying some old and new tags. Can you figure out why some tags were deprecated and some added? What tags might be introduced in the future? +**Deepen Your HTML Knowledge** + +HTML has been the foundation of the web for over 30 years, evolving from a simple document markup language to a sophisticated platform for building interactive applications. Understanding this evolution helps you appreciate modern web standards and make better development decisions. + +**Recommended Learning Paths:** + +1. **HTML History and Evolution** + - Research the timeline from HTML 1.0 to HTML5 + - Explore why certain tags were deprecated (accessibility, mobile-friendliness, maintainability) + - Investigate emerging HTML features and proposals + +2. **Semantic HTML Deep Dive** + - Study the complete list of [HTML5 semantic elements](https://developer.mozilla.org/docs/Web/HTML/Element) + - Practice identifying when to use `
`, `
`, `