Scribd
Upload
4 views

HTML-1

Uploaded by

S Manikanta
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
4 views

HTML-1

Uploaded by

S Manikanta
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/ 26

2. Create following table using XHTML tags.

Properly align cells, give suitable cell


padding and
cell spacing, and apply background color, bold and emphasis necessary
Department
Sem1
SubjectA
SubjectB
SubjectC
Sem2
SubjectE
SubjectF
SubjectG
Sem3
SubjectH
SubjectI
SubjectJ

<!DOCTYPE html>
<html>
<head>
<title>Department Table</title>
<style type="text/css">
table {
width: 60%;
margin: auto;
border-collapse: separate;
border-spacing: 10px;
background-color: #f9f9f9;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #000;
}
th {
background-color: #4682b4;
color: white;
font-weight: bold;
}
td {
background-color: #e0f0ff;
}
</style>
</head>
<body>
<h2 style="text-align: center;">Department Subject Structure</h2>
<table>
<tr>
<th colspan="4"><b><em>Department</em></b></th>
</tr>
<tr>
<th><b>Sem 1</b></th>
<td>Kannada</td>
<td>English</td>
<td>Hindi</td>
</tr>
<tr>
<th><b>Sem 2</b></th>
<td>Social science</td>
<td>Maths</td>
<td>Science</td>
</tr>
<tr>
<th><b>Sem 3</b></th>
<td>CAD</td>
<td>Physics</td>
<td>Chemistry</td>
</tr>
</table>
</body>
</html>

Use HTML5 for performing following tasks:


(i) Draw a square using HTML5 SVG , fill the square with green color and make 6px
brown
stroke width
(ii) Write the following mathematical expression by using HTML5 MathML.
d=x2-y2
(iii) Redirecting current page to another page after 5 seconds using HTML5 meta tag

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="5; url='https://example.com'">
<title>HTML5 Tasks</title>
</head>
<body>
<h1>HTML5 Tasks Demonstration</h1>
<!-- Task (i): SVG Square -->
<section>
<h2>1. SVG Square</h2>
<svg width="200" height="200">
<rect
x="20" y="20"
width="160" height="160"
fill="green"
stroke="brown"
stroke-width="6"
/>
</svg>
</section>
<!-- Task (ii): MathML Expression -->
<section>
<h2>2. Mathematical Expression</h2>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>d</mi>
<mo>=</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</math>
</section>
<!-- Task (iii): Redirect Notice -->
<section>
<h2>3. Page Redirection</h2>
<p>This page will automatically redirect to example.com in 5 seconds...</p>
</section>
</body>
</html>
Key Explanations:
1. Document Structure:
o <!DOCTYPE html> declares this as an HTML5 document
o <html lang="en"> sets the document language to English
o The document is divided into head and body sections
2. Meta Tags:
o charset="UTF-8" ensures proper character encoding
o viewport settings make the page responsive on mobile devices
o http-equiv="refresh" handles the 5-second redirect (Task 3)
3. SVG Square (Task 1):
o <svg> creates a vector graphics container
o <rect> draws a rectangle with specified dimensions
o Attributes control fill color, stroke (border) color and width
4. MathML (Task 2):
o <math> is the MathML container
o <mi> marks up variables/identifiers
o <mo> marks up operators
o <msup> handles superscripts (exponents)
5. Semantic HTML5:
o <section> elements organize the content
o Proper heading hierarchy (h1, h2) is maintained
o Explanatory text accompanies each demonstration

Demonstrate the following HTML5 Semantic tags- <article>, <aside>, <details>,


