Web Page Magic
by Mike Durant
June/July, 2008
One of the significant ‘perks' of your IBM Membership that many people may have overlooked is the free ‘build your own' Member Website package that you can place on the World Wide Web. This is a chance for you to have a website of your very own - and at no cost! You can use it however you see fit. You can set up a site to extol your virtuosity as a magician. You can use it to showcase your local IBM ring and with very little work you can do both. Our Portal Wizards have made it so easy to do you will be amazed. You can take a look at some of the example sites that people have created by clicking the ‘Member Pages' link on the left hand side of any page on the IBM site, http://www.magician.org/. This article will tell you exactly how to do it. (read more...)
You can print this entire article out and follow along with the instructions or you open up another browser window and take a look. Click Here.
I'll wait... You will notice that there are a lot of sites listed and that they are listed in alphabetical order. The part you are seeing here is the "Site Title". You will have to come up with one for your ‘site', so let's take a look at what others have done.
Many people are using their names. That is a good choice. If you have a ‘Stage Name' or ‘Show Name', that is also a good choice. That way someone looking for you can more easily find your site. For example, if you look waaayyyy down the list you will see my page listed, MikeD. The thing is that someone wanting to find me would not likely go to the IBM site, click for Member pages and then search down it for my name. Instead they would probably go to Google or some other search engine and put ‘miked magic' into the search box. On Google I am the 4th item listed.
Now look at the top of the member pages list again. Notice that ‘Amazing' and ‘Abracadabra' show up early on the member page list, but you would never find their pages using a search engine (Yahoo, Google, etc...) since they would most likely not show up until page 37 or later. If someone is looking for the magician named MikeD, they are much more likely to put ‘miked' in the search than ‘amazing' or ‘abracadabra'. And as much as I love our new portal site, most people looking for me are more likely to use a search engine than to come to the IBM site and wander into my site on the Member Pages list.
PLEASE NOTE: You will also see that some people are doing silly things to get their sites listed at the top of the Member Pages list by including spaces and dollar signs. Those sites will fare even worse with search engines. You may be tops on the Portal List but you will be lucky if you ever show-up in the search engines. And, isn't this the whole idea of having a site so people can find out about you? So spend a bit of time thinking about how you hope to use your site and come up with a ‘Site Name' that will work well for you.
The other piece of this that is related to the Site Title is the Site Name. The Site Name is what is used to make the URL for your site. Your Site Name must be unique. Your Site Name cannot have spaces or punctuation in it. I should only contain just letters and numbers. One last limitation on the Site Name is that it is all lower case ... no matter what you type in. Now for me it was simple, my Site Name is the same as my Site Title, ‘miked'. Notice - no capital letters. This is how my site is referenced. If I want to send someone to my site, I tell them that the URL is:
http://www.magician.org/member/miked
But what if you have a more ‘traditional' Title like ... oh, say ... ‘Adrian Fox' (to pick someone near the top and therefore easy to find)? Well his Title is ‘Adrian Fox' and his Site Name is ‘adrianfox' (no spaces, no capitals, no punctuation), which makes his URL:
http://www.magician.org/member/adrianfox
Next, let's look at some of the basics about the site that you can create.
The good news is that you do not need to know ‘HTML' to build your site. You might have seen that acronym tossed around when is comes to web sites. The initials stand for "Hyper Text Markup Language" and it is the ‘language' of the World Wide Web. It can be pretty daunting if you have never done programming before. Thankfully, most of the work is done in a series of check boxes, radio buttons and the like. But, because of that simplicity there are some limits to what you can do with your pages. We will talk about that in a bit. Let's begin by talking about some of the basic features.
First, you are limited to six pages. There are three pre-labeled pages - ‘Home', ‘About' and ‘Contact'. These are the main ones that most people will be interested in and their ‘title' is hard coded. The other three pages default to ‘Newsletter', ‘Order' and ‘New', but you can change those to meet your specific needs. For example, you may want to put up a page for your local IBM Ring.
You can upload pictures to your site. That is the good news. In the bad news department, you are limited to one picture of 2 megabytes or less on each page. You can work around that 1 picture limit to an extent, however. I will give you a couple of ideas a bit further down in this article.
Be careful using this technique, though. You can easily exceed the 2 meg limit if you are not careful. And with a 2 meg limit, you can easily end up with something that looks ‘busy' or indistinct if the ‘details' in the original pictures become too small to resolve. KISS is probably the best advice I can give, especially for your initial efforts. Once you have a site up, you can more easily see how things look before you begin your subsequent experiments.
There is one last thing that you will need to do before you can set up your site. You will need a valid ‘login' for our site. That is a simple process but you need to have a valid and current membership in order to register. If you have not registered yet, you can click on the ‘Activate I.B.M. Account link on the right hand side of the main page. You enter your IBM member number and enter an email address where you want your login information sent and that's it. You will receive an email that has all the information that you need to log in.
THE REAL WORK
OK ... while you are waiting for your registration email to arrive, take a few moments to decide on your Site Name, a Site Title, make a few notes, collect your images and when you have everything ready, we can get down to actually creating your site.
Go to the main IBM page ‘www.magician.org' and ‘log in'. The User Login area is on the right side of the main page just above the ‘Activate' link we were just talking about. When you are successfully logged in the "User Login" note changes to "Logged In" and you will see your name just below. Now lets go set up your pages!
Along the left side of the Portal Home Page is a list of links to other pages. Scroll down to the ‘Members' section and look for the link titled ‘Home Page Setup' and click on that. The link will take you to an ‘introduction' page that will explain a bit of the background on the project. It is interesting, but if you are in a hurry to get started, click on the "Click Here to Create or Edit You Site" link to get started.
OK ... don't panic. I know it looks a bit overwhelming, but it really is fairly straight forward. Starting at the top, you have the Site Name and Title. We talked about those earlier. Just enter the Site Name you selected (remember that is the one without spaces in lower case) and the Title into the first two boxes.
Next you can select a color for the text of the title. That is as simple as selecting the name of the color from a drop down list. But think a bit ahead here. It has to be readable with the ‘Page Color' that you will select in just a minute.
Just below the title, is the ‘Slogan' and its text color. This can be any catchy phrase or the like that suits your fancy. In my case, I kept that simple, too and just typed in ‘Magican', but it can also be blank if you like. Please keep in mind that you can always go back and ‘fiddle' these things after you see what they look like, so don't worry too much here.
I mentioned the page color; select that next along with the color for all the text that you will be adding later on and the color for links. So far so good? Now you have to select the graphic for your buttons. Just check the ‘Example Site Diagram' to see where the buttons go. Click on the style you like and select a text color that will make the labels easy to read.
The next item controls how your text (you will enter that in a bit) will be appear on the page. You can have the system make each paragraph you type have a bullet beside it or you can leave the bullets off. Click on the check box if you want to see bullets. Leave it blank if you don't want them. Of course if you decided you want bullets, you have to tell the system what color you would like them to be. I decided to use yellow buttons for my paragraphs just because I could <g>
Now you get to prove to the world how well or as in my case how badly, the camera treats you. You can link in a picture for each page ... or not. The Home Page picture is the first one that folks will see on your site. You can leave pictures off the other pages, use the same picture on all pages or use a different picture on each page. I ended up with pictures for the Home, About and Contact pages. But clearly I need to find a better home page photo.
Because the "Links" area is almost a required thing for a website, the Site Builder made that easy for you. This "links" section allows up to eight links to sites you want to share. These links show up on the left side of every page on your site ... a bit like the menu items on the left side of the IBM site.
The first two links, to the IBM and the Ring 2100 home pages, are as simple as clicking a check box. And if links to the I.B.M and Ring 2100 sites are not enough, you can add up to 6 additional links. They are a bit more work since you have to supply the URL address and the text for the link. Since I am a proud member of the Academy of Magical Arts, for example, I also added a link to the Magic Castle to my site. In this case, I had to copy the URL, "http://www.magiccastle.com/" into the "link 1" box and add a description, "The World Famous Magic Castle" into the "Link Title 1" box. The easiest way to do the URL is to go to the site with your browser. When you are there, you can ‘copy' the URL right out of the address box on your browser and ‘paste' it into the Link box. Not only is it easy, it prevents typing mistakes.
There is another way to add links to your site, but that is a bit more involved, so I will save that discussion for later in the article.
The Contact page information is next. It's not much use to have a great page if folks can't get in touch with you! You can put as little or as much info as you want to be seen on the World Wide Web.
Now you have to get creative. Remember all those images you linked in above, well now you have to add text to those pages if you want them to educate the viewer. Now you can see why I only added a few pictures. I have to add text to each of them. But it is not as bad as it seems. And just a reminder, you can change it any time you think of something better to say. It helps to have a word processor for this. It will ‘chek yer spehlling fer wun thng'.
Now just copy and past that text into the pages and click on the submit button at the bottom. That is all it takes and you are done with your simple page. If you have all your pictures together and text typed up in your word processor, you can create a good simple site in just 5 to 10 minutes. Not bad.
But maybe you want to do a bit more. Now that you have the basics under your control, lets talk about some things that you can do to ‘spice' things up a bit. Remember when I said you don't need to know any HTML to build your site? Well while that is true, we just did that, it turns out that you can embed some simple ... emphasis on the ‘simple' part ... HTML in your pages to give it a some character.
Don't worry. This has nothing to do with the dirty details of building a site. We are just going to look at some things that you can use to enhance the areas where you entering text. But I do want to give you a bit of background in the hopes that it will help this all makes sense and so be easier to remember.
The basic 'unit' of HTML is the ‘tag'. Tags tell the ‘rendering engine' (the rendering engine is the heart of Internet Explorer and Fire Fox and every other web browser out there) what to do with the information it gets. Think of it this way, the web server that is hosting the site sends a ‘stream' of characters from the site to your browser where the rendering engine (RE) in your browser has to figure out what to do with it all.
Now when the RE encounters a ‘tag', it knows that it has to change what it is doing. A ‘tag' is just a special sequence of characters. Tags are ‘delimited' (that is surrounded) by angle brackets like this: <tag>. Seems pretty simple, doesn't it. And it really =is= that simple for the things we will be using. One more thing about tags is that many of them occur in pairs. The first one tells the RE to begin or ‘turn on' something, the second one ends, or ‘closes' the thing. Hopefully this simple example will show you what I mean.
One thing that you might want to do is to ‘highlight' your name when it appears in the text that you are creating so that it stands out. One way to do that would be to make your name ‘bold' and ‘italicized'. It turns out that the tags to do that are pretty simple because, as you might expect, is something that is done quite often. So to tell the RE to ‘render' your name in the ‘bold' and ‘italics' font, you place the ‘bold' tag <b> followed by the italics tag <i> just to the left of the text, in this case your name. But unless you tell it to stop, everything after will also be bold and italic, so you have to "close" those two tags. In almost every case, the ‘close' tag is the same as the original tag, but with a ‘slash'. So the close bold tag is </b> and end italics you would use </i>.
Putting all that together we end up with something like this:
To get more information on <b><i>Your Name Here</i></b> give us a call
In that example "Your Name Here " will be in the bold, italics version of the current font.
Hopefully that seems simple to you and yet, just that little thing can make your pages seem more interesting. And you can do other things to your text besides just bold and italics. You can ‘adjust' the font size to something larger or smaller than the current font. This is only a little more complicated than the previous example. The basic tag pair look like this: <font size=+1> </font> The text between the two fonts will be one size bigger than the rest of the text. There are several sizes that you can select. They range from +6 for the largest to -6 for the smallest. However, depending on the fonts made available, Some of those may not be available. And from an aesthetic perspective, you are probably best served by limiting your ‘explorations' of size to plus or minus 2.
Another ‘fun' modification you can ‘play with is color. Because it changes the font, it uses a similar tag pair, <font color=xxxxxx> </font> where ‘xxxxxx' is a "magic number" that becomes a color based on very arcane rules. Black is ‘000000' and white is ‘ffffff'. Rather than try to list all the possible colors (that would be a book in itself), here is a website that has a nice selection of 140 colors with their codes: http://www.htmlgoodies.com/tutorials/colors/article.php/3478921
You can also combine several tags and, for example, our example might look like this:
To get more information on <font size=+1 color=ff0000><b><i>Your Name Here</i></b></font> give us a call
In that example, "Your Name Here" will be on size larger, bold, italicized and red.
Lets leave fonts and look at other things you can do to make things stand out. One of the most helpful in this case, I think, is the ‘list' command. There are basically two types of lists, bullet lists and numbered lists. They are structurally almost identical. The tag pair for a bullet list is <ul> </ul> (it is an Un-number List, if that helps you to remember the ul) and for the numbered list use <ol> </ol> (the mnemonic here is ‘ordered list' as in numerical order). Now those tag pairs surround your list. To tell the RE where each new list item begins, you use the ‘mono' <li> tag. <li> is one of the tags that does not have a closing partner. Here is an example of an un-numbered (bullet) list:
<ul><li>He is suave<li>He is debonair<li>He is magical</ul>
Now I showed it this way to point out something that is often confusing to people. HTML does not necessarily recognize the line breaks in the text you send. That is because HTML is a stream of characters and where the line break in the stream is located might not have anything to do with where text will wrap in the world of resizable windows. I'll get a bit more into that in a moment. But first, let me show you what the above would (sort of) look like when it was rendered.
- He is suave
- He is debonair
- He is magical
Now getting back to the problem of REs not paying attention to the line breaks in your text. To tell the RE that you know what you are doing and you want a line to end at a specific place, you can use a couple of ‘mono' tags to help format your text. There is the <br> to signal a line BReak and <p> to start a new Paragraph.
I would like to mention one last tag pair for text formatting, that is the <center> </center> pair that will cause all the text between them to be centered in the current ‘frame'. That is the sort of thing you might use for a "headline" or the like, typically something fairly short. Long paragraphs of ‘centered' text can be difficult to read.
The last two tags I want to talk about at the Web Link and the Email link since I can well imagine that you might want to include those in your site. The "Web Link" is what you use to "link" to another page, even another site. The "Email Link" is an easy way for your visitors to send you an email, eliminating the possibility of their mis-typing your email address. These are the tags make a ‘clickable link' on your site. You use the ‘href' or ‘Hypertext REFerence' tag pair for both of the links we will show here. Like the font color and size examples above they are very similar in structure.
The basic tag pair looks like this: <a href="some-link">some text</a>
This is the most complicated tag we will be looking at, so lets go through it in some detail.
First, the difference between the two types of links is in what you enter in place of "some-link". But lets talk about the "some text" part first since that is the same for both and is straight forward. ‘Some text' is what the visitor to your site will see as the (often) blue underlined text that they can click on to either go to the linked site or to initiate an email to the embedded email address. So how does the RE know which is which? That is controlled by that you put in ‘some-link'.
If you want an email link, you tell it so like this "mailto:Youraddy@yourisp.com" in place of "some-link" and then when a visitor to your page clicks on ‘some text', his email client will start a message addressed to you. For me it might look like this:
To send me an email, click <a href="mailto:miked@magician.org">here</a>
How simple is that? To link to your favorite website, just replace ‘some-link' with the appropriate website URL. For example, on my ‘About' pate you will notice that I am involved with an internet radio station called "The World of Blues".. It looks like this:
<a href="http://theworldofblues.com">The World of Blues</a>
If you check out the site I built, you will see almost all of these features used. Have fun and experiment. The worst that can happen is that you will have to edit your site again to fix something you didn't like. There are also lots of sites that can help you learn more. http://www.htmlgoodies.com/ has a nice tutorial and other references besides the color chart. Check out your local public library for a copy of HTML for Dummies. Despite the name, it really is a well written and understandable book.
