|
The
Importance of Being Ernest…about HTML! (And Why You Should
Care!)
This week, we thought it
would be useful to offer the Internet Based Moms™ community some tips on HTML
(Hypertext Markup Language – the code that is used to build
web pages). But, first, I bet many of you are thinking that
you don’t need to or want to tackle this (oh-so-dry!?)
subject. You may be thinking that you don’t want to read
about HTML because you use a site builder or a software
program that creates the HTML for you. Well, I’m here to
encourage you to hit that “View HTML Code" button!
At first,
what you see may look like a bunch of gibberish to you, but
if you break it down into sections, it will seem more
understandable. That is what I will help you to do here. It is worth your while to understand at least a bit about
what code lies behind your beautiful pages! Why, you ask?
Here are a few important reasons to take some time to begin
to understand HTML:
-
It will help your target market find you
on the search engines!
-
A larger variety of people will be able to
use your site!
Your pages will load faster! And your
visitors won’t wait for a page that loads slowly…they’ll
go visit your competitor’s site instead.
I
thought a quick, interesting, and easy way to begin our
HTML lessons would be to address a few commonly asked
questions by people who are learning basic HTML. I have
answered a number of common questions and shared some of my
favorite links to allow you to do your own research and to
learn more about a variety of HTML topics.
Question: I use a WYSIWYG (What You
See Is What You Get) software program (such as FrontPage or
Dreamweaver). Why should I care about HTML?
It is
so important to make sure that you’re using good HTML code
as much as possible. Consider the following scenario. You view the web using a recent version of Internet
Explorer on your own computer and your site looks great!
The last time
you looked at your site on your father’s ancient computer
using an old version of Netscape, your site looked NOTHING
like it was supposed to!! How many other people are seeing
it that way??? Using standards-compliant HTML code will
greatly increase the likelihood that your site looks
presentable to visitors using a variety of major browsers.
Some
resources for learning basic, standards-compliant HTML:
Question:
What goes in the head
section of the code and what goes in the body section?
The
head section:
The
code for your site really can be broken up into two
separate main sections: the head section and the body
section. The head section exists between the two opening
and closing head tags: <head></head>. There, you may find
items such as the title of your page, metatags (containing
content such as a description of your web page and
keywords), scripts that are used on the page, and links
that pull in external files (such as style sheets and/or
scripts) that are used on many pages in your site.
The
title of your page
– The title of your page goes between the opening and
closing title tags: <title></title>. What exists between
these two tags is what shows up at the top left of your
browser window. You will want to consider including a
clear, concise summary of what you have to offer on this
page. Use your most important keywords in whatever phrase
you choose to place there.
More
on page titles:
Metatags
– Your metatags should include at least a description of
the page and a list of keywords. The keywords are used
less and less these days by search engines, but in my
opinion, it is still worth your while to include them.
More
on metatags:
Scripts
– Scripts that exist within the head section of your code
will be contained inside the opening and closing script
tags: <script></script>. Javascript is not the topic of
this article, but knowing that what exists between the
previous tags is javascript is useful in helping to chunk
the code for easy reading and understanding. If you think
there is a problem with the javascript on your page – such
as you see a warning on your browser window that reads,
“Error on page", or something similar, the chances are good
that the problem lies either within those tags or below in
the body section when the script is referred to.
More
on javascript:
Links pulling in external files
– I love seeing these! This means that making updates to
styles (fonts, colors, sizes, etc.) and scripts will be far
more efficient for you. Instead of changing every single
font tag on every single page or modifying how every
rollover text link should look at the top of every page,
those changes can be made in one document that is being
linked to many (or all) pages on your site. If you get
feedback from a great many users that the font that you use
on your site is too small, you change the font size in this
one external document and the font changes throughout your
site, on every page that links to that one style sheet
AUTOMATICALLY!! How quick and easy is that!!? Or if you
discover that a piece of javascript is not working on the
pages of your site, you have someone look at a single
external javascript file – once that’s fixed, it’s
automatically fixed on all pages – again, this is a
significant time saver!
More
on cascading style sheets:
The
body section:
What
lies between the two body tags (<body></body>) is the
content on your web page. You may use tables or you may be
using some sort of a more progressive table-less design
using cascading style sheets for layout – however you
choose to format the content (pictures and text) on your
page, that content will be specified here within the body
tags in the body of your code.
Question:
I’d like
to add visual interest to my web pages using images. What
is the best way to add images to my web page?
Using
graphically eye-catching ads on your home page allows you
to easily get the attention and hold the interest of your
web page visitors, send visitors quickly to specific new
content or products or point visitors to a great sale
you’re currently running on your site.
It is
very important to make sure that the width and height
attributes have been specified in your image tags. This
will help your pages to load faster, which is particularly
important for pages that include a lot of graphics.
Always
give your images descriptions. This will allow users who
are browsing with images turned off (for download speed
reasons – maybe they’re traveling and paying a great deal
for the amount of time they are online – by turning off the
image viewing capability of their browser, they get only
the pertinent text information they need, and don’t have to
wait for the slow download of unimportant pictures) or
maybe the visitor has some sort of visual impairment that
prevents them from seeing the images you’ve used. These
users will appreciate some sort of description of the
images you have chosen to include on your page. If the
visitor is using a screen reader, the reader will read the
image description you’ve detailed in the alt attribute out
loud.
Note
that because there is no closing tag, to the image tag, an
added "/" before the closing bracket is now recommended.
A
good image tag
- <img src="images/banners/banner1.jpg" width="250"
height="125" alt="A description of the image. This is
what will be displayed or read by the screen reader if your
image does not load for a variety of reasons." />
Whether you are using ftp software or are using some sort
of browser based file upload system that your host
provides, always remember that it is good practice to
upload the images you’ll be linking to before uploading the
code that links to the image. This is because if a visitor
views your page after you’ve uploaded the code, but before
you’ve uploaded your images, they will be looking at a page
with missing image(s). This looks unprofessional – like
you’ve forgotten something or don’t know how to link
correctly to your images.
Question:
I’d like to trade links with
other business owners in order to increase my search engine
rankings and network with other business owners. They’ve
sent me banner ads as well as text links – which is the
best to use and how do I add their link to my web page?
First
of all, when deciding how to link to other business sites
and resources of interest to the visitors of your site,
you’ll need to decide if you will accept banner ads or if
you’d prefer to simply link to other sites on the web using
text links. First make this decision, then add the link
itself. Whether you decide to use text links or banner ad
links, ALWAYS use the target attribute of the link tag.
Set it to blank, so that when visitors click on any links
that take them away from your web site, a new browser
window will open. This way, when they are done looking at
this resource you’ve suggested, they close the browser
window and - VOILA! – they’re back at your site again. You
haven’t lost them.
Text links: The benefit of a simple text link is that search engines
use the content of the text link (the actual words that the
visitor reads and that they click on to be taken to the new
site) as reflective of the content of the site it is
linking to. They balance this with what they see when they
actually follow the link, as well – so don’t get tricky
with the words you use to link – be truthful about what the
user will find when they visit the site you link to.
Another benefit is that simple text links load fast! Users
on slow internet connections (dial-up AOL users, for
example) will thank you – and view your links quickly and
easily. I’ve read that it is good practice to also include
the actual URL so that it is visible to a visitor who
decides to print off a page and visit the resource links
you’ve suggested at a later time. If the URLs are hidden,
these links will be useless on a printed page.
A
good text link
- <a href="http://www.the-resource.com" target="_blank">The
text that will link to the resource - www.the-resource.com.</a>
Banner ads:
Banner ads can be eye catchers! But, since banner ads
are images added to your page, they also add to the amount
of time it takes for your page to load. Some dial-up users
may not be willing to wait for all your banner ad images to
load and may leave your site rather than wait. You may want
to specify a limit to the file size that you allow per
banner ad. This will help to limit the load time for your
web page.
A
good banner link
- <a href="http://www.the-resource.com" target="_blank"><img
src="images/banners/banner2.jpg" width="125" height="30"
alt="A description of the image. This is what will be
displayed or read by the screen reader if your image does
not load for a variety of reasons." /></a>
Wrap Up
I hope
that this week’s HTML article has inspired you to take a
bit of time to begin learning HTML! If you have a web
page, I am sure that you will find that it pays to know a
little (or a lot!) more about the code behind your pages.
I encourage you to set aside even a half hour this week to
practice a little HTML…I bet you’ll even find it to be fun!
More indispensable resources for learning HTML:
_______________
Julie Kimber is a web designer and developer who provides
her services to small business owners and nonprofits. She
lives and works in Ann Arbor, Michigan.
http://www.blackpawdesigns.com
©2004 This article was
written exclusively for Internet Based Moms™ and may not be
re-published or copied without permission from Internet
Based Moms™, except to print
one copy for personal use. Any questions
regarding use of this article should be directed to
Linda. Comments and general questions about the
article's content can be directed to the author.
|
