Web Technology – Class 9 | Unit 4
Unit 4: Web Technology – Class 9 ICT
4.1 Concept of Web Technology
Web technology refers to the tools and techniques used for communication between different types of devices over the Internet. It includes web design, development, content creation, server management, and browser rendering. The World Wide Web (WWW) allows users to view and interact with websites and web applications through browsers like Chrome and Firefox.
4.2 Web Development Life Cycle
The Web Development Life Cycle (WDLC) is a process followed to create effective websites:
- Requirement Analysis: Understanding what the website needs to do.
- Planning: Creating a blueprint or wireframe of the site.
- Design: Building the look and layout of the site (UI/UX).
- Development: Writing the actual code using HTML, CSS, and more.
- Testing: Checking the site for bugs and errors.
- Deployment: Making the website live for users.
- Maintenance: Updating and improving the website regularly.
4.3 User Interface (UI) and User Experience (UX)
User Interface (UI): The visual part of the website that users interact with, including buttons, text boxes, and layouts.
User Experience (UX): The overall experience users have when interacting with the site, including ease of use, performance, and accessibility.
4.4 HTML and Its Tags
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to define elements like headings, paragraphs, images, and links.
<html> <head> <title>My Page</title> </head> <body>Content here</body> </html>
4.5 Common HTML Tags
- Text Formatting:
- Anchor Tag: Used to link to another page.
- List Tags:
- Table Tag:
- Image Tag:
<b>Bold</b>, <i>Italic</i>, <u>Underline</u>
<a href="https://example.com">Visit Site</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Ram</td><td>14</td></tr>
</table>
<img src="image.jpg" alt="Description" />
4.6 Form and Div Tags
Form: Used to collect user inputs like name, email, or feedback.
<form>
<input type="text" name="name" />
<input type="submit" value="Submit" />
</form>
Div: Used as a container for HTML elements to style them using CSS.
<div style="background-color:#eee; padding:10px;">This is a box</div>
4.7 CSS and Its Application
CSS (Cascading Style Sheets) is used to style HTML elements. It controls colors, fonts, layout, and spacing to make websites attractive and organized.
4.8 Types of CSS
- Inline CSS: Style is applied directly within an HTML tag.
- Internal CSS: Defined inside a <style> tag in the head of the HTML document.
- External CSS: Written in a separate .css file and linked to the HTML.
<p style="color:blue;">Hello</p>
<style>
p { color: green; }
</style>
<link rel="stylesheet" href="style.css" />
Summary
This unit helps students understand the basics of how websites are created and designed. By learning HTML and CSS, students can build their own web pages and begin a journey into web development. Understanding UI/UX ensures they create not just functional but also user-friendly websites.
