# Web Technology -Computer Science Grade 11 --- # 🌐 **Unit 6: Web Technology** --- ## **6.2 Web Browsers and Search Engines** ### 🌍 **Web Browser** A **web browser** is an application software that allows users to access, view, and interact with web pages on the internet. ### πŸ”Ή **Common Web Browsers** * Google Chrome * Mozilla Firefox * Safari * Microsoft Edge * Opera ### 🧠 **Functions of a Web Browser** 1. Accepts website addresses (URLs). 2. Requests web pages from servers using HTTP/HTTPS. 3. Interprets HTML, CSS, and JavaScript code. 4. Displays the final formatted web page to the user. ### πŸ“– **Example** When you type [`https://www.wikipedia.org`](https://www.wikipedia.org): * The browser sends a request to the Wikipedia server. * The server sends back an HTML file. * The browser displays the formatted page. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760199641039/b05d32b9-82ad-4728-9c0e-79ad61f1fde1.webp align="center") --- ### πŸ” **Search Engine** A **search engine** is a web-based tool that helps users find information across the internet. ### πŸ”Ή **Popular Search Engines** * Google * Bing * Yahoo * DuckDuckGo * Baidu ### βš™οΈ **How Search Engines Work** 1. **Crawling:** Automatically scanning websites for new content. 2. **Indexing:** Storing information from websites in a large database. 3. **Ranking:** Showing the most relevant results when users search. ### 🧩 **Example** When you search β€œHTML tutorial”: * The search engine looks through its index. * It shows the most relevant web pages related to HTML tutorials. --- ## **6.3 Overview of Various Internet & Web Technologies** | Technology | Purpose | Example | | --- | --- | --- | | **HTML (HyperText Markup Language)** | Defines structure of web pages | `

Welcome

` | | **CSS (Cascading Style Sheets)** | Adds design and layout to web pages | `color: blue; background: yellow;` | | **JavaScript** | Adds interactivity and dynamic content | Form validation, animations | | **PHP / Python / Node.js** | Server-side programming | Login, database connection | | **MySQL / MongoDB** | Database systems to store data | User accounts, product data | | **HTTP / HTTPS** | Communication protocol between browser and server | Request/response process | | **API (Application Programming Interface)** | Enables data exchange between systems | Google Maps API | | **CMS (Content Management System)** | Allows easy web content creation | WordPress, Joomla | --- ## **6.4 Content Management System (CMS)** ### πŸ“˜ **Definition** A **CMS** is a software that helps users create, edit, and manage website content **without needing to code**. ### πŸ”Ή **Popular CMS Examples** * **WordPress** (most popular) * **Joomla** * **Drupal** * **Wix** ### βš™οΈ **Key Features** 1. Easy content creation using text editors 2. User management (Admin, Editor, Viewer) 3. Themes and templates for design 4. Plugins for extra functionality 5. Media management (images, videos, audio) ### 🧠 **Example** A blogger can publish posts using **WordPress dashboard** without writing HTML manually. --- ## **6.4 HTML: The Language of the Web** ### **6.4.1 Objectives** * Understand HTML syntax and structure. * Create and format simple web pages. * Use tags and attributes properly. * Add headings, paragraphs, lists, and links. --- ### **6.4.2 Structure of HTML** Every HTML document has three main parts: ```html My First Web Page

Welcome to HTML

This is my first paragraph.

``` #### 🧱 Explanation: * `` β†’ Defines document type. * `` β†’ Root element of the web page. * `` β†’ Contains metadata, title, and links to CSS/JS. * `` β†’ Title shown in browser tab. * `<body>` β†’ Visible page content. --- ### **6.4.3 Publishing and Hosting** | Term | Description | | --- | --- | | **Publishing** | Uploading your website to the internet so others can access it. | | **Hosting** | A service that stores your website files on a web server. | #### 🧩 **Examples of Hosting Services:** * GitHub Pages * Netlify * Hostinger * InfinityFree #### 🧠 **Steps to Publish a Website** 1. Design your web pages in HTML/CSS. 2. Buy a **domain name** (like [`example.com`](http://example.com)). 3. Choose a **hosting service**. 4. Upload your files (using FTP or control panel). 5. Access it online through the domain. --- ### **6.4.4 HTML Tags vs Attributes** | **Tags** | **Attributes** | | --- | --- | | Define elements or structure in HTML | Provide extra information about a tag | | Always enclosed in `< >` | Written inside opening tag | | Example: `<p>` | Example: `<img src="photo.jpg" alt="image">` | #### 🧠 Example: ```html <img src="logo.png" alt="Company Logo" width="100" height="80"> ``` * **Tag:** `<img>` * **Attributes:** `src`, `alt`, `width`, `height` --- ### **6.4.5 Basic Tags of HTML** #### πŸ“˜ Example: ```html <html> <head> <title>Basic Tags Example

Welcome

This is my first HTML page!

``` ### 🧩 **Explanation** * `bgcolor` β†’ sets background color. * `text` β†’ sets text color. * `background` β†’ sets an image as background. --- ### 🎡 **Adding Background Sound (Old HTML Feature)** ```html ``` > ⚠️ *Note: Not supported in modern browsers; use HTML5* `