The HTML Code
HTML is made up of tags and attributes, which work together to identify document parts and tell browsers how to display them.
There are five important things to know about HTML tags:
- Tags are always surrounded with angle brackets (less-than/greater-than characters)--for example, <HEAD> or <B>.
- Most tags come in pairs (called tag sets in this tutorial) and surround the material they affect. They work like a light switch: the first tag turns the action on, and the second turns it off. (There are some exceptions. For instance, the <HR> tag creates a horizontal rule (the gray line separators you see on many pages) across your page and doesn't have an "off switch." Once you've made a rule, you can't "unmake" it.)
- The second tag--the "off switch"--always starts with a forward slash. For example, you turn on bold with <B>, shout your piece, and go back to regular text with </B>.
- First tag on, last tag off. Tags are embedded, so if you try, for instance, to do this: <HEAD><TITLE>Your text</HEAD></TITLE> it won't work. The <TITLE> tag must be inside the <HEAD> tag therefore, by typing </HEAD> before typing </TITLE> you have turned off the <HEAD> tag before you completed the tags within it. The correct order is <HEAD><TITLE>Your text</TITLE></HEAD>.
- Many tags have optional attributes that use values to modify the tag's behavior. The <P> (paragraph break) tag's ALIGN attribute lets you change the default (left) paragraph alignment to something else. For example,
<P ALIGN="CENTER"> centers the paragraph following it.
HTML Code allows you to make text <B>bold</B>.
The above in your text editor, looks like the sentence below in a browser.
HTML Code allows you to make text bold.
However, you cannot start writing like this immediately. Every HTML file must have a set
of special tags, which tell the browser it is looking at a Web page and not a text document
or image. These tags divide the page into two sections - the HEAD and the BODY.
The HEAD section is the place for META tags, JavaScript, and the TITLE of the page
(this is what appears at the top of your browser). The BODY section is what will actually
appear on the user's screen, and this is where the bulk of the content goes. Let's take a
look at the tags needed to make a very basic Web page:
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>
|
Anything between the <HTML></HTML> tag set is part of the Web page code.
The first <HTML> tag tells the browser it is to display the document as an HTML
document. The last tag </HTML> tells the browser it is at the end of the file. Always
begin and end your HTML document with this tag set.
The next line defines the beginning of the <HEAD> area of the page. Between the <HEAD></HEAD>
tag set is where we placed the <TITLE></TITLE> tag set which obviously define
the Title of the web page (remember this doesn't show up on the page itself, only at the
top of the browser). The <HEAD> tag set holds many other items as well but those will be discussed in other tutorials within AOTA.net
After the head area comes the <BODY></BODY> tag set, which contains a
sentence. This sentence is the only thing the user will see on the page. Notice that to
write normal, plain text no special tags are needed; you just write whatever you like.
However, you will have to manually control the line breaks and paragraph breaks, as noted in the other tutorials.
If you have been an active participant so far then you should have the above code typed
into your text editor. Go ahead and save the file now. Open your browser and click
FILE|OPEN, select your new html file to view it as an HTML document in your browser. If
you copied the code exactly as shown above you should see Hello World! in the main window
and if you look at the very top of your browser you should see My First Web Page showing
as the Title. To see the above code on a document I created for this tutorial click here.
If everything is as it should be, pat yourself on the back and continue with me through
these tutorials. If not please take the time to scroll back up and locate the problem.
"Ok, great! I can make "Hello World!" show up on my
browser. I kind of had more in mind then that!", may be what you are thinking by this
point. But wait! There's more! Don't give up on me now. In this section we are going to
talk about creating an entire content filled web page with headings, centered and bold
text, and we'll even toss in a table and special formatting! The more tutorials you read within the HTML section the more content your web site will contain!
For additional HTML guides, we suggest visiting the following sites:
W3Schools
thesitewizard™
davesite.com
Back to Top
|
