$30
Assignment # 1 Building a web page (html file)
COP2500C – Lab Assignment # 1
Goals:
• Building a web page (html file)
• Editing and styling a web page
• Saving a webpage (with multiple files)
• Executing a html file in browser.
Topics:
• HTML Editors
• HTML Elements
• HTML Attributes
• HTML Headings
• HTML Paragraph
• HTML Quotations
• HTML Comments
• HTML Links
• HTML Images
• HTML Lists
• HTML Blocks
• HTML Iframe
• HTML Head
• URL Encode
Instructions :
1. Use your text editor to create a new file named HomePage.html and save it in a folder named
LAB1 with all your data files.
2. Add the doctype for an HTML5 document
3. Create the root HTML element and nest the head and body elements within it
4. Within the head element add <title tag with the title Biography and insert a header tag and
specify the dimensions of width , height and the background-color
5. Insert a <blockquote tag and Provide the name of the person with H1 headings
6. Within the body element insert a <div tag with the attributes id and background color.
7. Within the div tag under body element insert an <aside tag and under the <aside tag insert
the image of your favorite idol specifying the dimensions of width and height and align the
image to the right of the Webpage
8. Insert a <blockquote tag ,within the blockquote include the Biography details of your favorites
with subheadings (For eg. Professional Career) at H3 level font size.
9. Under <blockquote tag add a <p tag where you add a paragraph of description about the
person. Also highlight the important details with <b tag and by adding hyperlinks.
10. Go back to your text editor and create a new file name Achievements.html and save it in the
folder LAB1
11. Add the doctype for an HTML5 document
12. Create the root HTML element and nest the head and body elements within it
13. Within the head element add <title tag with the title “Achievements”
14. Now within the <body tag include the subheadings with <h3 tag and create both ordered and
unordered list with the following specifications.
a. Ordered list with type 1
i. Add <ol tag for ordered list and <li tag to list items , the number should be in
the order 1,2,3,etc.
b. Ordered list with type I
i. Add <ol tag for ordered list and <li tag to list items , the numbering should be
in the form of I, II, III, etc
c. Unordered list
i. Add <ul tag for unordered list and <li tag to list all the items, the numbering
should be in the form of bulletins.
15. The contents inside the list items can be independent and need not be specific to the screenshot
shown.
16. Now once the Achievements.html document is completed with Awards/Achievements listed in
ordered and unordered list save it.
17. Now go back to HomePage.html ,Create another <blockquote tag where you reference the
path of the other html doc “Achievements.html” within the <a tag with titled “Click to view
Career statistics” <Or any name depending upon the achievements
18. Insert an <iframe tag and specify the dimensions of width and height of the rectangular region
19. Insert a <footer tag . Under footer insert a div tag and specify the dimensions of width , height
and the background-color.
20. Create a <blockquote and mention your name and contact in below format
a. Posted By : <Your Name
b. Contact : <Your Email Address
21. 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.
Expected Output :
Full View :
Before Clicking on “Click to view Federer’s Career statistics”
After clicking on “Click to view Federer’s Career statistics”
Submission:
Online a zip file named LAB1.zip
o Homepage.html
o Achievements.html
o <photoname.jpg <or any avatar
o How to create a zip file: right click on LAB1 - click sendto - click
Compressed(zipped)folder
o refer to the screenshot below
