HTML Crash Course Notes

Jul 22, 2024

Introduction to HTML

Overview

  • HTML (Hypertext Markup Language) is the skeleton of the web.
  • It structures documents and defines headers, navigations, sections, paragraphs, links, images, etc.
  • Essential for web developers before learning CSS and JavaScript.

Tools

  • Recommended Code Editor: Visual Studio Code (VS Code)
    • Download: Search for 'VS Code' on Google, download for Windows or Mac OS.
    • During installation, select all checkboxes in the 'Additional tasks' tab.

Setting Up a Project

  • Create a folder for your HTML files (e.g., sling.html).
  • Open the folder with VS Code.
  • Install extensions:
    • Live Server: for live-reloading.
    • Prettier: for formatting code.

Basic HTML Structure

  • HTML File Anatomy:
    • <!DOCTYPE html>: Specifies the HTML version.
    • <html>: Root element containing all HTML code.
    • <head>: Contains metadata and elements like <title>.
    • <body>: All visible content goes here (headers, images, paragraphs, etc.).

HTML Elements

  • Elements: Components used in HTML to define or render content.
    • Example: <p> ... </p> for paragraphs, <img> for images.
    • Elements contain tags and content: <tag>content</tag>.
  • Tags: Opening <tag> and closing </tag>.
  • Nesting: Placing elements within other elements.
    • Example: <p><em> ... </em></p>.
  • Self-Closing Tags: Tags without closing elements (e.g., <hr>, <br>).

Attributes

  • Modify element behavior (e.g., href in <a> for hyperlinks).
    • Attributes are specific to certain elements.
    • Example: href, id, class.

Block vs. Inline Elements

  • Block Elements: Take up full width (e.g., <p>, <div>).
  • Inline Elements: Only take up the needed width, remaining in the same line (e.g., <a>, <span>).

Headings & Paragraphs

  • Headings: <h1> to <h6> for titles, <h1> being the most important.
  • Use headings semantically for better readability and SEO.
  • Strong & Emphasis: <strong> for bold text, <em> for italicized text.

Lists

  • Unordered Lists (UL): Bulleted list with <ul> and <li>.
  • Ordered Lists (OL): Numbered list with <ol> and <li>.
  • Lists can be nested inside each other.

Links

  • Hyperlinks: Created with <a> and href attribute.
    • Can open in a new tab with target="_blank".
    • Title attribute for additional info: title="description".

Images

  • Image Tag: <img> for adding images, requires src and alt attributes.
  • Optional: width and height attributes for specifying dimensions.
  • Can be nested inside <a> for image links.

Videos

  • Video Tag: <video> for adding videos, with src attribute.
  • Use controls, autoplay, loop attributes to manage video controls.

Semantic HTML

  • Use elements for their intended purposes for better readability, SEO, and accessibility.
    • Examples: <header>, <nav>, <main>, <article>, <section>, <footer>.

Forms

  • Form Element: <form> used to collect user input.
    • Fields: <input>, <textarea>, <button>.
    • Label each field with <label>.
    • Submit button within forms by default.

Project: Recipe Blog Website

  • Create a simple recipe blog with HTML.
  • Pages: Home, Blog, Contact, Individual Recipe Pages.
  • Structure: Header, Main, Footer sections.
  • Utilize semantic elements and attributes learned.