HTML

Creating a Web Page - Working with HTML

Authoring software allows you to create a web page without having to know any HTML code. There are two categories. One is a converter. This type of program takes a normal document and converts it to HTML for you. Word has a Save File as HTML type feature. Another category is a program that is developed to create HTML code for you in a WYSIWYG environment. FrontPage is an example of one of these programs. The advantage to using an authoring tool is that you can quickly come up with a web page without having to know anything about HTML. The disadvantages are that 1. HTML is a live language. That means that new tags are being created continuously. Your version of the authoring tool might not have the latest tags. 2. Authoring programs make mistakes. You might convert or write something and when you go to view it in the browser window, it looks strange. Unless you know how to fix the HTML code yourself, you will have to live with the effect. It is recommended to learn HTML first and then to use an authoring tool if you wish to. One of the most advanced authoring tools is Dreamweaver, but you had better know what you are doing in HTML to use it. Because of the importance of learning HTML prior to ever using an authoring tool, this class and the CMST 385 classes require straight HTML coding. HTML may be written using any text editor. Notepad, which you have on your computer, under Start, Programs, Accessories, is a text editor.

HTML

All HTML files have the extension of .html or .htm. Most are .html

HTML stands for hypertext markup language. It is not a programming language; it is a markup, or coding, language. It uses tags to tell the browser what to do. HTML is not static; it is an evolving or changing language that is governed by the W3C. To create web pages in this class, you will use HTML in NotePad. You will not use authoring tools like FrontPage or Director. The words that you type into NotePad are called the code or object code. When you view your page using your browser, you are viewing the finished product, called the object code.

The basic form of a web page is:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

HTML uses tags and attributes. Tags are commands that state to the browser to do something a certain way. An attribute changes or modifies a tag. The majority of HTML tags have both an open and closing tag. We call a tag that has an open and close a container tag. The close is designated by typing a / (backslash) before the code. Tags are always in brackets < >. Attributes are always within the specific tag, which they are modifying. HTML tags can be written in all caps, small letters, or a combination. BODY, body, and Body are all fine.

When you want to work with colors, you have the choice of using the name of the color or the hexadecimal code for a color. Some colors that I can use the word for are red, blue, pink, gold, and brown. Hexadecimal codes are 6 digit codes that equal the color. For example, the hex code for the color red is FF0000. Luckily, no one has to memorize these colors - we just go to one of the many color charts available on the Internet. One of my favorites is http://www.smithplanet.com/batc/color2.htm. You are allowed to use 16 word colors. Legal color names are: Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For all other colors you should use the Color HEX value.

There are a number of things that you, the programmer, can do to lessen the chance that your page will not be viewed as you expect it to look. One of these is to use the web safe color palette. This palette has 216 possible browser safe colors from which to pick so you should be able to find your color choices. Here is one. Learn more about why there are 256 colors, but only 216 of these are considered browser safe: http://www.lynda.com/hex.html

A color safe color is one that we can expect to look the same no matter if the viewer of your page is using the Internet Explorer browser, the Netscape browser, the Firefox browser, a PDA, a cell phone, or any other way of accessing the Internet.

HTML means that the page will be an HTML document

HEAD is like header. In between these tags go things that affect the page. JavaScript often goes here. In this class, the only thing that you will have in the header area is the page's title.

TITLE is where you put the title of the page. This title shows in the browser's title area (not on the page).

BODY is used to enclose the body of the page. Everything that goes in between these pages is seen and displayed by the browser. All of the tags and text you want to use regarding the actual page needs to be within the BODY and /BODY tags.

· OTHER HTML TAGS & ATTRIBUTES

Adding Color to your pages: Backgrounds

We will look at three ways to add color to your web page backgrounds. In all cases colors are ATTRIBUTES of the BODY tag.

<BODY BGCOLOR="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. Notice the pound sign in front of the color code and the use of the quote marks surrounding the color.

o Example: <BODY BGCOLOR="#996666">

<BODY BGCOLOR="color">, where color is the word of the color chosen. Notice that you do not need the pound sign in front of the color.

o Example: < BODY BGCOLOR="pink">

<BODY BACKGROUND="filename.ext">, where filename is the name of the file and .ext is the extension of .gif or .jpg to be used as an image. Notice the use of the quote marks surrounding the file name.

o Example: <BODY BACKGROUND="starrysm.jpg"> In this case, the image wanted is in the same directory as the HTML document referencing it.

o Second example: <BODY BACKGROUND="images/starrysm.jpg"> in this case, since the image needed is in a subdirectory, the relative pathname needs to be written.

Adding Color to your pages: Changing the link and text colors

There are three colors that you can change; all are ATTRIBUTES of the BODY tag. The Attributes that you can change are the text of the words on the page, the color of the links, and the color of the links that have been visited.

