Chapter 1 - HTML Creation

HTML GuideBefore we get into the actual code, you might want to know about HTML itself. HTML stands for HyperText Markup Language, it's the most common form of web designing. With it, you're able to bring together text, pictures, links, sounds, animation, etc. The best part of it is that you can create coding with any type of word-processor - it's just simple text. Now, on to the coding! (Gawd thats cheesy...)


Basics

~ Tags ~ Page Structure ~ Common Tags ~


Smooth Design

~ Paragraphs ~ More Font Attributes ~ Text-Aligning ~ Preformatted Text ~ Center Tag ~


Links & Images

~ Links ~ Images ~ Combining Links & Images ~ Background ~


Basics

Tags

Alright, as you've probably noticed, writing HTML code isn't as simple as just typing in words like this. Each bit of HTML coding begins with a &lt and ends with a &gt . If you forget to use these properly, the coding will fall apart and become visible to the person viewing it. (In case you didnt know, coding can't be seen by viewers) What the &lt and &gt tags do, is tell the program that you are adding coding - whatever falls in between those tags is interpreted as HTML.

Now, say you wanted your text to be bold or italicized. These are very basic attributes. At the begginning of the text you want bold, you use a &ltb&gt tag, and at the end you use a &lt/b&gt tag. And for italicized, you put a &lti&gt tag at the begginning and an &lt/i&gt tag at the end.Example

Oprah is fat
She is the opposite of slim

Code

&ltb&gtOprah is fat&lt/b&gt
&lti&gtShe is the opposite of slim&lt/i&gt


By now you probably know that / ends a particular HTML code. If you forget to use / when you're ending a code, it will result in all of your page following that code. For example, if you forgot to put the &lt/b&gt at the end of the Oprah bash, the rest of the text from there on out would be in bold. So remember to always use /! Another thing you might be wondering is if the coding is text-sensitive - it isn't. Whether it's &ltb&gt or &ltB&gt doesn't matter at all. (I use lower-case for all my coding - it's just easier)


Page Structure


HTML documents are similar to letters. They have a head and body. In a model webpage, under the 'head' tag, you would introduce your site and what it's about. And under the 'body' you'd put your main content. That doesn't mean that you can't put it all in the head or put it all in the body. After you place the content under the head or body tag, end it with &lt/head&gt and &lt/body&gt tags respectively. There is another tag that you'll need thought. the &lthtml&gt tag, which goes at the very beginning of your document or page. (Which means before any tags or content) And, of course, and the very end you'll put a &lt/html&gt tag. (At the end of all your tags and content) Here's a basic document/webpage structure.

Example

&lthtml&gt &lthead&gt &lttitle&gt(Your page title goes here)&lt/title&gt(Head content would start here) &lt/head&gt &ltbody&gt(Body content would start here) &lt/body&gt &lt/html&gt


See the pattern? You don't have to add the spaces between the tags but I do it simply because it makes the coding easier to distinguish when your creating or editing the page. You'll notice the title tag right under the head tag. What you put between this tag is what will be shown at the top of your browser and on the thumbnails on the bottom. For example, as you're reading this, look up at the top of our browser (where the minimize and close buttons are). It'll say something like "Fanart Central". Be careful though, if you put any tags between the title tag, it will not work. So don't try makin' it bold or anything. That's pretty much it on document structure. As this guide goes on, hopefully you'll have more of an idea of what you want to put under the head, and body tags and how to do it.

Common Tags


Two of the most commonly used tags are the &ltbr&gt tag and the &lthr&gt tag. The &ltbr&gt tag tells the program that you are adding a line in the HTML coding. If you've ever written code, you know that when you just break in between sentences or paragraphs, the program won't recognize it as a break. That's where the &ltbr&gt tag comes in. You simply have to put it wherever you'd normally just press enter.

Example

So I said, 'No, these crabs aren't edible.'




Shortly after, she slapped the hell out of me.

Code

So I said, 'No, these crabs aren't edible.'
&ltbr&gt
&ltbr&gt
&ltbr&gt
&ltbr&gt
&ltbr&gt
Shortly after, she slapped the hell out of me.


See how it works? This is one of the most useful tags so don't forget it! Now, the &lthr&gt is fairly similar to the &ltbr&gt tag. When you use this code, the program will create a line where you have placed it. This is useful when you want to separate material. (I've used it in this guide ^^^ look up) Here's a simple example.

Example

Jack and Jill went up the hill to have a little fun,But stupid Jill forgot the pill, and now they have a son.

Code

Jack and Jill went up the hill to have a little fun,
&lthr width=15%&gt
But stupid Jill forgot the pill, and now they have a son.


You probably noticed the 'width=15%' line in the tag. This allows you to control how wide you want your line to be. For example, if you were to add a 'width=50%' line onto your &lthr&gt tag, the line would fill half of your page. (That gives you an idea on how to control width) But to control height, it's written a bit differently. For height, you'd type 'size=n' with n being the number of the height you want it. Here are some examples and their codes.

Example

&lthr width=30%&gt

&lthr width=15% size=5&gt

&lthr width=50% size=3 noshade&gt



You may have noticed the 'noshade' attribute on the last line. This basically makes a solid gray line. (I guess you'd use it in case you weren't happy with the regular line...) But now, hopefully, you have a general idea of how to use the &ltbr&gt and &lthr&gt tags. You'll probably be using these quite a bit so make sure you understand them.Back To Top



Smooth Design



Paragraphs


Writing paragraphs in HTML is like writing paragraphs in real life. To start a paragraph, you'll use the &ltp&gt tag. This automatically puts breaks in between the paragraph and other material. Here's an example.

Example

We have come from another planet. We would like to take this iron stick, and probe you with it. It will not hurt. We promise. Come on. Please let us have this honor. We have traveled a trillion miles just to stick this thing up your @$$ now let us do it! Fine then, you shall all die painful deaths. Meet the one who will bring you to your death - Fluke Skysprinter. NOW DIE!

Code

&ltp&gtWe have come from another planet. We would like to take this iron stick, and probe you with it. It will not hurt. We promise. Come on. Please let us have this honor. We have traveled a trillion miles just to stick this thing up your @$$ now let us do it! Fine then, you shall all die painful deaths. Meet the one who will bring you to your death - Fluke Skysprinter. NOW DIE!&lt/p&gt


There's really not much to it at this point. But, if you use CSS (which I'll probably make a guide for later) you can customize what you want the &ltp&gt tag to do.

