Recently I have received many
questions on how to create web pages or how to get started.
This tutorial is intended for
photographers without any prior knowledge of HTML (Hyper Text Markup
Language) or web page development
and looking into learning how to create their own web pages to
display their "work of arts".
I will not be rewriting what has
already been written hundreds of times and what is already available
in the internet in greater detail. Again, this is only to get
you started and I will lead you to resources that will take you further
into more intermediate and advance HTML techniques. Good
STEP 1: Basics - Understanding the Web
First let's understand what
happens when you start typing "http://..."
Have you ever
wondered where these web pages come from? What exactly takes
place when you type in the URL (Uniform Resource Locator) or address
of a site into your browser? There is an exchange of data
communication, transparent to the user, that takes place.
Here is a basic illustration...
How the Internet works...
You start off by typing in an
address in the URL (address) field of your browser.
When you hit the ENTER key the
"request" is then sent to the web server. The address you've
just typed is translated or resolved to an IP address of the
location of the web server.
The web server then responds back
and sends you the page you've just requested for. When
you click on a link, for example "Gallery" in the initial page, the
same process takes place all over again.
That is a very basic description
of what takes place. Of course there are more technical and
complex processes that happens in both hardware and software such as
CRC (Cyclic Redundancy Check); various web applications such as IIS
(Internet Information Services - for Windows) or Apache (Unix /
Windows ....ooooh...I could hear the techies now); various
protocols; different types of firewalls and/or security; numerous
routers to get through; various types of connections, etc. The
list goes on and on. They are separate topics on their own.
For this tutorial we don't need
to know the in-depth processes that goes on but at least have a
general understanding that a lot happens when you surf on the
web. Knowing the "behind the scenes" processes will assist you in
designing a web site that is user friendly,
specifically targeted for an intended audience and enhance the
overall performance of your web site. I will get
into the details throughout the tutorial.
Basic outline of a web page.
Let's start off with the basic
structure of a web page.
<TITLE> My Page </TITLE>
My first web page
a sample page of the code above.
Simple isn't it? Copy the
above code into a text editor, like notepad in Windows, and save as
"index.html". Open the index.html file with your browser and
you'll see you've just created your very first page! Congratulation!
Now let's break it down and
understand what is going on with each section of the code.
Notice that every TAG are paired.
The accompanying tag has a "forward slash" to indicate the end of the
Any content that are encapsulated
between the TAGS are affected by the function of the TAG.
A better example of this
means BOLD. Any text that is in between this TAG will be
Other simple tags...
Not all tags need a pair.
- Horizontal Reference
- Break or new line. To explicitly start a new line.
By this point you probably have
an idea whether or not this is for you. What I've shown you is
just a general intro to HTML. I encourage you to go on further
with learning HTML. At least learn a few more codes.
You'll find it very enjoyable and somewhat interesting. You
never know where it may lead you to.
I highly recommend
HTMLGOODIES by Joe Burns Ph.D
Start off with the PRIMERS. This was actually used by college
students to learn from. So, why were we paying the professors
for? So here you have it... free education.
TAGs you should learn (including
the ones previously mentioned):
<TABLE>, <TD>, <TR>
<A>, <A HREF>
Each tag also includes special
you can specify its BORDER size.
This means the border is
not visible. Good for laying out or separating page content.
(Table data), you can specify it's COLSPAN (Column span) and ROWSPAN
Table below is a simple 3 x 3 table.
<table border="1" width="300"
(The width and height is
specified in pixels. The dimensions could also be specified in
percentage format; i.e. "60%")
This first set of
is the first row. The next three
are the three columns.
the code " "
This is the second row
This is the third row
Now let's add the attributes...
<TD COLSPAN="2" ROWSPAN="2">
Here's the code.
<td colspan="2" rowspan="2"> </td>
Notice Row 1 and Row 2 only
requires one extra
is because Row 1 already specified to take up 2 columns to the
right and 2 rows below. Row 3 remained the same.
You do not need to learn all the
codes. The reason I suggest you learn the layout and some
codes is so that when you use a web page editor you can go into
"code" view and actually add or remove code if the page is not
behaving the way you want it to. Some editors might add code
that is not necessary.
With a web page editor and having
knowledge of HTML coding, when you
want to insert a table, a link, or an image, you'll actually
understand what is going on and how to look for these codes if you
need to fine tune them. These days it is faster and economical
to create web pages with web page editors.
If you're too anxious to really
get going and not really interested in all this coding stuff then
proceed with web page editors section.