HTML Course 1. Introduction to the Web and HTML

1. Introduction to the Web

The World Wide Web is a system of interlinked documents and resources, accessed via the Internet. It relies on a client-server model and standardized protocols.

1.1 Clients and Servers

Client: Software (usually a web browser) that requests resources.
Examples: Chrome, Firefox, Safari.
Server: Machine or service that hosts web resources and responds to requests.
Examples: Apache, Nginx, IIS.

1.2 HTTP Protocol Basics

HTTP (HyperText Transfer Protocol) is the communication protocol between clients and servers. A typical exchange:

GET /index.html HTTP/1.1
Host: example.com

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html>…</html>

Lines before the blank line form the request header or response header. After the blank line comes the body, which for HTML responses is the document itself.

1.3 Secure Communication (HTTPS)

HTTPS wraps HTTP in TLS/SSL, encrypting data between client and server. You’ll see URLs beginning with https:// and a padlock icon in the browser address bar.

2. What Is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures content using tags, elements, and attributes.

2.1 Tags and Elements

A tag is a markup instruction enclosed in angle brackets. An element consists of an opening tag, optional attributes, content, and a closing tag.

This is a paragraph.

2.2 Attributes

Attributes provide additional information about an element. They appear inside the opening tag as name=’value’.

2.3 HTML Comments

Comments are ignored by browsers and useful for documentation.

3. Common HTML Building Blocks

3.1 Headings

Headings range from <h2> to <h6>. They define sections and sub-sections.

Main Section Title
Subsection Title

3.2 Paragraphs

This is a paragraph of text that can span multiple sentences.

3.3 Links

Visit Example.com

3.4 Images

3.5 Lists

Two main types of lists:

Unordered List (<ul>)
Ordered List (<ol>)


  First item
  Second item



  Step one
  Step two

3.6 Tables

Tables represent tabular data.


  
    Name
    Age
  
  
    Alice
    30
  
  
    Bob
    25

Name	Age
Alice	30
Bob	25

4. Putting It All Together: A Simple Snippet

Below is a minimal HTML fragment demonstrating several elements together:



  My Website
  
    
      Home
      About
    
  




  Welcome to my site! Here is a featured image:
  
  Learn more about me.




  © 2024 My Website

5. Tools and Workflow

Text Editors: VS Code, Sublime Text, Atom, Notepad++.
Browser DevTools: Inspect and live-edit HTML elements.
Validation: W3C Markup Validation Service ensures code correctness.

Summary

This introductory lesson covered the basics of the Web, the HTTP protocol, and the core concepts of HTML: tags, elements, attributes, and comments. You also saw code examples for headings, paragraphs, lists, links, images, tables, and more. In the next lesson, we’ll dive deeper into semantic HTML and best practices for accessibility and structure.