Class 1: Introduction to the Web & HTML Fundamentals

Overview of Web Development

Welcome to the first class of your Full Stack Web Development course! In this session, we'll lay the groundwork for understanding how the web works and dive into HTML, the fundamental language for creating web content.

At its core, web development is about building applications that run over the internet. This involves various technologies and concepts, but a central idea is the client-server model.

Frontend focuses on the user-facing part, including design, layout, and interactivity, using languages like HTML, CSS, and JavaScript.
Backend handles the server-side logic, databases, and APIs, ensuring data storage and retrieval. Common languages include Python, JavaScript, Java, or PHP.
Full-stack development encompasses both frontend and backend, enabling developers to build and manage an entire web application end-to-end.

The Client-Server Model

Imagine you're at a restaurant. You (the client) ask the waiter to bring you food (a request). The waiter then goes to the kitchen (the server), retrieves your order, and brings it back to you (a response).

In web development:

Client: This is typically your web browser (like Chrome, Firefox, Safari, Edge) or any device that requests information from the internet. When you type a URL into your browser, your browser acts as the client.
Server: This is a powerful computer or program that stores websites, applications, and databases. It "serves" the requested information to clients. When your browser requests a webpage, the server processes that request and sends back the necessary files.

How the Web Works

Type URL: When you enter a web address (e.g., www.google.com) into your browser, you are telling your browser where to find the website.
DNS Lookup: Your computer needs to translate that human-readable URL into an IP address (e.g., 216.58.215.78), which is like a phone number for the server. This is done by the DNS (Domain Name System) Server.
HTTP Request: Your browser then sends an HTTP (HyperText Transfer Protocol) or HTTPS request to the server at that IP address, asking for the webpage. HTTPS is the secure version of HTTP, which encrypts the communication between the browser and the website protecting sensitive information from eavesdropping and tampering.
Server Process: On receiving the request, the server processes it and prepares the requested webpage files (HTML, CSS, JavaScript, images, etc.).
HTTP Response: The server sends an HTTP response back to your browser, containing all the files needed to display the webpage.
Browser Renders Page: Your browser receives these files and uses them to render the webpage on your screen, combining the HTML structure, CSS styling, and JavaScript interactivity.

HTML Fundamentals

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language for documents designed to be displayed in a web browser. HTML describes the structure of web pages using a series of elements.

Think of HTML as the skeleton or blueprint of your webpage. It tells the browser what content is there (headings, paragraphs, images, links) but not how it should look (that's CSS's job).

HTML Tags and Elements

An HTML document is made up of elements. An HTML element is defined by a start tag, some content, and an end tag.

<tagname>Content goes here...</tagname>

The start tag (or opening tag) is the first part of an HTML element. It consists of the element\'s name, enclosed in angle brackets (e.g., <p>, <h1>, <a>).
The end tag (or closing tag) is the second part of an HTML element. It looks like the start tag but has a forward slash (/) before the element name (e.g., </p>, </h1>, </a>).
Some elements are considered void elements (also known as self-closing tags). These do not have a closing tag because they cannot have any child nodes (content or other elements) inside them. (e.g., <img>, <br>, <input>).

HTML Attributes

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name/value pairs like: name="value".

<a href="https://www.example.com" title="Visit Example Website">Example</a>

href: Specifies the URL for the hyperlink.
title: Provides extra information about an element (tooltip).
src: Specifies the path to an image.
alt: Provides alternative text for an image.
class and id: Used to target elements with CSS for styling or JavaScript for interactivity.

Basic Document Structure

Every HTML document follows a fundamental structure to be valid and properly understood by browsers.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My First Webpage</title>
    </head>
    <body>
        <!-- Content goes here -->
    </body>
    </html>

Let's break down these essential tags:

