IMP

A1 1, 2, 3, 4, 5
A2 2, 4(first half), 5, 6, 7(define CPU register),9
A3 2, 3, 4, 5, 6, 7
A4 1, 2, 4, 7, 10, 11, 13
A5 1, 4, 8, 9

Assignment 1
12345
Programming Paradigms
10 October 2023
18:47

Q1] what is programming? list different programming languages and

their use
Programming is a process of giving a set of instructions to tell a computer how to perform a given
task.

Python:
- used in web development, data analysis, machine learning, artificial intelligence,
scientific computing, and automation.

C++:
- combines low-level and high-level features.
- Used in systems programming, game development, embedded systems, and
performance-critical applications.

Java:
- portable and platform independent (write once, run anywhere).
- Used in enterprise-level applications, Android app development, and web services.

JavaScript:
- scripting language used mainly for web development.
- Enables client-side scripting for web browsers and server-side scripting with Node.js.
- Used to create interactive and dynamic web applications.

C# (C-sharp):
- Developed by Microsoft
- used in game development with Unity, Windows desktop applications, and web
development with ASP.NET.

Ruby:
- Known for its elegant syntax and productivity.
- Commonly used in web development with the Ruby on Rails framework.
Go (Golang):
- Created by Google
- Used for building scalable and high-performance systems, web services, and cloud-
based applications.

SQL (Structured Query Language):

- A domain-specific language for managing and querying relational databases.
- Used in database management and data analysis.

PHP:
- Mainly used for server-side scripting in web development.
- used with databases to create dynamic websites.

R:
- Specialized for statistical analysis, data visualization, and data science.

Q2] Explain HCL in detail

Human-computer interaction (HCI) is defined as the field of study that focuses on optimizing
how users and computers interact by designing interactive computer interfaces that satisfy
users’ needs

It is a multidisciplinary subject covering computer science, behavioral sciences,

cognitive science, ergonomics, psychology, and design principles.

1. Goals of HCI: {U P US}

Usability:
 HCI aims to create systems and interfaces that are
 easy for users to learn,
 efficient to use,
 provide a satisfying user experience.
Productivity:
 Effective HCI design can enhance user productivity by
 minimizing errors,
 reducing the time required to complete tasks,
User Satisfaction:
 HCI seeks to create systems that users find
 enjoyable, intuitive,
 and aesthetically pleasing,
 leading to increased user satisfaction

2. Principles of Human-Computer Interaction

{C F F EPR}
The principles of HCI focus on enhancing usability, accessibility, and user
satisfaction. Key principles include:

1. Consistency: Maintaining a consistent design across an interface ensures users can easily
understand and use the system.
 2. Feedback: Providing timely and informative feedback helps users understand the
consequences of their actions and reinforces learning.

3. Flexibility: Designing interfaces adapted to user needs, preferences, and abilities increases
usability.

4. Error Prevention and Recovery: Minimizing the chances of user errors and providing
straightforward ways to recover from them are essential for a positive user experience.

3.Techniques in Human-Computer Interaction

{G V G H B}
Graphical User Interfaces (GUIs)
GUIs enable users to interact with computers through visual elements like windows, icons,
and menus. They are the most common interface type and have greatly improved usability
and accessibility.

Voice User Interfaces (VUIs)

VUIs allow users to interact with computers through speech, enabling hands-free and eyes-
free interactions. Voice assistants like Amazon Alexa and Apple's Siri are famous examples of
VUIs.

Gesture-Based Interfaces
Gesture-based interfaces detect and interpret user gestures, such as swipes, pinches, and
taps, as input. These interfaces are standard in touchscreens and motion-sensing devices like
the Microsoft Kinect.

Haptic Interfaces
Haptic interfaces provide tactile feedback to users, simulating the sense of touch. They are
used in virtual reality systems, gaming controllers, and assistive technologies.

Brain-Computer Interfaces (BCIs)

BCIs enable direct communication between the brain and a computer, typically using
electroencephalography (EEG) to measure brain activity. BCIs are used in research and
assistive technologies, such as controlling prosthetic limbs.
Q3] Explain the difference between algorithm, pseudo code and
coding with one example
Algorithm Pseudocode Coding

