Website Construction J. Michael Moore Copyright © 2003.
-
Upload
clinton-wood -
Category
Documents
-
view
219 -
download
0
Transcript of 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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
4
The InternetThe internet is a huge interconnected network of computers that talk to each other. Each computer has its own unique address.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
6
How Web Pages Work Web browsers (e.g. Netscape, Internet
Explorer) are clients that request information from a server.
Clients
Server
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
7
Getting a Web PageType the URL (Uniform Resource Locator) into the web browser or click on a link.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
8
Request
http://www.tsid.org
The client sends a request to the Server.
Client Server
http://www.tsid.org
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
9
LocateThe server locates the data.
Server
Locate
http://www.tsid.org
Client
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
10
Return RequestThe server sends back the requested file(s).
Server
Return Request
http://www.tsid.org
Client
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
11
RenderThe browser renders the data on the screen.
Server
Render
http://www.tsid.org
Client
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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://
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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 <b>bold</b> print.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
16
Tags <b>This prints bold</b>
Opening Tag Closing Tag
The opening tags says where to start something.
The closing tag (with the ‘/’) says where to stop something.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
17
Tags For bold:
Name: b Opening Tag: <b> Closing Tag: </b>
Tags affect what is in between the open and close tag.
<b>Hello</b> renders as Hello.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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 <b>GREAT</b> day.
#2 This is a GREAT day. #2 This is a <b>GREAT<b> day.
(note the missing ‘/’)
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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: <b><i>Bold Italics</i></b>
Wrong: <b><i>Bold Italics</b></i>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
21
Skeleton HTML Document<html>
<head> <title>Skeleton Title</title></head>
<body>Skeleton Body</body>
</html>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
24
Documentwith Blue Background<html>
<head> <title>Blue Background Example</title></head>
<body bgcolor=“blue”>Body Stuff</body>
</html>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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) —
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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 <BR> in the HTML
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
36
Document with a Linkand a Line Break<html>
<head> <title>Break Example</title></head>
<body>Body Stuff <br><a href="http://www.tsid.org/">TSID Website</a></body>
</html>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
39
Link with No Slash<html>
<head> <title>No Slash Example</title></head>
<body><a href=“destination.html">Destination Link</a></body>
</html>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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><br><br><a href="/tsid2003/agenda.php">Conference agenda with relative address starting with a slash</a></body>
</html>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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”>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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>
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
62
A Bit About Design It usually helps to
do a little planning. Who is your
audience? What information
do you want to publish?
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
64
Sample Design Design
doesn’t have to be too fancy.
Might want it to be for more complicated sites.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
67
Breakdown of Workshop Stuff index.html
(Workshop Stuff main page) PowerPoint Slides
.ppt .htm
HTML Reference - .pdf Example HTML files - .html
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
68
Editors Netscape Composer (Free) Front Page (Commercial) Selida (Free) Arachnophilia (Careware) Dreamweaver (Commercial) Any Text Editor (Free and
Commercial) There are more
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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/
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.`
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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.
J. Michael Moore TSID 2003 - Continuing a Strong Texas Tradition
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/