HTML Basics

10Jun/095

This is a lengthy tutorial about HTML basics.

Prepare yourself.

Origin

HTML stands for HyperText Markup Language. That means that it's text with uncanny abilities to manipulate time and space, and present to you web pages. It's based on a tag system, like XML. Obviously, you don't see these tags everywhere; they represent content that your browser shows you. This tag system works like this:

<element-type>element content</element-type>

What that means is that the element type (in those weird greater-than/less-than brackets) define a type of object to be displayed on the page. The most basic type is the <html> element, because that starts any html document. The element content, is obviously, the element's content. For example, if you put some text in the html, that's what pops up on the web page. The thing is, once you open the tag, you've got to close it, which is usually done by putting a tag just like the opening one, except with a forward-slash in front of its name, like so:

<html>MY TEXT IS HERE LOLOLOLOL.</html>

Basic Tags

So, yeah, as you may have guessed, there's more than just an HTML tag. There's the head and body tags, script tags, text-formatting tags, style tags, and a bunch more. However, you can nest those tags. Nesting is when you put one tag inside another, like so: <html><body>Wee! More text is here!</body></html> REMEMBER: The tags MUST be in the right order! First in, last out! So this would be WRONG: <html><body>Even more text!</html></body>. Although a web browser would probably still display that correctly, you still shouldn't.

Here's some basic tags:
<p></p> This is the paragraph tag, for guess what? Paragraphs! Note that between paragraphs, there's an involuntary line break that the browser renders.

<head></head> This is where fancy HTML describing stuff, like META (don't ask about that, that's too complicated to get into right now) goes, but other stuff like scripts can go in there.

<script></script> This one's very hard to guess ;). It defines a script, by default in JavaScript, which is part of what makes those HTML pages so snazzy.

<body></body> This is where all the content goes, like text and pictures and flash and whatnot.

<br /> This is a line break, which is equivalent to pressing Enter or Return in a text document.

Empty Elements

Now, I am going to explain the weirdness of the br tag. Obviously, it would be rather annoying to have to go <br></br> when there's NO CONTENT IN IT. So to make sure that no idiot DID try to put content in it, those W3C people or whoever felt like making this fancy stand-alone tag, called an EMPTY ELEMENT.

Saving the dang thing

Now, let's try actually MAKING an HTML document.

First off, HTML is PURE TEXT. Guess what? That means you can edit it in a text editor, like NotePad, ScITE, Crimson Editor (which I really like), or anything else that strikes your fancy. So, start out by making a new text document. Now you can put any HTML code in it, and then save it. Now, it's important that you save it as an HTML file. This is done by an horribly easy process, once you do it the first time. See that extension, like "Untitled1.txt"? Well, just change that txt to html! Now it should be called "Untitled1.html" (of course, you may want to change Untitled1 to something else, but I'm going to refer to it as that for the rest of the tutorial).

Okay, first of all, if any Windows users are out there, you may encounter some problems. In the folder, or Desktop, or wherever you saved it, it may say "Untitled1.html.txt", which is not gonna work. So this is what you've got to do (if you run Windows- I'm not sure if this happens in Mac or Linux, or how to fix it in those).

But try this first: Save it as type "All Files (*.*)" and add the extension manually. So after changing the type to all files, save it as Untitled1.html. Thanks, Brett Page, for that method, because that saves a whole lot of work. But if that fails, then read on.

First, go to that Control Panel thing. If you run Vista, you may want to switch to Classic View for a while. There should be an icon called "Folder Options". Open that up. As you may have foreseen, it will present to you a window. This window should have three tabs at the top (although in XP, I can't be sure, since I'm running Vista). Go to the tab labelled "View". There should be a sort of box at the bottom called "Advanced Settings", with a load of checkboxes, radio buttons, and other assorted goodies.

Folder Options

Scroll down until you find the checkbox with the option "Hide extensions for known file types". Uncheck that thing. And poof, the deed is done! Press OK or Apply, doesn't really matter which, and get out of that window. You can also get out of the Control Panel, now, and you Vista users can set it back to "Control Panel Home".

