4. Web Technology

 

4. Web Technology

Download PDF FIle

 4.1 Concepts of Web Technology 

 4.2 Concept of UI/UX: Concept of Wireframe, Wireframe Design 

 4.3 HTML: 

 4.3.1 Introduction to HTML 

 4.3.2 HTML Tag 

 4.3.3 Structure of HTML 

 4.3.4 Text Formatting Tag 

 4.3.5 Anchor, List, Table, image tag and their properties 

 4.3.6 Form and Div tag 

 4.4 CSS 

 4.4.1 Introduction to CSS 

 4.4.2 Embed CSS script in HTML 

 4.4.3 Types of CSS: Inline CSS, Internal CSS and External CSS

4.1 Concepts of Web Technology

 

Web technology refers to the tools, languages, protocols, and techniques used to create, design, develop, and manage websites and web applications on the Internet.
It enables communication between users (clients) and servers through the World Wide Web (WWW).

 

The goal of web technology is to allow users to access information and services through the internet. It helps in designing and developing websites or web applications.

 

It covers both front-end (HTML, CSS, JavaScript) and back-end (PHP, Python, Node.js, databases, frameworks) technologies.

 

Some examples of web technologies are:

HTML: Hypertext Markup Language, the standard language for creating web pages

CSS: Cascading Style Sheets, the language for styling and formatting web pages

JavaScript: A scripting language for adding functionality, interactivity, and logic to web pages.

Python: A versatile programming language commonly used for web development.

MySQL: A database management system for storing and retrieving data for web applications.

WordPress: A web content management system for creating and managing websites and blogs.

 

Importance of Web Technology

Provides information access (Google, Wikipedia).

Enables communication (email, social media).

Supports business & e-commerce (Daraz, Amazon).

Encourages education (online learning, school portals).

Connects communities through interactive websites & apps.

 

Web Development Life Cycle

The Web Development Life Cycle (WDLC) is a systematic process used to plan, design, develop, test, deploy, and maintain a website or web application in order to ensure quality, usability, and performance.

The first website went live on August 6, 1991.

 

Stages of Web Development Life Cycle (WDLC):

1. Planning and Requirement Analysis: This is the first stage of WDLC in which the purpose of the website is identified and user requirements are gathered. Planning helps in deciding the goals, features, resources, and timeline of the website.
2. Design: In this stage, the layout, structure, navigation, and user interface of the website are designed. Wireframes and page designs are prepared to show how the website will look.
3. Development: This stage involves writing the actual code for the website. Front-end and back-end technologies are used to develop the website and connect it with databases.
4. Testing: After development, the website is tested to identify and fix errors and bugs. It is checked for functionality, performance, security, and compatibility with different browsers and devices.
5. Deployment: In this stage, the website is uploaded to a web server and made live on the Internet so that users can access it.
6. Maintenance: This is the final stage where the website is regularly updated, bugs are fixed, security is improved, and performance is maintained.

 

 

 

 

DNS (Domain Name System)

 

DNS is the internet’s naming system that converts website names into IP addresses, helping browsers find and open websites.

DNS is important because it helps users access websites without needing to remember complex IP addresses.

It acts like the “phonebook of the Internet”.

Converts human-readable website names (like www.google.com) into IP addresses (like 142.250.182.78) that computers can understand.

Without DNS, users would have to type long IP numbers instead of easy names.

 

How DNS Works

User types a website name → e.g., www.neb.gov.np.

Computer sends a request to the DNS server.

DNS server finds and returns the website’s IP address.

Browser connects to the web server using that IP.

 

IP address

A unique number used to identify a device or website on the internet.

 

There are many types of Domain Name(Top Level Domain). Some of them are listed below:

.com → Commercial sites (e.g., amazon.com)

.net → Network-related services (e.g., speedtest.net)

.np → Country Code Top-Level Domain (ccTLD) for Nepal (e.g., tu.edu.np)

.edu → Educational institutions (e.g., harvard.edu)

.gov → Government websites (e.g., usa.gov, nepal.gov.np)

.org → Non-profit organizations (e.g., who.org, wikipedia.org)

 

DNS registration process (Steps in DNS Registration)

 

Choose the domain name

Select a unique, simple, and memorable name that represents your website.

Example: mybusiness.com or college.edu.np.

 

Check the availability

Use a domain checker tool provided by registrars to verify if the domain is free.

If it’s already taken, choose an alternative.

 

Choose a registrar

Select a trusted company (like Nest Nepal, Prabhu Host, Gurkha Host) to register your domain officially.

 

Buy and register the domain

Pay the required fee and complete registration.

Once registered, the domain is uniquely yours for the specified time (usually 1 year).

 

Renew registration

Renew before expiry to keep ownership.

If not renewed, the domain can be taken by someone else.

 

 

 

 

4.2 Concept of UI/UX: Concept of Wireframe, Wireframe Design

 

UI/UX refers to the design approach that focuses on user interaction and experience with a system.

UI focuses on how the product looks, while UX focuses on how the product works and feels. Together, they ensure a smooth, effective, and user-friendly experience.

 

User Interface (UI)

User Interface (UI) is the visual and interactive part of a system through which users interact with a website, application, or software.

UI focuses on how a product looks and feels visually — it's all about design and presentation.

E.g. In the Daraz or eSewa app, the home screen layout, colorful icons, and menu buttons are all part of the UI.

 

UI includes:

• Buttons, icons, menus
• Layout and screen design
• Colors, fonts, typography
• Forms, sliders, and navigation elements

 

Example:
A well-designed login page with clear buttons, readable text, and proper spacing.

 

Advantages of UI (User Interface) Design:

Makes the app or website look attractive and professional.

Helps users easily see and understand what to do.

Organizes buttons, icons, and content clearly.

Supports brand identity through colors, fonts, and layout.

 

User Experience (UX)

 

User Experience (UX) refers to the overall feeling and experience of a user while using a system.

UX focuses on how the product works and whether users can complete their tasks easily and happily.

