Foreword

What Is a Web Site?

A web site is, traditionally, a collection of files of information consisting of individual web pages. Creating a web page is, in many ways, very similar to writing a letter with a word processor and saving it on your computer, but there are a few important differences.

First, you have to save the page in a special format (ie, language) known as HTML, rather than as a normal document. HTML stands for Hypertext Markup Language. Why hypertext? That’s the name given to the way that you can move between web pages by clicking on hyperlinks (those bits of text which are normally in blue and underlined) and accessing web pages or other material no matter where they are on the internet. A markup language is just a way of "marking up" text to specify what it is or does, for instance, when a visitor to a site clicks on Home he gets taken to the home page.

The reason we have to save our pages in HTML format, rather than as Word documents, Excel spreadsheets, PDF files, Zip files, etc etc, is that the way we read web sites is with a program called a web browser. For example, Internet Explorer, Firefox, Safari, Google Chrome, or Opera. The only type of information that web browsers are guaranteed to be able to display are HTML files. Sure, if you put a Word document on your web site, or a PDF file, web browsers will take a good stab at displaying the file but it could have some adverse result.

The second difference between creating web pages and writing a letter is that, having created your web page, you obviously need to save it. But rather than saving on your own computer, where only you can see it, you need to save it onto a web server. A web server is simply a normal computer, connected to the internet, which runs a web server program. This program means that other people's computers across the internet can connect to it, request a copy of your page, and display it.

In theory, any computer that has a permanent connection to the internet can be turned into a web server. Just install the necessary software, which is easily available free of charge, and the job is done. However, hackers love breaking into web servers and crashing them, or trying to change the contents of the pages they store. So unless you really know what you’re doing, it’s much easier and safer to rent some space on someone else’s web server to store your web sites, rather than running your own server. It’s very cheap to do, as you’ll discover later.

How the Web Works

It’s useful at this point to outline, in very basic terms, just how the World Wide Web actually works in practice. What really happens when you turn on your computer, open up your web browser and type www.any-webpage.com into the address bar? How does the information get onto your screen? And where does it come from in the first place?

As mentioned above, a web page is a document file, stored on a web server, created with a program that’s a bit like a word processor but which saves its files in the HTML format. When you open up your web browser and type "www.any-webpage.com", your computer connects via the internet to a large, centralized directory in order to find out where the "www.any-webpage.com" site is stored. This directory is called a DNS Server. DNS is the Domain Name System, which gives each web server (or rather, each web site) a unique name. In this case, "www.any-webpage.com". Computers, of course, don’t like names. They prefer numbers. In the case of the internet, each web server has a unique number known as an IP address. So the DNS directory allows your computer to look up the IP address of the server which holds the the any-webpage.com site.

Once your computer knows the IP address of the web server which holds the site, your computer can then connect, again over the internet, directly to that server. Your web browser sends a request to the web server, asking for a specific page of the site. The server sends that page or, if no specific page is specified, it sends the home page (usually named index.html). Your browser then displays the contents of that page, and the process is complete. At least, until you click on a link in order to see another page, and the process starts all over again.

What you see and how you see it is fully dependent on how your browser interprets the requested page. This is where issues regarding compatibility and adhering to certain standards comes into play. During the height of the browser wars, all of the different browser makers would include unique capabilities in order to make their browser more attractive to use than the next. That created situations in which certain types of content would only be visible or fully accessible with certain browsers. JavaScript is a prime example, when it was first introduced, Java enabled content was only accessible through Netscape browsers. Even to this day there are slight differences in how certain content such as radio buttons are displayed.

 







Class: Exploring Web Design I (Concepts of Design)


Introduction:

Hopefully the name of the class will not mislead anyone into thinking that this was going to be some hands on "Nerd Cafe" HTML writing marathon. What I hope to accomplish with this class is to introduce a different facet of web design that will better prepare the student for actually tackling the process.

This class approaches this subject a little differently, instead of jumping right into writing HTML, it will explore web design from the standpoint of understanding what it is that we actually see on the screen when we visit a website and the underlying mechanics at work. The goal is to introduce students to the entire process of Web Design. This introductory class will offer a concise overview of Web Design and the many facets involved in the fundamental design of websites and their content. This class will cover the essentials such as a brief history of the internet to gain a better understanding of its roots and its constant development. It will also cover material necessary to understanding the fundamentals of graphic design and its processes.

Follow these link to view either the Web Site which contains the class curriculum , the Text Version of the class material, or this link for the Graphical Version which consists of a PowerPoint show that help graphically emphasize some of the topics.

Content

  1. Introduction to Web Design and Production
  2. Introduction to Graphic Design
  3. Design Principles
  4. Elements of Design
  5. Typography and Legibility
  6. Adding Images
  7. Visual Themes
  8. Logos and Branding
  9. Design Goals
  10. Creative Process
  11. Design Process
  12. Layout & Content Design
  13. Career Opportunities

 







Class: Exploring Web Design II (HTML 101)


Introduction:

This class is the follow up to the original "Exploring Web Design Class" and will introduce the student to the basics of the Hypertext Markup Language (HTML. This will be a hands-on class which will include easy to follow assignments, class discussions and reviews of the actual project. Follow this link to the class material for Exploring Web Design II/HTML101

Prerequisites

Content

  1. Creating Your First HTML Document
  2. Modifying an HTML Document
  3. Headings: Six Levels Deep
  4. Breaking up content using Paragraphs, Breaks and Horizontal Rules
  5. Text Styling Tags
  6. Ordered & Unordered Lists
  7. Graphics
  8. Linking it with Anchors
  9. Preformatted Text
  10. Special Characters/HTML Character Entities
  11. Definition Lists
  12. Address Footers and E-Mail Links
  13. Blockquote
  14. Lumping vs. Splitting
  15. Standard and Enhanced HTML
  16. Colorful and Textured Backgrounds
  17. More on Horizontal Rules
  18. Extra Alignment
  19. Tables
  20. More Images & Lists
  21. META Tags
  22. Targets
  23. Forms
  24. Cascading Style Sheets
  25. JavaScript

View the actual material for the HTML 101 class.