website construction j. michael moore copyright © 2003

Website Construction

J. Michael Moore

Copyright © 2003

J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition

2

Who I am J. Michael Moore M.S. Computer Science Working on PhD in Computer

Science TCDHH Certified Interpreter TSID Webmaster http://csdl.tamu.edu/~michael


3

Overview How the WWW works HTML – The language of the WWW Link Addressing Images – Adding pizzazz Using PDF Files Tools (including free ones!) Web site design and development Choosing a host Publishing – Uploading your site


4

The InternetThe internet is a huge interconnected network of computers that talk to each other. Each computer has its own unique address.


5

Internet Addresses Internet addresses (IP addresses) look like

this: 66.221.8.61 (TSID’s Address) These numbers are difficult to remember

so a domain name (e.g. tsid.org) can be purchased.

When someone types in a domain name, a domain name server (DNS) looks up the IP address for the domain name.


6

How Web Pages Work Web browsers (e.g. Netscape, Internet

Explorer) are clients that request information from a server.

Clients

Server


7

Getting a Web PageType the URL (Uniform Resource Locator) into the web browser or click on a link.


8

Request

http://www.tsid.org

The client sends a request to the Server.

Client Server

http://www.tsid.org


9

LocateThe server locates the data.

Server

Locate

http://www.tsid.org

Client


10

Return RequestThe server sends back the requested file(s).

Server

Return Request

http://www.tsid.org

Client


11

RenderThe browser renders the data on the screen.

Server

Render

http://www.tsid.org

Client


12

http://www.tsid.org/tsid2003/presenters.php

Anatomy of a URL

Protocol

Address

Folder File

Protocols http (hyper text transfer protocol) ftp (file transfer protocol) file (file from local computer) telnet (direct command line connection to another

computer) Etc.

Note: Most web browsers don’t require you type http://


13

When you don’t type a filename http://www.tsid.org/

Which file do you get (Depends on the server) index.html (or index.htm or index.php or index.asp) If index doesn’t work try default.htm, etc.

The above is the same as:http://www.tsid.org/index.php

http://www.tsid.org/tsid2003 is same ashttp://www.tsid.org/tsid2003/index.php


14

HTMLHyper Text Markup Language HTML is the primary “language” used to

create web pages. HTML is a plain text file with markups

that tells the browser how to draw the page.

These markups are called tags. Not all browsers draw (or render) things

the same way. If a tag is not recognized by the browser,

it is ignored.

15

Tags Tags gives the browser information

about how to draw the page An HTML page that is drawn like:

This is bold print.

The actual HTML looks like:

This is bold print.

16

Tags This prints bold

Opening Tag Closing Tag

The opening tags says where to start something.

The closing tag (with the ‘/’) says where to stop something.

17

Tags For bold:

Name: b Opening Tag: Closing Tag: 

Tags affect what is in between the open and close tag.

Hello renders as Hello.

18

Remember to UseClosing Tags A common error is to forget to close a

tag or to forget the ‘/’ in the closing tag.

#1 This is a GREAT day. #1 This is a GREAT day.

#2 This is a GREAT day. #2 This is a GREAT day.

(note the missing ‘/’)

19

Nesting Tags You can accomplish multiple effects

by putting tags inside of other tags. You must close the most recent tag

before closing the next tag. Right: Bold Italics

Wrong: Bold Italics

20

Skeleton HTML Document

Note that spaces are ignored.

You should use spaces and blank lines to make it more readable.

<html><head><title>Skeleton Title</title></head><body>Skeleton Body</body></html>

21

Skeleton HTML Document<html>

<head> <title>Skeleton Title</title></head>

<body>Skeleton Body</body>

</html>


22

Attributes Most tags can have attributes.

Attributes affect how a tag draws its content.

For example in our skeleton page we can change the background color.

23

Attributes

<body bgcolor=“blue”>

Tag Attribute

Attribute Value

Stops reading attribute value when a space is encountered unless it is in quotes. To avoid problems, always place attribute values in quotes.

We’ll see an example later.

24

Documentwith Blue Background<html>

<head> <title>Blue Background Example</title></head>

<body bgcolor=“blue”>Body Stuff</body>

</html>


25

Color – A Quick Look 16 colors have names that are

always recognized. For example blue, red, green, black, etc. See handout for all 16.

