Assignment 1: Profile Website
Your first task is to create a "single" webpage about one of the following:
Your personal webpage should contain the following items:
Things to keep in mind:
Stick to semantic HTML only. We’ll spice it up with some CSS in the next part of this assignment. You can find a list of HTML elements commonly considered semantic HTML here:
http://microformats.org/wiki/semantic-html
- Profile of yourself or a friend - unless you did this as your practice
- Stats, hobbies, interests, dreams, etc.
- Profile of a landmark, city, or other place that is important to you (memory, want to go)
- Profile of a person that you admire
Your personal webpage should contain the following items:
- A proper title that displays at the top of the browser window or on the browser tab.
- A comment at the top of your coding that contains the course, date, and your first name. Remember, the comment should not be visible when the actual page is loaded in the browser.
- A title at the top of the page as an <h1> heading that is centered using css
- At least 3 headings (must utilize a minimum of two sizes)
- Several paragraphs. (Try to incorporate a <br> tag as a line break)
- An HTML unordered list. (Consider using embedded lists - lists within lists)
- At least two external links
- A footer that has a copyright symbol and indicates the current year and course name
- Minimum of 2 images. At least one should be floated either to the left or right side of the webpage using CSS. Add box information (margin, padding, and/or border) to make it look nice on the webpage.
- Within the body tag, create an in-line style that changes the font used throughout the document to sans-serif and effects both the background color and text color of the entire page. In choosing colors, be sure to select colors that don't negatively impact readability.
- Minimum of 1 inline style that over-rides styles effecting all similar elements on the page
- Add emphasis to sections of text preferably using <em> and <strong> but you can use <b> and <i>
- Utilize either subscripts or superscripts. For example in the date in your footer.
- Link your page from your portfolio page
- Link your page back to your portfolio page
Things to keep in mind:
- Utilize proper HTML / CSS coding
- Page should be saved as index.html in a folder called "yourname_profile"
- Any images should be included in a separate "images" folder within your project folder
- As a bonus, you could refer to the w3C schools site to see how to use the pseudo-class to change your links when the mouse moves on top of it or presses down on the link.
Stick to semantic HTML only. We’ll spice it up with some CSS in the next part of this assignment. You can find a list of HTML elements commonly considered semantic HTML here:
http://microformats.org/wiki/semantic-html