<figcaption>,
<figure>, <footer>, <header>, <main>, <mark>, <section> for a webpage that gives
information
about travel experience.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Italian Adventure - Travel Experience</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header, footer {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
display: flex;
flex-wrap: wrap;
}
article {
flex: 3;
padding: 20px;
}
aside {
flex: 1;
background-color: #f9f9f9;
padding: 20px;
}
figure {
margin: 20px 0;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
section {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
mark {
background-color: #ffeaa7;
padding: 2px 4px;
}
details {
background-color: #f1f1f1;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>My Himalayan Adventure</h1>
<p>A journey through the heart of Love</p>
</header>

<!-- Navigation -->


<nav>
<a href="#overview">Overview</a>
<a href="#images">Images</a>
<a href="#distance">Distance</a>
<a href="#tips">Travel Tips</a>
</nav>

<!-- Main Content -->


<main>
<!-- Primary Article Content -->
<article>
<section id="overview">
<h2>Discovering Himalaya</h2>
<p>Last summer, I embarked on a <mark>two-week journey</mark> through the
picturesque landscapes of Himalaya. The rolling hills, vineyards, and medieval towns left an
indelible mark on my soul.</p>

<figure>
<img src="https:" alt="Details">
<figcaption>Add Fig</figcaption>
</figure>
</section>

<section id="florence">
<h2>Florence: Cradle of the Renaissance</h2>
<p>My first stop was Florence, where art and history come alive at every
corner.</p>

<details>
<summary>Must-see attractions in Florence</summary>
<ul>
<li>The Duomo and its magnificent dome</li>
<li>Uffizi Gallery</li>
<li>Ponte Vecchio</li>
<li>Pitti Palace and Boboli Gardens</li>
</ul>
</details>

<p>The highlight was undoubtedly seeing Michelangelo's David at the Accademia.


<mark>The sheer scale and perfection of the sculpture is breathtaking.</mark></p>
</section>

<section id="siena">
<h2>Siena: Medieval Splendor</h2>
<p>From Florence, I traveled to Siena, a perfectly preserved medieval city known
for its Palio horse race.</p>

<figure>
<img src="https://images.unsplash.com/photo-1579613832125-5d34a13ffe2a"
alt="Piazza del Campo in Siena">
<figcaption>Piazza del Campo, the heart of Siena</figcaption>
</figure>

<p>The Gothic architecture of Siena's cathedral is particularly striking, with its


alternating dark and light marble stripes.</p>
</section>
</article>

<!-- Sidebar Content -->


<aside>
<h3>Quick Travel Facts</h3>
<p><strong>Best Time to Visit:</strong> May-June or September-October</p>
<p><strong>Local Specialty:</strong> Pici pasta with wild boar sauce</p>
<p><strong>Must-Try Wine:</strong> Chianti Classico</p>

<details>
<summary>Essential Italian Phrases</summary>
<ul>
<li>Buongiorno - Good morning</li>
<li>Grazie - Thank you</li>
<li>Dov'è il bagno? - Where is the bathroom?</li>
<li>Quanto costa? - How much does it cost?</li>
</ul>
</details>
</aside>
</main>

<!-- Footer -->


<footer>
<p>&copy; 2023 My Travel Journal. All photos are my own unless otherwise
noted.</p>
<p>Follow my adventures on Instagram @TravelWithMe</p>
</footer>
</body>
</html>
5. Create a class called income, and make it a background color of #0ff.
Create a class called expenses, and make it a background color of #f0f.
Create a class called profit, and make it a background color of #f00.
Throughout the document, any text that mentions income, expenses, or profit, attach
the appropriate class to that piece of text. Further create following line of text in the
same document:The current price is 50₹ and new price is 40₹

<!DOCTYPE html>
<html>
<head>
<title>Financial Terms Highlight</title>
<style>
.income {
background-color: #0ff; /* Cyan */
padding: 2px;
}

.expenses {
background-color: #f0f; /* Magenta */
padding: 2px;
}

.profit {
background-color: #f00; /* Red */
color: white;
padding: 2px;
}

body {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
padding: 20px;
}
</style>
</head>
<body>

<p>Understanding your <span class="income">income</span> is the first step to


budgeting.</p>
<p>It’s important to track your <span class="expenses">expenses</span> regularly.</p>
<p>Your <span class="profit">profit</span> is the difference between income and
expenses.</p>
<p>If your <span class="income">income</span> increases and <span
class="expenses">expenses</span> stay the same, your <span class="profit">profit</span>
grows.</p>

<p>The current price is 50₹ and new price is 40₹.</p>

</body>
</html>
6. Change the tag li to have the following properties:
 A display status of inline
 A medium, double-lined, black border
 No list style type
Add the following properties to the style for li:
 Margin of 5px
 Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to
the left
Also demonstrate list style type with user defined image logos.
<!DOCTYPE html>
<html>
<head>
<title>Styled List Items</title>
<style>
/* Default styled list items */
ul.inline-list li {
display: inline;
border: medium double black;
list-style-type: none;
margin: 5px;
padding: 10px 20px 10px 20px;
}

/* List with custom image bullets */


ul.custom-bullet {
list-style-image:
url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Red_circle.svg/20px-
Red_circle.svg.png');
}

ul.custom-bullet li {
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>

<h2>Inline Styled List</h2>


<ul class="inline-list">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>

<h2>List with Custom Bullet Image</h2>


<ul class="custom-bullet">
<li>Income</li>
<li>Expenses</li>
<li>Profit</li>
</ul>

</body>
</html>

7. Create following web page using HTML and CSS with tabular layout

<!DOCTYPE html>
<html>
<head>
<title>Sign Up Today</title>
<style>
body {
background-color: #e8d3b8;
font-family: Arial, sans-serif;
}

.signup-container {
width: 300px;
margin: 100px auto;
padding: 20px;
}

h1 {
font-size: 28px;
font-weight: bold;
}

table {
width: 100%;
}

td {
padding: 8px 0;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}

.register-button {
background-color: #fdbf42;
border: none;
color: white;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}

.register-button:hover {
background-color: #e6a91e;
}
</style>
</head>
<body>

<div class="signup-container">
<h1>Sign up today</h1>
<form>
<table>
<tr>
<td><label for="name">Name:</label></td>
</tr>
<tr>
<td><input type="text" id="name" name="name"></td>
</tr>
<tr>
<td><label for="email">E-mail:</label></td>
</tr>
<tr>
<td><input type="email" id="email" name="email"></td>
</tr>

<tr>
<td><label for="password">Password:</label></td>
</tr>
<tr>
<td><input type="password" id="password" name="password"></td>
</tr>

<tr>
<td><label for="confirm">Confirm password:</label></td>
</tr>
<tr>
<td><input type="password" id="confirm" name="confirm"></td>
</tr>

<tr>
<td><br><input type="submit" value="Register" class="register-button"></td>
</tr>
</table>
</form>
</div>

</body>
</html>
8. Create following calculator interface with HTML and CSS
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}

.calculator {
background-color: #f9b7e1;
padding: 20px;
border: 2px solid #2e2e94;
border-radius: 15px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.display {
width: 100%;
padding: 10px;
font-size: 20px;
text-align: right;
border-radius: 5px;
border: 1px solid #888;
margin-bottom: 15px;
box-sizing: border-box;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 60px);
gap: 10px;
justify-content: center;
}

.buttons button {
background-color: #5d5d6b;
color: white;
border: none;
padding: 15px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
}

.buttons button:hover {
background-color: #4a4a59;
}
</style>
</head>
<body>

<div class="calculator">
<input type="text" id="display" class="display" readonly>
<div class="buttons">
<button>(</button>
<button>)</button>
<button>C</button>
<button>%</button>

<button>7</button>
<button>8</button>
<button>9</button>
<button>X</button>

<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>

<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>

<button>0</button>
<button>.</button>
<button>/</button>
<button>=</button>
</div>
</div>

<script>
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.buttons button');

buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.textContent;

if (value === 'C') {


display.value = '';
} else if (value === '=') {
try {
display.value = eval(display.value.replace(/X/g, '*'));
} catch {
display.value = 'Error';
}
} else {
display.value += value;
}
});
});
</script>

