Syllabus
CTN 160 Syllabus
Welcome to CTN 160: Introduction to Web Publishing (Web Production I). This course introduces students to Web production using xHTML. Through readings and online assignments, students learn xHTML and the fundamentals of creating a Web site, how to incorporate graphics and other elements into a site, how to create tables, input forms, frames, and how to implement their Web sites using FTP and remote file management.
Premise
For this course, you will be treated as a contract employee. You will be paid in a currency called "Malcom Money", which is converted into points 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 for each deliverable depends on:
- the quality of your work
- whether you deliver what was requested
- whether you meet your 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.
- 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:
Recommended text: HTML for the World Wide Web with XHTML and CSS: Visual QuickStart Guide, Fifth Edition, by Elizabeth Castro.
ISBN: 0321130073; Published: Sep. 17, 2002; Copyright 2003; Peachpit Press.
Additional readings will be provided on the class Web site or placed on reserve in the Library.
- Required: Web access
- Required: Email access
- Required: Participation in online discussions held via the Website.
- Required: Other readings, exercises and assignments as noted in their respective sections of this Website.
Expectations:
- Due dates:
- Due by: Each deliverable has 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.
- 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. The ones for the Web Publishing program, under which this course falls, are at http://faculty.sccd.ctc.edu/aboss/learningobjectives.pdf. (Adobe PDF file.)
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.
There's also an open computer lab/lounge in the Tech Ed building, TC129, that's usually got some advanced students hanging around in it who can be of help. Unfortunately, whoever built that lab only equipped it with one Internet connection, so it's not as helpful to Web students as one might wish.
One of the best resources for this course is the "Question and Answer" section in the Blackboard discussion area. In most of these courses, your fellow students can answer a question you post here before I even see it.
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) 296-0969 (my work phone at King County; please don't abuse it)
aboss@sccd.ctc.edu (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.
AIM: albertwboss MSN: awboss@hotmail.com ICQ: 13400646 Yahoo: albertwboss Google talk:albertwboss 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.
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 Mondays and Wednesdays, from 8:00 am- 9:50 am.
I have received requests for a printable version of the entire Website, (apparently someone owns stock in a paper company!), and for a downloadable pdf of the entire Website so people can read offline. I managed to string all the pages together into one html file, that's updated whenever the course content is updated. However, that file doesn't necessarily print properly; it tends to run off the sides of the paper in most browsers. Use the Opera browser; it prints within the page margins from that browser in Windows, OS X, and Linux.
I don't normally recommend printing out the Website (209 pages currently) or relying solely on a saved copy, since the site is generally undergoing constant revision as resources on the Internet come and go. However, since I'm always badgering my students to listen to what the users want, I figured I'd better acknowledge the request with some usable options.
Choices for printing or downloading the entire site:
- PDF (4.11 MB download). This file is not automatically updated, so it might differ slightly from the HTML versions of the course notes.
- HTML, entire site in one file. This is always up-to-date, but printing can be an issue (see above). It will generally take about a minute to load; it's bringing in data from over a hundred Web pages. Saving it won't bring along the images unless you use "save as complete web page" from your browser's "File/Save As" menus. For you IE users, another option is to choose "work offline" in Internet Explorer. (IE's "work offline" makes a copy of a Web page and its images so you can view it while disconnected from the Internet, but unlike the "save as" options, it's meant to be a temporary solution.)
- Offline browsers: an offline browser is a tool that will capture an entire Website and save it onto your computer for later viewing. There are many choices to choose from, mostly shareware, at http://www.tucows.com/Windows/Internet/OfflineBrowsing/ (Windows), http://www.tucows.com/Macintosh/Internet/OfflineBrowsing/ (Macintosh), and http://www.tucows.com/Linux/Internet/Browser/OfflineBrowsers/ (Linux). I've made extensive use of Teleport Pro (Windows, about $40, http://tenmax.com/teleport/pro/) and have had great results. On other operating systems, I've tried and been pleased with WebHTTrack HTTrack Website Copier (Linux, free, http://www.httrack.com/), Webwhacker (Mac and Windows, education edition is about $40 from the manufacturer, http://www.bluesquirrel.com/).
Survival hints
- 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.
- If you need help, ASK! The tutoring center can help to locate assistance in your subject area.
- Check the Question and Answer forum in Blackboard 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.
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
Grading
Compensation (Grades)
Attendance 5% Participation 20% Assignments and exams 35% Final Project 40% For online-only students: Blackboard tracks 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.
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.
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!)
Taking quizzes/doing homework
Taking Exams/Doing Homework
Internet Explorer users: Within Blackboard, go to User Tools/Personal Information/Set Text Box Editor Options, and disable the WYSIWYG Editor for Internet Explorer Web browser. Doing so will prevent the browser from doing unexpected things to your answers to homework.
WARNING WARNING WARNING: Do your work in a text file and save it often, then paste the answers into the quiz form once you've gotten everything answered. Although you can take a quiz more than once, it destroys your previous answers. If you don't have a saved copy of your file, you will lose all your work if your power goes out.
Warning two: If you go in through the "Course materials" menu and re-open a quiz you've already turned in, Blackboard assumes you're trying to re-take the quiz (which is allowed) and it promptly destroys your previous attempt.
The best confirmation method is to follow the Blackboard course menu on the left to "Tools", then "My grades". If you see an exclamation point, that means the work was submitted but has yet to be graded by me. If you see a little picture of a lock, that means Blackboard thinks you've opened the homework but haven't turned it in. If you see a dash, then Blackboard has no record of your work on that item. If you see a number, that means the item has been graded. Click the number and you can open the submitted quiz and read any feedback I gave.
For more information, see the example . This is a Macromedia Flash movie. (Note: this is an example using Blackboard software, which not all classes use.)
Ongoing project: bad html
Bad HTML pages
Bad HTML 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 the first week of the quarter and continues throughout. 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.
Glossary/Index
Glossary
See also student-recommended links for external sites of interest.
Use the "Glossary" discussion area in Blackboard to offer suggestions for additions to this list.
- Browser
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, Netscape/Mozilla/Firefox, Opera, and Safari.
Located in: Module 1.3, "How does the World-Wide Web work?"
- Cache
memory location where frequently accessed information is stored and which helps to speed up processsing
- Glosses
-
"Glosses" are short strings of descriptive text that pop up when a user places his or her mouse pointer close to a link. The idea is to provide a preview of what's behind the link. Designers should not rely on the gloss to compensate for poorly labeled links. Usability studies show that most people don't move the mouse over something until they've already decided that's where they're going to click. They're created by use of the title attribute within the <a> tag, like this:
<a href="http://www.usability.gov/pdfs/chapter7.pdf" title="Usability.gov, 'Research-based Web design and usability guidelines', chapter 7">Usability.gov PDF document about navigation</a>. When the user puts their mouse near the link, in some browsers this text will appear: Usability.gov, 'Research-based Web design and usability guidelines', chapter 7.Located in Module 4.17, Creating links
- HTML/xHTML
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).
Located in Module 4.1, HTML/xHTML.
- Web browser
-
See "browser", above.
- xHTML
-
See "HTML/xHTML", above.
Final project
Final Project
The final project for this class is to create a Website of your own design. The final project should include as many elements of Web publishing learned in class as is practical. The Website created for the final project can be on any topic and must contain at least 10 original hand coded pages that link to one another, and a linked stylesheet to control them all. Completed Web pages done as part of other assignments will not count as part of your final project.
Points are awarded based on the following:
- Correct use of HTML 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 html text
- Tables or CSS-P for complex layout
- Consistent design and navigation/images
- Use of working form
- Difficulty and experimentation (use of styles, tables, forms, CSS, etc.)
- Does it work? (no broken links, must be on the server, images show up, etc.)
- Did you follow instructions? (linked stylesheet, site has been tested before you turned it in, etc.)
- Conventions of good design are followed (consistent navigation, name on every page, can always go home, alt attributes/values on all image tags, etc.)
- Online presentation (All students will present their final project via the discussion boards. Tell us about your project, challenges in building or designing and future plans for the project.)
- Participation in online discussion: use the discussion board to interact with the other students, asking questions or commenting on their final projects.
Even if you are not the best designer in the class, you should be able to get a good grade provided you pay attention to detail, try some advanced tricks like styles, tables, frames or forms, and pay attention to design details discussed in class.
The Final Project 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. 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 Project" 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.
Curious to see what others have done for their final projects? Former student projects are here.
The Internet
Understanding the Internet
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.
HOBBES' INTERNET TIMELINE, http://www.zakon.org/robert/internet/timeline, gives a brief history of Internet milestones from 1957 to present. (Not to be confused with The History of the Universe in 200 Words or Less .)
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.
What is the Internet
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)
How does the World-Wide Web work
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, Netscape/Mozilla/Firefox, Opera, and Safari.
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 and Mac OS Most popular browser for Windows, though Firefox is eating into its market share. Microsoft no longer makes this browser for Mac OS. 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, Currently, MSIE is a full release behind the others, and as a result it doesn't render some of the more advanced Cascading Style Sheets (CSS) as well. Netscape MS Windows, Mac OS, Linux, Unix, and most others Netscape uses the Mozilla browser code (see below) with lots of proprietary AOL content added Mozilla and Firefox MS Windows, Mac OS, Linux, Unix, and most others Open-source "guts" of the Netscape browser, but considerably smaller, faster, and more up-to-date. Opera MS Windows, Mac OS, Linux, Unix, and most others, including several cell phones and PDAs 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 in a few years are expected to eclipse computers as the most common way of accessing the Web. Safari Mac OS X Newest of the major browsers; 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). AOL MS Windows, Mac OS. AOL subscribers only. A modified version of MS Internet Explorer, with some functionality removed and some proprietary AOL functions added. Of note because millions of people (many of whom are new to the Internet or not very technically savvy) use it. 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 third-party. 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 2004 Carnegie Mellon University.
Terms of use: http://www.us-cert.gov/legal.html
URLs
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 scheme indicates what type of resource you are viewing.
The most common scheme on the WWW is http://. This stands for hypertext transfer protocol and indicates that the resource is a Web page.
Other schemes that you might encounter include gopher:// , telnet:// and ftp://
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.
Common top-level domains that you will encounter include .edu for educational, .com for commercial businesses, .org for nonprofits, .gov for US government, .net for networks and .mil for the US military. Restrictions on .edu, .gov, 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.
Outside the US two letter country codes are used to indicate country of origin, For instance .jp is the country code for Japan and .uk for the United Kingdom.
The file path indicates where on the host computer or server that the information is located. A / indicates the presence of a directory. A URL can have multiple directories. Occasionally you will also encounter a ~ or tilde, usually indicating that the information is in a personal account.
Actual files end with an extension which denotes the type of 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 .mp3 for audio files, .txt for text files, .pdf for portable document files, .jsp for Java server pages and .asp or .aspx for active server files.
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/cgi-bin/whois/whois, and Uwhois, http://www.uwhois.com.
IP numbers
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, inclusive. (So, zero and 255 can be in a valid IP address.)
117.56.18.200IP 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.
Summary information
Terms and concepts to know
Browser
Hypertext
xHTML
HTTP
Server
World-Wide Web
TCP/IP
URL
Protocol
IP Numbers
WHOIS
Domain Name
What's that stuff that goes at the top of the page?
Put these three items on all your HTML pages:
Very first lines:
<!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">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.
Readings
The Roads and Crossroads of Internet History
How to build a web page in 25 easy steps
Technology indicators
http://www.neweconomyindex.org/states/2002/, see how they measure what makes an area "technologically strong"A List Apart
http://www.alistapart.com/, newsletter for Web developers. No specific reading assignment here, but have a glance to see what's hot this week.
More information
History
The History of the Universe in 200 Words or Less
Find a Favorite Site
Communication Arts Magazine Website awards, 2003.
Who are these guys?
All Whois http://www.allwhois.com
UWhois http://www.uwhois.com
Network Solutions http://www.networksolutions.com
Copyright
Copyright Website
http://www.benedict.com/, "practical and relevant copyright information for anyone navigating the net."
Mentioned in the classroom this week
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 "View" 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".
Antivirus software: http://www.symantec.com/ (Norton Antivirus), http://www.mcafee.com/ (McAfee VirusScan), http://www.grisoft.com (look under "products" for AVG Free Edition for Windows), http://www.markallan.co.uk/clamXav/ (ClamXav, a free antivirus scanner for Mac OS X).
Firewall software: http://www.zonealarm.com (ZoneAlarm), http://www.sygate.com/ (Sygate Personal Firewall)
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
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."
Opera, currently the most standards-compliant Web browser (and considerably smaller and faster than either Internet Explorer or Netscape): http://www.opera.com/
Mozilla, the open-source "guts" of the Netscape browser; more up-to-date and a considerably smaller download, http://www.mozilla.org/
Firefox, the Mozilla browser without the email client etc., also at http://www.mozilla.org/
Usability: http://www.humanfactors.com/library/10tips.asp, http://www.uie.com/
Dihydrogen monoxide--learn the facts about this dangerous substance: http://www.dhmo.org/
Creating a Web page
Create a Web page to introduce yourself to the class. You may use the text below these instructions as a template. Don't get too worried about the HTML tags at this point, just type over the word "name" with your name, the word "email" with your email address, the word "answer" with your answers to the questions, etc.
Use the mouse and the "edit, copy" menu in the browser to highlight and copy all the text below these instructions.
From the Windows "Start" menu, choose "Run" and type in "notepad" and press enter. (Mac users, find and run the "Text Edit" (OS X) or "Simple Text" (OS 9 or below) application, or better yet get "Textforge" from http://www.trancesoftware.com/software/textforge/. . Unix/Linux users may use the text editor of your choosing.)
From Notepad's "Edit" menu, choose "Paste".
Then, from Notepad's "File" menu, choose "Save as", type in a file name, a period, and html--example.html, myfile.html, etc. Pay attention to where you saved this file; you'll need to know where to find it.
Click on "Save file as type" and change it from "text" to "all files". Then click "OK".
To see how the saved file would look on the Web, use the browser's "File" menu and choose "New Window, then ", "Open", then browse to the file you just saved.
When you're happy with the results, go back to the home page for this course and click on the "Tools" button and select "Homepage". Copy the HTML from the text file you were working on (in Notepad), and paste it back into "Homepage" page, in the text box marked "Personal Information", and save your answer.
Now, you can proceed to the Module One quiz and, where it asks "I have created my Homepage using the template provided here," choose "True". Congratulations, you've done it!
To see how your page looks, and to have a glance at who else is in the class, in the Blackboard menus go to Communication/Roster/List all/List all, then click on the individual names.
Need a visual example of what you're supposed to do? Watch this Flash movie to see the steps involved in this assignment on a Windows computer.
<h1>Name</h1>
<p>email</p>
<p><span style="font-weight:bold">What got you interested in the South Seattle Community College (SSCC) Web authoring class?</span></p>
<p>answer</p>
<p><span style="font-weight:bold">How were you spending your days before you came here to SSCC?</span></p>
<p>answer</p>
<p><span style="font-weight:bold">Have you spent a lot of time working with computers? Have you spent a lot of time online?</span></p>
<p>answer</p>
<p><span style="font-weight:bold">Do you think this class is going to be a review for you, or a lot of new information?</span></p>
<p>answer</p>
<p><span style="font-weight:bold">What's so hot about the Internet, anyway?</span></p>
<p>answer</p>
<p><span style="font-weight:bold">What are your three favorite Web sites? What's so special about each of them?</span></p>
<p>answer</p>
<p><span style="font-weight:bold">Optional: can you think of a particular Website, or a kind of Website, you don't much like or respect? How come?</span></p>
<p>answer</p>
Reminder: How to take a quiz safely
Taking Exams/Doing Homework
Internet Explorer users: Within Blackboard, go to User Tools/Personal Information/Set Text Box Editor Options, and disable the WYSIWYG Editor for Internet Explorer Web browser. Doing so will prevent the browser from doing unexpected things to your answers to homework.
WARNING WARNING WARNING: Do your work in a text file and save it often, then paste the answers into the quiz form once you've gotten everything answered. Although you can take a quiz more than once, it destroys your previous answers. If you don't have a saved copy of your file, you will lose all your work if your power goes out.
Warning two: If you go in through the "Course materials" menu and re-open a quiz you've already turned in, Blackboard assumes you're trying to re-take the quiz (which is allowed) and it promptly destroys your previous attempt.
The best confirmation method is to follow the Blackboard course menu on the left to "Tools", then "My grades". If you see an exclamation point, that means the work was submitted but has yet to be graded by me. If you see a little picture of a lock, that means Blackboard thinks you've opened the homework but haven't turned it in. If you see a dash, then Blackboard has no record of your work on that item. If you see a number, that means the item has been graded. Click the number and you can open the submitted quiz and read any feedback I gave.
For more information, see the example . This is a Macromedia Flash movie. (Note: this is an example using Blackboard software, which not all classes use.)
Lesson One exercises
2.
Usability
Usability
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.
Several studyable, 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 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? Error frequency and severity How often do users make mistakes while using the system? How serious are these errors? How do users recover from these errors? Subjective satisfaction 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/.)
Usability: targets
Usability: know your targets
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, hardware/software, 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? 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? (Just try to find a tv at sony.com. It's not impossible, but it's also not as easy as one might expect.)
Usability: fundamentals
Usability fundamentals
How do you know for sure that a site is usable? Start with these usability fundamentals:
- What is the purpose of your Web site?
- Sell something
- Tell something
- Gather information
- Etc.
- Who are your users?
- Know thy users, for they are not 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
Usability testing
How many users do you need to test?
That really depends on what your goal is.
If you're just trying to get buy-in from the work team on the idea of usability, then testing 3 or 4 users will be enough. What matters in this case isn't so much the number of users, it's whether the project team was involved in the study, and whether there's an reasonable effort to get consensus after the results are in.
If you're trying to find the most disastrous issues, and your goal is to support iterative development*, current wisdom says testing 5 or 6 users will suffice. (*"Iterative development" is the industry's fancy way of saying that the development happens in small steps, and after each step we stop, ask questions, see what we've learned, and apply that to the next step. It's slow, it means constantly questioning whether or not your previous assumptions are correct, and it drives type-A managers and task-oriented developers nuts. It's definitely not for everyone.)
If the goal is to find almost all the usability problems, you're going to study a lot of users. Studies involving 100 or more users will help a lot, but there will always be issues that don't get identified.
Sound usability practices
- Recruit test participants whose characteristics are a good match with the target audience.
- Create test tasks that are realistic, professional, likely to be common tasks, and make sure they're free of hidden clues and jargon.
- Don't confuse user data with your own opinions.
Test reports
A good usability report is supposed to be usable!
- Keep it short. By industry standards, "short" means 30 pages or less. Limit the comments to the ones that are really important; keep it less than 50 comments.
- Provide an abstract or "executive summary" at the beginning. Highlight the top three positive comments and the top three problems.
- Include positive findings. Shoot for at least one positive comment for every three problems, but the closer you can get to 1:1 the better.
- Classify the comments. It's industry-standard to label catastrophes, serious problems, minor problems, positive findings, bugs, and suggestions for improving the interface.
It doesn't matter how good the report is; it's worthless unless it helps bring positive changes to the user interface. Effective consensus building with the development team is what will drive the biggest improvements.
Usability testing can show your colleagues what a usability problem looks like in their interface. It won't even find all the serious usability problems in an interface, much less all the problems.
Usability tests are spectacular. They are excellent for convincing skeptical colleagues that serious usability problems exist in an interface. But they are also inefficient and costly. We should use them mainly in an intermediate phase to establish trust with our colleagues, and then use much more cost-efficient preventive methods such as usable interface building blocks, reviews based on standards and proven guidelines, and contextual inquiry.
Quote from Usability Testing Best Practices: An Interview with Rolf Molich
By Christine Perfetti
If you missed the in-class video, review these slides from Jared Spool's segment of the Effective Web Design: a Fresh Look teleconference (December 6, 2002). (This slide show will also demonstrate the limitations of Microsoft Powerpoint's "save to Web" option. Don't blame me; I didn't create the product.) This video is available from the reference desk at South Seattle Community College, should you be in that neighborhood.
Accessibility: Section 508
Accessibility: Section 508
The following information was heavily excerpted from Patrick Crispen in The Internet Tourbus, http://www.tourbus.com/, an excellent newsletter, 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.
Within the classroom, we'll see two videos on this subject. If you miss them and can't get them from the media center, it is possible to view them online.
- If you have access to a reasonably fast Internet connection and a sound card, "Web Accessibility: Access for All," which is about 10 minutes long, introduces the concept of Web accessibility from the disabled users' perspective. http://www.fresnostate.edu/webaccess/materials/videoclips.htm contains open captioned, Real Player format video segments of the entire "Web Accessibility: Access for All" video.
- "Know Your Users: Web Accessibility from the User's Prospective" is a 27 minute video featuring computer users with disabilities discussing and demonstrating the tools they use to access the Web -- Dragon Naturally Speaking, WindowEyes, Zoom Text, JAWS, and a refreshable Braille display -- as well as the common problems these users with disabilities encounter when they try to access different Web pages. Highlights are available at http://www.fresnostate.edu/webaccess/users/default.html.
Summary 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."
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.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.htmlUsability 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.comJakob Nielsen
useit.com
http://www.useit.com/Test your Website in other browsers
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.htmlSee 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. HTMLHTML validator from the people who wrote the standards
World-Wide Web Coalition (W3C) (Warning--this one is very picky!)accessibility
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).
Discussion
Discussion: usability
How well do you think these sites will serve their users?
Begin with some basic usability questions. First, try to determine what the site's purpose is, and who its primary users might be. What kind of tasks would users try to accomplish at this site? Now, 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?
- www.washington.edu/accessit
- www.turnitin.com
- hoaxbusters.ciac.org
- www.arthritis.org
- Compare these three:
Go to the bulletin/discussion part of the class Website and, 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.
3.
Search tools
Searching the Internet
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:
- 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.
- 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.
- 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.
- You know the source of the information, e.g. you know the URL.
- Use a subject directory
- Use a ready reference resource
- Use a search engine
Not Everything on the Web is True!
Do you believe that everything you read is true? What about everything on the Internet? In a world where anyone can publish on the Web, not all information is created equal. Much of the information you find on the Internet is reliable, accurate and true... but much of it is also biased, misleading and downright false.
In the real world, parents, friends, education and experiences help us develop the ability to determine fact from fiction truth from lie. In situations where the line between truth and lies are blurred, we have developed an internal toolbox of tips and techniques to make educated guess about what to believe.
If someone walks up to you and tells you an unbelievable story, what do you do to determine if it is true or not?
The Internet is a whole new ball game when it comes to information. As such we need to develop new toolboxes full of tips and techniques to determine if the information we are seeing on the Internet is true or false, reliable or unbelievable.
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?
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 register4less, http://www.register4less.com
What can you tell from the URL?
- 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?
Other Popular Evaluation Criteria
5-Ws for Evaluating Web Sites
Is the site objective?
- Is the site fact or opinion?
- Is the author's point-of-view 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?
- 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?
Subject directories
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 David Filo and Jerry Yang, 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; when I updated this page there wasn't even a link from Yahoo's home page to their subject directory at http://dir.yahoo.com. As a subject directory, Yahoo seems to have lost their way as they focus on other aspects of their business. If you need a comprehensive subject directory, you might have better luck with other choices such as dmoz.org or lii.org, discussed below.
The Open Directory Project, dmoz.org, 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.
The Librarian's Index to the Internet, http://lii.org/, is a subject listing of Internet resources that's been developed and maintained by librarians at the University of California, Berkeley.
Open Directory Project
http://www.dmoz.orgLibrarian's Index to the Internet http://lii.org/ Yahoo
http://www.yahoo.comLooksmart
http://www.looksmart.comNetscape Netcenter
http://home.netscape.com
Ready reference
Using Ready Reference Resources on the Internet
The term Ready Reference is an expression that librarians often use to describe resources that can quickly be used to answer questions. An encyclopedia, a dictionary or favorite database can all be thought of as ready reference. On the Internet, the Web sites that we consider ready reference would allow us to quickly answer questions without performing detailed searches, and often without having to sort through the frogs just to find the prince.
Specialized databases
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 sources.Fed Stats
http://www.fedstats.gov
Collection of statistics from government agencies
file libraries
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 not finding 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 MichiganLibrarian'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, BerkeleyINFOMINE
http://infomine.ucr.edu/
Scholarly Internet Resources Collection from the University of California. Geared more to academia
Pathfinders
Pathfinders:
A pathfinder is a Web site that identifies, organizes, evaluates and annotates Internet resources on a particular subject. Pathfinders are sometimes called guides or subject specific resources. They've generally been put together by a person who has advanced knowledge in the subject. Items are often annotated with a synopsis or review, so you have a good idea of what lies beyond the link before you click on it. Because of this, Pathfinders can save you a lot of visits to sites that turn out to be not worth your while.
Washington Employment
http://www.washjob.com
A pathfinder for job and employment resources in the state of Washington. Note that this site is pretty much the effort of one person.About.com
http://www.about.com/
Collection of guides and pathfinders maintained by subject experts.
WebRings
WebRings:
A WebRing is a collection of sites with a similar content or subject that are linked together in a circle or ring. The idea is that, instead of a hundred sites all linking to one another, everyone in the rink agrees to link to two sites--the next one forward in the ring, and the previous one in the ring. The visitor can page forward through all hundred sites if they so desire.
WebRing
http://www.webring.org
Guide to Web rings on the Internet.There are Web Rings for pretty much everything you can imagine, and a lot more things you never would have imagined. WebRings often offer proof that the Internet helps tie together people who share highly unusual--if not bizarre--interests.
Online reference tools
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.
Seattle Public Library Reference
http://www.spl.org/selectedsites/reference.html
A collection of ready reference Web sites maintained by the Seattle Public 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.
Portals
Portals:
Portals are Web sites that position themselves as your welcome mat 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.comExcite*
http://www.excite.comHotbot*
http://www.hotbot.comLycos*
http://www.lycos.comNetscape
http://home.netscape.comMSN*
http://www.msn.comGo.Com (now powered by GoTo.com)
http://www.go.comNBCi (formerly Snap)
http://www.nbci.comSports Line
cbs.sportsline.comIVillage
http://www.ivillage.com* Portals marked with asterisks are also search engines.
Search engines
Search Engines
Effective Search Strategies for the Internet: Using Search Engines
The Internet is full of information. Some of it is useless clutter, and some of it is vital and important. You'll have a much easier time finding the information you need on the Internet if you develop a search strategy.
Think of a search strategy as a map to the information you are looking for. If you have an incomplete or inaccurate map, chances are you are not going to find what you want. If you have a detailed and accurate map, finding what you want is going to be an easy and efficient process. The same holds true for search strategies: with a thorough and well thought-out strategy, one will not only find the information they are looking for, but find it quickly and effectively.
In the following pages, we will primarily be discussing how to develop a search strategy when using a search engine.
What is a search engine and how does it work?
What is a Search Engine 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-to-date, 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:
- searches the database compiled by the robot programs and indexing programs,
- identifies items that match your query and organizes, and
- 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.
Using a search engine
Using a Search Engine
Although most search engines basically function the same way, there are many differences among them. Some search engines contain a database of over a billion Web pages .
Google and AllTheWeb (alltheweb.com) tend to have the largest databases. AllTheWeb claimed 3,151,743,117 in 2004, but they don't have their total number of indexed sites prominently displayed this year. As of 1/12/2005, Google claims 8,058,044,651 (up from 4,285,199,774 in 2004, up from 3,307,998,701 in 2003, up from 2,073,418,204 in 2002, which was up from 1,610,476,000 on 10/1/2001). Like AllTheWeb, Google no longer prominently displays how many sites are in their index. Other search engines 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 is not really just full of porn)
Often, 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, these search results may be links to sites that contain questionable or pornographic material. Before long, searchers can conclude that the Internet consists entirely of pornography. Despite what certain of our members of Congress might think, this conclusion is not correct. This kind of unrelated hits regularly comes 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.
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 relavancy 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.
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
Step one: Selecting Keywords
It doesn't make searching any easier to figure out when the same words are used to 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":
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.
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
Not a real example, as far as I know:
<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.
Not a real example, as far as I know:
<head>
<title>Bank of California</title>
<meta name="keywords" content="beer diet cats dogs fun Mel Gibson Julia Roberts" / >
</head>Anyone still using 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...
Then, there are keywords such as we're about to discuss, which is just a term for the words you're going to use to conduct a search.
Keywords are essentially the terms you use to ask your question. Keywords are the most important part of your search and the first thing you should check if a search is not working. For example let's say you are looking for information on Collie, a type of dog. Which of the search terms below would you select?
Dogs
Lassie
Hamsters
Collies
Too broad
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.
Too narrow
Yes, Lassie was a collie, but if we use this as a search term we will only get information on a specific collie.
Not relevant
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.
Good search term
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 librarian 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.)
Many times you will need to select more than one search term or key word to perform an effective search. For example, if you are looking for information on golf clubs for kids, you may need to come up with more than one keyword. The best way to do this, is to dissect your 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. Next, select the keywords that are not too broad or narrow. Finally, take your keywords and arrange them in order of the most importance. The keywords we selected for this question were golf, clubs and children. Once you have selected your keywords, it is time to proceed to the next step.
Step two: building a search query
Step Two: Building a Search Query
A search query is a fancy name for the request or question you submit to a search engine. Once you have selected your keywords, it is time to tell the search engine exactly what type of information you are looking for.
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.
And
Information with both the words Dog and Cat
OR
Information with either the words Dog or Cat
Not
Information with only the words Dogs not 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 you want must have the word Dog.
-
The - sign says that no matter what information is available the information you want must not have the word Dog.
Phrases
Sometimes when you have more than one keyword it is best to express it as a phrase. Enclosing the keywords in "quotations" is how you would define 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 driver in any order.
Truncation or Wildcards
Sometimes words have more than one possible ending. For instance, 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 * Truncation must follow at least three characters and can represent up to 5 characters. Truncation can not represent punctuation or numbers. For example, the term Medic* will also find medicinal, medical, medicine, or medic.
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 your search does not yield the results you want, 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
Step Three: Evaluating your search results
Once you have constructed and submitted your search query, it is time to evaluate your results. Most search engines generally list hits (items that match your search query) based on relevancy. Relevancy is the percentage of how well a Web page matches your search query. Some search engines will only give you the top fifty hits returned by your query; others will give you all the hits that matched. Sometimes this number can be very large, even reaching into the millions. There are three things to look for when evaluating your search results.
- 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.
- 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.
- 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 keyword "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 January 2005, 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
Step Four: Rebuilding your Query
After performing all three steps, if you have not found what you are looking for, go back to step one and rebuild your query. Your first few searches may seem awkward and slow. Don't be discouraged. With a little practice, your searches will 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.
Search engines and search engine resources
Search Engine & Search Engine Resources
Search Engines
AltaVista (strong advanced query options)
http://www.altavista.comAsk.com (often overlooked, 5th-largest engine, formerly Ask Jeeves; uses natural language queries)
http://www.askjeeves.comAll The Web (vies with Google for the largest number of sites indexed)
http://www.alltheweb.com
http://www.google.comExcite
http://www.excite.comHotBot
http://www.hotbot.comLycos
http://www.lycos.comMetaSearch 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.
Dogpile
http://www.dogpile.com
Search.com
http://www.search.comSurfWax
http://www.surfwax.comTurbo10 (organizes results into clusters)
http://turbo10.comVivisimo (organizes results into clusters)
http://www.vivisimo.comJust plain cool
Some people prefer a more visual experience.
The Brain (an information organizer that branched into searching, requires Java)
http://www.webbrain.com/KartOO (visual meta search engine, requires Flash player)
http://kartoo.com/ index.php3?langue=enTouchGraph Google Browser (requires Java)
http://www.touchgraph.com/ TGGoogleBrowser.htmlSearch Engine Resources
Research Buzz
Tara Calshain's excellent newsletter about search enginesSearch Engine Watch
Danny Sullivan's comprehensive site about the search engine worldWeb Position Gold
Search engine optimization software site, but also has good information about building sites that work well across the major search engines
Summary information
Terms and concepts to know
Search Engine
Subject Directory
More Information
In Search of the Deep Web
The big search engines crawl less than 1 percent of the known Web. Read this excellent article from Salon.com to learn more about the "deep Web" and the search tools' plans for it.
Searching
Metaspy (see a random sample of what other people are searching for right now)
Web Search Engines FAQS: Questions, Answers, and Issues
Two from librarians on choosing the right search tool:
Mentioned in the in-person class this week
Junkbuster (ad-blocking software)
http://www.junkbuster.comWebwasher (ad-blocking software)
http://www.webwasher.com
Lesson Three exercises
Name: Module three homework/quiz: Search tools (printable version) Instructions: Print this out to turn it in. It's not an active form.
Question 1 Short Answer / Essay (3 points) Question: Click here to check this sample of the source code for WestSeattle.com. Notice the META KEYWORDS tag near the top. See anything unusual? Identify what's unusual, and tell me why the author might have chosen to include it.
Question 2 Short Answer / Essay (2 points) Question: In the 1970's a dead whale washed up on a beach in Oregon. It started to smell and was too big to get rid of via ordinary means, so public officials came up with the idea to blow it up into little pieces so it could wash out to sea. What happened next has become one of the great urban legends of our times. Lucky for us, the actual video footage can be found on the Internet. Using the skills you learned in class, find the video clip. (It's best to have the sound turned on so you can hear the audio, too.) Tell me how you found it. Be sure to include the URL for the video file.
Question 3 Short Answer / Essay (2 points) Question: Using the skills we have learned in class, please answer the questions below. When answering questions, you are not to use the same source twice. In other words, you can't use Google to get all the answers. If you can't find the answer to a question, at least tell me what you did to look for that answer.
What is the State Song for Washington State?
Question 4 Short Answer / Essay (2 points) Question: What search query did you use for the above question? (In other words, exactly what did you type into the "search" box?)
Question 5 Short Answer / Essay (1 points) Question: What search tool (search engine, subject directory, etc.) did you use for the above question? (Examples include Google, Yahoo, AltaVista, Alltheweb.com, Lycos, About.com, and about a hundred other choices.)
Question 6 Short Answer / Essay (2 points) Question: Who is responsible for this quote: "I know the human being and fish can coexist peacefully."
Question 7 Short Answer / Essay (2 points) Question: What search query did you use for the above question? (In other words, exactly what did you type into the "search" box?)
Question 8 Short Answer / Essay (1 points) Question: What search tool (search engine, subject directory, etc.) did you use for the above question? (Examples include Google, Yahoo, AltaVista, Alltheweb.com, Lycos, About.com, and about a hundred other choices. Remember, don't use the same tool you used in the previous search.)
Question 9 Short Answer / Essay (2 points) Question: Who is the current President and CEO of Starbucks? (Remember, use a search engine, not starbucks.com's Website, to find the answer.)
Question 10 Short Answer / Essay (2 points) Question: What search query did you use for the above question? (In other words, exactly what did you type into the "search" box?)
Question 11 Short Answer / Essay (1 points) Question: What search tool (search engine, subject directory, etc.) did you use for the above question? (Examples include Google, Yahoo, AltaVista, Alltheweb.com, Lycos, About.com, and about a hundred other choices. Remember, don't use the same tool you used in the previous search.)
Question 12 Short Answer / Essay (2 points) Question: Using a search engine, find out how many moons the Planet Jupiter has. What are their names?
Question 13 Short Answer / Essay (2 points) Question: What search query did you use for the above question? (In other words, exactly what did you type into the "search" box?)
Question 14 Short Answer / Essay (1 points) Question: What search tool (search engine, subject directory, etc.) did you use for the above question? (Examples include Google, Yahoo, AltaVista, Alltheweb.com, Lycos, About.com, and about a hundred other choices. Remember, don't use the same tool you used in the previous search.)
4.
Basic HTML
HTML
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="content-type" content="text/html; charset=iso-8859-1" />
</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>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/Netscape
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, apple-click to get the pop-up menu.)
Writing HTML
Writing HTML
The easiest way to write HTML 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 HTML include Notepad or Wordpad (Windows), Pico (Unix and MacOS X; a Windows version exists), SimpleText or BBedit Lite (Mac), Gedit and Gnotepad Plus (Linux).
Some simple and free text editors have a nice HTML toolbar thrown in: check out Notepad2 (Windows) from http://theopencd.org/programs/notepad2/, Gnotepad Plus (Linux) from http://gnotepad.sourceforge.net/, or Textforge (Mac) from http://www.trancesoftware.com/software/textforge/. These three are accepted alternatives to Notepad that you can use for homework in this class, by the way.
There are also full-scale HTML editors, which are text editors with additional functionality built in for adding HTML tags to text, doing heavy-duty site management, adding scripts, and more. These can be extremely powerful tools. Commercial examples are Macromedia HomeSite (Windows) and BBEdit (MacOS). Several HTML editors, such as Arachnophilia, http://www.arachnoid.com/arachnophilia/, Nvu, http://www.nvu.com/, and Amaya, http://www.w3.org/Amaya/, are among those amazing gifts from the Internet: a completely free Web editing tool. (In addition to a Windows version, there's a Java version that'll run on other platforms.) Just don't get in the habit of using it for this class; I require hand-coded pages unless I say otherwise.
Warning: By far the most powerful of the free Windows HTML editors is First Page 2000, from http://www.evrsoft.com/. It's an incredibly full-featured tool, it's free, and the download comes with a couple hundred pre-written javascripts included. However, therein lies a problem: among these javascripts is one that an author can include in an HTML page to create an unending succession of pop-up windows until the user goes stark raving mad--and the mere presence of that script within the software will set off all sorts of antivirus alerts if you download and install First Page 2000 onto a computer that has antivirus software running on it.
HTML Kit is a slightly less powerful but more user-friendly piece of free Windows software, available at http://www.chami.com/html-kit/. Its autocomplete tag generation feature makes it popular among people who are prone to leaving required attributes off html tags, and it's comparatively small size (under 4 MB) make it an acceptable download even by dial-up.
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 HTML documents. Word processing programs do horrible things to HTML 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 top-level 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 that allow one to create Web pages without knowing HTML. These software programs are called HTML editors or WYSIWYG (pronounced wis cee wig) which stands for What You See Is What You Get. Popular commercial WYSIWYGs include Macromedia Dreamweaver, Adobe GoLive, and Microsoft Frontpage. Among the free ones, it's hard to go wrong with the Mozilla suite (http://www.mozilla.org/). Mozilla is the open-source browser previously mentioned in this class. (The browser as a stand-alone product is called Firefox, whereas the Mozilla Suite contains the browser, an impressive email client (for folks interested in switching from the more virus-prone Outlook or Outlook Express), and a quite passable WYSIWYG HTML 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 HTML and a text editor. (That's a requirement, not a suggestion.)
Using a WYSIWYG is like riding a bike. It will get you there faster than walking, but eventually the bike is going to come to a stop and you are going to have to know how to walk. (Analogy stolen with permission from former SSCC Librarian Pamela Wilkins.)
If you don't have a basic knowledge of HTML, you can only do what the WYSIWYG lets you do. Worse, 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.
The HTML tag
The HTML Tag
The HTML tag is the essential element in HTML. Every HTML 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 "attribute-value" language just now, we'll cover it in the next paragraph and the next page.) 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. (This is optional in the current HTML specifications, but it's required for more advanced things like Extensible Markup Language (XML). 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:
<body text ="black" bgcolor="blue">text</body>.
<tagname attribute ="value">
Tags, attributes and values
Tags, Attributes and Values
One of the hardest things to keep straight is the difference between tags, attributes, and values. The tag is the name of the item. An item can have many attributes (a set of characteristics), and each characteristic has a value (the details specific to it).
Think of it as something other than HTML and it might make more sense:
Tag Attribute Value Cat hair long hair-color black attitude bad
< cat hair="long" hair-color="black" attitude="bad">CTN160 time night
< CTN160 time="night">Vehicle make Honda model Civic color white
< Vehicle make="Honda" model="Civic" color="white">
Container tags vs. standalone tags
Container Tags VS Stand Alone 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 HTML 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 stand-alone 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. Therefore, although these tags can have attributes and values it is not necessary within HTML to close them with an end tag. However, XML (extensible markup language), which is becoming increasingly commonplace, does require closing the standalone tag via a space and a forward-slash: <hr />, <br />, <img />, etc. Including this within HTML will do no harm, though some HTML validation programs (and some teachers) might mistakenly think it's an error. Web browsers will interpret it correctly.
Remember: HTML uses forward-slashes, NOT backslashes. This ain't DOS class, folks.
Nesting HTML tags
Nesting HTML Tags
HTML tags can be applied to content already within an HTML 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>
<b><span style="font-size:24pt"><u> text </u></span></b>
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.
Tags for document structure
Tags for Document Structure
The basic structure of every HTML document is defined by four tags, <html>, <head>, <title>, and <body>. These tags are arranged into the basic HTML 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="content-type" content="text/html; charset=iso-8859-1" />
</head><body>
Contents of document
</body></html>
HTML documents, just like people, are divided into two major parts, the head and the body. In HTML, just like in life, you only get one head and one body.
The <head> contains information about the HTML 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.
Saving HTML documents
Saving HTML Documents
When saving HTML documents, 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), and add the extension .html to the file name.
Give HTML 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 Module one summary 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 HTML 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 HTML 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. Once the file is opened in the browser, click the "refresh" or "reload" button to view additional changes. Provided you have saved your HTML 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 Mozilla/Netscape or "Refresh" in Internet Explorer will reload the page again from the saved file or server.
It is important to reload the HTML file every time you make and a save a change to the HTML code.
Tips for writing good HTML
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. The best way to avoid mistakes in xHTML is simply not to make them. Writing xHTML correctly the first time can be done by following a few simple tips:
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) find 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, works best with 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 <!-- this is a comment --> 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.
- Extraordinary use of comment tags can be seen in these two files:
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 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 red code to the very beginning of your html file, to ensure that an HTML 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/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.
Uploading the Report
When you're done with the report, if you want to share it, just copy and paste the results into an html file. Save the file and include it along with your html code, as a linked page.
Formatting text within parts of a document using HTML
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 word-processing 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 >h2<</h2> This is <h2>
<h3>This is >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>
Knowldege 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.
Headings can also be used with the align attribute to control their alignment a Web page. The align attribute can be set to align headings either left, right or center.
<h2 style="text-align: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.
<span style ="color:#colorvalue"> The color attribute allows control the color of the font. The value for this attribute will be a color value. <span style ="font-family:typeface"> The face attribute allows control of the face or 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 face can be specified, multiple faces are separated by a comma, the browser will display the first one available.
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="font-size: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 cooler, but pt and px are better-supported across browsers. Px seems to give the most consistent appearance. <span style ="color:blue; font-family:Georgia; font-size:24pt">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:30pt">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:30pt">H</span>ere is a paragraph with a span to change part of it.</p>
Here 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.
Formatting text within parts of a document using inline Cascading Style Sheets (CSS)
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 ATTRIBUTE = VALUE < img align = "center" src = "photo.jpg" > CSS SELECTOR DECLARATION PROPERTY : VALUE h1 { color : blue ; font-size : 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: 24pt">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>
<P><FONT FACE="Arial">Three</FONT></P>
<P><FONT FACE="Arial">Four</FONT></P>use DIV: <div style ="font-family: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...
Global CSS: Controlling the look of a whole page
Global 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 <!-- and --> 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 ouput 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.
Linked CSS: controlling the look of a whole site from one file
Linked 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; text-indent: 0.5in }
p.initial:first-letter { font-size: 200%; } /* Use <p class="initial">...</p> to get this to work */
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:active { color: yellow } /* active links */Copy these rules into a new 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 HTML page. You should see some significant changes when you reload the page in a browser.
<head>
<link href="style.css" type="text/css" /></head>
This links the current page to the referenced file that controls the styles for the page. 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.
Making space
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> HTML is so much fun I'm going to devote my life to it.
<p style="text-align:left">Well, not really; I just said that so I'd get a good grade in the class.</p> Well, not really; I just said that so I'd get a good grade in the class.
<p style="text-align:center">When <i>what</i> freezes over?</p> 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 to be closed.
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 h1-h6 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> I am getting a headache from all this.
<blockquote><blockquote> <blockquote>I am getting a headache from all this.</blockquote> </blockquote> </blockquote> 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 line across the width of the element it's in (the page, or the div or table cell if that's where it is) and will always be on its own line. Because the <hr /> tag only inserts an element and does not format text, it is a stand-alone tag and does not need a closing tag.
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 <!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="content-type" content="text/html; charset=iso-8859-1" />
</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 <!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="content-type" content="text/html; charset=iso-8859-1" /></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>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 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.
Linux/Unix
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.
Want a chance to practice some of these on either a Unix or Linux computer?
- On the South Seattle Community College campus, we have a couple of labs with Linux computers; TC119 and TC127. Contact the Tech Ed department at 764.5365 for open hours.
- Would you rather try this on your Windows computer, from the comfort of your own home, without the challenge of actually installing a new operating system on your computer? Try an emulator program that will run on a Windows PC. One such free program for Windows computers is Cygwin, http://sources.redhat.com/cygwin/.
- Way more fun than Cygwin, which only gets you a command-prompt, is a full-fledged Linux operating system that runs from a CD. Burn a CD of Slax Linux, http://slax.linux-live.org/, and just turn your computer on with the CD in the drive and you're running a completely different OS on your computer, with no messy partitioning or formatting or anything else that'll upset Windows. (Of course, you'll need to save any work on a floppy or thumb drive; since you're not running the machine off its hard drive you can't save anything to it.)
- Got a Mac with MacOS X? You're in luck, Mac OS X already has access to a Unix shell via the Terminal. In fact, Mac OS X is Linux/Unix, with the Apple user interface running on top of it in much the same way Windows runs on DOS. (Yes, I know that Windows 2000 and XP don't run on DOS anymore, at least not exactly--opinions vary.)
So, if you're feeling ambitious, try to pick up a little Linux knowledge. It'll be good for you.
Don't get caught doing this! A cautionary tale from Userfriendly.org.
Making lists
Making Lists
Lists can help you organize and present information in HTML documents. Various list tags and their attributes allow one to choose from several different types of lists in HTML. There are three types of list, each with their 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>
- cat
- dog
- bird
In a numbered list, the attribute START may be used to start listing with a certain number. The attribute TYPE may be used to specify A, a, I, i indicating upper and lowercase letter and roman numerals. Unordered List
<ul>
<li>cat </li>
<li>dog</li>
<li type="square">bird</li>
</ul>
- cat
- dog
- bird
In a bulleted list, the attribute TYPE may be used to specify disc, circle and square (to display different styles of bullets). TYPE can also be used within the individual <li> tags to change the shape of a particular bullet. 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
- a purring house pet
- dog
- Man's best friend
- bird
- a flying creature
In a list of terms and definitions <dt> is used to denote definition term, and <dd> is used to denote definition.
Creating links
Creating 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.
An increasingly common attribute for the <a> tag is title, which adds descriptive text originally meant for use by the assistive software that reads pages to visually impaired people. The value of the title attriube creates "glosses", short strings of text that pop up when a user places his or her mouse pointer close to a link. The idea is to provide a preview of what's behind the link. Designers should not rely on the gloss to compensate for poorly labeled links. Usability studies show that most people don't move the mouse over something until they've already decided that's where they're going to click. They're created by use of the title attribute within the <a> tag, like this:
<a href="http://www.usability.gov/pdfs/chapter7.pdf" title="Usability.gov, 'Research-based Web design and usability guidelines', chapter 7">Usability.gov PDF document about navigation</a>. When the user puts their mouse near the link, in some browsers this text will appear: Usability.gov, 'Research-based Web design and usability guidelines', chapter 7.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)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:
- First, name the section of the document where you want the user to land after they click on the hyperlink.
- Now, link to the document section using the named value preceded by the # sign as the destination URL.
Naming a section Linking to a named 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 door. If you're sent to room 319 and there aren't numbers on the doors, you'll not find your way.
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.
<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 document or for internal navigation.
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>
The mailto value
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:aboss@cascadia.ctc.edu">email aboss@cascadia.ctc.edu</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.
Summary information
Terms and concepts to know
HTML
XHTML
Tag
attribute
value
nesting
container
stand alone
<HEAD>
<BODY>
<TITLE>
WYSIWYG
BGCOLOR
LINK
ALINK
VLINKBACKGROUND
W3C
CSS
< P>
<LI>
<UL>
<OL>
<STYLE>
<HR>
<BR>
<A>
<DD>
<DT>
<DL>
Linking
Naming a FragmentBrowsing Exercises: Go to http://www.yahoo.com or another popular destination on the WWW. Using the view menu on your browser display the source code for this Web page. Locate the <HTML>, <HEAD>, <TITLE> and <BODY> tags for this page.
Some hands-on work:
Create an html page about yourself that includes the following elements within the HTML document itself.
Text that represents a headline (ie larger text with a specific font)
Text that represents a subhead
Three paragraphs of content that use italics, bold and underlined text
Specific fonts for use in the headline and body of the document
One horizontal rule
Deliberate alignment with all paragraphs and headlines
Deliberate color and font choices for the text and the background of the document (these should represent your personality in some way)
Save this page, you'll be doing more work on it later, then uploading it and sending me the URL.
Readings
Web Monkey Guides : Intro to HTML
http://www.webmonkey.com/96/53/
index0a.html?tw=authoringAbout.com: How to Build a Simple Web Page
http://webdesign.about.com/compute/webdesign/library/
howto/htbuildapage.htmWebpage Design for Designers: Typography
http://www.wpdfd.com/wpdtypo.htmSetting Type Online Some Notes on Typographic Design for the Web
http://www.ddj.com/documents/s=2682/nam1012432091/Look Ma! 15 Fonts
http://www.webmonkey.com/html/96/46/index2a.htmlSo, What Size and Type of Font Should I Use on My Website?
http://psychology.wichita.edu/surl/usabilitynews/2S/font.htm
More information
HTML
CSS
CSS Reference
http://builder.com.com/5100-31-5071268.htmlCascading Style Sheets
http://www.webreference.com/authoring/style/sheets/For those who have way too much time on their hands and want more information and practice, here's a resource listed in the February 1, 2002 Internet Scout Report:
Advanced CSS Layouts: Step by Step
http://www.webreference.com/authoring/style/sheets/layout/advanced/
Most Web sites are designed with HTML tables, which can be an arduous task. Making sites that are accessible and standards-compliant requires a separation of markup and content, and CSS is the best way to accomplish this. This Web page by Rogelio Vizcaino Lizaola and Andy King offers a step-by-step CSS layout tutorial on how to create WebReference table-like layouts (that behave well with small window sizes and large fonts), while avoiding some of the bugs and problems discovered in other implementations. Target browsers include all of the generation five and greater browsers on both Windows and Macintosh platforms
Copyright Internet Scout Project, 1994-2002. http://scout.cs.wisc.edu/
Color
Color grid: This page, from Web color expert 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.
Unix
Cygwin, Unix emulator for Windows PCs,
http://sources.redhat.com/cygwin/Unix commands: basic list for beginners:
http://www.utexas.edu/learn/pub/unix.htmlUser Friendly, the comic strip:
http://www.userfriendly.org/
The User Friendly Productivity Virus occurs when people read the Cartoon Archive for the first time. Individuals, MIS departments and entire offices have ceased productivity for an entire day while the UF strips are read from day one.http://www.linux-unix-info.com
This free online tutorial will teach you about the Linux file system useful commands, text editors, data manipulation, shell programming, accesing DOS and Windows Files from Linux and much more.
Shareware
Tucows,
http://www.tucows.com/Shareware.com,
http://www.shareware.com/Alternatives to Notepad (okay for class use)
Notepad2 (Windows) http://theopencd.org/programs/notepad2/
Gnotepad Plus (Linux) http://gnotepad.sourceforge.net/
Textforge (Mac) http://www.trancesoftware.com/software/textforge/
Well, it seemed like a good idea at the time...
Thankfully, neither of these made it into HTML 4 specs.
Miscellaneous stuff
AdAware (see if your software is collecting information on you and sending it to advertisers),
http://www.lavasoftusa.comAll Your Base Are Belong To Us: take one old video game with a hilariously badly translated introduction, add equal parts talent and mischief, and voila!--conspiracy!
Lesson Four exercises, part one
Name: Module four homework/quiz 1: Basic HTML (printable version) Instructions: Print this out to turn it in. The form won't submit online.
Question 2 Multiple Answer 2 points <img src="logo.gif" align="right">
Which of these are the attributes?
img src logo.gif align right
Question 3 Multiple Answer 2 points <img src="logo.gif" align="right">
Which of these are the values?
img src logo.gif align right
Question 4 Multiple Choice 1 points <body bgcolor="#ffffff">
Which of these is the tagname?
body bgcolor #ffffff
Question 5 Multiple Choice 1 points <body bgcolor="#ffffff">
Which of these is the attribute?
body bgcolor #ffffff
Question 6 Multiple Choice 1 points <body bgcolor="#ffffff">
Which of these is the value?
body bgcolor #ffffff
Question 7 Multiple Choice 1 points <td width="150" colspan="2">
Which of these is the tagname?
td width 150 colspan 2
Question 8 Multiple Answer 2 points <td width="150" colspan="2">
Which of these are the attributes?
td width 150 colspan 2
Question 9 Multiple Answer 2 points <td width="150" colspan="2">
Which of these are the values?
td width 150 colspan 2
Question 10 Multiple Choice 1 points <a href="test.html">
Which of these is the tagname?
a href test.html
Question 11 Multiple Choice 1 points <a href="test.html">
Which of these is the attribute?
a href test.html
Question 12 Multiple Choice 1 points <a href="test.html">
Which of these is the value?
a href test.html
Question 13 Essay 2 points In your own words, why is it important to learn HTML and not rely just on WYSIWYGs and other HTML editors?
Question 14 Essay 2 points In your own words,what is the process involved in creating, saving and viewing an HTML file?
Question 15 Essay 3 points In your own words, what things could you do to make sure you HTML code is easy to read and free of mistakes?
Question 16 Essay 2 points of the document type the sentence: Hello! This is my first Web page. HTML is fun and easy. Save the document as an HTML file. Using your browser view the HTML file. Try removing the above words and replacing them with the 100-word writeup of a Website you liked (from lesson one homework, remember?). Format it so it looks nice, and hyperlink the URL so it goes to the site in question. View your results, and check to make sure the hyperlink works. Run the code through a validator. When you're happy with how it looks, copy the source code and paste it into the answer box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Lesson Four exercises, part two
Name: Module four homework/quiz 2: Basic CSS (printable version) Instructions: Print this out to turn it in. The form won't submit online.
Question 1 Essay 3 points Using span style: For the exercises below, you will need to open a file in any basic text editor. Type out the tags for document structure. (Hint: there are 4 sets of these. Look 'em up if you need to.)
In the < body> of the document, begin your exercises. Save the document as an HTML file. Using your browser view the HTML file. When you're happy with the results, paste the the HTML code into the appropriate answer box.
Use < span style=...> to create three different versions of the following sentence :The quick brown fox jumped over the lazy dogs. The three versions should differ by font family, size, and color. Check the HTML in a browser to make sure it works. When you're happy with it, put the HTML code into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Question 2 Essay 6 points Creating lists: Using the tags for lists (unordered, ordered, and definition lists) and the various attributes you have learned, create three different types of lists for each of the groups of items below. Upon completion, you should have 6 lists with different elements and styles.
Apples
Oranges
Peaches
StrawberriesComputers
Keyboards
Printers
Scanners
You'll need to supply your own definitions for the < dd> tags.
Put the HTML code into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Question 3 Essay 2 points How does one link to a section of a document? (Hint: there are two separate steps you have to do.)
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Question 4 Essay 10 points Practice with links: Match each URL to the correct descriptive text. Using the < A> tag, type out the HTML code to link the following text to the corresponding term. The link correctly works if you are able to click on it and go to the indicated page.
Link the phrases to the corresponding addresses. For example make this phrase (an online bookstore) a link to the flowing URL (http://www.amazon.com). an online bookstore. You may need to visit the URLs to correctly match them up.
1. Shopping for Fido http://html.about.com 2. Learn more about HTML
http://www.harvard.edu 3. Read the Headlines
http://www.pets.com 4. Listen to music
http://www.usps.gov 5. Buy a stamp
http://www.ipl.org 6. Study hard
http://www.nytimes.com 7. Back to top
http://www.altavista.com 8. Search the Web
index.html 9. Check out a book http://www.mp3.com 10. Go to main page #top Put the HTML code into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Question 5 Multiple Answer 3 points
< blockquote> < space> < br /> < p> & nbsp ; < /p> < spacer size="30">
Question 6 Multiple Answer 2 points
< span style="color: #99CCFF">This text is light blue.< /span> < body text="#000000" vlink="#CCCCFF"> < p color="black">This text will be black< /p> < font="#000000">This text is black
Question 7 Multiple Answer 2 points
< body font="6"> < span style="font-size: 14pt">This is 14-point text.< /span> < p size="24pt">This is really big text< /p> < h1>Headings are larger than regular text< /h1>
Question 8 Multiple Answer 3 points
endemic (outlying) embedded (global) linked metastatic inline
Question 9 Multiple Choice 1 points
h2 {color:red;}
declaration property selector
Question 10 Multiple Choice 1 points
// for HTML, --> for CSS # for HTML, */ for CSS <!-- for HTML, /* for CSS <#-- for HTML, */ for CSS
Question 11 True/False 1 points
True False
Question 12 Multiple Answer 2 points
spaces periods underscores numbers symbols like % and $
Question 13 Multiple Choice 1 points
h1 {property: bold;}
weight strength font-weight font-style
Question 14 Multiple Choice 1 points
text only with a .html extension text only with a .css extension anything with a .css extension anything with a .html extension
Question 15 True/False 1 points
True False
5.
Graphics and color
Graphics and color on the Web
Graphics & Color on the Web
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 cell phones. 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?
GIF or JPG or PNG
GIF or JPEG or 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. Although any image can be saved as a GIF, this format is generally used for images with areas of "flat color" or a limited number of colors. This primarily means line drawings like logos, illustrations, or any drawing generated by computer or hand.
GIFs give a Web designer a variety of options when it comes to controlling color and size. GIFs can also be used with animation. These Animated GIFs are small, fun and easy to incorporate into a document.
There was a bit of consternation a few years ago when the Unisys Corporation realized they held a patent on GIF technology, and started enforcing it. Although this could mean everyone using gifs on their Websites would owe Unisys a royalty for every image, Unisys tended to only pursure the fees from the larger companies that sold image-processing software (Adobe, Macromedia, Microsoft, etc.). The Unisys patent helped speed the adoption of PNGs being used instead of GIFs. According to Tech News, the last of the GIF patent claims expired October 1, 2006. Stay tuned to see if that changes the future landscape of image file use on the Internet...
A JPEG, JPG or Joint Photographic Experts Group file is the other most common graphic file on the Internet, supported by most browsers 2.0 or above. JPEGs are generally used for photographic images. JPEGs give the Web developer control over file size thorough compression. However, when a JPEG file is compressed it loses some of the photograph's quality.
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.
Graphics software
Graphics Software
There are many different types of software available for creating GIFs and manipulating JPEGs. Many of these software programs could put a sizable dent in your wallet--several hundred dollars' worth of dent, even with an academic discount. However for the professional, purchasing an industry standard such as Adobe Photoshop or Adobe Illustrator is well worth the money.
For thrifty beginners Paint Shop Pro or Macromedia Fireworks are fine software programs that give you many of the features of their more expensive cousins at a very affordable price (around $100 for students).
For really thrifty beginners free software is the only way to go. Okay, although almost nothing is free (except the GIMP, see below), many software companies offer free trials of their software over the Internet. These software trials generally last only 30 days but can help give you good exposure to the a particular software. There are also many freeware or shareware programs that allow one to manipulate images. These programs are generally well under $50.
Sources for Software
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 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/en/. It's shareware, free to download and fully-functional; registration gets rid of the nag screen.
IrfanView is a fast, simple Windows-only freeware image viewer and editor that supports all major graphic formats, including BMP, DIB, JPEG, GIF, animated GIF, PNG, PCX, multipage TIFF, TGA, and more. In addition, it features drag-and-drop support, directory viewing, TWAIN support, slide shows, batch conversion, and modifications such as color depth, crop, blur, and sharpen. http://www.irfanview.com/
Makeup is a free Windows program that can compress a JPEG and make the file smaller while retaining acceptable quality in the image. It can also chantge the brightness, contrast and sharpness of the image, and rotate the image. It's available from a personal Website at http://www.trans4mind.com/personal_development/convertImage/helpFile.htm.
Paint Shop Pro
http://www.jasc.com/Adobe
http://www.adobe.comMacromedia
http://www.macromedia.comShareware.com
http://www.shareware.com
Web-safe color
Dithering, Web Safe Color and other cool terms.
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 monitor 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.
Web Safe Color
Older computers 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.
Here is a nice example from Lynda Weinman of what happens when you use limited-color gifs where you really ought to be using jpgs
http://www.lynda.com/products/books/dwg/dithering.htmlWeb Safe Color Palette from Lynda Weinman
http://www.lynda.com/hexh.htmlWhen 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? 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. Keep your target users in mind whenever you make color choices.
Dithering
Dithering
The easiest way to reduce the infinite color of a photograph or image to 216 Web safe colors is using 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. The best everyday example of this is type of image displayed in black and white. When your browser encounters an image with colors not in the 216 Web Safe colors, it dithers two or more of the Web safe 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).
RGB and hexadecimal colors
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: 255000000
R:000
G:000
B:000
Graphical images on the Web
Graphical Images on the World Wide Web
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" align="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 the STYLE attribute of a DIV or P container with the image inside it, in conjunction with text-align:
<p style="text-align:center"><img src ="url" /></p>
<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
<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>
<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 imagePay 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" hspace="number of pixels" / >
specifies how many pixels of space you want on both sides of the image
<img src="url" vspace="number of pixels" />
specifies how many pixels of space you want above and below the image
Example:
<img src="myphoto.jpg" width="150" height="200" alt="This picture of me at the beach was taken in 2003." vspace="10" hspace="15" border="2" align="right" />
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. vspace="10" hspace="15" Puts a 10-pixel margin above and below the image, and a 15-pixel margin on both sides of it. border="2" Puts a 2-pixel border line around the image. align="right" Puts the image on the right side of the page, and aligns any text in the area to the left of the image.
Finding images
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 offers 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.
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. The best part is it's all free, if you can tune out all the ads. For an example, check out the skittish graphic below:
Sites to think about--images
Sites to think about
How do the sites below handle graphics? Are they used effectively?
Site Four: Warp Corp. Tension Fabric Structures
Everyone in the class will be asked to review either these graphics sites or the color sites identified further in this module.
If your last name begins with the letters A through M, then you're assigned to review the Websites in this "Graphics" section. Please post your thoughts in the "Graphics" forum under Communications/Discussion Board.
Read both the module 5 discussion areas (both the graphics and the color discussion threads) and reply to at least two site threads.
Color on the Web--the concepts
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
Robert Smith Financial Services
Robert Smith Financial Services
Robert Smith Financial Services
How color affects mood
How Color Affects Moods, from 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://poynter.org/special/colorproject/index.html is a well-done 2001 Website that covers color theory and its applications in news presentation. (Requires Macromedia Flash Player.)
Color on the Web--the code
Color on the Web : The Code
There are several ways in which we can add color using the HTML code we have learned. As we learn more about HTML we will discuss other ways to add color including graphics and tables.
- Add color to the background
- Add color to the links
- Add color to the text
- Tips on using color
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 our document to a lovely shade of pink we would use the following HTML/CSS code.
<head>
<style>
<!--
body { background: #FFCCCC }
-->
</style>
</head>
Adding Color to the Links
CSS can also where you control the color of the links in your Web page. 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.
The attributes below control the color of the links.
a:link The color of link text that has not been clicked yet. Default=Blue
a:active The color of an active link (as the mouse clicks on the link) Default=Red
a:visited The color of a visited link or 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 soThe following code would change our document to a lovely shade of pink with lemon-chiffon colored links that turned light green when they were active and teal after they were visited.---Ouch!----
<head>
<style>
<!--
body { background: #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: #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>
Sites to think about--color
Color sites to talk about: How do the sites below handle color? Is it used effectively?
Everyone in the class will be asked to review either these color sites or the graphics sites identified earlier in this module.
If your last name begins with the letters N through Z, then you're assigned to review this "Color" section. Please post your thoughts in the "Color" forum under Communications/Discussion Boards.
Read both the module 5 discussion areas (both the graphics and the color discussion threads) and reply to at least two site threads.
Some tips on using color
Some 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.
Summary information
Terms and concepts to know
<DIV>
Headers
Dithering
Web Safe
RGB
Hexadecimal
GIF
PNGJPEG (uses file extension .jpg)
ALT
Alink
Vlink
Link
Text
<IMG>
Readings
WebMonkey: Intro to HTML
http://www.webmonkey.com/96/53/index0a.html?tw=authoringAbout.com: Writing well for the Web
http://webdesign.about.com/od/writing/a/aa061598.htm
About.com: Color Symbolism
http://webdesign.about.com/compute/webdesign/library/weekly/aa070400a.htm
Well, it seemed like a good idea at the time:
Why "ALT" attributes are important: turn off images in your browser (in MSIE, Tools/Internet Options/Advanced/Multimedia and uncheck "show pictures") and visit http://www.epicurious.com/
More information
HTML
Other browsers
Many people use a text-only Web browser called Lynx. This "emulator" shows what Web pages would look like in Lynx:
http://www.delorie.com/web/lynxview.htmlSee 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/
Shareware
Shareware.com,
http://www.shareware.comTucows,
http://www.tucows.com
Color
Web Safe Color Palette from Lynda Weinman
http://www.lynda.com/hexh.htmlColor Contrast & Dimension in News Design
Lesson Five exercises
Name:
Module five homework/quiz: Color and graphics (printable version)
Instructions: Print this out to turn it in. It won't submit online.
Question 1 Short Answer / Essay (2 points) Question: Color can help your Web site deliver a powerful message or it can completely distract your audience. What things should you keep in mind when using color to make sure it is beneficial to your Web site?
Question 2 Short Answer / Essay (2 points) Question: What is the importance of using Web-safe colors?
Question 3 Short Answer / Essay (10 points) Question: Writing Web pages: The Web page below uses all of the HTML tags you have learned so far. Based on the example below create the Web page, complete with working links. (Don't peek at the source code!)
Put the HTML code for your answer into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Bookstore Cafe
Today's Specials:
- Pasta with Chicken and Mushrooms $7.95
- Sandwich and Soup of the Day $5.95
- Warm Chocolate Chip Cookies and Milk $2.00
Located in beautiful downtown Mayville, the Bookstore Cafe serves a mix of modern favorites and traditional classics.
Our famous world famous chocolate chip cookies have been featured in the New York Times.
We are open Monday through Sunday 6:00am to 10:00pm
Question 4 Short Answer / Essay (10 points) Question: Writing Web pages: The Web page below uses all of the HTML tags you have learned so far. Based on the example below create the Web page. The page should take up the entire width of the browser window and should have a colored background. (Don't peek at the source code!)
Put the HTML code for your answer into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Quality Car Repair
Expert Advice
Friendly Service
Low Prices
Free Loaner Cars
Since 1949 Quality Car Repair has been keeping cars on the road and out of the shop.
Call us today for a free estimate and an end to your car troubles.
(555) 555-CARS
Question 5 Short Answer / Essay (3 points) Question: Using Color in HTML: Create an HTML document that resembles the picture below. Using the Web safe color palette, try to match the colors as closely as possible.
Put the HTML code into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Question 6 Short Answer / Essay (3 points) Question: More Use of Color in HTML: Create an HTML document that resembles the picture below. Using the Web safe color palette, try to match the colors as closely as possible. Feel free to substitute your own favorite colors.
Put the HTML code into the box below.
Be sure to click the "Plain text" button on the answer box so Blackboard doesn't try to convert your response into HTML. (Note: this "plain text" option is not available in many versions of MS Internet Explorer for Windows. If you're taking the quiz in that browser, just submit the answer as usual.)
Assignment instructions
Assignment: Inserting Graphics into HTML Documents
This assignment is to be turned in on the ftp site. Module six explains more about FTP, and includes specifics for getting your files onto the student server. The page marked Graphics Assignment URL turn-in (in Module 5) contains three fields where you can type the URLs to the Web pages you create for this assignment.
Part one:
For this portion of the project, you'll build three more xhtml screens and add to the bio page you built at the end of module four (see the summary information from module four for details on what goes here). You'll have four screens that are biographical in nature. The screens should have consistent navigation, all should link to each other and include the following additional features.
-
Consistent type, colors and navigation *
-
Headline and subhead per screen
-
One graphic per screen
-
Email link to yourself on every screen
-
Slightly different layout on all screens
-
Three links to external web sites
- Run a validation report for all the pages. If the page checks out okay, include the code they supply to show that the page checked out okay. If it gives you an error message you can't figure out, include a link from each page in question to a page into which you've copied the text of the validation report.
*Add a linked css file and edit all of your xhtml documents to include links to the css file. Use this css file to create the color and font effects that are consistent on all the pages. You should also add samples of at least two css properties, such as letter-spacing or line-height. Check the book or one of the CSS links on this Website if you'd like to browse through some CSS options to include.
Parts two and three
For the assignment below, look carefully at the picture of each Web page and, using the HTML you have learned in class*, recreate the picture as a Web page with valid HTML. For each picture, you will be given links to the graphics files and a few tips. Remember you will have two separate Web pages: one page for Part 1, and another page for Part 2. They can not go on the same page.
*Note: using the HTML you have learned in class. In other words, no tables or other things we haven't learned in class yet!
Use http://validator.w3.org/ to check your code as you develop it. Fix any problems the validator reports. If you're unable to figure out what the issue is, let me have a look at the page and I'll be happy to help isolate the problem. By the time you turn in these pages, they need to be able to pass through the validator without issue in order to be eligible for full credit. Failure to validate the code before you turn it in will cost you 20% of the grade.
See to it that your all work is reviewed by a trusted person, for both spelling and grammar. Spell-check is necessary but not sufficient: for example, if you type "form" when you mean "from", spell-check won't realize there's a mistake.
This is a challenging assignment, and I encourage everyone not to wait until the last minute. The most important part is that you understand the HTML behind these pages. Your HTML documents should look as close as possible to the examples below, with two exceptions:
- Don't bother trying to match the font exactly. Remember, your computer might very well not have the exact same fonts as the one from which this screen capture was taken. Just try to come close.
- It's not necessary to force line breaks to make each line end where it did on my screen capture. Just let your text wrap to fit the page.
Part 2: Discount School Supplies
|
Graphics: To download graphics, click on link and then right click on image and save to disk. |
Tips:
|
|
|
|
Part 3: SSCC Campus Defense Club Newsletter
|
Graphics: To download graphics, click on link and then right click on image and save to disk. |
Tips:
|
 Using the graphics and tips above, create
a Web page that looks like the Web page displayed
on the left. For a clearer picture of this
Web page, click on the picture. |
|
Assignment URL turn-in
6.
FTP
Posting your site to the Web
Posting Your Site to the Web
Created an HTML 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 Web documents and files via the Internet, so other people can see them. If you want an HTML 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.
Basic FTP software instructions
Basic FTP software instructions
For this course, no matter how you access the ftp server, you'll need to know:
server/host: dev.southseattle.edu
login: your first initial and your last name (no spaces between them)
password: your student number
URL for your Website: http://dev.southseattle.edu/yourlogin
(That's your login as described above. Don't go literal on me and type in "yourlogin"; that won't work unless your name is Yolanda Ourlogin or something.)(Note: more detailed FTP software instructions for Windows are in this Adobe PDF document: FTP with WS_FTP and Cute FTP.)
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.)
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.
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.
Once a file has been transferred, you should be able to see that file in a Web browser by typing in the URL. In many cases, your account name may be incorporated into the URL by means of a tilde ~ or a backslash /.
More detailed information is available here:
Macintosh: FTP with Fetch
Windows: FTP with WS_FTP and Cute FTP (this is an Adobe PDF document)
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.
Basic FTP command-line instructions
Basic FTP command-line instructions
- 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.
- 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.)- Use the command line prompt to connect to the remote computer:
FTP > open dev.southseattle.edu- When prompted, type your login ID (first initial and last name) and password (student ID), pressing (enter) after each. You won't see your password as you type it.
- Want to change to a subdirectory? Use the command line prompt to change to that directory on the server:
FTP > cd public_html(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 public_html, you'd need to cd again into that subdirectory.)- Want to make a new directory called "final"?
FTP > mkdir finalWant to know what directory (on the server) you're in?
FTP > pwdWant 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- To upload or download HTML or text (txt) files, type ascii at the command line
FTP > asciiFor any other kind of files (images, sounds, Word documents, etc.), type bin at the command line
FTP > bin- 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 > put index.html
FTP > get notes.html
FTP > mput thing1.html thing2.html
FTP > mput *.txt
FTP > bin
FTP > put photo.jpg
FTP > get portrait.jpg
FTP > mput sketch.gif draft.jpg button.png
FTP > mget *.gif- All done? Type "bye"
FTP > byeToday, 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.
You'll still need to know:
server/host: dev.southseattle.edu
login: your first initial and last name (no spaces)
password: your student number
URL for your Website: http://dev.southseattle.edu/yourlogin
(That's your login as described above. Don't go literal on me and type in "yourlogin"; that won't work unless your name is Yolanda Ourlogin or something.)
Good file management
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 FTPd 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.
Homes for Web pages
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.
If your Web site will become the permanent Web page for a commercial organization ...
If your Web site will become a small business site...
If your project will become the permanent Web page for a commercial organization ...
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.
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) for Web hosting. Web hosting is a fee-based service (usually a sign-up fee and/or monthly maintenance fee), where an ISP will lease you space on their Web server. You will have password access, and 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.
If your project will become a small business site...
If your project will become a small business site (for instance, for Web design services or a home business), you have several options for getting affordable or free space.
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. (Again, check sites such as http://www.register4less.com, http://www.dotster.com/, http://www.godaddy.com/).
Many places on the Web offer low-cost or free sites to small business 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.
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, evidently have no children who listen to rap music and no exposure to the language of many parts of the urban United States.
As if that wasn't bad enough (and please don't read this part if you're easily offended or shocked)
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.htmAmazon.com Associates
http://www.amazon.com/associates/
If your project is a personal or informational Web site, or if you have absolutely no money but still want a Web site...
If your project is a personal or informational Web site you might not want to spend money to secure Web space. Fortunately for us, the World Wide Web is full of low cost or no cost opportunities for hosting Web sites, especially if you don't mind displaying other people's ads. The sites below offer free or low cost hosting. Keep in mind that nothing is actually free and 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.
Yahoo Geocitites
http://geocities.yahoo.com/Geocities, now owned by Yahoo, was one of the first places to offer free pages to individuals. FTP access, 15 megabytes of space and Web site add-ons are just a few of the free features. Downsides: the addresses are a little scary and advertising pop-up windows can be annoying (though these can be turned off for $4.95/month).
Tripod
http://www.tripod.comTripod includes FTP access, 20 megabytes of space and Web site add-ons. Their ads are usually less obnoxious than Geocities', and can be turned off for $4.95/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.aspxBrinkster's "Educational Package" has 15MB 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/Yahoo's listing of free Web pages
http://dir.yahoo.com/Business_and_Economy/Business_to_Business/
Communications_and_Networking/Internet_and_World_Wide_Web/
Network_Service_Providers/Hosting/Web_Site_Hosting/Free_Hosting/
Summary information
Terms and concepts to know
FTP
WS_FTP
Cute FTP
Domain NameWeb Hosting
ISP
Web ServerRemember: 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.
Readings
Register your Domain Name (Inc.com)
http://www.inc.com/articles/details/0,6378,ART13828_CNT56,00.html
More information
Web Hosting
Cnet: Web Hosting
http://www.cnet.com/internet/0-3799.html?tag=dirFree Webspace. Net
http://www.freewebspace.net/Seattle Community Network
http://www.scn.org/Yahoo's listing of free Web pages
http://dir.yahoo.com/Business_and_Economy/Business_to_Business/
Communications_and_Networking/Internet_and_World_Wide_Web/
Network_Service_Providers/Hosting/Web_Site_Hosting/Free_Hosting/Tripod.com
http://www.tripod.comYahoo Geocitites
http://geocities.yahoo.com/
FTP THIS! Fun with images
Photo Exercises
At the very least, Web developers need to be able to resize images using some sort of image manipulation program, and save them as Web files (jpg, gif, or png).
Open the file in the image editor of your choice. Use the product's "Help" if necessary to find how to modify the size of the image.
Resize the image as desired, taking care to make certain you don't change the image's proportions.
Save the file as a gif or jpg for the Web. In Fireworks, use the "Export" menu (or "Export Wizard" if you run into problems. In Photoshop, use "Save for Web". In GIMP, just name the file with a .jpg or .gif extension and the program automatically saves it in the right format.You can attempt the following optional exercise using any one of hundreds of image editing tools.
Look at this explanation of the image-editing toolbar in Photoshop: http://www.newtutorials.com/photoshop-toolbar-tutorial.htm. Toolbar icons are pretty standard, so this image should adequately work for GIMP and Fireworks, even though the order and options might be different.
Check http://www.lehigh.edu/~inimr/fireworks/org_tut.htm for an easy review of steps for this exercise for users of Macromedia Fireworks. There's a good tutorial at http://www.myjanee.com/tuts/moon/moon.htm that covers all the Photoshop steps you'd need to use for this exercise. For GIMP users, start at http://gug.sunsite.dk/docs/Grokking-the-GIMP-v1.0/node30.html for a brief introduction to layer import and export, and then proceed to http://gug.sunsite.dk/docs/Grokking-the-GIMP-v1.0/node66.html for the steps in combining photos into a new one.
Combine any image from column A and any image from Column B into a new image. Click the thumbnails below to get the full-size images. If you prefer to combine two images of your own choice instead of any of these, that's fine.
Use the lasso tool to select the part of the image you want to copy. Edit, copy; then edit, paste into the image. Use the eraser tool to get rid of anything unwanted. Use Modify/transform/scale to resize what you've pasted into the image.
Once combined, resize the new image to a reasonable size for the Web and export it as a .jpg file.
Create a Web page with some text that pertains to your new photo. Upload the whole thing, images and html, to the Web server, and open it from the http://ux2.northseattle.edu/ server to make sure it works. Copy the URL.
Go to the discussion area called "South Seattle Community College Secrets Revealed". Tell us about the Web page you made--what it's designed to prove, how the color choices you made pertain to the subject matter, the audience such a page like this would be intended to reach, and any other information that will help prepare us for the page. Then, paste in the direct URL to the page you created so we can see it.
Visit everyone else's contributions. Comment on at least three of them.
Column A Column B
(I have no larger version of this photo)
(I have no larger version of this photo)More Photoshop tutorials are available at http://www.newtutorials.com/photoshop-tutorials.htm
Bored? Take this image, turn the day from foggy into sunny, resize it and export it as a jpg.
7.
Design process
Designing for the Web
Designing for the Web
About Web Design
Creating a good Web site takes a lot more than just typing some code and saving it as a Web page. Anybody can hammer a nail to a piece a wood, but it takes more than that to build a house. Web design, the process of designing Web pages, can be thought of in the same way.
To begin the process we must first understand design. According the to the dictionary, design means "to prepare the preliminary sketch or the plans for (a work to be executed), to plan the form and structure of". Simply put, design is all about communicating a message!
The main challenge with Web Design is to communicate a message to the users of the Web site. In doing so we must keep in mind several things, including:
- remember to reach all of our users (not just the ones with fast modems)
- the Web is very different from traditional print media
- legend says less then 10% of your users will scroll beyond the first screen. Studies disagree, but show that users will only scroll if they have reason to believe there's compelling content further down the page. It's safe to assume information overload and a short attention span are normal unless the target audience is highly motivated to read your information.
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
The process of Web design
The Process of Web Design
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:
- The Idea
- Pre Design- Setting Goals - Determining your Audience
- Flow Charts- Information Architecture- Mapping out the content
- Story Boards - The look and feel
- Final Design
- Building the Site
- Test Test Test
- Launch
Granted, 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 we go back to our model of building a house, imagine that you laid the foundation, nailed up the walls and started on the roof when the person you are building the house for says... "but I also want a garage". So you stop the roof, add some more foundation, nail 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.
Pre-Design
Pre-Design
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 predesign, because (if you know what you're doing) it takes place well before any design work begins. Many professional Web designers create predesign 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?
Design sites to talk about
Sites to Talk about
Take a look at the Web sites below. As you look at these sites, keep in mind the five questions from the previous page.
- Why did they build this site? (site description or statement of purpose )
- Who is their audience? and who are they? (or who do they want your audience to believe they are?)
- What are the objectives of this site? (what are they trying to accomplish?)
- What kind of information will be on this site? (outline of the information)
- How will the site affect the user?
Can you determine the site's objectives, its purpose or potential audience, the message and purpose of the site?
- Site One: mtv.com
- Site Two: smithbarney.com
- Site Three: burpee.com
- Site Four: Mount Everest
- Site Five: lego.com
- Site Six: seattleopera.com
If your last name starts with the letters A-M, add original reviews to the "Design" forum under Communications/Discussion Board.
Everyone: read the threads and add to the conversation with original opinions on at least a couple of them.
Flow diagrams
Flow diagrams
Before a house is built, an architect maps out the layout of the rooms, determines where doors and windows will go and how people will live in the house. This map is called a blueprint and it is essential for the building process. An architect who 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 usually called a flow chart, flow diagram, or site map.
Creating a Flow diagram
Once the predesign step has been completed, the next step is to create a flow diagram. There are many ways that you can create a flowchart. In fact 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) 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 flow diagrams. Microsoft Excel and MS Paint and a variety of word processing programs can be used to create flowcharts.
One of the first steps in creating a flow diagram is to make a 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
Examples of a Workplan Flow diagram for a Website
Navigation
Navigation
Navigation is an essential part of any Web site. Navigation allows the user to figure out where they are, gives them insight into the organization of your site, and keeps in mind the goals of your site and your user.
Some Things to Remember About Good Navigation
- Users should always be able to go home or back to the main page
- Navigation should be obvious and easy to figure out
- Offer clear and understandable labels
- Users should be able to tell where they are at all times
- Let users maneuver without relying on the browser buttons
- Make all parts of your 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. By far the easiest is to have simple text links to the various parts of your Web site. Below are several examples of different forms of navigation.
- Navigation bar and sidebar
- Text
- Frames
- Dropdown (and image map)
- Image map
- Flash
- Javascript
Navigation sites to talk about
Navigation: sites to talk about
Take a look at the sites below. How do these sites handle navigation? Is their navigation effective? Why or why not?
- Site one: Webmonkey
- Site Two: Shackleton's expedition
- Site Three: Martha Stewart
- Site Four: iHotelier demo (demonstration site for hotel reservation technology)
- Site Five: Visio
- Site Six: About.com
If your last name starts with the letters N-Z, add original reviews to the the "Navigation" forum under Communications/Discussion Board.
Everyone: read the threads and add to the conversation with original opinions on at least a couple of them.
Storyboards
Storyboards
Storyboards give one an idea of what a Web page will look like. All of the visual elements of a Web page including the text, interactivity and links are mapped out ahead of time to give the designer or client an idea of how things will look.
One of the easiest ways to create a storyboard is to draw it out by hand. Use an 8 1/2 by 11 piece of paper turned on its side to represent the Web page, and draw in your elements with a marker or pencil. Storyboards can also be created using computer software programs such as Adobe PhotoShop or Illustrator, Microsoft Word or Powerpoint, etc.. As you become more proficient at Web building, you will discover that the added benefit of using a software program--particulary an image editing program like Photoshop or Illustrator--to create a storyboard is that the storyboard can later be split 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 simple sketched storyboard:
A more visually detailed storyboard
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.
Finding inspiration
Finding Inspiration
If you have ever had to write an article or paper, you may have experienced writer's block. No matter what you do, you can't think of the words to write. The same thing happens with design. You may have done your predesign, set the site goals and even started the flowchart, but you can't imagine what your page should look like.
Start by pretending you're a potential user of the Web site. What task would you be trying to accomplish? What steps would you expect to take? What would you like to see? What would get in the way?
Finding inspiration can be a click away. Looking at Web sites that you like and taking note of what they did for design is a good way to pick up ideas. Draw some sketches to get a better handle on how you'd like your pages to look.
Good sites for inspiration
Coolhomepages
http://www.coolhomepages.com/Lynda.com Inspirational Sites
http://www.lynda.com/resources/inspiration/index.htmlAnother thing you might want to do is to try some brainstorming about the look and feel of your site. Take a magazine and cut out images that make you think about your content and goals. Maybe the images are of people who might use your site; maybe they are of items that make you think of your content. Place the articles around your work area or on a piece of paper like a collage. Use them as a way to start your imagination and spark ideas, sketches, etc.
ComArts Interactive Design
http://www.designinteract.com/
Summary information
Terms and concepts to know
Purpose of Design
Usability
Pre-Design
Web Design ProcessFlowchart
Story boards
Navigation
Types of NavigationWhat should I know at this point?
At this point in the class you should be comfortable with the following:
- usability concepts (in other words, what you have to do to make things work for users)
- Web design process
- basic document structure
- formatting text tags for space and alignment
- 3 types of lists
- links to
- external,
- local, and
- internal
- graphics
- thinking
- problem-solving
Readings
Information Architecture Tutorial
http://www.webmonkey.com/webmonkey/design/site_building/tutorials/tutorial1.htmlDesigning Web Navigation
http://www.ahref.com/guides/design/199808/0831jef.htmlAmateur Web Sites the Top Ten Signs
http://www.webdevelopersjournal.com/columns/abc_mistakes.html
More information
Web Design
Web Design Guru: Lynda Weinman
Good sites for inspiration
Coolhomepages
http://www.coolhomepages.com/Lynda.com Inspirational Sites
http://www.lynda.com/resources/inspiration/index.html
Navigation
Menus with Beauty and Brains: The Heart of an Excellent Site
http://www.webreference.com/graphics/column42/index.html
Lesson Seven exercises
| Name: | Module seven homework/quiz: Design process (Printable copy) | |||||||||||||||||||||||||||||||||||||||||||||||||||
| Instructions: | Print this out to turn it in. The form won't submit online. | |||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
| |
||||||||||||||||||||||||||||||||||||||||||||||||||||
Assignment: Pre-design for final project
Name: Pre-design for final project (Printable copy) Instructions:
Print this out and turn it in. The form won't submit online.
This assignment should get you thinking about your final project for this class. First, a little background on the final project requirements: The final project for this class is to create a Website of your own design. The final project should include as many elements of Web publishing learned in class as is practical. The Website created for the final project can be on any topic and must contain at least 10 original hand coded pages that link to one another, and a linked stylesheet to control them all. Completed Web pages done as part of other assignments will not count as part of your final project.
Points are awarded based on the following:
- Correct use of HTML 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 html text
- Tables or CSS-P for complex layout
- Consistent design and navigation/images
- Use of working form
- Difficulty and experimentation (use of styles, tables, forms, CSS, etc.)
- Does it work? (no broken links, must be on the server, images show up, etc.)
- Did you follow instructions? (linked stylesheet, site has been tested before you turned it in, etc.)
- Conventions of good design are followed (consistent navigation, name on every page, can always go home, alt attributes/values on all image tags, etc.)
- Online presentation (All students will present their final project via the discussion boards. Tell us about your project, challenges in building or designing and future plans for the project.)
- Participation in online discussion: use the discussion board to interact with the other students, asking questions or commenting on their final projects.
Even if you are not the best designer in the class, you should be able to get a good grade provided you pay attention to detail, try some advanced tricks like styles, tables, frames or forms, and pay attention to design details discussed in class.
Question 1 Short Answer / Essay (5 points) Question: PreDesign: Take the predesign questions and use them to come up with a plan or predesign for you own Web site. Remember after reading your predesign plan a person should have a clear idea of what you message is, who you are trying to reach and the objectives and goals of your site.
Idea: (What is the idea for your final project?)
Question 2 Short Answer / Essay (5 points) Question: Why are you building this site? (Site description or statement of purpose)
Question 3 Short Answer / Essay (10 points) Question: Who is your audience? and Who are you? (or who do you want your audience to believe you are)
Question 4 Short Answer / Essay (10 points) Question: What are the objectives of this site? (what are you trying to accomplish)
Question 5 Short Answer / Essay (10 points) Question: What kind of information will be on this site? (Outline of the information)
Question 6 Short Answer / Essay (10 points) Question: How will site affect the user?
Question 7 Short Answer / Essay (25 points) Question: Flow diagram: Using the instructions discussed in the class notes, create two flow diagrams: a flow diagram for your Web site, and a 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.)
You may do this electronically, using a program such as Word, Excel, or MS Paint, or you can draw this using pen and paper and hand it in.
If you create the file on a computer, upload it via FTP and put the URL in the box below.
If you create the flow diagram on paper, type "handed in during class on (date)" into the box below.
A flow diagram should look like the image below.
Question 8 Short Answer / Essay (25 points) Question: Story Board(s): For each page or major section of your Web site, develop a story board. 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 predesign 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.
You may turn in the storyboard(s) electronically, using a program such as Photoshop, Paint, or Word, or you can draw the storyboard(s) using pen and paper and hand it in.
If you create the file(s) on a computer, upload it via FTP and put the URL in the box below.
If you create the storyboard(s) on paper, type "handed in during class on (date)" into the box below.
An example storyboard is pictured below; a simpler one can just be a sketch of what the page layout will be (title goes here, picture goes here, text goes here).
Once you have turned this in... start collecting your information for 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.
8.
Tables
Introduction to tables
Introduction to Tables
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>
align left | right according to text. To center a table use a <div> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Table aligned right
text text bgcolor In a table, you can set the background color of an entire table the row or a cell. Use hexadecimal values. Table blue background
blue blue 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.
Border on
Border off cellpadding space within cells cellpadding is set at 15 pixels
cell cell cellspacing space between cells cellspacing is set at 15 pixels
cell cell width can be specified by percentage of the screen or by pixels 50 pixels in width
test test summary 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 reads the summary immediately before reading the caption.
Tags within a table
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
<caption>...</caption> Contents of this tag display immediately above the table itself. Usually contains a description of what's going to be in the table. 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.
align
bgcolor
valign = vertical alignment<th>.....</th>
Table header. Depending on the browser settings, text in a table header may be bold or larger than default. The table header is used for row headers or column headers, those labels in a data table that tell what's in the defined cells. See the example below.
align left|right|center refers to the content of the cell
bgcolor
colspan
rowspan
width
valign = vertical alignmentth scope="row" associates the text in this cell with every cell in this row
th scope="col" does the same thing for columns<td>.....</td>
Table cell. Any content in your table must be in either a table cell or a table header.
align left|right|center refers to the content of the cell
bgcolor
colspan
rowspan
width
valign = vertical alignmentThe 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>
Defines a group of header rows (generally the columun 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. <tfoot> ... </tfoot>
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. Counter-intuitively, in the code the <tfoot> is supposed to preceed 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. <tbody> ... </tbody>
Defines a group of data rows in a table. Supporting browsers will scroll the tbody while leaving the thead and tfoot static. There's a good example of the th scope="..." attribute used in a data table at http://cita.rehab.uiuc.edu/courses/2003-01-LIS350AR/lec11/slide15.html
There's lots of additional information and details about table tags, attributes, and values at http://www.htmlhelp.com/reference/html40/tables/
Example table
Mortality rates Cats Dogs <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 align="left">Cars</div></th>
<td><div align="right">5%</div></td>
<td><div align="right">12%</div></td>
</tr>
<tr>
<th scope="row"><div align="left">Curiousity</div></th>
<td><div align="right">23%</div></td>
<td><div align="right">2%</div></td>
</tr>
</tbody>
</table>
Basic tables
Basic Tables
A table at its most basic form will contain the tags <table><tr><td></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>
Table sizing
Table Sizing
The width and height of a table are controlled using CSS. You can also set table width (but not height) by way of the width attribute in the table tag itself. 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 40% 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>
<style type="text/css">
<!--
table.demo {
width: 40%;
height: 100px;
}
-->
</style>
</head><table border="2" class="demo">
<tbody>
<tr>
<td width="10%">10%</td>
<td width="90%">test</td>
</tr>etc...
COLSPAN and ROWSPAN
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 subseqent 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>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr><tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
<td>row 2 column 3</td>
</tr></table>
row 1 column 1 row 1 column 2 row 1 column 3 row 2 column 3 row 2 column 2 row 2 column 3 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>
results -->
test test test test test The differences between rows and columns
Remember, under normal circumnstances, columns always go up and down. If columns go side-to-side, something has gone terribly wrong. When columns are spanned, something goes across them--like a roof.
Rows, on the other hand, should always go side-to-side. If you have horizontal rows, something bad has happened. When something spans rows, it's probably sitting partly in your seat. I often sit next to rowspanners in airplanes.
Keeping track
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">
<!-- column 1 lines up here-->
<!-- column 2 lines up here-->
<!--column 3 lines up here--><!--this is the first row across -->
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr><!--this is the second row across -->
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr></table>
row 1 column 1 row 1 column 2 row 1 column 3 row 2 column 1 row 2 column 2 row 2 column 3
<table border="1">
<!-- column 1 lines up here-->
<!-- column 2 lines up here-->
<tr>
<td colspan="2">test</td>
</tr><tr>
<td>test</td>
<td>test</td>
</tr></table>
test test test
<table border="1">
<!-- column 1 lines up here-->
<!-- column 2 lines up here-->
<tr>
<td rowspan="2">test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
test test test To review examples of extensive use of comment tags as an aid to writing tables, revisit these sample HTML pages: