FST CIA 1 Answers (1)

Q. No.
Question
1 Predict the output for the following program:
Sample: Software Testing Help
Redeclaring the varaible will not lose the value!.
Here the value in studentName is Sajeesh Sreeni
2 Write a webpage that will display an image along with reference link:
Sri Eshwar College of Engineering
SECE WEB LINK
<!DOCTYPE html>
<html>
<head>
<title>Sri Eshwar College of Engineering</title>
</head>
<body>
<h1>Sri Eshwar College of Engineering</h1>

<img src="your_image_url_here.jpg" alt="Sri Eshwar College of Engineering"

width="300">

<p>Visit our website for more information:</p>
<a href="https://www.sece.ac.in" target="_blank">SECE WEB LINK</a>
</body>
</html>
3 Create a webpage to display the following output
Mango
Apple
o Green Apple
o Red Apple
o Papaya
<!DOCTYPE html>
<html>
<head>
<title>Fruit List</title>
</head>
<body>
<ul>
<li>Mango</li>
<li>Apple</li>
<li>о Green Apple</li>
<li>。 Red Apple</li>
<li>Papaya</li>
</ul>
</body>
</html>
4 Display the following table in a HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Department-wise Student Count</title>
</head>
<body>
<h1>Department-wise Student Count</h1>
<table border="1">
<tr>
<th>Department</th>
<th>Total no of Students</th>
</tr>
<tr>
<td>CSE</td>
<td>120</td>
</tr>
<tr>
<td>MECH</td>
<td>100</td>
</tr>
<tr>
<td>IT</td>
<td>60</td>
</tr>
</table>
</body>
</html>
5 Write a JavaScript Program to display the text Technologies" using function.
<!DOCTYPE html>
<html>
<head>
<title>Display Text</title>
</head>
<body>
<script>
// Define a function to display the text
function displayText() {
document.write("Technologies");
// Call the function to display the text
displayText();
</script>
</body>
</html>
6 What is meant by external style sheet in CSS?
An external style sheet in CSS is a separate file containing CSS rules that can be
linked to an HTML document using the <link> element in the HTML's <head>
section. This allows for the separation of content and presentation, simplifies
maintenance, and promotes design consistency across multiple web pages.
7 How to create components in React?
To create components in React, you define JavaScript functions or classes that

represent reusable UI elements. These components encapsulate a part of your
user interface and its logic. Components can be created using functional
components or class components, and they are the building blocks of React
applications, allowing for modular and maintainable code.
8 State the difference between Real DOM and virtual DOM.

The Real DOM is the actual browser representation of a web page's structure and
is directly manipulated for updates, whereas the Virtual DOM is an abstract,
lightweight copy of the Real DOM used by libraries like React to optimize and
batch updates, improving rendering efficiency and performance.
9 What is component composition in react?
Component composition in React refers to the practice of building complex user

interfaces by combining and nesting smaller, reusable components within larger
ones. This approach allows developers to create modular, maintainable, and
scalable code by breaking down the user interface into smaller, self-contained
building blocks. These smaller components can be reused across different parts
of the application, promoting code reusability and making it easier to manage
and understand the codebase.
10 a) (i) Design the following table using HTML.
<!DOCTYPE html>
<html>
<head>
<title>Seminar Schedule</title>
</head>
<body>
<h1>Seminar Schedule</h1>
<table border="1" cellpadding="5">

<tr>
<th>Seminar</th>
<th>Day</th>
<th>Schedule</th>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td>Introduction to XML</td>
<td>Topic</td>
<td>Monday</td>
<td>8:00 am.</td>
<td>5:00 p.m.</td>
</tr>
<tr>
<td>Validity DTD and Relax NG</td>
<td></td>
<td>Monday</td>
<td>8:00 a.m.</td>
<td>11:00 am</td>
</tr>
<tr>
<td>XPath</td>
<td></td>
<td>Tuesday</td>
<td>11:00 a.m.</td>
<td>2:00 p.m.</td>
</tr>
<tr>
<td>XSL Transformations</td>
<td></td>
<td>Wednesday</td>
<td>2:00 p.m.</td>
<td>4:00 p.m.</td>
</tr>
<tr>
<td>XSL Formatting Objects</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
(ii)
Come a HTML page following information and structure:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>My Blog about My Life</h1>
<p>Menu:</p>
<ul>
<li><a href="#entry1">Meeting with Supervisor</a></li>
<li><a href="#entry2">New Car!!!</a></li>
<li><a href="#entry3">If at a Pub</a></li>
<li><a href="#entry4">Visit My Parents</a></li>
</ul>
<h2 id="entry1">Meeting with Supervisor</h2>
<p>Date: 14 Dec 2011</p>
<p>Today I went to the university by bus. I had a meeting with my PhD
supervisor.</p>
<h2 id="entry2">New Car!!!</h2>
<p>Date: 12 Dec 2011</p>
<p>Today I bought my new car. It's a Honda Accord, and it's really
nice.</p>
<h2 id="entry3">If at a Pub</h2>
<p>Date: 30 Dec 2011</p>
<p>Tried to contact my PhD supervisor, but he was out of his office.</p>
</body>
</html>
(Or)
10 b) (i) Design the following web page using HTML:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">
<label for="name">Enter Name</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="password">Enter Password</label><br>

