Sponsored Links:
Free HTML Tutorial - Basic HTML
If you are looking for a free tutorial about basic html, this is the right place to be.
This free tutorial will show you the absolute basics of using and understanding html.
What is HTML?
HTML stands for Hyper-Text Markup Language.
Hyper Text is text that can include links to other pages.
A Markup Language is a particular way of taking normal text and making extra “marks” in it so that your web browser will know what to do with it.
HTML is transferred across the World Wide Web using HTTP, or Hyper-Text Transfer Protocol. HTTP is the specific way that Hyper Text is transferred. That’s why web site addresses begin with http, like http://www.diamondlime.com.
What are Tags?
HTML uses certain tags for its markup language. Each tag identifies the parts of text that it surrounds to the browser. Most HTML tags are made up of an opening tag and a closing tag.
For example, if you want to tell your browser that a section of text is a paragraph, you would do three things. First, you type in a paragraph opening tag, <p>. Second, you type in the text. Finally, type in the paragraph closing tag, </p>. It looks like this:
So How Do I Get Started?
Now we are going to learn how to make, edit, and view your first HTML file. You are going to learn a couple of new tags, too.
- Install and Open a Text Editor.
You need a program that will allow you to edit plain text for creating HTML files. Many people use Microsoft Notepad because it is free and installed on every computer with Windows. I prefer to use Crimson Editor, which is also free and can be found here: Free HTML Editor
- Enter <html> tags
The very first thing we are going to do is to put in the tags that tell programs our file is an HTML file. Type <html> at the very top of the file. Type </html> at the very bottom. </html> should always be the very bottom of our HTML file.
- Enter <head> tags
The head of our HTML file contains information that tells the browser about our file a little bit more. <head> and </head> go right after the <html> tag.
- Enter <title> tags and a title for your web page.
Between the two head tags, put <title>Your Title Goes Here</title>. These tags tell the web broswer what the title of your page is. The title shows at the very top of your web browser.
- Enter <body> tags.
These tags tell your web browser where the main content, the meat and potatoes, of your HTML file is located. Put <body> and </body> after the </head> tag and before the </html> tag.
- Enter your content.
Start by putting our sample paragraph from above between the two body tags. You can also add more paragraphs and type whatever text you want.
- Save Your File
Finally, we can save our file. Go to the “File” menu of your
program and click “Save.” Give your file a name, like my-first-web-page.html. The .html on the end tells programs that this is an HTML file. Make sure to save your file in a directory where you will remember it. - Open Your File in a Web Browser.
Open the directory where your my-first-web-page.html file is stored and double click on it. It should open in your web browser.
Congratulations! You just made your very first web page!
Final Product
Here is the final product of our coding. Your file should look something like this. If you can’t get your file to work, feel free to copy this text.
<html>
<head>
<title>This is the title of your page.</title>
</head>
<body>
<p>Any paragraph of text that you would like can go here.</p>
</body>
</html>
Here is what your file should look like in a web browser: Basic HTML File
Coding Tips
- Save your files frequently as you work. This way, you won’t lose all of your work if something happens to your computer.
- Type the text in your tags as lowercase text, like this: <body>. It’s much faster to code this way, and it will make your HTML files seem like they’re “yelling” less.
- Use tabs and white space in your file. This will make it much easier to read. Pick a system and use it consistently.
Our next tutorial will teach you about creating content for your web page.
on March 2nd, 2006 at 10:12 am
[…] Now that we can create pages using basic html, create text and headers, and format our text, it would probably be a good idea to learn how to use images. Images, after all, are very important in web design—they convey information, improve your site’s appearance, and add a little spice to your page. […]