</body>
</html>
9. Write a Java Script program that on clicking a button, displays scrolling text which
moves from left to right with a small delay
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text</title>
<style>
#scrollContainer {
width: 100%;
overflow: hidden;
white-space: nowrap;
border: 1px solid #ccc;
padding: 10px;
height: 40px;
font-size: 20px;
position: relative;
}

#scrollText {
position: absolute;
left: 0;
}

button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>

<h2>Click the button to scroll the text</h2>


<div id="scrollContainer">
<span id="scrollText">🌟 Welcome to JavaScript Scrolling Text Demo! 🌟</span>
</div>
<button onclick="startScrolling()">Start Scrolling</button>

<script>
let interval;
let position = 0;

function startScrolling() {
const text = document.getElementById('scrollText');
position = -text.offsetWidth; // Start from left outside

clearInterval(interval); // Reset if clicked again


interval = setInterval(() => {
position += 2; // Move right
text.style.left = position + 'px';

// Reset if it goes outside right boundary


if (position > window.innerWidth) {
position = -text.offsetWidth;
}
}, 20); // Delay in milliseconds
}
</script>
</body>
</html>
10. Create a webpage containing 3 overlapping images using HTML, CSS and JS.
Further when the mouse is over any image, it should be on the top and fully displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overlapping Images</title>
<style>
.image-container {
position: relative;
width: 500px;
height: 400px;
margin: 50px auto;
}

.overlap-image {
position: absolute;
width: 300px;
height: 300px;
object-fit: cover;
border: 3px solid white;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
transition: all 0.3s ease;
}

/* Initial positions for the images */


#image1 {
top: 0;
left: 0;
z-index: 1;
transform: rotate(-5deg);
}

#image2 {
top: 50px;
left: 100px;
z-index: 2;
transform: rotate(5deg);
}

#image3 {
top: 100px;
left: 200px;
z-index: 3;
transform: rotate(10deg);
}

/* Hover effect */
.overlap-image:hover {
z-index: 10;
transform: scale(1.05) rotate(0deg);
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h1 style="text-align: center;">Overlapping Images</h1>
<p style="text-align: center;">Hover over any image to bring it to the front</p>

<div class="image-container">
<img id="image1" class="overlap-image" src="https://picsum.photos/id/1015/600/400"
alt="Image 1">
<img id="image2" class="overlap-image" src="https://picsum.photos/id/1016/600/400"
alt="Image 2">
<img id="image3" class="overlap-image" src="https://picsum.photos/id/1018/600/400"
alt="Image 3">
</div>
<script>
// JavaScript to enhance the hover effect
const images = document.querySelectorAll('.overlap-image');

images.forEach(image => {
image.addEventListener('mouseenter', function() {
// Bring this image to the front
this.style.zIndex = '10';

// Optional: Scale up slightly more than CSS hover


this.style.transform = 'scale(1.1) rotate(0deg)';
});

image.addEventListener('mouseleave', function() {
// Reset z-index (CSS will handle the rest)
const id = this.id;
if (id === 'image1') this.style.zIndex = '1';
if (id === 'image2') this.style.zIndex = '2';
if (id === 'image3') this.style.zIndex = '3';

// Reset transform
if (id === 'image1') this.style.transform = 'rotate(-5deg)';
if (id === 'image2') this.style.transform = 'rotate(5deg)';
if (id === 'image3') this.style.transform = 'rotate(10deg)';
});
});
</script>
</body>
</html>

You might also like