An algorithm is a step-by- Pseudocode is an intermediate Coding refers to the process of

step, and high-level step between an algorithm and writing actual computer code
description of how a actual code using a specific prog. language,
specific task or problem is with proper syntax and rules.
performed

It is written in plain Solution that is more structured Code is a detailed, precise, and
language and focuses on and closer to code but still avoids executable representation of an
the logic and flow of the using specific prog. language algorithm or solution.
solution syntax.

Algorithms are language- Pseudocode helps developers It involves translating the logic
agnostic and can be plan and understand the logic of and instructions from an
implemented in various their code before writing it in a algorithm or pseudocode into the
programming particular prog. language.
chosen programming language.
languages.

In this algorithm, we have a The pseudocode is more The code is written in Python, a
clear step-by-step plan for structured than the algorithm specific programming language,
adding two numbers. It's and uses some programming-like and follows Python's syntax
written in
constructs (e.g., <- for and conventions. It takes user
plain language and doesn't assignment), but it is still not tied input, performs the addition, and
include specific to a specific programming displays the result.
programming syntax.
language's syntax.

Example: Finding the Sum of Two Numbers Algorithm:

Algorithm: AddTwoNumbers
Input: Two numbers, num1 and num2
Output: The sum of num1 and num2
1. Start
2. Read num1
3. Read num2
4. Calculate sum = num1 + num2
5. Display sum
6. Stop

Pseudocode: AddTwoNumbers
Input: Two numbers, num1 and num2
Output: The sum of num1 and num2
BEGIN
Read num1
Read num2
sum <- num1 + num2
Display sum
END

# Python code to add two numbers

x = input("type a number: ")
y = input("type another number: ")
sum = int(x) + int(y)
print("the sum is: ", sum)

Q4] Explain syntax and semantics with one example

{STC KVOP}
Syntax:
Syntax refers to the structure, rules, and conventions governing the arrangement of
symbols, tokens, and characters in a programming language.
It deals with the correct
placement of elements such as keywords, variables, operators, and punctuation marks.
Semantics:
concerns the meaning or interpretation of code.
It defines how the program's statements and expressions
should behave and interact with each other
Semantics determine the logic and functionality of the code,
ensuring that it performs the intended operations and produces the desired results.

Syntax errors are easy to catch.

Semantics errors are difficult to catch
Example:
intnum1 = 5;
intnum2 = 3;
intsum = num1 + num2;
This code adheres to C++ syntax rules, using proper syntax elements such as int = ; and +

intnum1 = 5;
intnum2 = "3"; // Semantic error: Mixing int and stringintsum = num1 + num2;
C++ semantics dictate that you cannot mix integer and string types in this manner.

Q5] What is data type? List different datatypes used in programming.

A data type in programming is a classification that specifies
which type of value a variable can hold
and what operations can be performed on it.
 1. Built-in/primitive
a. Integral
i. Integer (int)
ii. Character (char)
b. Floating point
i. Float
ii. Double
c. Boolean (bool)
2. User-defined
a. Structure (struct)
b. Enumeration (enum)
c. union
3. Derived
a. Array
b. Pointers

1. Integer (int):
o Represents whole numbers, both positive and negative.
o Examples: -5, 0, 42

2. Floating-Point (float):
o Represents numbers with fractional parts (decimal numbers).
o Examples: -3.14, 0.0, 2.71828

3. Character (char):
o Represents a single character, such as a letter, digit, or symbol.
o Examples: 'A', '7', '$'
4. String (str):
o Represents a sequence of characters.
o Examples: "Hello, World!", "12345"

5. Boolean (bool):
o Represents true or false values.
o Examples: True, False

6. List:
o Represents an ordered collection of values that can be of different data types.
o Examples (in Python): [1, 2, 3], ["apple", "banana", "cherry"]

7. Array:
o Similar to a list, but often with a fixed size and elements of the same data type.
o Examples (in C/C++): int arr[5], float prices[10]

8. Dictionary (dict) or Map (various names in different languages): -

o Represents a collection of key-value pairs.
o Examples (in Python): {"name": "Alice", "age": 30}

9. Tuple:
o Represents an ordered, immutable (unchangeable) collection of elements.
o Examples (in Python): (1, 2, 3), ("red", "green", "blue")