E.g. If we can book a bus ticket in 2 clicks and feel confident while using the app, that’s good UX.

 

 

UX focuses on:

• Ease of use and usability
• User satisfaction
• Accessibility
• Efficiency and performance
• Logical navigation and flow

 

Example:
A website where users can find information quickly without unnecessary steps.

 

Advantages of UX (User Experience) Design:

Makes the app or website easy to use and navigate.

Helps users finish tasks quickly with less effort.

Increases satisfaction and builds user trust.

Saves time and money by fixing problems early.

 

 

Relationship Between UI and UX

• UI and UX work together to create effective digital products
• Good UI without good UX may look attractive but be difficult to use
• Good UX without good UI may work well but look unattractive

Best products have both good UI and good UX

 

Advantages of UI/UX Design (Exam Answer)

• Increases user engagement: Attractive and visually appealing designs keep users interested.
• Enhances user experience: Provides smooth navigation, faster interaction, and user satisfaction.
• Supports branding: Creates a unique, consistent look that strengthens brand identity.
• Improves usability: Makes websites and applications easy to understand and navigate.
• Saves time and cost: Proper UI/UX planning reduces errors, avoids redesign, and speeds up development.

 

Conclusion:
UI focuses on visual elements such as colors, buttons, and layouts, while UX ensures ease, efficiency, and enjoyment of using the website or application.

 

Software Used in UI/UX Design

Figma is a cloud-based UI/UX design tool that supports real-time collaboration, allowing multiple designers to work on the same project.
Adobe XD is used for designing layouts and interactive prototypes such as buttons, menus, and app interfaces.
Balsamiq is mainly used for wireframing and helps create simple, low-fidelity sketches during the early stage of design.

 

Front End (Client Side)

The front end is the part of a website or application that users directly see and interact with. It includes visual elements such as buttons, menus, text, images, and forms. Its main purpose is to provide a user-friendly and attractive interface. Common front-end technologies are HTML, CSS, and JavaScript. It runs on the user’s device and focuses on UI/UX.

Like the exterior of a house — windows, doors, paint, and design that visitors see.

 

Back End (Server Side)

The back end is the part of a website or application that works behind the scenes and is not visible to users. It handles data processing, business logic, database management, and security. When a user interacts with the front end, the back end processes the request and sends a response. Common back-end technologies include PHP, Python, Java, Node.js, and databases like MySQL and MongoDB.

Like the inner structure of a house — plumbing, wiring, foundation that supports everything but remains invisible.

 

i. Why is UI/UX important in web technologies?
UI/UX is important in web technologies because it ensures that websites and applications are visually attractive, easy to use, and provide a good user experience. Good UI/UX improves user satisfaction, increases engagement, reduces user errors, and helps users complete tasks efficiently.

 

Who will create the UI/UX design in web development?
UI/UX design in web development is created by UI/UX designers. In some cases, front-end developers may also design UI/UX, especially in small projects or teams.

 

In which stage of WDLC does UI/UX design come under?
UI/UX design comes under the Design stage of the Web Development Life Cycle (WDLC).

Concept of wireframe

A wireframe is a simple sketch or blueprint of a website or application. It shows the basic layout and position of elements like menus, buttons, and content without colors or detailed design. Wireframes are used in the early stage of UI/UX design to plan the structure of a page.

We can use different software such as Sketch, Figma, and Balsamiq to design wireframes.

 

Why is wireframe important in web development?
Wireframe is important in web development because it provides a clear layout and structure of a website before actual design and coding. It helps identify usability issues early, improves communication among team members, and saves time and development cost.

 

In which stage does wireframe come under?
Wireframe comes under the Design stage of the Web Development Life Cycle (WDLC) or Software Development Life Cycle (SDLC).

 

Who will create the wireframe in software development?
Wireframes are usually created by UI/UX designers. In small projects, they may also be created by web designers or front-end developers.

 

Concept of wireframe design

Wireframe design is the process of creating wireframes to plan the structure and layout of a website or application. It focuses on arranging elements such as menus, buttons, content areas, and navigation without using colors or detailed graphics. Wireframe design is done in the early stage of UI/UX design to improve usability, clarify user flow, and identify design issues before development starts.

 

Key Aspects of Wireframe

• Layout structure: Defines the basic structure and arrangement of page elements.
• Content placement: Shows where text, images, and media will appear.
• Navigation flow: Illustrates menus, links, and user movement between pages.
• Functionality outline: Represents buttons, forms, and interactive elements.
• Usability focus: Ensures the design is simple, clear, and user-friendly before development.

 

Benefits of Wireframe (Exam Answer)

• Provides clear structure: Shows the basic layout of a website or application.
• Improves usability: Helps identify user experience issues early.
• Saves time and cost: Reduces rework and redesign during development.
• Better communication: Helps designers, developers, and clients understand the design.
• Early problem detection: Allows changes before actual coding begins.

 

How do UI, UX, and Wireframe work together?
Wireframe builds the layout → UX designs the experience → UI makes it visually attractive and interactive.

 

What’s the difference between UI and UX in one sentence?
UI is what you see, UX is how it works and feels.

 

 

 

 

4.3 HTML

 

4.3.1 Introduction to HTML

 

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It uses tags and elements to define content such as text, images, links, tables, and forms. HTML forms the basic structure of a website and works with CSS for styling and JavaScript for adding interactivity.

 

DHTML (or Dynamic HTML) and XML (or Extensible mark-up language) are the other popular mark-up languages.

 

There are many specialized software packages like Dreamweaver, frontpage, coffee cup, etc., which are used to create web documents.

 

Tim Berners-Lee created HTML in 1990 at CERN, the European Particle Physics Laboratory in Geneva, Switzerland.

 

The World Wide Web Consortium (W3C) is the organization that controls the development of HTML.

Without HTML, the World Wide Web would not exist.

 

To create HTML documents, you can use a simple text editor like Notepad or use special software such as:

 

