Lecture 1: Introduction to Web Development

Lecture 1: Introduction to Web Development

Key Concepts:


  1. Data

    Raw facts and figures without context.

    Example:

    “23”, “Apple”, “Blue”.

  2. Information
    Processed data that has meaning.

    Example:
    “The temperature is 23°C”.


  3. Knowledge

    Applied information based on experience or understanding.

    Example:
    “If the temperature is 23°C, it’s comfortable for outdoor activities”.

The Evolution of Online Application Development

  • 1964 – Computers Introduced
    The foundation of modern computing begins.

  • 1998 – Web 1.0
    The first generation of the web: static pages, read-only content, minimal user interaction.

  • Web 2.0
    Interactive and dynamic websites: user-generated content, social media, and responsive web design.

  • Web 3.0
    Semantic web: machine learning, AI integration, personalized experiences.

  • Web 4.0
    Intelligent and decentralized web: virtual assistants, blockchain, and context-aware applications (e.g., Div-based intelligent UI/UX).

What is a Website?

Definition:
A website is a collection of related web pages accessible over the Internet, hosted on at least one web server.

Explanation:

  • A website contains text, images, videos, and other multimedia content.

  • It is accessed via a domain name through a web browser.

  • All websites are hosted on web servers that are connected to the Internet.

Fundamentals of Web Technologies

What is a Web Page

A web page is a single document on the internet, written in HTML (HyperText Markup Language), and viewed using a web browser.

  • It can contain text, images, videos, links, and other media.
  • Multiple web pages together form a website.

What is a Web Browser?

A browser is a software application used to access and view websites.

  • Examples: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari.
  • Browsers read HTML, CSS, and JavaScript to render web pages visually.

Application, OS, Device, Drive

  • Application: A program or software designed to perform specific tasks (e.g., MS Word, Photoshop, Web Browsers).
  • Operating System (OS): Software that manages computer hardware and software resources. Examples: Windows, macOS, Linux, Android.
  • Device: Physical hardware such as a mobile, laptop, tablet, etc.
  • Drive: A storage unit on the device where files and applications are stored (e.g., C:\ drive, D:\ drive).

What is a Protocol?

A protocol is a set of rules and regulations used to perform specific tasks in communication between computers or systems over a network.

Common Protocols:

  • FTP (File Transfer Protocol): Used for transferring files between client and server.
  • HTTP (HyperText Transfer Protocol): Used for accessing web pages.
  • HTTPS: Secure version of HTTP using encryption.

    • What is HTML?

    HTML stands for HyperText Markup Language.

    It is the standard markup language used to create web pages and web applications.

    Why is HTML not a Programming Language?

    HTML is a markup language, not a programming language, because:

    • It does not have logic like if-else, loops, or variables.
    • It only structures content, not performs operations or computations.

    Definition of HTML:

    HTML is a markup language used to define the structure of web content using elements and tags. It tells the browser how to display text, images, links, and other content.

    DOM (Document Object Model):

    The DOM is a programming interface for HTML and XML documents.

    It represents the structure of a web page as a tree of objects (nodes), which can be modified using JavaScript.

    Types of HTML Tags

    1. Syntax-wise:

    Opening and Closing Tags: Most HTML tags come in pairs. Example: 

    <p>Paragraph</p>

    2. Behavior-wise:

    Block-Level Tags: Take full width and start on a new line. 

    Examples:<div>, <p>, <h1>,<section>

    Inline Tags: Flow within text and do not start on a new line.

    Examples:<span>, <a>,<strong>,<img>

    3. Empty (Void) Tags:

    Tags that do not have closing tags or body content. 

    Examples:<img>, <br>, <hr>, <input>