HTML Lecture: From Zero to Advanced

Jul 19, 2024

HTML Lecture: From Zero to Advanced

Introduction

  • Instructor: Dave Gray
  • Platform: FreeCodeCamp
  • Content: 10 tutorials covering HTML basics to advanced concepts
  • Duration: 4 hours
  • Resources: Available on GitHub
  • Instructor Contacts:
    • YouTube: Subscribe to Dave Gray
    • Twitter: Follow Dave Gray
    • Support: Buy Dave a coffee
  • Special Thanks: Bo and FreeCodeCamp team

Chapter 1: Introduction to HTML

What is HTML?

  • Definition: Hypertext Markup Language (HTML)
    • Purpose: Defines the structure and meaning of web content
    • Hypertext: Links connecting web pages
    • Markup: Annotates text, images, and other content for display in a web browser

Tools Needed

  • Web Browser: Google Chrome (Download: google.com/chrome)
  • Chrome Extension: 'Dark New Tab'
    • Benefits: Opens new tabs in dark mode
  • Code Editor: Visual Studio Code (Download: code.visualstudio.com)
    • Platforms: Windows, Linux, MacOS

Initial Setup

  • Folder Creation: Create a folder for your project files
  • **VS Code Setup: **
    • Open Folder: File > Open Folder
    • File Explorer: Shows files and folder structure
    • Create New File: Click '+' and create 'index.html'
    • Naming Convention: Use lowercase, no spaces, use underscores or hyphens

Basic HTML Structure

  • HTML Element: <html> ... </html>
  • Two Main Areas:
    • Head: Contains metadata
    • Body: Contains visible content
  • Basic Elements:
    • Title Element: <title>My First Web Page</title>
    • Heading Element: <h1>Hello World</h1>
    • Paragraph Element: <p>This is my first web page.</p>
  • Saving and Viewing HTML:
    • Save file (Ctrl + S) or File > Save
    • Live Server Extension: Start a local server to view web page in browser

Code Formatting and Extensions

  • Prettier Extension: For automatic code formatting
  • VS Code Icons: Adds file type icons in file explorer
  • GitHub Theme: Adds dark and light themes
  • Live Server: Right-click to open file with live server

Meta Tags and Validating HTML

  • Meta Language Attribute: <html lang="en">
  • Character Encoding: <meta charset="UTF-8">
  • Doctype Declaration: <!DOCTYPE html>
  • Validation: Use W3C Validator Service (validator.w3.org)

Chapter 2: Creating Text Content

Heading Hierarchy

  • Importance of headings: Structure page content
  • Only one <h1> per page
  • Subtopics: <h2>, <h3>, etc.

Paragraphs and Line Breaks

  • Paragraph Element: <p>Content...</p>
  • White Space Collapsing: Extra spaces are not displayed
  • Line Break: <br>

Horizontal Rule

  • Element: <hr>
  • Use: Visually separates content

Inline and Block Elements

  • Block-Level Elements: Start on a new line (<h1>, <p>, <hr>)
  • Inline Elements: Do not start on a new line (<em>, <strong>)

HTML Entities

  • Syntax: &lt;, &gt;, &copy;
  • Non-Breaking Space: &nbsp;

Abbreviations and Addresses

  • Abbreviation Element: <abbr title="Full Text">Abbr</abbr>
  • Address Element: <address>...</address>

HTML Comments

  • Syntax: <!-- Comment -->
  • Visibility: Visible in source code, not in browser display

Chapter 3: Creating Lists

Types of Lists

  • Ordered List: <ol> ... </ol>
    • Uses numbered items
  • Unordered List: <ul> ... </ul>
    • Uses bullet points
  • List Items: <li> ... </li>
  • Nesting Lists: Place lists within lists
  • Description List: <dl> ... </dl>
    • Description Term: <dt> ... </dt>
    • Description Details: <dd> ... </dd>

Chapter 4: Creating Links

