Description
In this assignment, you have to create a website consisting of five HTML pages along with associated styling sheets. Separate sets of instructions have been given for common features and page-specific features. First, we list below some general instructions which must be followed while submitting your solution.
General instructions:
• Submit a single .zip file containing all your submission files. (All the HTML and CSS files must reside in the root directory of your submission zip file)
• The name of the zip file should be “<roll number>.zip”. (E.g.: 21f1000000.zip)
• The pages should be HTML5 compliant, e.g., the file should begin with the declaration <!DOCTYPE html>.
• You are allowed to use only tag name, ID and class as CSS selectors (No combinators are allowed). • You are allowed to use only those tags mentioned in the question (in the body of HTML page) and only as many times as specified (Using any other tags than the mentioned ones will lead to deduction in marks)
Common instructions:
• Each page must have three sections generated using div tags:
1. Header section with links to other pages
2. Main section with the main content
• Figure 1 shows the required box model for the div tag of each page.
Figure 1: <div> tag box model • Figure 2 shows the color palette from which colors must be taken for designing the webpages. Note that no other colors should be used.
• The font size of each tag and/or element must be the default size as given by HTML. You are not supposed to change it either using HTML properties or CSS properties. • For each webpage, you must create two pages – an HTML page and an external CSS page. The name of the HTML and CSS files for each page must be as given in Table 1.
• The content of headers and footers for each of the webpage in the website is also listed in Table 1.
• There are restrictions on the number of each type of tag that can be used in the body of each HTML page. Table 2 lists the exact count of each tag expected in the respective pages.
Figure 2: Color palette
Home Academics Personal Contact Resume
HTML
file name index.html academics.html personal.html contact.html resume.html
CSS
file name index.css academics.css personal.css contact.css resume.css
Headers Links Academics
Personal
Contact
Resume Home
Personal
Contact
Resume Home
Academics
Contact
Resume Home
Academics
Personal
Resume Home
Academics
Personal
Contact
Footer
Table 1: Common content specifications
Home Academics Personal Contact Resume
span 3 0 0 1 0
div 3 3 3 3 3
h5 1 1 1 1 1
h1 1 1 1 1 1
a 4 4 5 4 5
p 3 0 0 0 0
table 0 1 0 0 0
td 0 12 0 0 0
tr 0 7 0 0 0
th 0 2 0 0 0
br 0 0 2 5 0
img 0 0 2 0 0
address 0 0 0 1 0
Table 2: Tag frequency for each page
Page-specific instructions:
1. Home Page: This is the first page to be accessed by a user of your website. The main section should display your name, your onlinedegree roll number and an introduction about yourself (in a maximum of 50 words) under the heading “Student data”. The display format is as shown in Figure 4.
2. Academics Page: On clicking the academics link, the user should be directed to the academics page. The main section of this page should display your marks in tabular format under the heading “Mark sheet” as shown in Figure 5. The same table data should be used in your webpage (you could change subject names and corresponding marks but the number of records and table headers should remain same).
Figure 3 shows the box model for both td, th tags.
Figure 3: th, td box model
3. Personal Page: On clicking the personal link, the user should be directed to personal.html. The main section must have two images and an external link as shown in Figure 6. The images to be displayed can be downloaded from: Images to download. Each image should be of width = 250 and height =
250. The external link should be directed to the onlinedegree webpage (http://www.onlinedegree. iitm.ac.in) with the text:“Click here to view the Online Degree webpage”.
4. Contact Page: On clicking the contact link, a new page with address and e-mail id should be displayed using the address tag under a heading “Contact Us” in the main section as shown in Figure 7. (Note that you need not enter your real address or e-mail id).
5. Resume Page: On clicking the resume link, a new page with link to download your CV should be displayed as shown in Figure 8. Note that on clicking the link, the download window should pop up.
Figure 4: Home page
Figure 5: Academics page
Figure 6: Personal page
Figure 7: Contact page
Figure 8: Resume page
(a) Image 1 (b) Image 2
Figure 9: Figures to be used in personal page
Reviews
There are no reviews yet.