HTML Guide

Do you ever wish you could make your own website? This guide is for those of you who, like me, may not know much HTML (I didn't until I began working with websites). This is just some of the most basic changes you can make to your website, text size, color, and inserting images and links. The headings are in large sizes, red font; if you want to learn about a particular category, this is what they are titled:
Colors and Fonts
Sizes
Spacing
Format Styles
Links
Images
Alignment
Scroll Boxes
Bullets/Numbering
So if you know what category you want to go to, press Ctrl+F, type the category name into the box, and you should be taken right to it (the word may be mentioned before the category, so you may have to hit enter a few times before it jumps to the heading you want)

Colors and fonts: All colors have a code number. For example, the code for the light blue I used right here is #99CCFF. To change the color of your text, all you have to do is put in something like this (the only space would be between "font" and "color" if you were really typing it on a web page:

(this signifies the start of a change in font format or inserting a link or image) so that it ends up looking like (I have to put spaces in between the parts so that it shows up, if you were really trying to change the font, the only space would be between "font" and "color") this: 
To change the font itself, you use the same sort of code, which is (the only space would be between "font" and "name": , and to end that font, you use the end font code again, .
So if I wanted to change this font to Jokewood, I would put (again, the only space would really be between "font" and "name" [text here] .

Sizes: Notice how the type in parentheses is a different size from what I typed outside of them? To make the font sizes different, you do the same thing, except it's < font size (the word "size" instead of "color") = " [font size] ". The font sizes only include one, two, three, four, five, six, and seven. (Each word is the size of the font it describes, so that you can see which size you like best ^_^), so that if you wanted to make something in font size seven it would look like this (without spaces): . If you want to change both size and color, you can put them in the same brackets: and both will be altered.

Format styles: To make text bold, italics, and/or underlined, you use brackets again: without spaces makes the font look like this. When you want to end the bold font, you make more brackets after all the text you want bold like this: . The code for underlined font is and the code to end it is . For italics you would put to start and to end it. The slash basically means "end this type of font". When you want to end a type of font (ends both size and color), you would make this after the font that you want in that color, type, or both:
For the basic colors, you can just type their names into the code (highlight to read the darker colors' names if you need to):
white,
black,
blue,
purple,
green,
etc.
So, let's say I wanted to make this font blue, size 6. I would first put, without spaces, . (It would look like this.) I'm going to do a light purple so that it's easier to read, how's this? So when I want to go back to my default font, I put at the end of this , and Voila! Back to my default light blue :)

Spacing: Notice how I am able to make spaces between each lines, or jump certain lines down below the ones above them, even if they haven't finished the line yet? To skip a line in between two words, phrases, paragraphs, bits of text, etc.,
like
this
you simply put (no spaces) ; the "p" signifies "paragraph", so you are telling the computer and website to start a new paragraph, with an extra empty line in between. It is very useful and sometimes makes text much easier to read rather than having it all squashed together :) To start a new line but not skip a line

like
this,
you type without spaces , which I think signifies "line break". But whatever it symbolizes, it enables you to skip a line without an empty space, should you need to.

Links: to make a link, you type, in front of what you want the link word to say, (the only space if you were typing it on a real webpage would be between "a" and "href", < a href = " [web url to link to] " >. So, if I wanted to link to any web page, I would type < a href = " URL here " >, and whatever I wanted the link itself to say, for example "click here", I would type right after that. Here's an example (the link goes back to my main webpage) You can also make your links different colors simply by using the font commands, so that people will know that it is a link, and will know where to click (or not click it by accident).
Click Here to go to www.google.com, widely used search engine. Notice that "to go to my webpage" is not part of the link. This is because right after "Click Here", I typed < / a >. Remember, the slash means "end", so you are telling it to end the link there. In total, that link looks like this:
< a href = " h t t p : / / w w w . g o o g l e . c o m " > Click Here < / a >

Images: First of all, your image must be saved somewhere on the internet. To insert an image, you do something similar to making a link. You need to know the image that you're intending to insert. Then, inside the brackets (the only space would be between "img" and "src", you type < img src = " [address of the image you want to insert, mine works best if saved as a JPEG file] " >. So let's say my image was called "dog" and was saved to my hard drive under my files, in an address something like C:HTML/blah/blah/blah/Images/dog.jpg; Because my "Images" folder is uploaded to the internet, I would type < img src = " Images / dog . jpg " > and the image would be inserted where I had typed that code. Notice that I ONLY type the folder name "Images"; I don't type the rest of the address all the way up to my hard drive in. If I did that, < img src = " C: HTML /blah/blah/blah/Images/dog.jpg " >, it would only show up on my computer and not be viewable from the web.
If you want to make an image into a link, you type the image code into where you would type the words that you would click on for the link. So if I wanted my image "dog" to be a link to the google search engine, and/or/instead of putting in words for the link, I would type:
< a href = " h t t p : / / w w w . g o o g l e . c o m " > < img src = " Images / dog . jpg " > < / a >
And the image would show up as the link for you to click on.
Sometimes, when you view an image and move your mouse over it, a tan box will show up over the image saying something (I'm bad at explaining this, so just move your mouse over the image below for a moment if you don't get what I mean; you may have to wait a moment for it to show up)

Hopefully you saw that. Anyway, to add that to an image, you use the regular image insert command, with a little addition:
< img src = " Images / dog . jpg " ALT="type whatever you want the box to say here." BORDER=2>
The ALT command tells the computer that you want to begin that box. In the quotes, type whatever text you want to show up in the box when the mouse is moved over the image. The end quotes mark the end of the text. "Border= " just asks what border size you want to be around the box. The image for my email address above has a border of 2.
Alignment: My text is in the center of the page, as you can probably see. To align text, you can add in < center > to make the text centered, and < / center > to end the centered text (default alignment is left for text), and if you want to align it on the right side of the page, you would put < align = " right " > and then < / align > to end that :)

Scroll boxes: Now things get a bit more complicated. Notice how, on the front page of my website, I have a scroll box, and another outlined, but not scrolling box? That is because I added the code for a text box to my website. Here is the code:
[I also centered it, but the < center > is not actually part of the box's code]
< center >
< div style="width:700px; height:1020px; overflow: auto;
background-color: #;
border-color:#;
border-style: dashed;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
scrollbar-face-color: #
scrollbar-highlight-color: #;
scrollbar-shadow-color: #;
scrollbar-3dlight-color: #;
scrollbar-arrow-color: #;
scrollbar-track-color: #;
scrollbar-darkshadow-color: #;
scrollbar-base-color: #; " >

Here you type everything that you want to be inside the text box, then to end the scroll box you put < / div >. Notice the numbers at the top, after "div style = width:" and "-height:". Those are pixel sizes. There you put the size pixels you want your box to be. I'm actually typing in a scrolling box right now, although I made it large enough that it doesn't scroll. If you want it to scroll, you have to make the box's height fewer pixels than the text is long on the page. It may take a few tries to find the right pixel size. The width is just what it implies; that is how I am keeping my text from going all the way to the ends of the page. If I leave the text box and end the "center" command (with the code < / center>),

If I didn't have my default alignment set to center, this text would start on the far left of the page.

There is more than one scroll box on this page; I just began another one, with the same width as the one before that break where I would have demonstrated text beginning on the far side of the page :) I have made the height large enough that it doesn't scroll. I you want the box to scroll but not look like an actual scroll box, you can make all of the colors (except the border, unless you don't want that to show up either) the same color as your background. I'm just going to use black, but you get the idea :)

Keep scrolling (use your mouse or the arrow keys, or you can click and drag on the right hand side where the scrollbar would be, even though you can't see it) until you see the word "END" :)
TextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextText TextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextText TextTextTextTextTextText TextTextTextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextText TextText TextTextTextTextTextTextTextTextTextTextText TextTextText TextTextTextTextTextTextTextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextTextTextTextTextText TextTextTextText TextTextTextTextTextText TextTextTextTextTextTextTextTextText TextTextTextTextTextTextTextText TextTextTextTextTextTextText TextTextTextTextTextText TextTextTextTextTextTextTextTextText

See how even the box scrolled farther, you couldn't see it? :) This kind of box can sometimes really annoy readers, though, so unless you want people to hate you...lol just kidding ;) I do find it annoying, though, which is why only this demonstration box is like this...just so that you know you have this option.

END

In the scroll box code, notice all the different number signs (#s) after things like "scrollbar-highlight-color:". This asks you what color you want the border, the arrow on the scroll bar itself, the scrollbar color, etc. to be. I made all of mine black (the color code for black is #000000, for white it is #FFFFFF), so that with a black background, you wouldn't see the sides of the box. But you can fill in whatever colors you want. "Border-style: dashed;" means that the border of your text box will be dashes (see the boxes on my main homepage).

Bullets/Numbering: The bulleted list at the top of the page listing the categories also has a code:
To make a bulleted list, you must start the code with (without spaces, of course) < ul >. Then press enter to start a new line (you don't need or , it does it automatically with bullets and numbers) and type < li >. After the < li >, type whatever you want that bullet to say. On the next line, you can make another bullet by doing the same thing, and once you're done with the bullets, you must type < / ul > on the line below the last bullet to end the list. It looks

like
this

So the entire code for that was < ul > [pressed Enter key] < li > like [pressed Enter key] < li > this [pressed Enter key] < / ul >. For a numbered list, it's almost exactly the same, except instead of < ul >, the code to start is < ol > and to end, instead of < /ul > is < / ol >. To make the numbered list, you use the same < li > code for each number, just instead of bullets you get a 1, 2, 3, etc. list, which looks

like
this

Pretty easy, huh? ;)

So now you know some HTML! :) Good luck with making your own websites if you do [although remember that they usually cost money to maintain], but other than that, I hope this page is helpful to you (and that I didn't ramble on too long, I have a tendency to do that [just ask any of my friends :p]), and have fun with fonts, colors, sizes, boxes, and all the rest of HTML! ^_^

Tables

To make text in columns or rows, you might want to insert tables into your text. The command for a table is:
< table >
< tr >
< td >
the "tr" inserts a row, and the "td" inserts a new column. To make a table, type those 3 commands into your HTML, then below them the text that you want. You can adjust the width of your table by typing < table width = __px >. The underscores would be replaced with whatever pixel size you would want; a standard webpage is 600 px wide. At the end of your table, if you want to make a second column beside the text that you've already typed, at the end of your table text type < / td >. Do not type < / tr > if you only want a new column. After the < / td >, type a new < td > to begin your second column. Use < tr > and < / tr > to begin new rows. Into that type whatever text you want. Once you're done with your table, type < / td > and < / tr > and lastly, < / table >. And you're done! :) Here's what it would look like if you had only one column but multiple rows:

Text Text Text Text TextText Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text

If you wanted to create multiple columns, you would also have to put a at the beginning of each line, or a if you want a blank line in between, so that it's not all in one column. I did the one below using s (there's also an example of this on my poetry page, I had to use at the beginning of each line and a between each verse):

Text
Text
Text Text
Text
Text
Text
Text
Text
Text
Text
Text
Text

One thing you might notice is that my left-hand column, whose text is shorter than my right-hand column's, is not at the top of the table, where the right column starts, but in the middle. I happen to dislike this look, so I'll tell you how to get rid of it if you want to, although obviously if you like it, keep it :)
When you type in the < td > command for your shorter column, instead of just typing < td >, you can type < td valign="top >, and it will begin your column at the same height as the longer column(s). You can do this for all your shorter columns, so that all start at the same place. Here's an example:

Text
Text
Text
Text
Text Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text

Note - sorry about the background and the length of this page...I know it's kind of hard to read all scrunched, so I tried to put a lot of spaces between my boxes, but please email me if you're having a lot of trouble with it!

Neopets is a virtual pet site that happens to have an HTML guide that I came across, which taught me my most basic HTML knowledge, so if you'd like more HTML info, check it out!

Simple HTML Guide