What follows is my lecture notes for Web Design 101, an introduction to web design for first time users. This set of notes, basically covers what I explain to users on the first night of the course. I cover the beginning of the web or internet, some important points to keep in mind, and my scoring or grading when viewing web pages.
Back in the 1960s, colleges and the defense department were starting to use computers for real work. There was a shortage of real information and no standards for doing most of what we do today when using the internet. Through the help of goverment funded programs like ARPAnet, NFSnet, researchers had a tool to see what others were doing. Those early days saw the formulation of the infrastructure, protocols, and processes that eventually became the internet as we know it today. Go here to read a brief history of the begining of the internet by the people who actually did the work. Despite all the humor around Al Gores reference to the internet and his involvement, he did have a very important role to play, which is covered very well in this article by writer Richard Wiggins in October of 2000.
The internet is composed of an infrastructure backbone, by that we mean both physcial wiring, routers, switches, and servers, as well all the protocols needed for all these physcial devices to talk and pass information from one location to another. That infrastructure started being developed in the early 1960s by a community of researchers, and it is this community that still keeps improving the tools and abilities we call the internet. To make it work, many management organizations were formed that monitor and approve the protocols that make up the underlying structure of the internet. At first the infrastructure, the community, and the management organizations were all private or goverment backed. More recently however all the items of the internet are commercially backed, publicly and privately funded, and openly managed thorugh various consortiums.
For the average user, the point at which they interact with the internet, turns around one protocol called Hyper Text Markup Language or HTML. As universities and research labs became more connected with each other, it became appearant that some other method or process was needed for the passing of information. Just the act of finding out what information was available proved problematic and usually amounted to some non-computer based process. At conferences, business cards were passed around, papers were exchanged, and often the latest information might have to wait until the next conference. Clearly computers should be able to help make passing data easier.
In 1989 Tim Berners-Lee and Robert Cailliau figured out a way to do just what was needed, and it was called HTML. The paper that they presented while at CERN, built on previous work as early as 1965. This new protocol enabled fellow researchers to "post" their collection of work on one of their own servers and have others see and read the information. Part of the protocol was designed to take into effect the fact that not all viewers of the data would be using similar systems. This new protocol was desinged in such a way, that the reader would control most of the formatting or how it was presented on their own system.
A major tenant of networking is the client-server backbone for most protocols. By that we mean, a client - or when you are on your computer and using a web browser, the browser makes a request to a program running on a remote server, which responds back to the client with the requested data. The server program is typcially "httpd" or the "deamon" that handles your request. The most commonly used deamon is Apache, which is free and available for all platforms. To get a copy or more information, go to http://httpd.apache.org/.
So when the new HTML proctocol appeared on the stage, researchers jumped on its simple yet extremely powerful set of tools. These set of tools allow a researcher to format a report in such a way that any researcher can see and follow the text in a standard format. There are simple text headers and paragraph formatting commands, as well as ways to reference other documents. These simple formatting protocols when used correctly are extremely powerful as we all know and have used.
As web designers we use HTML or Hyper Text Markup Language when we create a web page. There are other parts we may need to know about, such as setting up apache, but for this introduction, I want to get you creating a few web pages to remove any feeling that something magical is happening. You can master the basic concept qucikly and without any special tools. All of the early examples and projects will require nothing fancier that a simple text editor. I do all my web work using vi - the unix/linux default system text editor.
Suppose you wish to display the formatted output of a program for others to see. In it's simplest form, you only need to know three html "markups". These are <html>, <body>, and <pre>. For each markup there is the corresponding ending markup that signifies being through with this markup. In our case we have </pre>, </body>, and </html>.
Using our text editor, we create our example as "pre.html" and enter the following text:
<html>
<body>
<pre>
---cut and past text information here ---
</pre>
</body>
</html>
Now close your editor saving the file. Next point your browser
at the file you just created and see the text you pasted into
it. I use this process often inside command line scripts, like this:
echo "<html><body><pre>" > pre.html
ls -al / >> pre.html
echo "</pre></body></html>" >> pre.html
You can call the script from a crontab entry or cgi-bin file and generate output on the fly. I have used the above to generate html files from entire directories of text files.
Keep in mind that the browser reads in the html file one line at a time. It parses the line and determines what to do with the data. When it gets to a markup, such as <pre>, it knows that the data is "pre" formatted and will not wrap the text based on the width of the screen. Text that is not inside the two <pre> and the closing markup </pre> is automatically formatted based on settings within the browser. The most common action on text is to wrap the text based on the default font size and how many character will fit on your screen. These are all settings that you can change yourself.
So the browser reads in text and markups one line at a time.
It sees a begining markup such as our <pre>, handles the
text accordingly until it gets the ending markup as signified
by the "/" or the whole tag </pre>. I showed the tags or
markups on separate lines, but the browser normally ignores
all line enders, such as carrage returns and line feeds.
So you can put both beginning and ending tags on a single
line as is typical of a heading or bold faced text used
to define a change of topic or viewpoint. As in:
<h3>Introduction</h3>
which would be used to define an Introduction section of
your document. The "h" says to use your browsers default
text defined for "headers", typically in bold letters,
with a font size of 3, with 1 being largest and getting
smaller fonts - or more characters to the inch as the numbers
get larger.
Keep in mind that all these "default" browser settings can be adjusted by the user and may be different than from what you see on your system. The orginal concept was each user would in fact customize their settings to match their own system setup. People with eye problems might use very large fonts, while people with large screens and good eyesight might chose to use the smallest fonts possible. As web desingers, we have no way of knowing how the user has their system setup.
For your first official assignement, I want you to create a web page using your text editor and the below markups. Read the links about the internet and Al Gore, and give me three paragraphs on what you think after your reading. Keep it simple, but also see how little html markup you need for a usable page.
For more details and a look at what the html specification is all about, go to: HTML 4.01 Specification. We will spend more time on using and understanding the specification, as you will need to understand it when trouble shooting more complex web pages and optimizing the users web experience.
The objective at this point, is to make sure you understand how and why html works. As we get more complex in our projects, we will progress from using a simple editor into more complex tools that handle the greater complexities of projects.
I use a pretty simple set of steps to grade your work, or any web page I visit. It comes from a few simple concepts that many web desiners seem to forget. So here they are:
With the three concerns listed above, we can see why it is important to keep the complexity and included graphics to a minimum. When we start working on optimizing your web experience, we will find that loading and using graphics can impact tremendously the time required to download your page. Every included script, CSS, or image, requires a separate client-server data transfer, and thus adds delays in displaying that all important web page.
I can not say how annoying and counter productive it is to go to a web site and not be able to read some link, because it is done using bad color choices. Instead of turning off my browsers automatic acceptance of colors and formatting, I just leave and buy elesewhere. I dare say, I am not alone in this practice.
My final word for this session is to remember that your objective is to convey information to the viewer. You are not trying to show off the latest programming language or tool. Your use of tools and protocols or languages should be transparent to the user. You want the viewers experience to be as positive as possible, so they buy or come again to your site.