<input type="password" id="password" name="password"
required><br><br>
<label for="address">Enter Address</label><br>

<textarea id="address" name="address" rows="4"
required></textarea><br><br>
<label>Select Game</label><br>
<input type="checkbox" id="hockey" name="game" value="Hockey">
Hockey<br>
<input type="checkbox" id="football" name="game" value="Football">
Football<br>
<input type="checkbox" id="badminton" name="game"
value="Badminton"> Badminton<br>
<input type="checkbox" id="cricket" name="game" value="Cricket">
Cricket<br>
<input type="checkbox" id="volleyball" name="game"
value="Volleyball"> Volleyball<br><br>
<label for="gender">Gender</label><br>
<input type="radio" id="male" name="gender" value="Male">
Male<br>
<input type="radio" id="female" name="gender" value="Female">
Female<br><br>
<label for="age">Select Your Age</label><br>

<select id="age" name="age">
<option value="Select">Select</option>
<option value="Below 18">Below 18</option>
<option value="18-30">18-30</option>
<option value="31-50">31-50</option>
<option value="Above 50">Above 50</option>
</select><br><br>
<label for="photo">Select Photo</label><br>

<input type="file" id="photo" name="photo"><br><br>
<input type="submit" value="Submit">

<input type="reset" value="Reset">
</form>
</body>
</html>
(ii) Design a website for Ace car company based on the layout shown in
figure using HTML:
(i) Header.html - the header must contain the name of the company and a
logo at the left.
<!DOCTYPE html>
<html>
<head>
<title>Ace Car Company</title>
</head>
<body>
<header>
<div id="logo">
<img src="logo.png" alt="Ace Car Company Logo">
</div>
<div id="company-name">
Ace Car Company
</div>
</header>
</body>
</html>
(ii) Left Panel - the left panel should contain links to 2 pages
• Home.html - should contain a brief description about the company.
⚫ Cars.html - should contain a table describing at least 5 car details
• Contact.html - should contain the address, phone number, fax and email id
of the company.
[Note: Whenever a link is clicked the corresponding page must be displayed

in the main content section.]
<nav id="left-panel">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Cars.html">Cars</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<!DOCTYPE html>
<html>
<head>
<title>Home - Ace Car Company</title>
</head>
<body>
<main>
<h1>Welcome to Ace Car Company</h1>
<p>This is a brief description about our company...</p>
</main>
</body>
</html>
(iii)Footer.html - the footer must contain a copyright information of the
company along with the links to social media websites.
<footer>
<div id="copyright">
© 2023 Ace Car Company
</div>
<div id="social-media">
<a href="#">Facebook</a> |
<a href="#">Twitter</a> |
<a href="#">Instagram</a>
</div>
</footer>
11 a) (i) Design a web page and display the text "Welcome to FS T” with following
specifications.
Body color: Yellow
Font Family: Arial
Color: Navy
Decoration: underline
<!DOCTYPE html>
<html>
<head>
<title>Welcome to FS T^ prime prime</title>
<style>
body {
background-color: yellow;
font-family: Arial, sans-serif;
color: navy;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to FS T^ prime prime</h1>
</body>
</html>
(ii).
Design the web page to demonstrate text rollover so that the rollover will
change the link to red and make the underline appear.
<!DOCTYPE html>
<html>
<head>
<title>Text Rollover Demo</title>
<style>
/* Initial link styling */
a{
color: navy;
text-decoration: none;
}
/* Rollover effect */
a:hover {
color: red;
}
</style>
</head>
<body>
<h1>Text Rollover Demo</h1>
<p>Hover over the link below to see the rollover effect:</p>
<a href="#">Hover Me</a>
</body>
</html>
(Or)
11 b) Design your own web pages using the following CSS properties. 1. opacity 2. flex
3. font-stretch 4. text-decoration-color 5. text-decoration-line 6. text-decoration-
style 7. text-shadow 8. transform 9. word-wrap 10. border-top-left-radius
<!DOCTYPE html>
<html>
<head>
<title>CSS Property Examples</title>
<style>
/* 1. Opacity */
.opacity-example {
opacity: 0.5;
}
/* 2. Flex */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightblue;
}
.flex-item {
flex: 1;
background-color: lightcoral;
padding: 10px;
}
/* 3. Font Stretch */
.font-stretch-example {
font-stretch: expanded;
}
/* 4. Text Decoration Color */

