<html>_
Basics
Let's get started from the very basics, on our correspondingly named page.
The language the browser you're viewing this on understands is mostly HTML. HTML is an acronym for Hyper Text Markup Language. Everything can be achieved with a combination of the basic browser languages, such as HTML, and more sophisticated forms such as Java, JavaScript, Flash, and XHTML. HTML is the oldest and simplest language for creating a basic but working site. XHTML is a variation on HTML, conforming more to the standards of XML, which appears to be the "format of the future." I don't seem to get what's so futuristic about it, though. So, we will be using tried and true HTML.
What we're going to be doing is creating code that tells the browser how to display the page. Don't be scared! It's simple. When the browser reads the commands, it'll then interpret them and display the content accordingly. As you may know, one of the best methods of learning is to do it yourself, so let's dive in!
All HTML documents are simple text documents. Even simpler than Microsoft Word, that also puts little bits of code in, but different than HTML. Any editor that will save into a .txt extension on a PC will work. On a Mac, use something similar to SimpleText.
Type this in your document:
<html>
All HTML "tags" are certain words surrounded by less than and greater than signs. Different words produce different effects. Everything in the website is after the <html> tag. You only need one per document. Browsers discard any returns/line feeds, so you have to use HTML tags to substitute for these. The documents will consist of many tags that tell the web browser what to display.
Almost all tags come in pairs: the starting tag (such as <html>) and the ending tag (such </html>). It is in between the tags that the browser applies the styles to. The only difference between the two is a forward slash in the ending tag before the word.
On a new line, after <html>, type </html>.
Place your cursor inside the two tags, and type these two more: <head> </head>
Anything you put between those tags will NOT appear on the actual page. Inside the head are things such as special information designed for robots that look at your page, extra browser information, and a few other more advanced things.
Now between the <head> tags, type these tags: <title> </title> Whatever you put between these tags will become the title for your web page. You will see the title of your page on the top of the window of your browser, or inside the tab. To test your first website, go to the folder you saved the document in, and open it in a web browser. You'll see that the title of your new page is whatever you named it to be. Amazing, right? Well, maybe not yet. But it's a start. Below the </head> tag (but still inside the <html> tags), now add this: <body> </body> The body is the section of your website actual content is placed. So, that's where stuff will have to go. We're not going to be doing anything real fancy for this example. So, just put the word "hello" in between the body tags. Then, open the page in a browser. You have just effectively created your first HTML document and web site! As you have just seen, any normal text between the <body> tags will be put right on the webpage. Now, inside the <body> tags, delete your "hello" and type:
<h1>This is a heading</h1>
If you look at it in a browser, you will see that you have created some pretty big text. That's what the h1 tags do. This is called a heading. You can use these tags to create headings of various sizes, from <h1> to <h6>, decreasing in size as the numbers get larger (ironic, right?). Below the <h1> tags, but still between the <body> tags, type:
<p>this is where my paragraph would go.</p>
If you have tested it out, you'll see that the <p> tags are paragraph tags. That is where you would put your text. So far, if you have done everything that we asked you to do, it should look something like below:
<html>
<head>
<title>
Your Title Goes Here
</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is where my paragraph would go.</p>
</body>
</html>
By now, I hope you have gotten the hang of this. Creating a website can be as easy as this, but the design process is actually often harder. I recommend borrowing or buying a book on precisely that topic to learn more. Of course, there are many more tags that you can use that we haven't covered here.
Try some of these out:
<b>this makes the text bold</b>
<i>this makes the text italics</i>
<img src="put the URL to an image here, and your website will display that image">
<a href="put the URL of the page you want to link to here">put the text you want to be turned into a link here</a>
Some tags come by themselves. For Example, the <br /> tag puts a break between whatever text you put it between.
Feel free to play around with the ones that we've just taught you, but also be sure to check out a bigger list of usable html tags here. If you want to learn about more advanced website making, let's move on to our next page.