class 11 notes

Class 11 Computer and Communicatio Notes Chapter 6 (Chapter 6) – CCT Part-II Book

Philoid

Philoid

— 6 min read

CCT Part-II
Alright class, let's get straight into Chapter 6. This chapter is crucial as it often forms the basis for questions related to web technologies in various government exams. Pay close attention to the definitions, acronyms, and the fundamental concepts.

Chapter 6: Web Development Basics - Detailed Notes for Exam Preparation

1. Introduction to the World Wide Web (WWW)

  • Definition: The World Wide Web (WWW or Web) is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet.
  • Distinction: Often confused with the Internet. The Internet is the global network infrastructure (hardware and protocols like TCP/IP), while the WWW is a service that runs on the Internet. Think of the Internet as the roads and the Web as the system of houses and addresses connected by those roads.
  • Inventor: Tim Berners-Lee invented the WWW around 1989-1991 while working at CERN.
  • Key Components: Web Browsers, Web Servers, HTTP protocol, HTML, URLs.

2. Client-Server Architecture (Web Context)

  • Concept: The fundamental model for how the Web works.
    • Client: The user's device (computer, phone) running a web browser (e.g., Chrome, Firefox). The client requests resources (web pages, images).
    • Server: A powerful computer that stores web resources (HTML files, images, etc.) and serves (sends) them to clients upon request.
  • Process:
    1. User enters a URL in the browser (Client).
    2. Browser sends an HTTP Request to the Web Server hosting that URL.
    3. Web Server processes the request.
    4. Web Server sends an HTTP Response (containing the requested resource, like an HTML page) back to the Client.
    5. Browser renders the received resource and displays it to the user.

3. Web Browsers and Web Servers

  • Web Browser: Software application used to access and display information on the WWW.
    • Function: Interprets HTML, CSS, and JavaScript; sends HTTP requests; receives HTTP responses; renders web pages.
    • Examples: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge.
  • Web Server: Software (and the hardware it runs on) that processes requests from web browsers using the HTTP protocol and serves files that form web pages.
    • Function: Stores website files, listens for incoming HTTP requests, processes requests, sends HTTP responses.
    • Examples (Software): Apache HTTP Server, Nginx, Microsoft Internet Information Services (IIS).

