Section I. Pointers and sites:
We have covered the web in some detail, but now what? How do we develop for the web. Well, as expected there are hundreds of sites on web development. See:
for a simple example. Or for a more complete source:
Another popular site is webmonkey http://hotwired.lycos.com/webmonkey because it has extensive how-to documents and language reference manuals.
You really can learn nearly all of it at webmonkey. Note that macromedia (as in Dreamweaver) also has some really nice material:
As one Juniata faculty noted, it doesn’t matter how you create a web page but rather what it looks like when you’re done. Okay, we’ll focus on design issues, but first let’s look at our options for development. In addition to the nifty url’s above, we’ll provide you with overviews of “how to” develop web sites using HTML, JavaScript, PowerPoint, and DreamWeaver. You can then take your pick or even go elsewhere. For example, you can always download HTML Kit from http://www.chami.com/html-kit/ and proceed to use HTML with the help of debugging and on-line help or you can download templates from DreamWeaver from http://www.macromedia.com/software/dreamweaver/download/templates and edit them (life is a lot easier if someone else has done the programming.)
II. HTML and Beyond
HyperText Markup Language (HTML) is the language of the internet, more specifically, it is a hypermedia document description language that is used to publish documents on the World Wide Web. HTML files are in an ASCII format, meaning that you can use any old text editor to create an HTML file. Simply use a text editor such as Notepad to create or edit HTML. Save the file with an HTML file extension. Then, examine the file with a browser such as Internet Explorer or Netscape. Transfer the file to your web space (i.e. your website directory) and then use the browser to examine the page on its web space.
Here is a simple HTML file:
<html>
<head>
<title>
This is a Simple HTML Page.
</title>
</head>
<body>
The body is the section where the text and graphics appears. This is a simple page so we’ll start with text only.
<h1>
This is what h1 looks like.
</h1>
<p>
Here we will place a new paragraph.
</p>
</body>
</html>
If you haven’t written basic HTML files before, simply copy the above into an editor and save it as an HTML file. Then open it in MS Internet Explorer. An HTML file is composed of elements which represent various structures (such as a header), or a desired behavior (such as italic). Most elements include a starting tag, content, and an ending tag. HTML markup tags consist of a left bracket (<), followed by the tag name, and then a right bracket (>). Tags usually are in pairs whereby the first tag indicates the start of an element and the second tag preceded by a slash (/) indicates the end. For example,
<H1>A Sample Web Page</H1>
There are also certain HTML elements that do not hold any content. These elements do not have any ending tags. Examples include a horizontal rule (<HR>) and a line break (<BR>).Certain browsers may interpret certain commands differently or may not recognize certain commands. For now, we’ll cover HTML coding for most web browsers. So, here are a few universal HTML commands.
- HTML identification <html> </html> identifies the beginning and end of your HTML code.
- Header name <head> provides the header information for the page.
- Title page <title> </title> specifies the title to be placed at the top of the browser window when the page appears.- Headings <h1> </h1>, <h2> </h2> etc through <h6> </h6> (capitalization is irrelevant)- Paragraphs <p> </p>- Horizontal Rules <hr>- Line Breaks <br>- Basic Text Styles <b> </b> for bold; <u> </u> for underline, <I> </I> for italic and<em> </em> for emphasize
When you have more than one set of tags together, they must follow nesting rules. In general, nesting rules tend to follow grammatical rules for brackets. For example, {( xyz)}is correct but {( }) is incorrect. Likewise, <b> <i>This is bold and italic</i> </b> is correct but ending with the sequence </b> </i> is incorrect. Within an HTML document you can send the reader to another web page by using a hyper link. An example follows: <p> If you want to learn more about HTML you can check out an <a href=http://htmlgoodies.earthweb.com/>HTML tutorial</a>. There are several to choose from. If you prefer to have the user click on an icon rather than the term HTML tutorial, you can provide an image for them to click on to get them to the web page. An example follows:
<a href=”home.html”> <img scr=”cabin.gif” width=”50” height=”55” alt=”cabin icon”></a>
Try putting the above options together in a web site that you can use!
Named anchors are similar to sending the user to a specific URL. However, rather than redirecting them to another web page, you are simply directing them to a later section of your own web page. See the following example:
<html>
<head>
<title> How to write HTML Code </title>
</head>
<body>
<h1 align=”center”>
How to Write HTML Code
</h1>
<p> Putting a named link into your html<p><ul>
<li>
<a href="#anchor">hyperlink</a>
</li></ul>
<p> Here you can add a bunch of stuff and the user can review this or simply click on the link which will send them to a named anchor.<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<p> .
<h3> <a name="anchor">hyperlink</a></h3>
<p> Yada yada
<p> .
<p> .
</body>
</html>
Simple Exercise - Copy the pieces of code above into NOTEPAD and save the file(s) as filename.html. Then open these files in a browser (e.g. IE Explorer). Do you see how the code works? Now change the code in NOTEPAD (add a phrase of your own) and save it again. Hitting REFRESH on your browser to update your changes. You have written HTML code for the web!
III. ENTER JAVASCRIPT
Now, to make your page more dynamic and interesting, enter JavaScript!
The most popular reason for using JavaScript is “the rollover” or "rollover image". This feature allows the visitor to your web site to view different images depending on whether or not their mouse is rolled over a particular image or text in your web site. An example of rollover code follows:
Notice that when you rollover the image, the image changes. Below is some sample code that accomplish this type of web enhancement.
<HTML>
<HEAD>
<TITLE>Link Rollover</TITLE>
<script language="JavaScript"><!--Hide script from old browsersif (document.images) {final = new Imagefinhov = new Imagefinal.src = "hover_down.gif"finhov.src = "hover_up.gif"}else {final = ""finhov = ""document.fin = ""}// End hiding script from old browsers --></SCRIPT>
</HEAD><BODY BBGCOLOR="CORNFLOWER">
<h1><A HREF="next.html" onMouseover="document.fin.src=final.src"
onMouseout="document.fin.src=finhov.src">
<IMG SRC="images/final-hover.gif" WIDTH="147" HEIGHT="82" NAME="fin" ALT="fin"></A>
</BODY>
</HTML>
Can you see how this works? There are several parts to this: The image sources (hover_down and hover_up) and the onMouseover command in the <h1> are the key elements. In order for this to work, you need to make certain that your filename.gif files are available in the same directory as your program file.
Another popular reason to use JavaScript is to develop a data entry form that verifies fields and redirects the user to a particular location on your data entry form if verification fails. Here is an example of this code:
<html>
<font size="2" face="Arial" color="#FF0000">
<form name="TheForm">
<input type="text" name="nm" size="33"> Your Name
<br><br>
<input type="text" name="em" size="33"> E-mail address
<br>
<input type="text" name="emx" size="33"> Re-enter to confirm
<br><br>
<input type="button" value="Submit" name="SB" onClick="sendOff();">
<script language="JavaScript1.2">
var good;
function checkEmailAddress(field) {// Note: The next expression must be all on one line...
// allow no spaces, linefeeds, or carriage returns!var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);if (goodEmail){good = true} else {alert('Please enter a valid e-mail address.')document.TheForm.focus() // put the cursor in the email field againfield.focus()field.select()good = false}}function sendOff(){nmcheck = document.TheForm.nm.valueif (nmcheck.length <1) {alert('Please enter your name.')return}good = falsecheckEmailAddress(document.TheForm.em)if ((document.TheForm.em.value ==document.TheForm.emx.value)&&(good)){alert("Name and email address fields verified good.")}if ((document.TheForm.em.value !=document.TheForm.emx.value)&&(good)){alert('Both e-mail address entries must match.')}}</script>
</form>
</font>
</html>
Go ahead and copy the above code into a blank NOTEPAD document and save it as a filename.html file. Open it in your browser. What do you see? Do you see the forms fields? Go ahead and enter data and hit the submit button. What did you see? Were your name and email address verified? Try entering an email address that is not of standard format. What happens?
You may wonder how the above programs work. Well, JavaScript works within an HTML program. You simply insert JavaScript code within
<script type=”text/javascript: language=”JavaScript”>ADD JAVASCRIPT STUFF HERE and when you are finished using JavaScript, simply insert</script>
to end the JavaScript.
ASSIGNMENT: Copy the above code for JavaScript and make a rollover image and form web page of your own. Either add it to your existing webpage or save it as an html file in your "W" drive here at Juniata College. Send an email to your instructor providing the URL.
III. From PowerPoint to the Web
Now that you’ve reviewed the basics of HTML and JavaScript, you are probably anxious to find a program that will develop a web page for you without all the fuss. Let’s start with PowerPoint. Turn those exciting slide shows into a web page by doing the following:
Using POWER POINT
