As promised, a simple HTML tutorial. In the past, I have done tutorials on more advanced subjects than this, so I am just going to take a step back now.
Let’s get started!
Step One:
Watch my WampServer tutorials to install, use, and post on WampServer.
Step Two:
Now we can actually start to code. This is definitely the fun part. I use a coding environment called HTML-Kit. You can download it by going to http://www.htmlkit.com and hitting the download link. I strongly suggest getting it because it is what I will be using. Now to coding.
MinStep One:
Make sure your “blank document” looks something like this:
You should see this...
If you do not see the basic HTML outline, then edit it to look like that. If this has confused you, do not feel disheartened, as it is easy to learn HTML.
Explanation
<!DOCTYPE HTML PUBLIC “-//W3C// DTD HTML 4.01 Transitional//EN”>
This line simply declares how to render this page. In this example we will use the DTD HTML 4.01 Transitional with the language of English rules for rendering the page. The exact contents and rules of that file are really quite trivial. All you need to know is that you should use 4.01 Transitional.
<html>
This is the HTML tag (“tags” are anything inside of <>) that says “this is the start of the section to be rendered”. You should start your documents with that.
<head>
This is the HTML tag that starts the head section. Inside of this tag, you put important, non rendered information like the title, and metadata (I will go over this later).
<title>Untitled</title>
This is the first example of a complete HTML “statement” if you will. Notice it starts with the <title> tag – which by the way declares the title of the page – and ends with something special, the </title> thing. What this says is “this is the end of the title tag, you can now do something else.” The </blahblahblah> says end of the blahblahblah tag (replace blahblahblah with the HTML tag you were using).
</head>
Hey! Look! There it is again! </something>! All this does, as you should be able to guess by now, is end the <title> tag.
<body>
This is the start of your main content body. This is where you put the “stuff” that your viewers see. And now we start the real coding!
Step Three:
Ok, so now that we have covered the basic plain HTML document, it is time to add our content. Let’s start by adding a nice welcome to our site, as it is as good a place as any.
<h1>Welcome</h1>
Add the line above. This line just tells the HTML rendering engine in your browser to display a big bold and beautiful “Welcome” on your site. The <h1> means Header One.
<p>Hello and welcome to my site. I put some effort into this site, so please put some effort into your viewing!</p>
Add the line above. This line will tell the engine to put some paragraph (<p>) text onto the screen with the text “Hello and welcome…” And now we close the main HTML tags at the bottom of our document.
Step Four:
Ok, so it is time to close a couple of tags that we used before.
</body>
You should know what this is, but I will tell you anyway. This ends the <body> tag we started above.
</html>
This is the final tag in our document. It tells the engine that it is done with the page and should stop now.
Conclusion:
I hope that this tutorial helped teach you the basics of HTML!
EneilShade (I am back!)
Filed under: HTML | Tagged: EneilShade, HTML Basics
