Grade 11 Web Technology Ic
🌐 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
Accepts website addresses (URLs).
Requests web pages from servers using HTTP/HTTPS.
Interprets HTML, CSS, and JavaScript code.
Displays the final formatted web page to the user.
📖 Example
When you type 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.
🔍 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
Crawling: Automatically scanning websites for new content.
Indexing: Storing information from websites in a large database.
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 | <h1>Welcome</h1> |
| 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
Easy content creation using text editors
User management (Admin, Editor, Viewer)
Themes and templates for design
Plugins for extra functionality
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:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is my first paragraph.</p>
</body>
</html>
🧱 Explanation:
<!DOCTYPE html>→ Defines document type.<html>→ Root element of the web page.<head>→ Contains metadata, title, and links to CSS/JS.<title>→ 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
Design your web pages in HTML/CSS.
Buy a domain name (like
example.com).Choose a hosting service.
Upload your files (using FTP or control panel).
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:
<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>
<head>
<title>Basic Tags Example</title>
</head>
<body bgcolor="lightblue" text="black" background="bg.jpg">
<h1>Welcome</h1>
<p>This is my first HTML page!</p>
</body>
</html>
🧩 Explanation
bgcolor→ sets background color.text→ sets text color.background→ sets an image as background.
🎵 Adding Background Sound (Old HTML Feature)
<bgsound src="music.mp3" loop="infinite">
⚠️ Note: Not supported in modern browsers; use HTML5
<audio>tag instead.
<audio src="music.mp3" autoplay loop></audio>
6.4.6 Heading Tag (H1 to H6)
Headings define the titles and subheadings of a page.
<h1 align="center">Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Minor Heading</h3>
<h4> Normal Heading 4</h4>
<h5> Smaller Heading 5</h5>
<h6> Smallest Heading</h6>
🔹 Details:
<h1>is the largest heading.<h6>is the smallest heading.alignattribute can be:left,center,right. (its left by default)
6.4.7 FONT Tag and Attributes
The <font> tag defines the appearance of text.
(Deprecated in HTML5 — replaced by CSS — but still taught for understanding.)
🧩 Example:
<font size="5" color="red" face="Arial">This is large red text.</font>
<basefont size="3">
<small>Small text</small>
<big>Big text</big>
🔹 Attributes:
| Attribute | Description | Example |
| size | Text size (1–7) | <font size="4">Text</font> |
| color | Text color | <font color="blue">Text</font> |
| face | Font type | <font face="Verdana">Text</font> |
| basefont | Defines default text size | <basefont size="3"> |
| small/big | Makes text smaller or bigger | <small>small</small> <big>big</big> |
✅ Summary of Key Points
Web browsers display HTML pages; search engines help find them.
Internet technologies include HTML, CSS, JavaScript, and backend tools.
CMS simplifies web management without coding.
HTML provides structure using tags and attributes.
Basic tags define headings, paragraphs, and background.
<font>tag adjusts text appearance (use CSS instead in modern web).
6.4.8 Paragraph Formatting (<p>)
📘 Definition
The <p> tag is used to define paragraphs of text in HTML.
Browsers automatically add a blank line (margin) before and after each paragraph.
🧩 Example
<p>This is the first paragraph.</p>
<p>This is the second paragraph. It will appear below the first one.</p>
🔹 Attributes
| Attribute | Description | Example |
align | Aligns text within paragraph | <p align="center">Centered text</p> |
💡 Note:
Avoid using multiple <br> for spacing — use <p> tags instead for proper formatting.
6.4.9 Break Line (<br>)
📘 Definition
The <br> tag inserts a line break (new line) without starting a new paragraph.
🧩 Example
<p>Hello<br>World!</p>
<p>Line 1<br>Line 2<br>Line 3</p>
💡
<br>is an empty tag, meaning it has no closing tag.
6.4.10 Comment in HTML
📘 Definition
Comments are used to add notes or explanations inside HTML code.
They are not displayed in the web page output.
🧩 Syntax
<!-- This is a comment -->
<p>This will be displayed.</p>
<!-- <p>This will not be displayed.</p> -->
💡 Use:
To explain sections of code
To temporarily hide code during testing
6.4.11 Formatting Text
HTML provides various tags for text formatting, making it bold, italic, underlined, etc.
| Tag | Meaning / Function | Example |
<b> | Bold text | <b>Bold</b> |
<i> | Italic text | <i>Italic</i> |
<u> | Underlined text | <u>Underlined</u> |
<mark> | Highlighted text | <mark>Important</mark> |
<sup> | Superscript (above) | x<sup>2</sup> |
<sub> | Subscript (below) | H<sub>2</sub>O |
<em> | Emphasized (italic by default) | <em>Emphasized</em> |
<blockquote> | Quotation block | <blockquote>Quote text</blockquote> |
<pre> | Preformatted text (keeps spaces and lines) | <pre>Line 1 Line 2</pre> |
🧩 Example
<p>This is <b>bold</b> and <i>italic</i> text.</p>
<p>H<sub>2</sub>O is the formula for water.</p>
<blockquote>"The best way to predict the future is to create it."</blockquote>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
OUTPUT:
6.4.12 Ordered List (<ol>)
📘 Definition
An ordered list displays items in a specific order — numbered, lettered, or Roman numerals.
🧩 Example
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
🔹 Attributes of <ol>
| Attribute | Description | Example |
type | Defines numbering type | <ol type="A"> |
start | Starting number or letter | <ol start="5"> |
value | Specifies value of a particular list item | <li value="10">Item</li> |
🔸 List Type Options
| Type | Result Example |
1 | 1, 2, 3 |
A | A, B, C |
a | a, b, c |
I | I, II, III |
i | i, ii, iii |
🧩 Example
<ol type="I" start="3">
<li>Introduction</li>
<li>Body</li>
<li>Conclusion</li>
</ol>
6.4.13 Unordered List (<ul>) and Definition List (<dl>)
📘 Unordered List
Displays items without order, usually with bullet points.
🧩 Example
<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
🔹 Bullet Types
| Type | Symbol |
disc | ● |
circle | ○ |
square | ■ |
📘 Definition List
Used for terms and their definitions (like in dictionaries).
🧩 Example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
| Tag | Meaning |
<dl> | Definition List container |
<dt> | Definition Term |
<dd> | Definition Description |
6.4.14 ADDRESS Tag
📘 Definition
The <address> tag defines contact information for the author or owner of a web page.
🧩 Example
<address>
Written by <b>Aarav Poudel</b><br>
Visit us at: <a href="https://www.example.com">www.example.com</a><br>
Email: <a href="mailto:info@example.com">info@example.com</a><br>
Location: Dharan, Sunsari, Nepal
</address>
💡 Displayed in italic font by default.
Creating Links (Anchor Tag <a>)
📘 Definition
The <a> tag (anchor tag) creates hyperlinks that connect to other pages or sections.
🔹 Syntax
<a href="URL">Link Text</a>
🧩 1. Link to Other HTML Documents
This will open the html document named about.html
<a href="about.html">About Us</a>
🧩 2. Link to Other Websites
This will open the Website of google. (“https://www.google.com”)
<a href="https://www.google.com">Visit Google</a>
🧩 3. Open Link in New Tab
This will open the link in a new tab
<a href="https://example.com" target="_blank">Open in New Tab</a>
🧩 4. Link to a Specific Section on the Same Page
when we click “Go to Contact Section , the window will move to show the html element that had id=”contact” attribute i.e Contact Us
<a href="#contact">Go to Contact Section</a>
<h2 id="contact">Contact Us</h2>
<p>Here are our contact details.</p>
🧩 5. Email Link
On clicking Send Email , it will open the Gmail, or other Email Client Application to allow us to send email on the given address.
<a href="mailto:info@example.com">Send Email</a>
🧩 6. Telephone Link
It will open a dialer on mobile phone to allow us to call the given phone number
<a href="tel:+9779812345678">Call Us</a>
✅ Summary:
| Concept | Description | Example |
| Paragraph | Creates text block | <p>Text</p> |
| Break line | New line | <br> |
| Comment | Hidden note | <!-- note --> |
| Formatting | Style text | <b>, <i>, <u> etc. |
| Ordered List | Numbered list | <ol><li></li></ol> |
| Unordered List | Bulleted list | <ul><li></li></ul> |
| Definition List | Terms & definitions | <dl><dt></dt><dd></dd></dl> |
| Address | Author’s info | <address>...</address> |
| Link | Creates hyperlink | <a href="...">Link</a> |