.text-decoration-color-example {
text-decoration-color: purple;
}
/* 5. Text Decoration Line */

.text-decoration-line-example {
text-decoration-line: underline overline;
}
/* 6. Text Decoration Style */

.text-decoration-style-example {
text-decoration-style: dashed;
}
/* 7. Text Shadow */
.text-shadow-example {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 8. Transform */
.transform-example {
transform: rotate(20deg) scale(1.2);
}
/* 9. Word Wrap */
.word-wrap-example {
word-wrap: break-word;
width: 150px;
}
/* 10. Border Top Left Radius */
.border-radius-example {
border-top-left-radius: 20px;
background-color: lightgreen;
padding: 20px;
}
</style>
</head>
<body>
<h1>CSS Property Examples</h1>
<p class="opacity-example">1. Opacity</p>
<div class="flex-container">
<div class="flex-item">2. Flex</div>
</div>
<p class="font-stretch-example">3. Font Stretch</p>
<p class="text-decoration-color-example">4. Text Decoration Color</p>
<p class="text-decoration-line-example">5. Text Decoration Line</p>
<p class="text-decoration-style-example">6. Text Decoration Style</p>
<p class="text-shadow-example">7. Text Shadow</p>
<p class="transform-example">8. Transform</p>
<p class="word-wrap-example">9. Word Wrap Word Wrap Word Wrap Word

Wrap Word Wrap Word Wrap Word Wrap Word Wrap Word Wrap Word Wrap</p>
<p class="border-radius-example">10. Border Top Left Radius</p>

</body>
</html>
(ii). Design the following grid layout using CSS Grid System with the specified
colors for each column:
GREEN
YELLOW
ORANGE
RED
Answer:
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; /* Four equal-width columns */
grid-gap: 10px; /* Gap between grid items */
background-color: lightgray; /* Background color for the entire grid */
padding: 10px; /* Padding for the entire grid */
}
.green {
background-color: green;
padding: 20px;
}
.yellow {
background-color: yellow;
padding: 20px;
}
.orange {
background-color: orange;
padding: 20px;
}
.red {
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="green">GREEN</div>
<div class="yellow">YELLOW</div>
<div class="orange">ORANGE</div>
<div class="red">RED</div>
</div>
</body>
</html>
12 a) (i) Explain how to install reactjs and create function display to display the text
Welcome to ReactJS".
Installation – 4 marks.
Write the code in Display.JS:
import React from 'react';
function Display() {
return (
<div>
<h1>Welcome to ReactJS</h1>
</div>
);
}
export default Display;
Now, you need to render the Display component in the src/App.js file. You
can do this by replacing the content of the return statement in the App
component with <Display />:
function App() {
return (
<div className="App">
<Display />
</div>
);
}
(ii Explain the react component and types in details.
) React components are the building blocks of a React application. They are
JavaScript classes or functions that define the user interface (UI) of your
application. React components encapsulate the logic and presentation of a
part of your application's UI, allowing you to create reusable, modular, and
maintainable code.
There are two main types of React components:
1. Class Components:
Class components are JavaScript classes that extend the
`React.Component` base class. They use the ES6 class syntax and have
lifecycle methods, which allow you to control the behavior of the component
at different stages of its life cycle. Class components are often used for more
complex components that require state management and lifecycle methods.
Here's an example of a simple class component:
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
export default MyComponent;
2. Functional Components:
Functional components are JavaScript functions that accept props as input
and return JSX (JavaScript XML) as output. They are simpler and more
lightweight than class components and are often used for presentational
components that don't need to manage state or lifecycle methods. With the
introduction of React Hooks, functional components can also manage state
and side effects.
Here's an example of a functional component:
import React, { useState } from 'react';
function MyComponent(props) {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<h1>{props.title}</h1>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
Key Concepts:
- Props: Both class and functional components can receive data from their
parent components via props. Props are read-only and help pass data and
configuration to child components.
State: Class components can manage internal state using the `state` object,
while functional components can use the ùseState` hook to manage state.
State represents data that can change over time and triggers component re-
rendering when updated.
Lifecycle Methods: Class components have lifecycle methods like
`componentDidMount`, `componentDidUpdate`, and
`componentWillUnmount` that allow you to perform actions at specific
points in the component's life cycle. Functional components can replicate
similar behavior using the ùseEffect` hook.
Rendering: All React components must implement the `render` method (for
class components) or return JSX (for functional components). JSX describes
the component's UI and structure.
Component Composition: You can compose complex UIs by nesting
components within each other. This promotes code reuse and
maintainability.
Hooks: React introduced hooks, such as ùseState`, ùseEffect`,
ùseContext`, and others, to allow functional components to manage state
and side effects previously managed by class components.
(Or)
12 b) (i) Explain the following react components to add Styling. i)Add the Global Style
ii)Create a Style for Each Individual component. iii)Adding Inline Style
to React Component.
Styling in React components can be accomplished in various ways to achieve
different levels of control and reusability. Here are explanations for the three
approaches you mentioned:
i) Add the Global Style:
Adding a global style in a React application means applying CSS styles that
affect the entire application. This can be done by importing an external CSS
file into your project or using a CSS-in-JS library like `styled-components`
to create global styles.
- External CSS: You can create a separate CSS file (e.g., `styles.css`) with
global styles and then import it into your React application. Any styles
defined in this file will apply globally to all components.
// In your React component
import './styles.css';
- Styled-components: If you're using a CSS-in-JS library like `styled-
components`, you can create global styles using their `createGlobalStyle`
API.
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
`;
// In your React component
<div>
<GlobalStyle />
{/* ... rest of your component */}
</div>
ii) Create a Style for Each Individual Component:
To create styles for individual components, you can use CSS modules,
styled-components, or any other CSS-in-JS solution. This approach keeps
styles isolated to specific components, promoting modularity and reusability.
- CSS Modules: When using CSS modules, you create a separate CSS file for
each component and import the styles directly into the component file.
// MyComponent.js
import React from 'react';
import styles from './MyComponent.module.css';
function MyComponent() {
return <div className={styles.container}>Styled Component</div>;
}
css
/* MyComponent.module.css */
.container {
background-color: #ff0000;
color: #ffffff;
}
Styled-components: With `styled-components`, you can define styles
directly within your component file, creating a styled component that
encapsulates its styles.
import styled from 'styled-components';
const Container = styled.div`
background-color: #ff0000;
color: #ffffff;
`;
return <Container>Styled Component</Container>;
}
iii) Adding Inline Style to React Component:
Inline styles are applied directly to individual HTML elements within a
component. This approach allows you to define styles using JavaScript
objects.
const divStyle = {
backgroundColor: '#ff0000',
color: '#ffffff',
};
return <div style={divStyle}>Inline Styled Component</div>;
}
In this approach, styles are applied directly to the component's HTML
elements as inline CSS properties. It's useful for applying dynamic styles
based on component state or props.
Each of these styling methods in React provides a different level of control
and flexibility. You can choose the one that best suits your project's
requirements and development style.

