Scribd
Upload
24 views

Assignment 1

The document outlines a series of HTML assignments completed by Aditya Kumar Satapathy, including creating a resume page, an image gallery, a student report table, a weekly schedule, a photo showcase, a shopping list, a favorite movies/TV shows list, a achievements page, a hobbies page, and a page on linear motion equations. Each assignment includes specific HTML code demonstrating the use of various tags and structures. The document serves as a comprehensive showcase of HTML skills and project work.

Uploaded by

adityakumarsatapathy836
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Assignment 1

The document outlines a series of HTML assignments completed by Aditya Kumar Satapathy, including creating a resume page, an image gallery, a student report table, a weekly schedule, a photo showcase, a shopping list, a favorite movies/TV shows list, a achievements page, a hobbies page, and a page on linear motion equations. Each assignment includes specific HTML code demonstrating the use of various tags and structures. The document serves as a comprehensive showcase of HTML skills and project work.

Uploaded by

adityakumarsatapathy836
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Assignment-1(HTML)

Subject:CSW1(CSE 2141)

Name-Aditya Kumar Satapathy

Regd no-2341019349

Section-23412G1

Branch-Computer Science and Engineering(B.Tech)

1. Create an HTML "RESUME" page with sections for Personal Information, Educational
Achievements, and Contact Information. Use appropriate tags like <h1>, <ul>, <ol>, <a>, and
<address>.

Code:

<html>

<head>

<title>Resume </title>

</head>

<body>

<h1> Personal Information</h1>

<ul>

<li>Name-Aditya Kumar Satapathy</li>

<li>Age-19</li>

<li>roll no-58</li>

<li>Nationality-Indian</li>

</ul>

<p><h2><a href=https://www.linkedin.com/in/aditya-kumar-satapathy-
075a12330/"target=_blank>View my linkedIn Profile</a></h2></p>

<h2>Educational Acheivment</h2>

<ol>

<li>10<sup>th</sup>-85%</li>

<li>12<sup>th</sup>-78%</li>

<li>UG-8.0(<em>B.Tech(CSE)</em>)

</ol>
<h2>Contact Information</h2>

phn no<a href="tel:+916370993794"_>+916370993794</a>

<h4>Address</h4>

<add>

Saileshree Vihar<br>

Bhubaneswar<br>

Odisha<br>

</add>

</body>

</html>

Output:

2. Create an HTML image gallery with a "My Image Gallery" heading. Insert three clickable images
using <img> (with alt attributes) inside <a> tags, linking to larger versions that open in a new tab. Add
captions below each image.

Code: <html>

<head>

<title>Aditya kumar satapathy Assignment-1 question2</title>

</head>

<body>
<h1>My Image Gallery</h1>

<html>

<head>

<body>

<a href="https://media.istockphoto.com/id/1311302395/photo/express-
train.jpg?s=1024x1024&w=is&k=20&c=Anz-Hq7cF1i1GpdKXNzmvdYqS0kUO2TNV0u7SyIB51k="
target="_blank"><img src="https://media.istockphoto.com/id/1311302395/photo/express-
train.jpg?s=1024x1024&w=is&k=20&c=Anz-
Hq7cF1i1GpdKXNzmvdYqS0kUO2TNV0u7SyIB51k="height="300"width="300"alt="Zurich
city"></a><p>A Zurich city.</p>

<a href="https://media.istockphoto.com/id/1299934912/photo/geneva-aerial-view-
switzerland.jpg?s=1024x1024&w=is&k=20&c=d9Ac3sdJowSQzDT0rTKX-
IK_j4wydxoBoi6K4Mo_8kM="target="_blank"><img
src="https://media.istockphoto.com/id/1299934912/photo/geneva-aerial-view-
switzerland.jpg?s=1024x1024&w=is&k=20&c=d9Ac3sdJowSQzDT0rTKX-
IK_j4wydxoBoi6K4Mo_8kM="height="300"width="300"alt="Zurich lake leman"></a><p>Zurich Lake
leman.</p>

<a href="https://images.pexels.com/photos/757889/pexels-photo-
757889.jpeg?auto=compress&cs=tinysrgb&w=600"target="_blank"><img
src="https://images.pexels.com/photos/757889/pexels-photo-
757889.jpeg?auto=compress&cs=tinysrgb&w=600"height="300"width="300"alt="Lavender
Flower"></a><p>Lavender flower in a vase.</p>

