HTML Guide
By tennis8668
So, you're interested in HTML, eh? Awesome. HTML is really cool, and it's fun to use once you know how. However, the best way to learn is to try it yourself. So, you can try out the HTML discussed below using something along the lines of w3schools' HTML Tryit Editor.
HTML stands for Hyper Text Markup Language and is currently what most pages on the Web are written in. You can use HTML to create your own website.
The extension .htm or .html is what all HTML files end with. Which one you use doesn't really make a difference.
All HTML files start with the tag <html> and end with </html>.
There are two main parts of an HTML file. The first is the head (<head>), and the second is the body (<body>).
The <head>:
Everything inside the <head> tag is used to tell an internet browser about the page. However, no actual content is located in the head. That's all found in the <body>. For example, one thing the head tells your browser about is the title of the page (the text at the top of this window, The Spriting Shack - Pokemon Spriting Tutorials and Mechanics - HTML Guide, is the title of this page). This is done with the <title> tag. Another thing the head is used for is telling search engines the content of your site with the <meta> tags. Google, however, does not use meta tags. This is to prevent Webmasters from repeating keywords or saying keywords that aren't related to his/her. There are many more things found in the head, but I will cover those later. Now that you know a teency bit about the head of an html file, we can move on to the more important part, the <body>.
The <body>
The <body> of an page written in HTML is where all the content is written. The body starts with <body> and ends with </body>.
.:Tip:. - All tags that close (some tags, like the <br> tag for a line break, do not close) are closed by repeating the tag only adding a / right before the name. For example, the paragraph tag, <p> , is used to start a paragraph, and when the paragraph is finished, it is closed with </p>.
One common tag which is used to write paragraphs is the <p> tag (briefly discussed in the tip above). So, if you wrote:
<html>
<head>
<title>Hello!</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Saved it as a .html file, and viewed it in your browser, you would get this.
If you want, you can view the source code, the HTML encoding for a page, of the previous link (or any site) by going View->Source in your browser. Notice how it's the exact same thing as what you just typed.
.:Tip:. - You can always view the source code of any website on the Internet, because your browser temporarily downloads a site's source code so the page will display. The down side of this is that you can't hide your site's source code if you want to.
Hmmm, that web page was really basic. It doesn't look that exciting either. Let's spice it up a little!
First, I think we should center the text. That way it might look a little better from the symmetry. So, let's stick that whole body inside a center tag.
<html>
<head>
<title>Hello!</title>
</head>
<body>
<center>
<p>Hello World!</p>
</center>
</body>
</html>
And, if we check our mighty example page # 2, you will see that it worked!
However, it's still really boring. Look at that plain white background. So dull. But how to change it? Well, you can modify the background two different ways. The first way is to use something called CSS, or Cascading Style Sheets, but that is covered later. Although CSS is the recommended way to modify your background, we will use the other way, because it can be done with only HTML. How about if we made our background... blue! OK. So all we have to do is specify that in the <body>.
<html>
<head>
<title>Hello!</title>
</head>
<body bgcolor="#d1d1ff">
<center>
<p>Hello World!</p>
</center>
</body>
</html>
Notice how I specified a hexidecimal color value instead of a word. In my opinion, the default blue did not look good. Anyways, let us check out the result of what we just typed: example 3.
Quickly preview the changes we've made:
Example 1 |
Example 2 |
Example 3
More soon :)
| 
