To Temple College Class logo R. Craig Collins > Web Page Design > Instructor Notes: Tutorial 1

Instructor Notes: Tutorial 1 © R. Craig Collins, 2005/6

Session 1.1

As I have separate 'lecture' material on most of these topics, I will try to avoid duplicating information; but I still want to comment on some of the content :)

While my web page on Netiquette may give a sense of how to behave while on a network, the book begins with a brief notion of computers sharing data using a network (I will add some information on networks during Tutorial Three). From here the book sort of ignores about 30 years of Internet development that is covered in my Timeline web page and jumps straight to Tim Berners-Lee and the World Wide Web. While it is true that the Web grew out of a need for an easy to use method of sharing data, the key idea was to be able to link to related documents using something called hypertext. What made this idea work was software to distribute web pages, called a Web server, and software to receive web pages was called a Web browser. You may recall from the Timeline that Marc Andreeson developed the first viable server and browser while a college student, calling it Mosaic. Andreeson later developed a business to continue this software development called Netscape.

Instructor Notes: Tutorial 1 © R. Craig Collins, 2005/6

Session 1.2

My guide to building your first web page quickly shows how a text document can be marked up to tell a browser how to display items on a web page, using tags in HTML, or HyperText Markup Language. Now that you have some experience with HTML, the book starts to add a little detail, such as how web pages may look different on different computers, depending on the browser, hardware, and operating system.

HTML is evolving, and a lot of what you learn in this class, the basics, is HTML 3. If you continue on past Tutorial 5, either on your own, or in a follow up class, you will cover more HTML 4 and XML... but all versions are developed primarily by the World Wide Web Consortium, or W3C... run by, of all people, Tim Berners-Lee these days.

As noted elsewhere,
<br> can be substituted in this class for <br /> and
<img src ... > can be substituted for <img src ... />.

Instructor Notes: Tutorial 1 © R. Craig Collins, 2005/6

Continuing Session 1.2, for Lab 1

And as you learned for the first web page, HTML web pages are just plain text, meaning Notepad can generate great web pages if you don't want to spend money on Editors. Yes, we will experiment with editors, but only after you understand how HTML really works.

Tips for Good HTML Code

Lab 1 is to create Mr. Dubé's Chemistry Web page, by following the directions in the colored text boxes. Along the way you will see most of the items introduced in the first web page you made, and a few twists. Note, tags are not case sensitive, but many file names are, so normally you use lower case everywhere, and avoid spaces in file-names.

When creating this page, please realize that this book often adds inline style items that provide extra, more complex formatting than I discuss in my material; by the end of the semester we will adopt some of these tricks, but I will want to wait to explain and introduce them to you, after you have mastered some of the basics.

Future labs in this class will not come from the book; the book will be a reference guide to compliment my material, and to provide practice exercises if you choose to use them.

If you are continuing on, this same book is used in Web Design II, which is a much better place to implement these inline style items. So, early in the semester, my material will stick with traditional HTML.

In chem.htm, after introducing the basic HTML\HEAD\BODY structure, you will add many different size headlines, and learn that just as in a word processor, you can not only break a line with <BR>, but also organize information using the <P></P> paragraph set. Paragraphs come with a built in line break, just as headline tags do.

You are also introduced to lists, while I will address in more detail later, especially around Week 10. Basically, you surround the text of the list with either <OL></OL> or <UL></UL> tags, depending on whether you want an ordered (numbered) list, or an unordered (bullet) list. Where ever you want the bullet or number, drop in a List Item tag, <LI>.

<b> or <strong>?

In the old days, if your computer was using a font that did not have a bold attribute, the <b> </b> tag set would not work, but the <strong> </strong> set would at least add some emphasis to the text. Today, though, PC's use Times which has a bold attribute, and Mac's use Chicago, which has a bold attribute, so it <b> and <strong> appear the same on most computers.

So, while there are many ways to format text, few people care if it is logical or physical formatting, so focus on which tag is easier to remember... I prefer <B></B> for bold much more than <STRONG></STRONG>, as they look identical on most browsers, so I choose the one that requires less typing, and is similar to the formatting I use in word processing... B for bold, I for italic, etc..

But technically, <strong> is safer to use, since it is not reliant on the font installed on your computer.

You have already inserted an in-line image during first web page, but some remember, typically you can only use jpg or gif files. More on this during Tutorial Two. You have probably wondered how to use a < or > if it is not in a tag, or how to add the copyright symbol to a page, and the section on special characters introduces you to the &xxx; combinations, such as &lt; to make a <. and &copy; to make a ©. Finally, your learn how to add a <HR> horizontal rule to draw a line across a web page.

By following all of these instructions, you will soon build the web page you see on p. 1.41, using the HTML on p. 1.42. Now all you need to do is document these new tags, answer a few questions, and submit Lab 1!