POINTS: 35 points
SUMMARY: Create a simple web page through HTML coding.
SKILLS NEEDED: Be able to change preferences BEFORE opening file. Understanding of placement of beginning and ending codes and being able to place the indicated attributes into the code.
Instructions for opening the file
Double clicking on the file will open it in a web browser. A text editor must be used. Text editors may need special setting or a different way of opening the file.
- Do NOT use Word.
- For Macs use TextEdit - you may need to search for the application if you do not see the icon to start TextEdit
In order to see the HTML codes that are already in the document some of the preferences in TextEdit need to be changed.
Failure to change the preferences BEFORE opening your document will result in a score of 0 for this assignment.
To change the preferences. First open TextEdit. Follow the directions below to change the preference.
On the New Document tab, select Plain Text and on the Open & Save tab select Ignore rich text commands in HTML files.
Once those changes are made, go to your ICS101 folder and look for the file webpage-yourname.html and control - click on the file, then choose Open with TextEdit.
Below are instructions for adding HTML to the text in the Project 6 file. Type the beginning tag before the text specified and closing tag after the text specified in the instruction column.
|(1 pt) In the head section find the words "ICS101 Assignment - Web Page" make these the title (This will display in the title bar of the web page)||<title></title>|
|(1 pt) Format the words "Basics of web pages" as Heading 1 in the body section||
|(1 pt) In the first paragraph, format first occurrence of the word "Text" as bold||<strong></strong>|
|(1 pt) Format the word "difference" in the second paragraph as italic||<em></em>|
|(7 pt) Insert bullets into the list of items starting with "paragraphs" and ending with "table cells"||<ul> (before the list items)
<li></li> (for each item)
</ul> (after of the list items)
|(6 pt) Scroll down to the headings then format the Headings 1 -6 as each of the Heading styles.||
|(1 pt) In the paragraph after the list of the headings italicize the name of the book.||<em></em>|
|(1 pt) Format the quote (text beginning with "Web design is an art and a science" and ending with "different specialties") as a block quote||<blockquote>
|(1 pt) Format the words "Creating websites are a lot of fun" red||<span style="color:red">
|(1 pt)Create a link for the words "ICS107 Web Site Development". with the web address as shown in the code on the right.||
(1 pt) Save this picture of WCC's campus (Right click - Save Picture As) Save the picture to the same folder as your ICS101 files and be sure the name is wcccampus.png
Insert the image before the ending code </body>
|<img src="wcccampus.png" alt="Windward Community College campus" width="125" height="82">|
(2 pt) Add a paragraph after the image and before the ending code </body>
Between the paragraph codes, type in
|(8 pt) Under the paragraph in the last step. Add a number list. List 3 items that you enjoyed about ICS101||
<ol> (before the list items)
(1 pt) Create a division for the text, so that styles can be applied.
Scroll to the top of the document.
After the <body> tag (right below the head section) type in:
Scroll to the bottom of the document
Before the </body> (at the very bottom) type in:
|Save the file.|
Preview your page in a web browser by clicking on the file from your file listing. This is what the first generation of web pages looked like. Pretty boring, huh
Adding Simple Styles
Up to this point we've only made changes that are in basic HTML, the following changes create styles called cascading style sheets (CSS). CSS allows much more flexibility in format and layout. The following styles add in a font style and background color to the document (body), add in color and sizes for the headings (h1, h2, h3) and make a box for the content that has a white background and is centered on the page.
(2 pt) In the
Head section of the file below the </title> code and before the </head> code, add the following code (shown between the two lines below). (Don't type it -
copy the text & paste!)
font-family: Arial, Helvetica, sans-serif;
- Save. Close your text editor
- Preview your page in a web browser. This allowed some quick CSS changes to affect the whole page.
- Submit on Laulima in Assignments, tests & surveys.