POINTS: 35 points

SUMMARY: Create a simple web page through HTML coding.
SKILLS NEEDED: Understanding of beginning and ending codes and being able to place the indicated attributes into the code.

Windows users.

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.

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 automatic cascading styles sheet (CSS). CSS allows much more flexibility in format and layout.

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