$30
COP2500C - Homework # 2
COP2500C - Homework # 2
Goals:
• Building a web page (html file)
• Editing a web page
• Saving a webpage (with multiple files)
• Executing a html file in browser.
• Using Tables in the iframe
Topics:
• HTML Editors
• HTML Elements
• HTML Attributes
• HTML Headings
• HTML Paragraph
• HTML Quotations
• HTML Comments
• HTML Links
• HTML Images
• HTML Tables
• HTML Lists
• HTML Blocks
• HTML Iframe
• HTML File Paths
• HTML Head
• URL Encode
Instructions:
1. Folder HW2:
a. Create a folder named HW2.
b. Now open a text editor of your choice and create a new file named
HomePage.html and save this file in the HW1 folder.
2. HomePage.html:
a. Begin writing the HTML code in HomePage.html
b. Add the doctype for an HTML5 document
c. Create the root html element and nest the head &body elements within it.
d. Insert an h1 heading with the title The OSCARS
e. Add an image of height 350px and width 250px and set the image towards
the right side of the webpage using tag
f. Insert an h3 heading containing Academy Awards. So that under this you can
give a brief description about the awards
g. Insert a p to add a description about the Academy Awards.
h. Insert an h3 heading with Awards and nominations.
i. Insert an <a> link with title as Click to view Awards and nominations. The
path to the link should be provided with the <href> attribute. provide the path
of new file awards.html
3. awards.html :
a. Create a new file awards.html and start typing the new html code which needs
to be iframed in homepage.html
b. In awards.html open the <!DOCTYPE html> and open the <html> tag. Insert
< Title> as Awards in <head>. Close the respective tags as well.
c. Insert the< style> tag and set the border of the tables as 1px Solid black
d. Open the body tag. Insert heading as List of best actor award Winners with
<h3> tag.
e. We will be creating a table. start the table by opening <Table> tag. This
marks the opening of table. All the contents of the table would be present
inside this content until you close it.
f. <tr> is used to define table row names. We specify the row input inside<tr>.
Insert <tr>
g. <th> is used to define table heading. Insert the table heading with
scope=”col”, align=”centre” and width=”55”.Insert Actor, Role (s),Film,
Ref as table head .close<tr> and <th> respectively.
h. In a new row Insert the table head data 2018 with scope="row"
rowspan="5" style="text-align:center. Provide the hyperlink for this
heading using href. For all hyperlink and title details refer the Details Tables
below. Provide the heading as “2018”.
i. Add the table data using<td>. Insert Rami Malek, Bohemian Rhapsody,
Christian Bale, Bradley Cooper, Jackson Maine, Freddie Mercury, Dick
Cheney, Jackson Maine, Vincent Van Gogh, A Star is born, William
Dafoe, A Eternity's gate as table data. Inside a table row tag.
j. Include 102 as the table data for the last column. With rowspan=”5”. Refer
the details tabel for href.
For eg:
<tr>
<td>
<a href="https://en.wikipedia.org/wiki/A_Star_Is_Born_(2018_film)"
title="Vice (2018 film)">A Star is born</a>
</td>
</tr>
k. Look upon the details table below for name, title and href link.
l. Insert another table with heading “Consecutive Academy award Winners”
using <h3>
m. Name and Year as two columns. Both of them are table heading as well. Tom
Hanks, Spencer Tracy,1993,1994,1937,1938 as table data. Kindly see the
screenshot inorder to know the respective rows and columns the data belong
to.
n. Create another table with heading Academy Award Winning Actors.
o. Insert Male Actor and Female actor as two Columns with table head.
p. Insert the pictures/images and names of Leonardo Dicarpio, Jennifer
Lawrance, Ryan Josling, Emma Stone respectively in the tables as per the
screenshot. Maintain the height of the image to “175” and width =”200”.
4. Footer:
a. Insert a <footer> tag . Under footer insert a div tag and specify the dimensions
of width , height and the background-color.
b. Create a <blockquote> and mention your name and contact in below format
i. Posted By : <Your Name>
ii. Contact : <Your Email Address>
5. Ouput: Content texts need not be same as per output screenshot or it need not be your
original information. It can be based on your interest but strictly follow the
specifications mentioned.
Details Table:
Name Href link Tile
2018 https://en.wikipedia.org/wiki/Academy_Awards 2018 in
film
Rami
Malek
https://en.wikipedia.org/wiki/Rami_Malek Rami
Malek
Freddie
Mercury
https://en.wikipedia.org/wiki/Freddie_Mercury Freddie
Mercury
[102] https://deadline.com/2019/01/oscar-nominations-2019-
academy-award-nominees-list-1202538943
[102]
Christian
Bale
https://en.wikipedia.org/wiki/Christian_Bale Christian
Bale
Bohemian
Rhapsody
https://en.wikipedia.org/wiki/ Bohemian_Rhapsody Bohemian
Rhapsody
Vice https://en.wikipedia.org/wiki/Vice_(2018_film) Vice
Bradley
Cooper
https://en.wikipedia.org/wiki/Bradley_Cooper Bradley
Cooper
A Star is
born
https://en.wikipedia.org/wiki/A_Star_Is_Born_(2018_film) A Star is
born
William
Dafoe
https://en.wikipedia.org/wiki/Willem_Dafoe William
Dafoe
A Eternity's
gate
https://en.wikipedia.org/wiki/At_Eternity%27s_Gate_(film) A
Eternity's
gate
6. Submission:
• A zip file named HW2.zip
o including all the required files
1. HomePage.html
2. awards.html
3. oscar.jpg
4. dicarpio.jpg
5. jennifer.jpg
6. ryan.jpg
7. emma.jpg
For creating zip file please refer to previous assignment steps.
An example of the expected Output (Before clicking on Click to view Awards and nominations)
An example of the expected Output (After clicking on Click to view Awards and nominations)
Iframe Content
