Full Stack

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>
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>
initial-scale=1.0">
<title>Profile Images</title>
</head>
<body>
<h1>Profile Images</h1>
<p>Click on the image to view the profile.</p>


<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>


<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>
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>

<a href="image1-large.jpg">
<img src="image1-thumbnail.jpg" alt="Image 1"
</a>
</a>
</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 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>
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>
initial-scale=1.0">
<title>Registration Form</title>
<style>
table {
width: 60%;
margin: 20px auto;
}
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>
initial-scale=1.0">
<title>Frames Example</title>
</head>
<body>
<h1 align="center">HTML Frames Example</h1>
<frameset rows="30%, 40%, 30%">


<frame src="image.html" name="imageFrame">


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


<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>
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 {
padding: 15px;
}
aside {
padding: 15px;
margin-top: 20px;
}
figure {
margin: 0;
padding: 0;
}
figcaption {
text-align: center;
font-style: italic;
}
</style>
</head>
<body>


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


<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>

<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>
<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>


<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>
<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>
<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>
scale=1.0">
<title>Audio and Video Embedding</title>
<style>
body {
margin: 20px;
}
h1 {
color: #4CAF50;
}
.media-container {
margin-top: 20px;
}
.audio, .video {
}
</style>
</head>
<body>
<h1>Embedding Audio and Video in HTML</h1>
<div class="media-container">

<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>


<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>

scale=1.0">
<title>CSS Style Demonstration</title>


<style>
body {
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>

<p style="color: blue; font-size: 20px; text-align: center;">
This paragraph has inline styles.
(Selector: p, Property: color, Value: blue)
</p>

<p class="highlight">
This paragraph has internal styles applied using a class selector.
(Selector: .highlight, Property: background-color, Value: yellow)
</p>

<p class="external-style">
This paragraph uses external styles.
(Selector: .external-style, Property: color, Value: red)
</p>


<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>
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>
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;
}
/* Hexadecimal Color */
.hex-color {
background-color: #3498db; /* Blue */
color: white;
padding: 10px;
text-align: center;
}
/* RGB Color */
.rgb-color {
background-color: rgb(46, 204, 113); /* Green */
color: white;
padding: 10px;
text-align: center;
}
/* 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;
}
/* HSL Color */
.hsl-color {
background-color: hsl(120, 39%, 49%); /* Green */
color: white;
padding: 10px;
text-align: center;
}
/* 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>
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>
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 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>
scale=1.0">
<title>Internal and External JavaScript</title>
<style>
body {
}
</style>


<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 onclick="displayMessage()">Click me for Internal JS</button>
<hr>

<button onclick="displayExternalMessage()">Click me for External
JS</button>


<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>
scale=1.0">
<title>JavaScript Output Methods</title>
<style>
body {
}
#output {
margin-top: 20px;
padding: 20px;
}
</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>
scale=1.0">
<title>JavaScript Input Methods</title>
<style>
body {
}
#result {
margin-top: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h1>JavaScript Input Methods</h1>


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


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


<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 !== "") {
entered using input field: " + userInput;
} else {
provided!";
}
}
// 3. Using <textarea> element - Taking multi-line input

function takeInputFromTextArea() {
let userInput = document.getElementById("comments").value;
if (userInput !== "") {
entered using textarea: " + userInput;
} else {
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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voter Eligibility</title>
<style>
body {
margin: 20px;
}
table {
width: 50%;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 10px;
text-align: left;
}
th {
}
.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>

Full Stack

Uploaded by

Copyright:

Available Formats

Full Stack

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

Full Stack

Uploaded by

Copyright:

Available Formats

1.

Lists, Links and Images

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

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

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

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

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

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

d. HTML Program for Image Gallery Using

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

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

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

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

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

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

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

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

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

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

b. Write a HTML program, to embed audio and

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

c. Write a program to apply different types (or

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

<title>CSS Style Demonstration</title>

font-family: Arial, sans-serif;

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

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

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

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

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

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

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

This paragraph has inline styles.

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

This paragraph has internal styles applied using a class selector.

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

This paragraph uses external styles.

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

/* Adjacent Sibling Selector */

/* General Sibling Selector */

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

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

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

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

/* HSLA Color (with transparency) */