What do you want to design today?

body | images | layout | concerns
graphics | interface | developments

See Sites I Like . . . and Why

<!-- Wendy's Web Design
Lecture -->

Ten Tips & Tricks for Images:   1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10
(Based on Professor Rich Beckman's Using Photos on the Web)

<html>

general web design resources, tutorials & intros

The below are a few resources that I and many others highly recommend:

Netscape's Creating Net Sites and Templates

HotWired's Web Monkey
and HTML Tutorial

Dave's Interactive HTML Tutorial for Beginners

CNET's HTML for Beginners

NCSA Beginner's Guide to HTML


Need help making your Web page for the first time?  Why not do it the easy way -- try a wizard:

Arachnoid Home Page Builder

Netscape Page Wizard

Web-o-Matic
(not available at present)


Don't forget that ATN has a variety of online and print primers for making Web pages, some of which are in your DTE.  See, for example, their Web authoring guides:

HTML: Part 1 and Part 2

Netscape: Part 1 and Part 2


Graphics


The UNC-CH Campus Web provides the following documentation:

Creating Personal Web Pages at UNC-CH

UNC-CH HTML Guidelines

Maintaining Web Pages

And you may want to participate in Web-Walkers.

 

^

 



The best designed Websites have a unified look, they catch and hold our interest, they are intriguing but not bewildering to navigate, they are simple to use, and they are well maintained without spelling and other errors.  Well-designed Websites showcase their content.

Is it easy to produce Websites that meet this criteria?  Yes and no.

Yes, because when in doubt we can fall back on the famous dictum associated with the Bauhaus architect Mies van der Rohe: less is more.  Strip away; get rid of the clutter.  Just leave the essential on your site, form following function, which is a phrase coined by the influential American architect Louis Sullivan.

No, because it takes diligence to keep a site up to date, to resist cute effects, to do the painstaking work necessary to avoid broken HTML tags, and to stay current with evolving Web standards.  Simplicity and maintenance takes time and trouble.

But for those who enjoy good online design -- and what Web surfer does not? -- the results are well worth the effort.  A well-crafted Website could be your ticket to a new career, it can open the door to new friends and ideas, and it can help develop your personal style and taste.

 


< Graphic Design >

 

Graphic design texts often define the characteristics of good design as tension.   Neither too static nor too busy, neither too plain nor too fancy, neither too eye-catching nor too dull.  The below is a quick look at a few of these visual tensions.

 

Symmetry + Irregularity = Order


Older Web pages generally are boring.  They're flat, black type on a grey page.  Outside of some links, not much is happening.

Then along came early tables and the <center> tag.  All of a sudden Web designers could lay out pages in two columns or otherwise breakup the monotony of left aligned pages.  But the initial result wasn't much better: too much symmetry.

And then with more sophisticated tables, frames, and other extensions to HTML, designers found ways to lay out pages in eye-catching ways.  Some Web authors go overboard and try too many things on one page.  But generally online design has improved quite a bit and we now have the means at hand to produce pages that are both lively and well balanced.   Many Web pages today have an internal order that creates interest and aids comprehension for the user.

Create movement and rhythm by:

  • Alternating the size, weight and density of graphic elements.
  • Breaking up the vertical space with well-placed horizontals -- most Web pages are too vertical.
  • Organizing your page around a single dominant graphic element.
  • Making good use of white space.

 

Color + Monochrome = Interest


Color is life.  Nothing perks up a page more quickly than the well-considered use of color.

But a little bit of color goes a long way.  Work with a limited, non-dithering palette.  Contrast color with black, white, and greys and other neutrals.  In terms of download time, remember that color is data and more data means a longer wait for pages to load.

Color theory is an art or science in itself and can be complicated to explain.  The below are some simple rules of thumb:

  • Choose colors appropriate to the mood you're trying to convey: red excites, blue soothes, earth tones soften the harshness of the electronic medium, etc.
  • Pick a color scheme that coordinates with the institutional identity or overall look of which your pages are a part (for instance, Carolina blue for UNC-CH pages -- #0066CC).
  • Use color for emphasis, e.g. on subheads and to set off blocks of type.   Remember that hyperlinks generally change color after they've been visited.  If you use a contrasting body color, be sure the type will be visible.
  • Use color for contrast and harmony, for example by mixing related high and low intensity colors, such as yellow and olive with turquoise, as below.  What this example also shows is that dull colors are better for large areas with brights, yellow in this case, reserved for accents.
     

 

Copy + White Space = Clarity


The best method for breaking up your pages and increasing readability is the intelligent use of white space.  In newspaper layout, a page that is too copy heavy is said to be a "grey page," meaning flat and uninteresting.

When used well, white space controls the pacing of a page.  The blocks of type tell the user where to read quickly and where to slow down.

When used poorly, white space creates chaos and the page looks sloppy.  Learn how to control white space through layout.

Control within the layout is achieved through the <blockquote> tag for shorter line lengths (horizontal space), and through line breaks, paragraph breaks, and the <pre> tag for leading (vertical space).

 


< Interface Design >

 

Designing for the Web is not like designing for other media for these reasons:

  • Interactivity -- feedback from users through mailtos and forms.
  • Dynamic -- the Web is only a few years old and rapidly changing, permanently "under construction."
  • Variety -- tremendous differences between different browsers and different versions of browsers.
  • Immediacy -- as soon as a page is uploaded, it's globally published.
  • Hypermedia -- nonlinear structure that users navigate on their own.
  • Multimedia -- different kinds of media can be combined on a Web page, such as audio, video, and animation, with at least an element of interactivity.

These are the challenges that make Web design both frustrating and exciting.  The interface, or the way users interact with the medium, isn't flat.  Users scroll and click rather than turning pages.

The limitations of Web design are the inverse of its strengths.   It's simply difficult to meet all the demands of graphic and interface design, and all users with all browsers.

You can't expect to make everyone happy, meet every standard, and please yourself simultaneously.  Compromise is necessary.  But it can be fun to try to outwit the challenges and develop a new kind of expertise.

 

Navigation: Websites, Homepages & Hyperlinks


Users navigate Websites.  They have to be able to get around and find their way through different pages on a Website and back to the homepage without getting lost.  For the Web designer, this requires careful planning.

A Website is a collection of pages unified by a common theme, whether for an organization, a portfolio, or a group of pages such as a syllabus.   They should have a similar look and feel or interface design.

The user should sense an overall style or point of view that acts as your design signature.  This unifying identity will help the user comprehend where your site begins and ends even after he or she exits through hyperlinks.   Create an environment that encourages repeat visits.

A homepage is the first page of a site.  It acts as book cover, title page, and table of contents.  The home page is the central hub of the Website.

Additionally a personal page, such as for a student, is referred to as a homepage.  This type of homepage acts as business card, biography, and classified ad, and often is linked to a résumé.  Many homepages include a hotlist of favorite or recommended sites.

It's crucial to manage the hyperlinks on a site.   Only link what will help your user.  Don't link indiscriminately.   Remember that users will take your links as endorsements and judge you by their quality and appropriateness.  And every link you provide will require maintenance later; check your links periodically to make sure they still work.

 

Page Conventions: Who @ Where + When


All Web pages should include the following:

  • Name of person who created the page or site and who is responsible for its upkeep.
  • Name of organization with which the person above is affiliated, generally including some indication of geographical location or snail-mail address.  Many Carolina users link to the UNC-CH home page (see policy).
  • E-mail address of someone the user can contact -- often hyperlinking the names above to mailto forms suffices.  The code for a mailto at UNC, for example, is <A HREF="mailto:student@ email.unc.edu"> student@email.unc.edu</A>. You would insert your name, as the author, for < student >.
  • Date of last revision.
  • Link back to the homepage of the site.
  • Optional: Copyright notification.
  • Optional: Counter that keeps track of the number of visitors to that page.
  • Optional: A badge that indicates whether the site has been optimized for Netscape and/or Internet Explorer.
  • Optional: A badge that makes a political statement, such as the EFF's Blue Ribbon campaign, or that says your site won an award, or that your site is identified with an online community, etc.

 

Consider Your Users: Download Time & Browsers


Waiting for Web pages is only slightly less interesting than waiting for paint to dry.  Do all you can to prevent your pages from loading slowly.

The following are some simple guidelines.  The "don'ts" first:

  • Don't include large graphics files -- large meaning in terms of both dimensions and file size.
  • Don't have too many elements on any one page -- the browser reads through the data, which slows the download time (this page pleads guilty).
  • Don't include gizmos, such as Java applets, simply because you can -- they're notorious for server drag.

A few "dos":

  • Do interlace gifs and specify progressive jpegs when saving graphics files (see left) -- except when they're used as background images.
  • Do use a background color, which loads much faster than an image that must be tiled (repeated).  If you're wedded to the idea of a wallpaper effect, use the same background image on several pages (see below).
  • Do use the same image more than once so that it stays loaded in cache through the different pages of your site.
  • Do use alt when writing img tags.  Some users may turn auto-images off so they can surf through pages for textual content only.  They still need to know what's there (which is true for Lynx users too).  See Tip 2, left.
  • Do provide thumbnails of images so they can be enlarged with a mouse click.  See Tip 3, left.
  • Do use a restricted non-dithering palette.

The Bandwidth Conservation Society offers a number of other suggestions and comparisons for reducing file size.

Remember that users have widely varying equipment.  Your pages will look different on different platforms, meaning PCs, Macs, and Unix systems.  Monitor quality makes a big difference as does the size of the display.  The amount of RAM your users have will effect the performance of your pages.

On the server side, some servers are more efficient than others, are configured differently, etc.

And then in between your system and the server lies the Internet itself.  Some people have access through modems running at different speeds, some via fiber optic wire, others are connected through a LAN or Intranet, and so forth.

The point is that there are enormous variations, even beyond the differences between browsers and versions of browsers.  As a Web author, it's in your best interest to provide the most considerate, best planned pages possible within your resources.  You want your pages to come in quickly and behave predictably for a broad range of users under of host different conditions.

 


< Design Developments >

 

The Web is a constantly changing medium or media.  The below highlights a few of the most dynamic areas of Web development.

 

Interactivity: CGI, Java & Multimedia


Programmers are constantly working to push the envelope -- and to move the Web from a pull-based information delivery system to one that is push-based.

The plain-vanilla Web that "anyone" can design for is flat and text-based.  In the newspaper industry, this way of using the Web is called "shovelware," or simply taking what's already in print and shoveling it onto the Web.

Users obtain what they need by pulling from the server, surfing for information, and otherwise doing the work of retrieving the information they want.  This can be an inefficient use of users' time.

What is making the Web increasingly cool is that it can do so much more than print and yet still can be printed out.  The Web can be programmed to be "smarter," to find what we need for us through the use of customization and setting preferences.  This more responsive way of programming the Web is called push technology.

Web programmers are the Web designer's best friend and scariest adversary.  They're always coming up with something new that we have to learn.   Below are some programming tools and toys that make our work easier and better, more "professional":

CGI -- The Common Gateway Interface has been around since the early days of the Web and remains popular for small applications ("applets") such as page counters, forms, and drop-down menus.  There often are security problems with CGI and the programs are restricted to the server side.   This means that you as the Web author are dependent on whatever scripts are available to you on the server to which you have write permission.  See CNET on The ABCs of CGI.

Java
-- Java was developed at Sun Microsystems about two years ago and is the darling of Web programmers because of its flexibility and "easiness" to learn -- that is, if you know C++.  What's a bit nicer for Web authors is JavaScript, a lite form of Java that can be viewed in the source code of pages you admire and adapted for your needs.  Gamelan is the official source for Java and JavaScript applets.  See CNET for more on Web programming and scripting.  See also their sister Webcoder.com.

Note: If you're on the Microsoft side of the browser wars, you might be interested in ActiveX, a proprietary version of Java that combines some of the elements of Java with QuickTime and VRML elements.  As of this writing, ActiveX can only be seen on MSIE browsers, and even then only on Win 95 and NT systems.

Multimedia
-- The Web makes it easy to combine media, meaning more than one medium.  When you have text plus graphics, or text plus audio or visual clips, and there is interactivity, then multimedia can be said to be present.  Without interactivity or some control turned over to the user, multiple media is not much different from broadcasting.

As enormous a subject as Web programming is, multimedia is even larger.  For multimedia authoring on the Web, start by downloading Real Player and Shockwave.  From there, check out CNET and Yahoo and let your imagination run wild.

 

HTML Extensions: Stylesheets


Cascading style sheets for layering and positioning are the latest cutting edge for Web authors.  Style sheets can be set up with new HTML style tags and/or through JavaScript.

See the below for further information, but note that there is not yet a universal standard for style sheets that works for both Netscape and MSIE or is backwardly compatible with browsers released prior to 4.0:


W3's Style Sheet Proposal

Netscape's Introducing Dynamic HTML and cascading style sheets enhancements for Communicator

Internet Explorer's Cascading Style Sheets and enhancements for MSIE 4.0

CNET's Getting Started with Style Sheets -- see their Style-o-Mattic

David Siegel's column in Web Review

 

^

<body>
specs, backgrounds & dithering

Within the header information, you can set the "specs," or specifications, of your pages so that you control the background color or image and the text and hypertext colors.

The specs are controlled through the body tag:  <body bgcolor="white" text="black" link="blue" vlink="#333333" alink="red">.  These specs would give you the effect on this page, a white body background, black text (default), blue links (default), active links that turn red when clicked, and visited links that turn dark grey.*

Because you don't want to set up the specs so that the text disappears or the color combination is unattractive, you need to establish a pleasing and practical color scheme.  You can preview backgrounds and color schemes to see how things look before your pages are uploaded to the server.

When you're using ordinary colors like red, green, blue, and yellow (primary colors), you can write them out in English.  For more subtle effects, you may need to use hex values, which are expressed as six-character codes preceded by the number (#) sign.  No need to worry about what that means.  What matters is that you need help converting RGB (red-green-blue) to hex color.


There are a number of conversion tools you can use:

RGB Color Chart       


Colorama

Color Maker

Color Page Builder

Thalia's Guide

If you're really feeling adventurous, try the Color Blender for a cool rainbow effect on your page.


Netscape can only display 216 colors.  If you save your photos as JPEG, which means they contain 16 million colors, your browser will have to guess at a number of the colors.

This guessing is called dithering.   What dithering means is that sometimes the colors come out looking "funny" or muddy.  You know it when you see it.  Using color guides that create Web-safe, or non-dithering, hex colors will help prevent dithering.

But if you're tired of flat color and want a repeating background image, there are plenty of guides for that too.  Pattern Land and Texture Land allow you to download free background patterns, and  Yahoo provides an exhaustive list of sources for grainy textures, repeating images, and other background elements.


Note:   If you view the source, you won't see those specs because my HTML editor does things a bit differently.  You'll see this: <body bgcolor="#FFFFFF" vlink="#333333" alink="#FF0000"> .

The six characters with the # symbol in front of them are the hex value.   They tell the browser that background color=white, visited link=dark grey, and active link=red.   There is no reason to specify black (#000000) as the text color or blue (#0000FF) as the link color since they are the default.  And as far as I know, there is no English equivalent for #333333 for dark grey; the hex value must be used.

 

abc
headings, styles, fonts & faces

Typography, or type design, is improving online.  The below are a few ways you can manipulate type on the Web.

You can use heading tags, such as  <H1>Top Level Head</H1> (24 pt) and <H2>Second Level Head</H2> (18 pt).   Heading tags automatically create a paragraph break.

If you want to change the type size but don't want a break afterwards, the same same effect can be achieved by specifying the type size <font size=3>type</font> or by using pluses and minuses <font size=-1>type</font> within the font tag.


You can make type <b>bold</b>, <i>italics</i>, <u>underline</u>, and use <tt>teletype</tt> among other styles.

You can specify font faces, such as <font face=Helvetica,Arial>sans serif</font> and <font face=times>serif</font>.  Times Roman is the default font face.

You can adjust the font color within the font tag.  And when you create text as a graphic image in Photoshop, you'll want to anti-alias the type.

 

^

 

^

logo_b&w.gif (4870 bytes)
<img src> part I: formats, linking & alt

Online images generally come in two flavors: .jpg (or .jpeg, pronounced "jay-peg") and .gif (pronounced "giff" or sometimes "jiff").  JPEG is the preferred format for photographs and GIF is preferred for graphics such as clip art and illustrations.

While there is a lot to learn about image formats, the most important information is that JPEGs have 16 million colors and GIFs have 256 colors.  See Unplugged Software on the difference between GIF and JPEG.


The tips below on linking and the alt tag come from Rich Beckman:

Tip 1.  To make text links to images use:  <a href="graphic.gif"> hypertext</a> .

For relative links: Omit the host and protocol from the URL if the image is on the same server.  Omit the forward slash (/) if the image is in the document's directory.

Tip 2: Use the alt tag within the img src tag for a text-based indication of the image's title or content:  <img src="deb_graphic.gif" alt="Picture of Deb"> .

Tip 3: Use small, low resolution images as thumbnails for larger images (see example above): <a href="hi_res.jpg"><img src="thumbnail.gif"></A> .

 

logo_color.gif (2729 bytes)<img src> part II: pixels, align & borders

We measure the visual size of graphics -- not the file size -- in terms of pixels (literally picture elements).   When we edit images through the use of image manipulation tools such as Photoshop, we're adjusting the image's pixels.

More tips on working with images from Professor Beckman below:

Tip 4: You can align text to the top, bottom, and middle of images with slight variations in between:  <img src="graphic.gif" align="top"> .  In the example above, the alignment has been specified as bottom, which is the default.

Tip 5: You can specify center or right alignment within the img tag, or you can make it part of paragraph alignment (see below):  <img src="graphic.gif" align="right">. By default, images are left aligned.

Tip 6: To avoid text wrap around an image, use a line or paragraph break after the image, as was done in the example above: <img src="graphic.gif"><br> .

Tip 7: You can choose to have a border around an image, whether it's hyperlinked or not, and specify how thick it should be.  In the example above, the border has been specified as 1.  If you don't want a border, as below, set the border as 0: <img src="graphic.gif" border=0> .

Tip 8: You can specify the amount of white space around an image.  This is sometimes referred to as "float."  In the example below, the vspace (vertical space) and hspace (horizontal space) have been set at 5 pixels:  <img src="graphic.gif" vspace=5 hspace=5> .

Tip 9: You can specify the dimensions of the image so that the browser can load it a bit more quickly.  You can use this tag as well to change the size of the image, although the results generally show a loss of quality.  In the examples throughout, the logo has been specified as <img src="logo.gif" width="75" height="95">, which is its actual dimensions in pixels.

 

^

^

logo_trans.gif (2068 bytes)
<img src> part III: clip art, stock photos, illustrations & more on gifs and jpegs

Graphic art generally comes in three flavors:  clip art, stock photographs, and illustrations we make ourselves or someone makes for us.  The following are some sources to help you build your image library.

Remember, however, that while a picture tells a thousand words, it may well contain a thousand more bytes.  Keep your files as small as possible without making unnecessary visual sacrifices.

Clip art is graphic art and design that is no longer copyrighted or is free to use within the terms of an agreement or contract.  Carolina users probably will want to take advantage of the official UNC-CH Web Gifs (see policy).  You can also use the clickable image map.

General sources for free clip art include Clip Art Universe and Psyched Up Graphics.   Yahoo provides an exhaustive list of sources of clip art in all shapes, styles, and sizes, including animated gifs.

Stock photos are photographic images that generally can used within the terms of a carefully worded license agreement or contract.  Understandably, most photographers want to be paid for their work.  Index Stock provides a helpful page on the difference between clip and stock photos.

Spectrum and the Stock Solution are unusual in that they provide free photos online for limited distribution.  Yahoo provides a list of companies that supply royalty-free photos, but generally you have to order the CD-ROM.

You can make your own illustrations through Photoshop or a graphics or drawing program.  David Siegel provides links to a number of recommended graphic tools.  You'll want to save and export your images as .gif and .jpg.

Other media files: MediaBuilder, Eclectic Artistry, and Task Force are meta-sources for free bars, banners, bullets, borders, dividers, icons, 3D images, multimedia files, screen savers, and even poetry and fine art.


And here is Professor Beckman's last tip.  Whether you use someone else's art or create your own, you may want the background to recede, as above.

Tip 10: You can choose to make the background transparent on your GIF image (as above) so that it appears to float on the page without a boundary box.  Photoshop and other graphics software packages can make this a simple process.

You may also want to see Uplugged Software's tip on transparent backgrounds.  Be aware that only GIFs can have transparent backgrounds; JPEGs cannot.


GIFs and JPEGs can be sent as interlaced or progressive.  This means that the file will load consecutively in the browser rather than all at once.  We use this format as a courtesy for our users so that they have something to look at while the page loads.  It's a simple matter of choosing GIF 89 or progressive JPEG when saving the file.  See Professor Beckman's example.

Animated gifs are saved in the GIF 89 format.  See Dave for an interactive tutorial on making animations.

 


layout through formatting: paragraphs, blockquote & lists

Since the beginning of HTML, Web authors have had some control over vertical spacing, or leading, through paragraph breaks <p>, line breaks <br>, and the preformatted <pre> tag.  Using the latter enables the insertion of several lines of blank space, for example:
<pre>



</pre>
.

By default paragraphs are left aligned.<p>

<p align=right>They can be right aligned like this . . .</p>

<center>. . . or centered.</center>


Copy flush left against the edge of the screen is unattractive and often difficult to scan quickly.  Shorter line lengths and margins increase readability.

<blockquote> Through the blockquote tag, Web authors can create a space above and below and margins like this. </blockquote>


Lists can be used in lieu of paragraph indents.  Items in a list can be indented scientific-outline style through the definition list <DL> tag, ordered with numbers through the <OL> tag, and unordered and bulleted through the <UL> tag.  See CNET on creating lists.

 

^

^


layout through a grid: tables & frames

Finer control over page composition can be achieved with tables and frames.   You can set up a grid, so that you have columns and blocks of type like this, or a skinny left margin and larger body block as for a résumé, or many other effects.   Or perhaps you want your pages to unfold within one borderless frame.

Since tables and frames are complicated to explain and take some time to learn, try the tutorials below on your own.  Another approach is to use a HTML editor, such as Composer, that sets up tables and frames for you.
Netscape on:
tables and frames.
Dave on:
tables and frames.
Webmonkey on:
tables and frames.

Please keep in mind the following:

Tables and frames add more data.
  They slow the download time.  For example, the length and complexity of this page makes it a bit slow to load, even though the graphics are small.  The reason is that this file's formatting instructions and amount of text bring it to just over 60kb -- it's big, particularly when pages ideally are 10kb and under.  (But I want it to be an all-in-one page that can be printed out as well used online.  I'm conscious of my decision making.)

Tables and frames are controversial.  Some people hold that you shouldn't use these tools because they confuse the user and can't be viewed on all browsers.  There is less resistance to tables these days, but frames still have many detractors -- largely because they can be executed so poorly.  Before you set up a page in frames, know that some users may be turned off by that type of format.

On the right, links are provided on stylesheets, the next generation of tools for controlling page composition.


About this grid . . .

Where did the inspiration for this grid come from?  Some art historians credit modern artist and Bauhaus influence Piet Mondrian with creating the contemporary layout grid.

Mondrian's compositions translate well on the Web.  Read a Boogie-Woogie version of his biography and visit the Mondrimat to create your own hyperart.  You can even Mondrianize your home page by typing in its URL on The Mondrian Generator, pressing the button, and saving the source code.

 

<blink>
style concerns

When discussing tables and frames above, I touched on some qualms certain users may have about tables and frames.  File download time is another overall concern.  No one likes broken HTML tags that cause unpredictable effects.

While it may seem that anything goes online, in fact there is design Netiquette, meaning rules and normative practices that Web authors are expected to know and understand, if not always follow.  For example, the blink tag above is the most detested of all HTML tags.  You're supposed to know that it's uncool to blink


The style guides below provide tips, tricks, and other good Web design advice.  See also what Tony Sanders says about HTML   validation and checkers.

Composing Good HTML

Yale C/AIM Web Style Guide

David Siegel's Creating Killer Websites: see his Design Tips and Tools

Unplugged Software's Great Website Design Tips

CNET's Elements of Web Design

Jakob Nielsen's Evolution of the Home Page Design, based on user interface design principles followed at Sun Microsystems

HyperNews forum on Web Mastery

^

^

©
copyright concerns

Last but hardly least: copyright.  Simply stated, everything on the Web is or once was protected by copyright, whether the © copyright symbol is used or not.  As a user, you can look at and quote from a work, but you cannot take what does not belong to you unless you've been given permission.

Copyright protected content belongs to the person who or organization that provides it, which may mean that:
  • he or she or the organization created the content.
  • he or she or the organization owns the content through purchase (e.g., licensing) or agreement (e.g., "work for hire").
  • the content otherwise is his or hers or the organization's intellectual property.

You may not take content online without permission, whether the technology makes this easy or not.  Request permission to use someone's or an organization's content, and get the permission in writing.


Clip art is a notable exception in that generally the content is in the public domain or the rights to the copyright have been given away.  Read the disclaimers and terms of use before taking any content online and using it on your pages.

While your work is automatically copyrighted (yes, even your HTML code), it is a small matter to include the © copyright symbol on your pages.  You may register your work with the U.S. Copyright Office at the Library of Congress for a small fee ($20 at this time).  Registration and using the © symbol provide greater protection against infringement and stronger recourse should you require legal counsel.

The Copyright Office provides Copyright Basics and a list of Copyright Internet Resources.  A popular online guide is the Copyright WebsiteCopyright Issues on the Internet is an overview partially prepared for JOMC 50 students.


UNC-CH provides the following guidelines:

Policies: Copyright

Policies: Photographs and Audio and Video Clips

Policies: Rights and Responsibilities

Personal Use Policy

Guidelines for Personal Web Pages

Disclaimer


A final word of advice:  You may read through these policies and regulations and become confused or have lingering questions about how copyright law applies online and your rights and responsibilities as a user and Web author.  You're not alone.  Intellectual property is a hotly debated and evolving area of the law.

Furthermore because of the "fair use" provision, the rules are somewhat different for educational use, as differentiated from commercial use.  As a student, your wisest course is to familiarize yourself with and follow UNC's official policies.   Leave the legal frontier to someone else.

 

JOMC 50: Electronic Information Sources

Revised: 03/01/98

Wendy Robinson