Sublime Text: It is a feature-rich text editor that is both versatile and fast.

Visual Studio Code: It is a popular software that provides different tools to create different software and websites.

Notepad++: Notepad++ is a popular text editor that can be used for creating HTML documents.

 

HTML is commonly used for:

Creating and designing the basic layout of a webpage

Creating and formatting the text content on web pages

Embedding the images, graphics, sounds, videos on the web

Adding tables, forms, and hyperlinks on the web.

 

4.3.2 HTML Tag

 

An HTML tag is a keyword written inside angle brackets < > that instructs the web browser how to display and structure content such as text, images, links, and tables on a web page.

HTML tags are not case sensitive which means fonts written within the tag can be both uppercase and lowercase.

 

HTML tags are of two types:

Container or Paired Tag

Empty or Unpaired Tag

 

Container or Paired Tag

A container tag is an HTML tag that has both an opening tag and a closing tag and encloses content between them. E.g. <body>, <h1> etc.

 

Empty or Unpaired Tag

An empty tag is an HTML tag that has only the opening tag, but no closing tag.  E.g. <br>, <img> etc.

HTML Attributes

HTML attributes are additional information provided within an HTML tag to define or modify the behavior and appearance of an element. They are written inside the opening tag and usually come in name–value pairs.

For example, we can specify the FONT (size, color, or face) by including the appropriate attribute with the HTML code.

 

4.3.3 Structure of HTML

The structure of an HTML document defines the basic framework of a web page. It consists of several essential tags arranged in a proper order to display content correctly in a web browser.

 

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

</head>

<body>

    Content of the web page

</body>

</html>

 

Explanation:

• <!DOCTYPE html> defines the document type as HTML5
• <html> is the root element of the HTML page
• <head> contains meta information and the title
• <title> sets the page title shown on the browser tab
• <body> contains the visible content of the webpage

 

Organizing Text in HTML document

 

Organizing text in an HTML document means arranging and formatting text content properly to make a web page clear, readable, and well-structured. HTML provides various tags to organize text effectively.

 

Comment Tag

The comment tag is used to add comments in an HTML document. Comments are not displayed in the browser and are used to explain code.

Syntax:
<!-- This is a comment -->

 

a. Why are comments important in coding?
Comments are important because they help explain the purpose and logic of code, making it easier to read, understand, debug, and maintain. They also improve collaboration and act as documentation for future reference.

 

b. Difference between single-line and multi-line comments:

• Single-line comments are used to explain code briefly on one line.
• Multi-line comments are used for longer explanations spanning multiple lines.

Example:

• Single-line: // This is a comment
• Multi-line: /* This is a multi-line comment */

 

 

<br> Tag

The <br> tag is used to insert a line break in the text without starting a new paragraph. It is an empty tag.

 

&nbsp;

&nbsp; stands for non-breaking space. It is used to create extra spaces between words that do not break into a new line.

 

Paragraph Tag (<p>)

The <p> tag is used to create paragraphs in an html document.. It automatically adds space before and after the paragraph.

 

ALIGN attributes with values “LEFT”, “CENTER” or “RIGHT” can be used to set the alignment of the paragraph. By default, the alignment of a paragraph is left.

 

4.3.4 Text Formatting Tag

 

Text formatting tags in HTML are used to change the appearance and style of text to make it more readable and meaningful. These tags help emphasize important content on a web page.

 

Common Text Formatting Tags:

• <b> – Makes text bold
• <i> – Makes text italic
• <u> – Underlines text
• <strong> – Displays important text (semantic bold)
• <em> – Emphasizes text (semantic italic)
• <sup> – Displays superscript text
• <sub> – Displays subscript text

Text formatting tags help present content clearly and make important information stand out in an HTML document.

 

E.g.

<b> This text is bold. </b>

<i> This text is italicized. </i>

<u> This text is underlined. </u>

A² B ²

H ₂ O

 

Heading Tags (<h1> … <h6>)

Heading tags are used to define headings in an HTML document.

• <h1> represents the largest and most important heading
• <h6> represents the smallest heading
  They help organize content and improve readability.

 

Horizontal Line (<hr>)

The <hr> tag is used to insert a horizontal line on a web page.
It is used to separate sections of content visually.

E.g. <HR ALIGN = “ LEFT “ WIDTH= “25” SIZE = “ 3 “ color = “ Blue “>

 

Font Tag (<font>)

The <font> tag is used to control the size, color, and face of text.

E.g. <FONT face = “Times New Roman” Size = “5” color = “Red”> Talent is not what

you have, talent is what you do. </FONT>

Marquee Tag (<marquee>)

The <marquee> tag is used to create scrolling text or images horizontally or vertically on a web page.

 

<marquee   behavior="scroll"   direction="down"   bgcolor="#CCFF00"   scrolldelay="1000"

  height="200px"   width="300px">  I am Marquee Running Text! </marquee>

 

1. Which tag is used to create a scrolling text or image in HTML?

a. <scroll>                b. <animate>             c. <marquee> ✅                d. <slide>

2. Which attribute in HTML is used to horizontally align text or images within an element?

Options:
a. Align ✅              b. Center                     c. Horizontal-align                  d. Text-align

 

Make a marquee to display the future of learning, mySecondTeacher.

<marquee behavior="scroll" direction="left">  The Future of Learning, mySecondTeacher </marquee>

 

4.4.5 Anchor, List, Table, Image Tags and Their Properties

 

1. Anchor Tag (<a>)

The anchor tag is used to create hyperlinks that connect one web page to another.

 

Syntax:
<a href="url">Link Text</a>

 

Properties (Attributes):

• href – Specifies the link address
• target – Specifies where to open the link (_blank, _self)

 

Hyperlinks can be of two types:

 

Internal Hyperlink – Links to a page or section within the same website.

Example:

<a name="top"></a>

<p>This is some content.</p>

<a href="#top">Go to Top</a>

 

External Hyperlink – Links to a page on a different website.