10. Set:
o Represents an unordered collection of unique values.
o Examples (in Python): {1, 2, 3}, {"apple", "banana", "cherry"}

11. Enumerated (enum):

o Represents a set of named integer constants.
o Examples (in C/C++): enum Days {Monday, Tuesday, Wednesday, ...}

12. Struct (struct) or Record (various names in different languages):

o Represents a composite data type that groups together variables of different data
types under one name.
o Examples (in C/C++): struct Person { char name[50]; int age; }
13. Pointer (ptr):
o Represents a memory address or reference to another data value.
o Examples (in C/C++): int *ptr, char *str

14. Function (function pointer):

o Represents a reference to a function, allowing functions to be assigned to variables
or passed as arguments.
o Examples (in C/C++): int (*functionPtr)(int, int)

15. Void (void):

o Represents the absence of a data type. Often used for functions that don't return a
value.
o Examples (in C/C++): void, void* (a pointer to an unspecified data type)

Q6] compiled vs interpreted

Q6] compiled vs interpreted

Compiled Interpreted.

Compiled language follows at least two Interpreted language follows one step to get from
levels to get from source code to source code to execution.
execution.

A compiled language is converted into An interpreted language is a language in which the

machine code so that the processor can instructions are executed directly without compiling
execute it. into a machine code

The compiled programs run faster than The interpreted programs run slower than the
interpreted programs. compiled program.

n a compiled language, the code can be In Interpreted languages, the program cannot be
executed by the CPU. compiled, it is interpreted.

This language delivers better This language delivers slower performance.

performance.

CLEO, COBOL, C, C++, C#, etc Python, BASIC, JavaScript, Perl, etc.
Assignment 2
Unit 2: Overview of OS and CPU Organization
245679

1. Explain the fundamental purpose and role of an operating system in a

computer system. What are the main functions it performs?

2. Differentiate between a single-user operating system and a multi-user

operating system. Provide examples of each.

3. Describe how the CPU, memory, and I/O devices interact in a computer
system and how the operating system manages this interaction.

4. What is the significance of I/O channels in a computer system, and how

do they enhance the performance of the operating system?
Channels I/O, also known as Input/Output channels, are pathways through which
data is transferred between the central processing unit (CPU) and external devices,
such as storage devices, network interfaces, and other peripherals.
 I/O channels ensure systems interact seamlessly with computer peripherals,
allowing SMBs to use external hardware such as printers to complete business
tasks.

I/O channels help improve functionality when a business connects a webcam or

speaker to a computing device.

5. Explain the different states of a CPU in the context of process execution.

What happens in each state?

6. Describe the primary building blocks of a CPU, including the control

unit, arithmetic logic unit (ALU), and registers.
7. Define CPU registers and their role in CPU operations. Name three
common types of CPU registers and describe their functions.
Registers are small storage units inside a Central Processing Unit (CPU) that hold data,
instructions, and the current status of the processor. They are an essential part of any
computer system, as they enable the CPU to execute tasks quickly and efficiently.

Registers are used in various aspects of a CPU's functioning, such as:

 Storing the results of arithmetic and logical operations

 Controlling the flow of data between the CPU and main memory
 Keeping track of the program counter (PC), which determines the next instruction to be
executed
 Managing the status of the CPU, such as detecting errors or identifying the current mode of
operation
 Accumulator

The accumulator register is used by the ALU ( arithmetic and logic unit ) to perform the
arithmetic and the logical operations performed by the CPU.
 8. Discuss the characteristics and importance of the system bus in a
computer system, particularly its role in data transfer between
components.

9. Provide a basic block diagram of the interface between the CPU and
memory, highlighting the key components involved.

10.What is a local bus in the context of computer hardware? Name three

types of local buses (only types) commonly used in computer systems.

Assignment 3
Unit 4: HTML5

1 2 4 7 10 11 13
1. What does HTML stand for, and what is its primary purpose?
HTML (Hypertext Markup Language) is the standard markup language used to create
web pages.

It provides the basic structure and elements needed to represent content on the
World Wide Web.

2. What is the role of the HTML <head> section, and what

