Scribd
Upload
44 views22 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views22 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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