<a href="https://www.google.com">Visit Google</a>

 

Email Link - Used to send an email.

<a href="mailto:example@gmail.com">Send Email</a>

 

2. HTML Lists  

A list in HTML is used to display a group of related items in an organized way. Lists help make content clear, structured, and easy to read on a webpage.

 

Types of Lists in HTML:

1. Ordered List (<ol>) – Displays items in numbers or letters.
2. Unordered List (<ul>) – Displays items with bullets.
3. Definition List (<dl>) – Displays terms with their descriptions.

 

Lists are created using list tags along with the <li> (list item) tag.

 

Example:

 

 

 

<ol>

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ol>

 

<ul>

  <li>Apple</li>

  <li>Banana</li>

  <li>Mango</li>

</ul>

 

<dl>

  <dt>HTML</dt>

  <dd>Used to create web pages</dd>

 

  <dt>CSS</dt>

  <dd>Used to design web pages</dd>

</dl>

 

<ul type="square / circle / disc (default)">

  <li>Apple</li>

  <li>Mango</li>

</ul>

 

<ol type="A / a / I / I / 1(default ) start = 5">

  <li>HTML</li>

  <li>CSS</li>

</ol>

 

3. Image Tag (<img>)

The <img> tag is used to insert images on a web page. It is an empty tag.

 

Syntax:
<img src="image.jpg">

 

<IMG SRC = “ images/myImage.jpg “ HEIGHT = 120 WIDTH = 200 BORDER = 5 ALT = “ Computer Education”>

 

4. Table Tags

Table tags are used to display data in rows and columns.

 

Common Table Tags:

• <table> – Creates a table
• <tr> – Table row
• <th> – Table heading
• <td> – Table data

 

Properties:

• border – Adds border to table
• cellpadding – Space inside cells
• cellspacing – Space between cells
• width and height - Sets table size.
• colspan and rowspan – merge columns and rows

 

The <caption> tag is used to give a title or heading to an HTML table.
It appears at the top of the table by default.

The <caption> tag is written immediately after the <table> tag.

 

4.3.6 Form and Div tag

 

Form Tag (<form>)

An HTML form is used to collect user input such as name, password, email, and send it to a server for processing.

It contains form elements such as text fields, password fields, radio buttons, checkboxes, and submit buttons.

 

<form> Tag - The <form> tag is used to create a form.

 

Syntax:
<form action="url" method="post/get">

 

Common Properties (Attributes):

• action – Specifies where the form data is sent
• method – Specifies how data is sent (GET or POST)
• name / id – Identifies the form

 

<input> Tag - Used to take user input.

<input type="text" name="username">

 

Type	Use
text	Name
password	Password
email	Email
number	Numbers
radio	Select one option
checkbox	Select multiple
submit	Submit form
reset	Clear form
file	Upload file
date	Date
hidden	Hidden data

 

<label> Tag - Used to give a label to input.

<label>Name:</label>

<input type="text">

 

<textarea> Tag - Used for multi-line text.

<textarea rows="4" cols="30"></textarea>

 

<select> Tag (Dropdown)

Used to create a drop-down list.

<select>

  <option>India</option>

  <option>Nepal</option>

</select>

 

<option> Tag

Defines items inside <select>.

 

<button> Tag

Used to create a button.

<button>Submit</button>

 

<!DOCTYPE html>

<html>

<head>

  <title>Complete HTML Form</title>

</head>

<body>

<h2>Student Registration Form</h2>

<form action="submit.html" method="post">

  <label>Name:</label>

  <input type="text" name="name"><br><br>

  <label>Email:</label>

  <input type="email" name="email"><br><br>

  <label>Password:</label>

  <input type="password" name="password"><br><br>

  <label>Age:</label>

  <input type="number" name="age"><br><br>

  <label>Date of Birth:</label>

  <input type="date" name="dob"><br><br>

  <label>Gender:</label>

  <input type="radio" name="gender"> Male

  <input type="radio" name="gender"> Female<br><br>

  <label>Hobbies:</label>

  <input type="checkbox"> Reading

  <input type="checkbox"> Sports

  <input type="checkbox"> Music<br><br>

  <label>Upload Photo:</label>

  <input type="file"><br><br>

  <label>Favorite Color:</label>

  <input type="color"><br><br>

  <label>Skill Level:</label>

  <input type="range"><br><br>

  <label>Country:</label>

  <select>

    <option>India</option>

    <option>Nepal</option>

    <option>USA</option>

  </select><br><br>

 

  <label>Address:</label><br>

  <textarea rows="4" cols="30"></textarea><br><br>

  <input type="hidden" value="form123">

  <input type="submit" value="Submit">

  <input type="reset" value="Reset">

  <input type="button" value="Click Me">

</form>

</body>

</html>

 

Div Tag (<div>)

The <div> (Division) tag in HTML is a block-level container used to group multiple HTML elements together. It is mainly used for layout design, styling with CSS, and organizing content on a webpage.

 

Advantages of using DIV tag

a. Grouping Content
b. Layout and Structure
c. Responsive Design
d. Styling with CSS
e. JavaScript Interaction

a. Why is <div> needed while writing HTML code?

The <div> tag is needed in HTML to group and organize content into sections. It helps in creating proper layout and structure of a webpage. Using <div> makes it easier to apply CSS styling, create responsive designs, and add JavaScript interactions. It improves code readability, reusability, and maintenance.

 

b. Write an HTML code using the <div> tag to print:

“The height of Sagarmatha is 8848 m.”

 

<!DOCTYPE html>

<html>

<head>

  <title>Div Example</title>

</head>

<body>

 

<div>

  The height of Sagarmatha is 8848 m.

</div>

 

</body>

</html>

 

 

 

 

 

 

 

 

 

 

4.4 CSS

 

DHTML (Dynamic HyperText Markup Language)

DHTML is a technology that uses HTML, CSS, JavaScript, and DOM to create dynamic and interactive web pages.

