|
by Dina Giolitto Want to save money while promoting your
web-based business? Of course you
do. Here's some advice on the matter,
from a freelance copywriter who knows: it pays to learn the basics of
HTML.
If you're like me (stubborn), you've probably been dodging HTML for
many years. All that code mushed together... it's distressing to look
at! But here's the thing: HTML is your friend. He might be ugly, but
he's a good guy to have on your side.
Once you get a basic understanding of how HTML works, the gibberish
starts to make sense. And that's when you'll realize how easy it is to
create web pages for your own business without having to 1. pay a
designer thousands of dollars, or 2. purchase one of those expensive web
design programs.
Let's start with a general explanation. HTML stands for Hyper Text
Markup Language. It's the basis for every single design element you see
on a web page: layout, copy, image placement, links, music, animation,
etc. People who design their sites using fancy web page creators with
buttons and copy/paste features are merely controlling the HTML code via
the program's graphic overlay. Underneath it all, the code's still there
in its pure form. You can see it if you go to a webpage and then click
View>Source from the top menu.
Easy Web Page Creation
You can create a professional-looking web page using HTML and the
bare minimum of tools: a text program (such as Notepad) to write and
save files in, a Web browser to view the files, and a photo-editing
program such as Photoshop.
Ever visit a webpage and then click View>Source so you can stare
at the "guts" and try to make sense of it? The text program
that opens that page is the same one you'll use to create your own web
page from scratch. Keep in mind, a text program is NOT the same as a
word-processing program, such as Microsoft Word. If you use Word, you
may accidentally save your file as a .DOC, and in doing so, create all
kinds of coding problems that make your page look crazy. NEVER create
web pages in Word!
Here are three salient points about writing HTML code.
1. Your text editing program does not recognize paragraph returns
when you type them with the Enter key. You will separate your text
manually, using HTML tags such as < P > and < BR >.
2. HTML code does not differentiate between capitals and lowercase.
Your tags can be typed either way and they'll still work no matter what.
3. HTML doesn't recognize Smart Quotes- those curly quote marks that
Word and other word processing programs like to convert your straight
quotes (or inch marks) into when you least expect it. HTML also doesn't
recognize "curly" apostrophes (as opposed to straight ones, or
footmarks). If you use these in your web documents, the computer will
interpret them as code and fill your web page with gibberish. So DON'T
USE SMART QUOTES OR CURVED APOSTROPHES!
Creating a Text Document: the Basis for Your Web Page
Start a new file in your text program such as Notepad, then save it
with the .html extension. For example, you might name your file, "myfirstwebpage.html".
Later, after you've entered your code into the text program, view the
page as it will appear on the web by using a web browser such as
Explorer or Netscape. Click File>Open, and then enter the name of
your file. Viola! There's the web page that YOU created! The great thing
about this feature is that you can keep on saving your text file and
refreshing the browser page to track your progress.
Keep in mind that the pages you create and save as .html files won't
be available for viewing on the internet until you publish them. This is
done by purchasing a web hosting package through one of the major web
hosting companies; for example, GoDaddy.com. You're required to
"rent a space" for each web domain you own. But that's a topic
for another article entirely.
Now comes the fun part: uncovering the "secret" to HTML!
HTML is logic-based; and for those of us who love a good logic puzzle,
this is truly a beautiful thing.
HTML Tags at Work
In viewing the source of web pages, you may have noticed a lot of
these things: < >. They're called HTML tags, and they're what the
computer uses to interpret the HTML code.
NOTE: in this article I had to add spaces to all of my HTML tags so
that I could display them without actually having them work. There are
two HTML tricks to actually "shutting off" HTML tags, but
neither of them function properly in this submission box.
The HTML tags shown here will display like so: < FAKE TAG > but
in reality you're supposed to type them like so:
<FAKE TAG>.
Moving along, a friend of mine describes HTML tags as "on/off
switches." An easy example which you may be well-familiar with, is
the Bold command. To "turn on" Bold, type < B > (but
with no spaces). All of the text that comes after the Bold tag, will
then be Bolded. To "turn off" the bold characteristic, type
< /B >. Any text that comes after the "bold off" tag
will unbolded.
It's worth mentioning that in all cases, all text that falls between
an "on" or "off" HTML tag will take on the
characteristic of that tag descriptor. How much text can you put in
between two HTML tags? As much or as little as you want. That means, you
can use just a couple of HTML tags to design paragraphs and paragraphs
of text.
What are some other HTML tags that web designers frequently use?
< I > and < /I > (for italics) < U > and < /U
> (for underline) < BR > (to create a single line break).
In most but not all cases, if you activate an HTML tag by enclosing
it in these: < >s, you must also deactivate it at some point, as
in < I > and < /I > for italics shown above. An exception to
this rule is < P >, or paragraph separator tags, and < BR >
or line breaks.
Specifying Multiple Text Characteristics Within a Single HTML Tag
HTML tags work in different ways, depending on the aspect of the
design they're controlling. As I mentioned above, you can control all
elements of web design via HTML code—page separation, text formatting,
image placement, design layout, and hyperlink insertion. For this
reason, one HTML tag can include multiple variables. This sounds a lot
trickier than it is.
For example, a tag with multiple variables enclosed all in one of
these: < >, can be used to format text. An equals (=) sign is used
to specify multiple characteristics within a single HTML tag. To tag a
section of text for font specs, begin with:
< FONT FACE=
Using no spaces after the equals (=) sign, type your font name in
quotes, as so: "arial". You can also specify the size and
color here. In the same tag that says to close. Your font tag will now
look like this:
< FONT FACE="arial" SIZE="2" > (but with no
end spaces).
If you wanted to, you could also include a color for the text within
that tag. The color is entered in the same way as the font face and
size, and is named within its own set of quotation marks either in a
basic name such as "black" or "red", or a 6-digit
numerical code that begins with a number sign.
So, an HTML tag that designates a paragraph typed in Arial font at
the 2nd smallest size of type, in the color black, would look like this:
< FONT FACE="arial SIZE="2" COLOR="black"
>
All of the type that came after this HTML tag would take on the
characteristics above. Once you wanted to "shut off" the font
characteristics of that blurb of text, you would type the tag < /FONT
>.
Using HTML Tags to Add Images to Your Web Page
Now suppose you wanted to add an image to your webpage. And let's
assume the image was already located in the folder of your website where
images are stored. In order to make the image appear in your NEW web
page, you need:
1. the complete web address of your website (such as http://www.wordfeeder.com),
2. the folder (or subdirectory) on your server where images are kept,
and
3. the file name of the image (ends in .jpg).
The HTML code used to "pick up" an image from a source is
IMG SRC. As always, it belongs inside those handy bracket-things. So
your tag would begin:
< IMG SRC=
Without typing any spaces before or after the = (equals) sign, you'd
then paste the URL of where the image is located (as explained in
examples 1, 2 and 3 above), and follow with the filename and .jpg
ending. I'll illustrate this with an example from my own web collection
of images:
< IMG SRC="http://www.wordfeeder.com/ sitebuildercontent/sitebuilderpictures/wordfeederlogox.jpg"
>
By typing that HTML tag with the specific web address and folder
information/filename within quotation marks, the computer knows the
origin of the image, and will then "hyperlink it" into your
web page.
If you're ever unsure of the filepath of an image you need, go to the
webpage where it's located and then right-click the image. Under
"properties", you'll find the complete URL path that must be
typed in between the two quotation marks that fall inside your Image
Source tag.
Note: you do not need to "shut off" an image tag.
You can also include multiple variables within a single image tag.
For example, if you wanted to left-align the above image, you'd edit the
above tag to look like this:
< IMG SRC="http://www.wordfeeder.com/
sitebuildercontent/sitebuilderpictures/wordfeederlogox.jpg"
ALIGN=left >
Hyperlink Tags for Email and Website Addresses
Ever wonder how webmasters create live links? A live link might say
something like, "Click here for more info!" and then when you
click there, you're suddenly transported to a new web page. A live link
is simply type covering a website address. Check it out:
< A HREF="http://wordfeeder.com" >Visit Wordfeeder
for more info!< /A >
That's HTML code for "hyperlinked text". It looks weird,
but think about it this way. The first part in that's enclosed in these:
< >, is what turns on the "make the following words into a
link that leads to the address I am typing here" function. The end
tag, < /A > is what "shuts off" the "hypertext
linking" feature and will then let you resume typing in normal,
unlinked text.
As you can see, by typing a few simple HTML tags, you can create some
pretty amazing things. This article is just the tip of the iceberg. I
hope that the explanations and examples shown have at least provided a
basic understanding of HTML for you. A great way to learn is by
"studying" other people's web page code from the
View>Source window. You practice by copying their HTML code into your
own fake pages, and filling in the "meat" between their
"on" and "off" tags with text and images that suit
your own purposes. But be careful. If you paste HTML incorrectly, you
can totally wreck and corrupt your document.
For folks who want to get into serious design, I highly recommend
that you buy a comprehensive HTML guide. Once you get the hang of HTML,
there's no telling what you can create!
|
