Exploring the Internet November 4, 2003
Font Faces Fonts displayed by the browser are installed in the browser. Common text fonts Serif, like Times New Roman Sans-serif, like Verdana Obscure fonts that may be available in your environment, but not in all users’ browsers, should be used with care.
Font Selection <font face=“verdana,arial”>xyz</font> Will use the first font in the list that is available in the user’s browser. If no fonts in the list are available, will use user’s default font, usually Times New Roman.
Color Text color can be set with the font tag: <font color=“red”>Red Text</font> Page background color can be set with the body tag: <body bgcolor="yellow“> Tags can also set the colors used for visited and unvisited links. Sometimes you will see color set as a hexadecimal value. This is mostly for old browsers.
Images on the Web .gif .jpeg (.png – W3C endorsed, but… ) Most efficient format Good for graphics, logos .jpeg More detail, larger files, less efficient Photograph level of detail (.png – W3C endorsed, but… ) Portable Network Graphics Has not exactly taken the WWW by storm.
Placing Images on a Page <img src="scope1.gif" width="60" height="46“ alt="telescope"> src is file name width & height control displayed size The actual image may be smaller or larger It’s most efficient to match actual to displayed size – conserves bandwidth alt – text that describes the image.
Working with Images Images are in separate files from your HTML files. You need to separately copy your image files to the server. Your images can be in the same directory as your HTML files. This means a simple file reference will work: x.gif, with no directory name.
Images as Links <a href=“index.html”><img src="scope1.gif" width="60" height="46"></a> Click on the scope1.gif image, transfer to page index.html
Acquiring Images Right-click, select “Save As”. Window wants to save it in your “My Pictures” directory. Save it in “My Documents” instead! The pages you do for this class will be simpler with images and html in the same directory.
Copyright Copyright may not indicate the source is authoritative. Copyright does indicate that the work is original and cannot be used without the permission of the owner. Really cool pictures on the web are usually copyrighted.
Images in Composer Save your page before you add an image to it. Click “Choose File”, then select the file that contains your image. In the “Image Location” box, you should see just the name of the file; no directory. The “URL is relative to page location” box should be checked.
Images, Images, Images! I want to use lots of images on my page! Your page will be beautiful, but… Large images can take a long time to download, especially on a dialup connection. All files that compose your page, html, images, sound files, must be downloaded to the client/browser to be viewed.
Backgrounds To use an image to set the background of a page: <body background=“bg.gif”> The image is “tiled” to fill your page. Usually done with a small .gif file. Can be an efficient way to create a graphic effect.
Backgrounds in Composer Click the Format Menu Page Colors and Background… Allows you to select an image file for your background. Watch the “URL is relative to page location box”. Should be clicked, as for images.
Image Maps Create multiple hyperlinks in a single image. Mapedit program is used to create “hotspots” in an image. Create a page that includes an image, then edit it with Mapedit. Mapedit license is $10.
Site Development Issues How fast do your pages load? How well does your site serve your audience? Are your readers handicapped? Browser differences
Where are your readers? Fast or slow Internet connection? Business users tend to have high-speed access Home users may be on a dial-up modem line [in 2002, 75% of home users used a modem] Pictures and graphics look great, but can make your page load slowly. Captive audience? For example, sites used internally by an organization.
Browser Differences Internet Explorer vs. Netscape Uncommon browsers, like Opera Different versions of IE and Netscape Different user screen sizes, perhaps including handheld devices.
What is your purpose? Your page may be: A source of information Entertainment A work of art More likely a combination. The site for this class is primarily a source of information. No one has yet complained that they couldn’t find what they needed.
Handicap Access? Blind users can’t see your graphics. Use alt in the img tag to provide replacement text. <img src=“boo.gif” alt=“ghost picture”> Deaf people, or people with speakers turned off won’t hear your sound effects and background music. People over 40 hate reading small print!
Section 508 Requirements Federal agencies' electronic and information technology must be accessible to people with disabilities The standard includes: alt text for images Alternatives to multi-media, like flash Color not required; site looks OK in B&W Row and column headers for data tables
Does Design Matter? Consumer Web Watch Web Site Credibility Study Results, General Public: Design Look — 46.1% Overall Information Design/Structure — 28.5% Overall Information Focus — 25.1% Overall Company Motive — 15.5% Overall Information Usefulness — 14.8% Overall Information Accuracy — 14.3% Overall
Design, continued Good design can influence people to believe that your site is more credible. Most people do not do a great job of assessing web site credibility. Should consumers be educated to evaluate sites better, or should sites be evaluated for them?
Lab 8 Overview Images and links. Add a page to your site containing images and links. Add a background to a page. I will put a post-mortem on the course web site, and email grades before you do Lab 9.