TECHNOLOGY 

Published on

KembaraXtra – Computer Science – Web Languages

I. Core Web Languages

A. HTML (HyperText Markup Language)

  • Purpose: Defines the structure of a web page. It determines what is on the page.
  • Key Concepts:
    • Tags: Enclosed in < and > (e.g., <p>, <h1>).
    • Elements: Consist of a start tag, content, and an end tag (e.g., <p>This is a cat.</p>). Some elements don't require end tags (e.g., <img>).
    • Structure: HTML documents have a tree-like structure with parent and child elements.
    • <!DOCTYPE html>: Declares the document as HTML.
    • <html>: The root element, containing everything else.
    • <head>: Contains document metadata (e.g., title, character set).
    • <body>: Contains the content of the web page.
    • <h1> to <h6>: Heading tags, with <h1> being the highest level.
    • <p>: Paragraph tag.
    • <img>: Image tag; src specifies image URL, alt gives alternative text.
    • Whitespace: Browsers ignore extra whitespace. Use indentation for readability.
    • HTML Living Standard: Maintained by WHATWG.
  • Example:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Cat</title>
  </head>
  <body>
    <h1>Thoughts on a Cat</h1>
    <p>This is a cat.</p>
    <img src="cat.jpg" alt="cat photo">
  </body>
</html>

B. CSS (Cascading Style Sheets)

  • Purpose: Defines the appearance/style of a web page.
  • Key Concepts:
    • Rules: Define styles for specific elements.
    • Selectors: Indicate which elements are affected.
    • Cascading: Multiple rules can apply to the same element.
    • Font-family: Defines fallback fonts.
  • Methods of Application:
    • Inline: Within a <style> element – not recommended.
    • External: In a separate .css file and linked using <link> in <head>.
  • Example:
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  margin-left: 10px;
  color: DimGray;
}
h1 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18pt;
  font-weight: bold;
}

C. JavaScript

  • Purpose: Defines behavior/functionality of a web page.
  • Key Concepts:
    • Interpreted Language: Executed at runtime by browser.
    • Minification: Reduces file size by removing whitespace/comments.
    • DOM: JavaScript can access and modify the page structure.
    • Event Handlers: Respond to user actions.
    • Integration: Embedded in HTML or linked via <script src="cat.js"></script>.
  • Example:
document.getElementById('cat-photo').onclick = function() {
  document.getElementById('cat-para').innerHTML += ' Meow!';
};
  • Explanation:
    • Selects element by ID.
    • Assigns a function on click.
    • Appends "Meow!" to the paragraph.
  • ECMAScript: The standardized specification for JavaScript.

    • II. Data Structuring Languages

    A. XML (Extensible Markup Language)

    • Purpose: Text-based language for data exchange.
    • Key Concepts:
      • Custom tags defined by the user.
      • Requires producer-consumer agreement.
    • Example:
    <band name="The Highbury Musical Club">
  <bandMembers>
    <member name="Jane Fairfax" instrument="Piano" />
    <member name="Emma Woodhouse" instrument="Guitar" />
  </bandMembers>
</band>

    B. JSON (JavaScript Object Notation)

    • Purpose: Lightweight data format.
    • Key Concepts:
      • JavaScript-like syntax with {} and [].
      • Compact and readable.
    • Example:
    {
  "name": "The Highbury Musical Club",
  "bandMembers": [
    {
      "name": "Jane Fairfax",
      "instrument": "Piano"
    },
    {
      "name": "Emma Woodhouse",
      "instrument": "Guitar"
    }
  ]
}
  • Usage: Used for API communication between clients and servers.

    • KembaraXtra – Computer Science – Web Browsers

    I. Introduction

    • Definition: Software applications for accessing web pages.
    • Key Functions: Requesting, receiving, and displaying web content.

    II. History of Web Browsers

    • WorldWideWeb: First browser, by Tim Berners-Lee (1990).
    • Mosaic: Brought the web to the masses.
    • Netscape Navigator: Popular in early web history.
    • Internet Explorer: Dominated the late 1990s and 2000s.
    • Modern Browsers: Chrome, Safari, Firefox.

    III. Rendering a Web Page: The Process

    1. Request: Browser sends URL request.
    2. HTML Response: Server returns HTML content.
    3. DOM Creation: Browser parses HTML into a DOM tree.
    4. Resource Requests: Additional resources (images, JS, CSS) are loaded.
    5. Rendering:
      • Displays HTML.
      • Applies CSS.
      • Executes JavaScript.
      • Updates dynamically via JS if needed.

    IV. Web Browser Architecture

    • Rendering Engine: Handles HTML/CSS layout.
    • JavaScript Engine: Runs JS code.
    • User Interface: Provides controls like the address bar.

    V. Rendering Engine Landscape

    • Key Point: Engines affect how pages look.
    • WebKit: Safari and iOS apps.
    • Blink: Chrome, Edge, Opera (Chromium-based).
    • Gecko: Firefox (with SpiderMonkey JS engine).

    VI. Understanding the User Agent String

    • Definition: The technical term for a browser is a "user agent."
    • User-Agent Header: Identifies browser during requests.
    • Example: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
    • Components Explained:
      • Mozilla/5.0: Compatibility prefix.
      • (Windows NT 10.0; Win64; x64): Platform.
      • AppleWebKit/537.36: Rendering engine.
      • (KHTML, like Gecko): History artifact.
      • Chrome/71.0.3578.98: Browser version.
      • Safari/537.36: Ensures Safari compatibility.
    • Reason for Complexity: Historical compatibility tricks.
    Picture
    0 Comments

    Author

    Write something about yourself. No need to be fancy, just an overview.