HTML Lecture Notes

Jul 8, 2024

HTML Lecture Notes

Introduction by Dave Gray

  • Instructor: Dave Gray
  • Goal: Understanding advanced HTML concepts from basic
  • Video: 10 tutorials, approximately 4 hours
  • Resources: Links available in the video description, compiled in one GitHub resource
  • Platforms: Chrome browser, Visual Studio Code

What is HTML?

  • Stands for Hypertext Markup Language
  • Basic building block of the web: defines meaning and structure of web content
  • Hypertext: Links connecting web pages
  • Markup: Annotates text/images for web display
  • Necessary tools: Web browser (Chrome) and Code Editor (Visual Studio Code)

Setting Up VS Code

  • Create a working folder and open it in VS Code
  • Naming conventions: lowercase, no spaces (use hyphens or underscores)
  • Create index.html: Starting point for every website
  • Basic HTML Structure:
    • HTML tags
    • Head: Metadata about the page (e.g., title)
    • Body: Visible content in the browser

HTML Elements and Structure

  • HTML Tag: <html>
  • Head Element: <head>
    • Metadata: <title>My First Web Page</title>
    • Tools: Prettier extension (optional code formatter)
  • Body Element: <body>
    • Main content
    • Example elements: heading (e.g., <h1>Hello World</h1>), paragraph (e.g., <p>This is my first web page.</p>)
  • Semantic tags: Giving meaning to different parts of the page (header, footer, main, section, article, nav, etc.)

Live Server and Validation

  • Live Server Extension: Automates the process of viewing changes in the web page
  • Navigate: Right-click ->