Q.1 What do you mean by URL? Explain in detail.

Ans.
A URL, or Uniform Resource Locator, is a reference or an address used to locate
resources on the internet. It serves as a standardized way to specify the location
of a resource, such as a webpage, a file, an image, or any other type of resource
accessible via the internet.

Protocol: This is the communication language used to access the resource. In

this example, it's https, which signifies a secure connection using Hypertext
Transfer Protocol Secure (HTTPS).
Domain: This is the unique name of the website hosting the resource. Here, it's
www.hostinger.com, indicating the main hostinger website.
Path: This specifies the specific location of the resource within the website. In
this case, /tutorials/ indicates the "tutorial" section of the website.
➢ Each URL is unique and points to a specific resource.
➢ URLs can be used to access various resources, including web pages, images,
videos, documents, and more.
➢ Clicking on a hyperlink automatically inserts the corresponding URL into
your browser's address bar.
➢ Understanding URLs is essential for navigating the internet effectively.
Q.2 Create a login form for student corner.
Ans.
HTML Code
CSS Code
Output :
Q.3 Why iframe become more popular? Explain iframe in detail.
Ans.
An iframe (inline frame) is an HTML tag that allows you to embed an
independent HTML document within another HTML document.
It creates a separate window within the current page, essentially displaying a
web page within a web page.
It's like having a picture-in-picture feature on your TV, but for web content.
Syntax:
<iframe src=”path” width=” ” height= “ “></iframe>
Key attributes:
src: Specifies the URL of the content to be embedded.
width: Sets the width of the iframe.
height: Sets the height of the iframe.
frameborder: Controls the visibility of border around the iframe.
Common uses of iframes:
➢ Embedding videos (YouTube, Vimeo, etc.).
➢ Displaying maps (Google Maps, MapQuest).
➢ Integrating social media content (Facebook posts, Twitter feeds).
➢ Loading advertisements from third-party sources.
➢ Separating website sections for better organization.
➢ Creating interactive elements like forms or quizzes.
Why iframes have become more powerful:
Cross-origin communication:
Modern browsers allow iframes to communicate with their parent pages through
JavaScript, even if they come from different domains. This enables dynamic
interactions and data exchange between embedded content and the main page
Improved security measures:
Browsers now have stricter security policies for iframes, preventing malicious
content from accessing sensitive information or harming the user experience.
Responsive design:
Iframes can be controlled with CSS and JavaScript to adapt to different screen
sizes and devices, ensuring optimal viewing experiences across various platforms
Enhanced user experiences:
Iframes are often used to create interactive and engaging elements, such as
interactive maps, live polls, or embedded games, enriching website content
Q.4 How to use marquee tag in any respective links?
Ans.
The <marqee> tag in HTML is used to create a scrolling text or image effect
within a web page.
HTML CODE
 OUTPUT

Here's a breakdown of the attributes commonly used with the<marqee>

tag:
behavior: This attribute defines the behavior of the scrolling content. It can take
one of the following values:
(Scroll, slide, alternate)
direction: This attribute specifies the direction in which the content scrolls. It
can take one of the following values:
(Left, right, up, down)
scrollamount: This attribute sets the speed at which the content scrolls. It
specifies the number of pixels to scroll per iteration. The higher the value, the
faster the scrolling speed.
scrolldelay: This attribute sets the delay between each scroll iteration, in
milliseconds. It determines how long the content pauses between each scroll
movement.
width: This attribute specifies the width of the marquee area, which is the
visible portion where the content scrolls. It can be specified in pixels or as a
percentage of the container width.
height: This attribute specifies the height of the marquee area, which is the
visible portion where the content scrolls. It can be specified in pixels or as a
percentage of the container height. loop: This attribute specifies the number of
times the marquee content should loop. A value of -1 indicates infinite looping
Q.5 Draw marksheet for a B.C.A 1st year student by using table tags and
their attributes.
Ans.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>marksheet</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<table border="2px" width="60%" >
<tr><th colspan="12" > <h1>Maharaja Surajmal Brij
University, Bharatpur(Raj.)</h1></th></tr>
<tr><th colspan="12" ><b>B.C.A. PART-1 2022-
2023</b></th></tr>
<tr>
<th colspan="12" ALIGN="LEFT">PERSONAL DETAILS</th>
</tr>
<tr>
<td colspan="5">NAME</td>
<td colspan="7">SUJAL JAIN</td>
</tr>
<tr>
<td colspan="5">ROLL.NO</td>
<td colspan="7">136224</td>
</tr>
<tr>
<td colspan="5">FATHER'S NAME</td>
 <td colspan="7">ANIL KUMAR JAIN</td>
