 |
Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
Introduction
The Tools You'll Need
You need a text editing program like Windows Notepad or any basic ASCII (American Standard Code for Information Interchange) text editor. Notepad is the default Windows text editor. On most Microsoft Windows systems, click your Start button and choose Programs, then Accessories. The icon for Notepad should be a little blue notebook. For our purposes, any text editor will do nicely. One thing you should avoid though is using a word processor for authoring your HTML documents. For one, these are not very well suited for HTML authoring and secondly, unless you know what you're doing, your file won't save as a plain text HTML file, it will probably save in the word processor format and won't render in a browser. You'll also need a Web browser program like Netscape Navigator or Microsoft Internet Explorer. The other applications you will need you can find in the download section of this tutorial page.
Now that we've got that out of the way, let's get started. For those of you who have no coding knowledge don't worry, you do not have to be a programming genius to understand HTML. Plus I'll explain each line of code as we go along, but if you still get stuck, drop me an e-mail or post your question in the Question and Answers section of this tutorial.
Hypertext Mark-up Language (HTML)
The following is an HTML page with a title "Hello World Example" and displaying a "Hello World" message with a horizontal line underneath it. This is the most basic HTML format and the minimum amount of code required for an HTML page. Although this might not make any sense to you now don't worry, it will be explained as we go along.
|
Click here to see what the output of the above code would look like. To come back to this page when you've finished looking at the result, close the new window it opened in. |
<TAG>text being formatted or defined</TAG>
Remember, they do not have to be next to each other as in the above example, they could be quite far apart as with the <HTML> and </HTML> tags, where the on <HTML> tag is at the top of your code and the off </HTML> tag is at the bottom. The essential thing to remember here is that if you're using a container tag and you specified an on tag you must provide the off tag as well. Also keep in mind you can have tags within tags, but we will get to that later on in the tutorial.
All other tags in HTML fall into one other category, called empty tags. These tags have only an on tag, there are no off tags. The reason for this is that empty tags don't act on blocks of text. Instead, they do something all on their own. An example of this would be <HR> (Horizontal rule) tag. This tag draws a line across the width of your document.
Now that you have seen what the code looks like and you have seen what the output of that code will look like in your browser, let me explain the scripts to you.
| <HTML> | This tag lets the browser know that we are starting a new HTML page, but don't forget to close this tag at the end. |
| <HEAD> | Within this container tag you will have all your headings, like the title of your page as well as script you want to have executed before anything is displayed in your browser. In other words this section is read before the <BODY></BODY> container tags. |
| <TITLE>Hello World Example</TITLE> | These tags specify the title which will be displayed at the top left corner of your browser. With default Windows colors, that will be in the blue line right at the top of your window. |
| </HEAD> | This tag signifies the end of the header section. |
| <BODY> | This tag is mainly the heart of an HTML page. Whatever is put between these container tags is what is displayed in your browser, for example, text, pictures and sound on a Web page. In this case the text "Hello World!" and a horizontal line are displayed. |
| Hello World! | As you can see, any plain text (with plain text I mean not within tags) will be displayed in your browser as text. |
| <HR> | This is the empty tag for a horizontal line to be drawn across the page. |
| </BODY> | The off tag for the on <BODY> tag. |
| </HTML> | And last but not least the off tag for the on <HTML> tag. |
And there you have it, your first HTML page! Either retype the initial script or copy and paste it by selecting the script and holding the control button (Ctrl) and pressing C then open your text editor and hold the control button (Ctrl) and press V. Play around with the script by changing the values and then looking at the output or result it will have. Save the script as anything you want as long as you have an .html or .htm extension at the end of your file name (e.g. hello.html or firstapp.htm). If you are using Notepad, and are a little fuzzy about how to save a document, then here's what you do:
To view the page either open it in your browser by selecting "File" and "Open" or if you have Microsoft Windows, just double click the file in Windows Explorer and it will open automatically in your browser.
Well, now that you have a basic knowledge of an HTML page and some container and empty tags, let's move on to some other tags you can use in your document.
But before we do, I'm going to start a new page, which by the end of this tutorial will be a complete example of an internet web page. So follow along at the end of each section and build up your own personal homepage. I will use the tags discussed in each section which means the page will start small and simple, but by the end of this tutorial will be a fully fledged internet web page with background, text, pictures, links, animations and all the cool stuff that is the internet today. For each section of the tutorial there will be an example at the end which will either add a new page or edit an existing page created in previous examples. Note however that all the personal web pages created by the end of the tutorial will work together as one web site, so make sure you save all the files in a separate directory so as to limit confusion. To start your personal page click on the link below.
 |
Click here to go to the personal homepage example, for this section of the tutorial. |
[Next Section - Basic Tags] [Back To Index Page]
