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.
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.
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.
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!
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.
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).
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:
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.