</body>

</html>
Output:

3.Create a Student Report table with a border, header row, and columns for Student Name, Roll No.,
Subject (Math, Science, English), Marks, and Grade. Use alternate row colors for readability and
include a caption "Student Report."

Code: <html>

<head>

<title>Assignment1 Q3</title>

</head>
<body>

<table border="2">

<caption> <b> Student Report </b> </caption>

<tr style="background-color:blue">

<th rowspan="2"> Student Name </th>

<th rowspan="2"> Roll No </th>

<th colspan="3"> Subject </th>

<th rowspan="2"> Marks </th>

<th rowspan="2"> Grade </tr>

</tr>

<tr style="background-color:grey">

<th> Maths </th>

<th> Science </th>

<th> English </th>

</tr>

<tr style="background-color:pink">

<td >Aditya</td>

<td>45</td>

<td>78</td>

<td>90</td>

<td>82</td>

<td>278</td>

<td>O</td>

</tr>

<tr style="background-color:Green">

<td>Ramesh </td>

<td>44</td>

<td>85</td>

<td>84</td>

<td>72</td>

<td>275</td>
<td>B</td>

</tr>

<tr style="background-color:Bisque">

<td>Debansha </td>

<td>50</td>

<td>75</td>

<td>54</td>

<td>72</td>

<td>311</td>

<td>A</td>

</tr>

</table>

</body>

</html>

Output:

4.Design an HTML page titled "My Weekly Schedule" using <h1>. Create a table with two columns,
Day and Activities, using <th> for headings and <td> for data cells to list days of the week and
corresponding activities.
Program: <html>

<head>

<title>My Weekly Schedule</title>

</head>

<body>

<h1>My Weekly Schedule</h1>

<table border="3" cellpadding="10" cellspacing="0">

<th>

<tr>

<th>Day</th>

<th>Activities</th>

</tr>

</th>

<tbody>

<tr>

<td>Monday</td>

<td>Studying Computer Science Workshop</td>

</tr>

<tr>

<td>Tuesday</td>

<td>Studying Algorithm and Design</td>

</tr>

<tr>

<td>Wednesday</td>

<td>Go to the gym</td>

</tr>

<tr>

<td>Thursday</td>

<td>Doing Yoga</td>
</tr>

<tr>

<td>Friday</td>

<td>Work on assignments</td>

</tr>

<tr>

<td>Saturday</td>

<td>Doing Yoga</td>

</tr>

<tr>

<td>Sunday</td>

<td>Relax and recharge</td>

</tr>

</tbody>

</table>

</body>

</html>

Code:
5.Create a photo showcase webpage displaying three photos in a row with captions below each.
Include a blockquote for each photo with a famous quote and emphasize the author's name using
tags like <strong> or <em>.

Program: <html>

<head>

<title>P Harshavardhan - Assignment 1 - Q5</title>

<style>

