Free Games Forum: Game Technology: HTML Forum: HTML


	FORUM HOME	SEARCH POSTS	WHO'S ONLINE	LOG IN	RULES / FAQ REPORT SPAM

Free Games Forum: Game Technology: HTML Forum:
HTML

Print Thread

Xbot
Veteran

Jan 23, 2005, 6:36 AM

Post #1 of 2 (1714 views)
Shortcut

HTML

HTML. One of the most beautiful languages on the internet.

HTML stands for hyper text markup language. What does that mean? Absolutely nothing unless you're doing a report about it.

HTML is the ultimate internet language. It works only on the internet, but nonetheless, it IS the ultimate language.

What makes HTML so great?

HTML cannot be broken. Meaning no matter what mistake you make, it will NOT break. Now it can cripple--as in some functions may not work correctly--but it will NEVER be broken. It will display as it is.

Not only is HTML unbreakable, it is also VERY easy. You can learn it in a matter of days, well, the basics anyway.

It can get insanely advanced. But that's only if you're DESIGNING--which we'll work on later. Even then, it still CANNOT BE BROKEN. Let me hammer this into you--HTML IS UNBREAKABLE.

Just like the internet is all about the ISPs and the people, HTML is all about the tags and the text.

Ever went up to view>page source in Internet Explorer? If you are curious, you've probably done that. That's the page's HTML code.

So, the basic tabs.

Code

<p> </p>

Ahh yes, the 'and' of HTML. The Paragraph tag.

The paragraph tag tells the browser what to do with some text.

For example, let's say you want to make this:

Code

Firefox is the ultimate browser. It rules. It is the best thing ever. Yep. The best.

And have all of those things in different paragraphs.
Here's how you would do it.

Code

<p>Firefox is the ultimate browser</p> 
<p>It rules</p> 
<p>It is the best thing ever.</p> 
<p>Yep.</p> 
<p>The best.</p>

You don't have to seperate them either. As long as you have those tags, you'll be good. The tells the browser that this is a new paragraph. The tells the browser to end the paragraph. The can be not used, however, the next tag must be a or you'll end up morphing together two paragraphs. No matter how many enters you put between words, the paragraph does it all.

The bold tag

Want to make a point? Then you bold something. Unless you have lived in a cave for the past 50 years, you know what bold does. It makes things stand out.

Let's say you've got a sentence like this:

Code

You suck. Your opinions are overglorified and underproven.

You want to bold overglorified and underproven. Then your HTML will look something like this.

Code

<p>You suck. Your opinions are <b>overglorified</b> and <b>underproven</b>

.

Now here's the thing: You must have a where the bold ends. Or you will bold everything that comes after . You probably don't want that. So just remember to do so.

So what does the page have now?

At this point, you should have something like this:

Code

<HTML> 
<Title>Xbot's tutorial</title> 
<Body> 
<p>Firefox is the ultimate browser</p>  
<p>It rules</p>  
<p>It is the best thing ever.</p>  
<p>Yep.</p>  
<p>The best.</p> 
 
<p>You suck. Your opinions are <b>overglorified</b> and <b>underproven</b> 
</html>

Oh, forgot to mention. You need the following to start your page.

Code

<html> 
<Title>Your title here</title> 
<body> 
All the junk you want in your page 
</body> 
</html>

Most of the time you won't need these. However, some websites require these, and some browsers won't display the page correctly without them. So you might as well put them there.

The underline, the image, the URL, and the italics.

Have you ever wanted to underline something on a webpage? Or did you just want to know how to underline something in HTML? Well then that's easy.

Code

<u></u>

The tells the browser that something's supposed to be underlined. The tells the browser to stop underlining. Make sure to have the after your underline block! Or your entire page will end up looking all nasty and underlined!

Code

<u>Xbot rules!</u>

The above code will make:

Xbot Rules!

Now the image. You know you can put stuff in your HTML to make an image right? In forums you probably know how to put an image in. In HTML, it's not so different.

Code

<img src=site here></img>

This will put the image directly on the HTML page. So you've got an awesome image! No more cruddy text for you! Some websites even make their entire site out of images. It can be efficient, but it does suck up a little more bandwidth.
EDIT: Ends with </img>. Sorry.

Alright! Now for the clickies.

You know on a website there's the 'click here'? Well that's a simple code that makes you do that. Check it out!

Code

