Your Portfolio index page

1. Put an image of yourself on your index.html page. You can use any image you want but please keep it appropriate and try not use an extremely large sized file. If this file is going to be part of your site, should you link to it in the folder where it currently sits on your computer or should you move a copy to your images folder and then link to that one? You decide, keeping in mind my stressing the concept of having one single root directory. If your image still appears very large once you get it to show up on your page, use the 'width' and 'height' attributes in your image code to adjust the size.

2. Add some brief text below the picture (a sentece or two with appropriate <p> or <br> spacing) including some info about where & when the photo was taken.

Portfolio contact page

1. Create a new page call it contact.html.

2. Give it a heading and a title

3. Create a table with your street address, city, state, country, phone number and email. You can just borrow the table code you used in the procedures portion of this module, but you may have to add more rows.

4. Create a relative link back to index.html but do it using an image in place of your link text. If you've learned how to create a simple hyperlink to a page or external website and use a text phrase as your link text and you've also learned how to make an image appear on a page using an html image code, could you not just put the html image code in the place of the link text inside of the hyperlink html code? I'm sure you can! If you have trouble, try looking up the solution at w3schools.com.

5. Save the file.

6. Now, in index.html, create a relative link to contact.html using appropriate link text.

7. Save the file.

Portfolio education page

1. Create a new page call it education.html.

2. Give it a heading and a title

3. Add an unordered list of your past education (ie. Elementray, Middle, High & Others)

4. Create an absolute link to one of your past schools. If you can't locate a link to any school that you've attended prior to coming Camanche High School, then link to Camanche's website. Use appropriate link text.

5. Create a relative link back to the index page. Use appropriate link text.

6. Save the file.

7. Now, in index.html, create a relative link to education.html. Use appropriate link text.

8. Save the file.

Portfolio employment page

1. Create a new page call it employment.html.

2. Give it a heading and a title

3. Add an ordered list of your past employment

4. Create an absolute link to a website for one of your past employers. Use appropriate link text.

5. Add a comment (in the code) anywhere on the page. This will not be visible when viewing in a browser.

6. Create a relative link back to the index page.

7. Save the file.

8. Now, in index.html, create a relative link to the employment page. Use appropriate link text.

9. Save the file.

Portfolio

1. View your files in a browser and check that all of the links work, including the absolute links.

2. Fix anything that does not work! Remember that links are simply based on exact file paths. If they don't work, maybe you have a typo. Make sure that the file name in your link matches the actual file name that you've given to that file in your root directory.

next - Learning Check »