HTML Lecture & Tutorial with Dave Gray 📄

Introduction

Instructor: Dave Gray
Duration: Four hours
Structure: Composed of 10 tutorials that build upon each other
Resources: Links available in the description, compiled into one GitHub resource

Getting Started

HTML (Hypertext Markup Language): Basic building block of the web, defines meaning and structure of web content
Hypertext: Refers to links connecting web pages
Markup: Annotates text, images, and other content for display in a web browser
Tools Needed:
- Web browser (using Google Chrome)
- Chrome extension: Dark New Tab
- Code editor (using Visual Studio Code)
- Extensions for Visual Studio Code: Prettier, VS Code Icons, GitHub Dark Theme, Live Server

Setting Up Visual Studio Code

Folder Creation: Create a folder for HTML course files
First HTML File: index.html
- Naming convention: lowercase, no spaces (use hyphens if necessary)
HTML Structure: Tags (elements)
- Opening and closing tags for HTML elements
- HTML page areas: head (metadata) and body (visible content)

Basic HTML Structure

HTML Elements:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Metadata: Title, charset declaration (UTF-8), recommendations (lang attribute)
Live Server: Automatically reloads web page upon saving changes

Validating HTML

Validation Service: W3C Markup Validation Service
Add Attributes: lang, charset, doctype declaration

Creating Headers and Paragraphs

Heading Hierarchy: Only one <h1> per page, followed by <h2>, <h3>, etc.
Inline Elements vs Block Elements: Examples include <em>, <strong>, <br>, <abbr>
Semantic Meaning: Use headers to give meaning to sections

Lists

Types: Ordered lists (<ol>), unordered lists (<ul>), description lists (<dl>)
List Items: <li> for ordered and unordered lists, <dt> and <dd> for description lists

Creating Links

Anchor Tag (<a>): Hyperlinks between web pages
Absolute vs Relative Paths: Absolute includes full URL, relative is within the same site
Types of Links: External, internal, and page section links
Link Attributes: href, target ("_blank" for new tabs), rel

Adding Images

Image Tag (<img>): Attributes include src, alt, title, width, height
Lazy Loading: loading='lazy' for performance improvement
Figures and Captions: <figure> with <figcaption> for grouped content

Semantic HTML

Layout Tags: <header>, <main>, <article>, <section>, <footer>, <nav>
Asides and Details/Summary: Use for supplementary content and collapsible sections, respectively
Avoiding Non-Semantic Tags: <div> and <span> unless necessary

Tables

Structure: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>
Attributes: scope (for headers), colspan, rowspan
Tables for Data: Avoid using tables for entire page layouts

Forms

Form Elements: <form>, <input>, <label>, <fieldset>, <legend>, <textarea>, <button>
Attributes: name, id, type, placeholder, required, method (GET/POST), autocomplete
Validation: Ensure forms meet accessibility and functionality standards

Project: Little Taco Shop

Pages: Home (index.html), Store Hours (hours.html), Contact Us (contact.html)
- Use of semantic HTML, forms, tables, navigation, internal/external links
Resources: Images (.png files), CSS (style.css), minimal CSS for layout/styling
Steps: replicate layout, content, structure accurately based on given example images
Validation: Continuous validation using W3C Validator

Conclusion

Ensuring proper HTML structure, semantics, and validation can enhance functionality, accessibility, and maintainability of web pages
Project reinforces comprehensive HTML understanding and application
Recommended further exploration: Read more about HTML elements and attributes on Mozilla Developer Network (MDN)