<!DOCTYPE html>: This declaration defines that this document is an HTML5 document. It must be the very first thing in your HTML file.
<html lang="en">: This is the root element of an HTML page. All other HTML elements are contained within it. The lang="en" attribute specifies the language of the document, which is good for accessibility and search engines.
<head>: This element contains meta-information about the HTML document, such as its title, character set, links to stylesheets, and scripts. The content within <head> is not directly visible on the webpage itself.
- <meta charset="UTF-8">: Specifies the character encoding for the document, ensuring proper display of various characters.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Important for responsive web design, instructing the browser how to control the page's dimensions and scaling on different devices.
- <title>My First Webpage</title>: Sets the title of the webpage, which appears in the browser tab or window title bar.
<body>: This element contains all the visible content of the webpage, such as headings, paragraphs, images, links, etc. Everything you see on a website is inside the <body> tag.

Common HTML Elements

Headings

Headings are used to define titles and subtitles within your content. HTML provides six levels of headings, from <h1> (the most important) to <h6> (the least important).

<h1>This is a Main Heading</h1>
<h2>This is a Sub-heading</h2>
<h3>This is a Sub-sub-heading</h3>
<h4>A smaller heading</h4>
<h5>Even smaller heading</h5>
<h6>The smallest heading</h6>

Use <h1> for the main title of your page. There should generally only be one <h1> per page.
Use headings to create a clear content hierarchy, similar to how you'd structure an outline.

Paragraphs

Paragraphs are used to display blocks of text.

<p>This is the first paragraph of text on my webpage.</p>
<p>Each paragraph will appear on its own line, with some space above and below.</p>

Text Formatting

HTML provides several elements for formatting text, giving it semantic meaning and affecting its visual presentation (though styling is primarily done with CSS).

<strong>: Used for content that is of strong importance, seriousness, or urgency (typically displayed as bold).
```
This is <strong>important</strong> text.
```
<b>: Used to bold text without conveying extra importance (purely presentational bold).
```
This is <b>bold</b> text.
```
<em>: Used for emphasis (typically displayed as italic).
```
This is <em>emphasized</em> text.
```
<i>: Used to italicize text without conveying extra emphasis (purely presentational italic), often for technical terms, foreign words, or thoughts.
```
This is <i>italic</i> text.
```
<u>: Represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation, such as labeling the text as being a proper name in Chinese text (typically displayed as underlined).
```
This is <u>underlined</u> text.
```
<small>: Represents side comments and small print, like copyright and legal text.
```
This is <small>small print</small>.
```
<mark>: Represents text which is marked or highlighted for reference or notation purposes.
```
This is <mark>highlighted</mark> text.
```
<del>: Represents a range of text that has been deleted from a document.
```
This is <del>deleted</del> text.
```
<ins>: Represents a range of text that has been added to a document.
```
This is <ins>inserted</ins> text.
```
<sub>: Renders the contained text as a subscript.
```
H<sub>2</sub>O
```
<sup>: Renders the contained text as a superscript.
```
E = mc<sup>2</sup>
```

Lists

HTML supports different types of lists to organize items.

Unordered List (<ul>): Used for lists where the order of items doesn't matter (e.g., a list of features). Items are typically marked with bullet points.
```
<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
```
Ordered List (<ol>): Used for lists where the order of items is important (e.g., steps in a recipe). Items are typically marked with numbers.
```
<ol>
    <li>First Step</li>
    <li>Second Step</li>
    <li>Third Step</li>
</ol>
```
List Item (<li>): This tag is used for individual items within both <ul> and <ol> lists.

Description List (<dl>): Used for lists of terms and their descriptions (e.g., a glossary or FAQs). It consists of a list of terms (<dt>) and descriptions (<dd>).

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language is the standard markup language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets is a language used for describing the presentation style of a HTML document.</dd>
</dl>

Links (Anchors)

The anchor element, represented by the <a> tag, is fundamental for creating hyperlinks, which allow users to navigate between different web pages or to specific sections within the same page.

