Overview of Web Development Fundamentals

Sep 4, 2024

CS50 Week 8 Lecture Notes

Introduction

  • Focus on the internet and building software on it.
  • Past focus: Scratch, C, Python, SQL.
  • Current focus: web development using HTML, CSS, JavaScript.

The Internet

  • ARPANET: Origins in the late '60s and '70s from the US Department of Defense.
  • Packets: Basic unit of data exchanged.
  • Routers: Devices that direct packets across the internet.
  • TCP/IP:
    • IP (Internet Protocol): Manages addressing of packets.
    • TCP (Transmission Control Protocol): Ensures packets are delivered correctly.

IP Addresses

  • Format: number.number.number.number (e.g., 192.168.0.1).
  • IPv4 uses 32 bits, IPv6 uses 128 bits.

TCP/IP Packets

  • Contain source address, destination address, sequence number, and port number.
  • Port numbers distinguish services (e.g., web, email).

DNS (Domain Name System)

  • Translates domain names to IP addresses.
  • Hierarchical system with root servers managing top-level domains.

DHCP (Dynamic Host Configuration Protocol)

  • Automatically assigns IP addresses and server configurations to devices.

HTTP and the Web

  • HTTP (Hypertext Transfer Protocol): Governs the World Wide Web.
  • HTTPS: Secure version of HTTP using encryption.
  • URLs consist of scheme, domain, path, and optionally port and query strings.
  • Status Codes: Indicate the result of HTTP requests (e.g., 200 OK, 404 Not Found).

HTML (Hypertext Markup Language)

  • Markup language used to structure content on the web.
  • Key elements: <html>, <head>, <title>, <body>, <h1> to <h6>, <p>, <ul>, <ol>, <li>, <div>, <a>.
  • Semantic tags: <header>, <main>, <footer> improve accessibility and SEO.
  • Attributes: Key-value pairs used to provide additional information (e.g., id, class, style).
  • Forms: Collect user input with <input>, <form>, using attributes like method, action, name.

CSS (Cascading Style Sheets)

  • Used to style HTML elements.
  • Structure: Selectors and properties (e.g., text-align, font-size).
  • Selectors: Type, class (.), ID (#), attribute.
  • Bootstrap: CSS framework for responsive design.

JavaScript

  • Scripting language for creating dynamic web content.
  • Can interact with HTML and CSS.
  • Events: click, submit, keyup, etc.
  • DOM Manipulation: Alter HTML structure using JavaScript.
  • Example features: Autocomplete, geolocation.

Developer Tools

  • Browser tools for inspecting and editing HTML, CSS, and JavaScript.
  • Useful for debugging and learning from existing pages.

These notes summarize the key concepts and topics covered during the lecture, providing a high-level overview of web development foundational languages and protocols.