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.

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.

From Menu select TextEdit then Preferences

On the New Document tab, select Plain Text and on the Open & Save tab select Ignore rich text commands in HTML files.

Select Plain TextSelect Ignore rich text comands 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.

Open with Text Edit

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.

Instruction HTML tags
(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

<h1> </h1>

(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.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

(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>
</blockquote>
(1 pt) Format the words "Creating websites are a lot of fun" red <span style="color:red">
</span>
(1 pt)Create a link for the words "ICS107 Web Site Development". with the web address as shown in the code on the right.

<a href="http://vanessa.wcc.hawaii.edu/ICS107">

</a>

(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
The 3 things I enjoyed most about ICS101 are:

<p>

</p>
(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)
<li></li> (for each item)
</ol> (at the end of 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:
<div id="content">

Scroll to the bottom of the document

Before the </body> (at the very bottom) type in:
</div>

Save the file.

SAVE!

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.

<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #003300;
}

h1 {
font-size: 200%;
color: #003399;
}
h2 {
font-size: 150%;
color: #003399;
}
h3 {
font-size: 125%;
color: #003399;
}
#content {
background-color: #FFFFFF;
width: 540px;
margin-right: auto;
margin-left: auto;
padding-right: 3px;
padding-left: 3px;
}
-->
</style>


Need Help?
Contact the instructor
via UH email
Please attach your file to the email.