FST CIA 1 Answers (1)

Uploaded by

Copyright:

Available Formats

You might also like

FST CIA 1 Answers (1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FST CIA 1 Answers (1)

Uploaded by

Copyright:

Available Formats

Q. No.

Sample: Software Testing Help

Redeclaring the varaible will not lose the value!.

Here the value in studentName is Sajeesh Sreeni

Sri Eshwar College of Engineering

SECE WEB LINK

<title>Sri Eshwar College of Engineering</title>

<h1>Sri Eshwar College of Engineering</h1>

<img src="your_image_url_here.jpg" alt="Sri Eshwar College of Engineering"

<p>Visit our website for more information:</p>

<a href="https://www.sece.ac.in" target="_blank">SECE WEB LINK</a>

3 Create a webpage to display the following output

<li>о Green Apple</li>

<li>。 Red Apple</li>

4 Display the following table in a HTML Page

<title>Department-wise Student Count</title>

<h1>Department-wise Student Count</h1>

5 Write a JavaScript Program to display the text Technologies" using function.

// Define a function to display the text

// Call the function to display the text

6 What is meant by external style sheet in CSS?

7 How to create components in React?

To create components in React, you define JavaScript functions or classes that

8 State the difference between Real DOM and virtual DOM.

9 What is component composition in react?

Component composition in React refers to the practice of building complex user

<table border="1" cellpadding="5">

<label for="password">Enter Password</label><br>

<label for="address">Enter Address</label><br>

<label for="age">Select Your Age</label><br>

<label for="photo">Select Photo</label><br>

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

• Home.html - should contain a brief description about the company.

⚫ Cars.html - should contain a table describing at least 5 car details

[Note: Whenever a link is clicked the corresponding page must be displayed

Body color: Yellow

Font Family: Arial

/* 4. Text Decoration Color */

/* 5. Text Decoration Line */

/* 6. Text Decoration Style */

<p class="opacity-example">1. Opacity</p>

<p class="font-stretch-example">3. Font Stretch</p>

<p class="text-decoration-color-example">4. Text Decoration Color</p>

<p class="text-decoration-line-example">5. Text Decoration Line</p>

<p class="text-decoration-style-example">6. Text Decoration Style</p>

<p class="text-shadow-example">7. Text Shadow</p>

<p class="transform-example">8. Transform</p>

<p class="word-wrap-example">9. Word Wrap Word Wrap Word Wrap Word

<p class="border-radius-example">10. Border Top Left Radius</p>

You might also like