Hypertext Markup Language is a simple coding language for formatting information
into webpages. It it THE language that a browser is expecting to encounter,
followed by but not dependent on other helper languages. It is generally
agreed that HTML should be learned first as the most fundamental tool in the developer's
kit.
HTML was created by Tim Berners-Lee in 1990 along with HTTP and the URL, firing
off the web revolution. Not bad, Tim. Vannevar Bush is credited with
first conceptualizing the idea of a machine which could make associative trails
between resources. That was 1945.
Now that we can appreciate the impact of these innovations, it's time to get down
to business and learn HTML.
What You See Is Not Necessarily What You Get
"But can't I just use a web building program like Macromedia Dreamweaver
or Microsoft Frontpage to make my website?"
Absolutely! These tools are among the most powerful time savers you'll use.
In fact, you will probably use these and other software programs to perform
the layouts for your site. But these programs do have their limitations,
and each provides an interface to edit the code directly, which you will need. Most
people's first foray into code looks like an episode of Fear Factor... that's
what it was like for me. And I figure one more book on web development couldn't
hurt in lowering the mental barrier to entry of this trade.
Web editors are often referred to as WYSIWYG editors - "What You See Is What
You Get". That is often very true and the programmers of these applications
deserve a major tip of the hat. But no web editor can be perfect 100% of
the time, and viewing your pages in a couple of different browsers should occassonally
prove... and we'll be nice... enlightening. You'll find that certain tags
behave differently in different browsers, or that the preview you see in your
web editor is different from what you see in your main browser. Small differences
can have a large impact on your pages and you should find yourself nitpicking
from time to time.
HTML tags or elements
An HTML tag is comprised of an opening tag <tag> and a closing tag </tag>
(notice the front slash in the closing tag). The word "tag" represents
whichever tag you are using... <tag> itself means nothing. Tag is
actually more of a slang term. These are actually called HTML elements.
If you ever write a book about web development, call them elements. :)
Some of the most useful HTML tags are dealt with below: <font>, <title>,
<body>, and <a> just to name a few. Each is accompanied by
a closing tag which is placed where you want the tag attribute to cease. Thus
you would construct your page title in tags like this:
<title>My Fantabulous Webpage</title>
Since every rule needs an exception, be aware that a few tags DO NOT require closing
tags. These include <br>, <hr>, and <img>. You'll
get used to these quickly, as the logic of the tags themselves suggests no closing.
The complete list of HTML elements,
or tags, is provided by the standards setting organization w3.org, headed up by
HTML inventor Tim Berners-Lee. Don't be intimidated by this list; you may
never need to know half of these. It does reveal important information as
to which tags require openings or closings.
HTML is, quite fortunately for many of us, case insensitive. All the HTML tag
keywords you learn can be written in capitals or lower-case and the browser won't
render your page any differently (I prefer lower-case). Of course, there is much
else that you will want to pay attention to concerning case in the actual content
of your webpages.
HTML comments
As in all computer languages there is a syntax for making comments within your
work. Comments are lines that are not processed at runtime, in other words
the browser will not see your comments in any way. Remember though that a user can read your comments simply by "viewing the source" of the webpage. You will also find yourself viewing the source on websites
near and far, lifting ideas and new tags as you go. One of the great advantages
of the web is that you can go behind the veil very easily. At least,
on the front end.
To make a comment in your HTML, begin the comment with <!-- and end it with
-->.
<!-- this is a comment... I use comments to remind myself what I was doing
when I was writing the code. -->
The above is a one line comment. You can also go crazy:
<!-- here's another comment.... check out the below table, it has double
nested tables in each of the cells to get the layout right.
note the placement of the <tr> tags.
remeber to set the cell background colors!
-->
As you can see, multi-line comments like the above are as easy to make as single
line comments.
I have to confess: I don't usually make comments in my HTML. I am more
likely to get lost, and therefore need comments, in Perl. But presenting
the HTML comment syntax is important in case you find the need. You could
always use comments to be a wisecrack artist and talk to the people viewing
source on your pages.
HTML attributes
The HTML elements we discussed above don't always gain meaning until we assign
one or more attributes to them. The <font> tag is a good example of
this. To wrap your text in <font> tags with no attributes, you haven't
done anything:
<font>This text will be unchanged</font>
Instead we change the style of the text by attaching attributes to the font
tag.
<font face="arial" color="red" size="1">Here
is some small red text in the arial font.</font>
Here is some small red text in the arial
font.
Note that you only need include the attributes in the opening portion of the
tag. Also, double quotes are positioned around the value of the attribute.
You can get away without these in the example above, but when attribute
values contain commas or spaces the double quotes are obligatory so it is good
to get in the habit of using them.
The first line in your HTML document should be the <html> tag like this:
<html>
And the last line in your document?
</html>
The phrase "rocket science" isn't exactly coming to mind. The
<html> tag is telling the browser, "yup, this is HTML, go ahead and
use your HTML parser to interprer and display this page."
Does the <html> tag accept attributes? Yes, it does. However
this webslave has NEVER had occassion to use attributes within the <html>
tag, so I will not cover it in this book. If I stumble on a good reason
to utilize attributes in this tag, a future edition of this book will cover it.
The Document Header <head>
Usually the next tag in your HTML document is the <head> tag. The
information you place between your <head> tags comprises "header"
data in your webpage, which is mostly "meta" data about the contents
of the document. It is also where you place Javascript functions and calls
to external stylesheets.
We'll first take a look at the <title> tag, and then at some of the <meta>
tag attributes that will help you build a solid HTML header.
The <title> tag
As you saw in the example above [in HTML tags or elements], the <title>
tag is used to declare the title of your webpage. I am not aware of a
hard character limit for a page title, but the recommended limit is 80-100 characters.
This is because search engines will display the title of your page in
their listings, and characters will be cutoff after a certain length. Each
search engine has a different standard for this, so we simply try to keep them
short but descriptive. Also, the better keywords you include in your <title>
the more often your page will come up in search results, especially in engine
which weigh the <title> heavily.
As with all the tags in this section, always be sure to keep your <title>
tag between the <head> tags in your document. Here is what a completely
empty webpage with only a page title looks like:
The page title will occupy the upper left-hand spot in the window of your web
browser, above the toolbar.
<meta> description
After your title, you will want to include a description of the contents of your
webpage. The description does not itself appear on the webpage display,
but is used by spiders (little programs that recruit webpages for search engine
listings). The description is best kept under 250 characters to please the
search engines. Not all search engines use the meta descriptions beneath
the page titles, but for the ones that do, it is worth the effort to include meta
descriptions in your webpages. You may also find your meta descriptions handy
later when you are designing the back end of your site.
A meta description looks like this:
<meta name="description" content="This page has everything you'll
ever need to know about bean sprouts.">
Note that the <meta> tag takes two attributes in this case, "name"
and "content". You may also have noticed that there is no need
to add a closing tag for <meta>. All <meta> tags in your HTML
are optional, but the description and keywords (discussed below) are attractive
to use if you are looking to drive more traffic to your site and advertise properly.
<meta> keywords
Like the meta description, meta keywords do not appear on the webpage in the browser.
They are used by search engine spiders to generate a frame of reference
for the contents of the webpage. Of course, people can put anything
they want in their meta keywords to try and fool the search engines into returning
their pages more often in search listings. That's why the best and most
popular search engines match the contents of the page itself (what the user actually
sees) to the keywords to make sure they actually appear on the page. Each
search engine has also developed its own complex algorithms for weighing the importance
of <meta> descriptions and keywords, actual page contents, and most especially
the <title> of the page. The <title> is the #1 factor for most
engines.
When listing the keywords for your page, try to imagine words and phrases that
users would be most likely to search for on the web. A page for a club of
stamp collectors might contain the following <meta> keywords tag:
Of course, it would be nice if those words and phrases actually appeared in the
body of the webpage so the search engines don't "smell a rat" and ban
the page from listings. You should also be careful not to repeat one
word too often. In the above example, were we to add more keywords, we would
look for phrases without the word "stamp" to further conform to what
the engines may favor. The engines try to weed out the tricksters and the
spammers. Keep your website professional and real. The tenets of good
business apply to web development ethics, and whether you are building a business
site or not, the online community will respond better to a website crafted with
integrity.
It is recommended that you keep your <meta> keywords contents to a limit
of 1024 characters. Any keywords in excess of that limit are likely to be
ignored.
<meta> robots and revisit
Another way of communicating with the spiders (or robots) which comb the web
is by using the <meta> robots tag. Only some spiders look for the
<meta> robots tag, but once again, it is worth "advertising"
as best we can.
The <meta> robots tag can either invite or disinvite the robot to index
the page. You may have reasons for wanting to dissuade search engines
from indexing a given page. You can also indicate whether the robot should
follow the links on the page to go on and index other pages,
An invitiational robot tag would look like this:
<meta name="robots" content="index,follow">
A disinvitational robot tag would look like this:
<meta name="robots" content="noindex,nofollow">
Of course, you can always ask spiders to index your page but not follow your
links to index others. You'd probably do this if all of your links were
external (i.e. to other domains). This would look like:
<meta name="robots" content="index,nofollow">
Additionally, there is a complimentary <meta> tag attribute called "revisit"
in which you can tell the robot how long to wait before revisiting the page
to discover new content you will have updated it with. Obviously you would
only use this if you had already told the robot to index the page:
<meta name="revisit" content="15 days">
robots.txt
The robots.txt file is another more popular way to control the spider traffic
on your site. The major search engines cooperate in using this file as a standard
to allow webservers to configure what gets indexed and what does not. It
is important to note that if you just assume your entire site be indexed by search
engines, you probably don't need to worry about robots.txt at all.
For those that do want greater say over what spiders do, robots.txt is robust
because it enables you to disallow spidering of specific directories and talk
to specific spiders whose "User-agent" names are standard. You must
create a text file called robots.txt and store it in the root directory of your
webserver, often a directory called "www". The spiders will look for
it there, read it, and follow your directions. The robots.txt file has nothing
to do with your document's <head> content and need not be referred to in
there.
One familiar User-agent is GoogleBot, but you can encompass all User-agents by
using the wild card (*) character. The below robots.txt file is the kind
of default file your webhost may provide you. This one disallows all spider User-agents
from indexing the "cgi-bin" and "wusage" directories.
You may also deliver a separate set of directories to disallow for each User-agent
you wish to define. The robots.txt file can be important to some webmasters, but
for our purposes we will not dwell any longer. In my experience, password
protecting directories you consider private is the better choice in most cases.
Robots.txt has its place however and you may wish to explore it further.
<meta> http-equiv="refresh"
The <meta> refresh attribute (actually, "refresh" is a value of
the http-equiv attribute) is a very handy tool to acquire for your toolbet. It
tells the browser reload the page after a time duration of your choosing, or to
redirect to another URL entirely.
To have the browser reload the page every 2 minutes (you may be writing a web
application wherein the page changes that often):
<meta http-equiv="refresh" content="120">
The value of content, as you can see, is expected in seconds.
To have the browser redirect to a different URL use this syntax:
Note that the value of content is .1 for a 1/10 second redirect, and that a semicolon
is used before the URL. Also, your double quotes span everything after content=
You could also do a slower redirect to allow the user time to red a short message
on the page:
This will redirect to the new URL after 10 seconds.
Some browsers do allow users the option of turning off the <meta> refresh
capability, because it is often abused. In that case you are out of luck.
But not many users actually elect this option so we can safely use this
neat little trick in most cases. It is especially useful when you want to
move a webpage to a new URL (i.e. change its filename and/or directory location)
while still leaving a "breadcrumb" to direct the user to the new resource.
Javascript and CSS in the Document Header
Another important function of the document header (everything that goes between
your <head> tags) is to provide a place for Javascript functions and to
load an external stylesheet. These are more unseen code chunks which will
nonetheless have a large impact on the experience of the end user. See
the specifics of coding these into your HTML in their respective sections. But
below is a preview of how a chock-full document header might look like to round
out our discussion of this region of an html document. Notice the HTML
comments I have included to warn you about things we haven't discussed yet:
<head>
<title>The Webslave's Handbook</title>
<meta name="description" contents="A book by Marcus Del Greco.">
<meta name="keywords" contents="HTML,CSS,Javascript,Perl,MySQL">
<meta name="robots" contents="index,follow">
<meta name="revisit" contents="60 days">
<!-- look out below... this is an external stylesheet being loaded -->
<link rel="stylesheet" href="http://www.mindmined.com/tools/webslave/webslave.css"
type="text/css" />
<!-- incoming! everything between the below <script> tags is
a Javascript function that will be called later in the body -->
<script>
function openBrowserGraph() {
myWin= open("http://www.mindmined.com/tools/webslave/popups/popular_browsers.html",
"", "width=520,height=370,scrollbars=yes,status=yes,toolbar=no,menu=no,resizable");
}
</script>
</head>
The Document Body <body>
The contents of the webpage actually seen by the user are contained between the
<body> tags in the HTML document. This includes all the text, images,
and other objects you choose to include on your page. The very next line
after the header is closed </head> will probably always be the opening of
the <body> tag.
It is in the <body> tag where certain global attributes can be defined for
the document. The most common of these are discussed below. If these
global attributes don't feel granular enough, you can gain greater control over
many of the same style elements using Cascading Style Sheets (CSS). But
the <body> attributes often suffice to give webpages a cohesive feel.
<body> bgcolor
To set a solid background color for your webpage, give the <body> tag a
"bgcolor" attribute:
<body bgcolor="black">
The common color words such as black, white, red, orange, blue, etc... can be
referenced as values of the bgcolor attribute as above. But as you can imagine
this would be somewhat limiting when it comes to getting subtler and hyrbrid tones.
Actually an amazing number of color names are available, but a fuller range
of colors is still needed. For this reason the hexidecimal color system
was devised, wherein a six character code is assigned to a very specific color
shade. A synonymous way to set your background color like above would be:
<body bgcolor="#000000">
Luckily there are numerous charts to allow you easy access to the hexidecimal
palette. Here is one common hex
chart that should make your color choices easy. There are many places besides
the <body> tag in HTML where a color attribute can be set.
<body> background image
You are not limited to a solid color for your webpage's background. However
in most all cases you are obliged to create or acquire an image to use insead
of solid color. The image is called from the <body> tag like this:
<body background="images/bgimage.jpg">
In this example, bgimage.jpg happens to be the name of the file we are choosing
to load in as our background image. We also see that it is stored in a directory
called "images" and that "images" is in the same directory
as our html file. This is a "relative" reference. See the
section on relative vs. absolute links for a more complete discussion of how to
reference files in different ways.
Try out a background image in an html document and observe the results you get.
Is your image smaller than the viewing area of your browser, so that it
repeats itself in a tiling effect? This is how to browser covers the entire
background with the image you give it. Perhaps the image you supplied the
browser was larger than the area your monitor can see, and some of the image is
"off the page." You'll find yourself paying special attention
to your image sizes in achieving the look you desire. Use a bitmap editor
such as Adobe Photoshop to adjust the sizes and other properties of your images
themselves.
Always be sure to check your webpages in various browsers and at various resolutions.
Screen resolution is set differently from computer to computer and you will
have to evaluate the pros and cons of each of your designs at each setting.
Unlike in many mediums, you do not have total control over the final presentation
of your website in this way, but you can take measures to remain as flexible as
possible. Experimentation remains your most effective tool in developing for a
larger and larger audience.
<body> text
To set a global text color for your webpage, place the "text" attribute
in your <body> tag. Notice that of course we can include more than
one attribute:
<body bgcolor="#000000" text="white">
We can even mix and match our use of color names and hex codes... no problem.
Now we have white text on a black page.
Does this mean that every word on the page has to be white? No, we
can override the global body attribute wherever we like with <font> tags
or by using CSS.
<body> link
By default, links on your webpage will be underlined and colored blue. You
can override the color default by defining the link attribute in your <body>
tag:
One user-friendly feature of HTML is that links are "stateful." This
means that the browser keeps track of which URLs have been visited and allows
the developer to define attributes only for visited links. By default, visited
links are colored purple, helping the user remember where he has already been.
The default is overridden by using the vlink attribute in the <body>
tag:
FFFFC0 is the hex code for a light shade of yellow. Links will assume this
color when they are in the state of having been visited.
<body> alink
From the moment you click on a link until the moment the resource you selected
is fully loaded, the link is in an "active" state (after that, the
URL is remebered as visisted). Is it for this variable length of time
that we can set the <body> alink attribute and color active links however
we like. Often, on a fast network connection, active link colors are barely
noticeable because the next page loads almost instantaneously. But on
slower networks, active link colors will linger and we may want to set them:
To override global font settings for certain chunks of text, use <font>
tags. For instance, to change what font is used, we have the "face"
attribute:
<font face="Arial">This text would hopefully appear in Arial.</font>
Keep in mind that your users may not have every font that you have installed on
their systems. Stick with common fonts like Arial, Helvetica, Sans-Serif,
etc... your favorite WYSIWYG web editor can be useful for suggesting the most
likely choices. If you pick a far-out font, only users with that font installed
will enjoy it. Otherwise they will revert to a global font setting or their browser
default font.
Conveniently, HTML provides you the opportunity to tier your font choices in consideration
of users that don't have your first font choice installed. Thus you can code a
"try this, if they don't have this, try that, if they don't have that, try
the other" logic quite simply like this:
<font face="Courier New, Courier, Sans-Serif">This text is will
very likely appear in one of our acceptable fonts</font>
Similarly, add color and size attributes to the <font> tag:
<font color="#000000" size="3">
Here we will have black text at a size of 3.
Size can be set on an absolute or a relative basis. Above we have set an
absolute font size of 3. Try the different numbers out to see the results.
Relative sizes are set with plus or minus values. This varies the font size
relative to the surrounding text. If you wanted the text within your <font>
tags to be two sizes smaller, you would code it like this:
<font size="-2">This text will be two size smaller than the surrounding
text.</font>
There are a few other attributes you can use with the <font> tag element,
but they are mostly related to Javascript techniques of calling functions on mouse
events. The <font> tag isn't commonly used in that manner.
<b> is for bold
Any text surround by the <b> tag will stand out in bolded type. Give
it a try... it can be used in conjunction with the <font> tag too:
<b><font color="green">This text is not only green, but
bolded.</font></b>
Notice the good practice of keeping your tags symmetrical. You wouldn't,
for instance, want to put the </b> closing tag directly after the word "bolded."
This will start to get confusing once your code complexifies into multiple
nested tags.
(forcing spaces)
HTML has a quirk you may notice once you get going. Visible text, in HTML,
is anything between the <body> tags that is also not between the carrots
< > which signify HTML elements. You cannot put more than one space
between text characters which will become visible in the browser without using
a special HTML code. For example:
<font size="2">Here is some text consisting of two sentences.
Even though
I put many spaces between the first sentence and the second, the spaces will not
show in the browser.</font>
this yields:
Here is some text consisting of two sentences. Even though I put many spaces between
the first sentence and the second, the spaces will not show in the browser.
"But I want those spaces!" you might say. Instead, code it like
this:
<font size="2">Here is some text consisting of two sentences.
Now
we'll see some spaces between sentences when we view this in the browser.</font>
this of course yields:
Here is some text consisting of two sentences. Now
we'll see some spaces between sentences when we view this in the browser.
is the HTML code for a space; I call these "forced spaces."
"What a pain," you say. True. But most WYSIWYG editors will
help you force spaces with a simple key combination as you type. In Macromedia
Dreamweaver you can use the <ctrl><shift><space> keys to make
space after space effortlessly. But now you know for times when you find
yourself hand coding.
<br> and <p align>
In the days of typewriters we called them "carriage returns" but these
days, there is no carriage to return. In HTML we typically deal in line
breaks and paragraphs.
A line break is invoked by the simple tag <br> which does not need to be
closed (there is no </br>). String as many <br> tags together
as you like to put multiple line breaks between your text and images.
Often we'll use <br> to break our text into paragraphs, but in many cases
we may also seek to justify the text right or center (you probably noticed left
is the default). You can do this at the same time as you paragraph your
text with the <p> element:
<p align="right">This text will be justified right.</p>
If you prefer the <br> tag as I do, you can perform all your justifications
with the <div> tag or within tables.
the horizontal rule <hr>
The <hr> tag is another one you never have to close... and another way to
break up the content of your pages. The <hr> tag draws a horizontal
rule (or line) wherever it is placed in your HTML. It can also take attributes
such as width, size and alignment:
<hr width="80%" size="4" align="left">
Center is the default alignment for horizontal rules.
Also by default, horizontal rules are drawn in "shaded" style. You
can turn off the shading like this:
<hr width="80%" size="4" align="left" noshade>
Designers find the default shown in the first example to be a subtler choice in
most cases.
headings
Another way of formatting text is to establish headings. An HTML heading
is simply a chunk of text wrapped in <h#> tags where # is the rank of the
heading. For example:
The more complex and specific your webpage designs become, the more preparation
time you'll putting into your images. Matching your image backgrounds to
your HTML background colors may become important, or sizing your images to fit
table cells may be your challenge. Whatever direction your creativity takes
you in, you will most likely end up developing a whole new range of skills for
working with web graphics.
using bitmap editors
Almost all your work in preparing graphics will be done in a bitmap editing program
of one sort or another. There are countless programs that will export files
in the bitmap formats preferred on the web: .jpg and .gif, chiefly. This
book recommends Adobe Photoshop for its versatility and wide usage (it may come
to pass that you collaborate on source files with other developers).
Whichever bitmap editor you choose, there will likely be a working file format
which is native to the editor. When working in the program's design mode
you will first save files in the proprietary file format, then export to .jpg
or .gif. It is helpful to retain a copy of the original or "unflattened"
working file in case you need to go back and make changes which can only be done
in that format.
Here are the basic steps of creating or editing an image:
1) open or create a new image in a bitmap editor
2) use the tools of the editor to create and alter the image
3) size the image for the web (pay attention to pixel dimensions)
4) save the "unflattened" image file for possible later editing
5) flatten the file and apply proper compression
6) save as .gif or .jpg
image compression
Unless you are presenting a high resolution image intended to be printed or viewed
in large format, most of your webpage images will be compressed. Luckily,
your best bitmap editors have compression algorithms built in.
Compression is a process by which data files are "crunched" in order
to be saved at a smaller file size. In addition to taking up less disk space,
a compressed file will travel over the network faster and result in quicker loading
times for your webpages. Of course, the tradeoff of compression is quality,
and you will have to experiment with different settings for each image to preserve
the quality you need while achieving the greatest rate of compression.
Numerous standards have been published as to how many total bytes in text, image
and sound should be loaded into a single webpage at maximum. All aim at limiting
the wait time for web surfers. With the growing popularity of high speed internet
service, some developers are getting "lazy" about compressing images
and taking other measures to reduce the total amount of bytes comprising their
websites. This may not bother the high speed users, but the majority (at time
of this writing) using dialup connections are waiting anywhere from thirty seconds
to several minutes for these "heavy" pages to load. For now, the smart
developer should still take care to use compression whenever possible.
This book recommends a maximum of 50 KB for the total images on a single webpage.
Lower is better.
Images we wish to present in high resolution and/or large format can be placed
on pages by themselves (in "gallery" style) or even called directly
(most browsers now support the display of common image formats if they are called
directly in a link, such as <a href="http://www.somesite.com/images/picture.jpg">click
here for large picture</a>.
sizing images for the browser
Images for the web should be sized considering pixel dimensions. Your bitmap editor
will have a function for altering the image size of the file you are dealing with.
There is no need to pay attention to "print size" unless you are working
on an image intended for printing.
The most important thing to remember is that monitor resolution varies form user
to user. A 1000 x 1000 pixel image will look a lot bigger on a monitor running
at 800 x 600 resolution than it will on a monitor running at 1024 x 768 resolution.
In fact, on the 800 x 600 screen, it will show larger than the browser window
itself and scrollbars will be needed to see it all. On most websites, this is
not a desired condition.
Monitors truly range to all extremes in resolution settings, and users can alter
these settings to their liking. But a good rule of thumb is to make sure your
site looks good in 800 x 600 resolution as this is perhaps the most common. I
personally use 1024 x 768 resolution (to be able to "see more" on my
screen... icons are smaller for instance). Play with the settings yourself and
see what I mean. Under Windows this can always be done in the Display section
of the Control Panel.
Since I use 1024 x 768 resolution, it behooves me as a designer to switch to 800
x 600 now and again to view my websites in "larger" format. ("Oops!
That page scrolls off to the right. My images and/or tables are forcing the page
too wide, I need to correct that.")
It will take you awhile to get comfortable with your image pixel dimensions. Eventually
you'll be able to guess within a few pixels as you visualize an image on the page.
But expect to return to your bitmap editor often to make adjustments to your image
size and other attributes until your webpages are "just right."
transparent images
Neat trick alert! The .gif file format allows for the designation of certain pixels
to be "transparent". This is handy whenever you want the background
of your webpage the show through in certain places.
Construct the image in a bitmap editor which offers a function to create transparent
images. Generally it will provide you with some sort of color selection tool that
you use to indicate which color(s) should be rendered transparent when the image
is saved. One of the most common techniques is to create an image on a solid white
background and then designate the color white to be transparent. The remaining
pixels will comprise the visible image and the image will remain rectangular as
you place it on the webpage. Keep in mind that many bitmap editors will require
that you convert the image to "Indexed Color" mode (supporting .gif)
before making their transparency functions to you.
loading an image with <img> src
Place images on a webpage using the <img> element and src attribute like
this:
You will of course notice that <img> is one of the tags we need not close.
This code will instruct the browser to download the image file and display it
appropriately on the page (according to where in your HTML you have placed the
image).
image height and width
The <img> tag supports the definition of height and width attributes. Left
undefined as above, the image is displayed at the pixel dimensions you saved it
at. The height and width attributes can be added to enlarge or shrink the image
in the browser.
This, however, is generally considered poor technique. Browser re-sizing of images
can cause loss of resolution when enlarging, and when shrinking you have caused
a larger than necessary file to travel over the network. Therefore, the most common
use of the height and width attributes is to define the image at its actual
size.
Why do we want to do this? To tell the browser how large an image to expect
before the image downloads. In cases where the image loads slowly due to internet
traffic jams or the like, the rest of the page can display in proper proportion,
leaving a precise space for the incoming image. Try both defining (as below) and
not defining the <img> height and width attributes, and observe your page
at load time.
Many WYSISWG web editors will automatically include the proper height and width
values when you insert an image through their interface. For arranging images
and forming table layouts, these applications can be excellent companions.
percentages vs. pixels
Generally you will define image height and width in pixels as demonstrated above.
But percentage values are also supported and cause an image to occupy the given
percentages of its window or table cell dimensions. In other words, setting both
width and height to 100% would cause the image to take up the entire screen, or
if in a table, the image's entire table cell.
This same concept governs the dimensions of tables and nested tables. Read on,
and as always, try it yourself:
The code is here for you to take and modify! Perhaps some of these abilities will
spawn creative design ideas in you.
image borders
HTML can draw a border around an image through use of the "border" attribute.
The image border acquires the color according to your link properties. In the
<img> tag, your are concerned chiefly with the thickness of the border:
Images can also be given some "elbow room" if they too closely align
with text or other images. To provide clearance away from the head and foot
of the image use the "vspace" attribute. Along the sides, use "hspace".
Enter pixel values.
One of the most important attributes of a good image tag is its alternate text.
Alternate text is the verbiage that sometimes appears when you mouse over an
image on a webpage. It also appears on the page before an image loads, if loading
time is long. Additionally, alternate text is often used by applications which
describe images to the blind.
Add alternate text as follows (keep it under a couple hundred characters, because
most browsers only display the alternate text for a period of several seconds):
<img src="image_file.jpg" alt="This is an example image file.">
Alignment with <div>
The <div> tag is most often used to extend the align attribute across
numerous objects on your page. That is to say, instead of adding align attributes
into each object as below...
The <div> tag can get more involved than this, working with stylesheets
to position things down to the pixel. This book recommends working with a good
WYSIWYG editor such as Macromedia Dreamweaver to understand <div> tags,
as these applications will write <div> tags for you and often save you
hours of hand-coding.
Rollover Images
One very popular design element is the rollover image. A rollover image consists
of the original image, and an image that waits "underneath" for the
user to mouse over. Once the user mouses over, the second image appears in the
original's place.
By varying the two images in small ways, wonderful effects can be created. Rollover
images, being triggered by mouseovers, are a great way to add interactivity to
a webpage. For this reason, rollover images are also most often linked images,
taking the user to another resource on the site.
Disappointingly, rollover images require a fair amount of Javascript to implement.
Complicating matters, the Javascript must be written in such a way as to compatible
with the great majority of web browsers. Therefore it is not practical to consider
writing this Javascript yourself if your approach to web development is wholistic.
WYSIWYG editors will generate this code for you. You get to concentrate on designing
the bitmap images themselves, which in the case of rollover images, are very often
"buttons". An enjoyable element of design.
Image Maps
Image mapping is a way of linking an image to multiple
URLs. Coordinates of the image of "mapped" by your web editor according
to shapes that you can draw on the image. In this way you divide the image into
multiple "hotspots" which, on mouseover, link to the resources you
specify and even display alternate text. Although you may not have to write
it yourself, here is an example of image map code, which is often included at
the bottom of the HTML code before the closing </body> tag:
<map name="navImage">
<area shape="circle" coords="388,261,40" href="bios.html"
alt="band members">
<area shape="circle" coords="308,223,44" href="lyrics.html"
alt="words to the album">
<area shape="circle" coords="210,241,38" href="buy-now.html"
alt="purchase the album on CD">
<area shape="circle" coords="135,198,43" href="reviews.html"
alt="from the critics...">
<area shape="rect" coords="144,68,276,115" href="music.html"
alt="FREE audio clips!">
</map>
In this example there are four circular hotspots and one rectangular hotspot.
As you can tell, these coordinates might be pretty tough to eyeball, so adjusting
the code manually may not be as time-efficient as once again bowing to the power
of the WYSIWYG editing program.
Links
The <a> tag
If HTML had to be a language with but one element, it would be the <a> tag.
The <a> tag links your words and images to other resources, be they local
or offsite. Links were the miracle of ingenuity that make the web the unique medium
that it is. Your goal as a web developer is to lead your surfing audience down
a predictable pathway of links to arrive at the destination(s) you have in mind
for them. It is this shepherd's role that is most appealing to creators of internet
environments. The manner in which we present choices on our webpages can be powerful
enough to lead our sheep to water and make them drink. The horses too.
Knowing the integral role links play, it's a comfort they're as simple as the
rest of HTML. Surround the text you want to link with an <a> tag and use
the "href" attribute to designate the resource you are linking to:
Here is a <a href="http://www.somesite.com/">link</a> to
some site.
We have already discussed how to set the color properties of your links in the
<body> tag.
Absolute vs. Relative
There are two ways to reference resources in the "href" value. One is
to qualify the destination absolutely, meaning we start with http://
and type out the entire URL. This is the way we want to link all offsite pages:
This is an <a href="http://www.somesite.com/">offsite link</a>.
But for local pages and files, we have the option of linking in a relative
fashion. Relative links point to files relative to the document
you are linking from. Thus:
This <a href="page.html">link</a> is to a page in the same
directory as this page.
and
This <a href="../page.html">link</a> is to a page in the
directory above this page's directory.
and
This <a href="folder/deeperfolder/page.html">link</a> is
to a page in a directory to directories below where this page is stored.
Linking with relative links can be useful if you are designing a site to be portable
from one server to another. Even if your base URL changes, the links will remain
working if you set up the directory structure of your new server exactly the same.
Linking Images
Linking images is easy. Simply surround the <img> tag with your <a>
tags and voila:
<a href="page.html"><img src="nav_image.jpg"></a>
You may also choose to link text and images in clumps, making it more likely that
the user will end up clicking through:
<a href="page.html"><img src="go.jpg">click here
to fulfill your fondest desires</a>
Rollover (or "hover")
Text Links
A close cousin to rollover images from a design perspective, rollover (or "hover")
links can be a very effective way of letting users know they have moused over
a pathway you'd like to see them follow. Rollover links can't be done in HTML
alone however. Please see the section on links in
our Cascading Style Sheets unit.
Named Anchors
Linking to other local or offsite files is most common, but you may want to
link to places within the document you are working on. These links
will take the user further down the page to a section you've marked ahead of
time. This is done with named anchors.
The following piece of text has been anchored with the <a> tag and a value
for the "name" attribute:
<a name="chapter1"></a>Chapter One
Notice that when placing the anchor, the <a> tag does not surround the
text. You only surround text with the <a> tag when actually linking. Here,
we go ahead and link to the above anchor:
Here is the <a herf="#chapter1">link</a> to the anchor.
The hash mark to begin to href value indicates that what follows is the name
of the anchor.
You can also link to anchors in external files, like this:
Here is a <a herf="page.html#chapter4">link</a> to an
anchor on another page.
Tables
Using tables for layout
Once you start playing with the HTML we've covered thus far, you will notice that
placing text and images on the page exactly where you want them isn't
easy. Enter "tables". Tables divide the page area into sections, grid-like.
Each section is known as a "cell".
width and height
You may want to specify the width and/or height of your table in the opening shot.
Start contructing your table like this:
<table width="100%"></table>
The above code establishes a table which will occupy 100% of the width of the
browser window. Height is not specified in this case, so the height of the table
will default to conform to whatever contents you fill the table with.
pixels vs. percentages
Specifying width as a percentage (as above) makes your table pliable and responsive
to the browser window. It is also a useful technique when working with nested
tables.
Pixel designations are also allowed in width and height values. Using pixels fixes
your tables in absolute terms, which can be desirable for many design needs:
The above table will span 500, and only 500, pixels in the browser window. If
the screen is larger than 500 pixels wide, the table will not expand to fill it.
If the screen is less than 500 pixels wide, the table will run off the edge and
a horizontal scrollbar will be offered by the browser (this is a design no-no,
watch for this one!).
The best way to learn how to use pixels vs. percentages is to fiddle with the
code on your pages until you achieve your layout goals. There is no substitute
for time spent playing with the code, and mastering tables will definitely take
you some time. Eventually you will be able to envision the table code you need
to accomplish a given task, and you will be empowered to design increasingly complex
webpages in less time.
table border
You may choose to add a border to your table to define the cells more clearly.
The thickness of the border is set in pixels within the table tag like this:
<table width="100%" border="2"></table>
This table will have a border two pixels wide. You can control the color
of the border as well, and even within each cell, but there is a more important
aspect of tables worth discussing first.
table rows <tr> and cells <td>
The above introduction to tables is potatoes, but no meat. The crux of tables
is that you are granted rows and cells. Define your rows with the <tr>
(think "table row") tag.
Within the rows you define the cells and you get something that looks like this:
<table width="100%" border="1">
<tr>
<td>text and/or images within the cell</td>
<td>text and/or images within the cell</td>
</tr>
<tr>
<td>text and/or images within the cell</td>
<td>text and/or images within the cell</td>
</tr>
</table>
This is a four cell table, two cells per row, and looks like this:
text and/or images within the cell
text and/or images within the cell
text and/or images within the cell
text and/or images within the cell
bgcolor
The <table>, <tr> and <td> tags each accept the bgcolor (background
color) attribute, which allows you to set background color. The <td> value
overrides all others, and the <tr> value ovverides the <table> value.
Thus:
This table isn't very attractive, but it demonstrates how bgcolor is prioritized
among the three table tags. Keep this rule in mind as you design your tables and
you will develop your own techniques to achieve certain effects.
bordercolor
The above table has no border yet, so let's add one. Let's also set the bordercolor
attribute once on each kind of tag: <table>, <tr> and <td>.
Lastly we'll remove the bgcolor settings altogether so we can focus on bordercolor
for now.
As always, play around with the bordercolor setting along with the border attribute
to set thickness. Experiment until you stumble on a pleasing look. And remember
that often, you may not want your table to have a border at all, in which case
you can set border="0" from the outset in your <table> tag.
background image
The same hierarchy of tag precedence applies to adding background images. I made
three exceedingly ugly images for this example, bg1.gif (),
bg2.gif (), and bg3.gif ().
Notice that using background images creates a tiled effect if the image is not
large enough to fill the given area, just as with the <body>
background image. Of course, the whole purpose of setting an image as a background
is that you can place content over the image.
Substitute your own images and cook up some tasty designs.
align
Tables can be further formatted using the align attribute. In the <table>
tag itself, align will determine the justification of the table in the browser
window or within another table if nested. The three
legal values for align are "left", "right" and "center".
<table align="center" width="50" border="1"><tr><td>this
is the table</td></tr></table>
produces:
this is the table
Notice the table width of 50 pixels is hard-limiting the text and forcing it to
wrap.
nowrap
If don't want the text to wrap, grunt "nowrap". The nowrap attribute
is best set at the cell level and is written simply as nowrap like this:
<table align="center" width="50" border="1"><tr><td
nowrap>this is the table gosh darnit</td></tr></table>
this is the table gosh darnit
We can see that nowrap took precedence over the 50 pixel table width.
cellspacing
Give your cells some elbow room by using the cellspacing attribute within the
<table> tag. Let's use one of our ugly images to demonstrate how cellspacing
works.
Here is a table with the image sourced four times, arranged in a square:
Notice there is a wee bit of space between each of the cells holding the image.
The default cellspacing value is 2, so if we leave out the cellspacing attribute
as we did above, 2 pixels will seaparate the cells from each other.
Now let's set the cellspacing to 16 and see what happens (the only line of code
which changes is the first):
<table border="1" cellspacing="16">
[the rest is the same table code as above]
If your table design is feeling "crowded", cellspacing can be one of
your best friends.
cellpadding
You can also fight that crowded feel with cellpadding. Cellpadding is much
like cellspacing except that the space it controls is inside the cells, not
between cells.
Here is the same code as above will cellspacing replaced now by cellpadding:
<table border="1" cellpadding="16">
[the rest is the same table code as above]
From a design viewpoint, the most striking difference here is that cellpadding
and cellspacing have influenced where the border lines are being drawn. With cellpadding,
the cell borders have been pushed away from the images. You will find that cellspacing
and cellpadding will help you to provide your text some breathing room as well,
and create a greater percentage of "whitespace" in your layouts.
nested tables
The really powerful aspect of tables is that you can use them "inside"
of one another. This is called nesting. By nesting tables you can build a more
complex grid in which to format your content. Your eye for the opening and closing
<table> tags becomes more important now, as the browser will wreak havoc
on your mistakes with nested tables.
Here is one table nested within another. The nested table is within a <td>table
cell</td>:
You could nest a table within the nested table as well, and on and on. A WYSIWYG
web editing program will help you with your nested tables by writing some of the
code and giving the visual result. This is a perfect compliment to your understanding
of the code and how to tweak it.
Forms
Thus far we've talked mainly of HTML with which we present content to the user.
What if we want the user to be able to present some content to us? We may want
to get the user's email address for a mailing list, or they may be purchasing
something online. We'll need their credit card number, shipping address and
a host of other details.
The <form> tag is the key to getting your webpage to "talk"
to your webserver. You'll need a program on the webserver which is ready to
receive information from your webpage, which we will show you how to do with
Perl. But the first step is to learn how to create a
proper HTML form to ask the user the right questions.
the <form> methods and action
The <form> tag requires two main attributes, "method" and "action".
The method can be set to either "get" or post". The "get"
method is intended only for cases where you are asking for data from the webserver,
such as a database query or search. Still, "post" can be used in these
instances too, and is more appropriate for the majority of applications of the
<form> tag. There are technical differences between "get" and
"post" which are outside our scope here, but which generally point
us in the direction of using "post" in most circumstances.
The "action" attribute asks us "where is the program this form
should talk to?" This value can be either an absolute URL or, if the program
is on the same machine as the webpage, a relative path. Below is an example
with a URL:
<form method="post" action="http://www.somesite.com/cgi-bin/mailinglist.cgi">
[what else is contained in a form? read on]
</form>
This form, when submiited by the user, will contact the program called "mailinglist.cgi"
which is in the public cgi-bin directory at somesite.com.
name/value pairs
Above, we've defined the form "method" as well as showed it which
program on the webserver to talk to. We have not collected any data from the
user yet. For this we'll need to know our input types. We also need to understand
how the webserver is programmed to accept data from a client browser.
Data is sent from your webpage to a webserver in name/value pairs. The
"name" is a label to remind you what the expected data is. The "value"
is the data itself. This helps you keep track of what is what as you set up
your program. Your input fields will all be named so that the data coming through
is labeled.
input types
There are a number of ways to ask users the right questions in a form. Each
opportunity to provide an answer encompasses a field. Each field will
need to be defined with an input type appropriate to the question you are asking.
You may need the user's name, in which case you need to provide them with a
text field to type their repsonse. You may want to provide the user with a short
list of choices from which only one should be selected, or you may want to ask
the user to check off one or more selections. Finally, you need to give the
user a button to execute the form with once all the questions have been answered.
submit
The "submit" input type will draw a button for the user to click when
the form is complete. Include this in your <form> first so it's there when
you're ready to test. The "value" of the submit button becomes the text
on the button itself:
This code produces only the submit button:
We still haven't asked the user a question.
text input
Let's ask the user for an email address. For this we'll want a typable field,
the "text" input type:
<input type="text" name="email" size="20">
This creates an input field that looks like this:
The size of the text field is set to 20 characters, but the user may type as many
characters as needed. If you'd like to limit the amount of data that can be entered,
use the "maxlength" attribute:
The above text field will accept 5 characters and no more, even though it is sized
for 20. Try it. Control that user!
radio buttons
Another miracle of user interface is the radio button. I shouldn't say button,
however, since radio buttons always come in groups of two or more. Radio buttons
give the user a single choice among options; you can never select more than one
in the same group. Here is some example code and the result:
Radio buttons are generally found within your <form> tags and will send
data to a server-side program. Or, the form may be processed on the client-side
by the browser using Javascript. Notice that what
makes this series of radio buttons a group is their common value "socks"
in the name attribute.
checkboxes
To allow the user multiple selections from a list of options, checkboxes are very
popular. Familiar UI (user interface) elements like checkboxes and radio buttons
will make your audience feel right at home. They will also have better success
completing your forms to submission.
white/caucasian
black/african
asian
native american
east aboriginal danish creole eskimo
In a form using checkboxes, you can claim as many ethnicities as you like.
dropdown menus
A cousin of the radio button is the dropdown menu, which also allows just one
selection from the group. Use dropdown menus when you have so many selections
to present that radio buttons would clutter your design. The most common use
of the dropdown menu is a list of the U.S. states. No need to list all 50 here;
this snippet of code will give you the idea:
There are a couple of things worth noting about the above code. First, we can
see that entire dropdown is defined between the <select> tags. The name
attribute (with a value of "state" here) is set once (not so with
radio buttons) right in the <select> tag. We also present the visible
text by adding the "selected" attribute within the first option:
<option selected>choose a state...
In this case the selected option is not a valid one, as we have not specified
a value within this option tag. If we did add a value here, we could help our
backend program or Javascript know what the user has missed:
<option value="none_chosen" selected>choose a state...
If the user submitted the form without choosing a state, a value of "none_chosen"
would be passed as the parameter for "state". Our name/value pair would
be state=none_chosen.
hidden input
There will be times when you want to pass invisible values to the
program handling your form. The user will not see these hidden fields at all;
there is no selection to make. Do this with the hidden input type:
The above code will draw absolutely nothing in the browser window. But it will
allow you to talk to your program "behind the scenes" without troubling
the user with things she doesn't need to know. In this case we may be telling
our program that the form is being executed from the page "index.html".
Presumably, this form resides on several pages and we'd like to track where
the form submission came from. The form on other pages would carry a different
value for "page".
That's just one possible use for hidden input fields. You'll find them handy
in a variety of circumstances, such as carrying needed data through a succession
of pages that your program generates.
file input
HTML also allows us to send an entire file through a form field. We present the
user with a "browse" button to interface with their operating system
so they may navigate their local directories and choose a file. The code for this
is surprisingly simple:
<input type="file" name="image" size="75">
This generates a file input field:
We've named this file "image"; perhaps we are expecting the user to
send us a .jpg or .gif file.
form submission without
input
Is it possible to create a form with no input fields whatsoever? Sure. You
may want to execute a program on the webserver which requires no extra information
from the browser. I have used this myself to make submit buttons that I could
simply click to execute a backend program... easier than logging in and running
the program from the command line [what are we talking about here? If you are
going the way of programming to enhance the functionality of your website, skip
to the Perl section].
Is That All?
Well, now you've learned everything about HTML, right? Such an obviously leading
question. Of course you haven't. There is a lot more to HTML, and you should go
buy a thick book on it today and memorize every page. Just kidding.
Instead, I recommend you keep this book handy and start getting into the code
of your webpages. You'll see a lot we haven't covered here as you view the source
on sites you admire, but you'll see a lot you recognize now, as well. Borrow from
the code you find on others' pages, learn new elements and new ways to use the
elements we've talked about. Your growth as a developer will benefit by nothing
more than developing itself. Start simple and let it become complex in time. You'll
be writing some intricate and beautiful HTML pages before you know it.
),
bg2.gif (
), and bg3.gif (