href attribute: This is the most important attribute of the <a> tag. It specifies the URL of the page the link goes to.
```
<a href="https://www.example.com">Visit Example.com</a>
```
target attribute (Optional): Specifies where to open the linked document. Common values include:
- _self: Opens the linked document in the same window/tab (default).
- _blank: Opens the linked document in a new window/tab.
```
<a href="https://www.google.com" target="_blank">Go to Google in a new tab</a>
```
Internal Links: You can link to sections within the same page by using an ID on the target element and referencing it with a hash symbol (#) in the href attribute.
```
<p id="top">Top of the page</p>
<a href="#top">Back to Top</a>
```

Hyperlinks are what make the World Wide Web a "web" of interconnected documents, enabling seamless navigation and information discovery.

Semantic HTML5 Elements

With HTML5, new elements were introduced to provide more semantic meaning to the structure of a webpage. "Semantic" means that the tag itself describes the type of content it contains, which helps both developers and browsers/assistive technologies understand the document's structure better.

While you could use <div> elements for everything, semantic tags offer significant advantages for:

Accessibility: Screen readers and other assistive technologies can better interpret the page structure for users with disabilities.
SEO (Search Engine Optimization): Search engines can better understand the content and its importance, potentially leading to better ranking.
Readability: Code becomes easier to read and maintain for developers.

Here are some key semantic HTML5 elements:

<header>: Represents introductory content or a set of navigational links. It often contains a logo, site title, and navigation menu.
```
<header>
        <h1>My Website</h1>
        <nav></nav>
    </header>
```
<nav>: Defines a section containing navigation links. This is specifically for major navigation blocks, not just any link.
```
<nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
```
<main>: Represents the dominant content of the <body> of a document. There should only be one <main> element per document, and it should contain content unique to that document (i.e., not repetitive content like headers, footers, or sidebars).\n
```
<main>
        <p>This is the main content of my page.</p>
    </main>
```
<footer>: Represents a footer for its nearest sectioning content or for the root element. A footer typically contains information about its section, such as who wrote it, copyright data, or links to related documents.\n
```
<footer>
        <p>&copy; 2023 My Company</p>
    </footer>
```
<article>: Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable. Examples include a forum post, a blog post, a news story, or a comment.
```
<article>
        <h2>Blog Post Title</h2>
        <p>This is the content of my blog post.</p>
    </article>
```
<section>: Represents a standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections typically have a heading. Examples include chapters, tabbed content, or any logical grouping of content.
```
<section>
        <h2>About Us</h2>
        <p>Information about our company.</p>
    </section>
```
<aside>: Represents a portion of a document whose content is only indirectly related to the document's main content. Asides are often presented as sidebars or call-out boxes.
```
<aside>
        <p>Related links or advertisements.</p>
    </aside>
```

Understanding and using these semantic elements correctly is a hallmark of writing clean, modern, and accessible HTML.

Basic HTML Best Practices

Indentation and Readability

Consistent indentation (e.g., 2 or 4 spaces) makes your HTML code much easier to read and understand. It visually represents the nesting of elements, making the structure of your document clear at a glance. Proper indentation improves maintainability and collaboration.

Comments

Comments in HTML allow you to add notes or explanations within your code that are not displayed by the browser. They are useful for:

Explaining complex parts of your code.
Leaving notes for yourself or other developers.
Temporarily disabling parts of the code.

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

<!--
  This is a multi-line comment.
  It can span across several lines.
-->

<p>This is visible content.<!-- This part is commented out and not visible. --></p>

HTML Validation

HTML validation refers to checking your HTML code against the official W3C HTML standards. While modern browsers are very forgiving of errors, validating your HTML ensures that your code is syntactically correct and well-formed. This can help prevent unexpected rendering issues across different browsers and devices, improve accessibility, and make it easier for other tools and scripts to process your HTML. It's a good practice to validate your HTML, especially for public-facing websites.