<BODY TEXT=# "xxxxxx">, where xxxxxx is the hexadecimal color chosen. You may also use the color word. This changes all of the text on the page. If you also add font color tags to some text, that font color will override the BODY TEXT= tag. The default color of text for web pages is black.

o Example: <BODY TEXT="#660066">

o Example: <BODY TEXT="blue">

<BODY LINK="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. This will change the link colors from the default of blue to something else.

o Example: <BODY LINK="#FF0033">

<BODY VLINK="#xxxxxx">, where xxxxxx is the hexadecimal color chosen. This will change the visited link colors from the default of purple to something else.

o Example: <BODY VLINK="#666666">

o Example using both attributes: <BODY LINK="#FF0033" VLINK="#666666">

Note: Although the LINK= works fine, the VLINK= doesn't always work. Your user may see the visited link in its normal purple.

Note: Both the LINK= and the VLINK= can use the word color instead of the hexadecimal code.

Note: When you are writing web pages, the LINK=color tag will only show that color until you click on it. After that, it will show as the visited link color even if you open it again.

Note: It is very common and preferred to write all of four these attributes at one time, like so:

o Example: <BODY BGCOLOR="#00000" TEXT="#FFFFFF" LINK="#FFFFCC" VLINK="#00CCFF">

This would create a page with a body background of black, text in white, the links in pale yellow, and the visited links in turquoise.

Note: The order of the items in the <BODY> tag does not matter.

Note: If you use the BODY BACKGROUND="file", you can still use the TEXT=, LINK=, and VLINK= attributes.

Last Note: Be careful not to choose a background color and test color that is the same. It is hard to read black on black J

The Heading Tag

H1 sets the line to be the largest heading size. The H stands for heading. There are 6 possible heading sizes; they go from 1 to 6, with 1 being the largest. The heading tag is a container tag. </H1> to close.

Headings are usually used for titles and subtitles. The heading tag also automatically makes the line bold and places an enter following the line that is the heading.

Formatting the Text

CENTER - this centers the text that it is used for. Everything will be centered until the end center </center> is used.

I stand for italics. The I tag is a container. It must be turned off when you wish to stop italics. Two other commonly used formatting tags include B for bold and U for underline. Both are container tags.

Line Breaks and Ending Paragraphs

P is the paragraph tag. The paragraph acts like your pressing an enter at the end of a paragraph in Word. It moves to the next line, but is only used for after text or images. It can't be used to create blank lines on your web page. It is one of the only tags that does not need to be closed. You do not need to have an </P>.

BR means break. It is used to create blank lines in your document. You would have one for every blank line you wish to have.

HR stands for horizontal rule. A horizontal rule is a graphical line. The basic horizontal rule extends across the browser page. There are a number of attributes that one can add to this tag, including size, thickness, and style.

Adding Images

<IMG SRC="name.ext"> is the basic image tag. It means image source. The IMG tag says to display an image and the SRC is the attribute that says where the file can be found - its source. The form is image source="filename.ext", where the file name and extension must be in quotes and the extension must be included. If you do not write the filename exactly correctly, the image will not show.

This tag has attributes. The attribute is right after the start of the tag and is within the closing bracket. The image source tag is not a container tag. There is no </IMG SRC>. You may not have a space after the = sign. The attributes that should always be used are WIDTH, HEIGHT, and ALT.

WIDTH is where you type the actual width of the image being used. HEIGHT is where you type the actual height of the image being used.

The purpose of these tags is to make the page load faster because the browser does not have to look to see for itself what size the image is. It only needs to load it to those size settings. The WIDTH and HEIGHT tags are never used to change an images size. You need to use a graphics program to do that. To see the size of an image, when you click on the image to open it in a viewer, right click and choose properties. You can also open it in a graphics program and look at images information.

ALT is used for when the viewer can’t see the image. It describes what is being done. If I had an image of a flower, I might write the ALT attribute like so: ALT = "This is a picture of a rose".

To Add A Link To The Page

Here is the form:

<A HREF="URL">text</A> this tag has two parts. The A is a container and stand for anchor. It is used for two types of anchors, links like this one and creating bookmarks within a page. (We will look at that later). The HREF tag always needs that A tag.

The HREF means hypertext reference. It can be used to link to pages on your web site, other web sites, or images or pages within specific web sites. The form of the HREF is HREF=" linkname".

The first part of this tag is

<A HREF="URL"> Notice the closing bracket.

Following this are the words or image you want the user to see. If you do not add text or an image here, the user will not see the link.

At the end of the words or image that the user sees as the link, you will close the A tag.

o An example: <A HREF="http://www.yahoo.com">Click here to go to Yahoo!</A>

The Email Link

The email link allows users to click on the link and open an email compose widow. The email window that opens comes from the one that is set as the default browser client. The tag opens the email compose window and fills in the To line.

<A HREF=”mailto:emailaddress”> Send email to Person </A>

My email tag would be:

<A HREF=”mailto:[email protected]”> Send email to Christine Kikuchi</A>

