![]() Home |
![]() |
Learn: Site Creation Tutorial |
Let's Learn HTML!Creating a website is very easy, but can be rather difficult to explain. We're going to teach you HTML through example, by creating a simple, personal web page for a fictional person called Kevin A. Lloneathome. Through this example, you'll see how basic HTML works, and learn some of its features. Keep in mind that there's a lot that you can learn about HTML--we're only scratching the surface.Let's begin, then! First of all, we need a program to create an HTML file. Don't worry, you don't have to spend money. You simply need a text editor(like Notepad, if you're in Windows). Or, if you have an account on our site, you can simply use our Web Site Manager's built-in file editor. To follow along with this tutorial, create a new, empty text file. Every HTML file has a specific structure. This structure starts with the <HTML> tag. Tags are like instructions you give to the browser to change text or add another feature to your page. They always look the same (with a < at the beginning and a > at the end). This tag is just to say to the browser - "Hey look, it's an HTML file!" After this follows the "header," which gives some information about the HTML file, like the title of the site. In our example, the title is the only header information we'll be writing. So how does the header start? With the <HEAD> tag. This is similar to the HTML tag--it tells the browser, "Hey, here's the header!". To add title information, we use the <TITLE> tag, then enter the Name of the Site. For our example, this is My First Homepage! Now, a new concept--to tell the browser that this is the end of the title and that we're going to write other stuff now, we have to use something called an "end tag," to close the <TITLE> tag. It looks like this: </TITLE> Adding a "/" to the beginning of the name of any tag will make it an end tag. Almost all HTML tags have end tags, to tell the browser to stop making the changes that the tag was making. This is everything we need to put into the header, so guess what we're going to write to show that the header is finished? Right! Another end tag. Doing the same with the <HEAD> tag that we did with the <TITLE> tag, we come up with </HEAD> OK, now we've got our header, but need to actually write something on our site. Again, to tell the browser what we want, we use a new tag. We want to write to the "body" of the file. Therefore, we use the <BODY> tag. We could add text now, but for now we just want to finish our very basic HTML file. Leave a line blank, so we can fill things in later. Now, we have to tell the browser that we're done writing to the body of the file. Guess how we do that? Did you guess </BODY>? Yes, another end tag. Now, to finish up for good, we tell the browser that we're ending the HTML file: </HTML>. When you're done, your file should look like this:
|