img{

height: 450px;

align-items: center;

</style>

</head>

<body>

<h1 style="text-align: center;">Photo Showcase</h1>

<table>

<tr><td><img src="Albert_Einstein_Head.jpg"/><figcaption>Albert Einstein</figcaption></td>

<td><img src="gandhi.jpg"/><figcaption>Mahatma Gandhi</figcaption></td>

<td><img src="bhai.jpg"/><figcaption>Oscar Wilde</figcaption></td>

</tr>

<tr>

<td> <blockquote>"Two things are infinite: the universe and human stupidity; and I'm not
sure about the universe." - <em>Albert Einstein</em></blockquote> </td>

<td><blockquote>"Be the change that you wish to see in the world." - <em>Mahatma
Gandhi</em></blockquote></td>

<td><blockquote>"Be yourself; everyone else is already taken." - <em>Oscar


Wilde</em></blockquote></td>

</td>

</tr>

</table>

</body>

</html>

Outpur:
6.

Create an HTML Shopping List page with a <ul> for general items (groceries, toiletries, etc.), each
described using a <dl>. Add an <ol> for top-priority items, and use <br> to separate sections.

Program: < html>

<head>

<title>Aditya Kumar Satapathy - Assignment 1 - Q6</title>

</head>

<body>

<h1>My Shopping List</h1>

<h2>General Items to Buy:</h2>

<ul>

<li>

Groceries

<dl>

<dt>Fruits:</dt>

<dd>Apples, bananas, and oranges for healthy snacks.</dd>

<dt>Vegetables:</dt>

<dd>Carrots, broccoli, and spinach for meals.</dd>

</dl>

</li>

<li>

Toiletries

<dl>

<dt>Shampoo:</dt>
<dd>For maintaining healthy hair.</dd>

<dt>Soap:</dt>

<dd>Body wash and hand soap.</dd>

</dl>

</li>

<li>

Household Supplies

<dl>

<dt>Cleaning Supplies:</dt>

<dd>All-purpose cleaner and sponges.</dd>

<dt>Paper Towels:</dt>

<dd>For cleaning and drying surfaces.</dd>

</dl>

</li>

</ul>

<br>

<h2>Top-Priority Items:</h2>

<ol>

<li>Milk</li>

<li>Bread</li>

<li>Eggs</li>

</ol>

<br>

</body>

</html>

Output:
7.Create an HTML page titled "Favorite Movies/TV Shows" using <h1>. Display your top five
favorites in an <ol>, with each title as a clickable link to its IMDb page in a new tab.

Program:

<html>

<head>

<title>Aditya Kumar Satapathy Assignment-1 Question-7</title>

</head>

<body>

<h1>Favorite Movies/TV Shows</h1>

<ol>

<li>

<a
href="https://www.bing.com/ck/a?!&&p=95f5ca93b599e040JmltdHM9MTcyNzc0MDgwMCZpZ3VpZ
D0yYThmY2Y4MC01YTQxLTYxNmYtMWQ3Ny1kYjI5NWU0MTZmMWUmaW5zaWQ9NTIyOQ&ptn=3&
ver=2&hsh=3&fclid=2a8fcf80-5a41-616f-1d77-
db295e416f1e&psq=gangs+of+wasseypur&u=a1aHR0cHM6Ly93d3cuamlvY2luZW1hLmNvbS9tb3ZpZ
XMvZ2FuZ3Mtb2Ytd2Fzc2V5cHVyLTEvMzk4MzE0MS93YXRjaCM6fjp0ZXh0PUdhbmdzIE9mIFdhc3Nle
XB1ciAxICgyMDEyKSBJcyBBIEFjdGlvbg&ntb=1" target="_blank">Gangs of Wasseypur</a>

</li>

<li>

<a href="https://www.netflix.com/title/80115328" target="_blank">Sacred Games</a>

</li>

<li>

<a href="https://www.netflix.com/title/81436990" target="_blank">Animal</a>

</li>

<li>

<a
href="https://www.primevideo.com/detail/0H3DDB4KBJFNDCKKLHNRLRLVKQ/ref=atv_dp_share_cu
_r" target="_blank">Family Man</a>

</li>

<li>

<a
href="https://www.primevideo.com/detail/0HV20AIVKWRM0Q9N6NCXO7DKD5/ref=atv_dp_share_c
u_r" target="_blank">Mirzapur</a>

</li>

</ol>

</body>

</html>

Output:
8.

1. Create an HTML page titled "My Achievements" using <h1>, and include a motivational
quote with the <blockquote> tag. Use the <abbr> tag for organizations or awards with proper title
attributes. Add images or links to your certificates.

Program:

<html>

<head>

<title>Aditya Satapathy- Assignment 1 - Q8</title>

<style>

img{

width: 300px;

height: 200px;

</style>

</head>

<body>

<h1>My Achievements</h1>
<blockquote>

"The only limit to our realization of tomorrow is our doubts of today."

- <em>Franklin D. Roosevelt</em>

</blockquote>

<h2>Organizations and Awards</h2>

<ul>

<li>Received a research grant from <abbr title="National Science Foundation">NSF</abbr> for


groundbreaking work in artificial intelligence.</li>

<li>Awarded the <abbr title="Young Innovators Award">YIA</abbr> for developing an innovative


machine learning model for healthcare.</li>

<li>Honored with a Certificate of Excellence from <abbr title="Institute of Electrical and


Electronics Engineers">IEEE</abbr> for a technical paper on cloud computing.</li>

</ul>

<h2>Certificates</h2>

<a href="https://forage-uploads-prod.s3.amazonaws.com/completion-
certificates/Blackbird/8XSySTLv68WYeFhke_Blackbird%20Australia_YkNGpCJNnu6BCv7q6_17227557
19043_completion_certificate.pdf" target="_blank">

<img src ="cer.jpg" alt="certificate">

</body>

</html>

Output:
9.

1. Create an HTML page titled "My Hobbies" using <h1> and an unordered list (<ul>) for your
hobbies with <li> items. Include a hyperlink to a related website using <a> that opens in the same
browser, and add a "Go Back" link on each new page to return to the main page.

Program:

<html>

<head>

<title>Aditya kumar Satapathy - Assignment 1 - Q9</title>

</head>

<body>

<h1>My Hobbies</h1>

<ul>

<li>Photography - <a href="program9(2).html">Learn More</a></li>

<li>Reading</li>

<li>Traveling</li>

<li>Cooking</li>

<li>Gardening</li>

</ul>

</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

<title>Sushobhan Ghosh - Assignment 1 - Q9(2)</title>

</head>

<body>

<h1>Photography</h1>

<p>If you're passionate about photography, check out this <a


href="https://www.photographytutorials.com" target="_blank">Photography Tutorial</a> site!</p>

<a href="program9(1).html">Go Back</a>

</body>

</html>

Output:

10.

Create a page titled "Linear Motion Equation" using the <title> tag. In the body, add a main heading
with the equation "S = vᵢt + ½at²", making it bold and emphasized. Include a paragraph explaining
the equation and an unordered list defining each symbol.

Program:
<html>

<head>

<title>Aditya kumar satapathy - Assignment 1 - Q10</title>

</head>

<body>

<h1><strong><em>S = vᵢt + &frac12; at²: The Equation of Linear Motion</em></strong></h1>

<p>

The formula <em>S</em> = <em>vᵢ</em>t + ½<em>at²</em> describes the motion of an object


under constant acceleration. Here:

</p>

<ul>

<li><em>S</em> represents the displacement,</li>

<li><em>vᵢ</em> is the initial velocity,</li>

<li><em>t</em> is the time,</li>

<li><em>a</em> is the acceleration, and</li>

<li>&frac12;<em>at²</em> is the additional displacement due to acceleration.</li>

</ul>

<p>

Note: This equation was originally written in 1905. "An object in motion stays in motion unless acted
upon by an <u>external force</u>."

</p>

</body>

</html>

Output:
11.

Create a webpage titled "Travel Diary" with a heading "Explore Beautiful Destinations." Include a
link to an external website and add two or three destination links, each with a clickable image
leading to another page.

Program:

<html>

<head>

<title>Aditya Satapathy- Assignment 1 - Q11 - Travel Diary</title>

<style>

body {

font-family: Arial, sans-serif;

line-height: 1.6;

h1 {

text-align: center;

color: #2c3e50;

img {
width: 300px;

height: 100;

border: 2px solid #ddd;

border-radius: 8px;

</style>

</head>

<body>

<h1>Explore Beautiful Destinations</h1>

<p>To learn more about traveling tips and exciting destinations, visit <a
href="https://www.lonelyplanet.com" target="_blank">Lonely Planet</a>.</p>

<h2><a href="https://www.parisinfo.com" target="_blank">Paris, France</a></h2>

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

<img src="https://images.pexels.com/photos/10330682/pexels-photo-
10330682.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"/>

</a>

</div>

<h2><a href="https://www.visitmaldives.com" target="_blank">Maldives</a></h2>

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

<img src="https://images.pexels.com/photos/1483054/pexels-photo-
1483054.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Maldives">

</a>

</div>

<h2><a href="https://www.australia.com" target="_blank">Sydney, Australia</a></h2>

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

<img src="https://images.pexels.com/photos/5707602/pexels-photo-
5707602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Sydney, Australia">
</a>

</div>

<p>Have questions? <a href="[email protected]">Contact Us</a></p>

</body>

</html>

Output:

12.

Create a Webpage that Has the Following Attributes: tabindex, accesskey, draggable, and
contenteditable.

Program:

<html>

<head>

<title>Aditya kuamr Satapathy- Assignment 1 - Q12</title>

</head>

<body>

<p tabindex="2">This is 1st paragraph</p>

<p tabindex="1"> This is 2nd paragraph</p>

<p contenteditable="true">This content is editable</p>

<p tabindex="4" draggable="true">This content is Draggable.</p>


<p><a href="https://www.example.com" accesskey="h" target="_blank">This paragraph is for
accesskey</a></p>

</body>

</html>

Output:

You might also like