Scribd
Upload
113 views46 pages

Full Stack

Uploaded by

riserik513
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
113 views46 pages

Full Stack

Uploaded by

riserik513
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

1.

Lists, Links and Images


a. Write a HTML program, to explain the working of lists.
2. Note: It should have an ordered list, unordered list, nested lists and
ordered list in an unordered list and definition lists
3. b. Write a HTML program, to explain the working of hyperlinks using tag
and href, target Attributes.
4. c. Create a HTML document that has your image and your friend’s image
with a specific height and width. Also when clicked on the images it should
navigate to their respective profiles.
5. d. Write a HTML program, in such a way that, rather than placing large
images on a page, the preferred technique is to use thumbnails by setting
the height and width parameters to something like to 100*100 pixels. Each
thumbnail image is also a link to a full sized version of the image. Create an
image gallery using this technique

a. HTML Program to Explain Working of Lists (Ordered,


Unordered, Nested, and Definition Lists)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Lists</title>
</head>
<body>
<h1>Working with Lists</h1>

<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>

<h2>Nested List</h2>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul>

<h2>Ordered List in an Unordered List</h2>


<ul>
<li>Books
<ol>
<li>The Catcher in the Rye</li>
<li>To Kill a Mockingbird</li>
</ol>
</li>
<li>Movies
<ol>
<li>The Shawshank Redemption</li>
<li>The Godfather</li>
</ol>
</li>
</ul>

<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language used to create web pages</dd>
<dt>CSS</dt>
<dd>A style sheet language used to describe the
presentation of a web page</dd>
</dl>
</body>
</html>

b. HTML Program to Explain Working of Hyperlinks Using <a> Tag and href,
target Attributes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Hyperlinks Example</title>
</head>
<body>
<h1>Working with Hyperlinks</h1>

<p>Visit <a href="https://www.example.com"


target="_blank">Example Website</a> to learn more.</p>
<p>Click <a href="about.html">here</a> to go to the About
Us page.</p>
<p>Go back to the <a href="index.html"
target="_self">Home Page</a>.</p>
</body>
</html>

c.HTML Document with Your Image and Your Friend’s


Image (Clickable to Navigate to Profiles)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Profile Images</title>
</head>
<body>
<h1>Profile Images</h1>

<p>Click on the image to view the profile.</p>

<!-- Your Image -->


<a href="your-profile.html">
<img src="your-image.jpg" alt="Your Image" width="200"
height="200">
</a>

<p>Click on the image to view your friend's profile.</p>

<!-- Friend's Image -->


<a href="friends-profile.html">
<img src="friends-image.jpg" alt="Friend's Image"
width="200" height="200">
</a>
</body>
</html>

d. HTML Program for Image Gallery Using


Thumbnails
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>

<p>Click on the thumbnails to view the full-size images.</p>

<div>
<!-- Thumbnail 1 -->
<a href="image1-large.jpg">
<img src="image1-thumbnail.jpg" alt="Image 1"
width="100" height="100">
</a>
<!-- Thumbnail 2 -->
<a href="image2-large.jpg">
<img src="image2-thumbnail.jpg" alt="Image 2"
width="100" height="100">
</a>
<!-- Thumbnail 3 -->
<a href="image3-large.jpg">
<img src="image3-thumbnail.jpg" alt="Image 3"
width="100" height="100">
</a>
</div>
</body>
</html>

2. HTML Tables, Forms and Frames a. Write a HTML


program, to explain the working of tables. (use tags:
<table>, <tr>, <th>, <td> and attributes: border,
rowspan, colspan)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Table Example</title>
</head>
<body>
<h1>HTML Table Example</h1>

<p>This table demonstrates the use of various HTML table tags


and attributes like <code>border</code>, <code>rowspan</code>,
and <code>colspan</code>.</p>