More Font Attributes


Well, we've covered bold and italicized tags, but there are a few others that might be useful. The &ltu&gt (underline) tag and the &lttt&gt (typwriter-style font) tag. But more importantly, the &ltfont&gt tag. The &ltu&gt and &lttt&gt tags are pretty easy to figure out but here's an example.

Example

Konnitchiwa temee.
Hello jackass.

Code

&ltu&gtKonnitchiwa temee.&lt/u&gt
&lttt&gtHello jackass.&lt/tt&gt


Not to bad...but not too useful. You get the idea though. But now to the good stuff - the &ltfont&gt tag. There's a lot to do with the &ltfont&gt tag. You're able to change the size, color, face, style, and more. Unfortunately I won't be covering all of those attributes in this section but I will in a later section. But for the basics, here's some examples and their code.

Example

Bigarse font.
&ltfont size=5&gtBigarse font.&lt/tt&gt

Drugs are bad. Alchohol is bad. ...Did I mention I was high?
&ltfont color=blue&gtDrugs are bad. Alchohol is bad. ...Did I mention I was high?&lt/font&gt

Pull my finger. ...Not that one...
&ltfont face=serif&gtPull my finger. ...Not that one...&lt/font&gt


Nice, eh? The idea of size and color are simple enough, but the 'face' attribute is a little different. There are 5 fonts pretty much all browsers support. They are :
Serif
Sans-Serif
Monospace
Cursive
Fantasy

And using them is as simple as just typing the name after the 'face=' attribute. Have fun!

Text Aligning


You might not always want your text on the left side of the page, and as you know, it's not as simple as just spacing. To align, you'll need to use the &lth?&gt tag. (With the '?' being a number) Using this tag is a bit hard to understand because the higher the number, the smaller the font. For example, if you were to put in a &lth5&gt tag, your font would be fairly small, but with a &lth1&gt tag, your font would be fairly large. Now, you have 3 align choices - 'left', 'center', and 'right'. Left is already the default so that's pretty much useless. Center, of course, will center your text. And right, will move your text to the extreme right of the page. Here are some examples and their code.

Example

Merry Mother Swan. &lth5 align=center&gt Merry Mother Swan&lt/h5&gt

American Idol sucks. &lth1 align=right&gtAmerican Idol sucks.&lt/h1&gt


Simple concept. Whenever you use a &lth&gt tag, it automatically breaks right below it - so it's best to use it along with a paragraph instead of individual sentences. But for the actual concept, it's not too hard to understand.

Preformatting Text


Alright, this is a very useful tag. The &ltpre&gt tag allows you to place text where you want it by using spaces and breaks. Using this, you will not have to use the &ltbr&gt tag or aligning (although you can). Heres an example.

Example

Farts Smell You Like. ^4 ^2 ^1 ^3

Code

&ltpre&gtFarts Smell You Like. ^4 ^2 ^1 ^3&lt/pre&gt


Simple as that. It's useful for people who don't want to cloud up the script with extra tags or for people who are just too lazy to type 'em. If you try this tag, you'll notice that the font automatically changes to monospace-like font. I'm not sure why it does this, but there is a way to change it. Just put in the &ltfont face=(font name)&gt tag right before your text.

Center Tag


Unlike the &lth&gt tag, the &ltcenter&gt tag automatically moves any content to the center of the page. The best part is that it doesn't modify your font. Here's an example.

Example

You Are At
[img][/img]

Code

&ltcenter&gtYou Are At&ltbr&gt
&ltimg src="fanart-central"&gt&lt/center&gt


