Introduction to Web Technologies

TL;DR

Web technologies are the foundational tools and languages that make the internet work, allowing you to access information and interact online. They primarily involve sending requests from your browser to a server, which then sends back the web content you see. Understanding these basics helps you build and comprehend how websites are structured and function.

1. The Mental Model

Think of a website as a restaurant. Your web browser is you, the customer, asking for food (a webpage). The web server is the kitchen, preparing and sending the food back. The "technologies" are the recipes, ingredients, and delivery methods used to make that happen.

2. The Core Material

Web technologies are essentially a collection of protocols, languages, and tools that enable communication and content delivery over the internet. They allow clients (like your web browser) to request information from servers, and for servers to send that information back.

Here are the key players:

How the Web Works: Client-Server Model

Photo by panumas nikhomkhai on Pexels

The web operates on a client-server model.
- A client is typically your web browser (Chrome, Firefox, Safari) running on your computer or phone. It sends requests.
- A server is a powerful computer that stores website files (HTML, CSS, JavaScript, images, etc.) and delivers them when requested.

When you type a URL into your browser:
1. Your browser (client) sends a request to the server.
2. The server processes the request, finds the relevant files, and sends a response back.
3. Your browser receives the response and renders the webpage for you to see.

Essential Web Languages

There are three fundamental languages for building what you see in a browser:

• HTML (HyperText Markup Language): This is the structure of a webpage. It defines the content – headings, paragraphs, images, links, etc. Think of it as the skeleton of a house.
• CSS (Cascading Style Sheets): This controls the presentation or visual style. It dictates colors, fonts, layouts, and spacing. This is like the paint, wallpaper, and furniture of the house.
• JavaScript (JS): This adds interactivity and dynamic behavior to a webpage. It allows for things like animated menus, interactive forms, and content that changes without reloading the page. This is like the plumbing and electricity, making things work when you interact with them.

graph TD
    A["You (Client)"] --> B["Type URL/Click Link"]
    B --> C["Browser (Sends HTTP Request)"]
    C --> D["Internet / DNS Lookup"]
    D --> E["Web Server (Receives Request)"]
    E --> F["Server Processes (Finds HTML, CSS, JS, etc.)"]
    F --> G["Server Sends HTTP Response"]
    G --> H["Browser (Receives Response)"]
    H --> I["Browser Renders Page (Uses HTML, CSS, JS)"]
    I --> J["You (See the Website)"]

Protocols

Protocols are rules that govern how data is transmitted and received.

• HTTP (HyperText Transfer Protocol): The core protocol for sending and receiving web pages and other web resources. When you see http:// or https:// in a URL, that's it in action.
• HTTPS (HTTP Secure): The secure version of HTTP. It encrypts the communication between your browser and the server, protecting your data (like passwords or credit card numbers).
• TCP/IP (Transmission Control Protocol/Internet Protocol): These are the fundamental networking protocols that allow computers to find each other on the internet and send data packets reliably.

Other Key Technologies

Photo by Eric Feng on Pexels

• DNS (Domain Name System): This is like the internet's phonebook. When you type google.com, DNS translates that human-readable name into an IP address (e.g., 172.217.160.142) that computers understand.
• Web Servers (e.g., Apache, Nginx): Software that runs on the server computer and is responsible for accepting HTTP requests from clients, retrieving the requested resources, and sending them back as HTTP responses.

3. Worked Example

Let's say you want to view a simple webpage, example.com/hello.html.

1. You (client): Type example.com/hello.html into your browser's address bar and press Enter.
2. Browser (client): First, it asks a DNS server: "What's the IP address for example.com?" The DNS server responds with, say, 192.0.2.1.
3. Browser (client): It then sends an HTTP GET request over TCP/IP to the server at 192.0.2.1, asking for /hello.html.
4. Web Server (server): The web server software (e.g., Apache) on 192.0.2.1 receives the request. It locates the hello.html file in its storage.
5. Web Server (server): It then sends an HTTP response back to your browser, containing the contents of hello.html (which might be simple HTML like <h1>Hello World!</h1><p>Welcome to my page.</p>).
6. Browser (client): Receives the HTTP response. It reads the HTML, interprets it, and displays "Hello World! Welcome to my page." on your screen. If there were CSS or JavaScript links in the HTML, the browser would make separate requests for those files and apply them to the page.

4. Key Takeaways

• The web works on a client-server model, where your browser (client) requests content from a web server.
• HTML structures content, CSS styles it, and JavaScript adds interactivity to webpages.
• HTTP/HTTPS are the rules for communication between browsers and servers, with HTTPS providing security.
• DNS translates human-readable domain names into computer-friendly IP addresses.
• Web servers store website files and serve them up when requested by clients.
• Understanding these core technologies helps you build effective and efficient websites.
• Web servers are pieces of software, not just hardware, that handle requests and responses.

Common Mistakes to Avoid:
- Confusing HTML, CSS, and JavaScript roles; remember: structure, style, and behavior.
- Thinking that a server is just a physical computer; it's also the software running on it.
- Forgetting about DNS; it's the invisible helper that connects domain names to actual servers.
- Underestimating the importance of HTTPS; always prioritize secure connections for sensitive data.

5. Now Try It

Open your favorite web browser. Right-click on any webpage and select "Inspect" or "Inspect Element" (the exact wording might vary). This will open your browser's developer tools. Look for tabs like "Elements" (shows HTML and applied CSS), "Console" (for JavaScript errors or output), and "Network." Try clicking around the "Elements" tab to see how the HTML structure corresponds to what you see on the page. Then, refresh the page while the "Network" tab is open and watch all the requests your browser makes to load the page (HTML, CSS, JS, images).

Success looks like: You can identify an <h1> tag in the "Elements" tab and see its corresponding text highlighted on the page, and you observe various .html, .css, and .js files being loaded in the "Network" tab when you refresh.