HTML ASSIGNMENT
1- Create a blog page using semantic html5 elements: header, nav, article, section, and
footer. include at least 2 articles with headings, images, paragraphs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MY Blog</title>
</head>
<body align="center">
<header>
<h1>MY Blog</h1>
<nav>
<ul>
<li><a href="#tech">Technology</a></li>
<li><a href="#travel">Travel</a></li>
</ul>
</nav>
</header>
<main >
<section>
<article id="tech">
<h2>The Future of Technology</h2>
<img src="/image1.webp" alt="Technology concept image">
<p>
Technology is evolving at lightning speed, impacting every aspect of our lives.
From artificial intelligence and robotics to quantum computing,
innovations are shaping a future that was once science fiction.
</p>
<p>
Staying informed and adapting to these changes is essential for both individuals
Chiranth R Rao 1
HTML ASSIGNMENT
and businesses to thrive in the modern world.
</p>
</article>
<article id="travel">
<h2>Exploring the World</h2>
<img src="/nature.webp" alt="Scenic travel destination">
<p>
Traveling offers new perspectives, cultural experiences, and unforgettable memories.
Whether you’re hiking in the mountains, relaxing by the beach, or exploring bustling cities,
each journey tells a unique story.
</p>
<p>
The joy of travel lies not only in the destinations but also in the experiences,
people, and lessons gathered along the way.
</p>
</article>
</section>
</main>
<footer>
<p>© 2025 ChiruRR's Blog. All rights reserved.</p>
</footer>
</body>
</html>
Chiranth R Rao 2
HTML ASSIGNMENT
2- Build a contact form that includes these input types text,email,phone, date
and message. use html5 validation attributes such as pattern, min,max
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="#" method="post">
<!-- Name -->
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name"
placeholder="Enter your name"
required minlength="3" maxlength="50"><br><br>
<!-- Email -->
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email"
placeholder="example@email.com"
required><br><br>
Chiranth R Rao 3
HTML ASSIGNMENT
<!-- Phone -->
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone"
placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required><br>
<small>Format: 123-456-7890</small><br><br>
<!-- Date -->
<label for="date">Preferred Contact Date:</label><br>
<input type="date" id="date" name="date"
min="2025-08-10" max="2025-12-31"
required><br><br>
<!-- Message -->
<label for="message">Message:</label><br>
<textarea id="message" name="message"
placeholder="Type your message here..."
required minlength="10" maxlength="500"></textarea><br><br>
<!-- Submit -->
<button type="submit">Send Message</button>
</form>
</body>
</html>
Chiranth R Rao 4
HTML ASSIGNMENT
3- design a small website with three pages home,about,contact.
ensure proper navigation with working links between pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chiranth R Rao - Home</title>
</head>
<body>
<header>
<h1>Welcome to Chiranth R Rao's Website</h1>
<nav>
<a href="index.html">Home</a> |
Chiranth R Rao 5
HTML ASSIGNMENT
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Hello!</h2>
<p>
I'm <strong>Chiranth R Rao</strong> — a Computer Science student passionate
about
video editing, VFX, Blender 3D, and creative design.
I also love exploring photography and enhancing my skills for a bright future.
</p>
</section>
</main>
<footer>
<p>© 2025 Chiranth R Rao. All rights reserved.</p>
</footer>
</body>
</html>
About me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Chiranth R Rao 6
HTML ASSIGNMENT
<title>About - Chiranth R Rao</title>
</head>
<body>
<header>
<h1>About Me</h1>
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<section>
<p>
I'm <strong>Chiranth R Rao</strong>, currently pursuing a B.E. in Computer Science
Engineering (CSE)
and preparing for GATE 2027.
Alongside academics, I actively work on creative projects involving:
</p>
<ul>
<li>Video Editing (Premiere Pro & After Effects)</li>
<li>VFX & Motion Graphics</li>
<li>3D Animation & Rigging in Blender</li>
<li>Poster Design (Illustrator)</li>
<li>Photography & Photo Editing</li>
</ul>
</section>
Chiranth R Rao 7
HTML ASSIGNMENT
</main>
<footer>
<p>© 2025 Chiranth R Rao. All rights reserved.</p>
</footer>
</body>
</html>
Contact ME
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Chiranth R Rao</title>
</head>
<body>
<header>
<h1>Contact Me</h1>
<nav>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
Chiranth R Rao 8
HTML ASSIGNMENT
<section>
<h2>Get in Touch</h2>
<p>If you’d like to reach me, here are my contact details:</p>
<ul>
<li><strong>Phone:</strong> +91 98765 43210</li>
<li><strong>Email:</strong> chiranth@example.com</li>
<li><strong>Address:</strong> Bengaluru, Karnataka, India</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 Chiranth R Rao. All rights reserved.</p>
</footer>
</body>
</html>
Chiranth R Rao 9
HTML ASSIGNMENT
4-> Create a video and an audio file using the <video> and <audio>
tags respectively. include controls and fallback text for the browers
that doesen’t support these tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Example</title>
</head>
<body>
<h1>Media Demo: Video & Audio</h1>
<!-- Video Section -->
<section>
Chiranth R Rao 10
HTML ASSIGNMENT
<h2>Sample Video</h2>
<video width="480" height="270" controls>
<source src="/14060884_640_360_30fps.mp4" type="video/mp4">
<source src="sample-video.webm" type="video/webm">
Your browser does not support the <code>video</code> tag.
Please <a href="sample-video.mp4">download the video</a> to watch it.
</video>
</section>
<hr>
<!-- Audio Section -->
<section>
<h2>Sample Audio</h2>
<audio controls>
<source src="/cinematic-hip-hop-vlog-music-349853.mp3" type="audio/mpeg">
<source src="sample-audio.ogg" type="audio/ogg">
Your browser does not support the <code>audio</code> tag.
Please <a href="sample-audio.mp3">download the audio</a> to listen.
</audio>
</section>
</body>
</html>
Chiranth R Rao 11
HTML ASSIGNMENT
5-> Create a table showing different pricing plans with headers,
footers, and merged cells using colspace and rowspan attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Plans Table</title>
</head>
<body>
<h1>Pricing Plans</h1>
<table border="1">
<!-- Table Header -->
Chiranth R Rao 12
HTML ASSIGNMENT
<thead>
<tr>
<th rowspan="2">Plan</th>
<th colspan="3">Features</th>
<th rowspan="2">Price</th>
</tr>
<tr>
<th>Storage</th>
<th>Users</th>
<th>Support</th>
</tr>
</thead>
<!-- Table Body -->
<tbody>
<tr>
<td>Basic</td>
<td>50GB</td>
<td>1 User</td>
<td>Email</td>
<td>$5/mo</td>
</tr>
<tr>
<td>Standard</td>
<td>200GB</td>
<td>5 Users</td>
Chiranth R Rao 13
HTML ASSIGNMENT
<td>Email & Chat</td>
<td>$10/mo</td>
</tr>
<tr>
<td>Premium</td>
<td>1TB</td>
<td>Unlimited</td>
<td>24/7 Phone Support</td>
<td>$20/mo</td>
</tr>
</tbody>
<!-- Table Footer -->
<tfoot>
<tr>
<td colspan="5">All prices are billed monthly. Cancel anytime.</td>
</tr>
</tfoot>
</table>
</body>
</html>
Chiranth R Rao 14
HTML ASSIGNMENT
6-> Create a vertical navigation menu with nested lists to represent
dropdown items(no Js needed;just HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vertical Nav — Collapsible (details)</title>
</head>
<body>
<nav aria-label="Primary Navigation">
<ul>
<li><a href="#home">Home</a></li>
<li>
<details>
<summary>Services</summary>
<ul>
Chiranth R Rao 15
HTML ASSIGNMENT
<li><a href="#editing">Video Editing</a></li>
<li><a href="#vfx">VFX & Motion Graphics</a></li>
<li>
<details>
<summary>3D Work</summary>
<ul>
<li><a href="#rigging">Rigging</a></li>
<li><a href="#environments">Environments</a></li>
</ul>
</details>
</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Portfolio</summary>
<ul>
<li><a href="#videos">Videos</a></li>
<li><a href="#posters">Posters</a></li>
<li><a href="#photos">Photography</a></li>
</ul>
</details>
</li>
Chiranth R Rao 16
HTML ASSIGNMENT
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
7-> Create a registration form using advanced input types likedate,
pickers, range sliders, color pickers, and datalists to provide
suggested input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Registration Form</title>
Chiranth R Rao 17
HTML ASSIGNMENT
</head>
<body>
<h1>Registration Form</h1>
<form>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" placeholder="Enter your name"
required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@mail.com"
required>
<br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<br><br>
<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor" value="#0000ff">
<br><br>
<label for="experience">Experience Level (0-10):</label>
<input type="range" id="experience" name="experience" min="0" max="10" step="1">
<br><br>
<label for="country">Country:</label>
<input list="countries" id="country" name="country" placeholder="Select or type
country">
<datalist id="countries">
<option value="United States">
<option value="United Kingdom">
Chiranth R Rao 18
HTML ASSIGNMENT
<option value="Canada">
<option value="Australia">
<option value="India">
</datalist>
<br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-
9]{3}-[0-9]{3}-[0-9]{4}" required>
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
8-> Build a simple resume page using headings,paragraphs,lists and
links that outline my experience, education and skills
Chiranth R Rao 19
HTML ASSIGNMENT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume - Chiranth R Rao</title>
</head>
<body>
<h1>Chiranth R Rao</h1>
<p>Email: <a href="mailto:chiranth@example.com">chiranth@example.com</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/chiranthrrao"
target="_blank">linkedin.com/in/chiranthrrao</a></p>
<hr>
<h2 id="services">Services</h2>
<h3>Video Editing</h3>
<p>Skilled in editing short films, promotional videos, and social media content.</p>
<h3>VFX & Motion Graphics</h3>
<p>Experienced in creating visual effects and motion design for various projects.</p>
<h3>3D Work</h3>
<ul>
<li><strong>Rigging:</strong> Creating skeletons and controls for 3D models.</li>
<li><strong>Environments:</strong> Designing realistic or stylized 3D
environments.</li>
</ul>
<hr>
<h2 id="portfolio">Portfolio</h2>
Chiranth R Rao 20
HTML ASSIGNMENT
<ul>
<li>Videos — Editing & storytelling samples.</li>
<li>Posters — Promotional designs for events and brands.</li>
<li>Photography — Landscape, portrait, and product shoots.</li>
</ul>
<hr>
<h2 id="about">About</h2>
<p>Creative professional specializing in multimedia production, with expertise in editing,
VFX, and 3D design. Passionate about delivering high-quality visual content.</p>
<hr>
<h2 id="contact">Contact</h2>
<p>Email: <a href="mailto:chiranth@example.com">chiranth@example.com</a></p>
<p>Phone: +91-9876543210</p>
</body>
</html>
Chiranth R Rao 21
