Assignment-1 for HTML

Subject: CSW1 (CSE 2141)

Session: Sep 2024 to Jan 2025
Branch: CSE
Section: All
Course Outcomes: CO1

Learning Levels: Remembering (L1), Understanding (L2), Application (L3), and Analysis (L4).

Q no. Questions Learning

Levels
Q1. Create an HTML page with a heading titled "RESUME" that contains a brief L1, L2
description of yourself and includes the following subsections:
Personal Information:
• Add a heading, "Personal Information," using the <h1> tag to introduce the
section.
• Below the heading, use an unordered list (<ul>) to display your full name, age,
roll no., and nationality as individual list items (<li>).
• Add a clickable link to your LinkedIn profile using the <a> tag. The link text
should be "View my LinkedIn Profile," and it should open your LinkedIn page
in a new tab.
Educational Achievements:
• Use an ordered list (<ol>) to display your academic qualifications, such as your
10th-grade, 12th-grade, and degree percentage. Also, use superscript and
emphasis tags as required.
Contact Information:
• Add a heading, "Contact Me," using the <h1> tag.
• Display your phone number using the <a> tag with the tel: attribute. The
clickable text should be your phone number.
• Below the contact information, use the <address> tag to display your home
address, ensuring it's properly formatted.

Q2. Create an HTML page for an image gallery: L2, L3

 • Add a heading, "My Image Gallery," using the <h1> tag to introduce the
section.
• Insert three different images using the <img> tag. Each image should have an
appropriate alt attribute describing the image in case it fails to load.
• Make each image clickable, linking to a larger version of the image using the
<a> tag. The larger images should open in a new tab.
• Add a caption below each image.

Q3. Create a Student Report Table: L1, L2

• Create a table displaying details such as Student Name, Roll No., Subject,
Marks, and Grade.
• The table should have a border and a header row.
• Use alternate row colors for better readability.
• Include a caption that says "Student Report."
• Add a column for each subject (Math, Science, English).

Q4. Design an HTML Page for Your Schedule: L2, L3

• Add a heading, "My Weekly Schedule," using the <h1> tag.
• Create a table with two columns: one labelled "Day" and the other labelled
"Activities," using the <th> tag for the column headings.
• Fill in the table using the <td> tag for the data cells. List the days of the week in
one column and your daily activities in the other.

Q5. Create a Webpage with a Photo Showcase: L3, L4

• Display three photos in a row (you can use a table for the layout).
• Each photo should have a caption below it.
• Include a blockquote with a famous quote for each photo, and make sure the
author’s name is semantically emphasized using appropriate HTML tags (e.g.,
<strong> or <em>).
• Ensure that the quotes are properly formatted to visually resemble quotes,
rather than just plain text.

Q6. Create an HTML Page for a Shopping List: L3, L4

• Create an unordered list (<ul>) to display general items you need to buy for the
week, such as groceries, toiletries, etc., with each item as a list item (<li>).
o For each item, include a description using a description list (<dl>),
where you define the product or provide additional details.
• Create an ordered list (<ol>) to display the top-priority items to purchase first.
• Insert a line break (<br>) after each section of the list to clearly separate them.
Q7. Create an HTML Page for Movies or TV Shows: L2, L3
• Add a heading, "Favorite Movies/TV Shows," using the <h1> tag to introduce
the section.
• Create an ordered list (<ol>) to display your top five favourite movies or TV
shows, listing each one as a list item (<li>).
• Make each movie or TV show title a clickable hyperlink to its IMDb page using
the <a> tag, ensuring that the link opens in a new tab with the target="_blank"
attribute.

Q8. Create an HTML Web Page for Personal Achievements: L1, L2

• Add a heading, "My Achievements," using the <h1> tag.
• Use the <blockquote> tag to include a famous motivational quote that inspires
you.
• For any organizations or awards you've received, use the <abbr> tag to provide
abbreviations with proper title attributes. For example, use <abbr
title="National Science Foundation">NSF</abbr> for "NSF."
• Include images or links to the received certificates.

Q9. Create an HTML Page for Your Hobbies: L2, L3

• Add a heading, "My Hobbies," using the <h1> tag to introduce the section.
• Create an unordered list (<ul>) of your hobbies, with each hobby as a list item
(<li>).
• For one of your hobbies, add a link to a related website using the <a> tag. For
example, if you enjoy photography, link to a photography tutorial site or blog.
• Ensure that each hyperlink opens a new page in the same browser.
• Each new page should include a link titled "Go Back" that takes you back to the
main page.

Q10. Create a page titled "Linear Motion Equation": L3, L4

i. Use the <title> tag to set the webpage's title to "Linear Motion Equation."
ii. Within the body of the page:
• Create a main heading that says: "S = vᵢt + ½at²: The Equation of Linear
Motion." Use appropriate tags to make this text bold and emphasized.
• Below the heading, insert the following explanation in a paragraph and an
unordered list that explains each symbol:
The formula S = vᵢt + ½at² describes the motion of an object under constant
acceleration. Here:
o S represents the displacement,
o vᵢ is the initial velocity,
 o t is the time,
o a is the acceleration, and
o ½at² is the additional displacement due to acceleration.
iii. Format the variables "S," "vᵢ," "t," "a," and "½at²" in italics using the appropriate
HTML tags.
iv. Add the following quote related to motion using proper quotation tags:
"An object in motion stays in motion unless acted upon by an external force."
Highlight the phrase "external force" by underlining it.
Insert this sentence in the above paragraph. Note: This equation was originally written
in 1905.
Q11. Create a Webpage with the Title "Travel Diary": L3, L4
• Add a heading with the text: "Explore Beautiful Destinations."
• Below the heading, insert a link that takes the user to an external website.
• Add two or three links to destination places with images to visit. For each
destination, include the following:
o Destination Link: Insert the link to the destination.
o Image:
▪ Insert the image below the link. The image should have the
following properties:
▪ Alt text: "Learn about this beautiful travel destination."
▪ Set the width of the image to 600 pixels.
▪ Make the image clickable, so that when users click on it,
they are taken to another page:
• Below the image, insert a link to send an email to [email protected] with
the anchor text: Contact Us.

Q12. Create a Webpage that Has the Following Attributes: tabindex, accesskey, L1, L2
draggable, and contenteditable:
• Suppose there are 5 paragraphs where the 1st paragraph has tabindex set to 2,
the 2nd paragraph has tabindex set to 1, and so on. When the Tab button on the
keyboard is clicked, it should first go to the 2nd paragraph, then the 1st, and so
on.
• Use the accesskey attribute in a hyperlink to access the desired link in a new
tab.
• Use the contenteditable attribute and draggable attribute in any of the
paragraphs.

-END-