|
|
|
|
HyperText Markup Language is a set of "tags" which are used to describe the layout of text on a web page. The tags or markers typically mark the beginning and end of a layout style or section. The browser software interprets these tags and "renders" the text accordingly. Although you can get real fancy with it, you don't need to. You can make a killer web page with less than a dozen tags if you have something killer to say. In other words "Content Is King". Once you have something to say, HTML can help you say it. There are perhaps 1,000 more HTML tutorials out on the web, just use a search engine to look for HTML Tutorials. I will just cover a few basics here, if you want more details I heartily recommend Joe Barta's tutorials. Additionally, there are perhaps 1,000 tools out on the web that
will help you to make web pages. I recommend that you learn how to do it by hand in a text
editor such as notepad first, so you have a better understanding of what these tools are
doing when they start
Page TagsEvery HTML page is enclosed in a series of tags. <html> You would use these tags on a NORMAL web page, however...Cybertown takes care of these tags for you in your inbox and message board, so DO NOT use them there.
Header TagsThe first tag I will cover is the header tag. It is used for as a sort of title for emphasis at the start of different topics in a web page such as this one. It looks like this... <h1>Your Header1</h1> when the browser sees this, it spits out this... Your Header1You may notice some particular conventions here. Tags are enclosed by angle brackets, there is a beginning and an ending tag, the ending tag starts with a / inside the angle brackets. Simple huh? H1 is the biggest and boldest header, you might imagine that there is a h2, h3, h4, etc... if you do, then you have a good imagination 'cause there are. Header2Header3Header4Header5
Paragraph TagA handy tag to know is the paragraph tag. As you may imagine it is useful to separate out blocks of text into individual paragraphs. It looks like this... <p>This is one whole paragraph of text, yadda, yadda yadda. I have used the paragraph tag extensively throughout this document!</p> When leaving messages in Cybertown, and you are in an inbox that is HTML enabled, you can use the paragraph tag to separate different thoughts or your closing signature from the rest of the text. If you don't use this tag, and the inbox is HTML enabled, the text all wraps around and flows together and is therefore harder to read (i.e one massive block of text).
Hyperlink tagYou may be wondering where is the hyper part of all this hypertext stuff. Well, that comes in when you want to make some text on your page link to some text on some other page. To do that we use an Anchor tag, here is an example... <a href="someotherpage.html">This is where you click to go to some other page (the link)</a>
<a href="../html/someotherpage.html">This is where you click to go to some other page (the link)</a>
The way I have used the link here is what we call a relative link, it looks for someotherpage in the same directory or folder that the original page is in. You can also use what is called an absolute link where you use the fully qualified path to someotherpage, perhaps on a different web server. In other words, it may look like this... <a href="http://philliphansel.org/html/someotherpage.html">This is the link part</a> So there are basically two parts, some clever text which is the link (a trigger), and the place where the link goes to when it is clicked on (the target page). That's all there is to it! See, it is easy if you know how!
Image TagHow do I put a picture into all of this? Well, you use an image tag. It is slightly different as it does not have beginning and ending parts, it is all just one statement. Also you may notice that it says IMG (image) and SRC (source), don't ask me why two fields are needed when it seems like one will do. It looks like this... <img src="smallfacet.gif"> when the browser gets a
hold of it, it looks like this... As before, you can use a fully qualified path to a file on a different server... <img src="http://members.tripod.com/~mr_phillip/smallfacet.gif">
<a href="http://www.cybertown.com"><img src="cbtlogom.jpg"></a>
Miscellaneous TagsOK, that covers headers, paragraphs, links, and images. You can make a good web page with those few tags. Here are some others that may come in handy... An unordered list (bulleted list) <ul> Looks like this...
An ordered list (numbered list) <ol> Looks like this...
One handy tag is <br> it gives you a "line break" without the extra added space that the paragraph tag give you. Another handy tag is <hr> it gives you a horizontal rule or dividing line useful to separate different blocks of text. <strong>bold or strong</strong> bold or strong <em>italic or emphasis</em> italic or emphasis <big>Larger Font</big> Larger Font You can also say <font size=+1>Larger Font</font> Larger Font <small>smaller font</small> smaller font You can also say <font size=-1>Smaller font</font> Smaller font While we are messing with the fonts, I might as well show you how to change the color, it looks like this... <font color="RED">change the color</font> Most browsers support words for the primary colors such as green, blue, yellow, etc... You could also use the hexadecimal equivalent such as #FF0000, but that is beyond the scope of this document.
Well, that covers the basics. I hope you can now use a little HTML to prettify your inbox/message box at Cybertown. As I said at the start of this page, there are many other sources of information on the web that will help you to learn more of the art of HTML. Please feel free to use a search engine such as Google or Yahoo! to find them and learn more. Additionally, please see my page on CTML [Cybertown Markup Language]. Cybertown had to develop their own limited set of tags or wrappers to keep people from doing some things with HTML that cause errors in Cybertown. You may notice that I have used some tricks in the writing of this page. The tags appear, but the browser does not interpret them. The makers of HTML were indeed wise folks. |
|
|
