Create A Simple Personal Web Page
In this exercise we use the knowledge from previous two classes to create a simple personal webpage. After that we apply the given CSS style code to the created personal web page, and have a first impression about what CSS style can do.
STEP 1
Open NotePad (Start -> Programs -> Accessories -> NotePad) or your favorite text editor, and copy the content of following html code to the newly opened "Untitled document":
assign1_template.txt
If you can't see the source code of the document above or you just see the interpreted result of the source code (if you see something like this), you can select "Source" from the "View" menu of Internet Explorer, or view source code menu in other browsers, to open the html source code and copy the html source code into your text editor.
Before you start, please read the source code carefully and try to understand every single line of code, and if you don't please ask the instructor. Replace all the content inside the square brackt ("[]" bracket) with your own content, and save the file as "assign1.html" by selecting "save as..." menu item from the "File" menu of NotePad.
The orginal web page (before you replace the items in square bracket) looks like this. Your web page should look different since you replaced some of the contents with your own.
STEP 2
In the previous example, all the contents are displayed in your browser by your browser's default display style, for example the background is white, the text color is black, and header 1 element is displayed in 24-point bold Times Roman typeface etc. We can change all of this display attributes by using style sheet. I'll give a detailed explanation about Internal Style Sheet and CSS in our following lectures, here you just need to apply the given internal style sheet to your web page created in STEP 1.
Copy the style sheet data in following text file into your "assign1.html" web page, between <head> and </head>:
assign1_style.txt
Save the "assign1.html" and open it using your choice of browser and observe difference between the previous web page from STEP 1 and your new "assign1.html". This is an example of applying the style sheet data to the original "assign1_template.html" web page.
STEP 3
Try to modify the "background-color", "font", "font-size", "color", "text-align" attributes in the style sheet given above, and assign your own values to these attributes to observe the difference when you apply different values. For example, in the 2nd line of the style sheet data you can find
body {
background-color: #000000;
}
Change color value "#000000" to "#421D42" and the style sheet data would look like
body {
background-color: #421D42;
}
Observe the difference when applying the two different values. Here are some other values for other attributes try to apply these values to different style sheet elements.
Font (or font-family): serif, Arial, "Book Antiqua", "Courier New", Garamond, "Times New Roman", sans-serif, Tahoma, Script.
NOTE: some of the fonts might not be available to you if you're not using Windows. In that case, choose some fonts you like and assign the names of those fonts to the "font" attribute.
Font size: 10, 12, 14, 16, 18, 24, 32, 48, 72
Color: #421D42, #F59F1A, #296587, #11471C, #9C5600, #4A0000, #BC9C73, #212F1D, #C3961F, #FD9B02, #CADEB9, #16638F, #9ECE44
text-align: left, center, right
You can also come up with your own value and try it out.
Submission
Submit the "assign1.html" from step 2 and step 3, name those two files as "assign1_s1.html" and "assign1_s2.html". For this exercise you can submit it before the Moday class next week, please store your completed files in a USB flash drive, floppy disk, or a portable hard drive and bring with you to the Monday class next week. Starting from the next assignment, we use FTP submission and I'll explain how to do it in next class.
|