4. Uniform Resource Locator (URL)

  • Definition: A unique address used to identify and locate resources (like web pages, images) on the Internet.
  • Components:
    • Protocol/Scheme: (e.g., http, https) - Specifies the protocol to be used. https indicates a secure connection.
    • Domain Name: (e.g., www.example.gov.in) - Identifies the web server. Includes Top-Level Domain (TLD) like .com, .org, .gov, .in.
    • Path: (e.g., /documents/report.html) - Specifies the location of the resource on the server.
    • (Optional) Query String: (e.g., ?id=123&type=report) - Used to pass data to the server (often for dynamic pages).
    • (Optional) Fragment: (e.g., #section2) - Points to a specific part within the resource.

5. HyperText Transfer Protocol (HTTP & HTTPS)

  • HTTP: The underlying protocol used by the WWW for transferring hypertext (web pages). It defines how messages are formatted and transmitted between clients and servers. It's a stateless protocol (each request is independent).
  • HTTPS: HTTP Secure. It's HTTP over a secure, encrypted connection using TLS (Transport Layer Security) or its predecessor SSL (Secure Sockets Layer). Essential for transmitting sensitive data (passwords, credit card info). Indicated by https:// in the URL and often a padlock icon in the browser.

6. HyperText Markup Language (HTML)

  • Definition: The standard markup language for creating web pages and web applications. It describes the structure and content of a web page, not its presentation (styling).
  • Markup Language: Uses tags (keywords enclosed in angle brackets < >) to annotate (mark up) text.
  • Basic Structure:
    <!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <!-- Metadata, links to CSS/JS go here -->
  </head>
  <body>
    <!-- Visible page content goes here -->
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
    <a href="https://www.example.com">This is a link</a>
    <img src="image.jpg" alt="Description">
  </body>
</html>
  • Key Elements/Tags (Exam Relevance):
    • <!DOCTYPE html>: Declares the document type (HTML5).
    • <html>: Root element of an HTML page.
    • <head>: Contains meta-information (title, character set, links to scripts/stylesheets). Content here is not directly displayed on the page (except <title>).
    • <title>: Defines the title shown in the browser tab or window title bar.
    • <body>: Contains the visible page content (text, images, links, tables, etc.).
    • <h1> to <h6>: Heading tags (h1 is the most important).
    • <p>: Paragraph tag.
    • <a>: Anchor tag, used for creating hyperlinks (href attribute specifies the destination URL).
    • <img>: Image tag (src attribute specifies the image file path, alt attribute provides alternative text).
    • <ul>: Unordered list (bullet points). Uses <li> (list item) tags inside.
    • <ol>: Ordered list (numbered points). Uses <li> tags inside.
    • <table>: Defines a table. Uses <tr> (table row), <th> (table header), <td> (table data cell).
    • <div>: Division or section, a block-level container often used for grouping elements for styling or scripting.
    • <span>: Inline container, used for grouping inline elements, often for styling specific parts of text.

7. Cascading Style Sheets (CSS)

  • Definition: A stylesheet language used to describe the presentation (look and formatting) of a document written in HTML. Separates content (HTML) from presentation (CSS).
  • Purpose: Controls layout, colors, fonts, spacing, etc.
  • Benefits: Improved accessibility, more flexibility, easier site maintenance (change style in one place, affects entire site), consistent look and feel.
  • Ways to Include CSS:
    1. Inline: Using the style attribute directly within an HTML tag (e.g., <p style="color: blue;">). (Lowest precedence, generally discouraged for large projects).
    2. Internal/Embedded: Using the <style> tag within the <head> section of the HTML document.
    3. External: Linking to an external .css file using the <link> tag in the <head> section (e.g., <link rel="stylesheet" href="styles.css">). (Most common and recommended method).
  • Basic Syntax: selector { property: value; }
    • Selector: Points to the HTML element(s) to style (e.g., p, .classname, #idname, h1).
    • Declaration Block: Contains one or more declarations separated by semicolons.
    • Property: The style attribute to change (e.g., color, font-size, background-color).
    • Value: The value assigned to the property (e.g., blue, 16px, #FFFFFF).
  • Cascading Order (Precedence): Inline styles > Internal/External styles (later rules override earlier ones if specificity is equal) > Browser default styles. Specificity rules also apply (e.g., ID selector #myid is more specific than a class selector .myclass, which is more specific than a tag selector p).

8. Static vs. Dynamic Web Pages

  • Static Web Page:
    • Content is fixed and delivered to the user exactly as stored on the server.
    • Written primarily in HTML and CSS.
    • Content changes only when the developer manually edits the files.
    • Faster loading, simpler hosting.
    • Example: A simple informational website, an "About Us" page.
  • Dynamic Web Page:
    • Content is generated on-the-fly by the server, often based on user input, database information, or other parameters.
    • Involves server-side scripting languages (like PHP, Python, Node.js) and databases (like MySQL, PostgreSQL) in addition to HTML, CSS, and often client-side JavaScript.
    • Content can be personalized and interactive.
    • Example: Social media feeds, e-commerce sites, online banking portals, search engine results pages.

Multiple Choice Questions (MCQs)

  1. What does HTML stand for?
    a) HyperText Transfer Language
    b) HighTech Markup Language
    c) HyperText Markup Language
    d) Hyperlink and Text Markup Language

  2. Which component of a URL specifies the protocol being used, like HTTP or HTTPS?
    a) Domain Name
    b) Path
    c) Scheme
    d) Query String

  3. Which HTML tag is used to define the main visible content of an HTML document?
    a) <head>
    b) <title>
    c) <body>
    d) <html>

  4. What is the primary purpose of CSS?
    a) To define the structure and content of a web page.
    b) To handle data transfer between client and server.
    c) To describe the presentation and styling of a web page.
    d) To add interactivity and dynamic behavior to a web page.

  5. Which method is generally considered the best practice for applying CSS to a large website for maintainability?
    a) Inline styles using the style attribute.
    b) Internal styles using the <style> tag in the <head>.
    c) External styles using a linked .css file.
    d) Using JavaScript to set styles.

  6. In the client-server model of the web, what is the role of the Web Browser?
    a) To store the website files.
    b) To act as the client, requesting and rendering resources.
    c) To process server-side scripts.
    d) To manage the domain name system (DNS).

  7. What does the 'S' in HTTPS stand for?
    a) Simple
    b) Server
    c) Secure
    d) Standard

  8. Which HTML tag is used to create a hyperlink?
    a) <link>
    b) <href>
    c) <a>
    d) <p>

  9. A web page whose content is generated on-the-fly based on database information when requested by a user is called a:
    a) Static Web Page
    b) Dynamic Web Page
    c) Client-Side Web Page
    d) Markup Web Page

  10. Which organization/person is credited with inventing the World Wide Web (WWW)?
    a) Microsoft
    b) Tim Berners-Lee (at CERN)
    c) Google
    d) The Internet Engineering Task Force (IETF)

Answer Key for MCQs:

  1. c
  2. c
  3. c
  4. c
  5. c
  6. b
  7. c
  8. c
  9. b
  10. b

Make sure you understand these core concepts thoroughly. Focus on the definitions of acronyms (HTML, CSS, HTTP, HTTPS, URL), the roles of different components (client, server, browser), the basic structure of HTML, and the purpose of CSS. Good luck with your preparation!

Read more