CCAC SOUTH: SET-105 - Technical Computing Spring 2015

Assignment #4 HTML Webpages Revised: 2/8/2015

Student Name: Date:

In this project, you will create web pages using straight HTML the free HTML_kit program.

1. HTML stands for Hypertext Markup Language and it is used for the creation of internet webpages.

2. HTML_kit is a free editor that is optimized for the creation of HTML code. It is already installed on the classroom PC however you can also either download your own copy or get one from the instructor. http://www.htmlkit.com/download/

3. The guidelines are:

a. The topic of the website is up to you.

b. You may use the template provided but you must change it.

c. At least four different HTML pages must be created.

d. The name of the main page must be index.html.

e. The index page must contain links to at least three other pages.

f. A picture of your choice must be on the index page.

g. You must include at least one link to a downloadable file.

h. You must include at least one link to a different website.

i. Use as many of the different HTML commands as you can.

j. Make sure you indent your HTML code so that the formatting helps to make it understandable.

k. Use both comment lines and blank lines in your HTML code to separate sections. Do not crunch everything together.

4. It is not possible to explain everything about HTML in this class so ask the instructor if you do not understand or cannot do something.

5. Helpful Hints:

a. Create the basic index.html page first and then upload it and get it working before you work on the other pages.

b. Don’t try to make too many changes at one time. Limit your changes to a specific improvement and then upload and test. This will make it easier to debug your errors.

c. The normal revision sequence is:

i. Edit the HTML file

ii. Preview it in the editor (this does NOT mean it will work on the internet)

iii. Upload it to the website

iv. Use the Internet Explorer to verify that the file is working on the internet.

6. You are to turn in a copy of each HTML file and a screen print of each page through the normal assignment process. There should be at least eight files (four screen prints and four HTML web page listings). Save them all in one MS-Word file as: Assignment4_your_name; example Assignment4 – Dan Wolf.doc. Place this in the class folder with your name.

This is a default template for a basic webpage:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My Personal Webpage</title>

</head>

<p align="center"<b<font size="+2">COMMUNITY COLLEGE OF ALLEGHENY CAMPUS </font</b</p>

<p align="center"<font size="+2"<b>SOUTH CAMPUS </b</font</p>

<br>

<br<font color="#FF0000">Put your row#1 text here</font<br>

<font color="#FF0000"<a href="introduction_mit103.html">Course Introduction for MIT-103</a</font<br<br>

</b</font</td>

</tr>

<br<font color="#FF0000">Put your row#2 text here</font<br>

<font color="#FF0000"<a href="files_to_download/15_-_course_review_f2008_new.wmv">Final Exam Review Video for MIT-103</a</font<br<br>

</b</font</td>

</tr>

</table<font face="Trebuchet MS"</center>

</div>

<br<br>

<font face="arial" size="2">This is a line of text with arial font and size=2

</font>

</CENTER>

<br<br>

<pre>

<b>Community College of Allegheny County

South Campus

1750 Clairton Road (Route 885)

West Mifflin, Pa. 15122-3097

412-469-1100

</b<br>

This page was last updated on: February 07, 2014

| <a href="https:\\www.ccac.edu">CCAC Home</a> | Contact Me |

</pre>

</div>

</body>

</html>

Example for the Default HTML template:

How to upload your new HTML file to your website:

1. The primary HTML file must be named “index.html” and the spelling should be lower-case.

2. Start the HTML_kit editor and load your index.html file.

3. Select the Workspace tab and then click on Upload (or press Control-U).

4. You should be a properties window like the following. Enter in the fields as shown but use your own Login User Name and Password. Click OK.

5. You should now see the following sub-window to the right. Drag the small upload icon that is near the bottom left of the page onto the CCAC site address as shown.

Basic HTML commands

http://www.ncsu.edu/it/edu/html_trng/html_basics.html

This section covers some basic HTML commands and explains the steps involved in preparing a document for viewing via the World Wide Web.

Basic steps: using tags

