|
|
What is HTML anyway? Well, HTML stands for Hyper Text Mark-up Language and is the "secret code" that is used to create the look and layout of all the documents on the web. Why do I call it the secret code? Because everything on this web page is the result hidden instructions, called tags, that tell the web browser how to display the text, the images, the color, and such. Moreover, the web browser doesn't display the tags on the web page...so, that's why I call it the secret code. Sound confusing? It might help for you to see an example of what HTML looks like with all those tags. Look up on the browser window's toolbar, go under View, then click on Page Source. In a matter of seconds you will see all the hidden HTML tags for displaying the text and images you see here on this page. Or, just click on the button below and I'll take you behind the scenes to the HTML for this page. Oh, and keep an eye out for "less than" (<) and "greater than" (>) signs, because those are part of the instructions which your web browser reads and obeys. Top of Form 1 HTMLCONTROL Forms.HTML:Text.1 * MERGEFORMAT s Bottom of Form 1 Wow! That's a lot of stuff, isn't it! Did you notice all those "less than" (<) and "greater than" (>) signs? Those are part of the HTML tags. Learning to write HTML is not hard to do. That's why you and I are here...to help you learn how to write HTML in order to make your web pages. Now, let's get started learning the tools and rules of writing tags. Saving your document: To write HTML, you will need a simple text editor. For Macintosh, I suggest using SimpleText, and for Windows, I suggest using Notepad or WordPad. You can however use a word processor program, such as Word or WordPerfect. But, if you do, then you must remember to save your files in the text format. In order to do this, when you are ready to save your document, you need to choose Save As, and not Save. This is because when you choose Save As, a box pops up and lets you choose the format in which you want to save your document. In this case, you want to save your work as Text. Why all the fuss if you are using a word processor? Well, web browsers can only read text, and they can't understand anything else. When you use a word processor program like Word, your document does not automatically save as Text. That's why I suggest using SimpleText or Notepad because your documents are automatically saved as Text. While learning HTML, I suggest that you save all your documents in one folder and on your machine's hard drive. Perhaps the simplest way to do this is to make the new folder on your desktop, allowing you quick and easy access to your documents. Naming your document: To name your document, you can choose any filename that you want. But, you need to be sure to add the ending of .html for Macintosh and .htm for PCs to the filename you have chosen. For example, if you want to name your document "Fred", you would type in the name as: Fred.html Viewing your document: When you are ready to see your new web pages, all you have to do is double click on the filename and it will appear on your computer just like a web page. This way, you don't need to have space on a web service provider to start learning how to write HTML. However, when your ready to show off your hard work to the rest of the world, you will need to send your documents to a web server, such as HYPERLINK "/redirect?url=http://www.tripod.lycos.com/" Tripod HYPERLINK "/redirect?url=http://geocities.yahoo.com/home/" GeoCities HYPERLINK "/redirect?url=http://angelfire.lycos.com/" Angelfire . Now, are you ready to continue because it's time to get to the good stuff -- writing tags. As you have learned, tags are the instructions that tell the web browser where to put things and how to make them look. Each tag begins with a left angle bracket ( < ) and end with a right angle bracket ( > ). Inbetween the angle brackets, place the tag name like this: left angle bracket INCLUDEPICTURE d "redarrow.gif" INCLUDEPICTURE d "redarrow2.gif" right angle bracket INCLUDEPICTURE d "redarrow3.gif" tag name That tag is called a starting tag, and usually each starting tag has a closing tag like this: Notice that all you had to do to make the ending tag is add a blackslash ( / ) to the starting tag. Are you wondering what this pair of tags will tell your browser to do? It is pretty simple. The starting tag, , tells your Web browser that "Hey, here is the start of a file that contains HTML coded information." And the ending tag, , tells your Web browser that "Okay, here is the end of my HTML file." There are many different tags that you can use to tell your browser what to do. Just remember that tags are always enclosed in angle brackets. Also, while I type the tag names in all upper case letters, tag names are case insensitive. This means that it doesn't matter whether you type them in upper or lower case. Write it how you want to..., , , or even if you really want to. Just do whatever makes it easiest for you to read. Think you're getting the hang of HTML? Let's check out a few more tags and see what they do. Wondering what else goes into your HTML document? Every HTML document needs a certain amount of tags in order for it to work. You already know that the first and last tags your file needs are the HTML tags to tell your web browser where the HTML in your document begins and ends: Now you need to put in a pair of HEAD tags. These tags hold all of the document's header information, such as the title of the document and such. But, you don't have to worry about that. Just know that you need to put in a pair of HEAD tags, and know that any information put here is not seen by the web browser: Speaking of a title, let's go ahead and put in the TITLE tags, as well as the name you want to give to your document. Whatever falls between the TITLE tags will be the title of the document. Then, when anyone views your web page, people will see the title displayed in the title bar located in the upper left hand corner of the web browser. For instance, look up in your browser window now and you'll see that the title of this web page is called Basic Tags. Let's show you an example of how to write the tag. In this instance I am going to use "My First Web Page" as the title: Learning HTML Now, here is the absolute last pair of basic tags that an HTML document needs - the BODY tags. This pair of tags is the most important because in-between these two tags is where you will put the all the stuff (text, links, graphics, etc.) that you want to be displayed in the window by the web browser: Learning HTML all your stuff will go here This is what your file will look like once you put it all together: Top of Form 1 HTMLCONTROL Forms.HTML:Text.1 * MERGEFORMAT s Bottom of Form 1 Pretty blah looking, isn't it! Don't worry, you are on your way to learning about all the things that can go between the BODY tags. This is just your bare-bones HTML document. It contains nothing but the required minimum tags. But, hey, you are going to learn some more. Let's keep going. Now that you know the four basic tags (HTML, HEAD, TITLE, BODY) that go into your document, let's look at all the stuff that you can put between the BODY tags. Of course you are going to want some text displayed on your web page. As you saw from a previous example that all you need to do is type the words that you want displayed between the and tags. So try something like this... Learning HTML Woo-Hoo! I'm learning HTML! Want to see what it looks like in a web browser? Top of Form 1 HTMLCONTROL Forms.HTML:Text.1 * MERGEFORMAT s Bottom of Form 1 Did you notice that I put in some extra blank lines when typing the tags for the example above? You can do the same thing with your tags, as well as your text. Don't worry about how many blank lines or blank spaces you use because the web browser will take all of it and simply display it as one single space.
|