</tr>
<tr>
<td colspan="5">MOTHER'S NAME</td>
<td colspan="7">SUDHA JIAN</td>
</tr>
<tr>
<td colspan="5">ENROLLMENT NO</td>
<td colspan="7"><a href="#">22/100078</a></td>
</tr>
<tr>
<td colspan="5">COLLEGE</td>
<td colspan="7">525 S.N.COLLEGE OF SCIENCE</td>
</tr>
<tr>
<th colspan="12" align="left">
MARKS DETAILS
</th>
</tr>
<tr>
<th colspan="6">subject</th>
<th>TH<BR>TOTAL</th>
<th>TH<BR>MAX</th>
<th>PR</th>
<th>PR<BR>MAX</th>
<th>TOTAL</th>
<th>REMARK</th>
</tr>
<tr align="center" >
<td colspan="6">BCA-101: ELEMETARY PHYSICS</td>
<td>60</td>
<td>100</td>
<td> </td>
<td> </td>
<td>60</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-102: BASIC MATHEMATICS</td>
 <td>71</td>
<td>100</td>
<td> </td>
<td> </td>
<td>71</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-103: GENERAL ENGLISH</td>
<td>65</td>
<td>100</td>
<td></td>
<td></td>
<td>65</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-104: PRINCIPALS OF PROGRAMING
LANGUAGE (THROUGH C)</td>
<td>60</td>
<td>100</td>
<td></td>
<td> </td>
<td>60</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-105: COMPUTER ORGANIZATION</td>
<td>60</td>
<td>100</td>
<td> </td>
<td> </td>
<td>60</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-106: OFFICE MANAGEMENT TOOLS</td>
<td>50</td>
<td>100</td>
 <td></td>
<td></td>
<td>50</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-107: TECHNICAL WRITING AND
COMMUNICATION SKILLS</td>
<td></td>
<td>100</td>
<td>95</td>
<td>100</td>
<td>95</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-108: C-LEBORATORY</td>
<td></td>
<td>100</td>
<td>97</td>
<td>100</td>
<td>97</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-109: OFFICE AUTOMATION
LABORATORY</td>
<td></td>
<td>100</td>
<td>95</td>
<td>100</td>
<td>95</td>
<td></td>
</tr>
<tr align="center">
<td colspan="6">BCA-110: TYPING SKILLS LABORATORY
(ENGLIDH AND HINDI LANGUAGE)</td>
<td></td>
<td>100</td>
 <td>98</td>
<td>100</td>
<td>98</td>
<td></td>
</tr>
<tr>
<th colspan="12" align="left">FINAL RESULT</th>
</tr>
<tr>
<td colspan="6">TOTAL</td>
<td colspan="6">751/1000</td>
</tr>
<tr>
<td colspan="6">RESULT</td>
<td colspan="6">PASS</td>
</tr>
</table>
</body>
</html>

Output:
Q.6 What do you mean by z-index properties? Show three layers having
different colors in your document.
Ans.
The z-index property in CSS controls the stacking order of overlapping elements
on a webpage. It essentially determines which element appears on top and which
ones are hidden behind it, creating a layered effect.
Here is the example:
HTML CODE

CSS CODE
OUTPUT:
Q.7 Write a program using Java script to print zero to ten in different lines.
Ans.
JavaScript Code