elements can it contain?
 The <head> element is a container for metadata (data about data)
 placed between the <html> tag and the <body> tag.
 Metadata is data about the HTML document. Metadata is not displayed.
 <title>, <meta>, <link>, <style> <script> etc.
o <title>:
This element is used to define the title of the document, which is displayed in the
browser's title bar and is often used by search engines to describe the page.
o <meta>:
This element is used to define metadata about the document, such as the character
encoding, description of the page, keywords, and author.
o <link>:
This element is used to link to external resources, such as stylesheets or scripts, that
are used to format or enhance the page.
o <script>:
This element is used to define JavaScript code that is executed on the page.
o <base>:

The <base> tag defines an absolute (base) URL for all relative URLs.

o <style>:
contains CSS code that defines how HTML elements should be rendered in a
browser.

3. How do you insert an image in an HTML document?

if your image is called dinosaur.jpg, and it sits in the same directory as your
HTML page:

html
<img src="dinosaur.jpg" alt="Dinosaur" />

If the image was in an images subdirectory, which was inside the same directory as
the HTML page, then you'd embed it like this:

html
 <img src="images/dinosaur.jpg" alt="Dinosaur" />

4. What is the <br> tag used for, and how is it different from the
<p> tag?

5. Describe the main differences between HTML and HTML5.

HTML HTML5
HTML does not provide native audio and video HTML5 provides native audio and video
support. support.
HTML only supports vector graphics if used in HTML5 supports SVG (Scalable Vector Graphics),
conjunction with different technologies like Canvas, and other virtual vector graphics.
Flash, VML, or Silverlight.
HTML allows inline MathML and SVG in text HTML5 allows inline MathML and SVG in text
with restricted use.
HTML doesn’t allow users to draw shapes such HTML5 allows users to draw shapes such as
as circles, triangles, and rectangles. circles, triangles, and rectangles.
HTML only uses browser cache and cookies to HTML5 uses web SQL databases, local storage,
store data temporarily. and application cache for storing data
temporarily.
JavaScript and browser interface run in the JavaScript and browser interface run in separate
same thread. threads.
Longer document type declaration. Shorter document type declaration.
Longer character encoding declaration. Uses Shorter character encoding declaration. Uses the
the ASCII character set. UTF-8 character set.
Compatible with almost all browsers. Only compatible with newer browsers,
considering there are many new tags and
elements which only some browsers support.
Built based on Standard Generalized Markup HTML5 has improved parsing rules providing
Language (SGML). enhanced compatibility.

6. What is the purpose of the HTML <table> element, and how

can you create a basic table structure?
HTML tables allow web developers to arrange data into rows and columns.

<!DOCTYPE html>
<html>
<head>
<style>
th, td {border:1px solid black;}
table {width:50%;
border-collapse:collapse;}
</style>
</head>
<body>
<table>
<tr>
<th>book</th>
<th>author</th>
</tr>
<tr>
<td>book 1</td>
<td>author 1</td>
</tr>
<tr>
<td>book 2</td>
<td>author 2</td>
</tr>
</table>
</body>
</html>
 7. How does HTML5 support multimedia content, and what are
the <audio> and <video> elements used for?
HTML5 features include native audio and video support without the need for Flash. The
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML
document as follows.

<!DOCTYPE html>
<html>
<body>
<video src = "video.mp4" width = "300" height = "200" controls>
</video>
<audio src = "audio.mp3" controls autoplay>
</audio>
</body>
</html>

8. What is the significance of the HTML5 <article> and <section>

elements in structuring web content, and how do they differ?
o The article and section elements are both used similarly to represent thematic parts of
a document. The primary difference between the two is that articles are meant to
encapsulate content that is self-contained.
o When deciding between an article or section, consider whether the content would still make
sense if taken out of its current page. This indicates and article.
o A section on the other hand, is only a part of a greater whole and does not stand on its
own.

<section> Tag: This tag is used to split a page into sections like Introduction, Contact Information,
Details, etc and each of these sections can be in a different <section> tag. The <section> tag is
introduced to wrap-up the things in a particular section.

<article> Tag: This tag contains independent content that doesn’t require any other context. So the
<article> tag can be placed inside the main content. But each of the articles will contain independent
content within it.

9. How can you embed external content in an HTML document

using <iframe> and <object> elements? Provide use cases for
both

10. Explain the role of the HTML5 <header> and <footer>

elements in structuring a web page. Give examples of content
that should be placed in these sections.
The <header> HTML element represents introductory content, typically a group of
introductory or navigational aids.
 It may contain some heading elements but also a logo, a search form, an author
name, and other elements.

The website footer is the section of content at the very bottom of a web page. It
typically contains a copyright notice, link to a privacy policy, sitemap, logo, contact
information, social media icons, and an email sign-up form. In short, a footer
contains information that improves a website's overall usability.
<header>
<h1>The header element</h1>
</header>
<footer>
<p>The footer element<br>
</footer>

11. What is the HTML5 <nav> element used for, and why is it
essential for web accessibility?
The <nav> HTML element represents a section of a page whose purpose is to
provide navigation links, either within the current document or to other documents.
Common examples of navigation sections are menus, tables of contents, and
indexes.

Navigation is necessary in ensuring that your website is accessible and

usable.

<nav class="nav">
<ol>
<li><a href="#">Bikes</a></li>
<li><a href="#">BMX</a></li>
</ol>
</nav>

12. What is the significance of the alt attribute in HTML5

image tags? Why is it important for accessibility and SEO?
The alt attribute provides alternative information for an image if a user for some
reason cannot view it (because of slow connection, an error in the src attribute, or if
the user uses a screen reader).

Alt tags provide context to what an image is displaying, informing search engine
crawlers and allowing them to index an image correctly.

13. Create a registration form in html.

<!DOCTYPE html>
<html>
 <body>
<form action="register.jsp" method="post">
<div>
<h1>Register</h1>
<label for="username">Username</label>
<input
type="text"
placeholder="Enter username."
name="username"
id="username"
required
/>
<label for="pwd">Password</label>
<input
type="password"
placeholder="Enter Password"
name="pwd"
id="pwd"
required
/>
<button type="submit">Register</button>
</div>
</form>
</body>
</html>

Assignment 4
Basics of C Programming

A3 2 3 4 5 6 7

1. Explain the significance of C programming in the field of computer science.

What are the key characteristics that make C a popular language for system
development?
2. Define variables and data types in C. Provide examples of different data types
and their uses.
Variable:
Variable is basically nothing but the name of a memory location that we use for storing data.
Data types:
Data type define the type of value a variable can hold, and what operations can be performed on
it.

Types Data Types

Basic Data Type int, char, float, double

Derived Data Type array, pointer, structure, union

Enumeration Data Type enum

Void Data Type void

int x = 5;
float x = 5.99;
char x = 'D';
double x = 16.5885;

apsu
array
int numbers[5]; // Declares an integer array with a size of 5 elements

pointer
int *ptr; // Declares a pointer to an integer

structure (many dt separate memory space)

struct Person {
char name[50];
int age;
float height;
};

Union (many dt same memory space)

union NumericValue {
int intValue;
float floatValue;
char stringValue [20];
};

Enum (name values that represent integral constants)

enum DaysOfWeek {
Monday,
Tuesday,
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
};

void
void print() { printf("Hello"); }
void return type function does not produce a value. A void function executes a task or action and
ends rather than returning a value.

3. Write a C expression that calculates the area of a rectangle using the formula:
`area = length * width`. Assume `length` and `width` are variables.
4. #include <stdio.h>
5. int main(){
6. int height=5;
7. int width=6;
8. int area=width*height;
9. printf("area of the rectangle = %d",area);
10. }

#include <stdio.h>
int main(){
int height;
int width;

printf("enter height ");

scanf("%d", &height);
 printf("enter width ");
scanf("%d", &width);
int area=width*height;
printf("area of the rectangle = %d",area);
return 0;
}

11. Explain the difference between the `++i` and `i++` increment operators in
C. Provide an example for each.
In C, ++ and -- operators are called increment and decrement operators. They are unary operators
needing only one operand. Hence ++ as well as -- operator can appear before or after the operand
with same effect.

i=5;
i++;
printf("%d",i);

and

i=5
++i;
printf("%d",i);

both will make i=6.

