HTML Basics
I have found while managing my own web rings that many
prospective members have the same problems with understanding HTML.
Therefore, this page is an attempt to clarify procedures and ease the
installation process of the HTML fragment code used for webring
navigation. Unfortunately, there are far too many different brands of
web page editors out there to begin a tutorial for each and every one
of them. However, the steps described here should offer some guidance
and an explanation of terms. The rest will be up to you to apply them
to your specific brand of editor or web publishing tool.
How to
Copy-n-Paste: This method should work for all
editions of both MS Internet Explorer and Netscape browsers running on
a PC. Mac processes may be slightly different?
- Just place your mouse cursor in front of the text
you want to copy. While holding down the left mouse button, drag
the mouse over the text. The text (code) should now be
highlighted.
- Next, go to the top of the browser where you see
the File, Edit, View, Go, etc...headings. Click on Edit. A menu
will appear ....choose "COPY". (The text has now been
copied to your computer's clipboard).
- Next, go to the page that you want to PASTE the
text (code). Place the mouse cursor where you want the text or
code to go ... usually at the bottom. Go back to the Edit Menu.
This time, choose "Paste". The code should now appear
where you wanted it.
Web Page Editors:
Most editors are termed "WYSIWYG" (What You See Is What
You Get). As you construct your web page, the images and text placed
on your page look almost the same as when the page gets published to
the web. The process works very similar to a word processor. What
happens is that: as you type text and place images on your page, the
editor creates and places the HTML code of your page for you. The
result--You are not required to understand the HTML language to make a
web page. Yet, this HTML source code is what the browser reads to
display the page as you surf the web.
Web Page HTML Source
Code: You may view the source code of any web page
right from your browser.
In Netscape 4+ & MSIE 5.+: Just click VIEW
(at the top of the browser window) then click PAGE SOURCE (on the
Netscape drop down menu) or SOURCE (on the MSIE drop down menu). A new
page or browser window will appear (dependent on your browser
settings) with the code for that page. Give it try right now and you
will see the source code for this page. It may look intimidating at
first, but as you learn what the code means, its easy to master it.
Source Code Mode:
Now, what you need to do is, discover how to access the source code
for your page while working with your page in the editor. Many editors
access the HTML source in a similar manner to the browsers described
above. Sometimes, the "SHOW HTML" may be hidden under the
TOOLS Menu. You will need to view the page source code to properly
install the navigation panel to your page. Otherwise, if your editor
is not in this mode, the raw HTML that you cut and paste will only
show up on your page as just the raw HTML code and that is not very
pretty.
Code Placement:
Most people prefer to have the navigation panel at the bottom of their
page; therefore, these instructions are provided with that in mind.
-
While in page-source view mode, place your cursor
just before the </BODY></HTML> tags. The tags may also
look like this on your page.
</BODY>
</HTML>
In this case, place the cursor just above the </BODY> tag.
-
If you have already copied the chosen HTML Ring
Code from the Ring's HTML Code or Fragment Page to your computer's
memory (ie., clipboard), just paste this code at the insertion
point above or before the </BODY> tag. You should see the
Ring's Code Fragment appear on your source page.
-
Now, if you have not already customized the NAME,
EMAIL Address, & SITE ID# unique to your site, it is time to
make these modifications. The SITE ID # is very important or the
ring code will not work properly. (The instructions for
customizing your panel has already been explained on the Ring's
code/fragment pages.)
-
Editing in the PAGE SOURCE mode in the editor is
very similar to a word processor. Just place the cursor at the
beginning of the text that you want to edit and delete each letter
or character. Then, just type in the new information.
-
You will have to read each line of the Ring's Code
carefully. You will see the
<!--Begin Academia/or Edlinks Fragment--> Tag --notifying
you where to begin searching. Then just edit the text as
described. Remember, edit only the NAME, EMAIL, and Site ID#.
Every little semicolon (;) and <> bracket has a purpose and
must not be deleted. The Rings' Code & Fragment Pages (online)
show the text In Color
that needs to be edited if you need a reference on what to
look for.
-
Once everything above is completed: Just go back
to the regular viewing mode of your editor. You should see the
Ring's Navigation Panel, Bright and Pretty, on your page. Provided
that you have already downloaded the chosen Ring Graphics to your
hard drive (in the same directory as your web page) the graphics
should show up as well. Remember to save your work and you are now
ready to upload your page & graphics to your server.
Saving/Downloading of
Graphics: Position the cursor over
the graphic you want to save. On a PC: Click with the RIGHT mouse
button. A Menu should appear--CHOOSE--"Save Image As..." for
Netscape and "Save Picture As..." for MSIE. A dialog box
(window) will appear with a drop down list at the top. If you click on
the downward arrow, you can choose which directory you would like to
save the file in. Once you have navigated to the proper directory,
click the "SAVE" button. Make sure that you do not change
the file name. MAC users: You should be able to use the same procedure
explained above, however, do not RIGHT click with the mouse. Just hold
the mouse over the graphic and the menu should appear after a few
moments. Problems: See question #4 under the FAQ section.
MS Frontpage Tips:
There are two methods for inserting HTML codes using this editor.
-
The first is easier, but results in a small Yellow
box with a question mark inside it (marking the spot where the
code has been placed) which only shows while viewing the page with
the editor. The actual page viewed in the browser will show the
results of the code (ie., webring navigation panel).
While viewing your page in the Frontpage Editor,
place your mouse cursor where you want the ring fragment to show,
then go to the top of the window where you see the File, Edit,
View...etc., Look for "Insert" and click on it. A dropdown
menu will appear, look for > HTML Markup and click it.
Now, a text box will appear. Just paste the ring's
HTML code in the box and click OK. The code has now been inserted
into the HTML source for your page. You will only see the small
yellow box representing the code as explained above.
- The second method deals with editing the HTML of your page
directly as descibed under "code
placement" above. The problem with Frontpage is that it
incorporates the base (unseen) HTML used from the page the
displayed code came from.
To clean up the code so that it inserts properly, just paste the
code into Windows' Notepad or Wordpad first. The base HTML used will
be stripped from the copied code and appear as originally displayed.
Then just copy the text/code again and insert it where you like
under the HTML view of Frontpage..
WEB TV Members:
Using the Web TV Page Builder just cut and paste the
HTML fragment to your page. (the procedure is similar to the one
described above.) Now, save the graphic to your Page Builder
Scrapbook, just go to go to WebScissors.com. Type in the URL of the
page where the image is at, press enter, and all the images on that
page will appear on the screen. Next, click on the image you want to
save in your scrapbook. Then, when working on your web page, just
download this image from your scrapbook to the page.
For an indepth discussion of graphics for Web-TV users
-- click
here.
Creating Bookmarks:
'Anchors' or 'bookmarks' are specific reference points on a webpage.
This site uses them extensively. Every subheading listed on the left
is a bookmarked URL. To create a bookmark or anchor use your editor to
define a name for the bookmark. Sometimes this feature is available in
your brand of editor on the same menu as creating hyperlinks.
Frontpage hides the 'bookmark' feature under their edit menu. The
following tag will be created for you in the HTML source of your page
<A name="chosenname">Reference Point</A>. Now,
the reference point has an anchor or bookmark for others to easily
find it on the page. To surf to this reference point, you just use the
sites or page address but append the anchor to the end: [www.anywhere.com/mysite/page.html#chosenname]
Email Tags (mailto:)
The purpose of the <A href=mailto:> tag is to allow visitors
surfing your page to easily send electronic mail to a specific person
or mail alias by including the mailto attribute in a hyperlink. The
HTML format is:
<A HREF="mailto:emailinfo@host">Name</a>
For example, enter:
<A HREF="mailto:webringhelp@schoolmarm.org">
Webring Help</a>
Will produce this email link, Webring
Help (When clicked, your email client will open a window that is
already configured to send the email to me). You, of course, will
enter another mail address and Link Name!
------------------
Most HTML code fragments for the Schoolhouse
webrings hosted by RingSurf have been set up to just require the
"name@host.com" when customizing "Your Email
Address" within the codes. Although it doesn't hurt to check and
make sure the rest of the mailto hyperlink is intact as shown
above--especially if the link does not work for some reason.
Helpful Links
HTML
For Beginners
The Mikodocs
Guide to HTML
Site
Editors - This page is focused on installing SSNB code (WebRing
hosted rings). However, you can also use this handy reference for any
HTML editing on pages hosted by these listed services.
