ccac south: set-105 - technical computing spring...

CCAC SOUTH: SET-105 - Technical Computing Spring 2015Assignment #4 HTML Webpages Revised: 2/8/2015Student 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 fileii. Preview it in the editor (this does NOT mean it will work on the internet)iii. Upload it to the websiteiv. 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.

http://www.htmlkit.com/download/

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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body bgcolor="#FFFFFF">COMMUNITY COLLEGE OF ALLEGHENY CAMPUS SOUTH CAMPUS Put your name here

 

<div align="center"><center>

<table border="1" width="95%" bordercolordark="#004000" bordercolorlight="#004000"> <tr>  <td width="100%" align="center">

 Put your row#1 text here <a href="introduction_mit103.html">Course Introduction for MIT-103</a> </td>

</tr> <tr>  <td width="100%" align="center" colspan="5"> Put your row#2 text here <a href="files_to_download/15_-_course_review_f2008_new.wmv">Final Exam Review Video for MIT-103</a> 

</td> </tr></table></center>

</div>

<CENTER> This is a line of text with arial font and size=2 </CENTER>

 <div align="center"><pre> Community College of Allegheny County South Campus 1750 Clairton Road (Route 885) West Mifflin, Pa. 15122-3097 412-469-1100 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 commandshttp://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 tagsHTML 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 tagAlthough 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 tagJust 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>

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

HeadersThere 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









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

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

 causes a line break and adds a trailing blank line 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 textThe 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 exampleof a preformatted text

tag</pre>And this is how it displays:this is

an exampleof a preformatted text tag

Boldface and ItalicsYou 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 boldface tag. This is how boldfacing appears.This is an italic tag.This is how italics appear.

Logical tagsThis is a strongly emphasized tag.This is a strongly emphasized tag. This is an emphasized 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 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 thebullet 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:<ul><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:<ol><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 displayedThis is a termThis is a definition.And yet another definition. Another termAnother 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).<ul><li> list item 1<ul><li> nested item 1<li> nested item 2</ul><li> list item 2<ul><li> nested item 1<li> nested item 2</ul><li> list item 3<ul><li> nested item 1<li> nested item 2</ul></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

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

CenterYou 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 RuleTo separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows:

CommentsIt 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.Comments take the form:

The comment can even break lines



The real power of HTML is its ability to link to other documents and pieces of text, images, video or audio. Links are usually highlighted or underlined in a document so that you know of their existence. Clicking on the link opens up the document for viewing.

Linking to other documentsTo link to a file on a Web server, your HTML tag would look like:

<a href="http://www.ncsu.edu/">Welcome to NCSU</a>

The text that appears between the beginning and ending tags ("Welcome to NCSU" in the above example) is the text that is the link the reader clicks on to go to that URL.When you make a link, imagine you're creating two anchor points: one exists in your document (the text to click on), while the other is the document to which you're linking. You basically create a thread between two points.

Here is what the parts mean:<a -- starts the anchorhref -- stands for "hypertext reference" http://www.ncsu.edu/ -- the URL of the other documentWelcome to NCSU -- the text that will appear and be clickable/a> -- ends the anchor

As long as you know the URL for a file, you can create a link to it.

Linking to a named anchorAnchors within the same documentTo link to a specific section within the same document, you must define an anchor name inside the document and then link to it. For example, if you were linking from the top of a document titled "chapter2.html" to the fourth paragraph of this same document, you'd give the fourth paragraph a name (any name, you make it up), in this case "important," and you'd create a link to this name instead of a URL.Continuing on with the above example, we are creating a link from the top of "chapter2.html" to the fourth paragraph; we are going to call this link "important". First, you would define the name "important" in the fourth paragraph with the name tag

<a name="important">First sentence in fourth paragraph</a>

Next, create the link to this "important" anchor (at the start of "chapter2.html"). It would look like:

<a href="#important">link to important stuff</a>

The pound sign in front of the anchor name tells the browser to look for the link inside the document that is already loaded instead of looking elsewhere in another file.Note that anchor names are case sensitive, and that some kind of non-blank text must appear in the named anchor tag.

Named anchors within another documentThere may be times when you not only want to link to a specific document, but more precisely, you want to link to a particular section of that other document. As an example, suppose you wish to set up a link from the document "Our first HTML document" to a particular section in a second document called "chapter2.html".First, you set up a named anchor in the document you are linking to (chapter2.html). To do this, go to the section in your second document where you want the reader to begin and define a named anchor. Name this anchor "important". Insert the following tag in the appropriate place in the second document:

<a name="important">some text</a>