Pretty easy, eh? I just put the picture in to show you that it will center all content - so be sure to put the &lt/center&gt tag at the end.Back To Top



Links & Images



Links


Where would we be without links!? That's right - AT THE SAME DAMN HOMEPAGE. OH THE HORROR! ...Bah, never mind. Anyways, links are a very important part of a page. (Especially if your site sucks) A plain link tag looks like this - &lta href=(URL goes here)&gt - it's fairly simple. Here's an example.

Example

I smell Cheezedoodles!


Code

&lta href=http://www.fanart-central.net&gtI smell Cheezedoodles!&lt/a&gt


Pretty easy, eh? Notice how you do the whole URL. (Instead of just 'fanart-central.com') If you're designing your own webpage, and you want to create a link to another of your pages, you don't have to do the whole thing. It'd look something like this. &lta href="homepage.html"&gt Much, much easier than typing the whole thing out. You simply put quotation marks around the name of your page, and an .htm, .html, or .shtml at the end. (Your host should tell you which ones to use at the end)

Images


Images can be a very important and fun to put on webpage. (Especially for this crowd...that's right, YOU!) But be careful, too many pictures can quickly fill up your storage limit. (Unless you host your own site) The basic tag is &ltimg src="(Name of image goes here)"&gt That's it. You can place images that you've uploaded onto the server, or you can link to images that are already on another website.

Example

[img][/img]

Code

&ltimg src="http://www.fanart-central.net/random_logo.php?dir=logos/"&gt


See how I linked to the FC banner? If you have uploaded files to your hosts account, placing the images is as simple as typing the images name between the quotes followed by the file extension (.gif or .jpeg - etc.). Either way it's sure to give your webpage more life and beauty.

Combining Links & Images


Yup - this is how you make banners. This tag takes the link, and adds it to the image so that when someone clicks it, they will be taken to the desired area. It can be very useful at times. Remember the link tag (&lta href=(Link goes here)&gt) and the image tag (&ltimg src="(Image goes here)"&gt)? All you have to do is place the &lta&gt tag before the &ltimg&gt tag. You can use any image and link you like but here's an example.

Example

[img][/img]

Code

&lta href=http://www.fanart-central.net&gt&ltimg src="http://www.fanart-central.net/random_logo.php?dir=logos/"&gt&lt/a&gt


That's all there is to it. But, remember to put the &lt/a&gt at the end or all your content will be linked!

Background


A unique background makes a unique site. There's two ways to customize your page's background. One is just changing the color, and the other is using an image as your background. Either way, it's a fun and easy tag to use. First thing you'll want to do is look for the &ltbody&gt tag. (It should be there if you're using a popular type of HTML editor) But if you don't already have one, just add it in under the &lthead&gt tag. (For complete structure see the 'Page Structure' section) For changing the background color, you'll use the &ltbody bgcolor="(Color name or hexadecimal here)"&gt tag. If you're wondering what hexadecimals are, it is a combination of 6 numbers that create a certain color. I'll explain more in the next paragraph. The other method uses the &ltbody background="(Name or location of image)"&gt tag. Obviously I can't demonstrate this tag but I can give you examples on how to do both.

Example

Color Name

&ltbody bgcolor=blue&gt

Hexadecimal Color Code

&ltbody bgcolor=#230758&gt

Image

&ltbody background="mybackground.jpeg"&gt


Alright, now that you have the general idea, here's a little more on the hexadecimal system. The hexadecimal system is a way to create colors using numbers and letters. There are 16.7 million colors in the system - still less than China's population, but it works. Each color consists of 6 characters which are always followed by a number sign (#). The characters range as follows : 0123456789ABCDEF. Example - #1299AC The first 2 characters (#xxxxxx) represent the amount of red in a color. The second pair of characters (#xxxxxx) represent the amount of green in a color. And the third pair of characters (xxxxxx) represent the amount of blue in a color. That would mean that #000000 would be black, and #FFFFFF would be white. How you mix up the characters according to red, green, and blue, is how you define what particular color you want.

Example

This color contains all red and no blue or green.
&ltfont color=#FF0000&gtThis color contains all red and no blue or green.&lt/font&gt

This color contains all green and no red or blue.
&ltfont color=#00FF00&gtThis color contains all green and no red or blue.&lt/font&gt

This color contains all blue and no red or green.
&ltfont color=#0000FF&gtThis color contains all blue and no red or green.&lt/font&gt

This color contains a low amount of the colors.
&ltfont color=#123456&gtThis color contains a low amount of the colors.&lt/font&gt

This color contains a high amount of the colors.
&ltfont color=#ABCDEF&gtThis color contains a high amount of the colors.&lt/font&gt


Hopefully you have a general idea of how it works. If you are still confused and want more detail, post a comment about it and I'll try to help you out.Back To Top





I'm still adding more content whenever I get the chance. I'm sorry it's taken me so long, but eventually I'll finish it. We all get lazy right? .....right? Agh, whatever.

You are not authorized to comment here. Your must be registered and logged in to comment