Note: This pre-lesson was developed for those who need
some additional HTML training prior to attending an Ultimate SEO Mastery Workshop.
In order to position Web pages in the search engines, you need a
good, basic knowledge of HTML, the "language" of the World Wide Web. You're not
going to be designing complete Web sites yourself, but you will be designing
doorway, or information, pages. Also, you need to know how to make changes to
an HTML document, how to use an HTML editor, and how to add tags that can help
boost your rankings. You need to be able to recognize when a page is using
tables, frames, or JavaScript, and you need to be able to recognize hidden text
and other spamming techniques. You need to know how to use an FTP program as
well.
Before beginning the lessons, we want to show you HTML in
action, so to speak. To make it easier, let's open a new window, so you can
read this information in one window and view the page in another window. If
you're using Netscape, click on File, New, then Navigator Window. If you're
using Internet Explorer, click on File, New, then Window. Keep this page open
in one of the copies, and in the other copy, click on the below URL:
http://www.searchengineworkshops.com
You're now looking at the Web site of Search Engine Workshops.com.
But, this isn't what the engine sees when it visits the site. The engine sees
the "source code" or HTML.
If you're using Netscape, click on View in
the menu bar at the very top of the page, then Page Source. If you're using
Internet Explorer, click on View, then Source.
What you're seeing now
is a "skeleton" of the Web page, which is what the engine sees when it visits
the page. The engine doesn't see the pretty graphics or design--it sees the
source code--the HTML. This is what we'll be learning about in this pre-lesson.
Here's something crucial to keep in mind. The closer to the top of
the page that your important keywords are, the more relevant your Web page will
be to the engines. The more relevant the page is for that keyword search, the
better your rankings will be. Therefore, you need to remember how important it
is to bring all keyword-containing text and tags to the top of the page.
Try to complete assignments #1, #2, and #3 below. If you have
time, work on some of the other assignments, but make sure you finish those
three assignments first.
After completing the tutorials, you can
always refer back to them for more information.
Assignment #1: (important to do)
Take the HTML 4 Rookies Tutorial at this URL:
http://htmlprimer.com
Complete
all 8 lessons. Be sure to visit the HTML Test Lab at the end of each lesson and
practice that lesson's HTML. Then, read over the following information as
well:
Javascript; Cut N Paste Tutorial; META Tags; and HTML Validators
Assignment #2: (important to do)
Find out what HTML editor you have, then practice using it.
What is HTML? HTML stands for HyperText Mark-up Language, and it's the
formatting language used to create pages that can be viewed on the Web. HTML
documents are viewed through a browser, such as Netscape or Internet Explorer.
An HTML editor simply allows you to work with HTML pages. You can also work on
HTML pages through a text editor, like NoteTab Pro.
If you don't have
an HTML editor, go to Stroud's and
download a trial version. Which ones are good? Adobe GoLive and Dreamweaver are
very popular HTML editors. I personally like HotMetal Pro. A lot of people like
FrontPage. Find one that YOU like and get comfortable with it!
Begin practicing by clicking on this page:
http://www.searchengineworkshops.com/articles/submissions.html
Click on File, then Save As. Don't change the name of the file.
Remember the directory where the computer saved the file. Write it down NOW!
Open your HTML editor, and click on File, then Open. Browse until
you find the directory where the above file was saved. Highlight the file,
which will be named "workshops.html." Click on Open, and the file will open in
your HTML editor.
Play with the file. Add words to it, or take words
out. Do whatever you want! When you make a change, click on Preview in Browser
(which may be in your File menu, depending on what HTML editor you're using),
and you'll be able to see what your changes would look like online.
Note from Robin: When I work with HTML, I prefer to view it with "Tags
On" or "HTML Source" because I can see the tags. Many people like to work with
their editor in a WYSIWYG format, which stands for "what you see is what you
get." This format looks no different than a word processing document, and you
won't see any tags. Another format allows you to view the source code, and it's
called HTML Source (again, depending on your HTML editor, it may be worded
slightly differently). In my HTML editor, I can change how I view the page by
clicking on View, then choosing either HTML Source, Tags On, or WYSIWYG.
You will use the HTML Source view frequently when you need to change the
content of various tags, so get familiar with it.
Continue playing
with the editor until you feel comfortable with it. If the editor has a
tutorial, if you have time, please take it. You certainly don't want to feel
frustrated at having to learn a program at the same time that you're learning
HTML or search engine optimization techniques.
Assignment #3: (important to do)
Find out what FTP program you have. What is FTP? FTP
stands for File Transfer Protocol, which is a method for downloading and
uploading files to and from an Internet site. In other words, an FTP program
allows you to transfer files over the Internet. After you work on the pages in
your HTML editor, you'll need to FTP the pages and graphics to your
server. Then, you'll be able to view the pages on the Web.
If you don't
have an FTP program, go to Stroud's and
download a trial version. Which ones are good? CuteFTP and WSFTP are both very
good.
Try to spend some time playing with your FTP program.
Assignment #4: (do if you have time)
Visit Webmonkey's HTML Basics and click on Intro to HTML:
http://hotwired.lycos.com/webmonkey/authoring/html_basics/
As you read each section/lesson in this tutorial, be sure to click on all
hyperlinked words to learn more about that concept. It will take you longer to
do so, but you'll have a much stronger knowledge of HTML when you're finished.
Once you read the first page, click on Learn More, and continue reading from
there.
Click on all of the "Learn More" sections at the bottom of the
page.
Once you're finished with the Intro to HTML, go to this page
and click on Teaching Tool:
http://www.hotwired.com/webmonkey/authoring/html_basics/
When you finish Teaching Tool, continue working through the following
sections:
HTML Cheatsheet; Good Forms; What can <META> Do for
You?
Click on Client-Side Image Maps, but don't spend a lot of time
there. I only want you to be able to recognize when a site is using an image
map, because the search engines have a hard time following them. When using
image maps, it's imperative to include HTML links on the page as well, to give
the engine something to spider when it visits your site.
Next, go to
the following page:
http://www.hotwired.com/webmonkey/authoring/
Study each of these sections in their entirety: Tables, Frames,
Browsers, and Tools. There's no need to go through the remaining sections.
Be sure to study the HTML Cheatsheet:
http://www.hotwired.com/webmonkey/reference/
html_cheatsheet/
Print it out and keep it on your desk!
Assignment #5: (do if you have time)
Visit A Beginner's Guide to to HTML:
http://www.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html
Click on Full-Length Version. If it's easier for you to print out a
copy and work from there, click on Printable Version at the top of the page.
Click on Getting Started and begin to work your way through the
entire tutorial. I realize that some of this will be a duplication of what you
learned before. But, being presented with information in different ways can
help us learn and understand it more.
Assignment #6: (do if you have time)
Visit the HTML Testbed and practice more HTML.
http://www.ash.udel.edu/ash/tutor/html/testbed.html
