Web Development Basics using HTML

Aug 8, 2024

Web Development Course Notes

Introduction

  • Course covers HTML, CSS, JavaScript.
  • Installed VS Code and Live Server.

Focus on HTML Structure

  • Basic structure of a website consists of 3 files: CSS, JavaScript, and HTML.
  • Current focus is on HTML.

Emmet Abbreviation in VS Code

  • Ctrl + scroll for zooming in/out.
  • Typing ! triggers Emmet abbreviation, producing HTML boilerplate.

Understanding HTML Boilerplate

  • DOCTYPE html: Indicates the document type; tells the browser it's an HTML document.
    • Other document types include XHTML.
    • HTML is the most commonly used.
  • Opening and Closing Tags: Tags must be opened and closed.
    • Example: <html lang="en"> is an opening tag with an attribute.

HTML Document Structure

  1. HTML Tag: Indicates the beginning and end of an HTML document.
  2. Head Section: Contains metadata about the document.
    • Meta Tags: Provide information about the document (e.g., keywords, description).
    • Title Tag: Defines the title of the document.
    • Links to external CSS or JS files can be included here.
  3. Body Section: Contains the content displayed on the webpage.
    • Content must be within the body to be rendered on the page.

VS Code Features

  • Code Folding: Allows collapsing and expanding sections of code for better organization.
  • Live Server: Enables real-time updates of the webpage.

Working with Content

  • Content written in the body is what appears on the webpage.
  • Example content: "This is title" shows up as the title, while body content like "Yeh meri body ka content hai" appears as body content.
  • Acknowledgment that initial HTML may look basic; styling will be improved with CSS later.

Importance of Comments

  • Comments can be added to code to provide context or notes.
    • Syntax for comments: <!-- Your comment here -->
  • Comments are ignored by the browser and are useful for collaboration.
  • Comments can be toggled using Ctrl + / in VS Code.

Summary of HTML Tags Explored

  • DOCTYPE: Declares the document type.
  • HTML Tag: Contains all HTML elements.
  • Head Tag: Contains metadata, title, and links to external resources.
  • Body Tag: Contains the content of the webpage.

Call to Action

  • Access the web development playlist for a structured learning path.
  • Engage with videos and practice coding.
  • Like and share the video for others to learn.

Closing

  • Thank you for watching; anticipate next lessons.