Introduction to Web Design
by Thomas Charveriat

Course overview:

This course introduces learners to publishing on the World Wide Web.

In this course, we will look historically at patterns and trends that have shaped the Internet and the web and how these patterns and trends characterize the web today. We will look critically at how individuals, businesses, government organizations, and others construct and distribute knowledge within and through electronic spaces. We will look rhetorically at a variety of web sites to better understand effective--and not-so-effective--web design and to identify trends in design and information architecture.

Students will then apply these principles by designing their own web spaces by working in raw code and composing with HTML editors, and by capturing, creating, and manipulating graphics.

Note:

While we will spend some time working with HTML, graphic, and animation applications, this is not a course in software or programming. There are no formal technological prerequisites for this course. However, if you do not have basic computer skills, you will struggle in this course. By "basic" computer skills, I am referring to the ability to launch a web browser and find and navigate web pages; the ability to use word-processing software; the ability to compose, send, and receive email and email attachments.

First session:

HTML:Working in Raw Code

HTML stands for Hypertext Markup Language

HTML is the language with which web pages are written and designed.

Students will use any off-the-shelf text editor and create their first Web page.

1-Creating a Simple Web Page

Open a text editor program and type:

<!-START TYPING AFTER THIS LINE -->

<html>

<head>

<title>OSCAR WILDE</title>

</head>

<body>

All art is quite useless

</body>

</html>

<!-STOP TYPING BEFORE THIS LINE -->

-Save it as index.html(Files containing HTML must end in the .html or .htm extension)

-Open it with a web browser. Your Web browser should look like this:

Note:everytime a code is announced it is closed afterwards(TAG)

HTML doesn't take in consideration the end-of-line (Carriage Returns)

HTML tags are not case sensitive.

Definitions:

Hypertext: Text that is linked to documents on the web

Hyperlink: Linked text, images or media

Tag: An HTML directive, enclosed in "<"example">"

Attribute: A modifier to an HTML tag, for example,

<TAG ATTRIBUTE>

Container: An Element that encloses other objects, for example, <STRONG> </STRONG>

URL:Uniform Resource Locator, a unique address assigned to each object on the Web

FTP: File Transfer Protocol

HTML is free! That means that at any given time, you can look at the HTML codes of pages you like: (in Internet Explorer, VIEW->SOURCE)

2- How to upload a web page on a server so it is accessible to the world (www)

Download a FTP client software at http://www.zdnet.com/ , go to the download page and search for FTP.

Create an account for everyone on the class (web01,web02,web03,etc...)

Learn how to access this page

by typing http://www.montcada5.com/members/web01/index.html

or just http://www.montcada5.com/members/web01/ by default the server will look automatically for index.html

How does it work?:

- The browser connects with a server that contains your page.

- The browser sends a command to the server, asking for the page.

- The server sends the page, actually a file, containing code in a language called HTML

- The browser reads the HTML and finds references to all the other objects on that page (pictures, sounds, animations,etc...)

-The browser assembles the page according to the instructions in the HTML and displays it for the viewer.

Second Session

1- Putting an image on a page

You can either download an image from http://www.google.com and click on the images link, download one from http://www.gettyimages.com, or just use the one used here:

<!-START TYPING AFTER THIS LINE -->

<html>

<head>

<title>Oscar Wilde</title>

</head>

<body>

<img src="images/wilde.jpg" width="825" height="480">

All art is quite useless

</body>

</html>

<!-STOP TYPING BEFORE THIS LINE -->

Your browser should look like this:

(try changing the size, practical isn't?), later we will learn how to optimize image size to minimize viewing download time)

Another thing to consider is the path where the image is located (inside a folder)

URLs function like street directions (learning about global and relative path:

I live placeta Montcada 5,pral 08003 BCN Spain) or I live in the same street as the Picasso Museum. Same thing for the www:

<Img src="http://www.montcada5.com/images/wilde.jpg

or just /images/wilde.jpg

Note the importance of having the same folder organization locally and globally.

2-Links

<!-START TYPING AFTER THIS LINE -->

<html>

<head>

<title>OSCAR WILDE</title>

</head>

<body>

<a href="http://www.cmgww.com/historic/wilde/" target="_blank"><img src="images/wilde.jpg" width="200" height="280" border="0"></a>

All art is quite useless.

</body>

</html>

<!-STOP TYPING BEFORE THIS LINE -->

Once you click on the image, your browser should look like this:

Note: The browser opens a new window, this is due to to target="_blank"

3- Colors

Colors are in hexadecimal format (base 16)

0 1 2 3 4 5 6 7 8 9 a b c d e f

<body bgcolor=red>

or

<body bgcolor="FF0000">

Let's look at FF0000, colors are composed of the three elementary colors Red, Green and Blue

FF is the value for the Red, 00 for the green, etc...

Black=000000

White=FFFFFF

Third Session:

Images

JPEG or GIF?

Relative URL:

Two dots together in place of a directory name is a special case, meaning "go up one level". If the path begins with two dots (..) the path will start one directory higher than the current directory. For example: ../web/test.html

Photoshop

Use the lasso tool to cut out the silhouette of an object to incorporate in your page.

Snapshot of the Tools window with the Lasso tool selected:

To use photos for the web, Adobe has incorporated a nice little tool called "Saved for the Web", here is a snapshot of a good compression setting:

Fourth Session:

Image editng continue from previous session.

Brief introduction to Javascript and meta name