Prologue

When I set out to write this tutorial, I set out to write the tutorial I wish I had when I was learning. There's a lot of stuff I had to puzzle out on my own or learn from various online resources, stuff that made sense only after I'd learned it. This is why I go so slow in this book: I want to give you a good idea of what you're doing.

Content

This is not a book on webdesign. I've never been much good at it, myself, so I'm not exactly one to talk on the subject. While I will mention webdesign here and there, for the most part, you're on your own with that. Instead, this is a book on webpage coding—the actual nuts and bolts of making your design into an actual webpage—that is, actually coding HTML (which basically structures your webpage), CSS (which controls its appearance), and JavaScript (which lets you interact with the page) to make a working webpage.

When it comes to HTML, I talk mostly about HTML 4.01 Strict, and all my examples are written in the same. I don't mention XHTML 1.0 as much, since it basically has the same vocabulary. I will, however, explain where HTML and XHTML differ. I explain a bit about HTML5 in HTML5 and XML, but other than that, I hardly mention it at all.

I will admit, also, that you'll see a lot of my own coding habits here. I'll point them out when I get to them.

Likely-To-Be-Asked Questions

Why HTML 4.01 instead of HTML5?
The reason I don't mention HTML5 is simple: it's not a settled standard yet, and anything I write could be obsoleted in the next month. The developers of HTML 5 are still arguing over pizza toppings (and some guy in the back keeps suggesting take-out Chinese instead); in other words HTML5 is still a work in progress and not expected to be a full recommendation for a few years—it's estimated around 2022. I'm not kidding. HTML 4.01 and XHTML 1.0 and 1.1 are recommendations now; they're stable and won't change on you in the future; unlike HTML5.
Will learning HTML 4.01 hamper learning HTML5?
Gracious, no. You could study HTML 2.0 and it wouldn't hamper your learning. HTML5 lets you do more, but the basics are the same.
How can I hide my code, keep my content from being stolen, etc.?
There's not a lot you can do. Obfuscating your code doesn't work because you run the risk of a browser not reading your webpage at all and many people get around obfuscation in a matter of minutes anyway. Disabling right clicks (which some people try) is easily defeated by simply switching off JavaScript—which a lot of people do for security reasons.
Can a mistake wreck my computer?

With HTML and CSS, the answer is no. I really cannot imagine a scenario where a mistake with either of those would damage your computer—unless, of course, you tried to create a webpage or style sheet bigger than your computer could handle, but creating such an inordinately gigantic text file would be quite the feat without some sort of program (or arguably even with a program), and your operating system is likely to warn you that it was running out of disk space before the file could be saved in the first place. Errors in your HTML and CSS giving you strange and/or undesirable results, yes. Errors in your HTML and CSS causing damage to your computer: um, no.

JavaScript can get you into trouble, but less than you might imagine. Malicious scripts are precisely that: malicious, meaning deliberately harmful. How to create scripts that damage other people's computers is something I won't teach. However, there are errors that can cause problems as well, but are unlikely to destroy your computer; the worst that can happen is your browser will shut down on its own or conversely you may have trouble shutting it down, but you can usually just restart it.

...was that a pop culture reference I saw?
Probably. I use them quite a bit in this book. :-) I did make sure that understanding the references was not required to to understand what I was talking about.

So You Want To Print These Pages

The bad news about printing out these webpages is that the default page breaks and image sizes often leave much to be desired. The good news is this tutorial was originally intended to be printed and to that end, I created some JavaScript-based tools that let me control image sizes, where pagebreaks occurred, and helped me save those changes to a text file.

When I decided to publish this book on CD, I decided that I would show off a bit, polish these tools up (boy, was that good practice in working around browser quirks!), and leave them on for your use.

Do be forewarned: To make sure your changes are what you want them to be, you'll have to use the Print Preview option of your browser a lot!

Page Breaks

Menu Access: P + click

Since page breaks can happen just about anywhere (in the middle of an image, just after a header, etc), you may wish to change them to something more suitable. To bring up the page break tool, click on any of the following while pressing the P key:

This will cause the tool to show up on the right side of the screen. The tool itself looks like this:

The buttons under Set Page Breaks are fairly straightforward: the first adds a page break before the element you clicked on, the second removes a page-break you have set. The rest of the menu I will explain soon.

Graphic Sizes

Menu Access: I + click

In this book, several images look fine onscreen, but stretch right off the end of the page. If you click on an image while pressing the I key, the image size tool shows up, which allows you to resize an image. The default setting is what it's set to on the screen. In the image below, the image the tool is referring to has been scaled down to only 55% of its size. You can see it in The HTML DOM.

The - button scales it down 1% (to a minimum of 1% the image's original size), the + button scales it up 1% (to a maximum of 999% of the original size), and the Restore button sets the image back to its screen settings (not necessarily its original size).

Saving Your Settings

Since refreshing the page will undo all your changes, I added something that lets you save the settings in a CSS file (it's basically a text file with a .css extension). At the bottom of the menus are buttons that say Show All Page Breaks/Image Sizes. Pressing this button brings up a textbox with some code in it, as shown below.

This is actual CSS coding, which I explain in length and detail in Part Two (CSS) of this book. This, you can simply copy into a text file (like one created with NotePad, if you happen to be using Windows). This text file must be saved with the extension .css to be of any use, though.

The way you use this file is simple: in both menus, you see the header Custom CSS File. You may enter the file name of the .css file you copied the code name into the text box in the menu. Click Apply Custom CSS File, and your file will be applied to the document (though you may need to use the print preview to see the changes).

Do note, however, one browser may read the path differently than another, and you have to take this into account. For example, if the file stylesheet.css was saved on the C-Drive, various popular browsers would find them thusly:

Internet Explorer
C:\stylesheet.css
Opera
file://localhost/C:/stylesheet.css
Firefox
Google Chrome
Safari for Windows
file:///C:/stylesheet.css

Entering in the path and file name of the file you saved the code in will apply that code to your page (so long as it's a .css file). I also have two buttons that say Use Author's Page Breaks/Print Image Sizes. Those apply the files I created, and they're both on the CD. The file for print image sizes is automatically applied to the webpages here, the file for page breaks is not. For the record, I created my files with the following page setup: 1-inch margins, a header, no footer, portrait orientation. Oh, and I was using FireFox, in case that makes a difference.

A few notes on these tools. If you've copied and pasted some code to this text file, you'll have to physically edit the file if you want to change it later on (again, you can edit it in any text editor). Sorry, but neither tool is able to read those files, and their contents don't show up when you click Show All Image Sizes/Page Breaks. Also, make sure that, before printing, the tools are closed (that's what the button with the × is for), otherwise the tools will show up on the page and possibly block content, as these tools are actually part of the webpage, not merely pop-up dialogue boxes.

Oh, and yes, you can have the code for both image sizes and page breaks in the same file, if you'd like.