OUTPUT:
Q.8 Explain about Flex Box with example ?
Flexbox, formally known as the CSS Flexible Box Layout Module, is a powerful
layout model in CSS that allows you to design flexible and responsive layouts
with ease. It provides a more efficient way to distribute space among items in a
container, even when their size is unknown or dynamic. Flexbox is particularly
useful for creating dynamic and complex layouts, such as navigation bars, grids,
card layouts, and more.

Here's an overview of the key concepts and properties of Flexbox:

1. **Flex Container**: To use Flexbox, you need a flex container. Any HTML
element can be turned into a flex container by setting its display property to
`flex` or `inline-flex`. This container holds the flex items.
Ex.
.container {
display: flex; /* or inline-flex */
}
2. **Flex Items**: The child elements of a flex container are called flex items.
These items can be laid out in any direction within the flex container
(horizontally or vertically) and can also be re-ordered, aligned, and spaced using
Flexbox properties.

3. **Main Axis and Cross Axis**: Flexbox works along two axes: the main axis
and the cross axis. The main axis is the primary axis along which flex items are
laid out, determined by the `flex-direction` property. The cross axis is
perpendicular to the main axis.

4. **Flex Direction**: This property determines the main axis along which flex
items are laid out inside the flex container. It can be set to `row` (default), `row-
reverse`, `column`, or `column-reverse`.