<a href="www.google.com">Google!</a>

All the tags there are REQUIRED. Otherwise all the text on your page will lead to Google.com. With the above code, you'll have text on your page that brings you directly to Google.com by simply clicking on Google. You might want to make in it a seperate paragraph like this

Code

<p>I love searching!</p> 
<p>With <a href=www.google.com">Google!</a>

Then I love searching and with google will be on two different lines. But if you want to combine them...

Code

<p>I love searching with <a href="www.google.com">Google</a>!</p>

Then you have it all in one sentence, and it will appear just like average joe URL.

Now have you ever wanted to emphasize something? Or maybe just learn how to do it in HTML? Well lucky you, here it is!

Code

<i></i>

The above will make your text appear emphasized like this.

So let's review what our page looks like now.

Code

<HTML>  
<Title>Xbot's tutorial</title>  
<Body>  
<p>Firefox is the ultimate browser</p>   
<p>It rules</p>   
<p>It is the best thing ever.</p>   
<p>Yep.</p>   
<p>The best.</p>  
  
<p>You suck. Your opinions are <b>overglorified</b> and <b>underproven</b>  
<p>I love searching with <a href="www.google.com">Google</a>!</p> 
<u>Xbot rules!</u> 
<i>Oh yes!</i> 
</html>

Now the above site is rather boring. But you'll have to stay tuned for me to teach you how to make it INTERESTING!

Hey Kids, wanna see dracula dance?
An Inconvenient Truth - A global warning
Think Progress
Progressivism FTW

(This post was edited by Xbot on Apr 7, 2005, 1:30 AM)

Xbot
Veteran

Jan 26, 2005, 12:01 PM

Post #2 of 2 (1604 views)
Shortcut

HTML L2 [In reply to]

Are you guys ready for the next fun filled action/adventure LEARNING HTML WITH xBot? Well good, because I'm about to shove it directly down your throat Laugh

.

Okay, now we're going to work on all the wonderful FONT things! Yeah!

Font size

Ever wanted to make something unproportionatly huge? Well now you can!

Code

<fontsize=+15></font>

That will make your text GIGANTIC. The lower the number, the smaller the text. You need not specify for every peice of text, but this just tells the browser that it HAS to be this size.

Sample code:

Code

<fontsize=+15>Xbot is the most exciting nerd in EXISTANCE!</font>

Amazing eh?

Font Colors
Ever wanted to make font colors? Well now you can, thanks to the great and powerful XBOT! (Sorry, just had like 3 cans of coke..)

Code

<font color="blue">I command thee to be BLUE!</font>

Tooda! You just made a blue sentence! Replace blue with any color you want, but if you want specifics, you'll need to find out the hex code.

Making Backgrounds
Oh, you cheap little things. You want me to teach you how to make your background color not white? What's wrong with white? It's like all the colors in the friggin' rainbow. Fine, I'll give you the individual rainbow...ornery FGFers.

Code

<body bgcolor="Green">

Now with the above code, you've got green. No, not money, your background is green. Green, yay.

You can change green to anything you want. But if you want to go specific, find the hex codes.

But Xbot you showed me all these great codes but how do I implement them?!
Oh? I didn't explain that?

*Reads over topic*
Ooohh, I didn't. Well then, just pretend that that was intentional.

Alright, now there are several ways to do this. But I'll tell you the two most common.

Notepad!!!

Yay! Notepad!

Yes, that crappy text editor that is probably the worst invention in the history of mankind is an HTML editor. Many coders of more advance scripts still use notepad.

1. Open Notepad (Start>run>notepad)
2. Make Page (You need the Basic tags! Look up to the first post!)
3. Save the page as an HTML. This is important! Otherwise it's a text file!

An actual uncrappy HTML editor

Here we go. An actual program DESIGNED for HTML editing. W00t.

There are several thousand out there.

But I recommend 1st Page 2000, located at www.evrsoft.com . 100% FREE, color coded, and it supports other coding languages--including ColdFusion! Yes, that's not just a theoretical form of electricity, it is also a programming language!

That's all for now kiddies.

Stay tuned where I tell more!

Hey Kids, wanna see dracula dance?
An Inconvenient Truth - A global warning
Think Progress
Progressivism FTW

Print Thread

Search for (options)

Web Design by Web Ideas - Page loaded in: 0.11 s on (CGI/1.1)