|
A beginner’s tutorial on HTML
and its practical applications |
|
Introduction Text Links Images Backgrounds Tables Colors Utilities and other tips |
|
HTML Basics
This tutorial will give you a simple working knowledge of the most basic skills in HTML. In time, a more advanced tutorial may become available. Until then, information on HTML can be found in various locations including Echoecho.com, click here. A few tips before we begin. When writing HTML coding for your profile, it's always a good idea to start writing it on your hard drive, save it, then open it with your browser to check if it's correct. This is pretty simple. Just open notepad, enter your coding, save it as an .html file (just replace the .txt with .html when saving) then just open the file up. It should be recognized by your browser and open it instead of notepad. To open an HTML file with notepad, just right click on the file, select 'open with' and choose notepad. The good thing about doing this on your own hard drive is it saves time. If you have both view of the file open at once, you can alter the code, save, switch to the other window, hit refresh, and your changes show up. The only problem you may encounter is text wrapping issues. I solve this by copying everything into Word once the coding is done and add in whatever text I forgot, then copy it, remove everything from the .txt version and pasting over it. If you find this to be too much work, just stick with the .txt version. A good reason to use a word processor to input your text is to proofread it. Nothing is more embarrassing than having a really awesome looking profile fouled up by bad spelling or grammar, I know, I've had it happen myself. Word comes in real handy with its spelling and grammar tagging system, marking the things IT things don't make sense. You can just ignore the ones you know are HTML tags and arguments (that will come later). The only flaw I can find in doing this is when you put in quotation marks for values in a tag, then copy it to a text document, it may or may not (usually didn’t in my experience) recognize the quotes and therefore mess up your tags. This is easily fixed though. Just highlight one of the incorrect quotation marks, copy it, then use the built in finder (go to edit → find, or in this case, edit → replace) and tell it to replace all the characters it finds that matches that one you put in (using paste, or ctrl-v…something I used a LOT in making this tutorial) with the proper quote, which you enter by just typing in. Another plus by doing this on your computer is when you have the file saved locally, you can make changes there until you're happy with it, then log on and upload quickly so you can get right into the chat. With faster uploads, you can pop in and update before someone has the chance to message you for your attention without you missing it. I can't tell you how many times I've had to update my description and miss a number of PM's because I was in another window. It saves how often you have to apologize for ignoring someone. Something I do that you may or may not want to do is I have a free website (watch for pop-ups and banners UGH!!) where I host my description. That way I can update without actually having to log into the chat, not only that but I can host multiple pictures for my description without worrying about 'hotlinking' issues. Hotlinking for those of you who don't know what it is, is where you have a picture located in one domain while the place you're displaying it is in another domain. Geocities and a number of other sites don't allow this, like my free site. It forced me into what I'm doing now which seems to have worked well minus the ads. Now, sure you can just use Word to create a web page, save it, load it to a site, and link to it from your profile in the chat. That won't make you any less of a person (except to me you little cut-corner!!) BUT...be warned, you'll probably have to go through a lot more formatting with it than you will probably want. Then again, it may be just what you're looking for. Heck, HTML editor programs are a dime a dozen. The thing is, you can't really make an HTML document into what you really want without knowing the ins and outs of it. If w hat you're looking to do is add in a few pictures and resize them to fit, or make your text change from the base color to another color for a line or even just a word or a single letter, then back to the base color, you're better off reading through this to get what you need than using Word or an editor, it's just too much of a hassle otherwise. Now, let's get started with the basic things you need to know. HTML is a simple language to use and understand. The HTML stands for HyperText Markup Language. HyperText as in a link you might include, and Markup Language as in a way of laying out text within a document. You don't really need to know that for coding, but hey, now you know the answer incase you get on "Who Wants to be a Millionaire?" right? The language itself is pretty straightforward, displaying all text minus what is in a "tag". A "tag" is a keyword trapped between two special characters, < and > such as <br>. When the browser sees the <, it reads it as "Oh, I need to follow the instructions listed here." until it gets to the > where it goes "Okay, that's it for the instructions, I need to go back to just printing things out on the screen in the way I've been told to." (those different methods will be explained later) There are two kinds of tags, the open and close tags. Such as in <b>. This starts text in bold. To make text go back to the way it was, use the close tag. In this case it would be </b>. It's as simple as that, like flicking a switch on and off. You just have to remember to close a tag after you open it. There are cases where it's not pertinent but it's always good to do it. Some tags do not require a close tag, like the <br> tag which only inserts a newline break. Just follow the description and examples given to see which ones require a closure...that or just play around with the code until you figure it out, that's always a good way to learn!
There are a number of tags used in HTML but we'll just go over the simplest ones, ones that will more than likely be used by most people. These are listed in no particular order.
These will all be explained in greater detail later on. Most of them you may not use depending on the kind of modification you want, then again, you may want to use them all, it's really up to you. |