Linking Web Pages

  • Anchor Element: <a href="URL">Link</a>
    • Absolute URL: Full web address
    • Relative URL: Path relative to current page

Types of Links

  • Internal Links: Link within the same page using #ID
  • External Links: Link to other web pages
  • Anchor Links: Wrap elements (text, images) within <a> tags
  • Email Links: href="mailto:email@example.com"

Chapter 5: Adding Images

Image Element

  • Syntax: <img src="path" alt="description" title="tooltip" width="x" height="y">
  • **Attributes: **
    • Source (src): Path to image file
    • Alternate Text (alt): Describes image; improves accessibility
    • Title: Tooltip text on hover
  • Responsive Images: Adjust size with width/height and CSS
  • Lazy Loading: loading="lazy"

Captioned Images

  • Figure Element: Wraps image and caption
  • Figcaption Element: <figcaption>Caption text</figcaption>

Chapter 6: HTML Semantics

Semantic HTML Elements

  • Header, Main, Footer: Define main sections of the document
  • Nav: Navigation sections
  • Article: Independent pieces of content
  • Section: Thematic group of content
  • Aside: Tangentially related content
  • Details and Summary: Collapsible content

Document Outline

  • HTML5 Outliner: Chrome extension to visualize document structure

Chapter 7: Tables

Basic Tables

  • Table Element: <table>...</table>
  • Table Row: <tr>...</tr>
  • Table Header: <th>...</th>
  • Table Data: <td>...</td>
  • Table Caption: <caption>...</caption>

Table Sections

  • Table Head: <thead>...</thead>
  • Table Body: <tbody>...</tbody>
  • Table Foot: <tfoot>...</tfoot>

Additional Attributes

  • Colspan: Spans columns header <th>
  • Rowspan: Spans rows

Accessibility

  • Scope: Define headers for rows (scope="row") or columns (scope="col")
  • Summarize: Describe table content (use caption or summaries)

Chapter 8: Forms

Basic Form Structure

  • Form Element: <form action="URL" method="GET/POST"> ... </form>
  • Form Controls: Inputs, textareas, buttons, etc.

Types of Input Controls

  • Text Input: <input type="text">
  • Password Input: <input type="password">
  • Email Input: <input type="email">
  • Number Input: <input type="number">
  • Tel Input: <input type="tel">
  • Radio Input: <input type="radio">
  • Checkbox Input: <input type="checkbox">
  • Submit Button: <input type="submit">
  • Reset Button: <input type="reset">
  • Select Element: <select name="name"> <option value="">Option</option> ...</select>
  • TextArea Element: <textarea name="name"></textarea>

Input Attributes

  • Name, ID, For: Linking labels and inputs
  • Placeholder: Example text within inputs
  • Pattern: Regex to validate input
  • Required: Ensure input is filled before submission
  • Autofocus, Autocomplete: Enhances user experience

Organization and Layout

  • Fieldset: Group related inputs
  • Legend: Title for fieldset

Form Actions and Methods

  • Action Attribute: URL for form submission
  • Method Attribute: GET or POST
  • Submit/Button Override: formaction="url" formmethod="post/get"

Final Project: Little Taco Shop

Project Files

  • HTML Files: index.html, hours.html, contact.html
  • CSS Files: css/style.css
  • Image Files: Images for each page
  • Favicon: Site icon
  • Examples: Reference images for project

Project Structure

  • Home Page: Content sections, images, and links
  • Store Hours Page: List of opening hours
  • Contact Us Page: Form inputs and location information

Additional Resources

Conclusion

  • Practice: Apply learned concepts by building projects
  • Validate: Ensure your code is correct
  • Resources: Refer to MDN and other learning materials for more information.

Final Thoughts

  • Have fun exploring HTML and creating your own web pages!

Completed Project

Your final project should be a multi-page website for a fictional taco shop with clear content structure, semantic HTML, and a functional contact form. Validate your code and cross-check with the example images provided.