A HREF says start a link

mailto:[email protected] is the tag and the email address

Send email to Christine Kikuchi is what the user sees. This can be a graphic image and/or text. It ends with the end anchor </A>

Note: No space on either side of the = sign

Note: You must put the mailto:email address in quotes.

To have the subject line automatically added, add ?subject=TextToShow directly following the mailto and in front of the closing quote.

o An example: <A HREF="mailto:[email protected]?subject=IFSM 201"”> Send email to Christine Kikuchi</A>

Lists

There are two types of lists that one can create on a web page, the ordered or numbered list and the unordered list, which uses bullets.

The form of both types of lists is to have the open list and close list tag. Each line of the list then uses the <LI> list item tag. The unordered list uses the tag <UL> and the ordered list uses the <OL> tag.

Numbered lists, by default, start numbering at the number 1 or the letter A.

Unordered (Bulleted) Lists

You create an unordered list by starting the list with the <ul> tag, followed by the <li> and </li> tags for each individual item in the list, and close the list using the </ul> tag.

This unordered list:

<html><head><title>CMST 385 Example</title></head>
<body>
<ul>
<li>CMST 385</li>
<li>CMST 386</li>
<li>CMST 430</li>
<li>CMST 450</li>
<li>CMST 498F</li>
</ul>
</body>
</html>

is displayed in your browser as:

CMST 385
CMST 386
CMST 430
CMST 450
CMST 498F

Ordered (Numbered) Lists

An ordered list outputs the list in a particular order and each individual item uses the <li> and </li> tags, just like the unordered list. The only difference is that you use <ol> instead of <ul>.

The ordered list:

<html>
<head><title>CMST 385 Example</title></head>
<body>
<ol>
<li>CMST 385</li>
<li>CMST 386</li>
<li>CMST 430</li>
<li>CMST 450</li>
<li>CMST 498F</li>
</ol>
</body>
</html>

is displayed in your browser as:

CMST 385
CMST 386
CMST 430
CMST 450
CMST 498F

Comment Tag

Comments are notes that a programmer can make in his or her code. These notes do not appear on the web page itself. They can only be seen by looking at the source code. Examples of comments are to write about copyright issues, to write your name and information (date of creation, etc.), or to add comments about the code itself.

o To make a comment, <! -- text that is comment -- >

Notes:

When you are working with your source code, every time you make a change that you would like to see, click on Save in Notepad and then click the Refresh or Reload (Refresh) button in your browser. If the Reload or Refresh doesn't seem to show your changes, try pressing Refresh while holding down the CTRL key if you are a Internet Explorer user or Click Reload while holding down the SHIFT key if you are a Netscape user.
To get any image from an existing web page, just point to it and right click. You will see the choice Save Image As. Remember copyright rules - don't steal images without proper citation. Keep the images in the same directory as the web page.
When you are creating an HTML document, you may press Enter as many times as you wish. The enters show in your source code (the document you are writing in Notepad) but they do not display in the browser (the object code). Any enters and tabs used in your source code are ignored by the browser. A space used between words does show, but using more than one space is ignored. These things are called whitespace. The <P> tag allows you to have an enter in the object code. The <BR> tag allows you to have more than one enter (blank line) in the object code. Using the special charater   allows spaces.

Source Code

Viewing the Source Code. In Netscape, go to View, Source Code. To copy any code in this view, drag the mouse to select it and press Ctrl + c. You can then paste it into any other program by pressing Ctrl + v. The Microsoft Explorer browser actually opens the code in Notepad when you choose View. You can then edit the code and save the file to a new name. You cannot change code that is on a web page. You can only use it to create a new file.

Browser Compatibility

The computer that the viewer of your web site is using is called the client. You, the web programmer, do not have control over the client computer. Among other things, the user may change the default fonts, may change the size of the viewing area, or may change the decision to show images. When you upload a web page to a server, you don’t know what browser the viewer is using. It is most likely I.E., but it may be Netscape, or Opera, or some other browser. Today, many people are viewing web pages using PDAs or cell phones. How each browser handles showing a web page differs. Because most of the world is using either I.E. or Netscape, you should work to ensure that your page can be viewed the same in these two.

Don't use plug-ins that only work with I.E. or only work with Netscape. Before deciding to use a plug-in, check to make sure that it will work in both browsers.

If you use images for links, you need to also have those same links somewhere easily found on your page written as plain text. If the user has turned off the images or the graphic that you selected does not show in the viewer's browser, that user will still be able to get to your links.

Times Roman and Arial are two fonts that you can be sure everyone will be able to view, regardless of browser type. If you use other fonts, there are no guarantees. One way to be able to use fancier fonts is to create the words in a graphics program and save them as images. Then you just add the image as you normally do.

One last point to make here - is your page accessible to users with disabilities? You can check it by going to http://www.watchfire.com/solutions/accessibility.asp.