Example : Changing text or color on a button click using JavaScript and CSS is an example of DHTML.

 

What is CSS?

Cascading Style Sheet (CSS) is a style sheet language used to design and format HTML webpages. It controls the layout, colors, fonts, spacing, and overall appearance of web pages, allowing content and design to be separated.

 

Why is CSS important in web development?

CSS is important in web development because it controls the design and layout of web pages. It separates content from presentation, making websites more attractive, consistent, and easier to maintain. CSS also helps in creating responsive designs that work on different screen sizes.

 

Advantages of CSS

• Improves the appearance of web pages
• Separates content from design
• Makes websites responsive
• Reduces code repetition
• Easy to maintain and update
• Faster page loading
• Ensures consistent design across pages

 

Explain the types of CSS.

There are three types of Cascading Style Sheets (CSS) used to apply styles to HTML elements:

 

1. Inline CSS - Inline CSS is applied directly inside an HTML tag using the style attribute. It affects only one element.

Example: <p style="color:red;">This is Inline CSS</p>

Use: Quick styling of a single element.

 

2. Internal CSS - Internal CSS is written inside the <style> tag within the <head> section of an HTML document. It applies styles to one complete webpage.

Example:

<head>

  <style>

    p { color: blue; }

  </style>

</head>

Use: Styling a single webpage.

 

3. External CSS - External CSS is written in a separate .css file and linked to HTML using the <link> tag.
It can style multiple webpages at once.

Example:

<link rel="stylesheet" href="style.css">

Use: Large websites and professional development.

 

External CSS is the most efficient type as it ensures consistency, reusability, and easy maintenance.

 

What are CSS selectors? Why are they important?

CSS selectors are patterns used to select HTML elements that need to be styled. They tell the browser which elements the CSS rules should apply to.

CSS selectors are important because they:

• Control which elements get styled
• Make styling efficient and organized
• Reduce repetition in CSS code
• Improve website maintenance

 

Types of CSS Selectors

1. Element (Tag) Selector - Selects HTML elements by tag name.

Example:

p {

  color: blue;

}

Styles all <p> elements.

 

2. ID Selector - Selects a single element using its unique id.
Uses # symbol.

Example:

#header {

  background-color: yellow;

}

 

3. Class Selector - Selects multiple elements with the same class name.
Uses . symbol.

Example:

.box {

  border: 1px solid black;

}

 

4. Universal Selector - Selects all elements on a webpage.

Example:

* {

  margin: 0;

}

 

5. Group Selector - Applies the same style to multiple elements.

Example:

h1, h2, p {

  color: green;

}

 

CSS selectors are essential tools used to target and style HTML elements effectively, making web design structured and flexible.

 

 

 

 

 

 

 

4.5.1. Properties of CSS

CSS properties are used to control the appearance and layout of HTML elements. Each CSS rule consists of a property and a value, which together define how an element should be displayed.

Syntax

selector {

  property: value;

}

 

1. Text Properties

Used to style text.

• color – sets text color
• text-align – aligns text (left, right, center, justify)
• text-decoration – underline, overline, line-through
• text-transform – uppercase, lowercase

Example:

p {

  color: blue;

  text-align: center;

}

 

2. Font Properties

Used to change font appearance.

• font-family
• font-size
• font-style
• font-weight

Example:

h1 {

  font-size: 30px;

  font-weight: bold;

}

 

3. Background Properties

Used to control background.

• background-color
• background-image
• background-repeat
• background-position

Example:

body {

  background-color: lightgray;

}

4. Border Properties

Used to style borders.

• border
• border-color
• border-style
• border-width

Example:

div {

  border: 2px solid black;

}

5. Margin Properties

Used to set space outside elements.

• margin
• margin-top, margin-right, margin-bottom, margin-left

 

6. Padding Properties

Used to set space inside elements.

• padding
• padding-top, padding-right, padding-bottom, padding-left

 

7. Display & Layout Properties

Used for layout control.

• display
• position
• float
• clear

 

CSS properties control the visual presentation of HTML elements by defining colors, fonts, spacing, layout, and borders.

 

CSS Box Model

The CSS Box Model describes how every HTML element is represented as a rectangular box on a web page. It explains the space an element occupies and how the spacing around it is calculated.

 

Components of CSS Box Model

1. Content
   The actual text, image, or data inside the element.
2. Padding
   The space between the content and the border.
3. Border
   The line that surrounds the padding and content.
4. Margin
   The space outside the border, separating the element from other elements.

div {

  width: 200px;

  padding: 10px;

  border: 2px solid black;

  margin: 15px;

}

 

Important Points

• Every HTML element follows the box model
• Margin is outside the border
• Padding increases space inside the element
• Border separates padding and margin

 

The CSS Box Model defines the layout and spacing of HTML elements using content, padding, border, and margin.

 

 

 

 

CSS Measurement Units

CSS measurement units are used to define the size, spacing, and position of elements such as width, height, margin, padding, font-size, and border.

 

Types of CSS Measurement Units

CSS units are mainly divided into two types:

 

1. Absolute Units

Absolute units have a fixed size and do not change with screen size.

• px – pixels (most commonly used)
• cm – centimeters
• mm – millimeters
• in – inches
• pt – points
• pc – picas

 

Example:

p {

  font-size: 16px;

}

 

2. Relative Units

Relative units change according to screen size or parent element and are used for responsive design.

• % – percentage
• em – relative to parent font size
• rem – relative to root font size
• vw – viewport width
• vh – viewport height

 

Example:

div {

  width: 50%;

}

 

 

Absolute Units	Relative Units
Fixed size	Flexible size
Not responsive	Responsive
Example: px	Example: %, em

 

 

CSS measurement units define the size and spacing of elements and are classified into absolute and relative units.

 

 