In your first document you need to include not only the filename, but the name you defined for the anchor. This named anchor is separated from the file name by a pound sign (#). Place this tag where you want the link to show up (the highlighted text).

<a href="http://www.here.edu/chapter2.html#important">important part</a>

A user would see that the first document has the words "important part" highlighted. Clicking on thishighlighted text would take them to the "important" section in the second document.

Absolute and relative linkingIf a new neighbor you just met on the street asked you where you lived, you wouldn't give them your complete postal address. You'd say something like "two houses down on the left." Your postal address is your "absolute" address -- anyone can find you using the information it provides. The information you gave to your new neighbor is your "relative" address -- just enough information to locate your house from where you were standing.The same concept works with URL addresses. When linking from one document to another in the same directory, only the second document name is necessary, not the entire URL. For example

<a href="second_doc.html">Go to next page</a>

You can also link across directories to a document by relative position. For example:

<a href="../third_doc.html">Go to third page</a>

links to a document in one directory hierarchy higher than the current document.Relative links are strongly encouraged as they are easier to type and allow you to move groups of files from one machine to another without editing the files at all. Naturally though, relative linking becomes more and more dangerous the more directories you traverse. With that in mind, it's usually best to use relative linking only within files that are part of a single project (such as this HTML tutorial).

HTML commands for imagesYou'll notice that many documents you see have images that appear on the page. These images must be gif or xbm images. Other images can be included with a document, but require the browser to "spawn" an external viewer (which also means you must have that external viewer installed on your machine).The first thing you have to do to have an image on your page is to locate or create your gif image. There are thousands of public domain images available on the Internet, some of which are gif images, some are, say .bmp images that can be converted and then saved as gif images. You can also create your own image and save it as a gif file. As areminder, be sure to use only those images which you create yourself or have permission to use.

NC State University has several gif images on their Web server that are available for you to use in your document. These include images such as

• a "new" image which would let people know your web page has something new on it. (http://www.ncsu.edu/images/new.gif)

• Some circles, spheres, and balls for use in a document

(http://www.ncsu.edu/images/redball.gif)

(http://www.ncsu.edu/images/purpleball.gif)

(http://www.ncsu.edu/images/greenball.gif)

• Some lines for use in a document (to "spruce" it up)

(http://www.ncsu.edu/images/blue2green.gif)

(http://www.ncsu.edu/images/grad_line_grey.gif)There are many others available. Feel free to browse the page of Gra p h ic s y o u c a n use.

Putting an image in your documentImages that appear on a Web page are called in-line images. When you have the image ready to be placed in your document, you must provide the path/location or complete URL of the image. The HTML tag is as follows:

<img src="path or URL of image file">

For example, <img src="http://www.ncsu.edu/images/new.gif">Where "img src" stands for image source followed in quotes by the URL of the image. In this particularexample, it is an image called "new.gif" that is located on the Web server "www.ncsu.edu" in the directory "images".If the image happened to be in the same directory as the document you are working on, you would simply reference the name of the file without needing the complete URL.

For example, if you have a gif called "mypicture.gif" in the same directory as the file, your reference would be

<img src="mypicture.gif">

Text and Image AlignmentAttributes of the image tagText can be "floated" to the right or left of an image. The align=left attribute will float text down and to the left of the image; align=right will float text down and to the right of the image.The tagging looks like this:

<img src="http://www.ncsu.edu/images/32x32/bshelf_clear.gif" align=right>This

is an image of a bookshelf. With this new align=right tag, the textcan be beside it instead of below it. It looks nice this way.<brclear=right>

<img src="http://www.ncsu.edu/images/32x32/bshelf_clear.gif" align=left>This

is an image of a bookshelf. With this new align=left tag, the text can be

beside it instead of below it. It looks nice this way.<brclear=left>

It will appear like this on the Web page:

This is an image of a bookshelf. With this new align=right tag, the text can be beside it instead of below it. It looks nice this way.

This is an image of a bookshelf. With this new align=left tag, the text can be beside it instead of below it. It looks nice this way.

Important note: If you are floating text beside an image and use the tag, a blank line will be inserted and the following text will also appear beside the image. When you want your remaining text to be below the image, you must include a tag so that text will go down to the next clear margin, below the picture. Specify clear=left if you are using align=left and clear=right if you are using align=right. The clear attribute is Netscape-only.

Leaving space around an imageYou can increase the space around an image by specifying a horizontal or vertical margin in pixels.

For instance, adding the attribute hspace=20 will put a 20 pixel margin to the right and left of the image. The attribute vspace= adds space to the top and bottom of the image.

The tagging looks like this:<img src="http://www.ncsu.edu/images/32x32/bshelf_clear.gif"

align=left hspace=20>Thisis an image of a bookshelf. The text is aligned to the left and

there is ahorizontal space of 20 pixels. It looks nice this way. It helps to

add ahorizontal space to the image so the text is not so close to the picture. 

It will appear like this on the Web page:This is an image of a bookshelf. The text is aligned to the left and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal

space to the image so the text is not so close to the picture.

Alternative textJust in case a gif can't be displayed for some reason (network troubles or a user is viewing your document with Lynx, a line-mode WWW browser), it's a good idea to use the alt modifier to specify what should be printed if your graphic can't be displayed.

<img align=middle alt="Spiffy pic" src="http://www.ncsu.edu/images/testgif.gif">

Making an image into a linkAnything can be a link--text or images. To make an image into a link you simply put the image tag inside the tag for a link. For instance, we could make the belltower image into a link to the NC State homepage so that when the user clicked on the belltower the NC State homepage would appear. The tag would look like this

<a href="http://www.ncsu.edu"><img src="http://www.ncsu.edu/images/ncsubell-red.gif"></a>

As you can see, the <img src> tag is inside the <a href></a> tag. When an image is a link it will have ablue box around it in some browsers. Because your user may be viewing your document with Lynx (and won't be able to access any images) it is a good idea to have text along with an image as a link.

Supported image formatsThe latest release of almost every Web client now supports the "gif" and "jpeg" image formats. Both formats are ways of encoding image data, although the two are very distinct in the way they achieve this encoding.

GIF = Graphics Interchange FormatJPEG = Joint Photographic Experts Group

There are many programs on Unix, Macintosh and the Intel platforms that can convert between these and other graphic formats.

16 Basic ColorsMore colors available at http://www.sulross.edu/pages/48.asp

Color name #RRGGBBblack #000000navy #000080blue #0000FFgreen #008000teal #008080lime #00FF00aqua #00FFFFmaroon #800000purple #800080olive #808000gray #808080silver #C0C0C0red #FF0000fuchsia #FF00FFyellow #FFFF00white #FFFFFF

Changes the background color for the whole page<BODY BGCOLOR="######">

Changes the color of specified texttext text text text text

ccac south: set-105 - technical computing spring...

Documents