elcome to our humble web site. So you want to learn HTML so you can build your own web page, do you? Well, take a load off and let's see what we can come up with. But first, before I go into any detailed explanations, I want to tell you a little something about web pages. You will notice below that the parts of a web page are very similar to the parts of a letter. In the HEAD section, you put your heading, such as your title and information for search engines. In the BODY section goes whatever you want to write or send to those that will read it. Yes, there is much more to it than that, but keeping this in mind, may help you keep it in perspective.
he exercises that I have included in a few of the lessons here and there are to help make things simpler for you. In them, you can see the structure of a web page more clearly, so please, check them out. Even if you opt not to do them, at least take a look at them. I wrote them in especially to help clear up any confusion. Come on now! Let's go make a World Wide letter!
n HTML document consists of two main parts: the Head, and the Body. This is the most important part of a web page. If you can place the tags below in an editor, you can build a web page! The basic structure is
<HTML>
<Head> ..... </Head>
<Body> ..... </Body>
</HTML>
he Head section of an HTML document contains information about that document, such as the title and information for search engines, etc; and the Body contains the document that will be displayed.
<HTML>
<Head> <TITLE>Shadowfire Tutorials</TITLE> </Head>
<Body> ..... </Body>
</HTML>
Your page begins with this tag:
<HTML>
Then comes the HEAD tag, like so:
<HEAD>
<TITLE>Shadowfire Graphics HTML Tutorials
</TITLE>
</HEAD>
This is your BODY tag: (It is highlighted in white. The attributes or things you can add to change your page around are inside it.)
<BODY background="redbg.jpg" bgcolor="#pick_a_color" text="#pick_a_color" link="#pick_a_color" alink="#pick_a_color" vlink="pick_a_color">
This is where you write your text and place your images--between the two body tags. The first one (above) is where the body of your page begins. The last one (below) is the end. You must have both!! This is also where you choose the attributes of your page. These would be your background image, background color, text color, and links colors. ALL these things go INSIDE your BODY tag. As you can see inside the BODY TAG above the links are LINK, ALINK, and VLINK. These are your unvisited links, active links, and visited links. Links are something you already know about since you clicked on them to get here. We will go into this in more detail in Lesson 3.
Let's review what you've learned so far: You must always have 2 tags, opening and closing. Your title goes in between the HEAD tags. The BODY is where almost all of your information goes. It is where you see text and images. You can begin now writing text in your editor or notebook if you want. It will default to black, but we will learn how to set the color in lesson 3. You will place your text in the BODY of your HTML document. This is also where you place all your buttons, bars, everything that you want your visitors to see on your web page which we will go into later. Then when you have your work all done, you close your BODY with </BODY> and close out your page with the </HTML> TAG (see below) and you're done. Simple, huh? Make sure to bookmark this page as I will refer back to it from time to time. There is still a lot more to learn. Next, we'll learn about the image tags and the background image. You can take a break now or go on to the next lesson.
</BODY>
ow, the first thing you need to know is that almost everything on a web page goes between TWO TAGS. There are a few exceptions, but for now we are only dealing with tags that have both opening and closing. For example, this TAG begins your HTML document: <HTML> And this one </HTML> closes it. Tags begin with a left-angle bracket < and end with a right-angle bracket >. The first word between the brackets is the tag's name: HTML is the NAME of this tag. Any other words or characters are the attributes, e.g.ags are case-insensitive. You can write them in small letters, big letters, or both. Ordinarily, they are written in capital letters so that they stand out from the rest of the document. Your page will always begin like this: <HTML>.
nd at the very end of your page, you will close it with a TAG that is very similar. It goes like this: </HTML>. After you put in your first HTML TAG, then comes the <HEAD> TAG and <TITLE> TAG. The TITLE goes between the HEAD tags, so your page would now look like this:
very page should have a title. And although it doesn't show up on your web page, it appears at the top of the browser window, (look up at the very top, all the way up at my title. It says "Welcome to Beginner's HTML!") and when someone bookmarks it or looks it up in their history - it's the text that they will see. Be sure to create a good title. It's what you'll be remembered for!!
All these tags must be closed off BEFORE you write the <BODY> TAG. The closing tag always has the BACKSLASH in it, like so: / . If you will look below, you will be able to see the general structure of a web page set up for you with all the basic opening and closing tags.
</HTML>
his is the end of your web page!! Now try this exercise: (Note: You will need Notepad. This should already be on your computer. If you don't know where it is, go to START, go up to Programs and over to Accessories. You should find it there.) Ex.1
f you'd like to see what the page should look like in your editor without all my comments (well, maybe just one.), click the image for a larger view. Just a note: the Metatags are included on this page, but you may ignore them for now. They are directly under the TITLE and in between the HEAD Tags. They all start with META NAME=something or other. These are used for search engines.
