Grisoft AVG Antivirus Program – LavaSoft Ad-Aware Adware & Spyware Removal (Fred Langa likes it, sort of) – ZoneAlarm Firewall – Never, never go online without a firewall!! WinSCP – Safe copying of files between a local and a remote computer. These programs are free.
Sunbelt Software CounterSpy – Adware & Spyware Removal, $20/year – PC World's Best Buy (April 2005)
PC Magazine's Utilities – EndItAll 2 and Startup Cop Pro cost money, but hundreds of others are free. EndItAll 2 lists all the programs running on your system and lets you decide which ones to close down. Startup Cop Pro controls the programs that launch with Windows
Adobe Photoshop Elements has a function (File > Automate > Web Photo Gallelry) that automates the task of creating Web-ready images and HTML code (including a thumbnail page) so you can show your pictures in your own online photo gallery.
ThumbsPlus 7 from Cerious Software has many features, including powerful batch-processing capabilities that Photoshop Elements lacks. Here's a review of Version 6.
XnView is free software to view and convert graphic files. It supports more than 400 graphics formats! Thanks, Eric!
Invasion of the Computer Snatchers --Hackers are hijacking thousands of PCs to spy on users, shake down online businesses, steal identities and send millions of pieces of spam. If you think your computer is safe, think again.
Botnets: A Global Pandemic -- The number of Web sites using browser vulnerabilities to attempt keylogger installs is exploding. David Dagon, a Ph.D. student at Georgia Tech, and others, tracked a botnet of more than 350,000 compromised PCs scattered throughout dozens of countries on five continents.
Five steps you can take to Protect Your Computer from being hijacked by hackers. The fifth step is consider surfing the Net with a browser that is not so cozy with the underlying operating system, such as Firefox or Opera.
Botnets are networks of compromised computers controlled by a person known as a bot herder. Some bot herders are now creating bogus online storefronts on legitimate shopping and auction sites.
Frighteningly sophisticated Trojan crimeware targets financial institution customers by serving up fake banking sites to steal passwords and accounts.
Here's an overview of this course. And here's a printer-friendly version of this page. The best way to start is by writing HTML code by hand, using an HTML-friendly text editor such as NoteTab. Then much, much later, you might try some of the free What-You-See-Is-What-You-Get (WYSIWYG) HTML editors. I did that. But after using those for quite a while, I went back to coding by hand using NoteTab, and that's what I've used ever since. You have total control of what you're doing, and you have some nice conveniences added.
I recommend that students download, install, and use Notetab, and either Firefox or Opera, on their home computers (links 19 and 20 above), and use them. And I recommend Elizabeth Castro's book (link 16), because it povides specific examples for everything you need to know. Do my homework assignments, study the examples in her book, and e-mail me about any problems you encounter. Remember, you registered for this course because you wanted to learn Web Site Development. Make the effort and you'll succeed.
Barebones HTML
Launch NoteTab. Copy-and-paste the following HTML code into NoteTab (here's how) and save it as barebones.html. Then with your file manager (e.g., PowerDesk or Windows Explorer), double-click it to display it in your Web browser. Compare the Web browser display with the HTML code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"></style> </head> <body> <h1>Title</h1> <h3>Heading</h3> <p>Stuff</p> <p>Stuff</p> <h3>Another Heading</h3> <p>More stuff</p> <p>More stuff</p> <hr> </body> </html>
With the NoteTab text editor, change the titles, headings, and stuff, and save the file again. Then in your Web browser, hit F5 (Reload) to see the result. Congratulations! You've just created Your First Web Page! Now let's get down to business.
Your Assignment
Your assignment – should you choose to accept it – is to create a Web page, Photo Gallery, containing two Migratory Birds photos and two Great Cats photos, with accompanying text (use the information on my zoo.txt page).
From NoteTab's View menu, select Options, and click the Files tab. Check the Make Backups box, and set Save Directory to the one you'll keep your files in (click the ... box on the right). Do the same for Open Directory. Click the New Document icon (it looks like a white sheet of paper) in the toolbar (top left). Copy-and-paste the barebones.html code into it, as you had done earlier in Notepad. Save it as zoo.html.
Display my zoo.txt page in your Web browser, then hit Ctrl-A (that's the Select All keyboard shortcut), then hit Ctrl-C to copy the entire page into the Windows Clipboard. In NoteTab, put the mouse cursor at the bottom of your zoo.html page, click the mouse to set the focus there, and press Ctrl-V to paste the zoo.txt text there. Now let's get started.
Change the Headings
In NoteTab, change Heading to Migratory Birds and change Another Heading to Great Cats.
Change the title to Photo Gallery (two places). Hit Ctrl-S to save the page. Hit F8 to display the saved page in your Web browser. It should look like this. Does it? If not, can you find what part of the HTML code needs work? (In the browser's View menu, select Source).
If it looks good, set the focus back to the NoteTab page (zoo.html) by clicking the mouse on it, or use the keyboard shortcut Alt-Tab, which accomplishes the same thing.
In NoteTab, notice that in the text you pasted in at the bottom, you have four items: Indigo Bunting, Rufous Hummingbird, Lion, and Sumatran Tiger. The second line of each item is the URL (Web address) of a photograph, beginning with http:// and ending with .jpg. Put the cursor just to the left of the beginning of the URL for the Indigo Bunting photo, and click the mouse. Now hit Shift-End to highlight (select) the entire line of text, i.e., the URL, ending with .jpg. You could also do this by dragging the mouse. Make sure you haven't missed any characters at either end. Now press Ctrl-X. The entire URL disappears (into the Windows Clipboard). Ctrl-X is the keyboard shortcut for Cut. Select the text Indigo Bunting by dragging your mouse over it.
Use NoteTab to Create HTML Code
Now here's the magic part. Notice that there are buttons at the bottom of the NoteTab window. Click the one marked HTML. A menu appears on the left, and there's a vertical slider. Put the cursor near the bottom of the light gray slider area and click a couple of times, until you see the heading (in red) Image Elements. Below that is Image (in black). Double-click it. The Image dialog box opens, and the first field, Image file name, is highlighted. Hit Ctrl-V to paste the URL (from the Clipboard) into that field, overwriting the default value.
Set the border to 1. Open the Align dialog box by clicking the button at the right, and select left. Click OK. Move the right angle bracket to the right of width="400" height="277" (those are the photo's dimensions in pixels). Now your HTML code for that section should look like this.
If it is, select (highlight) that entire block of text and hit Ctrl-X to cut it from that part of the page. Then go up to the first <p>Stuff</p> line and select (highlight) that entire line including the paragraph tags. Press Ctrl-V to replace that line with the code you've just cut from the bottom part of the page. Save it. It looks like this. Now you're on a roll!
Use the same method for the hummingbird, but when you open the Align dialog box, select right.
When you're finished, your zoo.html page should show it like this. If it isn't, compare your HTML code with my code. When you're looking at my page in your Web browser, click the right cursor key to open a context menu, and click Source to see my code.
If you go back into NoteTab and change something on your page, save it and hit F8 to display the revised page in your Web browser.
This process seems tedious and complicated until you've done it a few times, but you'll catch on. My description of how to do it is lengthy because there is a wide variety of skill level among the students and I don't want to leave anyone behind. It's a bit like explaining over the telephone how to tie a shoelace to someone who has never done it before.
If you “break” your HTML code, find your mistake and fix it. If you can't fix it, you'll need to go back to an earlier version that did work (just before you messed it up). You didn't overwrite your only working copy, did you? That shouldn't happen because you've set NoteTab to automatically save old files as backups, instead of overwriting them.
Test Your Web Page
It's a good idea, every now and then, to see how your Web page looks in other Web browsers. Internet Explorer, certainly. But also Firefox, Opera, and if possible, others. Before installing any software, create a system restore point (XP) so you can easily undo the installation if you need to.
A short while ago I unknowingly had a bunch of invalid code in the those lists above, but Opera (my default Web browser) knew what I meant to say, and displayed it perfectly. I didn't realize it was messed up until I displayed it in Internet Explorer. It looked pretty bad. So I examined the HTML code until I found what I had done wrong, and I fixed it. In other cases Internet Explorer will overlook defective coding and it will look terrible in the other browsers. You won't know whether your HTML code is good until you've seen your pages in several Web browsers.
But code that looks good is not necessarily valid. For example, maybe the <body> tag has mysteriously disappeared, or you forgot it or misspelled it. The code is defective, but both Internet Explorer and Opera are smart enough to overlook this and display the page correctly. I know because that's happened to me. But other browsers might choke on a mistake like that. If you check your code with the W3C Validation Services you'll know whether it's valid.
It's smart to see how your pages look in several Web browsers and also check them using the W3C Validation Services.
Photo Gallery – It's Ugly, Isn't It?
The page we've developed has the content we want it to have, but it won't win any prizes. So I'll take you one step further, using pixel shims and a Cascading Style Sheet.
What's wrong with what we've got? Plenty, actually! First of all, in some browsers the default type font is a serif font – our upper-case Ms and Ts will be displayed with feet (serifs). It's generally agreed that a serif font looks fine on the printed page, but a sans-serif (without serifs) font looks better on a computer monitor. And all the text is in black! Wouldn't it be nice to have some color? Speaking of color, that glaring white background gets old really fast! Also, notice how the text is jammed right up against the photos? That's poor. We'll fix that with pixel shims. We'll take care of the rest with a Cascading Style Sheet.
Pixel Shims
A pixel shim is a spacer. You can create a one-pixel image (either colored or transparent), and use it repeatedly in your Web page – each time you scale it up to make whatever size pixel shim you need. You can use your favorite photo-editing software to make your own, or you can download mine. I made a soft-yellow, one-pixel shim with Adobe PhotoShop Elements. I'll show you how and where I've used pixel shims, then later I'll set our Photo Gallery's background color to the same soft yellow color, making the shims invisible.
I've temporarily given our page a blueish background color to show you where I've used pixel shims to separate the text from the photos. Notice that the text is no longer jammed against the photos, as it was before. Because of the contrasting background color, you can clearly see the yellow shims. Here's my finished page, zoo.html. I added Great Apes & Primates below the Great Cats to show how text wraps around the photos.
Photos & File Sizes
While we're on the subject of photographs, let's talk about the file size. It's something you should think about when you put photos on your Web site – and when you send photos by e-mail.
Recently I visited a Web page that contained only four tiny images and about 650 words. Fine and dandy. But I noticed that the page took forever to finish downloading.
When I see unexpected activity between my computer and the Internet, I like to know what's causing it. It's possible that something malicious is happening, and that's not a good thing.
It took me about four seconds to find the cause. I right-clicked on a tiny photo to pop open a menu, and I chose Image Properties (just Properties in some browsers).
Good Golly!!!! That tiny picture, just 180 pixels tall, is coming down through my poor little dial-up line nearly 1,300 pixels tall and the file size is a humongous 230,000 bytes. Holy Cow! Except for that, the Web page is only 6,300 bytes. My, oh my, oh my!
Folks, whether you're putting photos on your Web page or sending them to your friends by e-mail, there are some things you need to pay attention to.
Let's say you have a camera that makes pictures that are 2,560 pixels wide and 1,920 pixels high (five megapixels), and each picture occupies 2.5 megabytes of space on your memory card. Say you've just taken some great pictures, and you want to share them. You pick the twelve best, pop them into an e-mail, and send them to some relatives and friends.
Here's what happens next, and it's not pretty. Some of your recipients have dial-up connections. You've sent each of those poor souls a 30-megabyte file that will tie up his or her computer and telephone line for two hours! That actually happens. Let me tell you – it's really annoying. And there's more trouble ahead.
At 2,560 pixels wide by 1,920 pixels high, your 5-megapixel images are way too wide and too tall for the recipients' computers to display at one time. At most, their displays can handle an image 1,024 pixels by 768 pixels. Which, by the way, corresponds to 0.8 megapixels. So when your recipients click to see the attachments (photos are sent as attachments to an e-mail) they will see one pair of knees or one face at a time, and they'll have to use the horizontal and vertical scroll bars, looking at various 1,024-by-768-pixel pieces of your image, to figure out what this is supposed to be a picture of. If you post those pictures to your Web site instead of sending them by e-mail, the same thing can happen. Sorry to break the news, folks, but this is uncool.
Many of your friends won't realize they should click on the attachments to see the pictures. Their e-mail software probably displays reduced-size versions of the photos directly, and that's what they'll look at. But those images, for some reason, often have their colors horribly distorted and splotchy. Your friends will wonder why you'd ever want to show anyone such awful-looking pictures!
Try this. E-mail yourself some of your own photos, and see how they look on your computer after they've gone through the e-mail process. Maybe you do that routinely. You should. Always send yourself a Cc: of your outgoing e-mails so you can detect any problems in what you've sent.
So remember, if you take a bunch of photos right out of your digital camera and pop 'em into an e-mail to your friends, your friends may have to use scroll bars to see what you sent them, or look at pictures with really splotchy colors.
If you post images with huge file sizes on your Web site, there might not be problems with splotchy colors and scroll bars, but your Web page can still require a mind-numbing amount of time to download. Most folks won't tolerate that. They'll bail out and go on to other things.
Avoid this whole mess by dropping your pictures into your favorite photo editor (mine is Adobe Photoshop Elements) and doing two things:
First, change the image size to just a few hundred pixels in each dimension, but certainly no bigger than 1,024 wide by 768 high – which will fit on the highest-resolution computer monitor in common use (it's called an XGA display).
Second, use Photoshop Elements' Save For Web function (or its equivalent in any other photo editor) to compress your huge picture files to .jpg images of 40,000 bytes or less. Now each picture takes no more than 10 seconds to download on a dialup line, instead of 10 minutes. When you want to display a photo on a computer display, there is almost never a reason to have a file size greater than about 40,000 bytes. That's true whether you're sending it by e-mail or posting it on your Web site.
Photoshop Elements lets you see the uncompressed and compressed versions of a picture side-by-side, magnified if you wish. As you adjust the slider for various degrees of compression, Photoshop Elements will track the slider, instantaneously showing what the image will look like, and what the file size will be, for any setting of the slider. Adjust the amount of compression to get the file size below 40,000 bytes, and look to see whether the image will still have adequate sharpness and quality at that setting. When you're satisfied, click OK.
Save the compressed picture file with a different filename (or in a different directory), so as not to overwrite the original. That's all it takes. Photoshop Elements has a batch-processing function that can perform these tasks on a whole directory full of your pictures. Or it can take a directory full of huge picture files and create a whole photo gallery, with clickable thumbnails and all, ready to be uploaded to your Web site. A couple of clicks and you're done. Now on to other things.
Cascading Style Sheets
Here's mine. Try it. Put it just before your closing head tag.
Assignment
Our assignment for October 14, 2005 is here. Copy-and-paste it into NoteTab and save it as zoo2.txt
Win My Gold Star Award!
If you've created your own Web page and put it online, we'd all like to see it. When you have most of the kinks worked out, pass the URL to me and I'll post it here so we can all admire your handiwork!
Assignment: Radio Buttons, Checkboxes and Menus
Our next assignment involves Forms (Elizabeth Castro, Chapter 16). You can access her Forms example here. Do a View > Source to examine her HTML code. To access all her Chapter 16 examples, go to http://www.cookwood.com/html5ed/examples/ then click 16 in the navigation bar on the left. You can see the examples in any chapter by clicking the chapter number in the navigation bar.
Let's pretend you sell art on the Web. Create a Web page that
asks “What kind of art are you most interested in today?”. Provide these choices using Radio Buttons (Castro, page 274):
Oil on canvas
Wash
Charcoal
Pastels
Watercolor
Pen and ink
Acrylic
Pencil sketches
Chromolithographs
Vases
Tapestries
Etchings
Sculptures
Washi Paper
asks “Art of which centuries appeals to you?”. Provide these choices using Checkboxes (Castro, page 275):
16th
17th
18th
19th
20th
21st
Hey, we're pretending, remember? If Art is not your bag, pretend you're running an automobile dealership, or a carryout restaurant, or a sporting goods store, or a flower shop, or whatever you want, and design your own forms. If you don't have Elizabeth Castro's book, there are plenty of other books that cover HTML Forms, as do most of the online tutorials listed at the top of my page.
For extra credit make a Menu (Castro, pp. 276-277) that gives the same choices as the Radio Buttons do.
Assignment: Make Your Own Buttons
Our next assignment is to make some buttons to use on your Web page. Pretend you've made Web page for the AAUW, and make a button that says Join AAUW!. The user can click the button, which serves as a link to an application form. The button can be as big or as small or as fancy or as plain as you want. If you have use for a different button, do that instead. For this project, use your favorite image editor, such as Microsoft Paint or Adobe Photoshop Elements. Have fun!
Also, explore the use of the handy new <button> tag (the first item in my Other Resources list.
If Art is not your bag, pretend you're running an automobile dealership, or a carryout restaurant, or a sporting goods store, or a flower shop, or whatever you want, and design your own forms. If you don't have Elizabeth Castro's book, there are plenty of other books that cover HTML Forms, as do most of the online tutorials listed at the top of my page.
make a Menu (Castro, pp. 276-277) that gives the same choices as the Radio Buttons do.