Ex.
 .container {
flex-direction: row; /* or row-reverse, column, or column-reverse */
}
5. **Justify Content**: This property aligns flex items along the main axis of the
flex container. It defines how extra space is distributed between and around flex
items. Common values include `flex-start`, `flex-end`, `center`, `space-between`,
and `space-around`.
Ex.
.container {
justify-content: center; /* or flex-start, flex-end, space-between, space-
around */
}
6. **Align Items**: This property aligns flex items along the cross axis of the
flex container. It specifies how flex items are aligned within the flex container
when they do not take up all the available space on the cross axis. Common
values include `flex-start`, `flex-end`, `center`, `baseline`, and `stretch`.
Ex.
.container {
align-items: center; /* or flex-start, flex-end, baseline, stretch */
}
7. **Flex**: This property defines how a flex item grows or shrinks to fit the
available space in the flex container. It is a shorthand property for `flex-grow`,
`flex-shrink`, and `flex-basis
Ex.
.item {
flex: 1; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}
 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex box</title>
<link rel="stylesheet" href="flex.css">
</head>
<body>
<div class="center">
<div class="box box1"> box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
<div class="box box4">box4</div>
</div>
</body>
</html>

CSS
*{

margin: 0;
padding: 0;
box-sizing: border-box;
}
.center{
position: absolute;
top: 200px;
left: 10%;
height: 400px;
width: 80%;
border: 2px solid black;
border-radius: 4px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.box{
height: 150px;
width: 150px;
border: 2px solid black;
}
.box1{
background-color: blueviolet;
}
.box2{
background-color: rgb(122, 213, 17);
}
.box3{
background-color: rgb(218, 147, 25);
}
.box4{
background-color: rgb(49, 18, 227);
}

OUTPUT
Q.9 Design a homepage of S.N. college of science using HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags, title, and stylesheets -->
</head>
<body>
<header>
<!-- Header section -->
</header>
<div class="main">
<!-- Main navigation links -->
</div>
<div class="hero">
<!-- Hero section -->
</div>
</div>
<div class="container">
<section id="pic">
<!-- Slider section -->
</section>
<section class="nw">
<!-- University links and courses section -->
</section>
</div>
<!-- Gallery section starts -->
<div class="main-section gallery">
<!-- Gallery content -->
</div>
<!-- Gallery section ends -->

<!-- Footer section starts -->

<div class="footer">
<div class="container">
<div class="footer-sect">
<!-- Footer content - Institute Information -->
</div>
<div class="footer-sect">
<!-- Footer content - Quick Links -->
</div>
<div class="footer-sect">
<!-- Footer content - Contact Info -->
</div>
</div>
<div class="map">
<!-- Google Map -->
</div>
</div>
<!-- Footer section ends -->

</body>
<!-- JavaScript -->
<script src="swiper-bundle.min.js"></script>
<script src="script.js"></script>
</html>

CSS
/* Resetting default margin, padding, and box-sizing */
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

/* Styling header */
header {
/* Header background color and dimensions */
}

/* Styling header elements */

header * {
color: white;
}

/* Styling logo */
.logo {
/* Logo styling */
}

/* Styling logo text */

.logo-text {
/* Logo text styling */
}

/* Styling animation for logo text */

.logo-text::before {
/* Animation for logo text */
}

/* Styling search */
.search {
/* Search styling */
}

/* Styling buttons */
button {
/* Button styling */
}
/* Styling input */
input {
/* Input styling */
}

/* Styling navigation links */

header ul {
/* Navigation links styling */
}

/* Styling navigation link items */

header ul li {
/* Navigation link items styling */
}

/* Styling dropdown menu */

header ul li ul {
/* Dropdown menu styling */
}

/* Styling dropdown menu items */

header ul li ul li a {
/* Dropdown menu items styling */
}

/* Styling hover effect on dropdown menu items */

header ul li ul li a:hover {
/* Hover effect on dropdown menu items */
}

/* Styling navigation link items */

header ul li a {
/* Navigation link items styling */
}

/* Styling hover effect on navigation link items */

header ul li a:hover {
/* Hover effect on navigation link items */
}

/* Styling special span */

span {
/* Special span styling */
}

/* Styling main section */

.main {
/* Main section styling */
}

/* Styling main section links */

.main a {
/* Main section links styling */
}
/* Styling hover effect on main section links */
.main a:hover {
/* Hover effect on main section links */
}

/* Styling hero section */

.hero {
/* Hero section styling */
}

/* Styling text in hero section */

.txt {
/* Text styling in hero section */
}

/* Styling message in hero section */

.msg {
/* Message styling in hero section */
}

/* Styling slider container */

#pic {
/* Slider container styling */
}

/* Styling card */
.card {
/* Card styling */
}

/* Styling card image */

.card-image {
/* Card image styling */
}

/* Styling slide content */

.slide-content {
/* Slide content styling */
}

/* Styling swiper navigation buttons */

.swiper-navBtn {
/* Swiper navigation buttons styling */
}

/* Styling hover effect on swiper navigation buttons */

.swiper-navBtn:hover {
/* Hover effect on swiper navigation buttons */
}

/* Styling active bullet in swiper pagination */

.swiper-pagination-bullet-active {
/* Active bullet styling in swiper pagination */
}

/* Styling news section */

.nw {
/* News section styling */
}

/* Styling blocks */
.block {
/* Blocks styling */
}

/* Styling headers in blocks */

.hed {
/* Headers in blocks styling */
}

/* Styling marquee */
marquee {
/* Marquee styling */
}

/* Styling current section */

.cu {
/* Current section styling */
}

/* Keyframes for animation */

@keyframes myani {
/* Keyframes for animation */
}

/* Gallery styling */
.gallery img {
/* Gallery image styling */
}

/* Main section styling */

.main-section {
/* Main section styling */
}

/* Styling heading in main section */

.heading {
/* Heading styling in main section */
}

/* Footer styling */
.footer {
/* Footer styling */
}

/* Styling footer section */

.footer-sect {
 /* Footer section styling */
}

/* Styling headings in footer */

.footer-sect h2 {
/* Headings in footer styling */
}

/* Styling paragraphs in footer */

.footer-sect p {
/* Paragraphs in footer styling */
}

/* Styling menu items in footer */

.footer-menu li {
/* Menu items in footer styling */
}

/* Styling links in footer */

.footer-menu li a {
/* Links in footer styling */
}

/* Styling contact info in footer */

.footer-contact li {
/* Contact info in footer styling */
}

/* Container width */
.container {
/* Container width */
}
Output