Now go back to "Untitled1.html.txt" and get rid of the ".txt" so it reads "Untitled1.html". If everything worked right, Windows should give you an annoying error, "If you change a file name extension, the file may become unusable. Are you sure you want to change it?" Say yes.

Now, try opening it. If this is the first time you've opened an HTML file locally, you'll get some message box saying Windows doesn't know what the heck to open the file with, so check the radio button labelled "Select from a list of installed programs" and press OK. Then find your default web browser, click it, and press OK to that. It should then open up in your web browser. If you had any text in that, it should pop up in the web page. When you want to edit it, right-click it, select Open With, and choose your text editor.

The Image Tag

Now back to the image tag. In "Untitled1.html", type something like this:

<html><body><img /></body></html>

So let's make this image tag work! This image tag is only gonna know what image it needs if it has a SOURCE.

Like this: <img src="C:\Users\Me\Pictures\Lolcatz.jpg" />

Of course, this source could be anywhere on your computer, or even on the internet (just type the full URL, like http://www.google.com/intl/en_ALL/images/logo.gif). But it's important to know how to access this image relatively. The way I just showed you was an ABSOLUTE path, meaning that no matter where this HTML file is on the computer, it's always gonna have the same image. But relatively means that the path is RELATIVE, so depending on where the HTML file is, the image file's path is gonna be different.

The basis of the relative path is the ".." operator thing. That means that it goes one directory up. So if you said the source was "../lolcatz.jpg", that would mean go to the folder above an look in there for lolcatz.jpg. Also, the single dot operator thing, ".", means just the current folder. This isn't really handy until later, with really fancy scripts, but you may want to remember it now.

A Real Example Type Thing

Now, back to an actual HTML document. Start out with the opening HTML tag, that starts any HTML document. And then make a body tag (we'll be skipping the head tag, because that's more stuff for the web browser itself, not much for the user). Now you've got: <html><body>

Amazing. Now, let's put some text in, using the <p> tag. Enclose some text in the paragraph, like "This is my picture:" or "ILIEKZ LOLCATZ". Whatever you feel like. Now close the paragraph tag (remember, first in, last out!). Now, because we feel like making a line break, we use <br />.

And now for the semi-final part. An image. Using your mad HTML skizzlez you probably haven't gained throughout this tutorial, make the image tag, and make an ACTUAL IMAGE on your hard drive, or internet. I'm not gonna be checking these, so it doesn't matter. Now close all the tags that need closing.

Your final product should look something like this:

<html> <body> <p>OMG LOLCATZ</p> <img src="..\..\My Pictures\LOLOLOL\omglolcatz.png" /> <body> </html>

Now we open it. Save and get out of the text file, right-click it, select "Open With", and choose your default web browser. You will probably see some words, a line break, and a picture. And that concludes this amazingly lengthy basic HTML tutorial. (yay! no more reading for you!)

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Email This to a Friend

Copy HTML:

If you like this then please subscribe to the RSS Feed.

Enjoy this article?

Consider subscribing to our rss feed!

Tagged as: basics, HTML, Tutorial Leave a comment

Comments (5) Trackbacks (0) ( subscribe to comments on this post )

Tazzydevil XIII
June 11th, 2009 - 19:26

Thanks for writing this Arxanas! :)
Brett Page
June 13th, 2009 - 13:59

Thats a lot of hassle to save a html document, for most programs i use such as notepad you can just change the save as type (under the file name) to all files and save the document as a “filename”.html file without having to go into the control panel
Arxanas
June 13th, 2009 - 15:51

Hmm… never tried it that way. I suppose that would be easier, better edit the post. Thanks!
PoisonSky
November 26th, 2009 - 20:26

lol, learned HTML in, like, one night from w3schools.com – maybe I didn’t sleep that night but hey, still only a night!

As for the tutorial, I reckon it’s excellent stuff to get started on. Shall I try making a CSS tutorial explaining ’s and stuff like that?
arxanas
November 27th, 2009 - 18:18

If anyone else happens to be watching the site, then sure!