In the past I would often find myself on
a project trying to remember how I had done something
before. The motivation here is to provide a 'to the point'
document of useful tips and code snippets. As it is a useful
collection of tips and code for me, I hope it will be to
you.
A work in progress
This 'book' is a work in progress; new
items will be added as time permits and as new ideas come
about. My focus for now will be on what are the 'client
side' technologies; those technologies that work directly in
the browser rather than on the server.
They include HTML, CSS (Cascading
Style Sheets) and JavaScript. Later I will delve into other
technologies that are web related, technologies like FLASH,
PHP, JSP, ASP come to mind.
The
content
Most of the code is my own, although
that is not saying much since much of it is pretty simple to
begin with. There are some widgets that I have borrowed from
others (like some complex JavaScript code) and the authors
name will be credited properly.
As I mentioned before, this is a work
in progress. You can expect this 'book' to grow in time.
Yet, I am not interested in putting together a bloated
document that is full of filler. I want to create something
that is functional for the reader, something that they can
use to quickly find that useful snippet of code that does
what they need.
The idea I have is that my years of
being a web designer and programmer will allow me to be
selective when sampling from the sea of information
available on the subject!
How to use the book
For those of you that may find some of
the contents confusing, I would suggest that you simply
begin by playing around with the code and see how it
looks/works in your web browser.
The easiest way to do this is to
create a practice HTML page where you can cut and paste the
code and then make small changes to it to see how it affects
things. Breaking the code snippets and then seeing how you
broke it will go along way to teaching you what is
happening.
To create the
practice HTML page do the following
1. Go to your desktop and create a
simple text document. On Windows all you need to do is
right-click and select: New -> text Document
That will create a simple blank text
document on your desktop. Name the file: practiceHTML.htm.
Windows will show you a warning asking
you if you want to change the file extension, just say yes.
Now right click on the file and select: 'open with' and
select notepad.
Once inside notepad, paste in the
template code found in the box below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Practice HTML Page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
</body>
</html>
This code forms the basic structure
for all HTML pages. You can now cut and paste* the code
samples in between these tags:
<body> <!--Insert code here! -->
</body>
One last note: in between the <body>
</body> you find what is called a comment. Comments are a
way to place notes that cannot be seen in the browser .
Anything in between the following characters becomes an HTML
comment:
<!-- and -->
Anything inside comments will be
invisible in the browser. So in the above example the word
'and' would be invisible in the browser - comments are a
good way to leave messages about what your are doing in the
page.
It can come in handy later on when
someone else is working on the page or even when you are,
because you may forget why you did things a certain way.
1. A simple way
to cut/paste text in Windows is to press and hold the Ctrl
key and 'c' for copy and 'v' for paste.
