Module 1: HTML Fundamentals

What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language; rather, it is a markup language that defines the structure and presentation of raw text.

• HyperText: Refers to the way webpages are linked together. Clicking a link on a webpage to go to another webpage is the essence of "hypertext".
• Markup Language: Refers to the use of tags to annotate text, telling the web browser how to structure it (e.g., as a heading, paragraph, image, or list).

Think of HTML as the skeleton or blueprint of a house. It defines where the walls, doors, and rooms are, while CSS (Cascading Style Sheets) provides the paint and decorations, and JavaScript provides the electricity and plumbing (interactivity).

History of HTML & Versions

HTML was invented by Tim Berners-Lee in 1991. Over the decades, it has evolved significantly to accommodate the growing needs of the web:

• HTML 1.0 (1993): The first official specification. It was very basic, with limited capabilities for formatting and layout.
• HTML 2.0 (1995): Introduced core web features like basic forms, allowing users to input data.
• HTML 3.2 (1997): Added support for tables, applets, and text flow around images, providing more layout control.
• HTML 4.01 (1999): Became the widely accepted global standard for many years. It pushed towards separating structure from presentation (encouraging the use of CSS).
• XHTML (2000): An attempt to make HTML stricter by rewriting it as an XML application. It required every tag to be perfectly closed and well-formed.
• HTML5 (2014 - Present): The current major version. It revolutionized web development by introducing native support for video, audio, semantic elements (like <article>, <nav>, <section>), and local storage capabilities, reducing the need for third-party plugins like Adobe Flash.

How Websites Work

Understanding the underlying mechanics of the web is crucial for any developer. When you type a URL (Uniform Resource Locator) like www.google.com into your browser, a rapid series of events occurs:

1. DNS Resolution: The browser translates the domain name into an IP address using a Domain Name System (DNS) server. Think of DNS as the internet's phonebook.
2. Request: Your computer (the Client) sends an HTTP Request to the server located at that IP address.
3. Processing: The Server receives the request, processes it, and gathers the necessary files (HTML, CSS, images).
4. Response: The Server sends an HTTP Response back to the Client containing these files.
5. Rendering: Your browser receives the HTML file and reads it from top to bottom, assembling the webpage on your screen.

Installing a Code Editor & VS Code

While you could theoretically write HTML in a basic text editor like Windows Notepad, professional developers use specialized software called Code Editors or IDEs (Integrated Development Environments). They offer features like syntax highlighting (coloring code for readability), auto-completion, and error checking.

Setting Up Visual Studio Code

Visual Studio Code (VS Code) by Microsoft is currently the industry standard for web development. It is free, lightweight, and highly customizable.

1. Download and install VS Code from code.visualstudio.com.
2. Once installed, open the application.
3. On the left sidebar, click the Extensions icon (it looks like four squares).
4. Search for "Live Server" (created by Ritwick Dey) and click Install. This essential extension allows you to view your HTML changes in your browser instantly without needing to manually refresh the page every time you save your code.
5. You may also want to install the "Prettier - Code formatter" extension to keep your code automatically neat and indented.

Creating Your First HTML File

Now that your environment is set up, it's time to write some code.

1. Create a new folder on your Desktop (or anywhere on your computer) and name it my-first-website.
2. In VS Code, go to File > Open Folder... and select the folder you just created.
3. Inside VS Code, click the "New File" icon next to your folder name in the Explorer pane.
4. Name the file index.html. (Note: Naming your main file index.html is a universal web standard. When a web server looks at a folder, it automatically searches for index.html to display as the homepage).
5. Open index.html, type ! and press the Tab or Enter key. VS Code will automatically generate the foundational HTML structure for you (thanks to a built-in feature called Emmet).

Understanding Browser Rendering

How does a browser turn text into a visual interface?

Browsers process HTML documents sequentially—from the very top to the very bottom.

• First, it reads the <head> section to configure the page, fetch associated CSS files, and set the title.
• Then, it moves into the <body> section. As it encounters HTML tags, it constructs something called the DOM (Document Object Model).
• The DOM is a tree-like representation of your webpage. JavaScript interacts with this DOM to create dynamic changes (like opening a menu or submitting a form) without requiring a full page reload.

HTML Comments

Comments are notes left in the source code. They are completely ignored by the browser and will never be rendered on the actual webpage. They are incredibly useful for explaining complex code to your future self or to other developers on your team.

In HTML, you write a comment by wrapping your text inside <!-- and -->.

<!-- This is a single-line comment -->

<p>This paragraph will be visible on the page.</p>

<!-- 
  This is a multi-line comment.
  You can use it to temporarily hide blocks of code 
  while debugging, or to leave detailed explanations.
-->