HTML banner

HTML-THE BASICS

Part 1- HTML stands for Hyper Text Markup Language. The language is based on SGML (Standard Generalized Markup Language), which is used to model the basic layout of different documents. It allows the user the freedom to put any desired item or text on the page. You must not rely on editors like Word or FrontPage due to their likeliness of error. You must have a background in the language to correct the possible mistakes made by the editor. The focus of HTML is the content of the document, not its appearance.

The basics of a HTML document are labeled through the use of HTML tags. "Tag" is an HTML term for functions.

What HTML documents look like:

As long as you are using a good browser (e.g. Navigator or IE), you will be able to look at any web-page's source. The document's source is the HTML markup (the combination of tags and text) that the author made to make it look the way it is. If you are using Navigator, you can press View at the menu at the top of your screen and go down to Page source. This will let you view the HTML markup for this page. If you are using IE (Internet Explorer), you can press view and move down to source.

Creating a Web-Page:

Since you've seen what HTML documents look like, it is time for you to try your own.

For writing an HTML document, all you need is a editor that can write text. You can use simple text-writers like notepad for Windows or TeachText for Macs, or you can use a full-featured word processor, as long it can save the files as text only.

Open up your text editor and type in this HTML code. Don't worry about what it means, just do it.

Another option is to use the official WWW.NET.EDU HTML code converter

<html>
<head><title>My First HTML document</title></head>
<body><h1>This is my first HTML document</h1></body>
</html>

After you have written that, save it to disk as first.htm. The file extension ".htm" allows internet browsers to know it is an HTML file. Open the file in your browser, and violà, you've just made a web page. If it didn't work, or you got something different, go back and make changes in your HTML and press the button "Reload" or "Refresh" to correct it.

HTML is pretty cool in some ways, you have the advantage of putting spaces or tabs anywhere you want to. So all of the following would look the same.

<h1>This is cool</h1>

<h1>

This is cool
</h1>

<h1>This is cool
</h1>

Part 2- Understanding Code:

#1-<HTML>

The first tag in every HTML document should always be the <HTML> tag, which indicates the file as a HTML document, much like a .exe on a program. Another thing to remember in HTML is that once you start a tag, you have to close it (e.g. <HTML></HTML>, <BODY></BODY>), With the exceptions of (LI, HR, FRAME, BR) which I will explain later

#2-<HEAD>

The <HEAD> tag marks that, anything that follows is the rest of the document.

#3-<TITLE>

The <TITLE> tag names a page. If you are running Navigator or IE, you can look up at the top of your page and see "WWW.NET.EDU - The best web educator on the Net"; that is the contents of the <TITLE> of this page. So the HTML Markup for this page would look like this <TITLE>WWW.NET.EDU-The best Web educator on the net</TITLE>.

#4-<BODY>

The remainder of your document would fit into this part of your HTML markup. So all of the objects and text that is on the page is located within the <body> tag.

Part 3- Headings and Comments:

Headings in HTML are like font sizes (points) in Word Processing Programs. There are six different headings in HTML...<H1> to <H6>. <H1> being the largest and <H6> the smallest.

H1

H2

H3

H4

H5
H6

The comment tag is used to hide something in a source of a HTML document without it showing on the browser

<!-Hide-!>

The above tag would not show up in the browser screen, but would show in the source

Tags covered so far
<html></html>-HTML
<head></head>-HEAD
<title></title>-TITLE
<body></body>-BODY
<h1></h1>-Heading 1
<h2></h2>-Heading 2
<h3></h3>-Heading 3
<h4></h4>-Heading 4
<h5></h5>-Heading 5
<h6></h6>-Heading 6
<!-.....-!>-Comment

TRY IT OUT ON THE OFFICIAL WWW.NET.EDU Code Converter

Previous PageNext Page