1. [U] Web technology refers to: a) Tools/languages/protocols for websites ✔ b) Computer hardware c) Printer drivers d) Offline apps
2. [U] Web technology enables communication between: a) Client and server ✔ b) Keyboard and mouse c) CPU and RAM d) Monitor and speaker
3. [U] WWW stands for: a) World Wide Web ✔ b) World Web Wide c) Web Wide World d) Wide World Web
4. [U] Which is NOT a web technology example? a) HTML b) CSS c) JavaScript d) MS Paint ✔
5. [U] A website is accessed using: a) Browser ✔ b) Compiler c) Scanner d) BIOS

6.     [U] WDLC stands for: a) Web Development Life Cycle ✔ b) Web Data Life Cycle c) Web Design Logic Cycle d) Wide Device Link Cycle

7. [U] First stage of WDLC is: a) Planning & Requirement Analysis ✔ b) Testing c) Deployment d) Maintenance
8. [U] Checking bugs and errors happens in: a) Testing ✔ b) Design c) Planning d) Maintenance
9. [A] Correct WDLC order is: a) Plan→Design→Develop→Test→Deploy→Maintain ✔ b) Design→Plan→Test→Deploy→Develop→Maintain c) Develop→Design→Plan→Test→Deploy→Maintain d) Plan→Develop→Design→Test→Maintain→Deploy
10. [U] Wireframe is mainly used in: a) Early design planning ✔ b) Final maintenance c) Deployment only d) Domain registration

11.  [U] DNS stands for: a) Domain Name System ✔ b) Data Network System c) Digital Name Service d) Domain Network Service

12.  [U] DNS converts: a) Domain name to IP address ✔ b) IP to CSS c) HTML to JS d) URL to email

13. [U] DNS is like the internet’s: a) Phonebook ✔ b) Printer c) CPU d) Antivirus
14. [U] IP address is: a) Unique number identifying device/site ✔ b) Website color c) HTML tag d) Browser theme
15. [U] Example of domain name: a) www.google.com ✔ b) 142.250.182.78 c) 255.255.0.0 d) 10.0.0.1
16. [U] Example of IP address: a) 142.250.182.78 ✔ b) neb.gov.np c) google.com d) www.youtube.com
17. [A] Correct DNS working sequence: a) Name→DNS→IP→Browser connects ✔ b) IP→DNS→Name→Connect c) CSS→DNS→IP→Connect d) HTML→IP→DNS→Connect
18. [U] .com is used for: a) Commercial ✔ b) Nepal c) Government d) Education
19. [U] .edu is used for: a) Education ✔ b) Network c) Organization d) Commercial
20. [U] .gov is used for: a) Government ✔ b) Games c) General d) Graphics

21.  [U] UI means: a) User Interface ✔ b) User Internet c) Universal Interface d) User Input only

22. [U] UX means: a) User Experience ✔ b) User Extension c) Unified Experience d) User Exit
23. [U] UI focuses on: a) Look/design ✔ b) Server logic c) Database queries d) DNS conversion
24. [U] UX focuses on: a) Usability/experience ✔ b) Font tag only c) Domain names d) IP rules
25. [U] UI includes: a) Buttons/icons/menus ✔ b) Database tables c) IP address d) Registrar list
26. [U] UX includes: a) Ease of use + satisfaction ✔ b) Monitor size c) RAM speed d) Printer settings
27. [U] UI/UX together ensure: a) Smooth user-friendly system ✔ b) Only fast DNS c) Only strong password d) Only bigger fonts
28. [U] Wireframe is: a) Page blueprint/sketch ✔ b) Final colored design c) Database model d) Hosting plan
29. [U] Wireframe shows: a) Layout & placement ✔ b) Final animations c) Server code d) Domain prices
30. [U] Figma is used for: a) UI/UX design ✔ b) Domain purchase c) IP allocation d) Virus scan

31.  [U] HTML stands for: a) HyperText Markup Language ✔ b) Hyper Transfer Machine Language c) High Text Mark Language d) Hyper Tool Markup Language

32. [U] HTML is a: a) Markup language ✔ b) Database c) Protocol d) Antivirus
33. [U] HTML tags are: a) Not case sensitive ✔ b) Always uppercase c) Always lowercase d) Numbers only
34. [U] HTML tag is written inside: a) < > ✔ b) ( ) c) { } d) [ ]
35. [U] Container tag has: a) Opening and closing ✔ b) Only opening c) Only closing d) No brackets
36. [U] Empty tag has: a) Only opening tag ✔ b) Both open/close c) Only closing d) No tag
37. [U] Example of empty tag: a) <br> ✔ b) <body> c) <p> d) <html>
38. [U] Example of container tag: a) <p> ✔ b) <img> c) <br> d) <hr>
39. [U] Visible content is inside: a) <body> ✔ b) <head> c) <title> d) <!DOCTYPE>
40. [U] Page title shown in tab is in: a) <title> ✔ b) <body> c) <p> d) <hr>
41. [U] Comment in HTML uses: a) <!-- --> ✔ b) // c) /* */ d) # #
42. [U] Comments are used to: a) Explain code ✔ b) Display output c) Change IP d) Register domain
43. [U] <br> is used for: a) Line break ✔ b) Paragraph c) Image d) Table
44. [U] &nbsp; stands for: a) Non-breaking space ✔ b) New paragraph c) New table d) Bold text
45. [U] <p> tag creates: a) Paragraph ✔ b) List c) Image d) DNS
46. [U] Heading tags range from: a) <h1> to <h6> ✔ b) <h0> to <h9> c) <head1> to <head6> d) <hA> to <hF>
47. [U] Largest heading is: a) <h1> ✔ b) <h6> c) <h3> d) <hr>
48. [U] Smallest heading is: a) <h6> ✔ b) <h1> c) <h2> d) <br>
49. [U] <hr> is used for: a) Horizontal line ✔ b) Link c) Table row d) Form
50. [U] Tag used for bold text: a) <b> ✔ b) <i> c) <u> d) <sub>

51.  [U] Superscript tag is: a) <sup> ✔ b) <sub> c) <u> d) <font>

