Lab 01 Practicing XHTML

Size: px

Start display at page:

Download "Lab 01 Practicing XHTML"

Ariel Holland
6 years ago
Views:

1 Lab 01 Practicing XHTML Objective The objective of this lab is to provide necessary XHTML practice to the students. This lab only covers some of the essential tags. However, students are free to use their creativity and make use of as many tags as they can. But covering at least these tags is necessary and required. Happy Coding! 1

2 Profile Page 1. First write the skeleton code of an XHTML document and save it as profile.html <!DOCTYPE html PUBLIC DTD> <title>profile - My Personal Website</title> 2. Use <h1> tag to write Profile and center it horizontally using <center> tag. 3. Use <h2> tag to display your name. 4. Use <h3> tag to write Language Skills. 5. Use a <label> to write any description about the heading, for example, Here's the list of languages that I know with their rating/expertise level in each. 6. Use ordered list tag <ol> to display a list of languages that you know with their ratings. 7. Use <h3> tag to write Achievements. 8. Use a <label> to write any description about the heading, for example, Here's the list of my educational career's achievements. 9. Use ordered list tag <ol> to display a list of your achievements. You should get a look similar to the following 2

3 Interests and Hobbies 1. First write the skeleton code of an XHTML document and save it as hobbies.html 2. <!DOCTYPE html PUBLIC DTD> <title>interests & Hobbies - My Personal Website</title> Based on same steps as for the previous page, try to make a page of similar look as below: Hints Use <h1> for Interests & Hobbies Use <h2> for Interests and Achievements Use bulleted list for numbering the items. 3

4 Transcript 1. First write the skeleton code of an XHTML document and save it as transcript.html <!DOCTYPE html PUBLIC DTD> <title> Transcript - My Personal Website</title> 2. Use <h1> tag to write Transcript and center it horizontally using <center> tag. 3. Use <h2> tag to write Semester Use the <table> tag to display the courses you studied in semester 1 and your grades in those. a. Write a <table> tag. Set its border attribute to 1 (border= 1 ). b. Create a row using <tr> tag. c. Create a column in that row, using a <th> tag and write Courses. d. Create a column in that row, using a <th> tag and write Grades. e. Create a row using <tr> tag and using 2 <td> tags, write course name and the grade you had in that course. Repeat e step to include all the courses that you studied in Semester 1. Repeat steps 3 & 4 for all the semesters that you have studied yet. You should get a look similar to the following 4

5 Main Page 1. First write the skeleton code of an XHTML document and save it as index.html <!DOCTYPE html PUBLIC DTD> <title> Home - My Personal Website</title> 2. Use <h1> tag to write Home Page and center it horizontally using <center> tag. 3. Use <p> tag to write some description about your web-site. 4. Use unordered list tag <ul>to display a list of links to the pages you made earlier. a. In each <li> tag, write an <a> tag that shows the title of the page. You should get a look similar to the following 5

6 Adding Back Link You probably have observed that once you navigate to a particular page (using the hyperlink), there s no way that you can navigate back to main page (except by hitting browser s back button). To cater this problem, add a link Back (using <a> tag) in each page that you made (Profile, Interests & Transcript). By clicking Back link, user shall reach at home page again. Submission Instructions: 1. Use the names of the files specified in this handout. 2. Zip all the files together in one file named <you_roll_number>.zip where <your_roll_number> is a 5 digit number. For e.g. if your roll number is then your zip file name will be zip. 3. Do just one submission of your zip file by ing to my FCC id. End 6

Chapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21

Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...