If u have anything not too sure, Mail me by this form
If you are having trouble understanding what your HTML should look like, you can look at the HTML from any page on the internet, and try to shape your own code after that page. This will be really helpful if you are having trouble figuring out where to put your tags, what your tags should look like, where your attributes should go, or anything like that. Netscape users can view the HTML code of any given page by clicking on the "View" menu at the top of the browser, and then choosing "Page Source." This will open an ugly gray window with code inside of it. Internet Explorer, for all its faults, is much better to look at code with, because it opens the HTML in Notepad, where you can easily edit it. To view a page's source in Explorer, right click on the page, making sure not to right-click any pictures or anything, and choose "View Source." I don't know if Mac users can get Explorer, but if by chance there is a Mac version, you right-mouse-button-deprived people can get the View Source option from the View menu, I believe, or if I'm wrong on that count, it's the Edit menu.
What are tags and how do I use them?
HTML is a formatting language that uses "tags" to define the look of the page. You need tags to put in a picture, to underline something, to change the font, to make text bigger, to make a new paragraph... tags are very important! Most tags come in pairs: a beginning tag and an ending tag. The beginning tag tells your browser where to start using an effect, and the ending tag tells it when to stop. Think of them like on and off buttons. There are a few tags that don't have end tags (like the ![]()
tag), but we'll get to those later. For now, just remember that you want to sandwich your tags around the words you want them to affect. Put the beginning tag before the thing you want to change, and the ending tag after.
Tags are pretty easily recognizable by the < and > around them. Anything in between those is a tag.
Some tags can take attributes... this means you have a little bit of control over what the tag does. A good example is the
tag. It takes the attributes background, bgcolor, alink (link being clicked on), vlink (visited link), link (unvisited link), and text. There might be others, but just worry about these for starters. To use an attribute, just insert it in the tag, followed by an = and the value of your attribute in quotation marks. Sound confusing? You'll get the hang of it. Take a look at this body tag:
BACKGROUND="smiley.jpg" BGCOLOR="white" LINK="red">
BACKGROUND, BGCOLOR, and LINK are all attributes. The value of each attribute is what you see between the quotes. The first attribute, BACKGROUND, tells the browser to use smiley.jpg for the background image. The second attribute says that the background color, in case the browser can't load the background image, should be white. You can use just a background color, or just a background image, but I like to have both just in case. The third tag says that all unvisited links should be red. If you don't use LINK, ALINK, and VLINK to specify colors, they will show up as the browser's default colors (usually red for alink, blue for link, and purple for vlink). If you don't define a background color or image, it will also use the default (white for MSIE I think and grey for Netscape). Attributes (for the most part) are optional, but they are very useful for "tweaking" your tags. Also, and this is important... only beginning tags may take attributes. So without further ado, some tag definitions are coming your way.
For Starters...
There are a few things that most pages have... you may find that your neopets page is the exception to the rule, but you can most definitely put these things in!
| Tag |
Usage |
| <HTML> </HTML> | These tell the browser, "hey! This page is in HTML!" and they go around the entire page |
| <HEAD> </HEAD> | These go directly after the first HTML tag, and they tell the browser that there are instructions like the title and keywords between these tags. |
| <TITLE> </TITLE> | These go between the HEAD tags. They tell the browser what to put in the tippy-top title bar. |
| <BODY> </BODY> | These are really important! They tell the browser "Hey! This goes in the main window!" -- The first of these tags should appear after the last HEAD tag, and the last should appear before the last HTML tag... everything that appears on your page should go between them. However, I do not recommend using this in shop descriptions. The BODY tag is only for pages where you have control over the ENTIRE page. The first body tag is also where you declare some other things... |
| <BODY> - cont | Inside the body tag, you have some attributes... mainly bgcolor (the background color), background (the background image, if you have one, text (over the entire page) and the "links"... alink, link, and vlink. These will all have colors inside their quotes.
|
Text Stuff
Words are the most important things on your page! But they don't have to be plain-jane like these words are. You can make them bold, funny colored, underlined, italic, smaller, bigger... anything you want, really. Just remember, to use an effect on text, you have to sandwich the stuff you want affected...
| Tag |
Usage |
| <B> </B> | This makes things bold |
| <U> </U> | This underlines things.
|
| <I> </I> | You guessed it, this italicizes things |
| <FONT> </FONT> | This changes color, size, and font. Attributes are COLOR, SIZE, and FACE. Sizes are: one, two, three, four, five, and so on. Faces are the names of fonts, like Arial, Times New Roman, Courier New... but the person viewing your page can't see the fonts if they don't have them on their computer, so it's good to stick to basics. Colors are self-explanatory (red, blue, etc etc. There are weird ones like salmon and darkgoldenrod, but I shall list those later). |
| <P> </P> | This sets a paragraph apart from everything else by double spacing before it. |
| <BR> | This one doesn't have an end tag... it just sticks in a line break. |
| <BLOCKQUOTE> </BLOCKQUOTE> | This is like the indent further key on a word processor. |
Picture Stuff
To link to a picture on any site, you can right click it, and then choose either Copy Image Location or Properties. (Mac users, try the File menu for Properties or the Edit menu for Copy Image Location). If you have chosen Copy Image Location, you can then paste it right into your IMG tag, where the address goes. For Properties, it should show you the URL of the image in the little popup box it gives you. Use that in the IMG tag.
By the way, background images will be done the same way, except that instead of the IMG tag, you'll use the BACKGROUND attribute of the BODY tag, which is explained in the basic section of the page. Background images will automatically tile.
Maybe I should just get on with the tags, and then you'll see what I mean. There's only one really important picture tag, but it has plenty of attributes! If you have trouble figuring out where all the attributes should go for a picture, take a look at the sample code below:
For pictures hosted on the same server as your page:
<IMG SRC="raptor.jpg" HEIGHT="30" WIDTH="25" ALT="Scary dinosaurs!" ALIGN="left">
For pictures hosted on a different server:
<IMG SRC="http://www.dinos.com/images/raptor.jpg" HEIGHT="30" WIDTH="25" ALT="Scary dinosaurs!" ALIGN="left">
| Tag |
Usage |
| <IMG> | This is another one of those ones with no end tag. IMG takes the attributes SRC (the location, like "http://www.neopets.com/images/sidebutton.gif" or "PHOTO" with a pound(#) sign before it... this is not an optional attribute!), ALT (this pops up text for non-image browsers, and also puts text in those mouseover boxes for MSIE), BORDER (makes a border around the image if it is a link... make sure to set it to 0 if you don't want ugly borders!), and ALIGN (this tells the image to move all the way to the left or all the way to the right. Text will not wrap around the image unless you align it left or right!) |
Links - Navigation at its finest... sort of
Well, without links, no one would get anywhere, right? You can put either pictures OR text in link tags, and whatever you put in there will provide your readers with a ticket out of there. Once again, there's only one tag. This one can get hairy, so for help, look at the sample below:
For html links on the same server:
<A HREF="aboutme.html">About me</A>
For html links on a different server:
<A HREF="http://www.yahoo.com">Yahoo!</A>
For email links:
<A HREF="mailto:[email protected]">Email me!</A>
| Tag |
Usage |
| <A> </A> | A does have an end tag, and whatever is between them will be linked... this includes silly things like spaces, so be careful. A takes the attribute HREF -- the location, which should be usually either http://blahblah for web links or mailto:[email protected] for email links. |
Now enough with The Basics, lets proceed to Advance HTML!