52. [U] Subscript tag is: a) <sub> ✔ b) <sup> c) <hr> d) <b>
53. [U] <font> tag controls: a) Face/size/color ✔ b) DNS/IP c) WDLC stages d) Database tables
54. [U] <marquee> is used for: a) Scrolling text/image ✔ b) Database c) Link only d) Table
55. [U] <img> is an: a) Empty tag ✔ b) Container tag c) Paired tag d) Comment tag

56.  [U] Anchor tag is: a) <a> ✔ b) <img> c) <ol> d) <hr>

57. [U] Attribute that specifies link address: a) href ✔ b) src c) alt d) face
58. [U] External hyperlink means: a) Link to different website ✔ b) Same page jump c) Email only d) Image link
59. [U] Internal hyperlink means: a) Link within same page/site ✔ b) Link to Google c) Link to email d) Link to DNS
60. [A] Correct external link to Google: a) <a href="https://www.google.com">Visit Google</a> ✔ b) <a src="google.com">Google</a> c) <a url="google.com">Google</a> d) <a link="google">Google</a>

61.  [U] Ordered list tag is: a) <ol> ✔ b) <ul> c) <dl> d) <li>

62. [U] Unordered list tag is: a) <ul> ✔ b) <ol> c) <dl> d) <th>
63. [U] List item tag is: a) <li> ✔ b) <dt> c) <dd> d) <hr>
64. [U] Default bullet type of <ul> is: a) disc ✔ b) square c) circle d) dash
65. [A] <ul type="square"> shows bullets as: a) Square ✔ b) Circle c) Disc d) Numbers

66.  [U] Image tag is: a) <img> ✔ b) <image> c) <pic> d) <src>

67. [U] <img> requires which attribute? a) src ✔ b) href c) action d) method
68. [U] alt attribute is used for: a) Alternate text ✔ b) Border only c) Align only d) Link only
69. [U] <img> is an empty tag because: a) No closing tag ✔ b) Must be inside <p> c) Uses <dd> d) Needs <hr>
70. [U] <img> is used to: a) Insert image ✔ b) Create hyperlink c) Create table d) Create list

71.  [U] Table tag is: a) <table> ✔ b) <tab> c) <tr> d) <td>

72. [U] Heading cell tag is: a) <th> ✔ b) <td> c) <tr> d) <caption>
73. [U] Table title tag is: a) <caption> ✔ b) <title> c) <head> d) <p>
74. [U] cellpadding means: a) Space inside cell ✔ b) Space between cells c) Table width d) Table title
75. [U] cellspacing means: a) Space between cells ✔ b) Space inside cell c) Border size d) Font size
76. [U] colspan is used to: a) Merge columns ✔ b) Merge rows c) Add border d) Add caption
77. [U] rowspan is used to: a) Merge rows ✔ b) Merge columns c) Add padding d) Add width
78. [U] Table headings should be written using: a) <th> ✔ b) <td> c) <p> d) <li>
79. [U] Table rows are created using: a) <tr> ✔ b) <hr> c) <br> d) <dl>
80. [U] In tables, <td> means: a) Table data ✔ b) Table design c) Table domain d) Text decoration

81.  [U] Form tag is used to: a) Collect user input ✔ b) Create list c) Insert image d) Create DNS

82.  [U] action attribute specifies: a) Where data is sent ✔ b) Text color c) Font style d) DNS server

83. [U] method attribute specifies: a) How data is sent ✔ b) Image size c) Table rows d) Domain type
84. [U] GET method usually: a) Shows data in URL ✔ b) Hides data always c) Encrypts data always d) Stores in DNS
85. [U] POST method usually: a) Sends data securely (not in URL) ✔ b) Always shows in URL c) Deletes data d) Creates domain

86.  [U] <div> is a: a) Block-level container ✔ b) Inline-only tag c) Empty tag d) Comment tag

87. [U] <div> is used for: a) Grouping/layout ✔ b) DNS conversion c) Domain registration d) Making lists only

88.  [U] DHTML stands for: a) Dynamic HTML ✔ b) Digital HTML c) Direct HTML d) Data HTML

89. [U] CSS stands for: a) Cascading Style Sheets ✔ b) Creative Style System c) Computer Style Sheet d) Color Styling Source
90. [U] CSS is used for: a) Styling web pages ✔ b) Converting IP c) Buying domain d) Making WDLC
91. [U] CSS is important because it: a) Separates content and design ✔ b) Replaces DNS c) Creates IP d) Deletes HTML
92. [U] Types of CSS are: a) Inline/Internal/External ✔ b) DNS/IP/URL c) UI/UX/Wireframe d) Table/List/Form
93. [U] Inline CSS is written: a) Inside tag using style ✔ b) In external file c) In DNS d) In database
94. [U] Internal CSS is written: a) Inside <style> in <head> ✔ b) Inside <body> only c) In external file d) In URL
95. [U] External CSS is written: a) Separate .css file ✔ b) Inside <p> c) In DNS d) In <title>
96. [A] External CSS is linked using: a) <link rel="stylesheet" href="style.css"> ✔ b) <style href="style.css"> c) <css link="style.css"> d) <script src="style.css">
97. [U] CSS selector is used to: a) Select elements to style ✔ b) Register domain c) Create IP d) Create WDLC
98. [U] Element selector example is: a) p { } ✔ b) #p { } c) .p { } d) *p { }
99. [U] ID selector uses: a) # ✔ b) . c) * d) @
100. [U] Class selector uses: a) . ✔ b) # c) * d) &

 

·       Define Web Technology. Explain its importance with suitable examples.

·       Define WDLC (Web Development Life Cycle). Explain all stages with suitable examples for each stage.

·       Define DNS (Domain Name System). Explain how DNS works step-by-step with an example domain.

·       Define UI (User Interface) and UX (User Experience) with examples. Explain their relationship and why both are needed.

·       Explain the advantages of UI/UX design in web technologies (engagement, usability, branding, cost/time).

·       Define wireframe. Explain key aspects and benefits of wireframe in web development.

