Grade 9||Web Development|| Notes

1. Introduction to Web Technology

What is Web Technology?

Web technology refers to the collection of tools, programming languages, software, and protocols used to create, develop, and manage websites and web applications on the internet. It combines both front-end (what users see) and back-end (server-side processing) components to deliver functional and interactive web experiences.

Key Components of Web Technology:

1. HTML – Structures web content
2. CSS – Styles and designs web pages
3. JavaScript – Adds interactivity
4. Backend Languages (PHP, Python, Node.js) – Handles server-side logic
5. Databases (MySQL, MongoDB) – Stores website data

2. Web Development Life Cycle (WDLC)

The WDLC is a systematic process for creating and maintaining websites.

Stages of WDLC:

 

StageDescription1. Gathering InformationResearch target audience, content needs, website purpose2. PlanningCreate sitemap, wireframes, and project timeline3. Design & LayoutDesign visual elements, choose colors, fonts, images4. Content CreationWrite text, prepare images, videos, and audio5. DevelopmentWrite code (HTML, CSS, JavaScript) to build the website6. TestingCheck for errors, broken links, browser compatibility7. Maintenance & UpdatingRegular updates, security patches, content refresh

Future Trends in Web Technology:

1. AI and Machine Learning integration
2. Progressive Web Apps (PWAs)
3. Augmented Reality (AR) and Virtual Reality (VR)
4. Edge Computing for faster performance
5. Enhanced Web Security

3. Domain Name System (DNS)

What is DNS?

DNS is like the internet's phonebook. It translates human-readable domain names (e.g., www.google.com) into IP addresses that computers understand (e.g., 142.250.185.206).

Types of Domain Names:

1. .com – Commercial websites
2. .edu – Educational institutions
3. .gov – Government organizations
4. .org – Non-profit organizations
5. .np – Country code for Nepal
6. .net – Network-related sites

DNS Registration Process:

1. Choose a unique domain name
2. Check availability using a domain checker
3. Select a registrar (e.g., nestnepal.com)
4. Purchase and register the domain
5. Renew before expiration

Note: In Nepal, .np domains can be registered freely at register.com.np

4. Concept of UI/UX Design

Front-End vs Back-End:

 

Front-EndBack-EndWhat users see and interact withServer-side processing and logicIncludes UI/UX, layouts, colorsIncludes databases, servers, APIsBuilt with HTML, CSS, JavaScriptBuilt with PHP, Python, Java, Node.jsUser-focusedFunctionality-focused

UI (User Interface):

1. Focuses on visual elements: buttons, colors, typography, layouts
2. Goal: Create attractive, user-friendly interfaces
3. Tools: Figma, Adobe XD, Sketch

UX (User Experience):

1. Focuses on user satisfaction and ease of use
2. Goal: Make websites intuitive and enjoyable
3. Involves: User research, wireframing, testing

Wireframing:

1. A basic blueprint/skeleton of a webpage
2. Shows structure without colors or detailed design
3. Used in early design stages
4. Tools: Balsamiq, Figma, Sketch

Benefits of Good UI/UX:

1. Increases user engagement
2. Improves user satisfaction
3. Enhances brand identity
4. Saves development time and cost

5. HTML (HyperText Markup Language)

Introduction to HTML:

1. Created by Tim Berners-Lee in 1991
2. Standard language for creating web pages
3. Uses tags enclosed in angle brackets: <tag>
4. File extension: .html or .htm

HTML Document Structure:

HTML Tags Types:

 

TypeDescriptionExampleContainer TagsHave opening and closing tags<p> </p>Empty TagsSelf-closing, no closing tag<br>, <img>

Common HTML Tags:

 

TagPurpose<h1> to <h6>Headings (h1 largest, h6 smallest)<p>Paragraph<br>Line break<hr>Horizontal line<b>, <i>, <u>Bold, Italic, Underline<sup>, <sub>Superscript, Subscript<font>Text font, size, color<marquee>Scrolling text or images<a href="">Hyperlink<img src="">Insert image<table>, <tr>, <td>Create tables<ul>, <ol>, <li>Lists (unordered, ordered)<form>Create forms for user input

HTML Attributes:

1. Provide additional information about tags
2. Placed within opening tag
3. Format: attribute="value"

Example: <font color="red" size="5">

Color Codes in HTML:

1. Use color names or hexadecimal codes
2. Black: #000000
3. Red: #FF0000
4. Green: #00FF00
5. Blue: #0000FF

6. Advanced HTML Elements

Anchor Tags (Links):

 

Attributes:

1. href: Specifies the link destination
2. target: Where to open the link (_blank, _self, _parent, _top)

Types of Links:

External Links: Link to different websites

Internal Links: Link within same page (#section)

Email Links: mailto:email@example.com

HTML Tables:

Table Attributes:

border: Border thickness

bgcolor: Background color

cellpadding: Space between cell content and border

cellspacing: Space between cells

colspan: Merge columns

rowspan: Merge rows

HTML Forms:

Form Elements:

1. Text fields: <input type="text">
2. Password: <input type="password">
3. Radio buttons: <input type="radio">
4. Checkboxes: <input type="checkbox">
5. Dropdown: <select> with <option>
6. Text area: <textarea>
7. Buttons: Submit and Reset

DIV Tag:

1. A container to group HTML elements
2. Used for layout and styling with CSS
3. Block-level element

7. CSS (Cascading Style Sheets)

Introduction to CSS:

Styles HTML elements

Separates content from presentation

Can control layout, colors, fonts, responsiveness

Types of CSS:

 

TypeWhere DefinedExampleInline CSSWithin HTML tag<p style="color:red;">Internal CSSInside <style> in <head>p {color: red;}External CSSSeparate .css file linked<link rel="stylesheet" href="style.css">

CSS Syntax:

CSS Selectors:

 

SelectorSyntaxTargetsElementp { }All <p> elementsID#header { }Element with id="header"Class.menu { }Elements with class="menu"Universal* { }All elements

Common CSS Properties:

 

PropertyValuesPurposecolorred, #FF0000Text colorfont-familyArial, TimesFont typefont-size16px, 1emText sizebackground-coloryellow, #FFFF00Background colortext-alignleft, center, rightText alignmentmargin10px, 2emOuter spacepadding5pxInner spaceborder1px solid blackBorder style

CSS Box Model:

Content – Actual text/image

Padding – Space around content

Border – Line around padding

Margin – Space outside border

8. Practical Applications & Projects

Creating a Basic Web Page:

1. Plan structure and content
2. Write HTML code
3. Add CSS for styling
4. Test in different browsers
5. Upload to web server

Project: Personal Portfolio Website

Pages Required:

1. Home Page – Introduction, welcome message
2. Gallery Page – Photos with captions
3. Contact Page – Contact form with fields
4. Information Page – Personal details in table

Features to Include:

1. Navigation bar on all pages
2. Consistent footer with contact info
3. Responsive design for mobile
4. Forms with validation
5. Images and multimedia content

Web Development Tools:

1. Text Editors: Sublime Text, VS Code, Notepad++
2. Browsers: Chrome, Firefox, Safari (for testing)
3. FTP Clients: FileZilla (for uploading to server)

9. Important Definitions

1. HTML – HyperText Markup Language, structures web pages
2. CSS – Cascading Style Sheets, styles web pages
3. DNS – Domain Name System, translates domain to IP
4. UI – User Interface, visual design of website
5. UX – User Experience, how users interact with site
6. Wireframe – Basic layout blueprint
7. Responsive Design – Website adapts to different screen sizes
8. Front-End – Client-side development (what users see)
9. Back-End – Server-side development (logic and data)
10. Web Protocol – Rules for data transfer (HTTP, HTTPS)

10. Key Points to Remember

✅ HTML is for structure, CSS is for style
✅ Always test websites in multiple browsers
✅ Keep backup copies of your work
✅ Use meaningful names for files and folders
✅ Practice by creating simple projects first
✅ Learn from existing websites (View Source)
✅ Stay updated with latest web technologies

11. Safety & Ethics in Web Development

1. Respect Copyrights – Don't copy others' work without permission
2. Protect User Data – Handle personal information securely
3. Test Thoroughly – Ensure your site works correctly
4. Credit Sources – Acknowledge where you get resources
5. Keep Learning – Web technology evolves rapidly