HTML uses tags to communicate to the client (browser) how to display text and images. Tags are contained in < > symbols. In most cases you start with the beginning tag, put in the word or words that will be affected by this tag, and at the end of the string of word(s), you place a closing tag.

For example, to create a title for a document you would do the following:

<title>My First HTML Document</title>

The closing tag normally contains a "/" before the directive to indicate the termination of the action.

HTML tags are not case-sensitive, although URLs generally are. In most cases (with the exception of preformatted text) HTML collapses many spaces to one space and does not read blank lines. However, when you write your text you should leave several blank lines between paragraphs to make editing your HTML source document easier.

The HTML tag

Although not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later.

The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag.

The head tag

Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by head> and </head> respectively.

For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like

<html>

<head>

<title>My First HTML Document</title>

</head>

Titles

A title tag allows you to specify a Document Title in your browser window. When people make hotlists, this title is what they see in their list after they add your document. The format is:

<title>My First HTML Document</title>

Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window.

The body tag

Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document.

The body should start after the head. A typical page might begin like

<html>

<head>

<title>My First HTML Document</title>

</head>

<body>

Headers

There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>

This is a header 1 tag

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

This is a header 3 tag

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

This is a header 5 tag

<h6>This is a header 6 tag</h6>

This is a header 6 tag

Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later).

Paragraphs

In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it).

<p> causes a line break and adds a trailing blank line

<br> causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing.

Preformatted text

The preformatted text tag allows you to include text in your document that normally remains in a fixed- width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font.

<pre>this is

an example

of a preformatted text tag</pre>

And this is how it displays:

this is

an example

of a preformatted text tag

Boldface and Italics

You can add emphasis to text by using the boldface and italic tags or the emphasis and strong tags. There is an underline tag as well, but most people don't use it since text that is linked is often underlined. The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis. When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.

Physical tags

This is a <b>boldface</b> tag. This is how boldfacing appears.

This is an i>italic</i> tag.

This is how italics appear.

Logical tags

This is a <strong>strongly emphasized</strong> tag.

This is a strongly emphasized tag. This is an ememphasized</em> tag. This is an emphasized tag.

There is a subtle distinction between the above "physical" tags which merely change the displayed font, and "logical" styles which are used (or eventually will be) to make types of emphasis client specific (for instance, using the <em> tag would make text red). While either style is fine, be aware that differences in these two kinds of tags may be more apparent with advances in HTML.

Lists

There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists. When using lists, you have no control over the amount of space between the

bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.

Unnumbered lists - Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag

</ul>.

For example, here is an unnumbered list with three items:

<li> list item 1

<li> list item 2

<li> list item 3

</ul

Here is how that list would display:

• list item 1

• list item 2

• list item 3

Numbered lists

Here is the same list using a numbered list format:

<li> list item 1

<li> list item 2

<li> list item 3

</ol

Here is how that list would display:

1. list item 1

2. list item 2

3. list item 3

Definition lists

Definition lists allow you to indent without necessarily having to use bullets.

<dl>

dt> This is a term

dd> This is a definition

dd> And yet another definition

dt> Another term

dd> Another definition

</dl>

And here is how this would be displayed

This is a term

This is a definition.

And yet another definition. Another term

Another definition

Nested lists

Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).

<li> list item 1

<li> nested item 1

<li> nested item 2

</ul

<li> list item 2

<li> nested item 1

<li> nested item 2

</ul

<li> list item 3

<li> nested item 1

<li> nested item 2

</ul

Here is how that list would display:

• list item 1

o nested item 1

o nested item 2

• list item 2

o nested item 1

o nested item 2

• list item 3

o nested item 1

o nested item 2

Blockquote

The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this:

blockquote>...</blockquote

and displays like this:

Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins.

Center

You can center text, images, and headings with the center tag:

<center>This is a centered sentence</center>

This is a centered sentence.

The center tag automatically inserts a line break after the closing center tag.

Horizontal Rule

To separate sections in a document, you can insert a horizontal rule tag hr>. A horizontal rule is displayed as follows:

Comments

It is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document.