However, when increment expression is used along with assignment operator, then operator
precedence will come into picture.
i=5;
j=i++;
In this case, precedence of = is higher than postfix ++. So, value of i is assigned to j before
incrementing i. Here j becomes 5 and i becomes 6.

i=5;
j=++i;
In this case, precedence of prefix ++ is more than = operator. So i will increment first and the
incremented value is assigned to j Here i and j both become 6.

#include <stdio.h>
int main() {
int i=5,j;
j=i++;
 printf ("
after postfix increment i=%d j=%d", i,j);
i=5;
j=++i;
printf ("
after prefix increment i=%d j=%d",i,j);
return 0;
}
after postfix increment i=6 j=5
after prefix increment i=6 j=6

12. Describe the purpose of control statements in C.

Control statements control the flow of execution of their programs. In C, there are three types of
control statements: selection statements, iteration statements, and jump statements.

They allow a programmer to specify conditions that determine

which statements are executed and which are skipped,

to loop through statements until a condition is met,
or to jump to a different part of the program.
Characteristics:

o Control statements serve to control the execution flow of a program.

o Control statements in C are classified into selection statements, iteration statements, and
jump statements.
o Selection statements serve to execute code based on a certain circumstance.
o Iteration statements loop through a code block until a condition is met.
o Jump statements serve to move control from one section of a program to another.
o The if statement, for loop, while loop, switch statement, break statement, and continue
statement are C's most widely used control statements.

6.Define arrays and strings in C.

array:
1. Collection of elements of similar data type sored in continuous memory locations
2. int a[]={1, 2, 3};
3. data_type array_name [] = {1,2,3,4,5};
string
1. A String in C programming is a sequence of characters terminated with a null
character ‘\0’.
2. The C String is stored as an array of characters.
3. The difference between a character array and a C string is that the string in C is
terminated with a unique character ‘\0’.
4. char str [5] = "Hello";
7. Explain the concept of pointers in C and their uses.

A pointer is a variable that stores the memory address of another variable as its value.

A pointer variable points to a data type of the same type, and is created with the * operator.

8. #include <stdio.h>
9. int main (){
10. int x = 5; // An int variable
11. int* ptr = &x; // A pointer variable, with the name ptr, that stores
the address of x
12. printf ("%d", x); // value of x
13. printf ("%p", &x); //memory address of x
14. printf ("%p”, ptr); //memory address of x with pointer
15. printf ("%d”, *ptr); // value of x
16. return 0;
17. }
18. 5 0061FF18 0061FF18 5

19. Describe the differences between structures and unions in C.

Assignment 5:CSS3
4 8 9 10
1
A5 2
1. Define CSS3 and its role in web development. How does CSS3 differ from its
previous versions?
Introducing CSS3:
 CSS3 (Cascading Style Sheets 3) is the latest iteration of the CSS language. It introduces a wide
range of new features and enhancements to enable more advanced and interactive web page
styling.

CSS3 is the third version of the Cascading Style Sheets language

DIFFERENECE
 CSS3 includes new selectors, layout modules, animation and transitions.
 allows for more complex and specific styling,
 CSS3 allows for the use of media queries, which enables developers to create responsive
designs that adapt to different screen sizes.
 Include new viewport units
 Inset property
 Accent colour property (style checkbox and radio buttons in form)
 Gap property in flexbox
 Selector :has()

2. Provide a brief history of CSS, highlighting key milestones and

developments.

CSS was first introduced in the late 1990s as a way to separate content from
presentation on the web. It went through several versions, with CSS3 being the latest
and most feature-rich iteration.
 1994- HÃ¥kon Wium Lie proposed the idea of CSS.
 1996- The first version of CSS was invented.

3. Selectors and Pseudo Classes:

 Selectors in CSS3 are patterns that are used to select and style HTML elements.
 Pseudo-classes are special selectors that allow you to apply styles to elements based
on their state or position.

4. Explain the concept of selectors in CSS3. What is the purpose of attribute

selectors?
 Selectors in CSS3 are patterns that are used to select and style HTML elements.
 Pseudo-classes are special selectors that allow you to apply styles to elements
based on their state or position.
 Attribute selectors in CSS3 allow you to select elements based on their
attributes or attribute values. This provides a powerful way to target specific
elements for styling.
5. Describe the target pseudo-class in CSS3. When and how is it used in web
development?
 The pseudo-class :target is used to style the target element of a URL containing a
fragment identifier.
 (like #section2 in a URL).
 Target is a pseudo-class in CSS3 that matches the unique element with an ID
that's the target of a URL fragment identifier (like #section2 in a URL).

6. Fonts and Text Effects:

 CSS3 provides extensive options for styling text.
 This includes setting font families, font sizes, font weights,
 and applying various text effects like shadows and transformations. Rendering,
decoration.

7. Discuss the significance of fonts on the web and the role of font services.
Name a popular font service.
 Web fonts allow designers to use custom fonts that may not be available on all
user's computers.
 They can be loaded from external font services or included directly in the
website's files.
 Font services provide a platform for hosting and delivering fonts to websites.
Popular services include Google Fonts, Adobe Fonts, and Typekit.

8. What is the @font-face rule in CSS3, and how does it allow web designers to
use custom fonts?
 The @font-face rule in CSS3 allows you to specify custom fonts for a web page.
 This rule enables you to use fonts that that aren't traditionally available on the
user's system.
 With the @font-face rule, web designers do not have to use one of the "web-
safe" fonts anymore.
 You must first define a font named "myFirstFont", and specify the URL where it
can be found:
@font-face {
 font-family: myFirstFont;
src: url(sansation_light.woff);
}
 To use the font for an HTML element, refer to the name of the font (myFirstFont)
through the font-family property:
div {
font-family: myFirstFont;
}

9. Colours, Gradients, Background Images, and Masks:

 COLOR:
CSS3 allows you to specify colors using a variety of methods, including hex
codes, RGB values, and color names.
 GRADIENTS:
Gradients provide a smooth transition between two or more colors, allowing
for dynamic and visually appealing backgrounds.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)

 BACKGROUND IMAGE:
CSS3 enables the addition of background images to elements.
This can be used to enhance the visual appeal of a webpage or to add branding
elements.
 MASKS:
With CSS masking you create a mask layer to place over an element to
partially or fully hide portions of the element.
CSS3 introduces masking techniques that allow you to apply effects to
images or other elements. This includes alpha masks, luminance masks,
and more.
mask-image Specifies an image to be used as a mask layer for an element

mask-mode Specifies whether the mask layer image is treated as a

 luminance mask or as an alpha mask

Specifies the origin position (the mask position area) of a mask

mask-origin
layer image

mask- Sets the starting position of a mask layer image (relative to the
position mask position area)

mask-repeat Specifies how the mask layer image is repeated

mask-size Specifies the size of a mask layer image

.mask1 {
mask-image: linear-gradient(black, transparent);
};

10.Explain the CSS3 properties related to colours, gradients, and background

images. How can CSS3 be used to create masked effects?
Color:
5. Colors are specified using predefined color names, or RGB, RGBA, HSL, HSLA, HEX
values.
6. rgb(red, green, blue)
7. hsl(hue, saturation, lightness)
8. HEX Value hexadecimal value #rrggbb#000000
9. rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all)
10. List of properties that can accept color value
11. Color: red;
12. Background-color: red;
13. Border-color
14. Text-decoration-color
15. <h1 style="border:2px solid red;">hello</h1>

GRADIENTS:
Gradients provide a smooth transition between two or more colors, allowing
for dynamic and visually appealing backgrounds.
CSS defines three types of gradients:
Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)
Conic Gradients (rotated around a center point)
Background image:
1. The background-image property specifies an image to use as the
background of an element.
body {
background-image: url("paper.gif");
}

2. image that does not disturb the text.

Masked effects:
 With CSS masking you create a mask layer to place over an element to partially or
fully hide portions of the element.
 CSS3 introduces masking techniques that allow you to apply effects to images or other
elements. This includes alpha masks, luminance masks, and more.

<img src="dinosaur.png">


img {
mask-image: linear-gradient(red, transparent);
}
 Uses

video{
mask-image: url(mask2.png);
mask-repeat: no-repeat;
mask-position: center;
mask-size: 10%;
}


 Fading an image
 Masking text content
 Masking list