·       Define HTML. Explain the structure of an HTML document with proper code skeleton.

·       Explain HTML tags and types of tags (container tags and empty tags) with suitable examples.

·       Differentiate GET and POST methods.

·       Define CSS. Explain why CSS is important and list advantages.

·       Explain types of CSS (inline, internal, external) with examples and comparison.

·       Explain CSS selectors (element, id, class, universal, group, descendant) with suitable examples.

 

A) Text, Formatting, Special Characters

1. Display a text using <h1> (example: “Web Technology”).
2. Show one blank space using &nbsp;.
3. Use non-breaking spaces between two words in a paragraph.
4. Write HTML comment and show one line break in text.
5. Write HTML using comment + <br> + &nbsp; in one example.
6. Show superscript (example: A²B²) using <sup>.
7. Show subscript (example: H₂O) using <sub>.
8. Create a line break between two words using <br>.
9. Create a centered heading and a paragraph.
10. Create a paragraph aligned center using the align attribute.
11. Create a paragraph aligned right using HTML.
12. Create a centered paragraph using CSS (not align attribute).
13. Create a paragraph with justified alignment using CSS.
14. Show 3 headings: <h1>, <h4>, <h6>.
15. Insert a horizontal line <hr> with given width and size.
16. Insert a horizontal line <hr> with color and size.
17. Insert a horizontal line aligned left with given width and size.
18. Use <font> tag with given face, size, color to display a sentence.

---

B) Links

19. Create an external link to a URL.
20. Create an external link that opens in a new tab (target="_blank").
21. Create an email link using mailto:.
22. Create an internal link to jump to a section using id (example ids: top, home, about, contact).

---

C) Images

23. Insert an image with src, width, height, and alt.
24. Insert an image with a border attribute.
25. Insert an image with src + width + height + border + alt (all together).

---

D) Lists

26. Create an ordered list using type="A" (capital letters).
27. Create an ordered list using type="a" (small letters).
28. Create an ordered list using Roman numbers (type="I" or type="i").
29. Create an ordered list with a start value (start from 3/5/10 etc.).
30. Create an unordered list with disc bullets (default).
31. Create an unordered list with circle bullets.
32. Create an unordered list with square bullets.
33. Create a definition list (<dl>) for two terms (HTML/CSS, DNS/IP, UI/UX, WDLC/DNS, WordPress/MySQL, DNS/Domain etc.).

---

E) Marquee

34. Create a marquee that scrolls in a given direction (left/right/up/down).
35. Create a marquee with behavior="alternate".
36. Create a marquee with extra attributes: bgcolor, height, width.
37. Create a marquee using scrolldelay.
38. Create a marquee that scrolls right with bgcolor + height + width (common combo).
39. Create a marquee that scrolls down with bgcolor + scrolldelay (common combo).

---

F) Tables

40. Create a basic table (example: 2×2).
41. Create a table with 1 row and 3 columns.
42. Create a table with border=1 and one row of data (2 columns).
43. Create a table with border=1 and one row having 3 headings.
44. Create a table row using <tr> and two headings using <th>.
45. Create a table with caption + headings + rows (Student List/Record, Book List, Employee Record, Country List).
46. Create a marksheet table using caption, border, cellpadding and use both rowspan and colspan.
47. Create a marksheet table using caption, border, cellpadding, cellspacing and use rowspan and colspan.
48. Create a timetable table using colspan (caption required).

---

G) CSS (Inline, Internal, External, Selectors)

49. Write inline CSS to make text blue and center aligned.
50. Write internal CSS to make all paragraphs blue.
51. Write internal CSS to make all h1 red.
52. Write internal CSS to make all h2 purple.
53. Write internal CSS to style a specific id (example: #title text-align center).
54. Write a CSS ID selector to add border: 2px solid black (example: #box).
55. Write internal CSS for an id to set margin 20px (example: #main).
56. Write a CSS class selector to set text color (example: .note { color: green; }).
57. Write a CSS class selector .box to set background-color yellow.
58. Write internal CSS for a class to set padding 15px (example: .box { padding: 15px; }).
59. Write CSS to set padding 10px for all paragraphs.
60. Write CSS to set font-size 20px for a class (example: .big).
61. Write CSS to set width 50% for a div (relative unit).
62. Write CSS group selector to style multiple tags together (example: h1, p).
63. Write CSS descendant selector to style p inside div.
64. Write CSS universal selector * to set margin 0.
65. Write syntax to link an external CSS file (style.css / main.css / design.css etc.).
66. Create internal CSS using selectors: element selector (h2), class selector (.note), id selector (#main) in one page.

---

H) Forms

67. Create a simple form with 2 textboxes and Submit + Reset.
68. Create a complete registration form using: text, email, password, radio, checkbox, select, textarea, file, submit, reset.
69. Create a form with: Name, Email, Password, Gender (radio), Hobbies (checkbox), Address (textarea), Submit/Reset.
70. Create a form with: Name, Email, Gender, Country dropdown, Submit/Reset.
71. Create a form with: Name (text), Age (number), Email, Password, Submit.
72. Create a form with: Name, DOB (date), Upload Photo (file), Country (select), Address (textarea), Submit/Reset.
73. Create a form variation with only Submit button (no reset).

---

I) Webpage Layout and Combined Page

74. Create a webpage using <div> sections: Header, Content, Footer with internal CSS.
75. Create a webpage using <div> and internal CSS for responsive style using % width.
76. Create a webpage with heading + paragraph + image + link (all in one page).
77. Create a complete page containing: marquee + list + table + link (all in one page).
78. Create a webpage showing headings <h1> to <h3> and one paragraph.
79. Create internal CSS to style: body background, h1 center, p color.
80. Create a webpage using <div> and box model style (margin, padding, border).
81. Create a webpage using internal CSS selectors (element + class + group).

---

J) DHTML / JavaScript

82. Create a DHTML example: clicking a button changes a div’s background color using onclick and getElementById().