You can access a greater variety of colors by specifying combinations of red, green and blue.


26

Custom Colors Grey is #808080 Note: RGB colors always start with the

pound sign (#) Note F is most and 0 is least.

#808080Black 000000

Red FF0000

Green 00FF00

Blue 0000FF

White FFFFFF

Red

Green

Blue


27

Custom Colors - 2 The numbers are hexadecimal

numbers that range from 0 to F. (0 1 2 3 4 5 6 7 8 9 A B C D E F)

You can change colors by playing with the 6 numbers.

http://www.tsid.org/websiteConstruction/tools/html_color_picker.html


28

Finding Values for Custom Colors Warning: Some people have their

computers set up with less color choices, so even though you spend a lot of time working on a color, it may look really look bad on some people’s computers.

Note: Don’t set font color to white (FFFFFF). Printers sometimes set background to white to save ink and then you are printing white print on a white background.

29

Special Symbols Some Symbols can’t

be typed directly in HTML. For example ‘<‘, ‘>’, and ‘&’

Use a special combination of characters to make these characters.

E.g. & for the ampersand (&)

There are more than the ones shown.

Symbol Replacement

& &

< <

> >

© ©

“ "

– (em dash) —

http://www.ramsch.org/martin/uni/fmi-hp/iso8859-1.html


30

Spaces and Returns HTML basically ignores spaces and

carriage returns (enters). It will still put a space between words, but if you put in fifty spaces between two words it will still just show one space. It won’t start a new line if you put in an enter. Force an extra space by adding one or more -

We’ll see how to force a new line later.


31

Viewing a Page’s HTML Source Most Browsers allow you to view the

HTML for a page. This can be a good way to see how other people did whatever is on their page.

Note: Today is just an introduction and there is a lot more out there, especially when getting into interactive and fancier designs.

To see the source HTML IE go to View->Source Netscape go to View->Page Source


32

Links – Connecting Locally and Across the Web The web is one implementation of

hypertext. Hypertext allows text to be connected in a non-linear way.

Links allow you to connect your web-page with other pages you create and pages that others create.

When creating a link you specify the URL of where to go.

33

Link <a href=“URL”>Description</a>

The description is what you normally see blue and underlined on web pages and purple if it has been visited.

So if we wanted a link to the TSID website:<a href=“http://www.tsid.org/”>TSID Website</a>

34

Document with a Link<html>

<head> <title>Link Example</title></head>

<body>Body Stuff<a href="http://www.tsid.org/">TSID Website</a></body>

</html>

35

Forcing Line Breaks Remember that HTML ignores

spaces and returns in HTML. Notice how “Body Stuff” and the link

are printed on the same line in the browser even though they are on different lines in the HTML.

You can force a line break by adding in the HTML

36

Document with a Linkand a Line Break<html>

<head> <title>Break Example</title></head>

<body>Body Stuff <a href="http://www.tsid.org/">TSID Website</a></body>

</html>


37

Absolute vs. Relative Addressing When referring to the address of

information in HTML (I.e. A URL), there are two ways of specifying the address: Absolute addressing: This gives the complete

exact address of the file. Relative addressing: This gives a partial

address and the complete URL is constructed by adding information from the address of the current document.

38

Next Door Neighbor Example: <a href=“destination.html”>

This is for files in the same directory as the page currently shown in the browser.

39

Link with No Slash<html>

<head> <title>No Slash Example</title></head>

<body><a href=“destination.html">Destination Link</a></body>

</html>


40

Starting from Base URL If the URL starts with a slash, the relative

URL is appended to the end of the domain address.

So if we are on one of the pages at www.tsid.org, then

/tsid2003/agenda.php is converted to http://www.tsid.org/tsid2003/agenda.php

41

Link with a Slash (‘/’)<html><head> <title>Link Example with a Slash '/'</title></head>

<body><a href="http://www.tsid.org/tsid2003/agenda.php">Conference agenda with absolute addressing</a> <a href="/tsid2003/agenda.php">Conference agenda with relative address starting with a slash</a></body>

</html>


42

Moving Up When (..) shows up in a URL it is a

way to move from the “current” directory to the one above.

So if a URL starts with (..) then the browser moves up one level in the directory structure and appends what's left to the new URL of the new folder.

43

Link with ..<html>

<head> <title>Link Example with (..)</title></head>

<body>

<a href="../../">TSID Homepage by moving up from this directory.</a></body>

</html>

44

Images One of the great things about the web is

adding pictures. This is the minimum you need:<img src=“URL” alt=“Description”>

For Example <img src=“welcome.gif” alt=“Picture of a road sign stating: Welcome to the Internet”>

45

Image HTML<html>

<head> <title>Image Example</title></head>

<body><img src="welcome.gif" alt="Picture of a road sign stating: Welcome to the Internet"></body>

</html>


46

Image File Formats When uploading pictures you probably

want to use .jpeg (or .jpg), .gif, and .png files. Otherwise some browsers may not be able to show the picture.

.gif and .png files can have transparent backgrounds. This means that any background color or background image can be seen through the transparent part.

47

Image with Unknown Format<html>

<head> <title>Bad Image Example</title></head>

<body><img src="dittybag.tif" alt="Conference Logo: Continuing a Strong Texas Tradition, TSID 40 Years, June 19-22, 2003, Dallas, Texas"></body>

</html>


48

Getting Images Look for clip art from programs you

already have. Use the Internet. I like Google. Take Pictures

Use a digital camera Scan in Pictures

WARNING: Beware of Copyright laws


49

Image Sizes One thing you want to watch out for

is how long it takes for someone to download your page.

If people get bored waiting for your site to load, they might leave before you have the chance to impress them.


50

Download TimesPerfectTimes

25K 50K 100K 500K 1MB

4800 baudmodem

42.67 s 1 m25.33 s

2 m50.67 s

14 m13.33 s

29 m7.63 s

28.8 Kmodem

7.11 s 14.22 s 28.44 s 2 m22.22 s

4 m51.27 s

56.6 Kmodem

3.62 s 7.24 s 14.47 s 12.37 s 28.21 s

240 KCable/DSL

0.85 s 1.71 s 3.41 s 17.07 s 34.95 s

768 KCable/DSL

0.27 s 0.53 s 1.07 s 5.33 s 10.92 s


51

Checking out Download Times I found this calculator that you can

use to calculate download speeds:http://www.tsid.org/websiteConstruction/tools/dltime.html


52

Image Galleries Something people like to use their

website for is putting up pictures. Thumbnails done correctly are a

great thing. Thumbnails should be smaller

versions of the images that are like a proof sheet. People choose which pictures they want to see.

53

Bad Thumbnail pages With the <img> tag you can set the

display dimensions of the image. You can take a 10X10 inch picture

and display it at 1X1 inch. This is bad because you force the

person to wait for all of the large images to download.


54

Good Thumbnail Pages The thumbnail images should be

small images representing the larger images. They should not be the large images shown at a small size.

The thumbnail images are a link to the larger image.

We’ll do a sample gallery in the website we create later.


55

Image Editing Freeware: GIMP

http://www.gimp.org/~tml/gimp/win32/ Websites:

http://www.jpegwizard.com/ http://www.netmechanic.com/cobrands/

zd_dev/accelerate.htm

You can also use any other graphics/drawing programs you might have.

http://www.gimp.org/~tml/gimp/win32/



http://www.jpegwizard.com/

http://www.netmechanic.com/cobrands/zd_dev/accelerate.htm

http://www.netmechanic.com/cobrands/zd_dev/accelerate.htm


56

HTML Quick Reference Note the quick reference guide. It has what I consider the basic

HTML that you need. Nice to have around when you are

making web pages.


57

Text MarkupForm vs. Meaning Many tags change the appearance of text. Some do specific things to the text such

as make it bold, italics, colored, etc. Some change the look of the text, but

also have meaning such as em (emphasis) and h1 (heading 1)

It is important to use content based tags when possible. E.g. a blind person’s browser will list headings to allow the person to skip to the area of interest.


58

Creating Exact Documents Sometimes an HTML page doesn’t look good

when it is printed out. You want something to look like it does when

printed from MS Word or Word Perfect (e.g. a resume or a membership form)

You could put those documents on the web. Problems:

• Even MS Word doesn’t always look the same on someone else's MS Word

• Not everyone has MS Word


59

Some Output Formats PostScript was created allow printers

to receive jobs from any computer. Files are very large. Hard to view without a printer.

RTF (Rich Text Format) Files still large Not everyone supports them


60

The de Facto Standard PDF (Portable Document Format)

Works like a printer but instead of going to paper it makes a file

The files are reasonably sized There is a free viewer so anyone can

see them The problem was you needed special

software to make a PDF file


61

Creating PDF Files Online There is a website that can help http://ps2pdf.com Here you create a PostScript file which is

easier than you might think. Then you upload the .ps file and you get

back a .pdf file. The website’s FAQ explains how to make

a .ps file on your computer.

http://ps2pdf.com/


62

A Bit About Design It usually helps to

do a little planning. Who is your

audience? What information

do you want to publish?


63

Design Tips Just because you can do something does

not mean that you should. (Color, Blinking, etc.)

Animations can detract from the focus of your page.

Make sure things are readable. Fonts not too small. Background not too jumbled.

Try to minimize the amount of scrolling.


64

Sample Design Design

doesn’t have to be too fancy.

Might want it to be for more complicated sites.


65

Website Organization Use directories for sub-areas Make sure main page in each directory is

index.xxx or default.xxx Remember that referring to a directory in

a URL is the same is referring to index.xxx Avoid using spaces and certain characters

in directory and file names. E.g. spaces show up in the URL as %20 which is not very nice to read.


66

Basic Structure Main Folder (/websiteConstruction)

Home Page (index.html) Workshop Stuff (workshop directory) Tools (tools directory) Resources (resources directory) Gallery (resources directory)

Note: the main page in each directory will be index.html. This way the main reference can be to the folder and not to a file in the folder.


67

Breakdown of Workshop Stuff index.html

(Workshop Stuff main page) PowerPoint Slides

.ppt .htm

HTML Reference - .pdf Example HTML files - .html


68

Editors Netscape Composer (Free) Front Page (Commercial) Selida (Free) Arachnophilia (Careware) Dreamweaver (Commercial) Any Text Editor (Free and

Commercial) There are more


69

Netscape Composer I have chosen to show you Netscape

Composer. It is the best free WYSIWYG editor I

could find. FYI – WYSIWYG (What You See Is

What You Get) while this isn’t exactly true, it’s what’s attempted.


70

Set Up Page Template After the design, the first thing I did

was set up the page template. I used tables for formatting. Used some custom colors selected

with the color picker. And added the “Website

Construction” image. Let’s see how that is done.


71

Set up Menu Links and TSID Links I added links to the menu items. I realized later that starting with the

index.html folder in a subfolder was better than using the Homepage index.html.

Note there doesn’t need to be a link to the homepage when you are on the home page. Leave the item in the menu, but don’t make it a link.


72

Test Your Site You want to make sure it looks good on

different browsers. Test on different browsers (IE, Netscape,

Opera, Lynx) – Remember some people are still using browsers from 1993 or earlier!

There are some tools to help. http://www.tsid.org/websiteConstruction/t

ools/

http://www.tsid.org/websiteConstruction/tools/

http://www.tsid.org/websiteConstruction/tools/


73

Some Testing Let’s test one of the pages before we do

too much more. If we need to change, we won’t have to go

back and fix all the pages. http://www.anybrowser.com/index.html

Select Screen Size Test http://www.delorie.com/web/lynxview.htm

l Text only viewer

http://www.anybrowser.com/index.html

http://www.delorie.com/web/lynxview.html

http://www.delorie.com/web/lynxview.html


74

Now The Gallery I’ve already taken some photos of

people getting ready for conference and made thumbnails for them.

Let’s take a few pictures of the class and we’ll put it in the Gallery.

We’ll also make a thumbnail using the GIMP and a tool on a website.`


75

Getting it online I’m going to show you how to upload your

site to geocities and TSID. In either case we will need to reconstruct

the directory structure we created on the server.

I’ve done most of this already because of time constraints, but we’ll do a few examples where we modify the site and upload the files needed for that.


76

Changes to Do Gallery uploads Links to free website providers in

Resources Tripod Geocities

Link in Tools to Adobe Acrobat and link from PDF file to this resource.


77

Website Construction Sites we “created” or finished

http://www.tsid.org/websiteConstruction/

http://www.geocities.com/websiteconstruction2003/

If you need to contact me: [email protected] http://csdl.tamu.edu/~michael/

http://www.tsid.org/%0BwebsiteConstruction/

http://www.tsid.org/%0BwebsiteConstruction/

http://csdl.tamu.edu/~michael/