Your new assignment is to create a new website for yourself that will link to the exercises, writing assignments and projects that you will complete in this class. This project upon completion can serve as a portfolio of your work and will be turned in for part of your final grade. Follow the instructions carefully and read the steps thoroughly.
Web Design Portfolio Page Project:
1) Make a new folder for this project. Create an HTML document. This page will become your home page. This file must be saved as text in UTF-8 format, with no byte order mark (BOM). Save this file as a text-only file, and when you save the file name it "index.html". Make sure you name it exactly as it says: the words "index" and "html" with a period between them, with no spaces and no capitals.
2) This page must display a headline (in an <h1> tag) that states your full name. This should be the very first line in the<body> section. It should say something like "Seth Wilson's Home Page".
3) Following this headline will be a sub-headline (in an <h2> tag) that says "My Web Design Experience".
4) Following this sub-head will be one or more paragraphs (literally coded as paragraphs, using <p> and </p> tags) that indicate your writing assignment from last week.
5) Following this paragraph will be another sub-headline (in an <h2> tag) that says "What I Have Learned in ROP Web Design".
6) Following this sub-head will be one or more paragraphs (literally coded as paragraphs, using <p> and </p> tags) of the second part of your writing assignment from last week.
7) Following this paragraph will be a simple paragraph (literally coded as a paragraph, using <p> and </p> tags) of one sentence that indicates the name of the text editor that you used to create this page.
8) This page's <title> must indicate that this is your home page for your class work, so it should say something like "Seth Wilson's Home Page". Remember that the <title> always must be in the <head> section.
9) Add the HTML 5 DocType that will enable you to use an HTML validator. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). First, at the very beginning of your document, before the <html> tag, place this line of code:
<!DOCTYPE html>
10) Add the character encoding meta tag. Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:
<meta charset="utf-8">
11) In summary, this page must correctly demonstrate the use of the following tags:
- DescriptionTag
- document type declaration (DTD) (see step 9 above)
- character encoding meta tag (see step 10 above)
- HTML document <html>
- head section <head>
- title <title>
- body section <body>
- heading 1 <h1>
- heading 2 <h2>
- paragraph <p>
13) Create a CSS script that modifies each of the tags used in your HTML document, each HTML Tag used must be modified.
14) Your CSS must modify the:
- Text Sizes
- Fonts
- Text Color
- Background Color (or image, make sure the text is readable with whatever background you use)
- Paragraph Background Color
- Paragraph Background Margin
