~What is: HTML?~

So, you need to learn about HTML? Here's the perfect place to start. First off, what does HTML stand for? Hyper Text Markup Language. How does it work? By using codes that only a web browser can understand, you can make a webpage.

For this lesson, you'll be required to use your computer a bit. First off, open up Notepad. This is a standard program all computers have. I'm going to help you make a web page. And, once you are done with it, you'll be able to open it up on your web browser and see how it looks!

In that blank Notepad document, type <html> and press enter a few times and then type </html>

Now, go to File and Save (keyboard shortcut: Ctrl+S) or Save As...

Type in mywebpage.html or whatever you like as long as it ends in .html

Make sure the "Save As Type" is under Text Documents (*.txt) and now press save. Now once you go to open that file, you'll notice the icon next to it resembles your web browser logo, showing that it is an HTML file to be view in your web browser. It is no longer a .txt file, it's an HTML file.

Okay, now go back to your document and type <head> under <html>

. We're going to give your web page a title, so type <title>

You can now put it whatever you want your page's title to be. The title is what shows up on the very top of your web browser and on the tab, etc. Once you've typed your title, type </title>

The slash means end. The tag is now complete that you have an ending slash on it. This is a very important thing to learn as most tags need a starting tag and an ending tag (with a slash) to work properly. Otherwise, your web browser will not know how long the tag goes on for.

Let's just keep this lesson really simple. If you want to learn all the other things you can do in the <head> tag, see our Quickstart For CSS, which will go into Cascading Style Sheets and other cool things. For now, let's just type </head> to show that the Head is done.

Now, let's type <body> and start working on the body of your web page. What do you want to put on your web page? For now, let's put a banner, a paragraph, and an image.

We won't put an image banner up yet. Let's just write across the top "MY FIRST WEB PAGE!" in big letters. How do we do that so the computer recognizes it? Type <h1> and then type MY FIRST WEB PAGE! and finish it off with the ending tag </h1>.

We're going type a random paragraph that says "BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH." First type <p> to represent a paragraph is starting and then type your "Blah blah blah's" and then type </p> as your ending tag. Yay!

Let's make a break after that paragraph by typing <br> which is the equivalent of pressing enter to make a line space. Let's put an image underneath that break. Let's use this image:

Using the image's url which is saved with TinyPic. The image's url is saved as: http://i37.tinypic.com/2wf1jcm.gif. So, we must type <img src="http://i37.tinypic.com/2wf1jcm.gif">

Insert </body> to end the body of your page. Underneath this should be the original </html> ending tag from before.

Your document should look like this:

<html>

<head>
<title>Your Title Here</title>
</head>

<body>

<p> BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH.</p>
<br>

<img src="http://i37.tinypic.com/2wf1jcm.gif">

</body>
</html>

If your document looks like what is above, Save. Go to File and Open. Find your file and right-click on it and select from those options Open With » and choose your web browser, such as Internet Explorer, Netscape, Opera, or Mozilla Firefox. Your web browser should open and display the work you've just done.

Now, to add other things to your page see the Quickstart For HTML below. Many of the codes you can copy and paste into your web page, save it, and open it up in your browser to see what it looks like. To make a your web page to look more customized, check out other Quickstart Guides, such as CSS, SSI, PHP, and Making A Webpage, at the Help Station.

~Quickstart for: HTML~

Click on the HTML code you are looking for below. If you need help understanding anything here, you can always use the contact form on the Contact Us page. We'd be glad to hear from you and answer any questions. ~~This page will be more comprehensive soon, Dragonfree. ^_~ Just testing out some stuff.~~

BOLD Italics Underline ~~Strikethrough~~

To make a new paragraph, put the [p] code in the beginning and end of your paragraph.

To make a break in the text, use the [br] code. (Both codes are underneath.)

When listing, it's helpful to use bullet points.

See the code below.

Images can really add to a page. Beware! They do slow down loading time.
Remember to type the code in correctly!

A marquee is really cool to have on a site!
The basic code is below.

You can specialize marquee by changing various features of the code below. For instance, the speed here is set at 8, the color is orange, and the font is Papyrus and the font size is 12.
Code Below.

Predefined Text shows the spaces you want it to show.

You     can     use     
        the     [pre]     code   
               to     space     what     you      want. 

Must use the spacebar because using Tab won't show up.


You can find the [pre] code below.

Headings can be different

sizes, too. Find the one you want and put your text inbetween the code. There are 6 sizes.

Forms can be useful tools.
Name:
Password:
Comments:

Create your own for from HTML or make one using a service, like Wufoo or Response-o-Matic.

Pokémon is © to Nintendo and is not affiliated with us in any way. All content and images on this site © to Stareon's Hideout, unless otherwise stated.