Printable copy of this entire site

Transcription

CTN 160: Web Production
Class Website setup
Syllabus
Course goal / project / final outcome
Basic xHTML template
Blog expectations
Part one expectations
Parts two-three expectations
Part four expectations
Part five expectations
Major checkpoint: project plan
Bad Website project
Part six expectations
Part seven expectations
Part eight expectations
Part nine expectations
Reference and background materials
Background: the Internet
Background: search tools
Reference: foundation information
E-socrates.org (class Website) setup
E-socrates.org (class Website) use
Freeshell.org account registration
Freeshell.org account setup
Freeshell.org account use
Reference: Web server space and putting files there with FTP
Illustrated, step-by-step guides for FTP setup and use
Reference: Basic xHTML
Background: Firefox add-ons (extensions)
Guide to using our freeshell.org accounts to make xHTML pages
(Optional) Illustrated, step-by-step guide to using Notepad to make xHTML pages
Reference: Usability
Lab: usability discussion
Reference: Website planning and overarching design
Wireframe example
Lab: project planning checkpoint
Background: links for Website design and planning
Reference: Adding graphics to Web pages
Background: image maps
Lab: photo editing challenge
Reference: Use of color on the Web
Lab: Ongoing project, bad html
Reference: CSS Positioning (CSS-P)
Reference: Tables and data presentation
Reference: Inline frames
Reference: xHTML forms
Reference: Javascript and other ways to make a Web page more interactive
CTN 160: Web Production
General information
CTN 160 Course Syllabus
Yes, it's long. Read it anyway.
This South Seattle Community College course, CTN
160: Introduction to Web Publishing (Web
Your friendly instructor
Production I), introduces students to Web production
using xHTML. Students learn xHTML and the
Al Boss
fundamentals of creating a Web site: identifying site
[email protected]
goals and a business plan for the site, how to
More contact information is on
incorporate design, layout, graphics and other
my profile page or below.
elements into a site, how to create tables, input
forms, frames, and how to implement their Web
sites using FTP and remote file management. The
overall goal is to create and publish a viable and usable Web site consisting of valid
hand-coded, platform and browser independent xHTML that meets practical and legal
accessibility requirements.
Contact information
Office Hours:
My "office" hours are by appointment. ("Office" is in quotes since I have no office on this
campus.) I can be reached by phone or email.
Al Boss
(206) 263-7832 (my work phone at King County; please don't abuse it)
[email protected] (I don't always check my SSCC email daily, so if it's
urgent, you'd better call.)
Sometimes I leave an instant -message client running at work. It's there for WORK
purposes, so please don't IM me to tell me what-all the dog did today.
IM (instant message) options:
Note--these are for instant message, not email; I don't check these email accounts)
AIM: albertwboss
MSN: [email protected]
ICQ: 13400646
Yahoo: albertwboss
Google: [email protected]
If you don't know what IM is, then you probably don't have it , so don't lose any
sleep over this; just email me instead: [email protected].
More contact information is on my profile page for this course.
My employer, King County, is reasonably understanding of the fact that I'm
teaching this class, but sometimes you might contact me when I'm in the middle
of a project or deadline. I'll try to help right away if it's only going to take a
minute or two, but I can't really use County equipment to do work for the college,
so please don't take it personally if I tell you I need to get back in touch with you
later.
Premise
For this course, you will be treated as a contract employee. You will be paid in a
currency called "points", which is paid at the end of the quarter.
There's no paid time off, so if you don't show up, you don't get paid.
Full payment depends on:
the quality of your work
whether you deliver what was requested
whether you meet your checkpoints and deadlines
how well you work with, and get along with , others
You've been hired as a contributor . You will be paid for quality active participation
in conversations related to the work we're doing. These happen on the discussion
board.
Ongoing progress is expected and must be reported via a (minimum) weekly blog
entry.
Ultimately, if you want to get paid a premium amount, you need to demonstrate
that you have command of a body of knowledge, that you are able to learn, and
that you can apply this knowledge to whatever problems come up.
Course Structure and Requirements:
Required and Recommended Material:
Required: Ongoing use of our course Website. (setup instructions
are here)
Required: An account on http://www.freeshell.org/ (registration
instructions are here)
Recommended text:
Yes, that does say "recommended text". I am a firm believer in
the use of a book or two as a reference guide, and these are
both excellent books. Sooner or later you will need reference
books for work, so if you're able to afford one or both books, I suggest you do so.
However, there's not an HTML reference in existence that can't be found online, so if
you have good Internet access and you need to spend the money on something
frivolous like food or shelter, the bookstore will offer full refunds through Friday, Jan.
9.
HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide by Elizabeth
Castro
Additional readings will be provided on the class Web site or placed on reserve
in the Library.
Required: CTN 100 (Intro to computers) or enough computer experience that the
tool doesn't get in your way (see survival tips below)
Required: Web access
Required: Email access
Required: Participation in online discussions held via the Website.
Required: Status report blog entries, at least weekly
Required: Other readings, exercises and assignments as noted in their respective
sections of this Website.
Recommended: do whatever you can to avoid thumb drives as a means to move
files between campus and home, due to virus concerns.
Recommended: account set up at http://students.southseattle.edu, email and
portal page at a minimum
Expectations:
Checkpoints:
Checkpoints differ from traditional assignments with due dates. They're to be
done in combination with the reference/reading materials, as you go. The
checkpoints are listed throughout the referenence materials for the class
(broken up by "parts" on the course Website).
Read your way through the materials, and do the checkpoints as you come
across them. My intention is that you read a little, try it out, read about the
next thing, try it out, etc.
The purpose is to give you lots of opportunities to make sure you're getting
the concept, instead of having to read a bunch of stuff and then take a test
about it. If you get stuck at a checkpoint, send up a call for help in the course
Website's question-and-answer forum.
We do keep building on what you do in the checkpoints, so you need to
achieve them in order to work forward.
Checkpoint review: When a checkpoint gets mentioned in the notes, I should
be able to visit your site and see evidence of your work on it. Since the idea is
to work on the checkpoints in conjunction with reading the course material, I
expect to see signs of life out of you in this regard within a week at the latest.
Due dates:
Due by: Certain objectives (most notably site plans) will include an expected
due date. Material turned in by this date is eligible for full compensation.
Drop-dead dates: Material my be turned in for one week beyond the due
date. Your pay will be docked for every day past due. If the drop-dead date
passes and your work has not been delivered, you're in violation of your
contract and won't be paid at all.
Blog: You'll be using a Weblog to provide ongoing status reports for your CTN160
experience, updated at least weekly. I should be able to read your blog and track
how you're doing with the class--success, confusion, ahead, behind, bored, what
you've accomplished, and anything else that will help me know what's up with your
work here. Blog expectations and instructions are reviewed in more detail on their
own page.
Online discussion: Part of this class is meaningful participation in online
discussions held via the Website. In the workplace, collaboration is increasingly
taking place online, so that's the expectation here--contribute to the conversations.
This is a 5-credit-hour college course. It will take an investment of time, energy,
creativity, and effort if you're going to get your money's worth out of it.
The Syllabus is a plan for the quarter and as such, is subject to change. It is the
student's responsibility to be aware of any changes paying attention to the class
Website.
SSCC has published Student Learning Objectives (SLOs) for each course of study,
including learning objectives for the Web Publishing program, under which this
course falls. (Adobe PDF file.)
Compensation (Grades)
Checkpoints online, on time
(30 pts.)
Participation
(20 pts.)
Site plan
(30 pts.)
Valid code
(10 pts.)
CSS understanding
(10 pts.)
CSS-P understanding
(10 pts.)
Consistent navigation, design
(10 pts.)
Working form
(5 pts.)
Challenged yourself
(15 pts.)
On server and working
(10 pts.)
Followed instructions
(10 pts.)
Professional quality (no typos, etc.) (10 pts.)
Presentation
(10 pts.)
I track accesses to the site--when, how often, how long, how much activity . I use
that as a measure of attendance. For online students, participation for this class
translates mostly to activity in the discussion areas; for the classroom it's a split
between online participation and in-class participation.
Duplicate work
Some students are fortunate enough to be able to work on their assignments with
others who are also taking this class. I have no problem with that. Most
workplaces encourage people to work together.
This is still college, though, not the workplace. You have to be able to give me , as
your instructor, something that will allow me to do my job, which is to individually
assess your work and your skills for the college.
I cannot accept assignments that are identical duplicates of one another right
down to the same typos, the same mistakes, and so on. The college requires each
student receive an individual grade for their work, and I have no way to assign an
individual grade if I don't know how much of the work you did. The best I can do
in these circumstances is to split the grade between the people (for example, give
you 50%). Nobody wants that to happen.
It's okay to work together to solve problems, but implement the solution yourself.
Type your own code, without copying it letter-for-letter from a classmate. Put your
own thought into it. Don't worry about making mistakes ; we can correct those. I
can't help you if I can't see where you need the help, though. The goal of this
class is to teach you basic skills. I can't do that if you don't show me YOUR skills.
For more information and definitions of cheating and plagiarism, you can refer to
the "Academic Dishonesty" section of the current student handbook. The filename
changes too often for me to link directly to it here, but from the campus home
page at http://www.southseattle.edu/, click "Student Resources", and you'll find a
link to the most current version.
Don't be an idiot
Do not grab some Website off the Internet and try to pass it all off as yours. If you
can find it on the Internet, so can I, and I cannot give you credit for someone
else's work. I expect and support your looking at other people's source code to
figure out how to do something, and some degree of code reuse is normal, but I
can't assess your understanding of the material if the bulk of the code is not
yours. Again, you have to show me your basic Web production skills, not just your
copy-and-paste skills.
The campus, like pretty much any workplace, is a networked environment. You
log into the computers in order to use them. This means somebody somewhere
knows who you are, where you are, and what you are doing. Do not sit in my
class, or anywhere else where you shouldn't be doing it on someone else's
network, IM'ing your friends or reading your email. It is discoverable. You have no
privacy, and you will have even less in the modern workplace. Don't do things that
might convince people that you're not serious about your work. (Apologies for
being insultingly preachy about this subject, but I really don't want someone to
lose a job because we didn't stress this enough in college.)
Protect yourself
Developing work for the Internet, both in this classroom and in a job, means it's
going to be put where anybody can steal it and claim it as their own. Plan now for
what you'll do if this happens to you and you have to prove that you're the one
who did the work. Many options are available, including:
Keep a backup copy of a pre-release draft, burned onto a write-only CD so
the file date is evident. (Yes, you can fool this system, but anyone who's
going to go to all that trouble would save time just doing their own work; we
assume they're stealing your content because of time constraints.)
Put something in the code that only you know about or can explain. (Peculiar
spacing or indents, perhaps, or other irregularities that won't be obvious .)
Make the code so obtuse no one can read it. (Do NOT expect a good grade if
you do this, though!)
Resources
Class Web site:
Class materials such as selected notes, assignments and the syllabus for the class are
posted on the class Web site.
Any online students are welcome to attend sessions of the in-person class, it meets at
South Seattle Community College in room OLY 102 (Olympic building, SE corner of
campus) on Tuesday and Thursday mornings, from 8:00 - 9:50 am. The corresponding
Friday timeslot is set aside for lab work.
Computer Use:
Your lab fee entitles you to use the College's computing facilities. You may use the
computers in the Library and Learning Center Information Commons during scheduled
open hours. Lab aides are available to assist you with use of the computers, but they will
not help you with completion of your assignments.
Once again, be forewarned that our shared campus Windows computers have some
history of seeing viruses transmitted via thumb drives. I cannot guarantee their sanctity
and I do not suggest transferring anything between a computer here and your own
personal computer by means of removable storage media (thumb drives, disks, etc.)
There's also an open computer lab/lounge in the Tech Ed building (Room 127A, aka the
GeekHaus), that's usually got some advanced students hanging around in it who might
be of help.
One of the best resources for this course is the "Question and Answer" section in the
course discussion area. In most of these courses, your fellow students can answer a
question you post here before I even see it.
Survival hints
(Note: hours and resources listed here are as of the last time I checked. Please verify
them with the source before taking them as gospel truth .)
1. If you find working with either computers or with the Windows operating system is
so confounding that you're spending as much of your time fighting with the
computer as you spend doing the work, please let me know right away. A couple
hours training on basic Windows user skills will save both you and me a world of
2.
3.
4.
5.
6.
7.
8.
grief. I will either find someone to help you or I'll take part of a day off and do it
myself. If the tool (computer) is keeping you from being able to do the task easily,
this is a huge problem and one we want to address quickly .
I can pretty much promise that you will, at some point this quarter, mess up one of
your files and want to roll back to a previous version. Do yourself a favor and,
before you make major changes to something, save a backup copy. When we start
using the server accounts for editing files, see the instructions for using a shell
account for details on how to do this .
Feeling left behind? Overwhelmed by assignments and reading? Don't wait until the
last minute to do something; it will only get worse. In addition to help available at
the open labs, the Tutoring Center offers one-on-one help. (Instructor signature
required.)
If you're supposed to be in a classroom, attend class regularly. Set aside time
every week to do your homework and readings.
Use the Library and Learning Center. It is open weekdays from 7:30am until
9:00pm (Friday until 4:00pm), 9:30am-2:00pm Saturdays. (Check the times via
their Website; they are subject to change.)
If you need help, ASK! The tutoring center can help to locate assistance in your
subject area.
Check the course's Question and Answer forum often, not only when you have a
question about something but also to see if someone else has a question you can
help with. Remember, we're all in this together.
Do the work! Readings and exercises are not just a random act of torture. It may
not need to be passed in and graded to be useful.
Quality control (and SSCC Writing Center)
Although I don't technically grade your work for the quality of your writing, I do expect
professional-quality work out of everyone. Your Websites' content needs to be up to
business standards--the kind of thing someone would pay you to do. An employer
wouldn't accept sloppy sentences or misspelled words, and neither will I. You should , in
the course of this class, produce work that you can show to potential employers and
make them want to hire you, not want to avoid hiring you. Therefore, I encourage you
to take advantage of the SSCC Writing Center.
The Writing Center staff boasts a great combination of faculty, student peers, and
community writers to work with students. They give reader feedback, help students
follow the assignments, help students learn to edit, but do not do the editing for
students.
There are also plenty of good Websites, such as Purdue University's OWL, http://
owl.english.purdue.edu/handouts, that can help sort out obscure grammar rules.
However, someone with good English grammar and spelling skills (maybe a favorite
former instructor?), who doesn't look at your material all the time, can also be a good
resource. Fresh eyes can sometimes be the best proofreading and editing one can find.
(That's a verbatim quote from one of our students, Denise Lavoie. Please feel free to
offer your own suggestions for improvements to any of the class materials.)
SSCC's Writing Center is in the SSCC Library (LIB), room 205. The schedule is :
Mon-Fri: 9:00-2:00
Mon, Wed, Thurs: 4:00-6:00
Sat: 10:00-1:00
(Check the times via their Website; they are subject to change.)
Special needs and fair treatment
If you have any special needs, requirements, or accomodations that will help you learn
the material, please let me know. South Seattle Community College takes the
accessibility requirements very seriously, and we will do anything we can to ensure a
positive learning experience for our students.
If you ever feel you've been discriminated against or treated unfairly, for any reason, I
hope you will let someone in authority know. The campus has very good offices for
Diversity & Retention (for cultural, racial, gender, or sexual preference issues), and for
Disabilities. If it's me (or another instructor, or anyone else for that matter) I would
hope you'd talk to the person first, but I realize that isn 't always a very comfortable
thing to do. Our Dean is Malcom Grothe, and he is a very approachable person should
you need to talk with him.
Al Boss
Why did you pick this class?
It seems like I've been teaching Web Intro classes ever since
there was a Web to introduce people to. This is one of my
favorite classes, because it's kind of unpredictable and never
boring to teach.
What were you doing before SSCC?
My primary job is as a Web developer for King County. In my
spare time, I volunteer too much (at least according to my
wife) and wish I had more spare time.
Have you spent a lot of time working with computers?
Have you spent a lot of time online?
When I was 18, the University computer delcared me dead. It
took me two weeks to convince them that I was still alive,
and to this day they insist that "the computer cannot make
that kind of mistake." I swore at that time that I'd never touch a computer as long as I
lived. I managed to keep that promise until gradual school, but then as computers
became more and more useful as communication tools, I found my resistance to them
eroding, and now I find myself practically tied to the things.
Some of my contact information (Instant Message [IM], phones, etc.) is also available
on the syllabus.
Checkpoints
Checkpoint, file safety: In a nutshell, if you are working from a campus computer for
this class, register at http://ol.freeshell.org and use that site to edit and save your files
until you have a Web host account set up.
Once you have a Web host set up for your files, you can also use UnlimitedFTP (aka
MyFTP) (http://myftp.utechsoft.com/) to edit your html and css files directly on the
server (after making a backup copy there first!) without having to download them to a
local computer.
If you use picnik.com for image editing, and save from there directly to flickr.com, you
can code your image links to the flickr site and never have to download an image file
onto a campus computer. (You'll need accounts with both.)
That's the oversimplified summary version. There's a lot more than that to it, so read
on.
Checkpoint, server account registration: Email your login (not your password) to
[email protected] so I can complete your setup as a student in this class.
Checkpoint, file transfer: Review your options. Illustrated, step-by-step
demonstrations of how to use an FTP program to transfer files to an account on
Freeshell.org
Web-based FTP with UnlimitedFTP (http://myftp.utechsoft.com/)* (bonus: this client will
save your FTP login information)
Web-based FTP with Net2FTP (bonus: you can edit files without downloading them to a
local computer. Make sure you save a backup copy first, just in case!)
Filezilla for Windows, Linux, Mac OS 10.5 and above (low-bandwidth; screenshots)
How to use Filezilla ** (Flash movie, broadband recommended)
Many publicly available computers, including the ones in libraries and Internet cafes, do
not have a dedicated FTP program installed. A clever workaround is to install Filezilla on
a thumb drive and use that to transfer files. (Not recommended for SSCC campus
computers, though, or any computers whose security you're uncertain of)
How to install Filezilla Portable** (Flash movie, broadband recommended)
* UnlimitedFTP requires Java. If you're at a computer that won't let you use it, use
Net2FTP instead.
** Special thanks to Clive Woodhouse for creating and sharing the Flash -based Filezilla
tutorials.
Checkpoint, basic xHTML, tags for document structure: Set up a template file as
per the instructions. Create a new file based on it. (See Working in the shell account for
instructions.) The template should include the tags for document structure as noted in
this section, thus saving you some work. Put your name as the contents of the title
this section, thus saving you some work. Put your name as the contents of the title
container, then repeat it again as the contents of an <h1> container at the top of the
page body. Add in a <p> container with a sentence or two about what you might pick
for your class project. (Don't panic; you can change your mind later.)
Checkpoint, basic xHTML, saving xHTML documents: Save this file as an html file as
noted here, using the file name "index.html". Open it in a Web browser and see how it
looks. Edit the file (using the editor, not the browser) if necessary.
Checkpoint, basic xHTML, formatting text using xHTML: Add a level-two heading
(h2), called "Assignments".
Checkpoint, basic xHTML, linked (sitewide) CSS: Open another instance of the text
editor (same way you opened it the first time), so you have your index.html page open
and can create another page. Create a linked css page as described in this section, and
save it as "style.css". Now add the proper <link /> tag to the <head> container of
index.html, also as described here. Edit your current template file to include the <link />
to the linked css page so it'll be automatically included in your new files.
Checkpoint, basic xHTML, making lists: Beneath the "Assignments" heading, create a
bulleted (unordered) list. For list items, you can use these three items: Checkpoints,
Project plans, Final project.
Checkpoint, basic xHTML, making links: Create a link that goes to our course
Website at http://tiny.cc/ctn160.
Checkpoint, basic xHTML, the mailto: value: Add an email link to yourself if you
wish. Make any additional style changes you'd like.
If you're not working in a shell account, then follow the instructions from the FTP section
of this course, (in conjunction with the ones provided by your Web host provider if
you're not using a freeshell.org account), to upload your index.html and style .css files to
the Internet. If you are working in a freeshell.org shell, this step is already done; just
type (enter) at the command prompt.
Now find the index.html file on the Internet , copy its URL, and add it to the "What's my
URL?" forum on the course Website. Trouble uploading your files or finding them once
they're uploaded? Come to the Question and Answer forum and let us help out.
Checkpoint, usability: Several sites are listed in the usability site review instructions.
Follow those instructions. Under the forum called "Usability," report what you thought of
each site, and share your opinions on the usability of each site, any concerns that arise
for you, etc.
Checkpoint, Website planning: assemble all necessary Website design documents and
drawings, upload everything, and link them to your index.html page.
Checkpoint, use of color: Bad Web pages. You've learned enough now to be
dangerous. This is your chance.
Checkpoint, CSS positioning: Lay out your page design with CSS-P. Take the
storyboard and use a pencil to draw a grid across the page . Once you have drawn the
grid, take some time to figure out how to describe the positions and relationships. Try
coding it using CSS-P divs for everything you're placing. Elements of your site, such as
graphics, text and color, can be plugged into the divs, creating the same look as the
storyboard.
Checkpoint, tables: Incorporate a data table into either your class project or your Bad
HTML page(s).
Checkpoint, forms: If your project site calls for a working form, then add one. You can
use the Newmanic script detailed above for this class, although you'll have to work with
your ISP or network people if you need a permanent one after this quarter ends.
If your project does not call for a working form, then add one to your Bad xHTML site.
If you have no idea what kind of form you'd add to your Bad Site, just pretent that you
have opened an online store that sells and delivers made-to-order pizza, using your own
unique ingredients and delivery methods. Allow your customers to choose from among
your ingredients and create their own pizza. Your form should allow the customers to
choose from among 3 different sizes, 3 different types of crust, 10 different types of
toppings and 3 different modes of delivery. Don't forget to include in the form some sort
of way you can collect your money. Your form should also include proper options for
submitting and resetting information.
It has become tradition over the years in this class, for the pizza business forms to
feature some pretty bizarre stuff. I've had people offering delivery by rocket, teleporter,
pixie dust, pony, etc., and including among the ingredients choices such as watermelon
rind, lint, gravel, cigarettes, helicopters, armadillo, and so forth.
Checkpoint, Javascript: If you don't already have scripting in your project site or Bad
xHTML, go to http://javascript.internet.com/ or another source of free JavaScripts
(several are listed in the Javascript section of this site). Find a JavaScript that you like,
and that will work in multiple browsers. Follow their instructions to add it to one of the
xHTML pages in your project or Bad Website. If it doesn't work, try another one. A lot of
the scripts are old and might no longer work in modern browsers.
Using the course Website
Having difficulty finding your way around the course Website at first? These screen shots
might help.
Course home page
Discussion areas
Course goal / project
The expected outcome from this class is creation of a portfolio-quality Website of your
own design. With very few (if any) exceptions, everything we cover in our lab work will
get folded into your project site. By the end of the quarter, each page on the site should
include as many elements of Web publishing learned in class as is practical. The Website
created for the course project can be on any topic you'd be willing to show a prospective
employer--a business or organizational site, an informational site, a "let me show
through these pages how great I am and why you should hire me" site, a hobby site , a
genealogy or family site, etc. all could qualfy. The site must contain at least 12
original hand coded pages that link to one another, and a linked stylesheet to
control them all. As long as you keep up with the lab work, and continually fold what
you've learned into both new pages and the ones you've already created, your project
will remain up-to-date with everything required.
Credit comes from the following:
Participation in online discussions: use the discussion board to interact with the
other students, asking questions or commenting on their work.
Correct use of xHTML transitional code (Use http://validator.w3.org/ to check your
code as you develop it . Your code needs to get through the validator without issue
to be eligible for full credit on the final project.)
Linked CSS used to format all pages in the site
CSS-P for complex layout, tables for data
Consistent design and navigation/images
Use of working form
turned it in, etc.)
Conventions of good design are followed (consistent navigation, site name on every
page, user can always go to main page , alt attributes/values on all image tags,
etc.)
Online presentation (All students will present their final results via the discussion
boards. Tell us about your project, challenges in building or designing and future
plans for the project.)
You should be able to get a good grade provided you participate in the class, keep up
with the work and continually apply it to your site, pay attention to detail, try some
advanced tricks like styles, tables, frames or forms, and pay attention to design details
discussed this quarter.
Everything needs to be put onto the server one week before the end of the
quarter, even if you're still working on it, and is fair game for your classmates
and me to preview at that time. Start the discussion thread (see next
paragraph) on that day, too. You can continue to work on your final project up to
the presentation date. Classroom students must also show up in class for the
presentation date (the final exam date for the class). No excuses. Not even if
you're dead.
FTP the files to a Web server.
On the class discussion/bulletin area, in the "Final Review" forum, start a
thread:
Use your name as the subject line
Tell the direct URL to your final project's main page
Tell us
about your project,
challenges in building or designing, and
future plans for the project
Treat this as though it were an online job interview, and you are using this
piece of work to convince us of why we should hire you. Point out your
strengths, weaknesses, opportunities for improvement, etc.
Review your classmates' sites via the discussion area and contribute to the
conversation, ask questions, and answer any questions that you can.
Help! I have no idea what to do for my project
If you're drawing a blank on what to do for a project, here are some thoughts that have
come out of past classes. (You'll note that I've had some unusual students over the
years. Creative, but unusual.)
A site for a civic organization, church, neighborhood, volunteer group etc. that you
or a family member , friend, etc. are associated with.
A site for a friend or relative's business, hobby, etc. (Or for your own.)
An instructional site that tells how to do something you know well (i.e., online
research, motherboard replacement, French pastries)
A site for a completely fictitious, impossible, but (hopefully) enjoyable-to-invent
organization.
A pizza site that sells completely inedible pizzas with toppings like rocks, rodents,
and lint, with delivery options such as Pony Express, 747, and Fax. (This sprang
out of the homework for the part of the class where you learn about making Web
forms.)
A site that sells your services as a mercenary (would it surprise you that this was
originally done by a 20-year-old guy who played a lot of video games?), complete
with cruise missiles and thermonuclear devices.
A site that offers health, travel, dining and lodging tips for vampires.
A pet care Website offering ownership information about unicorns, velociraptors,
Minotaurs, etc.
A Website for a Barbie trailer park.
A site for a favorite park, trail, etc.
A remake (real or proposed) for an existing site that could really use the facelift.
A site for a musician or band. (Usually someone you know.)
Those are some of the ones I can remember turning out well. The bottom line is that it
seems to help if it's something you know, or something that holds your interest.
Working in the shell account (ongoing)
Quick summary
Login
cd html (enter)
cp -r current 2010-01-15 (substitute today's date) (enter)
cd current (enter)
ls (enter) to see what's there
pico filename.html (enter) to edit an existing file or create a new file
After exiting Pico, mkhomepg -p (enter) to make your files visible on the Internet
Logon
We connect using SSH, which is a secure replacement for the telnet protocol. To log
onto your server account to edit files:
http://sdf.org/ssh/
When the computer asks you if you really want to do this , say "yes".
users can all check the detailed instructions for other options available on a computer
where you can install software (e.g. not the campus computers).
The screen you get will look the same pretty much whether you connect via Telnet or
SSH. If you use SSH, the first time you connect it will ask you if you want to set up a
security key and a directory to store it in on the computer. The answer to these
questions is always "yes".
Connection via SSH:
Last login: Sun Jan 10 22:10:34 on ttys000
MacBook:~ alboss$ ssh [email protected]
The authenticity of host 'tty.freeshell.org (192.94.73.5)' can't be
established.
RSA key fingerprint is 53:2a:b3:33 :b6:88:ca:c3:ff:c2:1b:31 :44:11:fo:4e.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'tty.freeshell.org' (RSA) to the list of known
hosts.
[email protected]'s password:
Whenever it asks you a question you don't understand, press "enter" (or answer "yes" if
that's an option). For example:
Just press enter and continue on till you've given it your login and password.
Once you're connected, you are typing directly onto the server. Whenever you're sending
a command to the computer, you'll need to press the "enter" (or "return", depending on
your keyboard) key on your computer.
sdf.lonestar.org (pts/0)
if new, login 'new' ..
login: alboss
Copyright (c) 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005,
2006, 2007
The NetBSD Foundation, Inc. All rights reserved.
Copyright (c) 1982, 1986, 1989, 1991, 1993
The Regents of the University of California. All rights reserved.
You have new mail.
Welcome to the SDF Public Access UNIX system. (est. 1987)
For quick help, type 'help'
For detailed questions and answers, type 'faq'
For user discussion boards, type 'bboard'
For interactive discussions, type 'com'
For adding yourself to the SDF User Map, see http://sdf1.org/map
to create your URL http://alboss.freeshell.org, type 'mkhomepg'
Explore and Enjoy!
$
Next step:
cd html (then press the "enter" key on the keyboard)
Now you're in the right place to work on Web files.
I suggest you create a directory named "current" and keep what you're working on in
there.
When you log in , the first thing you should do is make a backup copy of your work, so if
you completely screw up you have something to go back to.
Check to see what you've got in your directory. Type:
ls (then press the "enter" key on the keyboard. That's an L, not the number 1, by
the way: LS, but lower-case.)
If this is the first time I've been here after setting the site up, I should see a directory
called "archive". I want to make a copy of that directory, named "current", and do all my
work in the copy.
To make a copy of "archive" and the files in it, and name the copy "current":
cp -r archive current (then press the "enter" key on the keyboard)
I'll always do my work in the directory called "current", and before I start doing a lot of
work, I'll make a backup of "current", named for today's date.
Use this format: YYYY-MM-DD, in other words the 4-digit year, two-digit month, twodigit date. If today is January 4, 2010, then I would use 2010 -01-04.
To make a copy of "current" and the files in it, and name the copy "2010-01-04":
folder I just made:
cd current (then press the "enter" key on the keyboard)
Let's see what I have to work with :
ls (then press the "enter" key on your keyboard)
If I see a file named "test.html" that I want to edit, I type:
pico test.html (then press the "enter" key on the keyboard)
If I want to make a new file, named test2.html, that's a copy of test.html and work on
that file, I type:
cp test.html test2.html (then press the "enter" key on the keyboard)
pico test2.html (then press the "enter" key on the keyboard)
Later in the class, we will set up a master template file, from which you can base all
other files, so these two commands will be ones you use a lot.
If you just logged in and want to make a copy of the directory "current" and the
files in it, and name the copy "2010-01-06":
cp -r current 2010-01-06 (then press the "enter" key on your
keyboard)
If you do this sort of thing when you log in, and always do your work in the
directory called "current", then you'll have a safe backup copy if you need to roll
back to a previous version.
If you think backups are for wimps and just want to log in and work on the files
in the directory named "current", you would do this immediately after logging in:
cd html/current (then press the "enter" key on your keyboard)
Now you're in the right place to work on your files. Just remember there's no
"undo", so if you skip making a backup copy and you completely trash
something, it will not be a good thing.
$ cd html
$
$ ls
2010-01-05 2010-01-07 current
$
$ cp -r current 2010-01-11
$
$ cd current
$
$ pico test1.html
Common commands
Here are some commands you'll be using a lot. Press "enter" after each one to make it
happen:
ls (shows the files you have available)
cd (change to another directory)
cd .. (go up to the parent directory)
cd ~/html (go up to your main html directory)
cp old.html new.html (takes the file named old.html and makes a copy of it
named new.html)
cp -r oldstuff newstuff (copies the oldstuff directory and all files within it to a
new directory called newstuff)
pico file.html (opens file.html in an editor so you can change it )
exit (logs you off the server)
Whenever you add a new file to your Website:
mkhomepg -p (then press the "enter" key on your keyboard)
This is what makes the new files visible .
Setting appropriate directory permissions for /www/af/a/alboss
Setting owner and group.
Setting file permissions.
Done!
$
If you are editing an existing file, the changes should be visible as soon as you save
them.
Ongoing use of a template file in a shell account:
To create a new file named newfile.html:
1. pico newfile.html (enter) (replace "newfile.html" with whatever name you want
to use)
2. control-r, press the zero, press "enter" (this inserts the template content)
3. After exiting Pico, mkhomepg -p (then press the "enter" key on your keyboard) to
make the new file visible on the Internet
Working within the Pico editor:
Within Pico, hold down the "control" key (represented here by ^) and press a letter to
make something happen.
Use the arrow keys on your keyboard to move around.
^G - Help text.
Ô - Save.
^V - page down
^Y - page up
Â - move to the beginning of the current line.
Ê - move to the End of the current line.
^W - find
^D - Delete the character at the cursor position .
^^ (Hold down control and shift, and press 6) - Start selecting text from where the
cursor is now. Use the arrow keys to make the selection. If you change your mind, hold
down control and shift, and press 6 again to stop selecting .
^K - Cut selected text (see above). If no text is selected, it will cut the current line
you're on.
Û - Uncut (paste) last cut text inserting it at the current cursor position
^T - Spell check
^R, 0 (that's a zero), enter - Inserts the html template text into the current file
^X - Exit the editor (press enter if you want to save the current file).
Typing within Pico is pretty much the same as typing anywhere else on a computer.
Hold down the "Control" key and press the letter "O" to save your work. Press "enter " to
use the current file name , or type in a new one and then press "enter".
When you're finished, hold down the "control" key and press the letter "X" to exit Pico. It
will ask you if you want to save your work one more time. You can just type "y" or "n".
This is a good fallback if you accidentally really foul up a file you were working on. Exit
Pico, do not save your work, and when you reopen the file you'll have the last version
you saved. (Basic text editors do not have an "undo" option, which is part of why saving
backups of your files is important.)
Whenever you create a new file, exit Pico and type:
Do that whenever you add a new file to your Website, it 's what makes the file visible.
Getting things set up
Keeping safe from viruses on shared (campus)
computers
Never stick anything into anything you're not married to
If you do not know for certain that a computer's antivirus program is up-to-date and
functioning, then assume that it is not. You have no guarantee that the computer in
question is not infected.
Speaking for myself and not as a representative of the South Seattle Community
College, I do not recommend sticking a thumb drive into a computer on this campus.
Ever. Period.
If you are
taking
this class
online
and only
work
from
your
home
Checkpoint, file safety: In a nutshell, if you are working from a campus
computer for this class, register at http://ol.freeshell.org and use that site to
edit and save your files until you have a Web host account set up.
Once you have a Web host set up for your files, you can also use
UnlimitedFTP (aka MyFTP) (http://myftp.utechsoft.com/) to edit your html
and css files directly on the server (after making a backup copy there first!)
without having to download them to a local computer.
If you use picnik.com for image editing, and save from there directly to
flickr.com, you can code your image links to the flickr site and never have
to download an image file onto a campus computer. (You'll need accounts
with both.)
That's the oversimplified summary version. There's a lot more than that to
it, so read on.
computer, then virus protection consists mostly of having an antivirus program installed,
automatically updating the virus definitions at least daily, automatically scanning
everything you download or plug in , and always being careful about what you open.
Most viruses are Windows viruses, which makes sense given that operating system's
domination of the desktop market. Using Mac OS or Linux does not make you immune,
though, so there's still no excuse for not practicing safe computing. I have a list of
antivirus programs for the major operating systems on the foundation information page
for this class.
If you are using computers on the campus, however , or for that matter using multiple
computers anywhere, then everything becomes a lot more complicated.
Again, speaking for myself and not as a representative of the college, I do not
recommend using a thumb drive with any Microsoft Windows computer on this campus.
Same thing for a rewritable CD, camera, media card, or any other writable media all the
way down to a floppy disc , if you could find one. I do not believe we have the hardware ,
software, or staff to provide a Windows network that is both workable and secure
enough to trust with your precious work and with the potential for wrecking your home
computer.
We do still have classrooms on campus whose computers are not set up with Internet
access. Most of the options listed here rely on Web-based file storage and editing as a
means to keep files from ever touching a local computer, which means they're not an
option if you don't have Net access.
These are the ways that I move files between Internet-accessible computers on campus
and at home. There are more options here than most people might need, so pick and
choose what's best for you.
Use the portal at http://students.southseattle.edu/ for email and to create word
processor documents, spreadsheets, etc. (Exception: if you are taking the Microsoft
Office class or anything else that absolutely requires Office documents, then you
need to discuss this matter with your teacher.)
Avoid putting your code onto a campus computer at all, by registering with the free
server shell account at http://ol.freeshell.org and using it to edit and save your
files.
Set up a free online file storage account at a service like http://www.box.net/ or
http://www.getdropbox.com/. (I use both.) I can download any file from their
Websites onto the computer I'm using, work on the file, and then upload it back so
I can get to it from the next computer I'm at. Since most of the files I work on are
just raw text files (html and css files, specifically), the files themselves are unlikely
to harbor a virus. Both Box.net and Dropbox scan files upon upload, so even if I
had a virus in one of my image files, I'd find out about it as soon as I tried to store
it.
Set up FTP (file transfer protocol) access to a Web server so I can transfer files to/
from there. (That's a no-brainer since all the classes I teach already require you to
have FTP access to a Web server and we use http://ol.freeshell.org for editing files
directly on a Web server that can also be reached via FTP.) I sometimes use a free
site from http://www.freehostia.com/ but there are hundreds of choices available.
See "Finding a home for your Website on the World-Wide Web " in the FTP Hosting
reference materials for CTN 160 for more information.
Use a Unix or Linux Web server (such as Freeshell or Freehostia) as my FTP
host. Our campus computers use Windows, and since a virus that thrives on
one is unlikely to work on the other, it 's a small measure of added safety.
Use an online Web-based FTP program like UnlimitedFTP (http://
myftp.utechsoft.com/) or Net2FTP (http://www.net2ftp.com) as my tool for
moving files via FTP.
The Net2FTP service doesn't let me save my settings, but it is my first
choice for on-campus coding use because I can edit my html and css files
directly on the server, without having to deal with downloading them to a
campus computer. If you do this, save a backup copy on the server so
you can fall back in case you royally mess something up.
The UnlimitedFTP service lets me store my server settings on the site, so
I don't have to enter them every time I need to move a file. This is nice
but there's not an option for editing my files without downloading them to
the local computer, so I don't use it as much on campus.
See "Basic FTP software instructions" in the FTP Hosting reference
materials for CTN 160 for more information.
Use an online image editing and storage service, such as Picnik, http://
www.picnik.com or Aviary, http://aviary.com/. These allow me to edit my images
without putting them onto the local computer. Picnik will allow you to save an
edited image directly to Flickr.com, and Flickr will supply you with the needed html
to add that image to your Web page in the img src code.
Work via multiple operating systems. Since campus uses Windows, consider using
Mac or Linux at home if you can. I use Ubuntu Linux, which is free and actually
easier to install and run than Windows was, at least for me.
If I'm using Windows, don't use the default browser or email client. Viruses are
written to hit the defaults first, since most people don't change them.
Use Safari, Firefox, Opera , or Google Chrome as your Web browser on your home
Windows computer. All are free downloads.
Use Mozilla Thuderbird or another email program, or Web mail, instead of Microsoft
Outlook or Microsoft Outlook Express.
When working away from home, carry a runtime version of an operating system
such as Linux on a CD or thumb drive, and boot from that (making ceretain the
computer is turned completely off before you insert the thumb drive) so you're not
even using whatever operating system is on the computer. That will keep you safe
from anything harbored on the computer. This is the only circumstance under
which I would trust using a thumb drive on a possibly unprotected computer.
Unfortunately, most computers on the SSCC campus currently do not boot from
anything but the hard drive, which makes this option of limited use here.
An interesting option that's not quite ready for my needs is the virtual computer
offering from http://g.ho.st. It runs an entire desktop within your browser, giving a
similar effect to Remote Desktop. If it had a text editor and an FTP client I'd
probably reccomend it for my class, but those tools are still in development at this
time.
I haven't researched the entire Internet, and new options get invented all the time, so if
you have a better suggestion, please share it with me: [email protected].
Class Website setup
Meet our courseware. The software is called "Moodle", and the hosting service is named
e-Socrates. They're an Italian company, which is why their English looks a little like we
should send it to the SSCC Writing Center.
Follow these directions to set up an account on the e-Socrates.org site . (They will NOT
spam you.)
1. Go to http://www.e-socrates.org/login/signup.php
2. Follow the directions on the right side of the page to create an account for yourself.
Keep the login and password someplace safe, where you can find it when you
forget what it was.
3. Wait for the system to send you a confirmation email . This usually does not happen
immediately, so do not be alarmed if you don't hear back within seconds. If it takes
longer than a couple hours, check your spam filters, and if it's not in there, please
email me ([email protected]) and I'll see if I can help troubleshoot.
4. Once you've recevied the confirmation email , click the link in that email message.
That should log you into the site.
5. Go to the course home page at http://tiny.cc/ctn160 if you're not already there.
6. On the left side of the page, click "Enroll me in this course".
For the "Enrollment key", use this:
ctn160winter2010
Set up your user profile:
1. Click "Profile" on the far left, then pick the "Edit profile" tab. Fill out your profile
(making certain to include an email address). If it makes you confirm the email
address, watch your email and follow the instructions (probably just clicking on a
link embedded in the email).
2. Also, in the profile make certain to click the "Show advanced" button. This is
where you'll type in your Website address once you have a site location ready.
So, remember where it is.
3. Be sure to check your email. Forum postings should come via email, but blog
postings won't.
My main complaint about Moodle is that the blogs don't take comments. (That means
they're not blogs in my opinion, but who asked me?)
If you're confounded by the site setup, I have several annotated screen shots of the
course Website to point out the sections you'll be using the most for now.
You'll also need to set up a freeshell.org account for this class.
Freehostia free Web space setup
Note: these instructions are specific to setting up a free account with Freehostia. If you set up
a paid account, purchase a domain name of your own, use another service, etc., then the
procedure you'll need to follow will be slightly different from what's listed here. Check in with
your provider's tech support for the specifics.
The direct URL to the setup page for a free Web
space is http://www.freehostia.com/signup.html?
plan=92. If for any reason that doesn't work, go
from their home page at http://
www.freehostia.com/, scroll down and pick the free
plan. You'll probably have to pick the free plan again
on the next page. (They'd rather you pay them for a
bigger plan, of course, so they try to entice you
here.)
Related links
Translating Freehostia's
emailed message into English
An illustrated guide to FTP'ing
files to a site on Freehostia
When you're done, they will send you an email whose goal appears to be to confuse you
completely. Read translating Freehostia's emailed message into English to see the only two
parts of that email that you really need to pay attention to.
Server account registration (Windows users)
Mac, Linux, and Unix users, your registration instructions are over here.
Part one: a lot of screens to read and type on.
Go to telnet://ol.freeshell.org (Note: this is not the same address we use after this
registration.)
Type the word "new" and press the "enter" key
Press the "enter" key
Follow the instructions onscreen.
sdf.lonestar.org (ttyp0)
login: new
Welcome to the SDF Public Access UNIX System - Est. 1987
You are the 31st guest today, logged in on 11-Jan-10 03:43:58.
***NOTICE*** ESKIMO NORTH customers and GREX members are welcome here!
We hope you will make SDF your new $HOME
Are you using Windows 2K or XP? (Y/N) Y
Please press your BACKSPACE key:
PLEASE READ THIS CAREFULLY:
You are about to create a UNIX shell account. This account may be unlike
anything you've used before. We urge you to carefully read all the text
displayed on your terminal, as it will aide you in your learning.
We also encourage you to try all the commands available with your new
account. There are many types of games, applications and utilities
you will be able to instantly run in just a few moments. If you are
looking for a particular command or version of a command that we do not
have, there are ways to request that it be installed. We also offer
DIALUP access in the USA and Canada which you will be able to learn about
shortly. Be patient, read what is displayed - Explore and Enjoy!
[RETURN]
Press the "enter" key on your keyboard.
Windows users will see this screen. Everyone else, skip down this page till you find the
screen that matches what you see.
Type carefully! There's no backspace optiontill your account is created. If you
make a mistake, hit the backspace key several times (you should see gibberish on the
screen when you do that, if the backspace key isn 't working) and press enter. That
should cause an error message and a prompt asking you to try again.
First, you need to choose a LOGIN. A LOGIN allows you to LOG IN
to the system. Your LOGIN can be 1 to 8 characters in length and
can be composed of alpha numeric characters.
What would you like to use for your login?
% MKACCT aborted - Using Windows 2K or XP? Type 'w2k'
Type 'mkacct' to create your own UNIX shell account.
In Europe? TELNET to sdf-eu.org
Type 'help' for additional commands.
FEP Command:
Type 'mkacct' to create your own UNIX shell account.
In Europe? TELNET to sdf-eu.org
Type 'help' for additional commands.
FEP Command: w2k
Windows users:
---------------------------------------------
| IMPORTANT! PLEASE READ THIS VERY CAREFULLY |
--------------------------------------------There is a bug in the Windows(tm) 2000 / XP TELNET client which
causes it to send a <CR><LF> (double return) by default. If
you are using Windows(tm) TELNET you MUST correct this RIGHT NOW
in order to CONTINUE. Please take the following 4 steps:
1. ESCAPE to the TELNET> prompt by pressing [CTRL] with your ] key
2. At your TELNET> prompt type: 'unset crlf'
(Do not type 'quit' after this step)
3. Then press your [ENTER] key TWICE to return to SDF
4. Type 'mkacct' to create your new SDF account
An alternative TELNET client: http://sdf1.org/telnet
Also, try googling 'putty.exe' for a nice free telnet/SSH client
FEP Command:
Welcome to Microsoft Telnet Client
Escape Character is 'CTRL+]'
Windows users:
Windows users: hold down the "control" key on your keyboard and press the "] " (it's
usually just above the "Enter" key). Now type as below.
Microsoft Telnet> unset crlf
Line feed mode - Causes return key to send CR
Microsoft Telnet>
Windows users: Press the "enter" key until you're back at this screen:
FEP Command: w2k
--------------------------------------------| IMPORTANT! PLEASE READ THIS VERY CAREFULLY |
--------------------------------------------There is a bug in the Windows(tm) 2000 / XP TELNET client which
causes it to send a <CR><LF> (double return) by default. If
you are using Windows(tm) TELNET you MUST correct this RIGHT NOW
in order to CONTINUE. Please take the following 4 steps:
1. ESCAPE to the TELNET> prompt by pressing [CTRL] with your ] key
2. At your TELNET> prompt type: 'unset crlf'
(Do not type 'quit' after this step)
3. Then press your [ENTER] key TWICE to return to SDF
4. Type 'mkacct' to create your new SDF account
An alternative TELNET client: http://sdf1.org/telnet
Also, try googling 'putty.exe' for a nice free telnet/SSH client
FEP Command: FEP Command: mkacct
Mac and Unix/Linux users will have skipped the previous screens and will see this
screen instead:
(screen shot)
mkacct
[RETURN]
What would you like to use for your login?
Pick a login with 8 characters or less . In my example, I'm using "demowin". If your
chosen login is already taken, then try another till you get one that works.
What would you like to use for your login? demowin
Congratulations, you've picked a CLEAN user id. What does this mean?
We perform daily audits on our mailserver which allows us to check on
attempts
of email delivery for non-existent logins, like 'demowin'. If 'demowin'
was
targetted for email, it would likely have been UCE or spam. However, there
have been NO attempts to email '[email protected]' in the past 240
days,
which means it is a SPAM FREE login. Please protect it and enjoy!
continue? (yes/no) yes
Time now to agree to some stuff.
**limitations and policy**
_______________________________________________________________________
____
The SDF Public Access UNIX System, a 501(c)7 non-profit corporation,
reserves the right to deny access to anyone regardless if the user
has made a donation or paid membership dues. If a user's activities
are interferring with another user or users (on this system or on
another) the user in question will have their account access limited
or possibly removed. Spamming of any sort is not permitted and would
result in account removal. Illegal activities that actively involve
SDF (id est, using SDF to run crack or for guessing passwords and/or
trading copyrighted work) will most likely result in account removal.
The SDF Public Access UNIX System makes no guarantees in the reliability
or preservation of account accessibility, email sent or received,
files uploaded or created by online editing or compilation. That
being said, data loss should only occur during a catastrophic hardware
failure in which critical files would be restored from tape archives.
Members of the SDF Public Access UNIX System are expected to conduct
themselves in an appropriate and reasonable manner when using our
facilities.
Lifetime ARPA membership is based on the lifetime of SDF, not of the
user and is non-transferable. SDF has existed since 1987 and with
your support it just might out live you. ;-)
Any illegal activities which includes, but certainly isn't limited to
spamming, portflooding, portscanning, irc bots or unattended processes
intended as a bot, encryption cracking, unauthorised connections to
remote hosts and any sort of scam can really not be tolerated here.
Why? Because there are many here on this system that can suffer from
this sort of abuse. If you want to use SDF, you really have to care
about this system and the people here. If you don't want to care, then
you really shouldn't use this resource.
I agree with your policy and accept it (yes/no): yes
A few more words on the subject...
By agreeing and accepting our policy we trust you to
follow it. Thank you and be responsible!
[RETURN]
Press the "enter" key.
Now we answer some questions:
EIGHT VERY SIMPLE QUESTIONS:
Please provide the following information. Your honesty is requested
as it is critical in maintaining the integrity of our system. New
accounts with bogus information may be purged *without* warning.
CTRL-U will clear input ..
Your Full Name: Al Boss
Year of Birth: 1960
Postal Zip Code: 98126
Are you a K-12, University faculty member or student? (y/n) y YES
% SDF offers a very special and completely free full shell membership to
educators who use SDF as part of their classroom curriculum. This
free membership provides the students with access to the C/C++ compiler,
python, perl, network utilities and much more. To see if you qualify for
this program, check out the <TEACH> section of the 'faq'.
Are you a Amateur Radio Operator? (y/n) n NO
Do you use Analogue, ISDN Dialup or DSL? (y/n) n NO
Do you play MUDs, MOOs or MORPG? (y/n) n NO
Would you like to use features for the aurally or visually impaired?(y/n)
n NO
Where did you hear about SDF? Al Boss, South Seattle Community College
Yet another screen:
Login : demowin
Name : Demo Account
YoB : 1960
Origin : 98126
E-mail : [email protected]
IRC : irc.freeshell.org
WWW URL : http://demowin.freeshell.org (after validation)
WWW Gopher : gopher://freeshell.org/users/demowin (after validation)
Webmail : https://webmail.freeshell.org
Twitter : http://twitter.com/sdf_pubnix
Create this account? (y/n) y
Next screen:
You now need to set your password. You can enter whatever you'd
like, but we recommend using something that is difficult to guess.
NOTE! NO ONE, NOT EVEN AN ADMINISTRATOR, SHOULD EVER NEED TO ASK YOU
FOR YOUR PASSWORD. If someone does, just ignore them!
If you try to set an empty or blank password, you will not
be able to login securely via SSH.
New password:
Re-type new password:
The computer will ask you to type a password. You will not see anything when you
type your password, so be careful!
There will be a few seconds delay while the computer sets things up.
Adding password for user demowin
Creating login, please wait [Negotiating] Established!
Sending update, please wait [Negotiating] Established!
Creating your directories /udd/d/demowin, /www/d/demowin
Login : demowin
Name : Al Boss
YoB : 1960
Origin : 98126
Welcome to the SDF, demowin!
HINT - it is imperative that you actually READ the text printed on
your screen. By doing so you will understand what the SDF
has to offer you. If you do not read or explore you will
most likely have no clue .. be an explorer and enjoy SDF!
Also, would you like to be listed in the SDF User Map Project?
You can do so anonymously, if you wish, at: http://sdf1.org/map
(continue)
Press enter.
Picking a host to login to .. using ukato.freeshell.org
Attempting a secure connection to ukato.freeshell.org ..
(If this doesn't work, connect back using 'tty.freeshell.org')
demowin@ukato's password:
PLEASE PRESS YOUR BACKSPACE KEY
So, what are you waiting for? Press the backspace key.
The Moon is Waning Crescent (10% of Full)
.-.-.-'
.-'@
/@@@
./
/@@
/@@@@
|@@@@
/@@@@@ Last Quarter +
| @@@
4 14:12:00
|@ @@
New Moon |
3 6:19:12
\ . @
|
\
\ o
`\
\
`-.
`-.
`-`-[CONTINUE]
Press "enter". We're almost done with setup!
Type
Type
Type
Type
'help' for Commands.
'com' to chat with other users.
'ttytter' to listen to Twitter Tweets anonymously.
'mud' to play the SDFmud.
Did you know you can become a permanent LIFETIME member of SDF
by making a onetime donation of $36? Type 'arpa' for more info!
ukato:/udd/d/demowin> exit
You may close this window for now.
Make certain to save your login and password someplace where you can find it.
Checkpoint, server account registration: Email your login (not your
password) to [email protected] so I can complete your setup as a
student in this class.
Part two: After you hear back from me that your account
has been validated
Once I've let you know your account is validated, go to:
Go to http://sdf.org/ssh/ (Note: this is not the same address we use for setup.)
If it asks you anything you're not sure about, press "enter" or, if the option is "yes", pick
that.
The first time you log onto the site after you're set up, type the following after you log
in:
mkhomepg (then press the "enter" key on your keyboard)
That step will set up a Website directory for you. More on this later in the course.
login: demowin
Password:
you have 1 pending notification
type 'notes -r' to retrieve it
to create your URL http://demowin.freeshell.org, type 'mkhomepg'
Explore and Enjoy!
$
$ mkhomepg
Creating symbolic link.
Setting appropriate directory permissions for /www/af/d/demowin
Done!
Use 'mkhomepg -p' if you ever need to 'reset' your
file permissions in the future.
Once you've uploaded your webpages, run 'mkhomepg -a' to create your
custom URL. Your page will then be accessible to the world.
$
$ exit
In this class, we will simply be using this service as a place to store and edit Web files.
By storing and editing directly on the server, we avoid having to use the hard drives of
the computers on campus, which have been problematic in the past, particularly with
regard to computer viruses getting transmitted by way of thumb drives. Those of you
who are technically inclined and curious can read the FAQ on the site to see what you
just signed up for.
I will warn you now, this may seem a little intimidating at first, or a little arcane. It's not
as pretty as point-and-clicking around in Windows. Luckily, there are only about a dozen
different things you'll have to do within the shell account, so even if it is intimidating it
should not be overwhelming for very long.
For initial Website setup, see the instructions for server account setup.
See the instructions for ongoing daily use of the shell account for a rundown of what you
need to do every time you're working on the site.
Server account registration (Mac, Linux, Unix
users)
Windows users, your registration instructions are over here.
Part one: a lot of screens to read and type on.
Go to telnet://ol.freeshell.org (Note: this is not the same address we use after this
registration.)
In the Applications folder, open the Utilities folder. Open the application called
"Terminal".
Type this:
telnet ol.freeshell.org
and press the "return" key.
Press the "enter" key
Follow the instructions onscreen.
MacBook:~ alboss$ telnet ol.freeshell.org
Trying 192.94.73.20...
Connected to ol.freeshell.org.
Escape character is '^]'.
sdf.lonestar.org (ttyp2)
login: new
Last login: Tue Jan 12 01:41:53 2010 from freeshell.org on ttyp2
Welcome to the SDF Public Access UNIX System - Est. 1987
You are the 21st guest today, logged in on 12-Jan-10 01:46:38.
***NOTICE*** ESKIMO NORTH customers and GREX members are welcome here!
We hope you will make SDF your new $HOME
Are you using Windows 2K or XP? (Y/N) n NO
[RETURN]
What would you like to use for your login? demomac
Congratulations, you've picked a CLEAN user id. What does this mean?
We perform daily audits on our mailserver which allows us to check on
attempts
of email delivery for non-existent logins, like 'demomac'. If 'demomac'
was
targetted for email, it would likely have been UCE or spam. However, there
have been NO attempts to email '[email protected]' in the past 240
days,
which means it is a SPAM FREE login. Please protect it and enjoy!
continue? (yes/no) yes
**limitations and policy**
_______________________________________________________________________
____
The SDF Public Access UNIX System, a 501(c)7 non-profit corporation,
reserves the right to deny access to anyone regardless if the user
has made a donation or paid membership dues. If a user's activities
are interferring with another user or users (on this system or on
another) the user in question will have their account access limited
or possibly removed. Spamming of any sort is not permitted and would
result in account removal. Illegal activities that actively involve
SDF (id est, using SDF to run crack or for guessing passwords and/or
trading copyrighted work) will most likely result in account removal.
The SDF Public Access UNIX System makes no guarantees in the reliability
or preservation of account accessibility, email sent or received,
files uploaded or created by online editing or compilation. That
being said, data loss should only occur during a catastrophic hardware
failure in which critical files would be restored from tape archives.
Members of the SDF Public Access UNIX System are expected to conduct
themselves in an appropriate and reasonable manner when using our
facilities.
Lifetime ARPA membership is based on the lifetime of SDF, not of the
user and is non-transferable. SDF has existed since 1987 and with
your support it just might out live you. ;-)
Any illegal activities which includes, but certainly isn't limited to
spamming, portflooding, portscanning, irc bots or unattended processes
intended as a bot, encryption cracking, unauthorised connections to
remote hosts and any sort of scam can really not be tolerated here.
Why? Because there are many here on this system that can suffer from
this sort of abuse. If you want to use SDF, you really have to care
about this system and the people here. If you don't want to care, then
you really shouldn't use this resource.
I agree with your policy and accept it (yes/no): yes
By agreeing and accepting our policy we trust you to
follow it. Thank you and be responsible!
[RETURN]
EIGHT VERY SIMPLE QUESTIONS:
Please provide the following information. Your honesty is requested
as it is critical in maintaining the integrity of our system. New
accounts with bogus information may be purged *without* warning.
CTRL-U will clear input ..
Your Full Name: Al Boss
Year of Birth: 1960
Postal Zip Code: 98126
Are you a K-12, University faculty member or student? (y/n) y YES
% SDF offers a very special and completely free full shell membership to
educators who use SDF as part of their classroom curriculum. This
free membership provides the students with access to the C/C++ compiler,
python, perl, network utilities and much more. To see if you qualify for
this program, check out the <TEACH> section of the 'faq'.
Are you a Amateur Radio Operator? (y/n) n NO
Do you use Analogue, ISDN Dialup or DSL? (y/n) n NO
Do you play MUDs, MOOs or MORPG? (y/n) n NO
Would you like to use features for the aurally or visually impaired? (y/
n) n NO
Where did you hear about SDF? Al Boss, South Seattle Community College
Login : demomac
Name : Al Boss
YoB : 1960
Origin : 98126
IRC : irc.freeshell.org
WWW URL : http://demomac.freeshell.org (after validation)
WWW Gopher : gopher://freeshell.org/users/demomac (after validation)
Webmail : https://webmail.freeshell.org
Twitter : http://twitter.com/sdf_pubnix
Create this account? (y/n) y YES
You now need to set your password. You can enter whatever you'd
like, but we recommend using something that is difficult to guess.
NOTE! NO ONE, NOT EVEN AN ADMINISTRATOR, SHOULD EVER NEED TO ASK YOU
FOR YOUR PASSWORD. If someone does, just ignore them!
If you try to set an empty or blank password, you will not
be able to login securely via SSH.
New password:
Re-type new password:
Adding password for user demomac
Creating login, please wait [Negotiating] Established!
Sending update, please wait [Negotiating] Established!
Creating your directories /udd/d/demomac, /www/d/demomac
Welcome to the SDF, demomac!
HINT - it is imperative that you actually READ the text printed on
your screen. By doing so you will understand what the SDF
has to offer you. If you do not read or explore you will
most likely have no clue .. be an explorer and enjoy SDF!
Also, would you like to be listed in the SDF User Map Project?
You can do so anonymously, if you wish, at: http://sdf1.org/map
(continue)
Picking a host to login to .. using otaku.freeshell.org
Attempting a secure connection to otaku.freeshell.org ..
(If this doesn't work, connect back using 'tty.freeshell.org')
demomac@otaku's password:
[ 'demomac' is not set to expire ]
The Moon is Waning Crescent (9% of Full)
.-.-.-'
.-'@
/@@@
./
/@@
/@@@@
|@@@@
/@@@@@ Last Quarter +
| @@@
4 15:18:31
|@ @@
New Moon |
3 5:12:41
\ . @
|
\
\ o
`\
\
`-.
`-.
`-`--
[CONTINUE]
Type
Type
Type
Type
'help' for Commands.
'com' to chat with other users.
'ttytter' to listen to Twitter Tweets anonymously.
'mud' to play the SDFmud.
Did you know you can become a permanent LIFETIME member of SDF
by making a onetime donation of $36? Type 'arpa' for more info!
otaku:/udd/d/demomac> exit
You may close this window for now.
Make certain to save your login and password someplace where you can find it.
Checkpoint: Email your login (not your password) to [email protected] so I
can complete your setup as a student in this class.
Part two: After you hear back from me that your account
has been validated
Once I've let you know your account is validated, go to the terminal again and this time
type:
ssh tty.freeshell.org
(Note: this is not the same address we use for setup.)
The first time you log onto the site after you're set up, type the following after you log
in:
That step will set up a Website directory for you. More on this later in the course.
login: demowin
Password:
you have 1 pending notification
type 'notes -r' to retrieve it
to create your URL http://demowin.freeshell.org, type 'mkhomepg'
Explore and Enjoy!
$
$ mkhomepg
Creating symbolic link.
Setting appropriate directory permissions for /www/af/d/demowin
Done!
Use 'mkhomepg -p' if you ever need to 'reset' your
file permissions in the future.
Once you've uploaded your webpages, run 'mkhomepg -a' to create your
custom URL. Your page will then be accessible to the world.
$
$ exit
In this class, we will simply be using this service as a place to store and edit Web files.
By storing and editing directly on the server, we avoid having to use the hard drives of
the computers on campus, which have been problematic in the past, particularly with
regard to computer viruses getting transmitted by way of thumb drives. Those of you
who are technically inclined and curious can read the FAQ on the site to see what you
just signed up for.
I will warn you now, this may seem a little intimidating at first, or a little arcane. It's not
as pretty as point-and-clicking around in Windows. Luckily, there are only about a dozen
different things you'll have to do within the shell account, so even if it is intimidating it
should not be overwhelming for very long.
For initial Website setup, see the instructions for server account setup.
See the instructions for ongoing daily use of the shell account for a rundown of what you
need to do every time you're working on the site.
Server account initial setup
Logon
We connect using SSH, which is a secure replacement for the telnet protocol. To log
onto your server account to edit files:
http://sdf.org/ssh/
When the computer asks you if you really want to do this , say "yes".
Other options if working from your own computer: check the detailed instructions
for other options available on a computer where you can install software (e.g. not the
campus computers).
If you use Microsoft Windows, it does not have a built -in SSH client, so you will need to
install one (see below) or to use the browser -based one noted above.
On Mac OS X, from the Finder, open the "Terminal" application. (It's in the "Applications"
folder, inside the "Utilities" folder.) Type "ssh tty.sdf.org" and press the "Enter" key.
In Linux, open a terminal window (command prompt window). Type "ssh tty.sdf.org"
and press the "Enter" key.
These are a number of Telnet/SSH clients you can install on your own computer, that
have more features than the built-in methods mentioned above. For Windows, Putty is a
free offering for telnet and its secure cousin, SSH; for Mac OS X free offerings include
iTerm and MacTelnet.
Unless your Web browser security settings are ridiulously high, you can also get to your
server account via a Web browser by going to http://sdf.org/ssh/ and agreeing to all the
questions about Java applets and fingerprints. Be advised that this version does not let
you copy and paste from your computer, which makes it less than ideal, at least for me.
Website directory setup (one-time)
The first time you log onto the site after I've got you set up, type the following after you
log in:
That step will set up a Website directory for your files. The directory name will be:
html
Website directory activation (one-time)
cd html (then press the "enter" key on your keyboard)
mkdir archive (then press the "enter" key on your keyboard)
cd archive (then press the "enter" key on your keyboard)
pico test.html (then press the "enter" key on your keyboard)
Type the following:
<html>
<head>
<title>A simple Web page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is a Web page.</p>
</body>
</html>
Notice the menu at the bottom of the screen. The ^ means to hold down the "control"
key and press the letter indicated . For example, the menu says:
Ô Write Out
That means hold down "control" and press the letter "O" on the keyboard. Do that now.
"Write out" is what us normal people call "save". The computer offers to save the file
under the existing name you gave it when you started, "test.html". That's okay for now,
so just press the "enter" key. (If you wanted to save your work under another file name,
you'd type in that file name instead, then press "enter".)
That's all for now, so hold down "control" and press "x" to close the file you just saved.
Now that you have put your first file into your html directory, type the following after
you log in:
mkhomepg -a (then press the "enter" key on your keyboard)
That will get the server to activate your Website so it'll be available on the Internet . It
can take a while for the Web server to activate for the first time, so if you get through
this and can't see the expected results, go do something else for an hour or two and
check back afterwards. If it's still not working, let me know: [email protected].
Next:
Do that whenever you add a new file to your Website, it 's what makes the file visible.
Now, let's see if that worked.
In a Web browser (Microsoft Internet Explorer, Firefox, Safari, etc.), go to your Website.
Its address will consist of your login name followed by a dot, then freeshell.org. For
example, my login name is alboss, so my Website address (also known as a URL) is
http://alboss.freeshell.org. (Notice there is not a "www" in that address. It won't work if
you try to put one in.)
When you go to that address right now, you should see the "archive" directory folder
that you just created. Click it, and you should see the "test.html" page you created. Click
that, and you should be looking at the code you just typed. Congratulations , you are a
Web coder.
If you're done, type "exit" (and press the "enter" key) to log off the server.
Read working in the shell account (ongoing) for information on the day-to-day use of a
shell account for this class.
Setting up an xHTML template file
There are certain tags that will appear in every page of xHTML you create. Rather than
re-typing these every time you create a file, it 's much easier to create a single template
from which you can base all your work.
Because the editor in the shell account allows you to "read in" content from another file,
it's easy to work with a template file without accidentally altering it.
Initial setup of a template file in a shell account:
1. Copy the following text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Text</p>
</body>
</html>
2. Open your shell account
a. http://sdf.org/ssh for Windows users; Mac/Linux users will get better results
from the terminal, ssh tty.freeshell.org (enter)
b. After logging in:
i. cd html/current (enter)
ii. pico 0 (enter) (that's a zero, not the letter O)
iii. paste
iv. control-x to quit Pico, press "enter" to save under the current name
That's it!
Ongoing use of a template file in a shell account:
To create a new file from the template file you have created:
Open your shell account
a. http://sdf.org/ssh
b. After logging in:
i. cd html/current (enter)
ii. To create a new file named newfile.html:
1. pico newfile.html (enter) (replace "newfile.html" with whatever name
you want to use)
2. control-r, press the zero, press "enter" (this inserts the template content)
As this course progresses and you find new things you'd like to include (or exclude) in
any new pages you create, simply make the changes in the template file and they'll
show up in all new files you create from it from that moment forward.
The template file is named zero (the numeral 0) and is stored with everything else in
your "current" folder. You can actually name the file anything you want; I just picked 0
because it's less typing.
See also Working in the shell account (ongoing).
Freehostia free Web space setup
Note: these instructions are specific to setting up a free account with Freehostia. If you set up
a paid account, purchase a domain name of your own, use another service, etc., then the
procedure you'll need to follow will be slightly different from what's listed here. Check in with
your provider's tech support for the specifics.
The direct URL to the setup page for a free Web
space is http://www.freehostia.com/signup.html?
plan=92. If for any reason that doesn't work, go
from their home page at http://
www.freehostia.com/, scroll down and pick the free
plan. You'll probably have to pick the free plan again
on the next page. (They'd rather you pay them for a
bigger plan, of course, so they try to entice you
here.)
Related links
Translating Freehostia's
emailed message into English
An illustrated guide to FTP'ing
files to a site on Freehostia
When you're done, they will send you an email whose goal appears to be to confuse you
completely. Read translating Freehostia's emailed message into English to see the only two
parts of that email that you really need to pay attention to.
Translating Freehostia's emailed message into
English
What they say
-------- Original Message -------Subject: Welcome to Free Hostia
Date: Thu, 08 Jan 2009 04:45:02 +0000
From: Free Hostia <[email protected]>
To: [email protected]
What it means
We spelled your
name right.
Dear Al Boss,
Welcome to FreeHostia. We are one of the fastest growing free
hosting providers and there is an understandable reason for this.
We have one of the fastest servers, a fully featured free hosting
plan with no forced ads and low-cost paid hosting plans with
great features. For less than a year, we won more than 200 000
users over. You will have the chance to see for yourself that we
provide a bullet-proof quality service. We will be very happy if
you spread the word by putting a link or a small banner on your
site, which points back to FreeHostia (you will find them here:
http://freehostia.com/linkus.html), or simply tell your friends
and your web site visitors about us and share your opinion
about FreeHostia. This way you will help us achieve our ultimate
goal - to provide reliable and fast hosting with amazing 24/7
support to as many people as possible.
-------------------------------------------------
Commercial
message...
This email contains important data about your web hosting
account for aboss.freehostia.com.
------------------------------------------------Access the Control Panel here: http://cp.freehostia.com/
members/
Blah blah blah blah
blah not used for
anything we're
doing in this class
blah blah blah blah
blah blah.
Client ID: yyyyyy
Login: albos
Password: xxxxxx
------------------------------------------------Your website will be accessible here: http://
aboss.freehostia.com
Something
useful! The
Internet address
for your site.
IMPORTANT!!!
Not really
important.
Please change the DNS of your domain to the following and
allow 24-48 hours for the DNS update:
We don't know
how to talk to
regular people so
dns1.freehostia.com
dns2.freehostia.com
------------------------------------------------EMAIL information:
To create emails please login to the Control Panel and click 'Email Manager'.
POP3 server: aboss.freehostia.com
SMTP server: If use the FREE hosting plan, than you can't use
our SMTP server. If you use any of the paid plans - the SMTP
server is aboss.freehostia.com
IMPORTANT - the SMTP server requires login and password. In
Outlook select 'My server requires authentication '. In other email
clients this option has a different name.
we're including a
bunch of technical
information here
that pretty much
only pertains to
you if you are
running your own
Web server in your
living room, or if
you're setting up
your own email
accounts through
them.
------------------------------------------------FTP information:
FTP Host: aboss.freehostia.com
Login: albos
Password: xxxxxx
This is the part
you need to be
able to FTP
(transfer) your
files onto the
server.
------------------------------------------------To use the Front Page extensions select 'Front Page extensions'
from the Control Panel and manage the extensions.
-------------------------------------------------
Friends don't let
friends use Front
Page.
Please take the time to read the beginner's guide in our support
forum if you are using our services for the first time: http://
forum.freehostia.com/viewtopic.php?t=240
If you have any
problems, here's
how to get help.
If you have any questions please login to the Control Panel and
open a ticket from the Help Center. Our 24/7 support will
answer you shortly.
Best Regards
Free Hostia Team
Expectations
Individual blogs
Status reports are one of the few things in the corporate world that wastes as much
time as meetings and has as little use as mission statements. Without them, or their
academic equivalent, the weekly quiz, though, I need some way to tell you've at least
been thinking about this class and about the work you're doing for it, as well as just
some signs of life out of you and maybe some indication that you've learned something
new.
So, for this class, each of you will maintain entries in a Weblog, with at least weekly
updates, that will be a sort of running summary of what you've picked up (or are
struggling with) as you try to survive CTN 160, what your latest accomplishments for the
class have been, what you'd like to do next week, what does or doesn't make sense,
and anything else that would answer the questions , "How's it going for you? What's your
current status regarding the work for the class?"
Likewise, if you're sick, distracted, behind, or anything like that, the blog is a place to
report it. "I've been barfing like crazy and haven't been able to work on anything all
week," is a legitimate status report; it tells me what's going on with you and helps me
understand what I should be expecting to find on your site right now. Silence tells me
nothing.
Update: Monday, February 15, 2010, 01:14 PM
The blog module on the course Website has become unstable, due to a software
problem. Just make a simple HTML report page on freeshell.org, linked from your
index.html page, and post your weekly reports there .
Mine is at http://alboss.freeshell.org/current/blog.html if you want to see an example.
Related information: Course syllabus
Part one expectations
Part corresponds roughly to a week. Sometimes the individual pace is a bit slower or faster, which is
why they're not labled week in the first place . Still, that's the baseline measurement, figure each
part should take about a week.
There's a lot of setup to take care of the first week of the quarter. Don't panic if it's not all
completed by the end of the first week; there are always glitches. Still, this can be a fastpaced course, and you'll get better results if you don't fall far behind.
Begin at http://tiny.cc/ctn160, or, if that short url doesn't work, the actual location is
http://www.e-socrates.org/course/view.php?id=297. (We're using Moodle courseware
hosted at e-Socrates.org for the class.) Follow the instructions to log on. If your logon
doesn't work and you know you are registered for the course, there are helpdesk links
and phone numbers. If you're not able to log on (for example, if your official registration
is delayed for some reason), then use the course backup site at http://
www.sisypheans.org/ctn160/. It usually takes about a week to get things set up here on
with the courseware accounts, email accounts, registration, campus logins, etc. Let me
know if you have any problems accessing the course.
Read the course syllabus
Set up a Web server account (as noted in syllabus; specific steps are in the server
account setup instructions).
Fill out your profile on the course Website (left-hand navigation , there's a "Profile" link).
At the very least, include:
Your email address in the email field (required, but you can hide it via a control on
this page)
Why are you taking the CTN160 class?
What were you doing before you became a student at SSCC?
Have you spent a lot of time working with computers? Have you spent a lot of time
online?
Read Background: the Internet.
Read Keeping safe from viruses.
Read Reference, week one: foundation information.
If you don't have an account set up at http://students.southseattle.edu, consider going to
that site and following the instructions to set up your email and a portal page ; you'll likely
need use of those for several of your classes. There are several links to help if you need
assistance.
Note: The SSCC portal through students .southseattle.edu is not a requirement for my
class.
I include it in the list of requests for the first week for a few small reasons:
some other class might want you to have it but not tell you for a while, and I'd just
as soon it get set up for you quickly.
if you have an account on there, my southseattle.edu email will automatically fill you
in when I'm trying to email you, so I don't have to go hunting for your email
address. I can always email from within Moodle itself, but if you've tried that you'll
notice that Moodle's not as fully-featured an email tool as an actual email tool would
be. It does the job , but nothing special.
you can use the applications there to create and store documents without having to
move them between campus computers and your home computer or any other
computers you might be using .
some people like to keep their class email out of their regular email stream
it's a Gmail-based tool, which means it has some amazing search capabilities and
tagging tools within it. It's really hard to put an email in there somewhere that it
won't be easy to find later. If you get a lot of email, then that search ability might be
nice.
if it does throw some course mail into the spam filter, it's easier to find than it is in
some other mail providers, which will just block it and never tell you they did so.
All that said, I'll repeat--it's not a requirement for me. As long as I can reach you by
way of *some* email address, I'm fine.
Parts two-three expectations
Do not panic. This is a lot of information. It will take us some time to cover it all.
Read the background material on how search tools work.
Read the reference material on file transfer protocol (FTP).
Keep the instructions from your Internet site provider handy.
Read the reference material on basic xHTML, and work your way through the
checkpoints. The goal for week two is to make it through the material and
checkpoints up to the beginning of the CSS materials in the basic xHTML reference
section.
Bring any problems to the course question and answer forum
Read the section on how we will use blogs in this class. Under the blog tab in your
profile, start getting familiar with the blog, and start an entry for yourself. We'll be
using the blogs to maintain a class /project log.
Continue working through the basic xHTML reference section through week three,
finishing up the CSS information and the related CSS checkpoints. (This will likely
eat into part of the following week as well; it's a huge amount of information to
absorb.)
Read through the reference material on usability.
Participate in the Usability Discussion forum. Instructions for what to do are listed
under "Lab: Usability discussion".
Part four expectations
Finish up checkpoints for basic xHTML if you haven't already done so.
Read the reference materials on Website planning /design.
The checkpoint for this section--creating all your site planning materials for the class
project--is very involved, and counts for a significant portion of your grade. Read the
instructions carefully, and refer back to the reference materials as often as necessary.
I expect everyone to get a start on this within the week, although I realize that it
might be a while before it's completed. I will be checking your sites for it, though, so
please don't procrastinate.
Part five expectations
Continue working on all your site planning materials for the class project.
Read the reference materials on adding images to Web pages. You'll need this information
to complete the site planning materials, since there are images needed as part of that
assignment.
Read the reference materials on use of color on Web pages. This is also information you'll
likely need in your site planning.
Begin work on your Bad Website, and keep adding to it for the rest of the quarter,
whenever you come up with new material or new ideas.
Remember to add blog entries to keep me up to date with your progress.
If your Website URL isn't already on the directory page, add it to the "What's your URL?"
forum so I can update the directory to include your site address.
Project planning
Review the course goal / project. Think about it a bit.
Keep the Website planning and overarching design notes handy; you'll need them.
Create a new xHTML page, on which you will be describing your plans for your
project. Give it an appropriate title, heading, and whatever else you wish.
Put a hyperlink from your index.html page to this new course project page.
Apply the pre-design questions to your own course project Web site plans, and put this
information onto the Web page you're creating. The pre-design will need to convey a
clear idea of what your message is, who you are trying to reach and what the objectives
and goals of your site will be.
Most people do this part as a straight question-and-answer format. You're welcome to
do otherwise, but, in the spirit of good Web design, you have to make sure that it's clear
to me that you've answered all the questions.
Also, do not fret over being held to exactly what you put here today. It's a Web page,
for Pete's sake! You can change it --in fact, you're supposed to change it --in the light of
new information, new ideas, new realities, etc.
Answer the pre-design questions as they pertain to your planned class project
Website.
What is the idea for your final project?
Why are you building this site? (Site description or statement of purpose)
Who is your audience? Who are you? (Or, who do you want your audience to believe
you are?)
What are the objectives of this site? (What are you trying to accomplish?)
What kind of information will be on this site? (Outline of the information)
How will the site affect the user? (Will they feel secure? Outraged? Impressed?
Informed? A need to take action? An irresistible urge to spend money on your goods and
services?)
Create two diagrams, using the instructions discussed in the class notes, : a (site)
flow diagram for your Web site, and a (work) flow diagram for your plan for how you're
going to create the site. (The first flow diagram shows how people are going to move
through the Web site, how they will navigate from section to section and how the
sections will be linked together. The second one shows the steps you'll take to create the
site.)
Keep it as simple as is reasonable. We're not--as far as I know--planning the site for
either the Metropolitan Museum of Art or the New England Journal of Medicine.
Upload the diagrams to your FTP account . (Word, Powerpoint, image files, etc. are
fine, anything I can open is acceptable--unless it's a virus or something.)
If the diagrams are image files (.png, .gif, or .jpg format), and if you've read ahead, you
are welcome to use <img /> tags to put the images directly into your xHTML. Otherwise,
have descriptive and functioning hyperlinks from your project page to each image.
Test your links before you open the page up for review! I said descriptive and
functioning. Links that don't work will not endear you to your reviewers--in this case,
the rest of the class, and me.
Add a wireframe, as is described in the class notes, to the planning page.
Develop storyboards for each page or major section of your Web site. The story
board should adequately show the look and feel , as well as navigation and content
placement, for each page in your Web site.
Approach this project as though you are actually working for a client. Handwritten,
messy pre-design work would obviously not sit well with a client. Handwritten is okay,
messy isn't a good idea. This is good practice for the real world, even if you only intend
to design Web sites for yourself.
Turn in the storyboard(s) electronically, using a program such as Photoshop, Paint, or
Word, or draw the storyboard(s) using pen and paper and scan them in . Link the
documents or images to your main project plan page (the one you've been creating
here), as is described above.
Upload all documents, including the html page, and check to make sure
everything is there.
Exhale. You did it!
Start collecting your content and thinking about how you will be coding this project. This
Web site has to be finished and ready to present the last week of class.
Bad Web pages
Bad Web pages (ongoing assignment): use what you've learned in class so far to create
the most awful, unusable Web pages you can. Not something as simple as a page that's
blank, but something that has a lot of really bad HTML ideas.
This assignment starts as soon as you read this and continues throughout the quarter.
Keep adding new features to it as you learn them or think of them.
Be prepared to share these pages with the class any time you're asked, and be ready to
point out the most horrid features you've included and ready to explain what underlying
details there are that make it particularly bad.
See what others have done before you if you need inspiration.
Part six expectations
Continue working on all your site planning materials for the class project.
Read the reference materials on CSS Positioning (CSS-P).
Begin applying CSS positioning to the design you planned in your storyboards.
Continue work on your Bad Website, adding to it whenever you come up with new
material or new ideas.
Part seven expectations
Continue working on your class project.
Read the reference materials on tables and data presentation.
Incorporatate a table into either your class project site or your Bad WebsitePart 7
expectations.
Part eight expectations
Make sure you're running your code through the validator at http://validator.w3.org/. Fix
what you can, post the URL to the Q & A forum when you hit roadblocks and we'll see if
we can help.
Read the reference materials on inline frames.
Incorporatate an inline frame into either your class project site or your Bad Website. It
doesn't have to be any fancier than your project needs; basic is fine. My goal is mostly
for you to have some exposure to the idea and to see how it works; you might need it
someday.
Part nine expectations
Make sure you're running your code through the validator at http://validator.w3.org/. Fix
what you can, post the URL to the Q & A forum when you hit roadblocks and we'll see if
we can help.
Read the reference materials on xhtml forms.
Incorporatate a form into either your class project site or your Bad Website. It doesn't
have to be any fancier than your project needs; basic is fine. My goal is mostly for you to
have some exposure to the idea and to see how it works; you might need it someday.
Read the reference materials on interactivity (Javascript etc.).
Find a script to add to one of your sites. This is just a find-copy-paste-save request; not a
huge deal. If the script doesn't work, throw it out and try another.
Background and reference materials
Background: the Internet
Click a section heading to see its content.
View all sections | Collapse all sections
Understanding the Internet
A new communications technology was developed that allowed people to communicate
almost instantly across great distances, in effect shrinking the world faster and further
than ever before. A worldwide communications network whose cables spanned
continents and oceans, it revolutionised business practice, gave rise to new forms of
crime, and inundated its users with a deluge of information.. . . Attitudes toward
everything from news gathering to diplomacy had to be completely rethought.
Meanwhile, out on the wires, a technological subculture with its own customs and
vocabulary was establishing itself.
So, we're talking about an earth-changing, almost instantaneous communication system
that suddenly allowed people and governments all over the world to send and receive
messages about politics, war, illness , and family events. The government has tried and
failed to control it, and its revolutionary nature is trumpeted loudly by its backers.
Whoops, wait a minute; that's from Tom Standage Walker's book, The Victorian
Internet: The Remarkable Story of the Telegraph and the Nineteenth Century's On-Line
Pioneers. We're supposed to be looking at the history of the Internet, not the telegraph.
The Internet has a rich and exciting history, founded on mental illness , violence and
international intrigue, merged together with the innovative new technology of the
telegraph system, but it wasn't really designed to withstand a nuclear war.
Huh?
Here's the story of legend: The Internet actually owes its beginnings to paranoia and the
Cold War. The US government needed a way to communicate in the aftermath of a
nuclear war. At that time, much of the government's secure communication was "point
to point": information goes from one point to another in a relatively straight line, such
as when you string a wire between the two places trying to talk.
Point ------------------------------------ Point
Unfortunately, with point to point communication, if any part of the network between
the two points was destroyed, so was communication. What was needed was a network
where data could find alternative routes even if a portion of that network got blown to
smithereens.
The trouble is , it didn't really happen that way. It is true that the RAND Corporation
published a series of studies starting in 1960, about secure communications
technologies that could enable a military communications network to withstand a nuclear
attack . They described two key ideas that worked their way into our online lives: first,
use of a decentralized network with multiple paths between any two points; and second,
dividing complete user messages into message blocks before sending them into the
network. This first allowed the elimination of single points of failure, and enabled the
network to automatically and efficiently work around any failures.
Meanwhile, in 1969, the Department of Defense's Advanced Research Project Agency
(ARPA) developed a thing which they eventually called ARPANET. It was supposed to
allow ARPA-sponsored researchers in various locations to use various computers which
ARPA was providing, and its other main purpose was to quickly make new software and
other results widely available. This network used a system called "packet switching".
With packet switching, information is split up into packets. Even if direct communication
was cut off, these "smart packets ", each with its own addressing information ,could still
find their way to their final destination. Previously, data communication used circuit
switching, as in the old typical telephone circuit, where a dedicated circuit is tied up for
the duration of the call and communication is only possible with the single party on the
other end of the circuit.
At first the ARPANET was used by scientist and researchers at government-funded
institutions. It slowly grew in popularity and began to evolve into the modern-day
Internet, with the addition of inventions like email (in 1972) and TCP/IP (Transmission
control protocol Internet Protocol, a set of protocols that allowed different networks to
communicate with each other). As the modern -day Internet grew, the old ARPANET was
decommissioned.
The Internet Society writes about the merger of technical ideas that produced the
ARPANET in A Brief History of the Internet, and states in a note: "It was from the RAND
study that the false rumor started claiming that the ARPANET was somehow related to
building a network resistant to nuclear war. This was never true of the ARPANET, only
the unrelated RAND study on secure voice considered nuclear war. However , the later
work on Internetting did emphasize robustness and survivability, including the capability
to withstand losses of large portions of the underlying networks."
The ARPANET was designed to survive network losses, but the main reason was actually
that the switching nodes and network links were not highly reliable, even without any
nuclear attacks.
In 1989 Tim Berners-Lee, a scientist at CERN European Laboratory for Particle Physics,
developed an idea that was to become the World-Wide Web. Eventually, as commercial
restrictions were lifted from the Internet, new developments made ease of use less of an
issue, and the World-Wide Web took off, making it the everyday tool that it is today.
The Internet Archive, http://www.archive.org/, has saved actual content from the
Internet over time. You can view Websites from 1995, re-live home video delivery from
kozmo.com, and a lot more .
Much of the above history comes via the APRANET history section of Wikipedia, the free
encyclopedia.
Next section
What is the Internet?
The Internet is basically a global network of computers all using protocols to
communicate with each other via telephone wires (mostly). A "protocol" is a set of rules
used for communication.
On the Internet, two of the main protocols are TCP (Transmission Control Protocol) and
IP (Internet Protocol). These protocols are the glue that holds the Internet together.
TCP/IP protocols transcend different languages, different software and different
operating systems. A PC user in Sweden can communicate and access the same
resources via the Internet as a Mac user in Japan.
Other protocols are also used to provide different services on the Internet. These
protocols include:
Telnet (computer to computer communication)
Email (electronic mail)
FTP (file transfer protocol--exchanging files between computers)
Gopher (browsing hierarchical menus) and of course,
HTTP or hypertext transfer protocol (the World-Wide Web runs on http)
Previous | Next
How does the World-Wide Web Work?
The World-Wide Web is a part of the Internet that conveys information by means of
sound, graphics, text, video, animation and interactivity . Navigation uses a system of
hyperlinks: when users click on a linked word or graphic they are taken to another
place.
Web documents are written in a coding language called HTML, Hypertext Markup
Language. A software program known as a Web browser reads the HTML and translates
it into what you see on your computer screen. Popular Web browsers include Microsoft
Internet Explorer, Mozilla/Firefox, Opera, Safari, and Google Chrome .
All of the material on the World-Wide Web is actually physically living on a Web server.
A Web server is a computer on the Internet that makes information available to other
computers, via hypertext transfer protocol.
Browser
Runs on these
operating
systems
Notes
Microsoft
Internet
Explorer
Microsoft Windows
Most popular browser for Windows, though Firefox
is eating into its market share. Because this
browser is the most common Windows browser
and because it is tied directly into that operating
system, it's a favorite target for virus writers and
other security breaches. Until version 7, MSIE was
a full release behind the others, and even MSIE 7
doesn't render some of the more advanced
Cascading Style Sheets (CSS) as expected.
Mozilla
and
Firefox
MS Windows, Mac
OS, Linux, Unix,
and most others
Open-source "guts" of the old Netscape browser,
but considerably smaller, faster, and more up-todate. The Netscape browser is no longer in
production, having been eclipsed by Firefox.
Opera
MS Windows, Mac
OS, Linux, Unix,
and most others,
including several
cell phones and
PDAs
Traditionally the smallest, fastest, and most
standards-compliant of the major browsers. Mac
versions tend to lag behind Windows and Linux
versions in development. Opera is by far the most
popular browser for cell phones, which will soon
overcome computers as the most common way of
accessing the Web.
Safari
Mac OS X, Windows
Of note because, like Internet Explorer, it's
written by the same people who wrote the
operating system (Apple Mac OS X, in this case).
It's among the faster browsers, likely in part
because it's newer than most and learned from
their mistakes.
Google
Chrome
Windows; a Mac
version is in
development
(updated Jan.
2009)
Google's entry into the browser wars is now the
newest of the major browsers. It's another of the
small, lightning-fast options, and brings several
new innovations to the table.
MS Windows, Mac
OS. AOL
subscribers only.
A modified version of MS Internet Explorer, with
some functionality removed and some proprietary
AOL functions added. Although America OnLine is
no longer the Internet gateway powerhouse it
once was, their browser is still of note because a
couple million people (many of whom are new to
the Internet or not very technically savvy) use it.
AOL
Security--Browsing Safely: Understanding Active Content and Cookies
The following information is quoted from CERT at Carnegie Mellon University. Copyright
info etc. is at the end of the article.
Many people browse the Internet without much thought to what is happening behind
the scenes. Active content and cookies are common elements that may pose hidden
risks when viewed in a browser or email client.
What is active content?
To increase functionality or add design embellishments, web sites often rely on scripts
that execute programs within the web browser. This active content can be used to
create "splash pages" or options like drop-down menus. Unfortunately, these scripts
are often a way for attackers to download or execute malicious code on a user's
computer.
* JavaScript - JavaScript is just one of many web scripts (other examples are
VBScript, ECMAScript, and JScript) and is probably the most recognized. Used on
almost every web site now, JavaScript and other scripts are popular because users
expect the functionality and "look" that it provides, and it's easy to incorporate (many
common software programs for building web sites have the capability to add
JavaScript features with little effort or knowledge required of the user). However,
because of these reasons, attackers can manipulate it to their own purposes. A
popular type of attack that relies on JavaScript involves redirecting users from a
legitimate web site to a malicious one that may download viruses or collect personal
information.
* Java and ActiveX controls - Different from JavaScript, Java and ActiveX controls are
actual programs that reside on your computer or be downloaded over the network
into your browser. If executed by attackers, untrustworthy ActiveX controls may be
able to do anything on your computer that you can do (such as running spyware and
collecting personal information, connecting to other computers, and potentially doing
other damage). Java applets usually run in a more restricted environment, but if that
environment isn't secure, then malicious Java applets may create opportunities for
attack as well.
JavaScript and other forms of active content are not always dangerous, but they are
common tools for attackers. You can prevent active content from running in most
browsers, but realize that the added security may limit functionality and break
features of some sites you visit. Before clicking on a link to a web site that you are
not familiar with or do not trust , take the precaution of disabling active content.
These same risks may also apply to the email program you use. Many email clients
use the same programs as web browsers to display HTML, so vulnerabilities that affect
active content like JavaScript and ActiveX often apply to email. Viewing messages as
plain text may resolve this problem.
What are cookies?
When you browse the Internet, information about your computer may be collected
and stored. This information might be general information about your computer (such
as IP address, the domain you used to connect (e.g., .edu, .com, .net), and the type
of browser you used). It might also be more specific information about your browsing
habits (such as the last time you visited a particular web site or your personal
preferences for viewing that site).
Cookies can be saved for varying lengths of time:
* Session cookies - Session cookies store information only as long as you're using the
browser; once you close the browser, the information is erased. The primary purpose
of session cookies is to help with navigation, such as by indicating whether or not
you've already visited a particular page and retaining information about your
preferences once you've visited a page.
* Persistent cookies - Persistent cookies are stored on your computer so that your
personal preferences can be retained. In most browsers, you can adjust the length of
time that persistent cookies are stored. It is because of these cookies that your email
address appears by default when you open your Yahoo or Hotmail email account, or
your personalized home page appears when you visit your favorite online merchant. If
an attacker gains access to your computer, he or she may be able to gather personal
information about you through these files.
To increase your level of security, consider adjusting your privacy and security
settings to block or limit cookies in your web browser. To make sure that other sites
are not collecting personal information about you without your knowledge, choose to
only allow cookies for the web site you are visiting; block or limit cookies from a thirdparty. If you are using a public computer, you should make sure that cookies are
disabled to prevent other people from accessing or using your personal information.
_________________________________________________________________
Authors: Mindi McDowell
_________________________________________________________________
http://www.us-cert.gov/cas/tips/ST04-012.html
Copyright Carnegie Mellon University.
Terms of use: http://www.us-cert.gov/legal.html
Previous | Next
URLs
When you're going to a particular site on the Internet, it is easiest if you know the exact
address or location . On the World-Wide Web , addresses are called Uniform Resource
Locators (or Universal Resource Locators; people on the Web seldom agree on anything)
or URLs. Everything that you see on the WWW, including Web pages, graphics, sound
files, etc., has a unique URL. By understanding the different parts of a URL you can read
addresses, evaluate information and sometimes even accurately guess at a Web site's
address.
Scheme
Domain
File Path
http://
www.whatever.com /home/index.html
The file path
indicates where on
the host computer
or server that the
information is
The most common
located. A /
scheme on the
indicates the
WWW is http://.
presence of a
This stands for
directory. A URL can
Common top-level
hypertext transfer
have multiple
domains that you will directories.
protocol and
encounter include
indicates that the
Occasionally you will
.edu for educational, also encounter a ~
resource is a Web
.com for commercial or tilde, usually
page.
businesses, .org for indicating that the
Other schemes that nonprofits, .gov for
information is in a
you might encounter US government, .net personal account.
include gopher:// , for networks and .mil
telnet:// and
Actual files end with
for the US military.
ftp://
an extension which
Restrictions
denotes the type of
on .edu, .gov,
The scheme
indicates what type
of resource you are
viewing.
The domain tells us
what organization is
hosting the site. It
can sometimes also
tell us what type of
organization or the
geographic location of
the host.
file. Most often on
the WWW one
sees .html or
.htm , the file
extension for a Web
page. Other
common extensions
include .gif, .jpg, or
.png for graphic
files, .au,
.wav, .ram and
Outside the US two
.mp3 for audio files,
letter country codes
.txt for text files,
are used to indicate
.pdf for portable
country of origin, For document files, .jsp
instance .jp is the
for Java server
country code for
pages and .asp or
Japan and .uk for the .aspx for active
United Kingdom.
server files.
and .mil ensure that
these are only used
by these respective
agencies. No one
checks to ensure .org
goes to a
nonprofit, .com to a
commercial
enterprise, or .net to
a network, though.
What's the stuff in front of the .com (or .org or .net or .whatever )? The part
immediately preceding it is the name that someone chose to register (microsoft.com,
southseattle.org, washington.edu). The part prior to that is a naming convention used
on the domain naming tables, it's chosen by whomever sets up the domain and is often
fairly meaningless. (For example, http://www.yahoo.com reaches Yahoo!, but then so
does http://yahoo.com. http://groups.yahoo.com/ reaches another computer on the
Yahoo! system. The www. is not a required part of a Web address. It's just a cruel joke
to make you sound like Elmer Fudd when you say "www".)
Because all domain names are registered, information about who owns a domain name
or URL can be checked with a WHOIS search. WHOIS searches can be performed at a
great many sites, including Network Solutions, http://www.networksolutions.com/cgibin/whois/whois, and Uwhois, http://www.uwhois.com.
Previous | Next
IP Numbers
The Internet Protocol system, (IP) uses unique addresses called IP numbers, to identify
computers on the Internet and route information from one computer to another. IP
numbers contain four parts, each separated by a decimal. Each part contains a number
between 0 and 255.
117.56.18.200
IP Number
Initially, IP numbers were the only addressing system for the sites on the World-Wide
Web. It was rather awkward it was to remember complex sequences of numbers to go to
your favorite place. Fortunately, for example, the exciting url http://206.222.66.41 was
finally replaced by the much easier-to-remember http://www.yahoo.com, thanks to the
Domain Name System.
The Domain Name System or (DNS) was developed as an easier way to keep track of
Internet addresses. DNS uses letters and words instead of numbers.
IP numbers are actually still what the Internet uses to route traffic. Computers called
DNS Servers allow cross-referencing between DNS and IP numbers. When you type in a
URL the DNS servers find the correct IP number and bring up the Web page.
Previous
Reference, week one: foundation
information
Some information and resources you'll need to know about this quarter
What's that stuff that goes at the top of a page of xHTML?
Put these three items on all your xHTML pages:
Very first lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Somewhere within <head>... </head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
Huh?
This information helps the browser know what to do with the HTML--how to interpret the
page. They're not absolutely necessary when doing pages for fellow native-English
speaking Americans with standard software configurations, but since we're dealing with
a World-Wide Web and an environment in which users can change the settings that
determine how their computers deal with documents, these tags help ensure uniform
behavior on the part of the Web browser software. The DOCTYPE tag tells the browser
software that this will be an XHTML document using the World-Wide Web Coalition
(W3C) Document Type Definition (DTD) for XHTML version 1, English. The META tag
further specifies that the content will be text (HTML), using the International Standards
Organization (ISO) character set for English/transitional alphabetic letters, numbers, etc.
More information
Copyright
Copyright Website
http://www.benedict.com/, "practical and relevant copyright information for anyone
navigating the net."
Pirated Sites: http://www.pirated-sites.com/, "side-by-side comparisons of web sites
that are suspected of borrowing, copying or stealing copyright-protected content, design
or code without permission."
File extensions
Microsoft Windows, by default, hides "File extensions" (the period and letters following
it) from the user. A Word document called "Letter.doc" will show up as "Letter", a Web
page called "mypage.html" will show up as "mypage", etc. There are many reasons why
it's better to be able to see the whole file name. If you choose to do so, launch Windows
Explorer, and from the "Tools" menu, choose "Folder Options", then click on the tab that
says "View". Un-check the box that says "Hide file extensions for known file types".
Internet safety, security, and sanity
Working with computers on campus
I recommend taking steps to avoid saving files on campus computers or thumb drives to
move files from the campus computers to your personal computer . That's why we're
using Freeshell.org accounts to edit our files remotely, directly on the Web server, for
this class. You can check the Keeping safe from viruses on shared (campus) computers
page on this Website for more information.
Antivirus software
Windows antivirus software: http://www.symantec.com/ (Norton Antivirus), http://
www.mcafee.com/ (McAfee VirusScan), http://free.avg.com (AVG Free, yes that's "free"
as in "no money")
Mac OS X antivirus software: http://www.symantec.com/ (Norton Antivirus), http://
www.mcafee.com/ (McAfee VirusScan), http://www.clamxav.com/ (ClamXav, which is
free)
Linux antivirus software: http://free.avg.com (AVG Free makes a Linux version as well
as the Windows version)
(You guys who are feeling all smug about using Mac OS or Linux, both of which have
very few viruses compared to Windows, get real! We all need to be careful about
viruses.)
Firewall software comes built into operating systems these days, but please make sure
yours is turned on. If you're really worried, there are lots of firewall software products
available that claim to be better than the built-in ones. Google is your friend.
Dihydrogen monoxide--learn the facts about this dangerous substance: http://
www.dhmo.org/
Urban Legends: purportal.com: search five of the most well-known sites dedicated to
setting the record straight: Snopes Urban Legends Archive, About.com Urban Legends
search, CIAC Hoax Database, CERT Computer Security Database, and Symantec (Real)
Virus Encyclopedia
Browsers:
Opera, currently the most standards-compliant Web browser (and considerably smaller
and faster than either Internet Explorer or Firefox, runs on just about anything except
an iPhone): http://www.opera.com/
Firefox, the Mozilla Foundation's browser, currently about as popular as any of the
Microsoft browsers, available for Windows, Mac OS, and Linux : http://www.firefox.com/
Safari, Apple's browser, available for Windows, Mac OS, and iPhone (and really fast):
http://www.apple.com/safari/
Google Chrome, available for Windows and Intel-based Macintoshes (probably the fastest
of all the browsers right now): http://www.google.com/chrome
Usability: http://www.humanfactors.com/library/10tips.asp, http://www.uie.com/
Unix/Linux
Despite the best wishes of our friends at Microsoft , most Web servers use the Unix
operating system, or its cousin, Linux. It's wise (and financially rewarding) to know a
few basic Unix commands. There's a good list at http://www.utexas.edu/learn/pub/
unix.html. Some Linux/Unix knowledge can considerably enhance your starting salary.
We'll be using Unix shell accounts to edit files on our Unix Web server, so you'll come
out of this class knowing some basics.
Don't get caught doing this! A cautionary tale from Userfriendly.org.
Seattle Community Colleges Web Student Facebook group
We've set up a Facebook group as a place for faculty, web graduates and current
students of all three Seattle Community Colleges Web programs to network. You all are
welcome to join; it's an open group.
http://www.facebook.com/group.php?gid=50745704722
Web server space and putting files there with
FTP
Posting a site to the Web
If you have not yet set up the Web directory in your freeshell.org account, now's
the time to take care of that. Freeshell registration instructions and Freeshell Website
setup instructions are available in these respective places.
Our free Unix shell accounts include Website space sufficient for this class. We will be
editing files directly on that server (bypassing the need to move files between SSCC
campus computers and your home ). We will also be using FTP (file transfer protocol) to
move files between your home computer and the server, or for uploading any images
you've been working on from a campus computer lab.
Other server space
Created an xHTML document? Good for you! Of course, you won't be able to share your
genius until you make that document available over the World Wide Web for everyone to
see. It's time to use a Web server. A Web server is simply a computer that serves up
content via the Internet, so other people can see it. If you want an xHTML file to be
available to people over the Internet, you have to put it on a Web server.
Generally, people get an account on a Web server where they may place documents for
people to see over the Web. The account -holder gets an address to the server, a login
name and a password, to ensure control over the material posted there. Files are
transferred from one computer to another--from a hard drive or disk to Web space--via
FTP, or File Transfer Protocol. We can FTP our Web documents to a Web server, thus
making them available to anyone who has access to the World Wide Web .
At one point, the only way to FTP was to use a detailed series of UNIX commands to
connect to the server, locate the file on your host computer and then transfer it to your
Web space.
Next section
Finding a home for your Website on the World-Wide Web
After spending months learning HTML and weeks working , it seems a shame not to post
your project for all to see. Additionally, posting your classwork to the Web means that
you can work on it from virtually anywhere with Internet access. There are many
different options available for Web site hosting. Determining which one is right for you
depends on the purpose of your Web site and the amount of money you feel like
spending.
Your freeshell.org shell student accounts
Our shell accounts on freeshell.org include Web server space. For our needs , that will be
sufficient, but I have included a good deal of information below about other options for
hosting sites, should you be wanting to do such a thing.
The URL for your Website will be your login name, a dot, and freeshell .org. So, for
example,
login: alboss
URL: http://alboss.freeshell.org/
Read working in the shell account (ongoing) for information on the day-to-day use of a
shell account for this class.
Other Web hosting options
Professional Web hosting and domain name selection
If your project will become the permanent Web page for a commercial organization or
nonprofit, you'll need to register a domain name and enter into a hosting agreement
with a reputable company.
If you need to have your own domain name, there is no way around it--you have to pay
the money and register a domain name. However, that can be done for under $10.00 if
you shop around.
Well, it seemed like a good idea at the time: THINK HARD before you pick a domain
name. The good folks at Morrison & Foerster, Attorneys at Law, despite being a large
international business, evidently have no children who listen to rap music and no
exposure to the language of many parts of the urban United States.
Lots of examples exist where someone should have thought a bit more about that
domain name.
Registering a domain name consists of checking to see if the name is available and then
reserving that name through a domain name registrar. Using the a whois server on a
registrar (such as the Network Solutions WHOIS server http://
www.networksolutions.com/), you can check to see if a domain is in use. If the name is
available you will need to register the domain name. Until a few years ago, domain
names cost about $70 for a two year registration and $35 per year after that. However
with deregulation, third party vendors and lots of competition, you can register domain
names for much less per year. (Check sites such as http://www.register4less.com,
http://www.dotster.com/, http://www.godaddy.com/). These fees cover registration of
the domain name only and not the space where your Web documents will be housed,
although many registrars will sell you hosting services as well.
To actually have space on a Web server, you will need to enter into a contract with an
ISP (Internet Service Provider) or other Web hosting service. Whether your hosting is
free or a fee -based service (usually a sign-up fee and/or monthly maintenance fee),
they provide you password-protected space on their Web server. If you own a domain
name then the IP address for your space will be registered with your domain. (This
means anyone typing in your URL will go to your file space.) Some ISPs will also throw
in free email addresses, tech support or e-commerce solutions. All ISPs are not created
equal: some charge outrageous fees, while others limit the access they allow. Make sure
you do your homework.
Free/low-cost Web hosting
Many places on the Web offer low-cost or free sites to small businesses or individuals. In
some cases these "free" sites offset their cost by having you display their advertising on
your Web page. To save a couple of bucks that you might otherwise put into luxuries like
tuition, food, and shelter, this might not be such a bad trade-off, but even better is that
for a small fee like $5/month, many will turn the ads off.
The sites below offer free or low cost hosting. Of course, nothing is actually free; many
of these sites may require you to display ads, participate in surveys or be subjected to
mailing lists. Also keep in mind that the dot-com fallout is forcing these folks to change
their business models without much forewarning to users.
Freehostia
http://www.freehostia.com/
Freehostia's no-cost option offers FTP access, disk space, POP3/IMAP E-mails,
database, and script hosting, without ads. Consult the step-by-step setup
instructions for more information.
Tripod
http://www.tripod.com
Tripod includes FTP access, disk space and Web site add-ons. Their ads are
obnoxious but can be turned off for a few dollars per month.
Seattle Community Network
http://www.scn.org/
Want limited Web space, no chance of having your name sold, and no advertising?
SCN, a survivor of the "FreeNet" movement, has some of the strictest privacy
rules you can find. It is a no-cost service begun in Seattle as a project of the local
chapter of Computer Professionals for Social Responsibility (CPSR, http://
www.cpsr.org/) SCN offers email and Web space for individuals (1 MB) or
organizations (5MB). Downsides: some of the long addresses, the Web-posting
and editing interface, the limited space available. This is not a commercial
business-hosting site, though many nonprofits do find a home there.
Example:
http://www.scn.org/westwood/
Brinkster
http://www.brinkster.com/Hosting/Educational.aspx
Brinkster's "Educational Package" has Web space, email support, and it allows for
some fancy server stuff (.asp, server-side includes , Microsoft Access) that most
free services don't offer. There are some restrictions, and they don't let you host
audio or video files, but if you want a Windows hosting environment and some of
the other extras, this might be the site for you.
Ourmedia.org
http://www.ourmedia.org/
Ourmedia.org promises they will host your files, of any size and any amount,
forever. They are in a partnership with with Archive.org, which provides the
space. Archive.org's goal is to keep a snapshot of the Web as an archive of what
was there at any one time. Since they want to keep a copy of everything ever put
on the Web anyway, it's to their advantage to host your content directly.
Free Webspace .Net
http://www.freewebspace.net/
FreeWebspace.Net maintains a large listing of other free Internet hosting options.
For more information on opening a small business site or online store...
Yahoo- Store!, at http://store.yahoo.com/, will host your Web store for something like $
30 a month. Services include e-commerce solutions and advertising on the Yahoo Store
site.
eBay, at stores.eBay.com offers a similar service, from $15.95 a month up, depending
on how much business you do.
So does Amazon Marketplace from Amazon.com, and a few hundred others.
Are you dreaming of opening your own e-commerce Web site? Believe it or not, you can
open your own on-line store and never stock an ounce of inventory. Many on-line stores
and merchants offer affiliate or associate programs. With an affiliate or associate
program, you partner with an on-line retailer. You link to their merchandise and provide
any marketing and encourage customers to buy their products. In exchange you receive
a percentage of any transactions or purchases referred from your site. In some cases
the transaction fee can be 15% or more .... So, if you link to an item on sale for $50 and
encourage one person to buy the product, you get 15% of the sale price ($7.50).
There are thousands of affiliate programs and you can sell all kinds of merchandise and
services, from books and CDs to Web design and accounting services.
For more information on affiliate and associate programs...
About.com Affiliate Programs
http://html.about.com/compute/html/msubaffiliateprograms.htm
Amazon.com Associates
http://www.amazon.com/associates/
Previous | Next
Basic FTP
software
instructions
Checkpoint, file transfer: Review your options. Illustrated, step-by-step
demonstrations of how to use an FTP program to transfer files to an account
on Freeshell.org
Web-based FTP with Net2FTP (bonus: you can edit files without downloading
them to a local computer. Make sure you save a backup copy first, just in
Our student shell
case!)
accounts let us work Web-based FTP with UnlimitedFTP (http://myftp.utechsoft.com/)* (bonus:
with html directly
this client will save your FTP login information)
on the server, but if Filezilla for Windows, Linux, Mac OS 10.5 and above (low-bandwidth;
we want any images screenshots)
How to use Filezilla** (Flash movie, broadband recommended)
on our Websites
we're going to have
Many publicly available computers, including the ones in libraries and
to put them onto
Internet cafes, do not have a dedicated FTP program installed. A clever
the server by
workaround is to install Filezilla on a thumb drive and use that to transfer
transferring the
files. (Not recommended for SSCC campus computers, though, or any
image files there.
computers whose security you're uncertain of)
That's done through How to install Filezilla Portable* (Flash movie, broadband recommended)
FTP, or File Transfer
Protocol. If you are * UnlimitedFTP requires Java. If you're at a computer that won't let you use
it, use Net2FTP instead.
working on your
**
Special thanks to Clive Woodhouse for creating and sharing the Flashown computer, you
based Filezilla tutorials.
have the option of
editing your html
files on your computer, then transferring the saved files onto the Web server via FTP,
instead of editing the files directly on the server. Those of you who cannot function
without a mouse might prefer this method.
Various versions of free Windows FTP software can be found at http://
www.shareware.com or http://www.tucows.com/, as can various versions of Fetch, the
most popular of the Macintosh FTP programs. (If you're trying to get an FTP program for
home, Fetch offers a free version to students, although you may have to read through a
lot of fine print to find the free version. Windows users have many free choices,
including Filezilla (winning the silly name award), Coffee Cup FreeFTP and EmFTP.)
Even easier is to use a Web-based FTP program, such as UnlimitedFTP, http://
myftp.utechsoft.com/myftp/. This particular program lets you save your site settings,
making it easy to transfer files via any Web browser.
Net2FTP, http://www.net2ftp.com, will not save your site settings like UnlimitedFTP, but
it allows you to edit html and css files directly on the Web server without having to risk
downloading them onto a campus computer . If you do this, save a backup copy on the
server so you can fall back in case you royally mess something up.
When you first open an FTP program, you may need to create a new profile or session. A
profile is simply a collection of settings giving the software information such as the
location of the server and session name.
Once you have typed in your information and clicked okay, the software connects to the
server. The information for your Web space on that server will be displayed.
Make certain to place your files in the right directory. On freeshell.org, all our
files need to go somewhere within the directory named "html".
Most FTP sites use Passive FTP, so if the instructions you got from the Web host don't
say otherwise, try toggling on "passive" first and see if that works. If it doesn't, then
toggle it off and try again.
In most FTP programs , you will highlight the document that you wish to transfer and
either double-click on it or drag it to the server side of screen. Often, arrows in the
middle of the screen can also be used to transfer files from one location to another.
Always transfer text documents (*.htm, *.html, *.txt, *.css--basically, anything
you can open in a plain-text editor like Notepad) as ASCII files (text-only), and
transfer all other files (images, sounds, Word documents, PDFs, video clips,
etc.) as binary files. Most FTP programs these days have an "automatic" setting that
takes care of the transfer types without any intervention by the user.
Once a file has been transferred, you should be able to see that file in a Web browser by
typing in the URL. (Your Web hosting provider should give you the URL that leads to
where you keep your files.) In some cases, your account name may be incorporated into
the URL by means of a tilde ~ or a backslash /.
More detailed information is available here:
Web-based FTP with net2ftp: An illustrated, step-by-step demonstration of how to
use the net2ftp Website-based FTP program to transfer files to an account on
Freehostia
Macintosh: FTP with Fetch
Filezilla for Windows, Linux, Mac OS 10.5 and above : An illustrated, step-by-step
demonstration of how to use the free , open-source Filezilla FTP program to transfer
files to an account on Freehostia
How to use Filezilla* (Flash movie, broadband recommended)
Sometimes, you might encounter a computer that has no GUI (graphic user interface)
FTP software installed. Other times you might be in a hurry and not want to wait for the
software to load. In cases like these, many people--especially power users--might
choose to use command-prompt FTP. Like most command-prompt work, it's not for
everyone, but it can be a powerful and fast tool for those who want to use it .
Previous | Next
Basic FTP command-line instructions
This is optional, for those of you who might not always be at a computer where you can
install an ftp client, or you folks who will be working with terminal servers and the like .
It's good to know, since it will let you ftp from pretty much any computer that's got an
Internet connection.
1. On a Windows computer, click the Start button and choose Run. In the dialog box,
type FTP (enter). With Mac OS X, choose "Terminal" and type FTP (enter). With
Unix or Linux, just type FTP (enter) at the command line prompt.
2. For this example, we'll assume the files you want to transfer are on a floppy disk.
At the command line prompt, which should look like this:
FTP >
type the following:
FTP > lcd a:\
(that's LCD, not one c d--it means change local directory, e.g. the one on your
computer.) Obviously, if the files you need are in a subdirectory, on your hard
drive, etc., you'd need to lcd to where your files are. And remember, most versions
of Windows do strange things to directory names that are more than 8 letters long
and to file names that exceed the old DOS 8.3 naming convention (eight or less
letters, a dot, and three or less letters).
Through this example I repeat the command line prompt. You only need to type the
part in bold. After typing each command, you will need to press (enter) to send the
command to the remote computer.)
3. Use the command line prompt to connect to the remote computer:
FTP > open freeshell.org
4. When prompted, type your login ID and password, pressing (enter) after each. You
won't see your password as you type it .
5. If necessary, use the command line prompt to change to the desired directory on
the server:
FTP > cd html
(Only if the server has a html directory where you're supposed to put your files!
Freeshell.org does, but you're in there immediately upon connecting by ftp, so you
can skip this step. Note that it's lcd to change directories on your computer, and cd
to change directories on the computer you've connected to. If your files on the
remote computer are in a subdirectory of html, you'd need to cd again into that
subdirectory.)
6. Want to make a new directory called "final"?
FTP > mkdir final
Want to know what directory (on the server) you're in?
FTP > pwd
Want to see what files are in that directory?
FTP > ls
(That's LS, as in list, not one-s.)
Want to get rid of a file called "file.html"?
FTP > del file.html
7. To upload or download HTML or text (txt) files, type ascii at the command line
FTP > ascii
For any other kind of files (images, sounds, Word documents, etc.), type bin at the
command line
FTP > bin
8. To move a file from your computer to the server, type "put" and the file name . To
get a file from the server and transfer it to your computer, type "get" and the file
name. When dealing with a bunch of files, you can use "mput" and "mget", and
even use an asterisk as a wildcard. Be sure you've got typed bin or ascii depending
on what you're doing!
FTP > ascii
FTP
FTP
FTP
FTP
FTP
FTP
FTP
FTP
FTP
>
>
>
>
>
>
>
>
>
put index.html
get notes.html
mput thing1.html thing2.html
mput *.txt
bin
put photo.jpg
get portrait.jpg
mput sketch.gif draft.jpg button.png
mget *.gif
9. All done? Type "bye"
FTP > bye
Today, FTP is often done by using software that automates the process and reduces the
once complex UNIX commands to a simple point and click with your mouse.
Previous | Next
Good file management
Following some basic tips of good file management can save you a lot of pain and
gnashing of teeth. Remember, the easiest way to avoid mistakes is not to make them.
Do not include spaces in file names. As often as not, this will break a Website.
Use lowercase. On the Web most people write URLs by default in lowercase.
Changing the case of your file names may confuse someone trying to find your Web
site or type in your URL.
Remember, the Web is case-sensitive. The file names mypage.html and
Mypage.html are completely different as far as the computer is concerned. A link
to mypage.html will fail if the actual file name is Mypage.html.
Avoid symbols in your file names. Although - and _ can be used, they tend to be
hard to read when underlined and often lead to mistakes .
The names of files indicated in your links should be the same as the names of your
files. (Duh.) Again, if you have <a href ="MyFavoriteFile.htm">Click here</a> and
the file name is "myfavoritefile.html", don't expect your link to work.
All parts of a Web site, including pictures and other files, must FTP'd for the
complete site to show up on a Web browser.
Use descriptive names. Calling every file test.html will only confuse you in the long
run.
If you name a file "index.html" on most servers (" default.htm" on older Microsoft
servers), this file will be the one that shows up when a user doesn't include a file
name in the URL. (For example, when you go to http://www.scn.org/, the page
you're actually seeing is http://www.scn.org/index.html.) Depending on server
security settings, if there is no file named index.html, the user either sees (1) a list
of all files in the directory, or (2) a security error message telling them they're not
allowed to see a list of all files in the directory.
Previous
Unfortunate domain name choices
Think, then purchase.
(These have been posted all over the Internet; they're not original to me.)
If you're looking for IP computer software, there's always www.ipanywhere.com.
Who Represents is where you can find the name of the agent that represents any
celebrity. Their web site is www.whorepresents.com.
Experts Exchange is a knowledge base where programmers can exchange advice and
views at www.expertsexchange.com.
Looking for a pen? Look no further than Pen Island at www.penisland.net.
Need a therapist? Try Therapist Finder at www.therapistfinder.com.
There's the Italian Power Generator company, www.powergenitalia.com.
And don't forget the Mole Station Native Nursery in New South Wales,
www.molestationnursery.com. (This one has been changed...and thankfully so.)
More?
Site: GotAHoe.com
Is really: GoTahoe.com (Lake Tahoe Visitors Bureau)
Site: DollarSexChange.com
Is really: DollarsExchange.com (currency trading site)
KatieSwigs.com (Blog of a hard-drinkin' gal?)
KatiesWigs.com (Hand-made wigs for theatrical productions)
TeacherStalk.com (Your boy's teacher keeps following him?)
TeachersTalk.com (Get your teaching credential from Walden University)
Site: AmericansCrapMetal.com (Support for those with iron-rich blood?)
Is really: AmericanScrapMetal.com (Texas metal recycler)
BiGalsOnline.ca (Support for Canuck women who swing both ways?)
BigAlsOnline.ca (Big Al's aquarium supply in Canada)
Site: SydneyTheRapist.com (Guy who brags about his leisure activities?)
Is really: SydneyTherapist.com (Woman sex therapist in Sydney, Australia)
Site: SpeedoFart.com (Explaining bubbles coming from competitive swimmers?)
Is really: SpeedOfArt.com ("Arty" British ad agency)
An illustrated guide to using Filezilla for
FTP'ing files to a site on Freehostia
These screen captures are from a free site hosted at Freehostia.com. For an FTP client , I
am using the free open-source Filezilla client, available from http://filezilla-project.org/
for Windows, Linux, and newer Macs (OS 10.5 and above).
The advantage of FTP client software is it can remember your login, password, site
address, directory name, etc. The disadvantage is that we don't have it here on campus,
and even when we did, you wouldn't want it to remember your login information since
these are shared computers.
Filezilla undergoes constant updates, so the screen shots here probably will not be an
exact match to what you see. Consult their help files if you have trouble figuring out
where something is that's not exactly as shown here--the user interface changes but the
concepts remain the same, so it should not be difficult to look up.
There are two parts to these instructions: initial setup, and then how to use it .
One-time setup instructions for home use
1. Filezilla and, from the File menu, choose "Site manager".
2. Set up a new site , named for the URL (domain) you received from your Web
provider (Freehostia, for most of you).
3. Using information from the setup email sent when you registered with Freehostia,
fill in the fields in the file transfer protocol (FTP) client. When you have it all filled
in, click "Advanced".
4. In the "Advanced" section, fill in the default remote directory (a / slash followed by
your site domain, if you're using Freehostia). Then, use the browse button (to the
right of the local directory box), browse to and click on the directory that contains
all your files. Select "Passive FTP" for most Website hosts. (If you can't get it to
work, then try deselecting it.) Select "OK", then click "Save and exit" to ensure that
your settings are saved.
5. From the "File" menu, choose "Site manager". (Yes, again.)
6. Pick your site name from the available sites, then click "Connect".
7. Use drag and drop to upload your chosen files onto the Web server. The screen on
the left shows directories and files on your computer. The screen on the right
shows what's on the Web server.
An illustrated guide to FTP'ing files to a site on
Freehostia
am using the free Web-based FTP service at http://www.net2ftp.com/, since I know it
will work, and look the same, on pretty much any computer.
1. First, using information from the setup email sent when you registered with
Freehostia, fill in the fields in the file transfer protocol (FTP) client.
2. Connect to Freehostia and choose what you want to do (usually upload a file or
create a directory
3. Upload your chosen files onto the Web server.
4. Log off when you're done moving files around.
Freehostia
Already got this set up? Skip down to "Regular file transfer tasks" if you just need a
reminder of what to do to move files around.
am using the free UnlimitedFTP Web-based FTP service at http://myftp.utechsoft.com/
myftp/, since I know it will work, and look the same, on pretty much any computer, with
the added benefit that it will save my site settings.
Remember that the UnlimitedFTP Website is nothing but a file transfer tool. It does not
store your files, it just helps you copy them between a Web server on the Internet and
your computer.
One-time setup
Before doing anything else, you will need to register with the site. You may pick any
login ID and password you like , just make sure you remember them.
After you have submitted the registration, wait till they email you a confirmation link to
click. Once you have that, you can log onto the UnlimitedFTP tool.
1. First is a one-time task, setting up the site information so you can easily connect
with your Website. Begin by clicking "Create a new FTP connection " on http://
myftp.utechsoft.com/myftp/ after you have logged in .
Using information from the setup email sent when you registered with Freehostia,
fill in the fields in the file transfer protocol (FTP) client.
Click "Save site", and the server connection information should now be saved.
Regular file transfer tasks
These are the steps you'd take whenever you need to copy a file to or from your Web
server.
1. Log onto to the file transfer tool at http://myftp.utechsoft.com/myftp/, and click the
site you set up earlier.
If you get a security prompt for whether or not to trust this site, click "Trust". (This
probably won't happen every time you connect; it depends on computer setup.)
Click "Trust" if you're asked.
2. If you are a Freehostia.com user, you must double-click the directory to open it.
3. At this point it should look and work pretty much like any other FTP client covered
in our notes.
The left side of the screen shows files on your local computer (just like
Windows Explorer and similar programs do); the right side is showing files on
the Web server.
Drag files from one side to the other to copy them between the two places.
Use the "MakeDir" buttons to create a new directory, the "Rename" buttons to
rename a highlighted (selected) directory or file, and the "Delete" buttons to
delete whatever's highlighted.
To know more about how this tool works and what it can do, click the "Help"
button.
4. Click the "Logout" tab at the top when you're finished.
CTN 160
Searching the Internet
Why do we care?
This is a class about Web publishing. Why waste time on the subject of searching?
And why talk about any search tool other than Google, since it's so good?
These are good questions. Here are some answers:
1. If you publish a Website for public consumption and nobody can find it , it's
not much good, is it? Knowing how search tools work can help you create
your site so it'll show up where you want it to.
2. Knowing about the world of search beyond Google can help you better set
your site up in case you're doing a specialty site and your audience might be
using means other than Google to find you.
3. Google is outstanding. No question about it . But, because Google's so good, it
makes everybody look like a search genius. This raises the bar a lot for you,
both as a student and in your work life. Assume the person in the next
cubicle over, and your boss, and your evil competition, have also heard of
Google. If you want to deliver things that others can't routinely lay their
hands on, you'd better learn to Google, certainly, but you'd better learn more
than Google as well.
So, moving along...
Four Ways to Find Things on the Internet
There are basically four ways to find something online.
1.
2.
3.
4.
You
Use
Use
Use
know the source of the information, e.g. you know the URL.
a subject directory
a ready reference resource
a search engine
Not Everything on the Web is True!
Do you believe that
everything you read is true?
If someone walks up
What about everything on
to
you and tells you an
the Internet? In a world
unbelievable story,
where anyone can publish on
what do you do to
the Web, not all information
determine
if it is true
is created equal. Much of the
or not?
information you find on the
Internet is reliable, accurate
and true... but much of it is
The Internet is a
also biased, misleading and
whole new ball game
downright false.
when it comes to
information.
As such
In the real world, parents,
we need to develop
friends, education and
new
toolboxes full of
experiences help us develop
tips and techniques to
the ability to determine fact
determine if the
from fiction truth from lie. In
information
we are
situations where the line
seeing on the Internet
between truth and lies are
is true or false,
blurred, we have developed
reliable or
an internal toolbox of tips
unbelievable.
and techniques to make
educated guess about what
to believe.
When it comes to information
on the Web ask yourself the
following questions...
Who is the Author?
Can you find the name
of the author or creator ?
Are there any
credentials? Degree,
title, etc.
Is there contact
information somewhere
on the page?
Is there a link to a
homepage? Is it for an
individual or for an
organization?
What can you tell from the
URL?
Who owns that
URL…
Because all domain
names are registered,
information about who
owns a domain name
or URL can be checked
with a WHOIS search.
WHOIS searches can
be performed at
several domain
registrars, including
AllWhois, http://
www.allwhois.com and
Can you tell anything
about the source of the
information from the
domain name or URL?
Can you find out more
about the URL?
What is the purpose of the
Web site?
Does the site have
one... if so, what?
Is the site trying to
inform, persuade, or
sell?
Is it geared to a
particular audience?
Who benefits from my
believing this?
Is the site objective?
Is the site fact or
opinion?
Is the author's point-ofview objective and
impartial?
Is there affiliation with
an organization? If so is
there some bias?
Is this information accurate?
Can this information be
verified? You may need
to do a little searching
to verify information.
Is there quality control?
Are there spelling
mistakes, grammatical
errors, or typos?
Is the information reliable
and credible?
Would you bet your life
on this information?
What institution
(company, government,
university, etc.)
supports this
information?
register4less, http://
www.register4less.com
Other Popular
Evaluation Criteria
5-Ws for Evaluating
Web Sites
Who is
responsible for
the site?
What type of site
is it?
When was it last
updated?
Where can you
find more
information?
Why was the site
created?
Can you verify this site
with a non-Web
equivalent?
Who does the site link
to? And who links to the
site?
Is the information current?
Is the information
current in nature?
Can you find evidence of
recent updates?
Next section
Subject directories
A subject directory organizes Internet resources by subject. (Yes, you may chalk
that up under "Well, duh".) These are great places to start your research. Many
directories can be searched by keyword. Most offer special features like
information guides, free email, or current news. Arguably the most famous subject
directory is Yahoo!, launched in 1994 by two candidates in Electrical Engineering
at Stanford University. They started their guide as a way to keep track of their
personal interests on the Internet. Of course, now, Yahoo! has purchased so many
services and expanded so much that its former core function is often eclipsed by
its other services. In fact, their subject directory is fairly well buried now, at
yahoo.com you have to look carefully to even find it .
The Open Directory Project is noteworthy because instead of being a corporation,
it's staffed by thousands of volunteers in the "open source" model. If you don't
think that could be worth anything, take a look in the "help" section of some
major search tools and notice that most of them use the Open Directory Project as
one of their primary information sources.
Yahoo
http://www.yahoo.com
Open Directory Project
http://www.dmoz.org
Previous | Next
Ready reference resources
The term ready reference is how librarians often describe resources that can be
used to quickly answer questions: an encyclopedia, a dictionary or favorite
database, etc. On the Internet, the ready reference Web sites allow us to quickly
answer questions without performing detailed searches, and without having to
kiss all the frogs just to find the prince.
These include:
Specialized databases
Virtual libraries
Pathfinders
Online reference tools
Portals
Specialized databases
A specialized database is a searchable collection of information or hyperlinked
sites.
Google Groups
http://groups.google.com
Search engine for Newsgroups and other on-line discussions (formerly
DejaNews)
Hoover's Online
http://www.hoovers.com
Search for information about corporations. Although this is a subscription
service, it does provide lots of useful information for free.
AJR Newslink
http://www.newslink.org
The American Journalism Review Web site provides links to thousands of
broadcasters, magazines and newspapers worldwide.
Internet Movie Database
us.imdb.com
The ultimate movie reference source.
Fed Stats
http://www.fedstats.gov
Collection of statistics from government agencies
Virtual libraries
Based on the traditional library, these sites identify, organize and evaluate
information. Sometimes virtual libraries are searchable or organized by a
particular scheme (like Dewey or Library of Congress).
Librarians have been organizing information for the masses for centuries. A virtual
library delivers the library scientist's skilled touch at setting things up so it's easier
to get to what you're wanting to find, and easier not to find what you don't want
mixed in among the things you did want.
Internet Public Library
http://www.ipl.org
A library for the Internet community developed by the University of Michigan
Librarian's Index to the Internet
http://lii.org/
This subject listing of Internet resources is developed and maintained by
librarians at the University of California, Berkeley
INFOMINE
http://infomine.ucr.edu/
Scholarly Internet Resources Collection from the University of California.
Geared more to academia
Pathfinders or guides
A pathfinder, guide, or subject-specific resource is a Web site that identifies,
organizes, evaluates and annotates Internet resources on a particular subject.
About.com, http://www.about.com, is among the better-known sites maintained
by subject matter expert "guides" who have advanced knowledge of the topic.
Items are often annotated with a synopsis or review, so the user has a good idea
of what lies beyond the link before clicking on it. Because of this, Pathfinders can
save a lot of visits to sites that turn out not to be worth your while .
On-line reference tools
On-line reference tools are Web sites that function like print reference sources or
provide quick answers to questions. These are similar to those magic books behind
the reference desk at the library--when you ask the reference librarian the most
unanswerable question imaginable, they pull out this book, turn to some
seemingly random page, and provide the answer, as if it was the easiest thing on
earth. Those same reference librarians who built those collections of magic books
behind the desk have also built the online equivalents, and even though you're not
allowed behind the reference desk to hold the magic books, there's no desk
between you and these sites.
King County Library System Answers
http://www.kcls.org/answers/
A collection of online ready references maintained by the library.
Yahoo Reference Page
dir.yahoo.com/Reference/
Listing of reference sources developed by Yahoo.
InfoPlease Almanac
http://www.infoplease.com
The on-line version of the Info Please Almanac, includes a dictionary and
encyclopedia.
Wikipedia
http://en.wikipedia.org/
Wikipedia is a free online encyclopedia edited by volunteers, with articles
subject to change by nearly anyone. Wikipedia 's volunteers enforce a policy
of "neutral point of view" whereby views presented about notable persons or
literature are summarized without an attempt to determine an objective
truth. Because of its open nature, vandalism and inaccuracy are problems in
Wikipedia. The status of Wikipedia as a reference work has been
controversial, and it is both praised for its free distribution, free editing and
wide range of topics and criticized for alleged systemic biases, preference of
consensus to credentials, deficiencies in some topics, and lack of
accountability and authority when compared with traditional encyclopedias.
Portals
Portals are Web sites that aim to be the user's entry point to the Internet.
Traditionally these sites contain value-added services, such as free email, subject
directories, special guides or personalized information. Many search engines have
tried to turn themselves into portals. Most have failed.
Portals are often recognizable by the fact that they've attempted to cram every
imaginable link anyone could ever want onto one page.
Yahoo*
http://www.yahoo.com
MSN
http://www.msn.com
Excite*
http://www.excite.com
Lycos*
http://www.lycos.com
AOL
http://www.aol.com
CBS Sports
http://www.cbssports.com
IVillage
http://www.ivillage.com
Inc
http://www.inc.com
* Portals marked with asterisks are also search engines.
Previous | Next
What is a search engine, really, and how does it work?
A search engine is basically a database of links to Web sites and Internet
resources. The search engine database is put together using robot programs,
often called spiders, crawlers, or bots. These spiders, crawlers and bots are
programmed to find Web pages, follow all the links they contain and vacuum any
new information they find into the master database. When you use a search
engine, you are not really searching the entire Internet, only a database of pages
and resources gathered from the Internet. The results you get might be up-todate, or they might not; it depends on how long since the robots visited the site
and whether the information they collected has changed since it was added to the
search engine's database.
Once the robot programs collect the information, the search engine's indexing
program takes over. An indexing program goes through the information
collected by the robot programs and establishes access points--ways to connect
your questions to the their information in the database.
When you submit a query or question to the search engine, a retrieval engine:
1. searches the database compiled by the robot programs and indexing
programs,
2. identifies items that match your query and organizes, and
3. displays them in a particular order, based on relevancy (how closely they
match your query).
All of this information is presented to you, the user, by means of the search
engine's HTML interface, the actual Web page you see when you go looking for
information.
Previous | Next
Using a search engine (better than most other people)
Although most search engines basically function the same way, there are many
differences among them. Some search engines contain a database of several
billion Web pages; others have less than 3 million.
Some search engines allow only full text searching (searching through the entire
text of a document), while others also offer field searching (searching only a
specific field within a document, such as the title or author field). Some search
engines offer only basic search commands, yet still others allow you to develop
complex searches. Regardless of the search engine, the following four -part
process will help you to develop effective queries and retrieve better results.
Search engine results (or why the Internet really is not just full of porn)
Sometimes the query results from a search engine include sites that seem to have
nothing at all to do with what you were researching. In some cases, search results
may include unrelated links to sites that contain questionable or pornographic
material. Uninformed searchers might conclude that the Internet consists entirely
of pornography and bad language. That's a bunch of #$%@. Despite what certain
of our members of Congress might think, this conclusion is not correct. Unrelated
hits sometimes come up on searches because the people who build these
questionable sites know enough about how search engines work to make that
knowledge work for them. Unscrupulous Web developers can misuse and abuse
search engines for the sole purpose of increasing their sites' rankings in the search
engine results. The higher the rankings , the more likely it is that someone would
click on that link and visit the site.
Many of the names for these types of abuse are colorful and amusing--that is until
you are made an unwilling victim.
Old-school tricks included:
Font
matching
Adding keywords or the same word over and over
again, but matching the font color to the
background color so no one can tell.
Meta jacking
Stealing someone else's Meta tags (tags use to
provide descriptions of a page) in order to inflate
your own ranking. (We'll talk more on meta tag
abuses on the next page.)
Key Word
Gateways
Directing people to a page then automatically
taking them somewhere else.
Mouse
Trapping
Using scripting language to prevent someone from
leaving your site
The good news is that search engine programmers are completely aware of these
tricks and punish sites that may seek to manipulate rankings . Sites that try to
trick search engines often wind up at the very bottom of the relevancy chart (site
2,143,975 of 2,143,975) or get removed from the search index entirely.
Is there a trick to using search engines? Most definitely! Read the search engine's
help files. Although most search engines basically function the same way, there
are many differences among them.
Some search engines contain a database of 8 billion Web pages; others have
less than 3 million.
As mentioned above, some search engines allow only full text searching
(searching through the entire text of a document) and while others also offer
field searching (searching only a specific field within a document, such as the
title or author field).
Some search engines offer only basic search commands, yet still others allow
you to develop complex searches.
The Internet is full of information. A lot of it is junk. You'll have a much easier
time getting to what you need on the Internet if you develop a search strategy.
Regardless of the search engine, the following four part process will help you to
develop effective queries and retrieve better results.
Step one: Selecting Keywords
It doesn't make searching any easier to figure out when the same words mean
different things, for example when people use the generic "search engine" when
they really mean "subject directory". As if that's not bad enough, there are at least
three Web-search-related uses of the term "keyword":
1. America OnLine has its own "keywords", which are text shortcuts their users
can use to quickly get to specific AOL content. These keywords are available
for purchase from AOL.
2. The HTML meta tag supports keywords. This is a way to put additional
descriptive information in the head of an HTML document (not in the body),
where it is visible to search indexes but not to readers . This was originally
created to help search tools index a Website. The use of meta tags by search
engines has dropped remarkably as search tool technology has improved and
as search tool programmers caught more and more people trying to scam
their search engine by doing things like:
putting their competitors' product names into meta tags on their own
Websites, so for example, a user searching for Southwest Airlines would
find themselves on the Northwest Airlines Website instead.
Not a real example, as far as I know:
<head>
<title>Welcome to Northwest Airlines</title>
<meta name="keywords" content="Southwest American PanAm" / >
</head>
repeating an important keyword a few hundred times in the meta tag in
order to fool the search engine into assigning the page a higher
relevancy
<head>
<title>University of Washington</title>
<meta name="keywords" content="football football football football
football football football football football classes football football" / >
</head>
inserting keywords that had nothing to do with the Website itself but
were known to be very popular search terms, in order to drive up the
"hit counts" on a site .
<head>
<title>Bank of California</title>
<meta name="keywords" content="beer diet cats dogs fun Mel Gibson
Julia Roberts" / >
</head>
Anyone still using meta keywords as a major strategy for search engines is
probably in need of a refresher course on how modern search tools work.
Wise use of meta tags won't harm your rankings with the search tools, but
abuse of meta keywords will likely trigger an alarm in the search indexing
software, which will subsequently drop your site to the bottom of the
relevancy rankings even if it was otherwise a very relevant site . Search
engine programmers don't like people messing with them...
3. Keywords, or search terms, is a descriptive label for the words a person
uses to conduct a search: the terms you use to ask a question.
Keywords are the most important part of a search, and the first thing to check if
the search is not working. For example, if you're looking for information on Collie,
a type of dog, which of the search terms below would you select?
Dogs
Lassie
Hamsters
Collies
Too broad
Too narrow
Not relevant
Good search term
It is true that a
collie is a type of
dog, but using
"dogs" as a
search term
means that we
will get
information on all
kinds of dogs
even if they are
not collies.
Yes, Lassie was a
collie, but if we
use this as a
search term we
will only get
information on a
specific collie.
You might be
wondering, "what
do hamsters have
to do with
collies?" Believe it
or not, many
people use search
terms that are not
related to their
questions.
In this case,
"collies" is the
best choice for a
search term.
(By the way, don't blame me for this example. It's borrowed with permission from
Pamela Wilkins, a former librarian and instructor at South Seattle Community
College. I don't know if that means someone searched the SSCC library for
hamsters when they wanted information about collies. Anything's possible.)
It's often necessary to select more than one search term or keyword to perform an
effective search. For example, someone looking for information on golf clubs for
kids might need to come up with more than one keyword. The best way to do this
is to dissect the question and make a mental list of possible keywords.
golf
clubs
kids
golf, sports, game,
tournament, pro
clubs, sports equipment,
putters
kids, children, boys,
girls, beginner, amateur,
golfer
First, eliminate any keywords that are not relevant or that might confuse the
results. Next, select the keywords that are not too broad or narrow. Finally,
arrange the keywords in order of the most importance. The keywords selected for
this example were golf, clubs and children.
Step two: building a search query
A search query is a fancy name for the request or question submitted to a
search engine. Once keywords are chosen, it is time to tell the search engine
exactly what type of information is being sought.
A search engine is only as good as the query you submit . A crummy query will
retrieve crummy results. The commands described below can make your queries
more precise than keywords alone.
Boolean
One of the most effective ways to search any database is to use Boolean logic.
Developed by the British mathematician, George Boole, Boolean logic refers to a
logical relationship between search terms. Don't go all math-phobic on me, this
isn't that bad. Boolean logic consists of three logical operators: And Or Not.
Boolean can be used with many different search engines and is an excellent way
to perform an effective search.
dog AND cat
dog OR cat
dog NOT cat
Information with
both the words Dog
and Cat
Information with
either the words Dog
or Cat
Information with
only the word Dog,
without the word Cat
Fuzzy Boolean
Many search engines also use an easier form of Boolean called Fuzzy Boolean.
(No, that's not the name of a drink or a rock band--at least not as far as I know.)
There are only two logical operators + - in Fuzzy Boolean, but in many cases it
can be just as effective as Boolean.
+Dog
-Dog
+
-
The + sign says that no matter
what information is available, the
information must have the word
Dog.
The - sign says that no matter
what information is available, the
information must not have the
word Dog.
Phrases
Sometimes it is best to express the search query as a phrase . Enclosing the
keywords in quotations defines a phrase. Whenever possible all phrases should be
put in quotations. For example, the following keywords are best expressed as
phrases. "Stephen King " "Date Rape" "Cab Driver"
"Cab Driver"
cab driver
Searches for the cab driver as a
phrase in the exact order
specified.
Will retrieve information with the
words cab and driver in any
order.
Truncation or wildcards
Sometimes words have more than one possible ending. Medical information might
also be listed under medicinal, medicine, or medic. Rather than using four
different search terms, we can use truncation or wildcards to represent the
different endings. Truncation or wildcards are usually represented by the asterisk
symbol * and usually can not represent punctuation or numbers.
Medic*
Will retrieve the same information as listing the words Medical,
Medicine, Medicinal, and Medic.
Other Search Commands
Many search engines have special commands that allow you to perform even more
complex searches. If a search does not yield the desired results, check the search
engine's help pages to learn about its specific advanced commands.
Yeah, right. Nobody reads instructions. Do it. A couple of minutes reading on Alta
Vista's help pages can turn you into a much more powerful online researcher.
Step three: evaluating search results
Once the search query has been constructed and submitted, it is time to evaluate
the results. Most search engines generally list hits (items that match the search
query) based on relevancy. Relevancy is the percentage of how well a Web page
matches the search query. Some search engines will only give the top fifty hits
returned by a query; others will give all the hits that matched. Sometimes this
number can be very large, even reaching into the millions. There are three main
things to look for when evaluating search results.
1. If you don't find what you are looking for in the first two pages of results, try
using a different query. Most likely you need to choose different keywords.
2. Look through your results for other keywords that might help further narrow
your search. For example, if your search on "sewing careers " brings up
results with the word seamstress, then you might include "seamstress" as a
keyword.
3. Look for keywords you may want to exclude. If you are looking for
information on tigers, but your results include hits about Tiger Woods you
may want to exclude the keywords "woods" and "golf". (Or maybe just
exclude the word "golf"; if the tigers you're search for are forest-dwelling
animals you might not want to exclude "woods".)
As the bottom dropped out of the dot-com economy, search engines have had to
turn to new ways to make money. One of these is sponsored links. In this case,
an advertiser pays the search engine money in return for appearing higher up on
the search results. The various search engines show a varying amount of integrity
in clearly differentiating the results that are at the top based on relevancy vs.
those at the top based on how much money someone paid for the spot.
Try entering our president's name as a query on several search engines. You'll
typically find things for sale prominently displayed--those are paid placements. It's
not as bad now as it was in a few years ago, where most search tools indicated
you could buy George W. Bush on eBay. (Cynical as I might be about
government, that seemed a little too blatant to be true.)
Step four: rebuilding a query
If, after performing all three steps, you have not found what you are looking for,
go back to step one and rebuild the query. The first few searches may seem
awkward and slow . Don't be discouraged. With a little practice, searches become
faster and more precise.
Remember, checking the "help" link on a search engine can give you lots of
information on restructuring a query so it will get you the best possible results.
Previous | Next
Search engines and search engine resources
AltaVista (strong advanced query
options)
http://www.altavista.com
Ask.com (uses natural language
queries)
http://www.ask.com
All The Web (vies with Google for the
largest number of sites indexed)
http://www.alltheweb.com
Bing.com (Microsoft's newest search
tool, marketed as a "decision engine,"
includes a number of extra features.
"Because It's Not Google" is not really
the acronym.
http://www.bing.com
Google
http://www.google.com
MetaSearch Engines
Not to be confused with META tags, a MetaSearch engine is a search engine that
searches several other search engines at once, and returns the results to you.
Some, such as Dogpile, separate the results by search engine; others weed out
duplications and return all results by relevancy.
Clusty (organizes results into clusters,
formerly Vivisimo)
http://clusty.com/
Dogpile
http://www.dogpile.com
SurfWax
http://www.surfwax.com
MetaCrawler
http://www.metacrawler.com
Just plain cool
Some people prefer a more visual experience.
The Brain (an
information organizer
that branched into
searching, now a
download (used to be a
Website), requires Java)
http://
www.webbrain.com/
KartOO (visual meta
search engine, requires
Flash player)
http://kartoo.com/
TouchGraph Google
Browser (requires Java)
http://
www.touchgraph.com/
TGGoogleBrowser.html
Search engine resources
NoodleQuest
Assistance in choosing the right search
tool. Developed by research librarians.
http://www.noodletools.com/
noodlequest/
Research Buzz
Tara Calshain's excellent blog about
search engines.
http://www.researchbuzz.com
Search Engine Watch
Danny Sullivan's comprehensive site
about the search engine world.
http://www.searchenginewatch.com
Lodestone
Lara Fabans' blog often offers white
papers on search engine optimization
(SEO), SEO copywriting, and more.
http://lodestone-cs.com/
Web Position
Search engine optimization software
site, but also has good information
about building sites that work well
across the major search engines.
http://www.webposition.com/
Link Popularity Checker
Link popularity (how many sites link to
http://www.linkpopularitycheck.com
yours) is often used by search engines
to rank search results.
Search.com voyeurism
See a random sample of what other
people are searching for right now.
http://www.search.com/top?ref=sr
Previous
Illustrated, step-by-step demonstrations of
how to use an FTP program to transfer files to
a server
Web-based FTP with UnlimitedFTP (http://myftp.utechsoft.com/)
UnlimitedFTP requires Java. If you're at a computer that won't let you use it,
use Web-based FTP with net2ftp instead
Filezilla for Windows, Linux, Mac OS 10.5 and above
How to use Filezilla* (Flash movie, broadband recommended)
How to install Filezilla Portable* (Flash movie, broadband recommended)
Many publicly available computers, including the ones on the SSCC campus, do not
have a dedicated FTP program installed. A clever workaround is to install Filezilla on
a thumb drive and use that to transfer files.
* Special thanks to Clive Woodhouse for creating and sharing the Flash-based Filezilla
tutorials.
Freeshell.org
Already got this set up? Skip down to "Regular file transfer tasks" if you just need a
reminder of what to do to move files around.
These screen captures are from a free site hosted at Freeshell.org. For an FTP client , I
am using the free UnlimitedFTP Web-based FTP service at http://myftp.utechsoft.com/
myftp/, since I know it will work, and look the same, on pretty much any computer, with
the added benefit that it will save my site settings.
Remember that the UnlimitedFTP Website is nothing but a file transfer tool. It does not
store your files, it just helps you copy them between a Web server on the Internet and
your computer.
One-time setup
Before doing anything else, you will need to register with the site. You may pick any
login ID and password you like , just make sure you remember them.
After you have submitted the registration, wait till they email you a confirmation link to
click. Once you have that, you can log onto the UnlimitedFTP tool.
1. First is a one-time task, setting up the site information so you can easily connect
with your Website. Begin by clicking "Create a new FTP connection " on http://
myftp.utechsoft.com/myftp/ after you have logged in .
Fill in the fields in the file transfer protocol (FTP) client.
Click "Save site", and the server connection information should now be saved.
Regular file transfer tasks
These are the steps you'd take whenever you need to copy a file to or from your Web
server.
1. Log onto to the file transfer tool at http://myftp.utechsoft.com/myftp/, and click the
site you set up earlier.
If you get a security prompt for whether or not to trust this site, click "Trust". (This
probably won't happen every time you connect; it depends on computer setup.)
2. If you are a Freeshell.org user, connecting by FTP will automatically put you in
the html directory on the server. Double-click a directory name to get to its
contents.
3. At this point it should look and work pretty much like any other FTP client covered
in our notes.
The left side of the screen shows files on your local computer (just like
Windows Explorer and similar programs do); the right side is showing files on
the Web server.
Drag files from one side to the other to copy them between the two places.
Use the "MakeDir" buttons to create a new directory, the "Rename" buttons to
rename a highlighted (selected) directory or file, and the "Delete" buttons to
delete whatever's highlighted.
To know more about how this tool works and what it can do, click the "Help"
button.
4. Click the "Logout" tab at the top when you're finished.
Freeshell.org
am using the free Web-based FTP service at http://www.net2ftp.com/, since I know it
will work, and look the same, on pretty much any computer.
1. First, fill in the fields in the file transfer protocol (FTP) client.
2. Connect to Freehostia and choose what you want to do (usually upload a file or
create a directory
3. Upload your chosen files onto the Web server.
4. Log off when you're done moving files around.
An illustrated guide to using Filezilla for
FTP'ing files to a site on Freeshell.org
These screen captures are from a free site hosted at Freeshell.com. For an FTP client , I
am using the free open-source Filezilla client, available from http://filezilla-project.org/
for Windows, Linux, and newer Macs (OS 10.5 and above).
The advantage of FTP client software is it can remember your login, password, site
address, directory name, etc. The disadvantage is that we don't have it here on campus,
and even when we did, you wouldn't want it to remember your login information since
these are shared computers.
Filezilla undergoes constant updates, so the screen shots here probably will not be an
exact match to what you see. Consult their help files if you have trouble figuring out
where something is that's not exactly as shown here--the user interface changes but the
concepts remain the same, so it should not be difficult to look up.
There are two parts to these instructions: initial setup, and then how to use it .
One-time setup instructions for home use
1. Filezilla and, from the File menu, choose "Site manager".
2. Set up a new site , named for the URL (domain) you received from your Web
provider (freeshell.org, for most of you).
3. Using information from the setup email sent when you registered with Freehostia,
fill in the fields in the file transfer protocol (FTP) client. When you have it all filled
in, click "Advanced".
4. In the "Advanced" section, use the browse button (to the right of the local directory
box), browse to and click on the directory on your computer that contains all your
files. Select "Passive FTP" for most Website hosts. (If you can't get it to work, then
try deselecting it.) Select "OK", then click "Save and exit" to ensure that your
settings are saved.
5. From the "File" menu, choose "Site manager". (Yes, again.)
6. Pick your site name from the available sites, then click "Connect".
7. Use drag and drop to upload your chosen files onto the Web server. The screen on
the left shows directories and files on your computer. The screen on the right
shows what's on the Web server.
Basic xHTML
HTML / xHTML
The core of the Web is a structured coding language. That langauge is the heart of
what you will learn in this class.
All html tags are inclosed in greater-than and less-than signs (< and >). Every
xHTML document has a head and body. The body houses all the information that
is displayed in the browser window and the head of the document houses
information for the browser software about the document itself (title and meta
tags, for example).
HTML, or Hypertext Markup Language, is coding language used to create Web
documents. A Web browser reads the HTML and translates it into the Web pages
seen on a computer screen. Understanding HTML is the key to learning to create
Web pages. XHTML is an acronym for "eXtensible HyperText Markup Language", a
reformulation of HTML 4.0 as an XML 1.0 application . XHTML provides the
framework for future extensions of HTML and will likely to replace HTML in the
future. Although we talk about HTML in this class, what we learn is mostly
XHTML--it's just that "HTML" is easier to say (and spell).
<!DOCTYPE html PUBLIC "-//
W3C//DTD XHTML 1.0
Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://
www.w3.org/1999/xhtml">
<head>
<title>Title of Document</
title>
<meta http-equiv="contenttype" content="text/html;
charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">
<h1>Hello</h1>
<hr / >
<p><span style="fontface:Trebuchet MS, Arial,
Helvetica, sans-serif; fontsize:12pt">This is a basic Web
page. </span></p>
</body>
</html>
Critical things to remember about xhtml:
All the code inside < > should be lowercase.
All xhtml files are purely text files (ie text only) and should be saved as text
only with a .htm or .html extension , no spaces and no capital letters or funky
symbols such as @, $, &, etc..
Every tag that you open has to be closed.
Be hyper-aware of what you are saving, where you are saving it, and when.
When you are writing code for the Web, you will usually have three
applications open at one time: an an application to edit the xhtml, and a
couple of browsers.
Why the Web is not print
A Website or page is never really complete, it is a living, evolving document and
should be treated as such
A Website will never look the same to everyone, due to Web design variables. Be
aware that these variables (covered throughout the course) make it almost
impossible to please everyone. As a good Web coder, however, your job is to
make the work you are coding look the best to the majority of your viewing
audience.
Viewing Web files
You can view Web files locally by opening them in a Web browser. You can only
view Web files over the Internet if you upload them to a Web server somewhere.
The HTML code for any Web page is easy to see. Select the "view" command on
the browser's menu bar and choose "page source".
Viewing the source in Internet
Explorer
Viewing the source in Mozilla/
Firefox
Or, right-click the mouse over any text on the Web page, and choose "view
source" from the pop-up menu. (Macintosh users would, of course, control-click to
get the pop-up menu.)
Next section
Writing xHTML
The easiest way to write xHTML is to use a basic text editor. Text editors are
simple programs that allow one to write and edit--guess what--text. Basic text
editors that work well for writing xHTML include Notepad, Notepad++, or
Notepad2 (Windows), Pico (Unix and MacOS X; a Windows version exists),
TextWrangler (Mac), Gedit and Gnotepad Plus (Linux). One step beyond,
specialized HTML editors, text editors with toolbars and features specific for
writing xHTML code, include HTML-Kit (Windows). TextWrangler (Mac, noted
above) is arguably in this category as well; it has a lot of Web-specific items in its
menus. Many basic text editors and HTML editors can be found for free or cheap
at Shareware.com, http://www.shareware.com or Tucows, http://
www.tucows.com/.
Microsoft Word, Word Perfect, Open Office, and other word processors are an
awful choice for creating xHTML documents. Word processing programs do horrible
things to xHTML code. In fact, in Microsoft Word, the industry-standard word
processor, the "save as HTML" feature is so infamous that Macromedia
Dreamweaver, arguably the industry -standard Website authoring tool, has a toplevel menu pick named "Clean up Word HTML". Linux programmers, never ones to
mince words, created a utility called "De-moronizer", to do the same thing.
There are many different software programs such as Macromedia Deamweaver
that allow one to create Web pages without knowing xHTML. These software
programs are called HTML editors or WYSIWYG (pronounced wis cee wig), which
stands for What You See Is What You Get. Among the free ones, it's hard to go
wrong with the Mozilla Seamonkey suite (http://www.mozilla.org/). Mozilla creates
Firefox, an open-source browser previously mentioned in this class. (The browser
as a stand-alone product is called Firefox, whereas the Mozilla Seamonkey Suite
contains the browser, an impressive email client called Thunderbird (for folks
interested in switching from the more virus-prone Outlook or Outlook Express),
and a quite passable WYSIWYG xHTML editor.)
Veteran Web Designers often use a WYSIWYG to assist them in creating large or
complex Web sites. When you're a veteran Web Designer creating a complex site ,
you may choose to do that, too. Not for this class, though--stick with basic xHTML
and a text editor. (That's a requirement, not a suggestion .)
If you don't have a basic knowledge of HTML, you can only do what the WYSIWYG
lets you do. Worse, those tools are prone to making mistakes in the code, and
when you need to fix something, the WYSIWYG might not be able to help. If you
have a basic understanding of HTML, you should be able to figure out many
problems you might encounter with your Web pages.
Besides, most WYSIWYG editors are really WYSINRWYG (pronounced wis singer
wig), which stands for What You See Is Not Really What You Get). There's no
substitute for testing on lots of browsers on lots of different computers with
different operating systems, screen resolutions, etc.
Previous | Next
The xHTML tag
The xHTML tag is the essential element in xHTML. Every xHTML tag is made up
of < (an opening angle-bracket), > (a closing angle-bracket), and a tag name .
Many tags also contain an attribute and its value. (Don't trip over the "attributevalue" language just now, we'll cover it in a bit.) The HTML tags give the browser
instructions for what a Web page is supposed to look like--the appearance and
function of the content (text and graphics).
Generally, the tag name is an abbreviation for the tag's function. For example, the
tag to make a paragraph is:
<p> text </p>
Attributes are added within a tag to extend or modify the tag's function . For
example, <span> is a tag that sets aside a piece of text so you can make
changes to it. The attribute style can be added to change the size of the font:
<span style ="font-size:12px">text</span>
Most attributes are equal to a value, which is the part that follows the equal sign .
In the example above, the tag is <span>, the attribute is style and the value is
"font-size:12px". The value establishes to what degree the attribute is
represented. The value should always be enclosed in quotation marks. Might as
well get in the habit of doing it right now.) A single tag can have multiple
attributes, but each attribute can only be repeated once:
<a href="filename.html" id="link1">text</a>.
<tagname attribute ="value">
Previous | Next
Container tags vs. standalone tags
Most HTML tags are container tags: they have a start tag and an end tag. The
content (the text that is being affected by the xHTML code) goes in between the
two tags. In almost all cases, the end tag will be the tag name preceded by a /
forward-slash. Think of the / as an off-switch for your tag. Attributes and values
are not included in the end tag.
<tagname attribute ="value">content here </tagname>
There are several tags that do not have end tags. These tags are called standalone tags. Generally, they do not control text ; they insert something into your
document. For example, the tags for a horizontal rule <hr />, image <img /> or
line break <br /> all insert something into a document and do not control text .
These standaone tags are closed via a space and a forward -slash: <hr />, <br />,
<img />, etc.
Remember: xHTML uses forward-slashes, NOT backslashes. This ain't DOS
class, folks.
Previous | Next
Nesting xHTML tags
xHTML tags can be applied to content already within an xHTML tag. This is called
nesting. When nesting tags, it is important to remember to work inside out when
preparing tag order. The first tag to open should be the last tag to close.
<1><2><3> text </3></2></1>
<strong><span style="font-size:24pt"><em> text </em></span></
strong>
It helps to think of nesting with a physical model like walking into a room. You
walk up the stairs, open the door, enter the room, turn on the light, walk to the
desk, sit, and turn on the computer . To leave, you cannot walk down the stairs,
close the door, leave the room , turn off the light, walk to the door, stand, and
turn off the computer! You have to undo your actions in the opposite order of the
way you did them on the way in : turn off the computer, stand up, walk to the
door, turn off the light, leave the room , close the door, and walk down the stairs.
Let me repeat that in nice bold letters in case you were sleeping: The first tag to
open should be the last tag to close.
Previous | Next
Tags for document structure
The basic structure of every xHTML document is defined by four tags, <html>,
<head>, <title>, and <body>. These tags are arranged into the basic xHTML
document as shown below:
<!DOCTYPE html PUBLIC "-//
W3C//DTD XHTML 1.0
Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://
www.w3.org/1999/xhtml">
<head>
<title>Document title</title>
<meta http-equiv="contenttype" content="text/html;
</head>
<body>
Contents of document
</body>
</html>
xHTML documents, just like people, are divided into two major parts, the head
and the body. In xHTML, just like in life, you only get one head and one
body.
The <head> contains information about the xHTML document. The most common
tag found in the head is the <title> tag.
The TITLE appears in the top bar of the browser window interface, and in most
operating systems it also shows up in the taskbar.
Some modern search engines pay more attention to the contents of the title
tag than they do to anything else on the page, so it's important to have a
concise, descriptive title tag.
The TITLE is also essential for the software used by disabled computer users,
and is relied on by the user interface in almost all computer systems.
Do not fail to have a concise, descriptive title tag for documents you create
for this class. Otherwise, it'll cost you.
The body of the document is indicated by the <body> tag. The actual contents
of the document--all the things that appear within the browser window-are contained within the body. The body tag can actually take a few attributes
and values, but we're not going to study those in this class because there's a great
deal more that can be done via Cascading Style Sheets (CSS). When we study
CSS, we'll learn how to assign colors, fonts, etc. to everything within the body
container.
Previous | Next
Checkpoint, basic xHTML, tags for document structure: Set up a
template file as per the instructions. Create a new file based on it. (See
Working in the shell account for instructions.) The template should include
the tags for document structure as noted in this section , thus saving you
some work. Put your name as the contents of the title container, then
repeat it again as the contents of an <h1> container at the top of the page
body. Add in a <p> container with a sentence or two about what you might
pick for your class project. (Don't panic; you can change your mind later.)
Saving xHTML documents
Microsoft Windows users: When saving xHTML documents in Windows' Notepad
program, pay careful attention to the format into which the document is saved.
Select "save as" from the file menu. Save all html documents as text -only* (or
Text Document, as in the screen shot below).
Always add the extension .html to the file name. (Everyone, not just Windows
users.)
Never include spaces in the file name of an html file.
Give xHTML documents descriptive but short names. The file name will become
part of the URL. Therefore, it is wise to make sure that the name is short and
simple, all lower-case (preferably), without any spaces in the name, and that it
contains no unkind words about your boss. The _ underscore symbol can be used
to connect names together but remember when a file name is underlined (such as
in a Web page link), an underscore symbol may be hard to see .
* saving files as "text-only" or "text document" is doubly important if you're
working with older versions of Windows, which will otherwise append a .txt
extension on your file (making it page.html.txt, for example). This will
force the browser to display the code instead of the rendered html, and will
leave you wondering what you did wrong. Worse, since Windows by default
hides the file extension, it's hard to figure out what went wrong. Refer to
the week one foundation information for instructions on how to change
Windows so it'll display the file extensions; this will save you a lot of grief in
this class.
Once a file has been saved as an xHTML document, it can be viewed using any
Web browser. Open the file menu of the browser, select "open" and find the file.
Any text or content within the <body> tags should be visible.
Every time you add text or more code to the xHTML file, save the document and
view it again on the browser. It is not necessary to close the text editor and open
the file in a browser each time you make a change to the code; that's why
operating systems have windows. Once the file is opened in the browser, click the
"refresh" or "reload" button to view additional changes. Provided you have saved
your xHTML code, the refresh will reflect any new changes. If the changes don't
show up in the browser, try holding down the "shift" key and clicking the "refresh/
reload" button.
Pressing "Reload" in
Firefox or "Refresh"
in Internet Explorer
will reload the page
again from the
saved file or server.
It is important to
reload the xHTML
file every time you
make and a save a
change to the
xHTML code.
Previous | Next
Checkpoint, basic xHTML, saving xHTML documents: Save this file as
an html file as noted here, using the file name "index.html". Open it in a
Web browser and see how it looks. Edit the file (using the editor, not the
browser) if necessary.
Tips for writing good xHTML
Writing xHTML code can be a very complex and detailed-oriented process. A single
misplaced quotation or misspelled tagname can cause an entire Web page not to
function. Pay careful attention to writing out the xHTML correctly.
Spell-check and grammar-check your content. Good xHTML is useless if the
content's not also good, and no matter who gave you the imperfect content,
the Web Developer is the one who gets the blame if it goes online. Word
processing programs like Microsoft Word, and Web editing programs like
Dreamweaver and HomeSite have spell-check. Use it. Your best bet is
ALWAYS a friend or classmate or colleague. Put nothing online that's not been
proofread by at least one person you trust.
Bad things can happen if you don't heed these instructions to check your
spelling and have your work proofread . The hilariously badly translated
introduction to the"Zero Wing" game has become an Internet legend, All
Your Base Are Belong To Us. It's funny, unless it happens to you. So,
remember, if you don't want to become the latest laugingstock of the
World-Wide Web, proofread.
Many people (and computer programs) think that capitalizing tags and
attributes makes them easier to read and more distinguishable from regular
text. However, Extensible Markup Language (or XML), coming into more and
more use, and xHTML like we use in this class, both require lower-case tags
and attributes. YMMV: your mileage may vary.
Browsers ignore line breaks, multiple spaces and tabs, so use them to make
your code more legible.
Keep file names short, and always make them lowercase. This keeps you
from having to second-guess file names when you begin to link files together.
Do not use spaces in file names.
Do not use spaces in file names.
Do not use spaces in file names. Got it?
Use the comments tag  to make notes to yourself
about design, content or other information for writing your page. The
comment tag is only visible in the HTML code and will not be displayed by the
browser.
Validate your code
Valid xHTML code is important. It assures you and me that you are coding using
compliant code that won't cause the world to be spoilt . An organization of Web
people from the W3C (World-Wide Web Consortium, http://www.w3.org) develops
different "flavors" of html code as the spec evolves and changes.
In order to validate code, you have to tell the validator what "flavor" you're
working with. That's part of why we add the top snippet of code to our xhtml --so
the validator knows what spec to check the code against.
If the validator finds problems, you can fix them before you turn in your
assignment.
The code
To review what we covered in week one, always add the following code to the
very beginning of your xHTML file, to ensure that an xHTML validation knows what
rules it's supposed to validate against. This should appear before the opening html
tag, as shown. It is easiest to cut and paste this into your work; it is difficult to
type. You will not be required to memorize this code for any tests but you should
include it on all xHTML documents before you turn them in.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<head>
<title>Title of Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
(content goes here)
</body>
</html>
The Process
Go to http://validator.w3.org/ and scroll down to "Validate by File Upload" (as
shown below), click "browse" and locate your assignment. Then click "check". The
results will be displayed in the browser window. They are occasionally clear and
precise and might say something like:
Line 9, column 103 : there is no attribute "BORDERCOLOR"
Which essentially means you've used an attribute that is not supported. Other
times you might not understand the results (depending on the error ). In that case,
you can bring them to class , copy and paste them into the Q & A discussion
section of the class Web site or include it in your assignment.
Firefox extensions
One of the greatest things about the Firefox browser is "Extensions", which are
downloadable add-ons that give the browser extra functionality. Of special
relevance to this course are "HTML Validator" and "Total Validator", both of which
build xHTML valdiation directly into the browser.
HTML Validator:
Total Validator:
Install it on your own computer and look on the bottom right side of the status
bar; you'll see this symbol. Click it and it'll check your code for errors. It'll
probably report a hundred of them, most of which you clear up with a single
change. Validation tools aren't perfect.
or
Appearances within your own Web browser will likely be slightly different from
these screen shots.
Google Chrome and Apple Safari, by the way, have very nice validation tools
already built into the browsers.
More Firefox add-ons are discussed in the background materials, for those of you
who are interested.
Previous | Next
Formatting text using xHTML
If you have ever used word-processing software, selected a string of text and then
underlined it or made it bold, you have formatted text. The options available to
you in xHTML are much like the ones you would find in any standard wordprocessing software. By using the appropriate tags and attributes, you can control
the size, font, color and style of text in your Web pages.
Headings are displayed in bold text with line breaks and an extra space above
and below the text . The size of the heading is established by the numbers 1-6.
<h1> is the highest priority (hence the largest) header, <h6> is the lowest
priority and is usually smaller than normal text. It is easy to mistake the number
associated with headers as attributes. This is incorrect. The numbers associated
with headers are actually part of the tag name. Because of this, they must be
included in the closing tag.
<h1>This is <h1></
h1>
This is <h1>
<h2>This is &gl;h2></
h2>
This is <h2>
<h3>This is lgt;h3></h3> This is <h3>
<h4>This is <h4></
h4>
This is <h4>
<h5>This is <h5></
h5>
This is <h5>
<h6>This is <h6></
h6>
This is <h6>
Knowledge bonus: notice that the secret ASCII code for angle-brackets (< for <,
> for >) had to be used here, to keep the browser from seeing <h1> and
trying to interpret it rather than just showing you the characters on the screen.
Text on a page, including headings, can be used with the style="text-align:
left" declaration to control their alignment a Web page. This style declaration can
be set to align headings either left, right or center.
<h2 style="textalign:right">Hello</h2>
Hello
The font, basically the text characters in a document, can be controlled by using
the style attribute of the <span> tag.
The color attribute allows control the
color of the font. The value for this
attribute will be a color value. In this
example, I used the color value for
red, which is #FF0000.
<span style
This color grid, from Web color expert
="color:#FF0000"> Lynda Weinman, has a chart that
shows all the Web-safe colors and
their hex values, so you can pick some
colors to experiment with. (We'll
discuss color in more depth later on in
this course.)
The font-family attribute allows control
of the style of the font. One can
specify any font they want, but it will
only be displayed if that font is
actually on the user's machine. More
than one font-family can be specified,
multiple faces are separated by a
comma, the browser will display the
first one available.
<span style
="fontfamily:typeface">
On a Windows computer, the default
sans-serif font is "Arial" and the default
serif font is "Times New Roman". On the
Macintosh, the default sans-serif font
is "Helvetica" and the default serif font is
"Times Roman".
If, for example, you wanted the user
to see a sans-serif font, you could use
this container:
<span style ="font-family:Arial,
Helvetica, sans-serif">This text uses a
sans-serif font.</span>
A Windows computer would display
the text using the Arial font, a Mac
would display it using the Helvetica
font, and a computer that had neither
of those fonts but had a browser
inclined to honor the tag would display
using the system default sans-serif
font, whatever that may be.
<span style="fontsize:value">
Size can be controlled using point size
(12pt), pixel size (12px), or the user's
default type settings (1em = default,
1.5 em would be half again as big,
etc.) EM is preferable, but pt and px
are better-supported across ancient
browsers. Px seems to give the most
consistent appearance.
<span style ="color:blue; font-family:Georgia; font-size:32px">Hello Hello
Hello</span>
Hello Hello Hello
You can assign a style to an H1 to change its looks, too. This gives you additional
control over how the page looks, but still takes advantage of assigning important
text to heading-level instead of paragraph-level. It's important to keep headings
inside heading tags, even if you're using CSS to change how the headings look.
Why is that important? Some search engines give greater emphasis to the text
that's in an <h1> heading, as does text -reader software used by visually impaired
people.
<h1>An H1 without additional style </h1>
Hello
<h1 style ="color:blue; font-family:Georgia; font-size:1.4em">An H1 with
additional style</h1>
An H1 with additional style
Use <span> to change the looks of text within part of one paragraph or heading;
use <div> to change multiple paragraphs or headings.
Use span for part of a paragraph
<p><span style="font-size:3em">H</span>ere is a paragraph with a span to
change part of it.</p>
H
ere is a paragraph with a span to change part of it.
Use div for multiple paragraphs
<div style="color: navy">
<p>Here are lots of paragraphs in a row.</p>
<p>And they're all navy-blue.</p>
<p>Except for the <span style="color:green">green</span> word.</p>
<p>How cool is that?</p>
</div>
Here are lots of paragraphs in a row.
And they're all navy-blue.
Except for the green word.
How cool is that?
There is an older method of changing the appearance of text, the <FONT> tag. It
is considerably more limited than what we're learning to do. We don't use the
<FONT> tag in this class, we use <span style > and other CSS options . The FONT
tag has been deprecated, which means among other things it's going to be
eliminated from the next set of HTML specifications. Please do not use the FONT
tag in this class; if I see it I will take it an an indication that you haven't learned
anything since 1999 and have not been paying attention.
Previous | Next
Checkpoint, basic xHTML, formatting text using xHTML: Add a leveltwo heading (h2), called "Assignments".
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) are newer than HTML, and can be used in
conjunction with it to make dramatic changes in how Web pages look.
There's a good reference on CSS at http://www.webreference.com/authoring/
style/sheets/
Style sheets are composed of CSS rules. A rule consists of two main parts: a
selector ('h1') and declaration (' color: blue'). The declaration has two parts,
property ('color') and value ('blue').
h1 { color : blue }
Selector { property : value }
This is not too different than HTML, in which we have tags, attributes , and values.
HTML
TAG
< img
ATTRIBUTE =
VALUE
align
= "right"
src
= "photo.jpg" >
CSS
SELECTOR
DECLARATION
PROPERTY :
h1
{ color
font-size
VALUE
: blue
;
: 18pt
}
You can group style rules with the semicolon. Place the entire declaration between
curly-brackets.
There are three ways to apply CSS: locally (within part of a page, or inline),
globally (across an entire page), or linked (across multiple pages, or site -wide).
We've already been using CSS locally to format text.
Local (inline) CSS
(Specific to one tag in a page, uses the STYLE attribute)
You can include a style attribute in div and span elements. The block-level div
element is used to enclose a division (chapter, section, etc.) of a document that
you want to give a distinctive style. The span element is generally used within
paragraphs. (Remember, block-level items, like <p> and <h1>, start and stop on
a new line.)
<p><span style ="font-size: 30px">T</span>his is a drop cap
using the STYLE attribute to the SPAN tag.</p>
This is a drop cap using the STYLE attribute to the SPAN tag.
The <div> tag vs. the <span> tag
SPAN is small. Use it only to select a small chunk of text like a letter, word,
phrase, or sentences:
inside a <p></p> container,
or a <li ></li> container (these are list items; we'll cover them in a bit),
or a heading (h1 through h6) container.
For anything bigger than that (such as more than one paragraph, an entire list, or
a whole page), use <div>.
The <div></div> tag by itself doesn't do much of anything other than identify a
block of a Web page. (A block is an area that begins and ends on a separate line.
The <p></p> tags are the most common example of a block tag.) However, you
can encase multiple tags (including several <p></p>'s) within one <div></div>
and assign an attribute and value. For example :
<p style="text-align:center">Here is some text</p>
<p style="text-align:center">And more text</p>
<p style="text-align:center">And still more</p>
could also be written :
<div style="text-align:center">
<p>Here is some text</p>
<p>And more text</p>
<p>And still more</p>
</div>
<div> is especially handy when you're using Cascading Style Sheets. You can use
<div> to assign font face, color, size, etc. to a whole chunk of the document, just
once, and not have to mess with repeating the same tag throughout a document
the old-fashioned way people who still use the FONT tag would have to (see
below):
instead of
typing all this:
<P><FONT FACE="Arial">One</
FONT></P>
<P><FONT FACE="Arial">Two</
FONT></P>
use
<P><FONT
DIV:
FACE="Arial">Three</FONT></
P>
<P><FONT FACE="Arial">Four</
FONT></P>
<div style ="fontfamily:Arial">
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
</div>
This weakness is part of why the FONT tag is being removed from the HTML
specifications, and why we don't use it in this class.
However, using these inline styles in spans or divs still means you have to re-type
them every time you want them repeated . Because CSS offers much better ways
to write a style once and apply it many times, the only time you should ever use
an inline style is for a one-time event that you don't intend to do again on your
Website.
Otherwise, we use global or linked style sheets. Read on...
Previous | Next
Global (page-level) CSS
(Specific to an entire page, uses the STYLE element inside the HEAD)
It's no fun at all to have to repeat the same style over and over, in every
paragraph and heading, just to get the page to look the way you want.
You can use a short piece of CSS inside the <head> container to specify how you
want the text to look on an entire Web page.
<head>
<title>Style Element Example - with alternative fonts</title>
<style type ="text/css">
<!-body { background: white; background-image: url(mybackground.jpg) }
h1 { color: blue; font-size: 18pt; font-family: Arial, Helvetica, sans-serif;
font-weight: bold }
p { color: green;
font-size: 12pt;
font-family: Geneva, Arial, Helvetica , sans-serif }
a { text-decoration: none; color: red }
-->
</style>
</head>
Notice that html comment tag  that's nested immediately inside the
<style> container. What's that for? Older browsers that can't interpret the style
tag would just ignore it and print the code inside the tag directly onto the page.
Those older browsers will honor the HTML comment tag, though, so if the browser
cannot understand the <style> container it'll understand the comment container
and won't output raw code onto the page . Newer browsers see that opening
<style> tag, and know to interpret everything inside the <style> container as
CSS, not HTML. Those browsers will ignore the HTML comment tag nested inside
the <style> container, but will correctly parse the CSS. Clever, eh?
This example style sheet declaration in the <head> of the document sets all h1's
to blue and all paragraphs to green. It sets font size and family. The power of
global style sheets? One change to the CSS code in the <style> container, and
everything in the page changes.
Of course, the global style is resident in every page, so that's one change per
page. Wouldn't it be easier to do one change per SITE? Read on.
Previous | Next
Linked (sitewide) CSS
(Used across multiple pages, uses the LINK element)
The real power of style sheets comes when you link to an external file. The file
contains the same rules you'd normally place in the STYLE block at the top of a
page.
body { background: white; color: brown } /* "color" here controls the color
of the text on the page */
h1 { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; font-weight:
bold }
p { font: 12pt Arial; margin-left: 30px; }
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:active { color: yellow } /* active links */
Copy these rules into a new, completely empty (e.g. no xHTML ) file and name it
style.css. To link a page to this style sheet just place the following line in the
<head> element of the xHTML page. You should see some significant changes
when you reload the page in a browser.
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
In the LINK element the REL attribute defines the type of link. The
rel="stylesheet" is the key, it links the current page to the referenced file. The
beauty of linked style sheets is that you can change the look of thousands of
pages by changing one file. This is a big time saver for intranet or large site
webmasters.
Previous | Next
Checkpoint, basic xHTML, linked (sitewide) CSS: Open another
instance of the text editor (same way you opened it the first time), so you
have your index.html page open and can create another page. Create a
linked css page as described in this section, and save it as "style.css". Now
add the proper <link /> tag to the <head> container of index.html, also as
described here. Edit your current template file to include the <link /> to the
linked css page so it'll be automatically included in your new files.
Making space
Adding space on a page
Space is more than just the Final Frontier. White space on a Web page helps set
apart images and headers and makes text more readable. The spacing tags in
HTML can also be used to align various elements on a page to the left, right or
center of the screen.
Paragraphs and line breaks help to control the spacing in your Web document
and operate much like the carriage return on a typewriter or the "return" or
"enter" key on a keyboard.
The <p>, or paragraph, container tag <p> ...</p>, puts text into a container so
you can assign styles or make use of the of the align attribute (align=center, left
or right). A <p>...</p> container will place a space above and below the text .
<p style="text-align:
right">HTML is so much fun I'm
going to devote my life to it .</p>
<p style="text-align: left">Well,
not really; I just said that so I'd get
a good grade in the class.</p>
<p style="text-align:
center">When <em>what</em>
freezes over?</p>
HTML is so much fun
I'm going to devote
my life to it.
Well, not really; I
just said that so I'd
get a good grade in
the class.
When what freezes
over?
A line break <br /> will start text on the following line. Unlike the <p> tag it will
not add any additional space and can be used multiple times. Because the <br />
tag only inserts a break and does not format text, it is a stand-alone tag and does
not need an additional closing tag, just the trailing "/" slash.
Two useful tags for positioning text on the page are the <div> tag and the
<blockquote> tag. Both are block-level items, which means they can cover
multiple paragraphs or headings, but cannot be used nested inside a <p> or h1h6 container.
The <div>, or page division, tag allows you to move or align text, graphics
or tables on a page when combined with the align attribute and its values
(left, right or center). It also sets aside a block of the page so you can assign
some CSS to it.
Text enclosed in <blockquote> tags will be indented slightly from the
margins and displayed with spaces above and below, much like a paragraph.
Nesting multiple <blockquote> tags increases the indent.
<div style="text-align:
center">I am learning many
different ways to format text
in HTML.</div>
<blockquote>I am getting a
headache from all this.</
blockquote>
<blockquote><blockquote>
<blockquote>I am getting a
headache from all this.</
blockquote> </
blockquote> </
blockquote>
I am learning many different
ways to format text in HTML.
I am getting a headache
from all this.
I am not only
getting a
headache from
all this, I'm
feeling
claustrophobic.
Although not technically a spacing tag, the <hr /> (horizontal rule) tag can be
used to divide Web pages or set off titles and headers. An <hr /> will generally
be displayed as a shaded rule the width of the page and will always be on its own
line. Attributes can be used to control the thickness , width, shading and alignment
(although the results differ widely depending on the user's browser). Because the
<hr /> tag only inserts an element and does not format text, it is a stand-alone
tag and does not need an additional closing tag, just the trailing "/" slash.
Adding space in your code
Since a browser will ignore multiple spaces within the html code, you can use
indentations, blank lines, etc. to make your code easier to read.
Good
<head>
<title>Title of Document</title>
<meta http-equiv="content-type" content="text/html;
</head>
<body bgcolor="#FFFFFF">
<h1>Hello</h1>
<hr / >
<p><span style="font-face:Trebuchet MS, Arial, Helvetica,
sans-serif; font-size:12pt">This is a basic Web page. </
span></p>
</body>
</html>
Not
so
good
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Title of Document</title><meta http-equiv="contenttype" content="text/html; charset=iso-8859-1" /></head><body
bgcolor="#FFFFFF"> <h1>Hello</h1> <hr / > <p><span style="fontface:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:12pt">This is a
basic Web page. </span></p> </body> </html>
Both these examples will show up exactly the same in a browser. However, the
top one will be much easier for you to maintain (and for me to grade).
Programming instructors are pretty rigorous about demanding that you indent
your code. For hand-typed html in a basic text editor like Pico or Notepad, though,
all that indenting would be a nightmare, especially when you edit the code and
change the length of a line, thus requiring you to un-indent and re-indent
everything to make it line up. That could quickly lead to insanity on your part,
particularly if you've got some complex html going on.
For this class, I'm not requiring strict and consistent indentation in the code; I
just ask that you do what you can, within reason, to make your html code easy to
read. Web editing software will automatically handle the indentations for you, so
in future classes when you move on to working with that software, the indenting
issue becomes considerably easier.
Previous | Next
Making lists
Lists can help you organize and present information in xHTML documents. Various
list tags and their attributes allow one to choose from several different types of
lists in xHTML. There are three types of list, each with its own tag:
ordered (numbered) list <ol>...</ol>,
unordered (bulleted) list <ul>...</ul>, and
definition list<dl>...</dl>.
Each item in a list is separated by a line break and has a special tag to denote it
as a list item. Lists may be nested within a list, provided they are closed properly.
Ordered List
<ol>
<li>cat</li>
<li>dog</li>
<li>bird</li>
</ol>
<ol>
<li style="list-style-type:
decimal">cat</li>
lower-alpha">dog</li>
upper-alpha">bird</li>
lower-roman">walrus</
li>
upperroman">mastadon</li>
</ol>
1. cat
2. dog
3. bird
1.
b.
C.
iv.
V.
cat
dog
bird
walrus
mastadon
Unordered List
<ul>
<li>cat </li>
<li>dog</li>
<li>bird</li>
</ul>
<ul>
circle">cat</li>
In an ordered
(numbered) list, the
style declaration liststyle-type may be used
to specify decimal,
lower-alpha, upperalpha, lower-roman, and
upper-Roman.
cat
dog
bird
cat
dog
In a bulleted list, the
style declaration liststyle-type may be used
to specify disc, circle
and square (to display
different styles of
bullets). list-style-type
can also be used within
the individual <li> tags
to change the shape of a
particular bullet.
square">dog</li>
disc">bird</li>
</ul>
Definition List
<dl>
<dt>cat</dt>
<dd>a purring house
pet</dd>
<dt>dog</dt>
<dd>Man's best friend</
dd>
<dt>bird</dt>
<dd>a flying creature</
dd>
</dl>
cat
dog
bird
a purring house
pet
Man's best friend
a flying creature
In a list of terms and
definitions <dt> is used
to denote definition
term, and <dd> is used
to denote definition.
Previous | Next
Checkpoint, basic xHTML, making lists: Beneath the "Assignments"
heading, create a bulleted (unordered) list. For list items, you can use these
three items: Checkpoints, Project plans, Final project.
Making links
One of the really big deals about HTML is its ability to link relative information and
pages together using hyperlinks. The tag for linking things in a Web page is
<a>...</a> The <a> tag defines an anchor or place to be linked within a
document. The <a>.....</a> tag is almost never seen without one or more of
its accompanying attributes. On a Web page, a link is usually displayed as
underlined text and will take a user to a preset location when clicked.
The most commonly used attribute for an anchor tag is HREF, used to specify the
URL to be linked to. The text enclosed between the opening <a> and closing </
a> tags will be the clickable text.
Linking to a Local file
A local file, or relative URL, is relative to another
document. A local file appears as the file name and
extension, and can also include a directory.
<a href="filename.html">Name of Link</a> (link to a
file in the same directory as the page you're on)
<a href="ctn160/filename.html">Name of Link</a>
(link to a file in a subdirectory of the one you're currently
in)
<a href="../filename.html">Name of Link</a> (link
to a directory above the one you're currently in
<a href="../college/filename.html">Name of Link</
a> (link goes one level above the directory you're
currently in, then goes to a file inside another directory)
<a href="/archives/filename.html">Name of Link</
a> (the / (slash) at the beginning signifies the site root;
this link means go all the way to the very top directory and
then work your way to the desired file. Linking all files from
the / root makes it easier to copy pages into other
directories without breaking the links in them, but it also
means the links will only work on a Web server (e.g. not on
your computer).
If you're visually inclined, keep reading, there are pictures
below that show the same relationships.
Linking to an External File
An external file, or absolute URL, is a file existing on a
completely different server. The entire name and address
for the URL must be used, including the scheme, http:// .
<a href="http://www.whatever.com/">Name of
Link</a>
In long Web pages, it can be useful to link to sections within the Web page. This
can be achieved by naming fragments of the document and linking to them.
Linking to a section of the document is a two-step process:
1. First, name the section of the document where you want the user to land
after they click on the hyperlink.
2. Now, link to the document section using the named value preceded by the #
sign as the destination URL.
Naming a section
<a name ="name"></a>
The value "name" refers to
whatever name you wish to
give the section. The name
should be one word and
lower case, and should
never contain spaces or
symbols. The section
enclosed in the tag will be
the point of text that is to be
linked to. It's like putting a
room number outside your
Linking to a named
section
<a href="#name">Name
of Section</a>
The actual location to link to
is always preceded by a #
sign and should be the exact
same as the value for the
<a name >. The text
enclosed in the tag will be
the actual clickable link. This
method of linking is
commonly used to provide a
link back to the top of a
door. If you're sent to room
319 and there aren't
numbers on the doors, you'll
not find your way.
document or for internal
navigation.
This tag is invisible in the
browser window and is only
used to give the hyperlink an
"anchor point" so the
browser knows where to go
when the link is followed.
Example:
<p><a name="partone"></a>This is part one. It contains lots of stuff.</
p>
<p>Here's part two. Whoopee.</p>
<p>Here's part three. More excitement to follow.</p>
<p>Here's a commercial for Husky Deli ice cream.</p>
<p><a href="#partone">Go back to part one.</a></p>
Targeting links (optional reading for the brave; okay to skip if
you're already overwhelmed)
By default, a linked document will load in the same window that originally
held the link. (Otherwise, for example, every time you clicked a link on the
Web you'd launch a new window or a new instance of the browser.)
The first thing to do is to make up a name for the window into which you
want the link to load. This provides a way to refer a link to a specific named
window.
Now any link can load a document into this window if we use the target
attribute.
<a href ="page3.html"
target="mainwindow">
The first time the user clicks a targeted link, the browser will open a new
window and will assign the chosen target name to that window. Subsequent
links to that target will load in this window.
You can also force the browser to open a completely new window for a link,
by way of the _blank target:
<a href="page1.html"
target="_blank">
In this case, page1.html would always
open in a completely new window.
Each time a link is targeted to _blank
it will open a new window. When used
for multiple links, _blank has the
potential to confuse users, leaving
them with multiple windows open.
Previous | Next
Checkpoint, basic xHTML, making links: Create a link that goes to our
course Website at http://tiny.cc/ctn160.
The mailto: value
The href attribute of the <a> tag (usually used to initiate another Web
interaction, as in
<a href ="http://www.opaldata.com/the_end/">click this to go to the End of the
Internet</a>)
not only leads to files or Websites, but can also (if the browser allows it) launch
the browser's email program if you use the mailto: value, as in
<a href ="mailto:[email protected]">email [email protected]</a>
Bear in mind, if the computer is a shared one it's likely the browser has no email
program--the ones in the library don't--then clicking this tag won't let the user
send email. That's why it's good to also include your email address in the
hotlinked text. Of course, putting your email anywhere on the page sends a big
invitation to spammers, so be prepared. It's wise to set up a disposable, free
email account (gmail, hotmail, yahoo, etc.) to publicize on the Web, rather than
opening up your personal email to every spam king on the planet.
Previous
Here's a handy
reference Website:
List of tags and
attributes.
Checkpoint, basic xHTML, the mailto: value: Add an email link to
yourself if you wish. Make any additional style changes you'd like.
If you're not working in a shell account, then follow the instructions from
the FTP section of this course, (in conjunction with the ones provided by
your Web host provider if you're not using a freeshell.org account), to
upload your index.html and style.css files to the Internet. If you are working
in a freeshell.org shell, this step is already done; just type mkhomepg -p
(enter) at the command prompt.
Firefox addons
Now find the index.html file on the Internet, copy its URL, and add it to the
my URL?" forum on the course Website. Trouble uploading your files
(extensions) or"What's
finding them once they're uploaded? Come to the Question and Answer
forum and let us help out.
One of the greatest
things about the
Firefox browser is "add-ons" (or "extensions"), which are downloadable additions that
give the browser extra functionality. These are a few of my favorites for helping with
Web development.
You'll not be able to add these to the shared computers in the lab, but they should work
for your home version of Firefox.
I have listed some of my favorites below. These things sometimes fall behind the most
current browser version, get replaced by other tools, get abandoned , change names,
etc. If you can't find something mentioned on this page, try searching for a similar tool.
(Website listed in instructions below, keep reading.)
Use the "Tools" menu in Firefox, and select "Add-ons" if you want to get some add-ons
for your browser.
The direct URL to the Mozilla Firefox Add-ons page is https://addons.mozilla.org/en-US/
firefox.
ColorZilla
An eyedropper tool that lets you click on anything on a Web page and find out its color
value, so you can match the color in your code to something online. Quicker than trying
to sift through a page source or its linked CSS to find out what that color was.
EditCSS
Lets you modify a style sheet from a sidebar (instead of opening a separate program).
Firebug
A debugging tool that lets you modify a page and see what the changes do. Quicker
than opening the page(s) in Notepad if you're just trying to troubleshoot a quick fix. Has
separate tabs for working in xHTML, CSS, Javascript, etc.
Link Checker.
Checks the links on any Web page and lets you know which ones are broken. Quicker
than manually clicking every single link on the page.
Open image in new tab
Adds an option to the right -click menu that lets you (duh...) open an image in a new
tab.
Total Validator
Builds xHTML validation directly into the browser.
Install it on your own computer and look on the bottom right side of the status bar;
you'll see this symbol. Click it and it'll check your code for errors. It'll probably report a
hundred of them, most of which you clear up with a single change. Validation tools
aren't perfect.
Appearances within your own Web browser will likely be slightly different from these
screen shots.
View source chart
Organizes the xHTML on the current page into a color-coded chart. (The latest version of
this one is now only available by purchasing it from the developer, at http://
jennifermadden.com/scripts/ViewRenderedSource.html, although she often offers the
previous version for free.)
Web developer
Adds a menu and a toolbar with a squillion different useful options from "outline all table
cells" to "show detailed information on anything I click on (what CSS it uses, what its
parent elements are, dimensions, file size, you name it). This is the most feature-rich of
the add-ons mentioned here.
Window resizer
Resize your browser window to various standard resolution sizes.
An illustrated step-by-step guide to using
Notepad to make xHTML pages
This exercise assumes that you have created a copy of this xHTML template file
(instructions are on the template file itself), and that you are using Microsoft Windows as
your operating system. Mac users would likely use TextWrangler, and Linux users have a
few hundred options.
1. Click the Windows "Start" button (bottom left side of the screen), and then choose
"Run" (usually one of the very last choices available).
2. Type in "notepad" and press the "enter" key or click "okay".
You can also accomplish this via the mouse. Click "Start", then go find the entry for
"Notepad". It's usually under the "Accessories" menu in Windows. It's not always
consistent, which is why for simplicity's sake I used the "Run" method instead for
my example.
3. Change the "Files of type" option from "Text files" to "All files". Browse to the drive/
directory that contains the template file you created from the instructions on the
course Website. Choose that file. (In my example , I named the file "000aaa.html".)
4. Since this is a file we want to re -use for every new Web page we create, it's
important to save a copy of the template file rather than to begin altering the
template itself. As soon as the file is open, use Notebook's "File" menu, and choose
"Save as".
5. Make certain to change the "Save as type" setting before you put in the new file
name and save the file. Otherwise, Windows will save it as a .txt text file instead of
a .html Web file. And do NOT include spaces in your file names.
6. Customize the page you just saved from the template, changing it into what you
want.
See also the section "Working in the shell account (ongoing)", above
Usability
The concept of usability
Usability considerations run throughout every assignment in this course.
Usability is science applied to a common -sense engineering concept: investigating
a user's interaction with a product or system . Usability's roots are in
manufacturing, but the concept applies just as well to a Web site, a software
application, a toaster, or any user-operated device.
Interestingly enough, all sorts of traditional usability examples focus on
doorknobs. They are an excellent real-world example. The next time you find
yourself pushing a door that clearly says "pull", or pulling one that says "push",
take a look at the doorknob . Chances are that the doorknob design is what led you
astray. Maybe it was a hooked knob on a door you actually have to push [hooks
are for grabbing and pulling], or a push -bar across a door you actually have to
pull.
Several study able, measurable things affect the user's experience with a product
or system, including:
Ease of learning
If a user has never seen the user interface before, how
hard will it be for them to figure it out well enough to
accomplish basic tasks?
Efficiency of use
Once a user has gained some experience in how to use
the system, how fast can he or she accomplish tasks?
Memorability
Error frequency
and severity
Subjective
satisfaction
If a user has used the system before, can he or she
remember it well enough to use it effectively the next
time? Or, does the user have to start learning everything
all over again?
How often do users make mistakes while using the
system? How serious are these errors? How do users
recover from these errors?
How much does the user like using the system?
(The above was adapted from the National Cancer Institute's excellent Usability Website at
http://usability.gov/basics/.)
Next section
Know your target audiences
To consider what makes something usable, one must consider the:
Target
population
What do you know about your target population that might
affect how you design your site? Gender, age, degree of
comfort with computers, the user's culture, all can have an
effect, as can many other target population characteristics .
Target
environment
Where does your target population do their Web browsing
from? From the office? An office with a door, or a cubicle ? From
home? A quiet home with no interruptions or a houseful of
children? Do they have slow dial-up access or an always-on,
superfast Internet connection? What kind of hardware/software
is the user likely to have? (Old? New? Powerful enough to
easily play a video? Windows? Mac? Linux ?)
Target tasks
What kinds of things would the user be trying to accomplish
when they visit your Website? Are the looking for free
information, trying to buy something, etc.? Does your site
make it easy?
(My current bad example: there's a Website that lets you prepay a public school student's lunches via credit card. You fill out
four screens of information, including all the credit card
information, hit "submit", and it says "we don't take Visa, only
Master Card." Okay... sure wish you'd told me that in the first
place and not wasted my time. And, since there are twice as
many Visa cards in the U.S. as MasterCards, chances are that a
significant number of people trying to use your site are not
going to enjoy the experience.)
Previous | Next
Usability fundamentals
How do you know for sure that a site is usable? Start with these usability
fundamentals:
What is the purpose of the Web site?
Sell something
Tell something
Gather information
Etc.
Who are the users?
Know your users, for they are usually not just like you!
Go watch them
Ask questions
Age
Physical characteristics
Gender
Mental characteristics
Workflow
Computer skill level
Design with your users in mind
For example, you're designing a web site for your Granny and her
friends.
Age
Physical characteristics
Computer skill level
Mental characteristics
Workflow
Translate what you know/learn about your users into good design
Test with your users
Make certain your test sample is representative of your audience
Make certain your test sample is statistically and scientifically sound
Best thing: perform usability test
Next best: use your brain
Previous | Next
Accessibility: Section 508
The following information was heavily excerpted from Patrick Crispen in The
Internet Tourbus, http://www.tourbus.com/, Copyright 1995-2003, Rankin &
Crispen.
In 1998, the US government amended section 508 of the Rehabilitation Act to
require all federal agencies (except for national security systems) to ensure that
electronic and information technology is accessible to employees and members of
the public with disabilities. In other words, federal information must be offered in
such a way that accessing it does not pose an "undue burden" to people with
disabilities.
More information about section 508 is available here: http://www.section508.gov/
.
Even though it only applies to electronic and information technology that is
procured by a FEDERAL (U.S. government) department or agency, most
companies and educational institutions around the world have elected to comply
voluntarily with the rules of section 508, especially when it comes to those
companies' or institutions' Web sites. Why? One word: traffic. If you can make
your Web pages more accessible, especially to people with disabilities (like, say,
University of Washington alumni), more people are going to be able to visit your
Web pages.
WebAIM offers a checklist of the sixteen Web design rules in subpart B of section
508 at http://www.webaim.org/standards/508/checklist, showing you the
standards and what you need to do to pass those standards.
One out of 12 visitors to a Website is colorblind. How to design Web accessible
pages for the colorblind.
Previous | Next
More information
Readings
The Road to Recommendation: "... as we've worked with teams during their
research studies, we commonly see them a little too anxious to produce
recommendations and suggesting fixes that may not actually help their problem."
The Dark Side Of Usability: When Business Goals & User Goals Collide
Flash 99% Good
http://www.flash99good.com/
Everybody loves a flashy web site, right? Wrong! In careless hands, Macromedia's
Flash technology can render a site almost unusable.
Still more information
Usability.gov, the National Cancer Institutes' outstanding usability Website:
http://usability.gov/
Designing more usable Web sites
http://www.tracecenter.org/world/web/
An excellent compilation of Usability resources, from the "Designing a More Usable
World" folks at University of Wisconsin's Trace Center. See their main Website at
http://www.tracecenter.org/ for some great information on usability, from general
concepts to consumer products to ATMs, and a lot more .
Usability news:
http://psychology.wichita.edu/surl/usability_news.html
Usability pundits
Two individuals in particular have made a good living out of bringing the concept
of usability into popular culture. Although it's easy for people to fall into the trap
of simply following Jakob Nielsen or Jared Spool in their "recipes for a usable
Website" rather than doing your own user testing , their work can be a thought provoking start for your own design and user testing .
Jared Spool
User Interface Engineering
http://www.uie.com
Jakob Nielsen
useit.com
http://www.useit.com/
Test your Website in other browsers
15 Tools for Testing your Website
Many people use a text-only Web browser called Lynx. This "emulator" shows
what Web pages would look like in Lynx, as well as what they would sound like to
vision-impaired users who have software to read the words on the page to them:
http://www.delorie.com/web/lynxview.html
See how the Web looked in earlier browsers: emulators for line-only browsers, and
for NSCA Mosaic, Mosaic Netscape, Netscape Navigator, Lynx , Internet Explorer,
and HotJava.
http://www.dejavu.org/
Check your html documents for accuracy
HTML validator:
Dr. HTML
HTML validator from the people who wrote the standards
World-Wide Web Coalition (W3C) (Warning--this one is very picky!)
Accessibility
WAVE is my new favorite Web accessibility evaluation tool, mostly because it has
an easy-to-understand user interface.
ADA HTML checker: "Bobby" is a Center for Applied Special Technology program
that will help you make web pages accessible to those with disabilities and help
you make your Website compliant with the Americans with Disabilities Act (ADA,
aka Section 508).
Previous
Discussion:
usability
Checkpoint, usability: Several sites are listed in the usability site review
instructions. Follow those instructions. Under the forum called "Usability,"
report what you thought of each site, and share your opinions on the
usability of each site, any concerns that arise for you, etc.
How well do you
think the police sites listed below will serve their users?
Before you even visit any of the sites, begin with some basic usability questions as
outlined in the usability reference materials.
What purposes would a police department Website serve?
Who might its primary users be? Under what circumstances?
What kind of tasks would users try to accomplish at a police department Website?
Now, compare these three sites. Put yourself in the role of a user and see if you can
successfully accomplish one of the tasks you identified. Was it easy? Satisfying?
Devon & Cornwall Constabulary
Martinsburg Police Department
Keokuk Police Department
Report your pre-visit opinions about site users, circumstances, etc. Then, tell us what
you thought of each site, and share your opinions on the usability of each site, any
concerns you have, what parts worked really well for you, etc.
Read through what others in the class have said. Feel free to post constructive
comments and respectful agreement or disagreement with what they said. Treat this like
a business team meeting: be honest, professional, candid, and act like you want to keep
working with these people even after this conversation has ended.
Website planning and overarching design
About Website planning
Creating a good Web site takes a lot more than just spitting out some code and
saving it as a Web page. Anybody can paint a ceiling, but that doesn't make you
Michelangelo.
Whenever someone says "Web design", out come the paintbrushes, colored pens,
and Photoshop. Put them away for now. Website design has lots of pieces. Lots of
people, if they plan at all, they just prepare the preliminary sketch, or mabye draw
up a diagram for the site's form and structure. That's fine in due time, but it 's
getting a little ahead of yourself.
The main challenge with Web design is to communicate a message to the users of
the Web site. So, you'd best start by considering what kind of message you want
to communicate and who these users are going to be--basically you need to start
with a business* plan for your Website.
The Web is very different from traditional print media. Sites that consist primarily
of an electronic version of their print materials tend to be sites that don't do very
well.
Also, the best Website in the world won't fix a bad business * model. There's little
point in even working on a Website if the thing behind the Website is not viable.
* "Business," as I'm using it here, does not necessarily mean commerce. I'm
using it globally, as in "What are you trying to accomplish, for whom, and through
what means?"
Next section
The process of Web design/planning
Talk to seven Web designers and you will hear seven different processes for
creating a Web site. Generally that process will include some combination of the
following:
1.
2.
3.
4.
5.
6.
7.
The Idea
Test
Pre Design- Setting Goals - Determining your Audience
Test
Flow Charts- Information Architecture- Mapping out the content
Test
Wireframes - a narrative of the user experience for each page
8.
9.
10.
11.
12.
13.
14.
15.
Test
Story Boards - The look and feel
Test
Final Design
Test
Building the Site
Test Test Test
Launch
You could skip all of these steps and just start coding , but chances are you would
have to start over many times, as issues you might not have initially considered
began to arise. If you built a store the way lots of people build their sites, you
would lay the foundation, put up the walls and start on the roof when the person
you are building for says... "but I also want a garage ". So you stop the roof, add
some more foundation, put up some more walls and just as you start on the roof
again, they say "... can we make it two stories?" Then you have to kill them. You
could have saved a lot of time and money (and attorney fees) if you had just sat
down in the beginning and planned out the design and steps for building. This is
what the Web design process does.
Previous | Next
Pre-design planning
Before you go on a trip, you usually want to have a destination in mind. The same
is true of the Web. Before you design a Web site, identify the message you are
trying to send. Establish some clear goals for your Website. If you skip this step,
you can easily lose sight of what you are trying to accomplish and what message
you are trying to send.
The process of determining goals for your site is often called pre-design, because
(if you know what you're doing) it takes place well before any design work begins.
Many professional Web designers create pre-design questionnaires to help clients
establish their goals for their Web sites. Although the questions asked in predesign differ greatly from designer to designer or project to project, the following
points need to be addressed in some form.
Why are you building this site? (site description or statement of purpose )
Who is your audience? and who are you? (or who do you want your audience
to believe you are?)
What are the objectives of this site? (what are you trying to accomplish?)
What kind of information will be on this site? (outline of the information)
How will the site affect the user?
Remember to reach all of your users (not just the ones with fast modems or fast
computers, unless that's your only target audience), and that you are not
necessarily representative of the users you have in mind.
Read Jared Spool's article The Road to Recommendation, in which he cautions
against deducing poor inferences that don't actually explain what's happening in
the design.
Previous | Next
Site diagrams
Site diagrams
Before the first nail is hammered, an architect maps out onto a blueprint the
layout of the rooms, where doors and windows will go, and how people will
interact with the building and use it. An architect who creates and builds from a
blueprint is a lot more credible than one who doesn't, and also charges a lot more
money. In the world of Web design, the same process is essential before we begin
to build the Web site, and the same concepts of credibility and fees also hold. A
Web designer must determine how people are going to move through the Web
site, how they will navigate from section to section and how the sections will be
linked together. This blueprint for a Web site is sometimes called a flowchart, flow
diagram, or site diagram, or site map.
Creating a site diagram
Once the pre-design step has been completed, the next step is to create a
diagram. There are entire software packages devoted to mapping information. One
such program commonly used in the industry is Visio, now owned by Microsoft.
More affordable (as in free) but a bit of work is the concept mapping software
from the University of West Florida Institute for Human and Machine Cognition.
You may already have software on your computers that would allow you to create
attractive and professional looking site diagrams. Microsoft Excel and MS Paint are
both options, and most word processors include a way to create a basic
organization chart, which might do the job nicely.
My recommendations, both in terms of being free and easy to use, are the
Web-based mind-mapping tools at either http://www.writemaps.com or
http://bubbl.us/. Writemaps gets the advantage; it lets you include a
purpose explanation and put notes on the page.
List of all the content that you want to include in your site. You may find that as
you create your list, some items are combined and others are omitted. After you
have come up with a list, write the name of each element on a card or post-it
note. Using a plain piece of paper, organize the elements into a desired
configuration that represents how the various sections of the site will interact and
how the user will navigate through the site. Later, draw lines between the various
elements to indicate possible links and navigation.
Examples of basic flow diagrams
Previous | Next
Wireframes
In web-speak, a wireframe is a skeletal rendering of every clickthrough possibility on your site - a text-only "action," "decision" or
"experience" model. Its purpose is to maintain the flow of your specific
logical and business functions by identifying all the entry and exit
points your users will experience on every page of your site. The goal
is to ensure your needs and the needs of your visitors will be met
effectively in the resulting website. You wireframe first, before a
single line of code is written, a single graphic or color is chosen, or a
single word of copy is composed. Wireframing is not concerned with
design, navigational layout, content or even the developers' and
designers' concepts of how to produce your website. (See a sample
HTML wireframe.)...
How do you create a wireframe? The process begins with a dialogue.
Together, you and your developers determine what needs to be done
to translate your business successfully into a website. Nobody knows
your business better than you, so you will be doing most of the talking
- your developers will be listening to ensure the resulting wireframe
accurately represents all the "whats" pertaining to your business. You
answer the "what" questions, "action" questions: What does a visitor
do at this point? Where can a visitor go from here? You ignore
questions about what your visitor sees at this point.
The wireframe should consist of words - no images - transcribed by
your attentive developers based on what you say. In wireframing, you
use aural senses (talk/listen) to determine what the site should do.
You defer the visual senses (look/feel) to storyboarding, where you
attend to how the site will appear. You cannot "see" how a site will
work until you first "listen" to what the site should do!
The wireframe can be created on paper: simple pages reflect
what every single part of your site does, focusing on ways a
visitor would enter and exit from each step in the process.
Alternatively, and more conveniently, a wireframe can be created
"live," in very simple HTML, so the iterative process of refining the
wireframe is quick and easy.
From (Wire)Frame Yourself, Grok.com, 2001
More about wireframes
Some of the examples listed are considerably more complex than you will probably
need for your sites. They show just how richly -done a good wireframe can get.
An example wireframe similar to what you should be doing
Guided wireframe narrative: an outstanding explanation and sample images
Information architecture and Website wireframes: A good (and brief!) article
explaining more about wireframes
Sitemap and wireframe for a complicated Website redesign
Page-by-page wireframes (including layout elements)
There's a nice free online tool that will let you create and share wireframes, at
http://mockflow.com/.
Previous | Next
Workplan diagrams
You know where you are now (at the beginning of everything), and if you've been
listening to me and have created a project plan, you know where you want to end
up. How will you get from here to there? What kind of things do you need along
the way? (Register a domain name? Find a Web host? Get copyright permissions?
Obtain photos? Obtain the written copy for the site?) What are the dependencies-what things can't be started or completed without another thing? (The people in
Legal can't approve the copy until Marketing finishes writing it, and you can't add
copy you don't have, and can't place the photos until you know what the copy will
be.)
A workflow diagram, or project plan, identifies everything you'll need in order to
complete the Website, what steps you'll have to take to get things done, how long
the steps will take, what dependencies exist, etc. A good workplan can help cut
down on surprises--like finding out at the last minute that you're missing a key
step or piece. Although there are complex, specific products to help set up these
plans (Microsoft Project being the most recognized), they're overkill for the size of
project we'll be working on for this class. A simple drawing or a bulleted list will be
sufficient for our needs.
Examples of a workplan flow diagram for a Website
Previous | Next
Navigation
Navigation is an essential part of any Web site. Proper navigation allows the user
to figure out where they are and get insight into the Website's organization, and
keeps in mind the goals of the site and the user.
Some things to remember about good navigation
Offer clear, understandable labels
Make sure users can tell where they are at all times
Ensure users can maneuver without relying on the browser buttons
Make all parts of the site accessible
Identify the site on every page
Support user goals and behaviors
Remain consistent throughout the site
Common types of navigation
There are many different ways to represent navigation on a Web site. The easiest
is to have simple text links to the various parts of your Web site. Common
navigation setups include navigation bars (both horizontal and sidebars),
dropdown or pull-out menus, and common technologies used to achieve dynamic
menus include CSS, Javascript, and Flash.
More information: The 8 Types of Navigation Pages
Navigation gone wild: do a search on the Kartoo search engine
Previous | Next
Putting it all together: storyboards
A well-done storyboard has three parts:
1. A quick sketch of the site's structure
2. A detailed structural outline
3. A detailed sketch of each page, with all of the visual elements of a Web page
including the text, interactivity and links mapped out ahead of time to give
the designer or client an idea of how things will look.
The wireframe provides the outline for your storyboard, which easily
can be fleshed-out after all iterations of the wireframe are complete.
The resulting storyboard represents all the subsequent decisions
pertaining to development and design, grounded in the structure of
the wireframe. Your developers and designers need never work in a
vacuum - the wireframe guides every design, information architecture,
navigation, usability and content consideration.
The distinction between wireframe and storyboard is critical, and the
two cannot be merged: wireframing defines the "what" of the creative
process while storyboarding tackles the "how."
From (Wire)Frame Yourself, Grok.com, 2001
Before you upload a single page to the Internet, your key folks ideally
have gotten together, thoroughly considered your website from the
shopper's point of view and created your storyboard. It looks a lot
like a flow chart, with paper pages representing each individual web
at it and to make it easy for them to do so.
The sheets representing web pages then can be arranged in the
logical order of the buying process, with arrows between the pages.
These arrows will become the links you provide to help your
customers navigate your site, find what they want quickly and buy it
easily. There should be different arrows representing differing
outcomes based on how your customer might move through the site
(primary trajectories, secondary ones and so on). This is critical
planning! Every page! It helps you figure out and understand the
nuances of your site. Most important, it ensures your customer sees,
understands and does exactly what you intend, but in a way that feels
totally natural to them.
From Behind the Scenes: E-commerce Secrets from Hollywood?,
Grok.com, 2001
Page sketches for a storyboard can be drawn out by hand, by computer software
programs such as Adobe Photoshop or Freehand, Microsoft Word or Powerpoint,
etc. Using an image editing program like Photoshop or Freehand to create this
part of a storyboard can have an added bonus, if you can later split it up into the
various graphic elements of the Web page.
A storyboard is essential for helping us to work out any problems or questions we
may have with graphics, content, navigation or links, before we spend time
writing the HTML code.
The storyboards below illustrate the design of the page including color, graphics,
text and link location. A client or designer can get a conceptual idea of what a
page will look like and make changes accordingly, before time is invested in
writing the HTML.
A page mockup for a storyboard
Site name
Logo here
Paragraph one will be filled with
exciting information about
whatever exciting thing I can
inform you about.
Navigation1
Navigation2
Navigation3
Navigation4
Navigation5
Navigation6
Navigation7
Paragraph two is not quite as
exciting but will keep your
interest if nothing better comes
along.
Paragraph three is a tiny bit
more interesting than watching
ice melt. Anyone who manages
to read this far deserves
whatever they get from reading
this far.
Navigation | Navigation| Navigation
A simple sketched storyboard page:
A more visually detailed page diagram
Once a storyboard is finalized, the next step is to turn it into a Web
site. Use the storyboard as a set of visual directions for where you
should place graphics, links and text on your Web page.
Previous
Sample
wireframe
Checkpoint, Website planning: assemble all necessary Website design
documents and drawings, upload everything, and link them to your
index.html page.
This is an example of the type of wireframe that would be reasonable to expect for the
sites you're doing. It tells how the user might come to this page, the purpose of the
page, what will be on the page , and what the user will do from here.
If you're looking for that online tool that creates wireframes, it's at http://
mockflow.com/.
Wireframe for TIC home page
TIC Logo
Sales & Marketing Life
Reposs- Exorcisms
Loans
& Tums
Support essions &
Lawsuits
TIC, Inc.
Success is our business
Photo of plainlooking happy
customer and
scantily-clad
groupies
.
Explanatory text to make the
potential customer feel an
irresistable urge to spend as much
money as they can on our product,
and to indicate that if they just buy
our product that they will be
incredibly successful and popular
with attractive people like the ones
in the photo at the left.
This will be the home page for Three-Initial
Corporation, matching the URL in our ads. The
prominent placement of logo and company name help
establish the brand in the user's mind.
Everything on this page encourages the user to click
"Buy it now!" The item placements and color choices
will make the "Buy it now" button the place where the
user's attention gets focused.
Other available choices are for various legal
information, company divisions, and our other
products.
Buy it now!
Fine print
DisWeasel
claimer words
Contact Call
us
911
Discount
funerals
Links for Website design and planning
Web Design
Web Design: Bud Uggly Web Design (be certain to check the previous version links)
Amateur Web Sites: the Top Ten Signs
The Road to Recommendation (article on avoiding the wrong conclusions)
Web Design: Lynda Weinman
Yale Web Style Manual
Navigation
The 8 Types of Navigation Pages
Web Navigation is About Moving Forward
Menus with Beauty and Brains: The Heart of an Excellent Site
xHTML code tips
Ten rare HTML tags you really should know
Bored and underchallenged? Want to try something more
advanced?
Blueprint CSS: A CSS grid/typography framework
Graphics on the Web
Graphics and color
One of the biggest benefits of the World Wide Web is
its ability to use graphics and color to convey a
message. Unfortunately, one of the biggest liabilities
of World-Wide Web designers is their inability to use
graphics and color to convey a message.
Graphics and color can play a big role in the ability
of a Web designer to get the point across to users
viewing a Web site... or not.
A picture may be worth a thousand words, but on
the Web this can actually be more like ten thousand
seconds. Graphics take up a lot of space on a Web page and add significantly to
the download time. A high -quality graphic will take a great deal more time to
download than a thousand words.
Although graphics and color are commonplace on most Web sites, the decision to
use them is not to be taken lightly . There are many factors to consider when
deciding to use graphics and color in a Web site.
Monitor display: some monitors only display 256 colors
Cell phones: more and more Web browsing is being done on handheld
devices. Screen type, size and quality, and the cost of downloading graphics,
take on a whole new meaning when you're looking at cell phones.
Bandwidth: with a slow connection, graphics take longer
Your Message: Will a graphic help your message or detract from it?
Cost: Can you use free graphics or will you have to purchase them?
User behavior: computer monitors only have 72 dots per inch. If your users
aren't expected to print out the images, a low-resolution 72 dots-per-inch
(dpi) image will look the same on the screen as a high -resolution 600 dpi
image. Of course, it'll look awful if anyone prints it. 150 dpi is a safer bet for
low-res; 300 dpi for medium-res.
GIF or JPEG or PNG: What graphic format should you use for your images?
Next section
Web image file formats: GIF, JPEG, and PNG
A GIF or Graphic Interchange Format was first type of graphic file on the
Internet. It remains among the most popular, universally supported by all Web
browsers. A GIF can only contain a couple hundred different colors, though, which
is why this format is generally used for images with areas of "flat color" or a
limited number of colors--primarily line drawings like logos illustrations, and
drawings.
GIFs give a Web designer a variety of options when it comes to controlling color
and size, including the ability to choose a single color to render transparently. All
electronic images are actually rectangular; if you see one that doesn't appear that
way, chances are the parts of the rectangle you can't see have been made
transparent.
With the help of a number of graphic image software programs, GIFs can be
animated. Animated GIFs are easy to incorporate into a document, but have been
overused and abused to the point where they're seldom seen in professional work.
Unfortunately, the Unisys Corporation holds a patent on GIF technology , and has
threatened to start enforcing it. This could mean everyone using gifs on their
Websites would owe Unisys a royalty for every image. Expect to see PNGs used
instead of GIFs before that would happen.
A JPEG, JPG or Joint Photographic Experts Group file is the other most
common graphic format on the Internet. JPEGs can contain millions of colors and
are generally used for photographic images. JPEGs give the Web developer control
over file size thorough compression: instead of having each pixel of color rendered
separately, it uses mathematical formulas to decide where and how to place color.
When a JPEG file is compressed it loses some of the photograph's quality, so
compression should be applied with some restraint.
PNG or Portable Network Graphics is a newer graphics format similar to the
GIF. PNG offers a host of impressive features including compression, transparency
and the ability to store text, such as copyright information, along with the graphic.
PNG has been officially recommended by the W3C, but support for this new format
is limited to newer browsers.
SVG, or Scalable Vector Graphics is a vector graphics format designed at W3C
(World-Wide Web Consortium, the people who set the standards for the Web). It is
written in XML and stylable with CSS,and is starting to become a popular choice
for including graphics in XML documents. It's not something most people in this
beginning class would be using, unless you're in the habit of working with vectorbased images.
WebCGM (Computer Graphics Metafile) Profile is based on an ISO standard
for vector and composite vector/raster picture definition. CGM has a significant
following in technical illustration, interactive electronic documentation, geophysical
data visualization, among other application areas and is widely used in the fields
of automotive engineering, aeronatics, and the defense industry. Not so often in
beginning Web production, though, so you might not encounter it .
Previous | Next
Graphics software
Most images for Websites need a little help: cropping, resizing, maybe a bit of
touch-up. Complex image-editing via Photoshop and image creation via Illustrator
are both well beyond the scope of an introductory course like this one. Enough of
the people taking this class have some experience with the software in question,
though; help should be available via the forums if you need it.
There are many different types of software available for creating and manipulating
GIFs, JPEGs, and PNGs. Many of these software programs will put a sizable dent in
your wallet--several hundred dollars' worth of dent, even with an academic
discount. For the professional, though, purchasing an industry standard such as
Adobe Photoshop or Adobe Illustrator is well worth the money.
For people on a budget, options such as Paint Shop Pro, iPhoto, or Adobe
Photoshop Elements are solid software programs that give you many of the
features of their more expensive cousins at a more affordable price (around $100
for students). If you own a digital camera then you're probably already set; most
digital cameras also come bundled with image-editing programs that will be
adequate for your needs in this class.
For really budget-conscious beginners, free software is hard to beat. Although
almost nothing is truly free (except the GIMP, see below), many software
companies offer free 30-day trials--enough to give you good exposure to a
particular software. There are also many freeware or inexpensive (under $50)
shareware programs that allow one to create and edit images.
Sources for Software
Free stuff
The GIMP (GNU Image Manipulation Program: a full-featured open-source program
released for free under GNU General Public License (GPL).) Both Windows and
Linux/Unix versions exist, as does a MacOS X version. It's definitely the most
powerful and complex of the lot, closer to Photoshop than to anything else.
http://www.gimp.org/
Graphic Converter is a Macintosh program, available from http://
www.lemkesoft.com/. It's shareware, free to download and fully -functional (except
for batch processing); registration enables batch processing and speeds up launch
time.
Irfanview, from http://www.irfanview.com/, is a free, easy-to-use image
organizing and editing tool for Windows. It's been around forever, and does a
great job.
Picnik, http://www.picnik.com, is an online photo editing suite. (And, as a bonus,
it's a Seattle-based company.)
Aviary, http://aviary.com/ is another online photo editing tool, a newer entry to
the game that's been getting a lot of attention.
Picasa, http://picasa.google.com/ is a software download from Google that helps
you organize, edit, and share your photos. Windows, Mac, and Linux versions are
all available.
Having a hard time making up your mind? Online photo editors comparedis a cNet
review and comparison of the top online image editing tools.
But wait, there's more! Free, open-source alternatives to Photoshop, http://
sixrevisions.com/graphics-design/10-excellent-open-source-and-free-alternativesto-photoshop/
Tools you can purchase
Paint Shop Pro
http://www.jasc.com/
Adobe
http://www.adobe.com
Shareware.com
http://www.shareware.com
Tucows
http://www.tucows.com
Previous | Next
Adding images to Web pages
Images on the Web can be easily (though not necessarily legally) saved to disk by
clicking on them with the right-hand mouse button. (That's apple-click on a Mac.)
Once saved, images can be inserted into Web page using HTML. Save images
locally; don't simply use the URL of where the image is located. You can control an
image you've saved locally; an image on another server may be altered or
removed, or the file name changed, without your knowledge.
The tag used in HTML for inserting an image is <img src ="whateverfile.gif" /
>. This tag is stand-alone and does not need a separate closing tag, because it
does not format text, but rather inserts something into the page much like a <hr /
> tag. The <img / > tag has many attributes , but the most common is src="url".
<IMG / > Tag and common attributes
<img src="url" />
defines url of file to be placed (replace the letters "url" with the
name and location of the file in question)
<img src="url" style="float: value" />
allows one to control how image will be displayed in relation to text.
Value will be the selected alignment (left, right )
Note: this is in relation to text.. If you want to center an image
on the page, use CSS:
<p style="text-align:center"><img src ="url" /></p>
CSS-P (positioning) allows much greater control over image
placement. We'll cover that later on in this course.
<img src ="url" alt="text" />
displays alternative text when the image is not displayed. Useful for
text only browsers, such as Lynx. Essential for text-reading
software utilized by visually impaired users. Some browsers will also
display this text when one points to the image. Use is required for
this class. Anything turned in to me without alt attributes and
values in the image tags automatically loses 10% of the grade.
Want to experience the Web without images? There's a Lynx
emulator at http://www.delorie.com/web/lynxview.html. Or, you
can simply turn off image loading in your regular browser.
(Instructions differ between browsers; check the browser's "Help"
menu for for details. Opera is by far the easiest for this sort of
thing, the "View" menu has a "Load images" toggle, and there's
even a toolbar button option. Opera's easily-changed page display
options usually run rings around everyone else's.)
<img src ="url" border="number of pixels" />
displays a border around the image, thickness is set by the number
of pixels. For hyperlinked images (just put an <img> tag inside an
<a href...>...</a> container), use border ="0" to keep a blue
border from appearing around the image:
<a href="next.html"><img src="go.gif" alt="go" width="50"
height="50" border="0" /></a>
CSS allows much greater control over borders, including the type of
line in the border (dotted, dashed, solid , etc.) and the individual
borders (left, right, top, bottom).
<a href="next.html"><img src="go.gif" alt="go" width="50"
height="50" border="0" style="border-left: 3px dashed #ffcc00" /
></a>
Notice in that example, border ="0" keeps the hyperlink-colored
border from appearing, but it doesn't override the CSS border.
<img src="url" width="number of pixels" />
specifies width of the image in pixels
not required for HTML, but required for this class--speeds up display
of image.
<img src="url" height="number of pixels" />
specifies height of the image in pixels
not required for HTML, but required for this class--speeds up display
of image
Pay attention to that "required for this class". Anything turned in to
me without width and height attributes and values in the image
tags automatically loses 10% of the grade. So, if you want to lose
20% of your grade off the top, leave off the alt, width, and height,
and you can just watch your grade go from an A to a C.
<img src="url" style="margin-left:10px; marginright:10px" / >
specifies how many pixels of space you want on both sides of the
image. Replaces the deprecated "hspace" attribute.
<img src="url" style="margin-top:20px; marginbottom:5px" />
specifies how many pixels of space you want above and below the
image. Replaces the deprecated "vspace" attribute.
If you want the same amount of space on all sides of the image,
just use something like style="margin: 20px"
CSS margin and padding offer much greater control than hspace
and vspace, via the option of separate settings for left, right, top,
bottom.
Example:
<img src="myphoto.jpg" width="150" height="200"
alt="This picture of me at the beach was taken in 2003."
style="margin-top:10px; margin-bottom: 10px; marginleft:15px; margin-right:15px; float: right; border: 2px solid #
000000;" />
HTML
What it does
img
Tells the browser to put an image
here.
src="myphoto.jpg"
Uses a file called myphoto.jpg as
the image.
width="150"
height="200"
Tells the browser to set aside a
space 150 pixels wide and 200
pixels tall, into which this image
can be loaded. Now the browser
can continue loading the rest of the
page while it's waiting to bring in
the image from the Web server.
alt="This picture of me at
the beach was taken in
2003."
If you can't see the image, this text
shows up instead.
style="margin-top:10px;
margin-bottom: 10px;
margin-left:15px; marginright:15px;"
Puts a 10-pixel margin above and
below the image, and a 15-pixel
margin on both sides of it.
style="border: 2px solid #
000000;"
Puts a solid black 2-pixel border
line around the image.
style="float:right"
Puts the image on the right side of
the page, and aligns any text in the
area to the left of the image.
Previous | Next
Finding images
There are many different ways to find images on the Internet. Google, AltaVista
and Lycos are among the many search engines that offer a special option to
search for images.
Stock photography--professional photography cataloged by subject and available
for your use--can be found for a nominal fee at many places on the Internet .
Companies such as Corbis and PhotoDisc offer reasonably priced stock
photography for use on the World Wide Web , and istockphoto.com and
stock.exchng (http://www.sxc.hu/) offer downright cheap stock photos. I suggest
you avoid the Microsoft clip art that comes with Powerpoint; we've all seen it . A
lot. Powerpoint poisoning is a tragic thing.
Wherever you get your clip art or photographs, make sure that you have
permission to place them on your Web page. Without permission you're probably
either breaking a copyright agreement or stealing.
25+ Excellent Free Stock Photo Sites for Designers
100 (Legal) Sources for Free Stock Images
Creative Commons
http://www.creativecopyright.org
This nonprofit site offers flexible copyright for creative work. It also has a great
section on interesting ways to cite credit for copyrighted information.
Clip Art.com
http://www.clipart.com
Lots of loud or cheesy graphics can obscure your message and annoy your
audience, but adding reasonable clip art to a document can be a great way to
practice the <img> tag. Adding unreasonable clip art can be a nice touch for your
bad html project for this class. Most of the clip art available at clipart .com is free.
Try adding some animated gifs.
Media Builder
http://www.mediabuilder.com/ Do you want to make a cool animated banner?
Don' have a graphics editor but need to crop a photo? Do you want to make your
own buttons? Media Builder allows you to do all of these things and a lot more .
It's all free, if you can tune out all the ads. For an example , check out the skittish
graphic below:
Previous
Advanced resources
33 Tutorials to Unleash the Photoshop Beast in You
Create Non Destructive Reflections in Photoshop
Background: Image maps
An image map is basically a large image that has multiple hotlinks within it. he user will
wind up on a different page depending on where in the image they clicked. Image maps
are often used as a sort of site navigation device. Server-side image maps, in which all
the action occurs on the server, are beyond the scope of this class since we can't control
what the server will do and whether or not it will support an image map. Instead, we'll
briefly review client-side image maps, which rely on a few additional lines in your HTML
to give the browser additional instructions.
Here's a sample of what an image map and the code that makes it work would look like.
<p>
<img src="imagemap01.gif" width="149" height="97" border="0" usemap="#
imagemap01" alt="" / >
<map name="imagemap01">
<area shape="poly"
coords="75,10,74,24,80,27,80,42,87,46,89,54,95,57,100,57,100,53,142,54,142,10,
76,10,76,10" href="montana.html">
<area shape="poly"
coords="66,8,74,11,73,23,79,28,80,46,86,45,91,58,98,57,99,77,66,78,64,8"
href="idaho.html">
<area shape="poly" coords="18,36,34,46,66,42,65,76,10,76,16,56,18,36,19,35"
href="oregon.html">
<area shape="poly" coords="14,18,18,37,30,40,33,45,67,41,66,9,22,9,15,17,20,33"
href="washington.html">
<area shape="rect" coords="99,53,143,91" href="wyoming.html">
<area shape="default" nohref>
</map>
</p>
Creating image maps
Hand-coding an image map is, thankfully, seldom necessary. Most Web-editing tools
have built-in image map tools. So do many image editing tools, such as GIMP and
Photoshop. There are also many stand-alone freeware image map creation tools for most
platforms, including:
Windows, Toma Image Mapper, http://www.tomaweb.com/freeware.asp
Apple Classic OS, IMM (Image Map Maker), http://www.tucows.com/
preview/206187
Linux, KImageMapEditor, http://www.nongnu.org/kimagemap/
Freeware image editors that include image map capability:
Mac OS X and Classic , GraphicConverter,
http://www.lemkesoft.com/
Windows, Mac OS X and Linux , Gimp,
http://www.gimp.org/
Using a tool like these makes creation of image map as simple as outlining an area with
the mouse, then typing in the destination URL.
Use the mouse to outline an area you want
to hotlink.
Type in the destination URL you want
linked to this area.
The program will generate the HTML code.
More information
Web Monkey: Image maps
http://www.webreference.com/authoring/graphics/imagemaps.html
Image editing practice
Optional exercise--not a requirement or checkpoint
Scenario: Congratulations, you just got the big contract for the new Website for "Fun in
the Sun Beach Cabins " in Baja. Of course, you only have three days to put the site
online before the 30,000 brochures they printed with the URL hit people's mailboxes.
The good news: they flew you down for the weekend so you could work onsite and get great photos.
The bad news: the first fog the area has seen since 1856 has blown in, and
all your photos look more like "Misery in the Fog" than "Fun in the Sun". Your
client will not accept a photo of a foggy day. If that's the best you can do,
you're fired--and you have to pay for the trip and the lodgings.
Photoshop challenge: Save the attached 4.1 MB fog1600.tif file onto our computers,
turn it from a foggy day into a sunny one, resize the photo to a reasonable size for a
Web page, and then export the file as a Web -friendly graphic.
New to Photoshop? Here 's one option for how to pull this off.
Clear a foggy day
Image-editing exercise
1. Adjust the exposure levels
Open fog1600.tif in an image-editing tool such as Photoshop, which is what's available on
the graphics workstations on campus.
In the layers palette, drag the background layer onto the
New/copy layer icon New/copy
to makelayer
a copy
you can work with
icon
(thus keeping the original safe, just in case you really goof
up).
Layers palette
From the Image menu, choose Adjust, then Levels, and
check the Preview box if it's not already selected. (These
labels and screen shots are from Photoshop menus. If you're
using GIMP, right-click the image, select Colors, then Levels. The palettes and controls
might differ slightly betweeen image editors, but not so much that you can't figure it out.)
The thing that looks sort of like either Levels
the North Cascades at night or a
deranged electocardiogram is called a
histogram. Directly below it is a bar
with three pyramid-shaped sliding
controls. Drag the left-hand (black )
control to the foot of the mountains
nearest it. Now bring the white levels
slider from the right over until it's
below the right side of the histogram.
Now, move the middle (grey levels )
slider to the left until the exposure
levels and contrast both look good.
By the way, your histogram won't look
like the one in this picture; it's not a
screencap of the levels on the photo we're working with. I have to leave at least
something to your imaginations!
2. Begone, gray sky!
Before we put in the new blue
Photoshop toolbar
sky, we have to get rid of the old
gray one.
From the Tool palette (look
over there --> to see what it
looks like), pick the Magic wand
tool. (It selects pixels of similar
colors). When you click the
magic wand, you'll notice the
controls change slightly and
there's a setting for Tolerance
somewhere on the screen.
(Usually at the top for
Photoshop, and on the bottom of
the tool palette for Gimp.) Set
the tolerance to 10 and select
the anti-alias (look it up) box if
it's not already checked.
Hold down the shift key and start
clicking around in the sky until it's all been selected. If you accidentally select the water,
just use Edit, Undo to de-select it.
Once you've got all the sky selected, just press delete on the keyboard to make the
selected area go away.
Turn off visibility in the original background layer via the Layers palette, by clicking on
the icon that looks like an eye. You'll find it to the left of the layer name. (Refer to the
first image on this page if I just lost you.)
3. Bring on the blue skies
On the Layers palette, click the New/copy layer icon New/copy
to makelayer
a new
layer for our
icon
welcoming blue sky.
Drag the new layer between the background and the background copy layers.
Toward the bottom of the toolbar, click the foreground color swatch (see the toolbar
figure above if you need help finding it). Choose something in the way of a sky blue.
Click the background color swatch, and pick either white or a lighter shade of blue.
On the toolbar palette, select the gradient tool. It shares the same space on the toolbar
as the paint bucket tool, so if you see the paint bucket, left click on it and hold the mouse
button down for a few seconds, and the option to pick the gradient tool will appear.
With the the gradient tool selected, click the top middle of the picture and (by holding the
mouse button down) draw a line to either the edge of the water or the bottom of the
picture (depending on how you like your sky to look). This should give you a reasonably
realistic blue sky with some white haziness near the horizon.
In the layers palette, select the background copy. Use the eraser tool on the toolbar
palette to get rid of any artifacts from when you deleted the original sky.
Go back to the Image menu, choose Adjust, then Levels, and fine-tune the levels until
you're happy.
Save the file as a Photoshop-format (.psd) file, so you'll have a copy of the original
should you need to work within the layers again. (Always work on the highest-quality
vesion of an image, then export the results to a lower-quality Web image like a jpg.
Speaking of which... export the finished image to a .jpg file. (From Photoshop's File
menu, choose Save for Web, and proceed from there. For GIMP users, just re-save the
image as a .jpg file and GIMP will do the export to the new file format .)
Congratulations; you're now a photo forger. Please don't do anything that would land you in
jail.
Adapted from a December 2003 Mac Addict article, © Kris Fong, site no longer available.
Photoshop user interface images from University of Washington, http://catalyst.washington.edu/help/graphics/
photoshop/ (More Photoshop information is available on this site as well.
Color on the Web
Color palettes
The color palette is the total number of colors that a given system is able to
generate or manage. Selections vary across operating systems, video cards, etc.
Among the most obvious differences is the fact that the Microsoft palette is
significantly darker than the one that Apple uses. A photo that looks fine in
Windows might be completely washed-out on a Mac, and a photo that looks great
on a Mac might be terribly dark in Windows. Middle-of-the-road settings usually
work out fine, but if a photo is borderline-dark or light (shot in low light, or in very
bright light, for example), check it on both platforms if you can.
Next section
Web-safe color
Real life has the potential for a limitless amount of colors and tones. When you
take an image of something from real life to an 8-bit screen that can only display
256 colors, some of the quality will be lost. On the World-Wide Web, only 216
colors are recognized universally by all browsers. These 216 colors are known as
the Web-safe color palette.
Older computers and many cell phones are still operating on a 256 color system.
In this 256 color system, most browsers share a common palette of colors made
up of 216 colors. Because these 216 colors are common across different
platforms, browsers and operating systems, if you stay within this color range,
your color selection will be universally honored.
Web Safe Color Palette from Lynda Weinman's site at http://www.lynda.com/
Web-safe colors by hue
Web-safe colors by color value
When displaying graphics on the web, you can choose to have an image displayed
with only these 216 Web safe colors. Although this may result in a loss of quality
you can be sure that the image can be viewed universally .
How important is this? Everyone's got at least a Super VGA monitor now, right ?
Pretty much, but it still depends on your target audience. Are you making a
Website for people overseas, or low-income people here in the US? Think about all
those obsolete computers given away as tax writeoffs: that's where they wind up.
Also, most people aren't carrying around 21-inch true-color high-resolution
monitors for their cell phones.
Keep your target users in mind whenever you make color choices.
Previous | Next
Dithering
Computers can reduce the infinite color of a photograph or image to 216 Web safe
colors is a process known as dithering. Dithering is simply taking pixels of two
colors and moving them around to create the illusion that they are a third color.
This is how limited-color and black-and-white images such as newspaper photos
work. When your browser encounters an image with colors not in its color palette,
it dithers two or more colors to display the color on the image , hence affecting
image quality.
Open this Flash file to see the effect of dithering on an image when you change
the color depth (number of colors).
Previous | Next
Technical stuff on color values
Happily, for this class at least, you can look this up instead of having to memorize
it.
RGB Color
The RGB system uses a series of three numbers to represent the intensity of Red,
Green and Blue. With 24-bit color these numbers will range between 0-255. The
RGB values found in the Web-safe color palette will always be some combination
of 0, 51, 102, 153, 204, 255. You will most likely come into contact with this
RGB color if you use Photoshop, other graphics programs, or a Web page editor.
Hexadecimal Color
In order to specify colors in your HTML files, you will need to use Hexadecimal
value for a color. Hexadecimal are the numeric values of the RGB. The colors are
represented by three pairs of digits. Each pair represents the RGB values. In the
Web safe palette Hexadecimal numbers are always represented by combinations of
00, 33, 66, 99, cc, ff.
Example
White
Black
FFFFFF
R: 255
G: 255
B: 255
000000
R:000
G:000
B:000
Previous | Next
Color on the Web: The Concepts
Color can effect a person's mood or emotion, it can change a person's perceptions
and it can invoke memory. Think about how many times you have used color to
describe a person's mood or emotional state.
He was green with envy
I am feeling blue
She was seeing red
InfoPlease: The Psychology of Color
Now, consider what message the two titles below convey? Who are you going to
invest your money with? Does one color speak more to responsibility or to energy?
Robert Smith Financial Services
Previous | Next
How color affects moods
From that well-respected and renowned Web Development source,
Good Housekeeping
Pink: soothes, acquiesces; promotes affability and affection.
Yellow: expands, cheers; increases energy.
White: purifies, energizes, unifies ; in combination, enlivens all other colors.
Black: disciplines, authorizes, strengthens; encourages independence.
Orange: cheers, commands; stimulates appetites,conversation, and charity.
Red: empowers, stimulates, dramatizes, competes;symbolizes passion.
Green: balances, normalizes, refreshes ; encourages emotional growth.
Purple: comforts, spiritualizes; creates mystery and draws out intuition.
Blue: relaxes, refreshes, cools; produces tranquil feelings and peaceful
moods.
From Shades of Success (source no longer available online)
Color Contrast & Dimension in News Design
http://poynterextra.org/cp/ is a well-done 2001 Website that covers color theory
and its applications in news presentation. (Requires Macromedia Flash Player.)
How color communicates meaning
http://carsonified.com/blog/design/color/how-colour-communicates-meaning/
Previous | Next
Color on the Web : The Code
Adding Color to the Background
The background color of a Web page can be controlled using CSS to re-define the
body tag.
To change the background of a document to this lovely shade of pink, use the
following HTML/CSS code.
<head>
<style>
<!-body { background-color: #FFCCCC }
-->
</style>
</head>
Adding Color to the Links
CSS can also control the color of hyperlinks. Changing the color of the links from
the default blue, red and purple, can help give your Web page a sophisticated look
and make it more readable--or, it can just muck up its usability. User testing is
your friend.
The attributes below control the color of the links.
a:link The color of link text that has not yet been clicked.
Default=Blue
a:active The color of a link as the mouse clicks on the it.
Default=Red
a:visited The color of link that has already been clicked.
Default=Purple
a:hover:The color a link turns when you mouse over it.
There is no default in HTML; links don't change color on
mouseover unless you use CSS to tell them to do so.
The following code would change our document to a lovely shade of pink with
lemon-chiffon colored links that turn light green when they are active and teal
after they are visited.---Ouch!---<head>
<style>
<!-body { background-color: #FFCCCC }
a:link { color:FFFFCC }
a:active { color: 99FF99 }
a:visited { color: 000099 }
-->
</style>
</head>
Adding Color to the Text
If you want to change the color of the text in the entire document, use CSS to set
the color for the body tag.
The code below would give us a yellow background with pink text--very hard to
read...
<head>
<style>
<!-body { background-color: #FFFF00; color: #FFCCCC }
-->
</style>
</head>
If you want to change a section of text you can use inline CSS to change the
color property:
<span style="color: #FF0000">stand out using CSS</span>
Previous | Next
Tips on using color
Most browsers will display basic colors if you write in the word (blue, red,
etc.) instead of using the hexadecimal value (#3366FF). Don't count on this
without testing thoroughly. Not all color names are read universally--causing
many of the pastel colors to be displayed as white.
You will often see HTML code where the # sign is not included with the
hexadecimal value. If you omit the #, Internet Explorer will still read the
code correctly, but other browsers will not let you get away with sloppy
coding. Use the #; that is the correct way to write it .
Don't use color just because you can! Gratuitous use of color is
distracting and can take the attention away from your message.
Use color consistently.
Remember that colors can invoke emotions and determine how you are
perceived, and that they often have cultural connotations as well.
Previous
Checkpoint, use of color: Bad Web pages. You've learned enough now to
be dangerous. This is your chance.
CSS Positioning (CSS-P)
CSS Positioning: bye-bye, tables!
Tables? We don't need your stinkin'
tables!
Want something to align to the left,
with text to wrap around it? No
problem with CSS! Use float:
right or float: left. That box
thingy over on the right side of this
column (the one with the number "1" in it)
is in a div container that's been floated to
the right, with a border and some padding
added so it doesn't run into the other text .
You might need to resize your window a bit
to see it, but the text will wrap around it
and show up below it if the window's small
enough. It came about like this:
1
In the CSS:
div.float-this {
border: 1px solid #000000;
padding: 10px;
margin: 10px;
font-size: 2em;
float: right;
}
In the xHTML:
<div class="float-this">1</div>
Layout used to consist of going through a
lot of pain and suffering figure out how to
use tables to position things on a page.
Since tables were invented to present data
rather than to do design, it was quite a
stretch--sort of like using Excel to create a
newsletter.
You can actually use styles to do the same
layout stuff as tables and frames, and a lot
more. It's called CSS-P, which stands for
Cascading Style Sheets Positioning.
Of course, it'll only work in modern
Printer-friendly page | Collapse all sections
How the heck did he do that?
Nice of you to ask. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://
www.w3.org /TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org /1999/
xhtml">
<head>
<title>CSS Positioning: abandoning
layout tables</title>
content="text/html;
<style type="text/css">
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:100px;
width:45%;
background:#fff;
} #rightcontent {
position: absolute;
right:10px;
top:100px;
width:45%;
}
p,h1,pre {
}
</style>
</head><body>
<h2>CSS Positioning: abandoning what
we've learned</h2>
<div id="leftcontent">
<div class="float-this">1</div>
Of course, it'll only work in modern
browsers, so you wouldn't want to do this
for everybody. If your audience is likely to
be using older browsers, and you
absolutely want that layout you're set on,
you're pretty much stuck with tables.
Luckily, for the rest of us, there's CSS-P.
HTML documents are basically a bunch of
stacked boxes, either one inside the other
or one after the other. These boxes are a
block-level elements--the ones that begin
and end a line, like <html></html>,
<h1></h1>, <p>< /p>, etc. Inline
elements, ones that don't start and stop on
their own line, like <span></span>,
<strong></strong>, <br />, etc. are
placed within block-level elements.
CSS lets you define a variety of properties
for all of these boxes. CSS positioning lets
you take these boxes out of the normal
flow and positioning them where you want
them to be.
The position declaration lets you control
the position of an element. Choices are:
static (in the flow of the page)
relative (also in the flow, but slightly
adjusted)
absolute (fixed position in the
document), or
fixed (fixed position on the screen).
position: static means that the HTML
element is positioned by the natural flow of
the page. That's what all HTML defaults to,
unless you tell it otherwise via CSS-P.
position: relative places the HTML
element in the natural flow of the page
(between the preceding element and
before the next one), and lets you adjust
its position relative to where it is. What?
Okay, once more, in plain language. We're
currently in a column that takes up half the
page and starts 10 pixels from the left side
of the page. Suppose I want the next
<p>
Want something to align to the
left... </p>
</div>
<div id="rightcontent">
<p>How the heck did he do that?
<p>Like this!</p>
</div>
</body>
</html>
Printer-friendly
CSS Positioning
home
introducing css-p
Laying out a page Printer-friendly page | Collapse all sections
with CSS
a basic layout
no frames
CSS gone wild
CTN 160
Web production
This is an example of a page laid out with CSS positioning to do the masthead
across the top, the left-sidenavigation and the main content (this part).
It uses CSS to change the color of the navigation elements on the left when you
mouse over them.
Previous | Next
Checkpoint: Lay out your page design with CSS-P. Take the
storyboard and use a pencil to draw a grid across the page. Once you
have drawn the grid, take some time to figure out how to describe the
positions and relationships. Try coding it using CSS-P divs for
everything you're placing. Elements of your site, such as graphics,
text and color, can be plugged into the divs, creating the same look as
the storyboard.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Laying out a page with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
body {
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
#masthead{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
background-color:#003366;
height: 75px;
}
#pageNav{
position: absolute;
top: 75px;
left: 0px;
width:178px;
padding: 3px;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
color: #FFFFFF;
height: 800px;
}
#left { padding:10px; }
#content{
padding: 0px 10px 0px 20px;
border-left: 1px solid #ccd2d2;
}
#siteName{
margin: 0px;
margin-left: 250px;
color: #ffffff;
font-weight: normal;
1 of 3
}
#sectionLinks{
margin: 0px;
padding: 0px;
}
#sectionLinks h3{
}
#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
font-weight: bold;
color: #CCCCFF;
text-decoration: none;
}
#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #3A75C4;
background-image: none;
font-weight: bold;
text-decoration: none;
}
.source {
font-family:"Courier New", Courier, mono;
font-weight:bold;
}
</style>
</head>
<body>
<div class="printme"><a href="#" target="_blank">Printer-friendly</a></div>
<div id="masthead">
<h1 id="siteName">CSS Positioning (CSS-P)</h1>
</div>
<div id="pageNav">
<h3>CSS Positioning</h3>
<div id="sectionLinks">
<a href="http://tinyurl.com/ctn160">home</a> <a href="reference08_cssp-01.html">introducing css-p </a> <a href="reference08_css-p-02.html">a basic
layout</a> <a href="reference08_css-p-03.html">no frames</a> <a
href="reference08_css-p-05.html">CSS gone wild</a> </div>
<div id="left"><p>CTN 160<br />
Web production</p></div>
</div></div>
<div id="content"><div style="float:right; "><a href="#"
onclick="window.open(self.location),'print'">Printer-friendly page</a> | <a
href="index.html">Collapse all sections</a></div>
2 of 3
<h1>Laying out a page with CSS</h1>
<p>This is an example of a page laid out with CSS positioning to do the masthead
across the top, the left-side navigation and the main content (this part).</p>
<p>It uses CSS to change the color of the navigation elements on the left when you
mouse over them. </p>
<p style="width: 75%; border: 1px solid #FFCC00; background-color:#FFFFCC; float:
right; padding:.5em; margin-bottom:1em; font-size:.85em"><strong>Checkpoint:
</strong> Lay out your page design with CSS-P. Take the storyboard and use a pencil
to draw a grid across the page. Once you have drawn the grid, take some time to
figure out how to describe the positions and relationships. Try coding it using
CSS-P divs for everything you're placing. Elements of your site, such as graphics,
text and color, can be plugged into the divs, creating the same look as the
storyboard.</p>
<p id="bottomnav"><a href="reference08_css-p-01.html">Previous</a> | <a
href="reference08_css-p-03.html">Next</a></p>
</div>
</body>
</html>
3 of 3
CSS Positioning
(CSS-P)
CSS Positioning:
bye-bye, tables!
Laying out a page with
CSS
<!DOCTYPE html PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1
/DTD/xhtml1Frames? We don't need transitional.dtd">
<html xmlns="http://www.w3.org
your stinkin' frames!
/1999/xhtml">
<head>
CSS-P with fixed positioning can look <title>CSS Positioning: throw
like a frame, one part of the page
away your frames</title>
stays put while the rest scrolls.
content="text/html;
(Frames display the contents of one charset=iso-8859-1" />
xHTML page within a section of
another page. If the contents are
body {
larger than the section set aside,
then the contents will scroll. Fixed
padding:0px;
positioning can offer the same effect, }
but all within only one file.)
#leftcontent {
position: fixed;
This can be of use for content that
left:10px;
you want to remain in the same
top:10px;
place on the page no matter where
width:48%;
the page the user has scrolled.
background:#fff;
Common uses include navigation,
}
logos, background images, and the
#rightcontent {
like.
position: absolute;
This won't work in all browsers. If it right:10px;
top:80px;
doesn't work in one (such as MS
width:48%;
Internet Explorer), try another (such }
as Firefox or Opera).
p,h1,pre {
Always test to ensure a page will be margin:0px 10px 10px 10px;
usable on browsers that aren't able
}
to render the code the way you
want.
1 of 2
Previous | Next
CSS Positioning
(CSS-P)
#source {
font-family: courier, courier
new, fixed;
}
</style>
</head>
<body>
<div id="leftcontent">
CSS Positioning:
<h2>
Frames? We don't need your
bye-bye, tables!
stinkin' frames, either!</h2>
Laying out a page with <p>If you think that was
something, wait till you see
CSS
this...</p>
</div>
<div id="rightcontent">
Frames? We don't need <p>How the heck did he do that?
<p>Nice of you to ask. Here's
your stinkin' frames!
the code...</p>
CSS-P with fixed positioning can look like a
</div>
frame, one part of the page stays put while the </body>
</html>
rest scrolls.
(Frames display the contents of one xHTML
page within a section of another page. If the
contents are larger than the section set aside,
then the contents will scroll. Fixed positioning
can offer the same effect, but all within only
one file.)
This can be of use for content that you want to
remain in the same place on the page no matter
where the page the user has scrolled. Common
uses include navigation, logos, background
images, and the like.
This won't work in all browsers. If it doesn't
work in one (such as MS Internet Explorer),
try another (such as Firefox or Opera).
Always test to ensure a page will be usable on
browsers that aren't able to render the code the
way you want.
Previous | Next
Big deal. Make it work
in Explorer
CSS-P gone wild
2 of 2
Checkpoint: Lay out your page design with
CSS-P. Take the storyboard and use a pencil
to draw a grid across the page, Once you
have drawn the grid, take some time to
CSS Positioning:
bye-bye, tables!
Laying out a page with CSS
Frames? We don't need your stinkin' frames!
Big deal. Make it work in Internet Explorer
Using CSS-P with fixed
positioning, I can do
something that looks like a
frame, wherein one side of
the page stays put while
the other side scrolls.
Fat lot of good that'll do
me if it doesn't work in the
most popular browser, MS
Internet Explorer.
No problem. Use a table to
separate the text as you
want it, then use the style
to set the size and area of
the part you want to scroll.
/DTD/xhtml1-transitional.dtd">
/1999/xhtml">
<head>
<title>CSS Positioning: throw away your
frames</title>
content="text/html; charset=iso-8859-1"
/>
body {
padding:0px;
}
#leftcontent {
Previous | Next
CSS-P gone wild
1 of 2
everything you're placing. Elements of your site, such as graphics, text
and color, can be plugged into the divs, creating the same look as the
storyboard.
2 of 2
CSS Positioning:
bye-bye, tables!
Big deal. Make it work in Internet Explorer
Using CSS-P with fixed
positioning, I can do
something that looks like a
frame, wherein one side of
the page stays put while
the other side scrolls.
Fat lot of good that'll do
me if it doesn't work in the
most popular browser, MS
Internet Explorer.
No problem. Use a table to
separate the text as you
want it, then use the style
to set the size and area of
the part you want to scroll.
/DTD/xhtml1-transitional.dtd">
/1999/xhtml">
<head>
<title>CSS Positioning: throw away your
frames</title>
content="text/html; charset=iso-8859-1"
/>
body {
padding:0px;
}
#leftcontent {
Previous | Next
CSS-P gone wild
1 of 2
everything you're placing. Elements of your site, such as graphics, text
and color, can be plugged into the divs, creating the same look as the
storyboard.
2 of 2
CSS Positioning:
bye-bye, tables!
Great.
Now what
are you
This is a look
forward to those of
Big
deal.
Make
it work in Internet
Explorer
supposed to do with that?
Well, just
wait...wild
CSS-P
gone
I suppose someone's wondering
how this page was created. Code's
over there. -->
Previous
Checkpoint: Lay out your page
design with CSS-P. Take the
storyboard and use a pencil to
draw a grid across the pageOnc.
e you have drawn the grid, take
some time to figure out how to
describe the positions and
relationships. Try coding it using
CSS-P divs for everything you're
placing. Elements of your site,
such as graphics, text and color,
can be plugged into the divs,
creating the same look as the
storyboard.
you who might continue working
with HTML. It's another page that
doesn't seem to work in the most
current version of MSIE, sadly.
If you're interested, see if you can
figure out how I kept the bottom
right div from scrolling over the
top
right
div.
<?xml
version="1.0"
encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0
Transitional//EN"
/DTD/xhtml1transitional.dtd">
<html
xmlns="http://www.w3.org
/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
<title>Practicing
CSS-P</title>
p, h2, pre {
}
div.one, div.two, div.three {
position: fixed;
1 of 3
width: 45%;
height: 40%;
border:solid;
border-width: 1px;
padding:10px;
}
div.one {
top: 180px; left: 10px;
height: 200px;
}
Great. Now what are you supposed to do
with that?
Well, just wait...
I suppose someone's wondering how this
page was created. Code's over there. -->
Previous
Checkpoint: Lay out your page design
with CSS-P. Take the storyboard and use
a pencil to draw a grid across the
pageOnc. e you have drawn the grid, take
some time to figure out how to describe
the positions and relationships. Try
coding it using CSS-P divs for everything
you're placing. Elements of your site,
such as graphics, text and color, can be
plugged into the divs, creating the same
look as the storyboard.
This
is a look
div.two
{ forward to those of you who
might
top: continue
180px;working with HTML. It's
another
that doesn't seem to work in
left: page
50%;
the
most current
version of MSIE, sadly.
height:
200px;
z-index:2;
If you're interested, see if you can figure out
background-color:#ffffff
how I kept the bottom right div from
}
scrolling over the top right div.
div.three {
top: 400px;
left: 10px;
height:45%;
}
div.four {
position: absolute;
width: 45%;
top: 400px;
left: 50%;
border: solid;
border-width: 1px;
padding:10px;
z-index:1
}
</style></head>
<body>
<div class="one"><p>Great.
Now what are you supposed to
do with that?</p>
</p>
</div>
<div class="two">
<p>This is a look forward to
those of you who might
2 of 3
Great. Now what are you supposed to do
with that?
Well, just wait...
continue working with
HTML.</p>
</div>
<div class="three"><p>I
suppose someone's wondering
how this page was created...
</p></div>
<div class="four"
style="font-family: courier,
courier new, fixed">Now you
know!</div>
</body></html>
This is a look forward to those of you who
might continue working with HTML. It's
another page that doesn't seem to work in
the most current version of MSIE, sadly.
If you're interested, see if you can figure out
how I kept the bottom right div from
scrolling over the top right div.
I suppose someone's wondering how this
page was created. Code's over there. -->
Previous
Checkpoint: Lay out your page design
with CSS-P. Take the storyboard and use
a pencil to draw a grid across the
pageOnc. e you have drawn the grid, take
some time to figure out how to describe
the positions and relationships. Try
coding it using CSS-P divs for everything
you're placing. Elements of your site,
such as graphics, text and color, can be
plugged into the divs, creating the same
look as the storyboard.
3 of 3
Tables
Introduction to tables
Tables were originally developed to display rows and columns of data on the Web.
It quickly became apparent however to layout-starving Web designers, though,
that tables could be used as a way to control the arrangement of elements on a
Web page. Even now, the most popular use of tables in Web design is as a layout
tool, although CSS does a much better job for layout so that's primarily how we'll
do layout in this class.
Tables are really meant to hold data, and that's what we're focusing on for them.
Attributes for <table>
style="position:relative;
marginleft:0px" (default) or
style="position:relative;
margin-right:0px" or
left | right
according to text.
To center a table
use a <div> or set
margins to auto
Text Text Text Text Text
Text
text text
Table aligned right
bgcolor
In a table, you can
set the background
color of an entire
table the row or a
cell. Use
hexadecimal
values. (And, yet
again, you can do
this with CSS as
well.)
border
Border value is
defaulted at 1
pixel. To turn it off,
set it must be set
to 0. The number
represents a pixel
value. As usual,
CSS gives you
much more control
over borders than
does an HTML
attribute, if you
want a highly
styled table. CSS
borders are in the
sample code for a
complex data table,
covered further
along in this
section.
cellpadding
space within cells
blue
blue
Table blue background
Border on
cell
Border off
cell
cellpadding is set at 15
pixels
cellspacing
space between
cells
cell
cell
cellspacing is set at 15
pixels
The summary of a table never shows up in
visual browsers; it exists solely for screen
readers and speech browsers. It is simply a
summary of what the table contains, a longer
description than the caption. Most software
summary
reads the summary immediately before reading
the caption.
Next section
Tags within a table
The basic tags found within a table are <td>.....</td> to define table cells,
<th>.....</th > to define table headers, and <tr>....</tr> to define a table
row. The various attributes of these tags allow even more control over the initial
cells within the table.
Tag
Description
Common attributes
Contents of this tag display
immediately above the table itself.
<caption>...</ Usually contains a description of
what's going to be in the table.
caption>
Typically not used in layout, only
for data tables.
<tr>....</tr>
Table row. All table cells and table
headers need to be inside a table
row.
bgcolor
valign = vertical
alignment
style="text-align:"
left|right|center
refers to the content
of the cell
bgcolor
Table header. Depending on the
colspan
browser settings, text in a table
rowspan
header may be bold or larger than valign = vertical
default. The table header is used
alignment
<th>.....</th >
for row headers or column
th scope="row"
headers, those labels in a data
table that tell what's in the defined associates the text in
this cell with every
cells. See the example below.
cell in this row
th scope="col" does
the same thing for
columns
Table cell (aka table data). Any
content in your table must be in
<td>.....</td>
style="text:align"
left|right|center
refers to the content
of the cell
bgcolor
colspan
either a table cell or a table
header.
rowspan
valign = vertical
alignment
The following data-table tags are typically not used in layout tables, and are
not yet well-supported by all browsers, but they'll be tremendously helpful in
the future.
<thead> ... </
thead>
<tfoot> ... </
tfoot>
<tbody> ... </
tbody>
Defines a group of header rows
(generally the column labels across
the top) in a data table. A thead
holds <tr> .. </tr> containers,
each of which will have <th> ... </
th> containers inside it. A table
can only have one thead. THEAD
lets supporting browsers include
the header rows on each page of a
printed, multi-page table, and
present a long table with a
scrolling body and static header
rows.
Defines a group of footer rows in a
data table. A tfoot will have
<tr> ... </tr> containers inside it,
each of which will have <td> ... </
td> containers in it. A table can
only have one tfoot. Counterintuitively, in the code the <tfoot>
is supposed to precede the
<tbody>, even though it'll be
displayed below the <tbody> on
the rendered page. Supporting
browsers will include the footer
rows on each page of a printed,
multi-page table, and will present
a long table with a scrolling body
and static footer rows.
Defines a group of data rows in a
table. Supporting browsers will
scroll the tbody while leaving the
thead and tfoot static .
Example table
Mortality rates
Cats Dogs
Cars
5% 12%
Curiosity 23%
2%
<table border="1" cellpadding="3" cellspacing="0">
<caption style="font-weight:bold; font-size:1.2em">
Mortality rates
</caption>
<thead><tr>
<th> </th>
<th scope="col">Cats</th>
<th scope="col">Dogs</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><div style="text-align:left">Cars</div></th>
<td><div style="text-align:right">5%</div ></td>
<td><div style="text-align:right">12%</div></td>
</tr>
<tr>
<th scope="row"><div style="text-align:left">Curiosity</div></th>
<td><div style="text-align:right">23%</div></td>
<td><div style="text-align:right">2%</div ></td>
</tr>
</tbody>
</table>
Previous | Next
Basic tables
The most basic table contains at least these container tags:
<table>
<tr>
<td> 123 look at my data! </td>
</tr>
</table>
Any content in a table must be contained within <td>...</td>.
Any <td>...</td> must be contained within <tr>...</tr>.
Any <tr>...</tr> must be contained within <table>...</table>.
Below is a simple table:
<table>
<tr>
<td></td> <td></td>
</
tr>
<tr>
<td></td> <td></td>
</
tr>
</table>
Previous | Next
Table sizing
Use CSS to control the width and height of a table. Like many of the values we
have learned, these can be set by using either pixels or a percentage %. A table
set at a percentage will change size only in relation to the window. A table set at
pixels will not change size at all. As a default, tables will grow to fit the content
placed in side of them.
It is also possible to control the width and height of cells. Use the width and
height attributes the same way you would for a table. The table below has the
width and height of the table and the cells specified.
10% test
test
test
test
test
The table above is 70% of the screen and the cells are 10% and 90%. By
controlling the sizing of a table we can make the layout of Web page extremely
precise.
<head>
<!-table.demo {
width: 70%;
height: 120px;
}
-->
</style>
</head>
<table border="2" class="demo">
<tbody>
<tr>
<td style="width:10%">10%</td>
<td style="width:90%">test</td>
</tr>
etc...
Previous | Next
Colspan and rowspan
colspan will allows one to span multiple columns while rowspan allows one to
span multiple rows. Place the colspan or rowspan attribute in the first cell of
that row or column. Remove any extra cells in subsequent rows/columns to give
the span room to work.
A basic table HTML for a 2-row table with three columns:
<table border="1">
<tr>
<td>row 1 column 1</td>
</tr>
<tr>
</tr>
row 1 row 1 row 1
column column column
3
2
1
row 2 row 2 row 2
3
2
3
</table>
For example, if you have a 2 column 2 row table with four cells, and you want the
first cell to span 2 columns, remove the second cell in that row.
Notice below how one must balance the rows and columns spanned.
this code works:
<table>
<tr>
<td colspan="2">test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
results -->
test
test test
this code won't do what you want it to:
<table border=1>
<tr>
<td colspan=2>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
test
results --> test
test
test
test
The differences between rows and columns
When columns are
Remember, under normal If columns go side-toside, something has gone spanned, something goes
circumstances, columns
across them--like a roof.
terribly wrong.
always go up and down.
When something spans
rows, it's probably sitting
partly in your seat. I often
Rows, on the other hand, If you have horizontal
should always go side-to- rows, something bad has sit next to rowspanners in
airplanes.
happened.
side.
Previous | Next
Keeping track
The HTML for tables is hard to figure out just by looking at it. Creative comments
and indentations can help. (Note that this deviates from the standard indentation
style, in which all the td tags line up in the same place.)
<table border="1">




<tr>
<td>row 1 column 2</
td>
td>
</tr>
row 1 row 1 row 1
3
2
1
row 2
row 2
row 2

<tr>
<td colspan="2">test</td>
</tr>
<tr>
</tr>
test
test
test
<td>test</td>
<td>test</td>
</table>
<table border="1">
here-->
<tr>
<td rowspan="2">test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
Previous | Next
Tables and color
test
test
test
Earlier in this class, we learned that color can effect a person's mood or emotion.
It can change a person's perceptions and it can invoke memory. Combine color
with a table and do it well, and you get up with an effective way to direct the
attention of your audience. Do it poorly and you still get an effective way to direct
the attention of your audience--but to someone else's Website.
When using color within a table, there are three options:
Color the entire table
<head>
<!-table {
background-color: #9999CC;
}
-->
</style>
</head>
Color a whole row
<head>
<!-tr.withcolor {
}
-->
</style>
</head>
Color a single cell
<head>
<!-td.withcolor {
}
-->
</style>
</head>
1
2
3
4
1
2
3
4
1
2
3
4
Header Title
Content,Content
Section
Content, Content,
one
Content
Practical use of
color in a table
Out of control
A
B
C
D
E
F
G
H
U
J
K
L
M
N
O
N
P
1
2
5
6
8
Y
H
C
B
M
D
G
U
Previous | Next
Background images
Using a background image allows you to experiment with a limited form of
layering. Background images in a table can add an air of sophistication to a Web
page, jazz up an otherwise dull page, or qualify you for mention at http://
www.webpagesthatsuck.com/. If you insist on taking your chances with
background images, there are many ready-made background images that still
allow text to be easily read despite the background image.
The example below is a simple table with a background image.
Welcome to Plant World
Dahlias
$3
Tulips
$2
Rootabagas
$1
Parsnips
free
Brussels sprouts
we pay you
To add an image to the background of a table <table class ="funky">, use the
code below.
<head>
<!-.funky {
background-image: url(background2.gif);
color: #FFFFFF;
}
-->
</style>
</head>
You can also add background images to individual cells, by assigning the class to
the td.
<table>
<tr>
<td>No background here</td>
<td class="funky">Background here</td>
</tr>
</table>
Backgrounds will tile unless you tell them not to, meaning the same image is
displayed multiple times--usually with an ugly seam. Setting the size of the table
with pixels or actually resizing the image can sometimes help eliminate this effect.
Or, to stop it from repeating, just add background-repeat: no-repeat to the style:
.newbackground {
background-repeat: no-repeat; }
By the way, if you want a background image to be fixed when the page scrolls,
you can do it like this:
body {
background-attachment: fixed; }
Previous | Next
Tables for layout
One of the most popular-but-now-obsolete uses of tables has been as a page
layout tool, even though that's not what they're supposed to be used for. In this
class, we use CSS for page layout and tables for data presentation, since anything
you can lay out with tables you can do better with CSS.
Historically (before CSS), tables were used for page layout in many different ways,
including giving a document margins, aligning content with a background image,
doing complex page layout, and controlling layout of images and text.
Nested tables
Nested tables can give you a lot of flexibility when it comes to data presentation.
However, because you are doing a table within a table, they can also be very
complicated. It is important to make sure that every cell, row and table is
properly closed. Using spaces and indents between your HTML code can help you
to keep things straight and avoid errors. The example below is a Web page that
uses nested tables.
Arrivals
Departures
Missing
baggage
Bonus
miles
Missing baggage
Flight 1
Flight 3
Flight 5
Flight 2
Flight 4
Flight 6
To reclaim your lost luggage, bring
your passport, a major credit card,
and five gallons of your own blood,
to any of our convenient distribution
centers in Wyoming.
Below, borders have been added to the table so that you can see exactly where
the tables begins and ends.
Arrivals
Missing baggage
Departures
Missing
baggage
Bonus
miles
Flight 1
Flight 2
Flight 3
Flight 4
Flight 5
Flight 6
To reclaim your lost luggage, bring
your passport, a major credit card,
and five gallons of your own blood,
to any of our convenient distribution
centers in Wyoming.
The HTML for this nested table is below. All of the table tags are in red, and the
nested table has been indented.
<html>
<head>
<title>Nested Table Example</title>
<body>
<table>
<tr>
<td style="background-color:#CC3399; width:20%">
<a href="in.html">Arrivals</a><br />
<a href="out.html">Departures</a><br />
<strong>Missing baggage</strong><br />
<a href="bonus.html">Bonus miles</a><br />
</td>
<td width="80%">
<h2>Missing baggage </h2>
<table>
<tr>
<td>Flight 1</td>
<td>Flight 2</td>
</tr>
<tr>
<td>Flight 3</td>
<td>Flight 4</td>
</tr>
<tr>
<td>Flight 5</td>
<td>Flight 6</td>
</tr>
</table>
<p>
To reclaim your lost luggage, bring your passport, a major credit card, and five
gallons of your own blood, to any of our convenient distribution centers in
Wyoming.
</p>
</td>
</tr>
</table>
Previous | Next
Using CSS to format a complex data table
Data tables often present complex information. Good use of color and borders can
make these considerably easier to read. Investing some time in setting up custom
CSS for the elements in a table will result in more digestible data presentation.
College Airlines Flight Schedule
Flight Number: From: To:
Departure: Arrival:
BA 98107
Ballard Fremont
19:20
SSCC 98126
SSCC White Center 19:40
19:21
19:40 1/2
Total: 3 flights
The code for the table itself is fairly straightforward. The colors are drawn from
the CSS. Here's the code that created this table:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A complex data table</title>
<!-/* datatable style */
.datatable {
border-collapse:collapse;
font-family:arial, helvetica, sans-serif;
font-size:100%;
}
.datatable caption {
font-size:120%;
font-weight:bold;
color:#000000;
padding: 3px;
text-align:left;
}
.datatable thead th {
color:#FFFFFF;
text-align:left;
padding: 3px;
border-bottom: solid 1px #99CC99;
vertical-align: top;
font-weight:bold;
}
.datatable tbody th {
background-color:#99CCCC;
text-align:left;
color:#000000;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #99CC99;
border-bottom-color: #99CC99;
padding: 3px;
font-weight:bold;
}
.datatable tfoot td {
font-weight:bold;
background:#666699;
color:#FFFFFF;
padding: 3px;
}
.datatable tbody td {
background:#FFF;
padding: 3px;
border: 1px solid #DCDCC1;
}
.datatable tbody tr.odd td {
background-color:#CCCC99;
}
/* end data table */
-->
</style>
</head>
<body>
<table class="datatable" summary="This table lists all the
flights by College Air leaving campus today.">
<caption>
College Airlines Flight Schedule
</caption>
<thead>
<tr>
<th
<th
<th
<th
<th
scope="col">Flight Number:</th>
scope="col">From:</th>
scope="col">To:</th>
scope="col">Departure:</th>
scope="col">Arrival:</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">Total: 3 flights</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">BA 98107 </th>
<td>Ballard</td>
<td>Fremont</td>
<td>19:20</td>
<td>19:21</td>
</tr>
<tr class="odd">
<th scope="row">SSCC 98126 </th>
<td>SSCC</td>
<td>White Center </td>
<td>19:40</td>
<td>19:40&nbsp ;<sup style="font-size:10px">1</sup >/
<sub style="font-size:10px">2</sub ></td>
</tr>
<tr>
<th scope="row">AND 331øø</th>
<td>Seattle</td>
<td>Andromeda</td>
<td>2006</td>
<td>4032</td>
</tr>
</tbody>
</table>
</body>
</html>
Previous | Next
Table practice exercises
Tables are confusing by nature, and the best
way to get a good handle on them is to do a lot
of them. Try these exercises. Incorporate one of
them into either your final project or your Bad
xHTML page. If you run into any troubles, start
a thread in the classroom discussion area and
we'll all work together to problem-solve.
Using a table and CSS, create a grid similar to
the one pictured below. (Hint: there's sample
code within this the table reference document
that you can use as a base.) For the content,
you may select a subject of interest to you. Feel
free to use any color combination you like .
Run your code through the validator at http://
validator.w3.org/ and correct any errors it finds.
Previous
Inline
frames
Checkpoint, tables: Incorporate a data table into either your class project
or your Bad HTML page(s).
Frames--the good, the bad, and the confusing
We've already seen how you can use CSS-P to split the text in an xHTML file so it
shows up in different parts of the browser window, even with independent
scrollbars for different parts if you so desire.
In xHTML, you can also split the browser window into multiple smaller windows
called frames, each of which displays the contents of a separate HTML document.
The contents within some of these frames can remain constant even when the
user is using hyperlinks to change the contents of another frame.
The use of frames in Web design remains somewhat controversial.
On one hand, frames increase the ways you can display information, and let
you combine the contents of two or more separate files into a single browser
window. For example, frames can keep the navigation ever-present while the
user clicks through content.
On the other hand, frames can often be an impediment to users.
Frames increase download time because you are actually loading
multiple pages, each requiring a separate trip to and from the Web
server.
Frames can defeat a user's efforts to bookmark a page (the browser
saves the location of the page containing the frame, not the actual
frames' contents).
If a search engine leads a user to a single frame page instead of its
containing page, the user won't be able to see the site in its full context.
For example, if one frame has navigation and another has content, the
user coming from a search engine directly to the content page will have
no way to navigate through the site .
Next section
Inline frames
Old-style frames, which combined multiple pages using framesets, are no longer
considered best practice; they have a lot of drawbacks. They'll not be covered in
the active materials for this class, although for the historians among you, a quick
Web search for "frameset tutorial" will yield lots of information about them.
The newer inline frame, or iframe, is still of interest, though.
The iframe element inserts a frame within a block on a regular html page.
Inserting an inline frame within a section of a page allows you to insert an HTML
document in the middle of another, to align it with surrounding text, to add
scrolling if desired, etc.
The file to be inserted inline is designated by the src attribute of the iframe tag.
The contents of the iframe container (in other words, the stuff between the
<iframe> and the </iframe> serves the same purpose as the value of an alt
attribute in an image tag--it will only be displayed by browsers that don't display
frames. The text between the opening and closing <iframe> tags only displays in
browsers that don't support frames.
For browsers that support frames, the following example will place an inline frame
surrounded by a border in the middle of the text.
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org /1999/xhtml">
<head>
<title>An Inline frame with news</title>
<meta http-equiv="Content-Type" content="text/html;
</head>
<body>
<h1>Important information</h1>
<table>
<tr>
<td>
<h2>My favorite links</h2>
<ul>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.cnn.com">CNN</a></li>
</ul>
</td>
<td>
<iframe src="newsfeed.html" width="400" height="500"
title="Today's news" name="newsframe"
scrolling="auto" frameborder="1">
[Your browser does not support frames or is currently configured
not to display frames. However, you may <a
href="newsfeed.html">visit the newsfeed page</a> to read the
latest news.]
</iframe>
</td>
</tr>
</table>
<hr />
<p>That's all, folks.</p>
</body>
</html>
Scrolling <div> using CSS-P
All one xHTML page, including contents of scrolliing area
Scrolling <iframe>
The scrolling area is a completely separate xHTML page
Previous | Next
Targeting frames
One of the biggest challenges in using frames is making sure that links make the
linked documents show up in the correct windows. By default, a linked document
wil load in the same window that originally held the link. (Otherwise, for example,
every time you clicked a link on the Web you'd launch a new window or a new
instance of the browser.) Inline frames divide a single browser window into two or
more sections, each of which acts as its own window within the page. One of the
benefits of frames is being able to display information (site navigation, for
example) consistently in one window (frame) while the information changes in
another. This can be achieved by targeting a link toward a specific , named frame.
The first thing to do is to name the frame into which you want the link to load. This
provides a way to refer a link to a specific named window.
<iframe src="page1.html" name="mainwindow" title="site content"
width="200" height="200" />
Now any link can load a document into this named inline frame if we use the
target attribute.
<a href ="page3.html" target="mainwindow">
Previous | Next
The base tag
The target attribute of the <base /> tag allows one to target a default frame
where all linked pages will appear. In this way, rather than providing a target
inside the <a> tag for every link on a page, one can simply use the <base /> tag
to specify the target window once. The <base /> tag should be placed in the
<head> container of your document. The <base /> tag is easily overridden by
simply specifying a different target in the <a> link tag.
In the example below, all of the links will default and appear in the frame
mainwindow, with the exception of the link to page 4 which will override the
default and appear in the navwindow frame. Of course, you'll have to specify an
<iframe name="mainwindow" /> iframe with the matching name; the target
values won't do what you want if they don't match the name of an existing frame.
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org /1999/xhtml">
<head>
<title>Link targeting with inline frames</title>
<meta http-equiv="Content-Type" content="text/html;
<base target="mainwindow" / >
< /head>
< body>
< a href="page1.html">Go to Page 1</a> <br />
<a href="page4.html" target="navwindow">Go to Page 4</a> <br />
<iframe name="navwindow" width="100" height="200" src="nav.html" />
<br />
<iframe name="mainwindow" width="500" height="400" src="main.html" />
< /body>
< /html>
An iframe name can be pretty much anything you choose, with the exception of
four dedicated names that have special meaning. Read on...
Previous | Next
Dedicated target names
There are four dedicated target names that can be used to direct a link to a
particular iframe (or an entirely separate browser window) without specifying the
name of that frame in the <iframe /> tag. They are _blank, _self, _parent
and _top. Each of these names is preceded by an underscore _.
target="_blank">
In this case, page1.html would always
open in a completely new window. Each
time a link is targeted to _blank it will
open a new window. When used for
multiple links, _blank has the potential to
confuse users, leaving them with multiple
windows open.
target="_self">
In this case, page1.html would open in the
same window that the link appeared. In
HTML, _self is the default if you do not
set a target. Because of this, it is generally
used when a target has been set by the
<base /> tag.
target="_parent">
The _parent target is used with nested
frames (frames within a frame). In this
case, page1.html would be opened in the
parent frame of the nested frame. Nested
frames can be very confusing to a user
(and to you as a coder) and are not to be
used lightly.
target="_top">
In this case, the frames would disappear
and the page1.html would be loaded in the
window, completely without frames. _top
can be a very useful target, especially
when giving a user the choice to not use
frames.
Previous
Forms in xHTML
xHTML forms
Forms are one of the first steps toward making a Website interactive . Visitors can
use a form to submit data (such as an email address), or they can select data
(such a page to be viewed).
Forms generally have two parts: 1) what the user sees on the screen (written in
xHTML), and 2) the processing code that resides on the server and determines the
action that the form will take (written in some sort of scripting or programming
language).
The xHTML interface of the form contains fields for inputting data and buttons for
making selections. The processing code, which is far more complicated than the
xHTML, traditionally referred to as the CGI (Common Gateway Interface) script, is
written in a scripting language such as Perl or TCL or VBScript or asp.Net. This
back-end form script is basically a set of instructions for how the information in
the form will interact with the server.
Learning to write CGI scripts can be a very complex endeavor ; xHTML is quite
simple by comparision. Luckily, there are many places on the Web, such as Matt's
Script Archive, http://www.scriptarchive.com/ or hotscripts.com, that offer readymade, customizable CGI scripts for free. The script usually has to be placed in a
cgi-bin directory on a Web server. A cgi -bin directory is a special directory that
allows a form to interact with a cgi script, all without showing the user that script
or the contents of the directory. A cgi-bin directory is generally set up by your
Internet Service Provider (ISP) or systems administrator.
In many cases your ISP may have ready-made scripts already available for its
customers to use. Always check with them before doing any other work, since a
script that they support will be less headache for you than trying to make one
work yourself unless you're a network engineer and a programmer. In any case,
once a script is in place and working, simply link to it in the form action (keep
reading) to create the interaction.
If your Internet Service Provider doesn't have form-processing scripts available for
your use, there are a handful of services that offer such scripts for free (usually
subjecting your users to an advertisement) or for a modest fee (starting below $
10/month). In case you've forgotten how Google works, here are a couple of
examples:
Response-o-matic
http://www.response-o-matic.com/
Free AllForms, at
http://allforms.mailjol.net/main.html
Next section
The <form> tag
All elements of a form are contained within the <form>...</form > container. The
<form> tag is very important , because it is the key to any interaction between the
form and the cgi script.
<form action="http://www.someserver.com/cgi-bin/script.pl"
method="post" title="Show us the money">
The action attribute tells the form where to go so it can find out what it's
supposed to do. In more technical terms, it provides the URL location of the cgi
script to be used for processing the form.
Pretty much every form-processing script on the Internet is different, so you can't
view the source on someone else's Web form, copy the form action, use it on your
form, and expect it to work. The form action you use has to be the actual location
of a script that you verified is available for your use.
In the example, we are pretending that there's a Website at http ://
www.someserver.com that has, in its cgi-bin directory, a script called "script.pl"
that is available for your use. As far as I know, there's no such Website or script,
so be sure you replace this with actual information if you want your forms to work.
method="post" title="Show us the money" >
The method attribute refers to how the information will be sent to the server. With
the get method, the information is added to the end of the URL and submitted to
the server. With the post method, information is sent to the server in a data file.
Generally, the script you are using will specify what method should be indicated
on the form.
The title attribute of a form tag contains information that helps people who have
accessibility issues to understand and navigate the form and the page it's on.
Previous | Next
Form elements
Every element in a form should be inside a <label>...</label > container, for
accessibility reasons. You'll see this demonstrated as we look at individual
examples.
A form can offer a number of ways in which the user can input data. Many of
these ways are specified by the type attribute of the <input /> tag.
<input type="...whatever form the input will take..." / >
Along with the type attribute/value, input fields also require the name attribute/
value. This the gives the data inputted in this field a name (duh...) and helps the
script determine how to process the information. The value for the name attribute
should not have any spaces, although the underscore _ is permissible. The value
attribute may be included in an input tag if you wanted to specify the data value-particularly important with checkboxes and radio buttons so you'll know what the
user has selected.
The input name would correspond to the field name in a database, or the column
or row header in a spreadsheet. In a text field, what the user types into the box
becomes the value for that input.
This code:
<p><label for="employment_location">City<br / >
<input type="text" name="city" id="employment_location" />
</label></p>
<p><label for="user_email_address" >Email address<br />
<input type="text" name="email_address" id="user_email_
address" />
</label></p>
Creates this:
City
Email address
Which might wind up in a database looking like this:
A
B
1
city
email_address
2 Seattle [email protected]
3 Bothell [email protected]
Use the <label> tag and associated for attribute to identify the exact words that
you want to use as the label for the form element. The for attribute uniquely
identifies that element.
Use the id attribute in the associated form element to tie that form element to its
associated label.
Don't use the same value for the name and id attributes. The labels may not work
for fields where the id and name values are identical. The labels work once these
values are unique.
<form>
<table>
<tr>
<td><strong><label for="first"> First name:</label> </strong ></td>
<td><input type ="text" name="first_name" id="first" ></td>
</tr>
<tr>
<td><strong><label for="last"> Last name:</label> </strong ></td>
<td><input type ="text" name="last_name" id="last" ></td>
</tr>
</table>
<p>
<input type ="submit" value="Send your info ">
</form>
Previous | Next
<input type="text" />
The text box is the simplest way to input data, and it's the default for the
<input / > tag.
<p><label for="email address"
>Email address<br />
<input type="text"
name="email_address" id="email
address" />
</label></p>
Email Address
By default, a user can type as much as they want into the text box. The
maxlength attribute imposes a maximum length on content; the value sets the
number of characters allowed.
The default size for the space displayed in a text box is 20 characters. A user can
type as much as they want in there, but they'll only see 20 characters at a time
unless you say otherwise. The size attribute, whose value should be the desired
number of characters wide, sets the size of the text box.
<label for="email">
<input type="text" name="email_address" id="email" size="40"
maxlength="50" />
</label>
This input field will accept 50 or less characters (maxlength). The size of the box
will be 40 characters wide (size ). Enter more text than that and the text will scroll
to the side.
Previous | Next
Checkboxes and radio buttons
For text boxes, the value = whatever the user types into the box.
Checkboxes and radio buttons allow the user to input data simply by checking a
box or button. Because the button or box is turned off or on, and no data is
actually entered, the value attribute has to be set within the tag.
Radio buttons
Radio buttons allow only one of the choices to be selected at a time. You cannot
pick multiple radio buttons at once.
<p>What is your favorite color<br />
<label for="color choice 1">
<input type="radio" name="color"
id="color choice 1" value="blue" />Blue
</label>
<label for="color choice 2 ">
id="color choice 2 " value="green" /
>Green
</label>
id="color choice 3 " value="red" />Red
</label> </p>
Blue
Green
Red
CheckBoxes
Checkboxs allow one or more of the choices to be selected at a time. You can pick
multiple selection boxes for one item.
<p>What are your favorite colors<br />
<label for="color choice 1">
<input type="checkbox" name="color"
id="color choice 1" value="blue" />Blue
</label>
id="color choice 2 " value="green" /
>Green
</label>
id="color choice 3 " value="red" />Red
</label></p>
Blue
Green
Red
Previous | Next
<textarea />
To create a larger area for text, use the <textarea> container tag. The
<textarea> tag is not another attribute of <input />, but rather a separate tag
with its own set of attributes and values. The size of the text area is controlled by
using the rows and cols attributes. The rows attribute is set to equal the number
of rows the text area should have. The cols attribute indicates the width of the
text area in characters. Unlike the <input /> tag, the <textarea> tag must be
closed, by </textarea>. Anything written within this container tag will appear in
the text area as well.
<p><label for="My vacation">What did
you do on your vacation?<br />
<textarea name="vacation" id="My
vacation" rows="5" cols="35"> On my
vacation I... </textarea ></label></
p>
Previous | Next
Form buttons
What did you do on your
vacation?
On my vacation I...
The submit button sends the information gathered in a form to the server to be
processed. The value for the value attribute changes the text on a submit button;
otherwise the button displays the default text, "Submit".
<input type="submit" />
Submit
<input type="submit" value="send info" />
send info
The reset button erases any information that's been typed into the form and
returns the page to its original empty state. The button 's default text is Reset, and
it can be changed in the same way as with the submit button.
<input type="reset" />
Reset
<input type="reset" value="start over" />
Start Over
You can change the default looks of a button with CSS.
<input type="submit" style="fontweight:bold; color:#00FFFF; backgroundcolor:#FF00FF; border: 5px solid #
663399" />
Submit
(Nobody said it was gonna be pretty.)
Using an image as a submit button
You can also use an image as a submit button instead of using the default xHTML
button. Use the <input /> tag with the attribute and value type="image" Several
attributes are used in conjunction with this and allow you to better control the
image.
<input type="image" src="button.gif" />
<input name="gobutton" type="image"
src="button.gif" alt="Go" style="width: 24px;
height: 22px; border: none" />
Set the action of a form to a URL, and clicking on the button will take your user to
that Website.
<form action="http://www.flipdog.com">
<input type="submit" value="Get a Job" / >
</form>
Get a Job
Previous | Next
Other <input /> types
There are several other attributes of the <input /> tag that you can use to create
a form. You will likely encounter the password and hidden types.
The password type functions exactly the same way as a text input, except the
contents typed into the input box appear on the screen as *****.
Hidden input types send extra information to the CGI script on the server.
Website users won't see a hidden field unless they happen to look at the code.
<input type="hidden" name="required_fields" value="visitor_email_
address" />
<p><label for="password" >Password<br />
<input type="password" id="password" name="user_pass" />
</label></p>
Previous | Next
Select lists (option lists)
Forms can also display a list of options for a person to select from . The <select>
container tag encloses all parts of the list, which consists of individual choices in
<option> containers. The size attribute of the <select> tag sets the display to
multiple options at once. If you add the attribute/value multiple="multiple" to
the <select> tag, then the user can choose more than one item from the option
list, by clicking while holding down the Ctrl key (Windows and Linux) or Command
key (Mac OS).
Pulldown Menu
<label for="color choice">
<select name="color"
id="color choice">
<option
selected="selected"
value="red">Red</option>
<option
value="blue">Blue</option>
<option
value="green">Green</
option>
<option
value="yelow">Yellow</
option>
Scrolldown Menu
<label for="color choice">
<select name="color"
id="color choice" size="3"
multiple="multiple">
<option value="red">Red</
option>
<option
value="blue">Blue</option>
<option
value="green">Green</
option>
<option
value="yellow">Yellow</
option>
</label>
</label>
Red
Blue
Green
Yellow
Red
As usual, the name attribute of the <select> tag refers to the name that will be
associated with the results of what the user chooses from the form (the field name
or column heading if you're used to databases or spreadsheets). For the pulldown
menu, the selected="selected" attribute/value of the <option> tag sets an item
to be initially displayed. The size attribute within the <select> tag creates a
scrolldown menu. The value for size refers to the number of options that will be
displayed. When there are more options than are displayed, a scroll is created.
Form select lists as navigation tools
Form select lists combined with some basic cut-and-paste javascript can create a
fairly effective navigation tool, the pulldown menu. When using javascript, you will
usually need to paste the actual script in the <head> container of the document for
it to work best.
Go to....
Go!
Pull Down Menu Instructions
http://javascript.internet.com/navigation/menu.html
Previous | Next
Connecting a form action to a working form-processing
script
My colleagues at Seattle Central Community College, Bill and Sara Newman, have
been kind enough to let us use their form -processing script for this class. If your
form doesn't work, you can read their reference materials for the script at http://
newmanic.com/forms.asp.
Alternatively, you can just copy the html below (scroll below the explanations for
easy-to-copy html) and change the contents of each value it so it's tailored to
your own site. Do not change the input tag's name, the Response-O-Matic script
that processes these pages searches the data input from the form in order to find
the content (values) of these predetermined named inputs.
1 <form method="post"
action="http://
www.newmanic.com/
formhandler3.asp">
Don't change a word of this line. It's what
controls where the form content is sent
and what it does.
2 <input type="hidden"
name="ToEmail"
In the value, replace my email address
with yours.
value="alboss@
southseattle.edu" / >
name="ToFirst" value="Al" />
<input type="hidden"
name="ToLast" value="Boss" /
>
In the value, replace my name with yours
name="Subject" value="email
from some flounder" / >
In the value, replace "email from some
flounder" with whatever subject line you'd
like email sent by this form to have
name="Thanks" value="http://
aboss.freehostia.com/
thankyou.html" / >
Replace the value with the url of a page
on your site--where you want the user to
return after they fill out the form.
The following xHTML will create visible form fields for the user to fill out. These
examples have special names that the script will handle differently, so do not
change the name="..." text.
6 <input type="text"
name="FromName" />
or
<input type="text"
name="FirstName" />
<input type="text"
name="LastName" />
7 <input type="text"
name="FromEmail" />
The top item captures the user's whole
name. The bottom two options let you
receive first and last names in separate
fields. The FirstName and LastName
name="value" pairs must be used together
or the form won't work correctly.
Have your user enter THEIR email so you
can easily respond to them via the form
email sent to you upon submittal of your
form ~ BUT be sure to use some
JavaScript email verification to test for an
accurate email address, because a bad
email address will break this form
Easy-to-copy html:
The items in red text are the ones you should change.
<form method="post" action="http://www.newmanic.com/
formhandler3.asp">
<input type="hidden" name="ToEmail" value="___________ " />
<input type="hidden" name="ToFirst" value="___________ " />
<input type="hidden" name="ToLast" value="___________ " />
<input type="hidden" name="Subject" value="___________ " />
<input type="hidden" name="Thanks" value="___________ " />
<input type="text" name="FromName" />
<input type="text" name="FromEmail" />
Put all the rest of the visible form fields below this, and don't forget to close the
form with </form> after you've put in the submit button.
Form select lists as navigation tools
Form select lists combined with some basic cut-and-paste javascript can create a
fairly effective navigation tool, the pulldown menu. When using javascript, you will
usually need to paste the actual script in the <head> container of the document for
it to work best.
Go to....
Go!
Pull Down Menu Instructions
http://javascript.internet.com/navigation/menu.html
Fun with buttons
Set the action of a form to a URL, and clicking on the button will then take your
user to that Website.
<form action="http://www.flipdog.com">
<input type="submit" value="Get a Job" / >
</form>
Get a Job
Previous
Adding
interactivity
to a Web
Checkpoint, forms: If your project site calls for a working form, then add
one. You can use the Newmanic script detailed above for this class,
although you'll have to work with your ISP or network people if you need a
permanent one after this quarter ends.
If your project does not call for a working form, then add one to your Bad
xHTML site.
If you have no idea what kind of form you'd add to your Bad Site, just
pretent that you have opened an online store that sells and delivers madeto-order pizza, using your own unique ingredients and delivery methods.
Allow your customers to choose from among your ingredients and create
their own pizza. Your form should allow the customers to choose from
among 3 different sizes, 3 different types of crust, 10 different types of
page
toppings and 3 different modes of delivery. Don't forget to include in the
form some sort of way you can collect your money. Your form should also
include proper options for submitting and resetting information.
It has become tradition over the years in this class, for the pizza business
forms to feature some pretty bizarre stuff. I've had people offering delivery
by rocket, teleporter, pixie dust, pony, etc., and including among the
ingredients choices such as watermelon rind, lint, gravel, cigarettes,
helicopters, armadillo, and so forth.
programatically
Stupid Net tricks, Javascript, Java, and more
We don't get the chance in this class to learn scripting languages or Java
programming, but anyone who can follow a URL, cut and paste, and follow
directions can add some scripting to a Web page. Notice that those qualifications
(follow URL, cut, paste) don't include a requirement for having good judgment.
This explains a lot of the kind of Javascript features one finds online; along the
lines of mouse pointers that turn into dancing, singing teddy bears.
Scripts generally make pages more dynamic, either active or interactive with the
user, or somehow responding to a specific condition (changing the look of a page
depending on the user's Web browser, for example).
Next section
Server-side scripting
Server-side scripting, in which programs run on the Web server, is well beyond
the scope of this class. The term server-side means that the program is running
on the Web server and does something to the code before it sends it to the Web
browser on the user's computer.
Brief overview: depending on the server's operating system and server software,
common scripting languages include Perl, Server-side Java (though technically not
a scripting language), Visual Basic (VBScript or C# (both generally fall under
Microsoft .Net), and a few dozen others. They're sometimes lumped together
under the generic term CGI, Common Gateway Interface (as opposed to that
other CGI, Computer Graphics Interface, which is how you make Star Wars
movies). CGI is the agreed-upon standard way a web server communicates with
another program (the gateway or CGI program) running on the same machine
(e.g. the script), and an external program (such as a browser) on another (client)
machine.
More information and free scripts
Matt's Script Archive (Perl scripts)
http://www.scriptarchive.com/
411asp.net (Microsoft ASP.Net scripts )
http://www.411asp.net/
Java Boutique (free Java programs, aka Java applets)
http://javaboutique.internet.com/
Hot Scripts (all sorts of scripting languages)
http://www.hotscripts.com/
Scripts.com (all sorts of scripting languages)
http://www.scripts.com/
Hundreds of other resources exist and can be uncovered with a quick Web search.
Previous | Next
Client-side scripting
Client-side scripts run on the user's browser. The script code is included in the
xHTML page. Common versions are Microsoft Active X (platform-specific to
Windows), Java (technically a programming language and not just a scripting
language), and JavaScript (both multi-platform). Active X is very powerful, but
since it doesn't run on all operating systems it's not a good choice for situations in
which you don't control what kind of computer the user has.
Java and JavaScript, despite their similar names are entirely different things.
Here's a definition from Danny Goodman's JavaScript Pages, http://
www.dannyg.com/javascript/javavsjavascript.html:
Java, created by Sun Microsystems, is a full-fledged object-oriented
programming language. It can be used to create standalone applications
and a special type of mini application, called an applet. Applets are
downloaded as separate files to your browser alongside an HTML document,
and provide an infinite variety of added functionality to the Web site you are
visiting. The displayed results of applets can appear to be embedded in an
HTML page (e.g., the scrolling banner message that is so common on Javaenhanced sites), but the Java code arrives as a separate file.
JavaScript, developed by Netscape, is a smaller language that does not
create applets or standalone applications. In its most common form today,
JavaScript resides inside HTML documents, and can provide levels of
interactivity far beyond typically flat HTML pages -- without the need for
server-based CGI (Common Gateway Interface) programs.
Copyright _ 1996-2001 Danny Goodman.
More information and free scripts
Big Nose Bird (how can you resist a name like that?)
http://bignosebird.com/
Javascript samples from DynamicDrive.com
http://www.dynamicdrive.com/
Javascript from Internet.com
http://javascript.internet.com/
Java applets from ZD Net
http://cgi.zdnet.com/slink?42087:5279841
HTML goodies: Java and JavaScript
http://www.htmlgoodies.com/downloads/
Hot Scripts (all sorts of scripting languages)
http://www.hotscripts.com/
Scripts.com (all sorts of scripting languages)
http://www.scripts.com/
Hundreds of other resources exist and can be uncovered with a quick Web search.
Previous
Checkpoint, Javascript: If you don't already have scripting in your project
site or Bad xHTML, go to http://javascript.internet.com/ or another source of
free JavaScripts (several are listed above). Find a JavaScript that you like,
and that will work in multiple browsers. Follow their instructions to add it to
one of the xHTML pages in your project or Bad Website. If it doesn't work,
try another one. A lot of the scripts are old andmight no longer work in
modern browsers.

Printable copy of this entire site

Transcription

Similar documents

Intro Lect-Des 117

Standard FTP Instructions

Responsive Design Essentials

codetalk - St. Joseph Center

Here - Ultrazone

Logging into ClassLink Outside of School

coupon-based marketing

Take Your Website Mobile

welcome to sdf - SDF Public Access UNIX System