<table border="1">
<caption><strong>Student Information
Table</strong></caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
<th>Address</th>
</tr>
<tr>
<td>John Doe</td>
<td>15</td>
<td>A</td>
<td>1234 Elm St, Springfield</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>16</td>
<td>B</td>
<td>5678 Oak St, Rivertown</td>
</tr>
<tr>
<td>Mary Johnson</td>
<td>17</td>
<td>C</td>
<td>9101 Pine St, Lakeview</td>
</tr>
<tr>
<td colspan="2">Total Students</td>
<td colspan="2">3</td>
</tr>
<tr>
<td rowspan="2">Teacher</td>
<td>Mr. Adams</td>
<td colspan="2">Science Teacher</td>
</tr>
<tr>
<td>Ms. Turner</td>
<td colspan="2">Math Teacher</td>
</tr>
</table>

</body>
</html>

b. Write a HTML program, to explain the working of tables


by preparing a timetable. (Note: Use <caption> tag to
set the caption to the table & also use cell spacing, cell
padding, border, rowspan, colspan etc.).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Timetable</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
caption {
font-size: 24px;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<h1>Student Timetable</h1>

<table cellspacing="10" cellpadding="15" border="1">


<caption>Weekly Timetable</caption>
<tr>
<th rowspan="2">Time</th>
<th colspan="5">Days of the Week</th>
</tr>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>8:00 AM - 9:00 AM</td>
<td>Math</td>
<td>English</td>
<td>History</td>
<td>Science</td>
<td>Physical Education</td>
</tr>
<tr>
<td>9:00 AM - 10:00 AM</td>
<td>Math</td>
<td>Computer Science</td>
<td>Math</td>
<td>Biology</td>
<td>Art</td>
</tr>
<tr>
<td>10:00 AM - 11:00 AM</td>
<td>History</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
<tr>
<td>11:00 AM - 12:00 PM</td>
<td>English</td>
<td>Physical Education</td>
<td>Geography</td>
<td>Math</td>
<td>History</td>
</tr>
<tr>
<td>12:00 PM - 1:00 PM</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
<tr>
<td>1:00 PM - 2:00 PM</td>
<td>Science</td>
<td>History</td>
<td>Art</td>
<td>Geography</td>
<td>Math</td>
</tr>
<tr>
<td>2:00 PM - 3:00 PM</td>
<td>Geography</td>
<td>Biology</td>
<td>Music</td>
<td>Computer Science</td>
<td>Science</td>
</tr>
</table>

</body>
</html>

c. Write a HTML program, to explain the working of forms


by designing Registration form. (Note: Include text field,
password field, number field, date of birth field,
checkboxes, radio buttons, list boxes using
<select>&<option> tags, <text area> and two buttons ie:
submit and reset. Use tables to provide a better view).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Registration Form</title>
<style>
table {
width: 60%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border: 1px solid #ccc;
}
th {
background-color: #f4f4f4;
}
caption {
font-size: 24px;
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>

<h1 align="center">Registration Form</h1>

<form action="#" method="post">


<table>
<caption>Personal Information</caption>
<tr>
<th><label for="firstName">First Name:</label></th>
<td><input type="text" id="firstName"
name="firstName" required></td>
</tr>
<tr>
<th><label for="lastName">Last Name:</label></th>
<td><input type="text" id="lastName"
name="lastName" required></td>
</tr>
<tr>
<th><label for="email">Email:</label></th>
<td><input type="email" id="email" name="email"
required></td>
</tr>
<tr>
<th><label for="password">Password:</label></th>
<td><input type="password" id="password"
name="password" required></td>
</tr>
<tr>
<th><label for="phone">Phone Number:</label></th>
<td><input type="tel" id="phone" name="phone"
pattern="[0-9]{10}" required></td>
</tr>
<tr>
<th><label for="dob">Date of Birth:</label></th>
<td><input type="date" id="dob" name="dob"
required></td>
</tr>
<tr>
<th>Gender:</th>
<td>
<input type="radio" id="male" name="gender"
value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender"
value="other">
<label for="other">Other</label>
</td>
</tr>
<tr>
<th>Hobbies:</th>
<td>
<input type="checkbox" id="reading"
name="hobbies" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports"
name="hobbies" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music"
name="hobbies" value="music">
<label for="music">Music</label>
</td>
</tr>
<tr>
<th><label for="country">Country:</label></th>
<td>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select>
</td>
</tr>
<tr>
<th><label for="bio">Short Bio:</label></th>
<td><textarea id="bio" name="bio" rows="4"
cols="50"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</form>

</body>
</html>
d. Write a HTML program, to explain the working of frames, such
that page is to be divided into 3 parts on either direction.
(Note: first frame  image, second frame  paragraph, third
frame  hyperlink. And also make sure of using “no frame”
attribute such that frames to be fixed).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Frames Example</title>
</head>
<body>
<h1 align="center">HTML Frames Example</h1>

<frameset rows="30%, 40%, 30%">


<!-- First Frame: Image -->
<frame src="image.html" name="imageFrame">

<!-- Second Frame: Paragraph -->


<frame src="paragraph.html" name="paragraphFrame">

<!-- Third Frame: Hyperlink -->


<frame src="hyperlink.html" name="hyperlinkFrame">
</frameset>

<noframes>
<body>
<p>Your browser does not support frames. Please
upgrade your browser or use a modern browser to view this
page.</p>
</body>
</noframes>
</body>
</html>

3. HTML 5 and Cascading Style Sheets, Types of CSS a.


Write a HTML program, that makes use of <article>,
<aside>, <figure>, <figcaption>, <footer>, <header>,
<main>, <nav>, <section>, <div>, <span> tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML5 Semantic Elements</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
article {
background-color: #f4f4f4;
padding: 15px;
margin-bottom: 20px;
}
aside {
background-color: #f4f4f4;
padding: 15px;
margin-top: 20px;
}
figure {
margin: 0;
padding: 0;
}
figcaption {
text-align: center;
font-style: italic;
}
</style>
</head>
<body>

<!-- Header Section -->


<header>
<h1>HTML5 Semantic Elements</h1>
<p>Using <code>article</code>, <code>aside</code>,
<code>footer</code>, and more!</p>
</header>

<!-- Navigation Section -->


<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<!-- Main Content Section -->


<main>
<!-- Article Section -->
<article>
<header>
<h2>Introduction to HTML5 Semantic Tags</h2>
</header>
<p>HTML5 introduced several new semantic tags to improve the
structure of a webpage. These tags help search engines and other user
devices determine the importance of the content and its relationship to
other content on the page.</p>
</article>

<!-- Section with a Figure -->


<section>
<h2>Semantic Elements in Action</h2>
<figure>
<img src="https://via.placeholder.com/300x200" alt="HTML5
Elements" width="300">
<figcaption>HTML5 elements demonstrated
above.</figcaption>
</figure>
<p>The <code>figure</code> element is used to wrap media
content like images, videos, or illustrations, along with an optional
<code>figcaption</code> to provide a description.</p>
</section>

<!-- Another Article -->


<article>
<header>
<h2>Advantages of Using Semantic Elements</h2>
</header>
<p>By using semantic elements, we make the page more
accessible and easier to understand for both humans and machines. This
is especially beneficial for SEO and screen readers.</p>
</article>

<!-- Aside Section -->


<aside>
<h3>Did You Know?</h3>
<p>The <code>aside</code> element is used for content that is
tangentially related to the main content. It could be a sidebar or other
related material.</p>
</aside>
</main>

<!-- Footer Section -->


<footer>
<p>© 2024 All Rights Reserved. Created with HTML5 Semantic
Elements</p>
</footer>

</body>
</html>

b. Write a HTML program, to embed audio and


video into HTML web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Audio and Video Embedding</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1 {
color: #4CAF50;
}
.media-container {
margin-top: 20px;
}
.audio, .video {
margin-bottom: 30px;
}
</style>
</head>
<body>

<h1>Embedding Audio and Video in HTML</h1>

<div class="media-container">
<!-- Audio Player -->
<div class="audio">
<h2>Audio Example</h2>
<audio controls>
<source
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-
1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>

<!-- Video Player -->


<div class="video">
<h2>Video Example</h2>
<video controls width="600">
<source
src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4">
<source
src="https://www.w3schools.com/html/mov_bbb.ogg"
type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>

</body>
</html>

c. Write a program to apply different types (or


levels of styles or style specification formats) -
inline, internal, external styles to HTML elements.
(identify selector, property and
value).
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

<title>CSS Style Demonstration</title>


<!-- Internal CSS (within <style> tag) -->

<style>

body {

font-family: Arial, sans-serif;

h1 {

color: #4CAF50; /* Property: color, Value: #4CAF50 */

text-align: center; /* Property: text-align, Value: center */

p{

color: #333; /* Property: color, Value: #333 */

font-size: 18px; /* Property: font-size, Value: 18px */

.highlight {

background-color: yellow; /* Property: background-color,


Value: yellow */

font-weight: bold; /* Property: font-weight, Value: bold */

</style>

</head>

<body>
<h1>CSS Style Types: Inline, Internal, External</h1>

<!-- Inline CSS (directly applied to the element) -->

<p style="color: blue; font-size: 20px; text-align: center;">

This paragraph has inline styles.

(Selector: p, Property: color, Value: blue)

</p>

<!-- Internal CSS is applied via the <style> tag in the head -->

<p class="highlight">

This paragraph has internal styles applied using a class selector.

(Selector: .highlight, Property: background-color, Value: yellow)

</p>

<!-- External CSS (link to external stylesheet) -->

<p class="external-style">

This paragraph uses external styles.

(Selector: .external-style, Property: color, Value: red)

</p>

<!-- External CSS link -->


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

</body>

</html>
4. Selector forms a. Write a program to apply different
types of selector forms i. Simple selector (element, id,
class, group, universal) ii. Combinator selector
(descendant, child, adjacent sibling, general sibling) iii.
Pseudo-class selector iv. Pseudo-element selector v.
Attribute selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Selectors Demonstration</title>
<style>
/* Simple Selectors */
/* Element Selector */
p{
color: green; /* Applies to all <p> elements */
}

/* ID Selector */
#main-heading {
text-align: center; /* Applies to the element with id="main-
heading" */
color: blue;
}

/* Class Selector */
.highlight {
background-color: yellow; /* Applies to elements with
class="highlight" */
font-weight: bold;
}

/* Group Selector */
h1, h2, p {
font-family: Arial, sans-serif; /* Applies to <h1>, <h2>, and <p>
elements */
}

/* Universal Selector */
*{
font-size: 16px; /* Applies to all elements on the page */
}

/* Combinator Selectors */
/* Descendant Selector */
#content p {
color: red; /* Applies to all <p> elements inside the element
with id="content" */
}

/* Child Selector */
#container > h3 {
color: purple; /* Applies only to <h3> that are direct children
of the element with id="container" */
}

/* Adjacent Sibling Selector */


h2 + p {
margin-top: 20px; /* Applies to the first <p> immediately after
each <h2> */
}

/* General Sibling Selector */


h2 ~ p {
font-style: italic; /* Applies to all <p> siblings that come after
<h2> */
}

/* Pseudo-class Selectors */
/* :hover pseudo-class */
a:hover {
color: red; /* Changes link color when hovered */
}
/* :nth-child pseudo-class */
li:nth-child(odd) {
background-color: #f0f0f0; /* Applies background color to
odd-numbered <li> items */
}

/* :first-child pseudo-class */
ul li:first-child {
font-size: 18px; /* Makes the first <li> larger */
}

/* Pseudo-element Selectors */
/* ::before pseudo-element */
h2::before {
content: "→ "; /* Adds an arrow before each <h2> */
color: green;
}

/* ::after pseudo-element */
p::after {
content: " (End of paragraph)"; /* Adds text after each <p> */
font-style: italic;
}
/* Attribute Selectors */
/* [attribute] selector */
a[target] {
color: blue; /* Applies style to <a> elements with a target
attribute */
}

/* [attribute="value"] selector */
input[type="text"] {
border: 2px solid green; /* Applies style to <input> elements
with type="text" */
}
</style>
</head>
<body>

<h1 id="main-heading">CSS Selectors Demonstration</h1>


<div id="content">
<p>This paragraph will have a red color (descendant
selector).</p>
</div>

<div id="container">
<h3>This is a direct child of the container</h3>
<p>This is a paragraph inside the container.</p>
</div>

<h2>This is a heading</h2>
<p>This paragraph comes after an h2 and will be styled by the
general sibling selector.</p>

<ul>
<li>Item 1 (Odd)</li>
<li>Item 2 (Even)</li>
<li>Item 3 (Odd)</li>
</ul>

<a href="https://www.example.com" target="_blank">Visit


Example</a>

<input type="text" placeholder="Enter text here" />


<input type="password" placeholder="Enter password" />

<p class="highlight">This paragraph has a highlighted


background.</p>

</body>
</html>
6. CSS with Color, Background, Font, Text and CSS Box Model
a. Write a program to demonstrate the various ways you
can reference a color in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Color Reference in CSS</title>
<style>
/* Color by Name */
.color-name {
background-color: blue;
color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}

/* Hexadecimal Color */
.hex-color {
background-color: #3498db; /* Blue */
color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}

/* RGB Color */
.rgb-color {
background-color: rgb(46, 204, 113); /* Green */
color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}
/* RGBA Color (with transparency) */
.rgba-color {
background-color: rgba(231, 76, 60, 0.7); /* Red with 70% opacity */
color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}

/* HSL Color */
.hsl-color {
background-color: hsl(120, 39%, 49%); /* Green */
color: white;
padding: 10px;
text-align: center;
margin-bottom: 10px;
}

/* HSLA Color (with transparency) */


.hsla-color {
background-color: hsla(120, 50%, 60%, 0.6); /* Green with 60%
opacity */
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>

<h1 style="text-align: center;">Different Ways to Reference Colors in


CSS</h1>

<div class="color-name">
<p>This is a color defined by its name: <strong>blue</strong></p>
</div>

<div class="hex-color">
<p>This is a color defined by its hexadecimal value:
<strong>#3498db</strong></p>
</div>

<div class="rgb-color">
<p>This is a color defined by its RGB value: <strong>rgb(46, 204,
113)</strong></p>
</div>

<div class="rgba-color">
<p>This is a color defined by its RGBA value (with opacity):
<strong>rgba(231, 76, 60, 0.7)</strong></p>
</div>

<div class="hsl-color">
<p>This is a color defined by its HSL value: <strong>hsl(120, 39%,
49%)</strong></p>
</div>

<div class="hsla-color">
<p>This is a color defined by its HSLA value (with opacity):
<strong>hsla(120, 50%, 60%, 0.6)</strong></p>
</div>

</body>
</html>

b. Write a CSS rule that places a background image halfway


down the page, tilting it horizontally. The image should
remain in place when the user scrolls up or down.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Background Image Effect</title>
<style>
body {
background-image: url('https://www.example.com/your-
image.jpg'); /* Replace with your image URL */
background-position: center 50%; /* Center horizontally,
place halfway vertically */
background-attachment: fixed; /* Keeps the image fixed
when scrolling */
background-size: cover; /* Ensure the image covers the
whole screen */
transform: rotate(45deg); /* Tilt the image by 45 degrees
*/
background-repeat: no-repeat; /* Prevents the image from
repeating */
height: 2000px; /* Allows scrolling */
margin: 0;
}

h1 {
color: white;
text-align: center;
padding-top: 200px;
}

p{
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Fixed and Tilted Background Image</h1>
<p>Scroll down to see the effect of the fixed, tilted background
image.</p>
</body>
</html>
c. Write a program using the following terms related
to CSS font and text: i. font-size ii. font-weight iv.
text-decoration v. text-transformation iii. font-style
vi. text-alignment

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Font and Text Properties</title>
<style>
/* Applying font properties and text transformations */
.font-example {
font-size: 24px; /* Font size */
font-weight: bold; /* Font weight */
font-style: italic; /* Font style */
text-decoration: underline; /* Text decoration */
text-transform: uppercase; /* Text transformation */
text-align: center; /* Text alignment */
color: #4CAF50; /* Text color */
margin: 20px;
}

.additional-example {
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: line-through;
text-transform: capitalize;
text-align: left;
color: #FF5722;
margin: 20px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Font and Text Properties</h1>

<p class="font-example">
This is an example of applying various CSS font and text properties:
font-size, font-weight, font-style, text-decoration, text-transform, and text-
align.
</p>

<p class="additional-example">
This is another example with different text transformations and styles.
</p>

</body>
</html>

e. Write a program, to explain the importance of CSS Box


model using i. Content ii. Border iii. Margin iv. Padding

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Box Model Example</title>
<style>
/* Container style for visual clarity */
.container {
width: 80%;
margin: 0 auto;
text-align: center;
}

/* Box model demonstration */


.box {
width: 300px; /* Width of the content */
padding: 20px; /* Space between content and border */
border: 5px solid #4CAF50; /* Green border around the padding */
margin: 20px; /* Space between the border and surrounding elements
*/
background-color: #f0f0f0; /* Light background for content area */
font-size: 18px;
color: #333;
}

/* Box with different padding, border, and margin values */


.box-example {
width: 200px;
padding: 10px;
border: 2px dashed #0000FF;
margin: 30px;
background-color: #FFEB3B;
font-size: 16px;
color: #000;
}

h2 {
color: #333;
}
</style>
</head>
<body>

<div class="container">
<h2>Understanding the CSS Box Model</h2>

<div class="box">
<p>This is a box demonstrating the CSS Box Model.</p>
<p>The content area is inside the box. Padding is the space between
content and the border. The border surrounds the padding, and the margin is
the space outside the border.</p>
</div>

<div class="box-example">
<p>This box has different padding, border, and margin values for
comparison.</p>
</div>
</div>

</body>
</html>

7. Applying JavaScript - internal and external, I/O, Type Conversion a.


Write a program to embed internal and external JavaScript in a
web page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Internal and External JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>

<!-- Internal JavaScript -->


<script>
// This is the internal JavaScript code
function displayMessage() {
alert("This is an internal JavaScript function!");
}
</script>

</head>
<body>

<h1>Internal and External JavaScript Example</h1>

<!-- Button to trigger internal JavaScript function -->


<button onclick="displayMessage()">Click me for Internal JS</button>

<hr>
<!-- External JavaScript File -->
<button onclick="displayExternalMessage()">Click me for External
JS</button>

<!-- External JavaScript File link -->


<script src="external.js"></script>

</body>
</html>

b. Write a program to explain the different ways for


displaying output.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Output Methods</title>
<style>
body {
font-family: Arial, sans-serif;
}

#output {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>

<h1>JavaScript Output Methods</h1>

<button onclick="showAlert()">Alert Output</button>


<button onclick="writeToDocument()">Write to Document</button>
<button onclick="logToConsole()">Console Log Output</button>
<button onclick="changeHTMLContent()">Change HTML
Content</button>

<div id="output">
<p><strong>Output will be displayed here using
innerHTML.</strong></p>
</div>

<script>
// 1. Using alert() - Displays a pop-up alert message
function showAlert() {
alert("This is an alert box showing output!");
}

// 2. Using document.write() - Writes to the HTML document


function writeToDocument() {
document.write("<h2>This text is written using
document.write()</h2>");
}

// 3. Using console.log() - Outputs to the browser console


function logToConsole() {
console.log("This is a log message to the browser's console.");
}

// 4. Using innerHTML - Changes the content of a specific HTML


element
function changeHTMLContent() {
document.getElementById("output").innerHTML = "<p>New content
has been inserted dynamically using innerHTML!</p>";
}
</script>

</body>
</html>

c. Write a program to explain the different ways for taking


input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>JavaScript Input Methods</title>
<style>
body {
font-family: Arial, sans-serif;
}

#result {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>

<h1>JavaScript Input Methods</h1>

<!-- Using prompt() for input -->


<button onclick="takeInputPrompt()">Input using prompt()</button>

<hr>

<!-- Using <input> field for user input -->


<label for="nameInput">Enter your name:</label>
<input type="text" id="nameInput">
<button onclick="takeInputFromInputField()">Submit</button>

<hr>

<!-- Using <textarea> for multi-line input -->


<label for="comments">Enter your comments:</label>
<textarea id="comments" rows="4" cols="50"></textarea>
<button onclick="takeInputFromTextArea()">Submit</button>
<hr>

<div id="result">
<h3>Output will be displayed here:</h3>
<p id="outputText"></p>
</div>

<script>
// 1. Using prompt() - Prompt the user for input through a pop-up box
function takeInputPrompt() {
let userInput = prompt("Please enter your name:");
if (userInput !== null && userInput !== "") {
document.getElementById("outputText").innerHTML = "You
entered using prompt: " + userInput;
} else {
document.getElementById("outputText").innerHTML = "No input
provided!";
}
}

// 2. Using <input> element - Taking input from a text field


function takeInputFromInputField() {
let userInput = document.getElementById("nameInput").value;
if (userInput !== "") {
document.getElementById("outputText").innerHTML = "You
entered using input field: " + userInput;
} else {
document.getElementById("outputText").innerHTML = "No input
provided!";
}
}

// 3. Using <textarea> element - Taking multi-line input


function takeInputFromTextArea() {
let userInput = document.getElementById("comments").value;
if (userInput !== "") {
document.getElementById("outputText").innerHTML = "You
entered using textarea: " + userInput;
} else {
document.getElementById("outputText").innerHTML = "No input
provided!";
}
}
</script>

</body>
</html>

d. Create a webpage which uses prompt dialogue box to


ask a voter for his name and age. Display the information
in table format along with either the voter can vote or not

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voter Eligibility</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}

table {
width: 50%;
margin-top: 20px;
border-collapse: collapse;
}

table, th, td {
border: 1px solid #ddd;
}

th, td {
padding: 10px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

.eligible {
color: green;
}

.not-eligible {
color: red;
}
</style>
</head>
<body>

<h1>Voter Eligibility Check</h1>

<script>
// Prompt user for name and age
let voterName = prompt("Please enter your name:");
let voterAge = prompt("Please enter your age:");

// Convert age to number


voterAge = parseInt(voterAge);

// Check if age is valid and if the voter is eligible


let eligibility = (voterAge >= 18) ? "Eligible to vote" : "Not eligible to vote";

// Display the information in a table


document.write(`
<table>
<caption>Voter Information</caption>
<tr>
<th>Name</th>
<td>${voterName}</td>
</tr>
<tr>
<th>Age</th>
<td>${voterAge}</td>
</tr>
<tr>
<th>Eligibility</th>
<td class="${voterAge >= 18 ? 'eligible' : 'not-eligible'}">${eligibility}</td>
</tr>
</table>
`);
</script>

</body>
</html>

You might also like