The HTML code section I have can be really confusing if you're not too familiar with HTML, that's why I also decided to open this page up. I'll walk you through the creation of your main page, step by step along with explanations. Definitions might pop up once in a while so be prepared. Jot down any notes you think would come in handy to you. So, now - let's begin!
Alright, first thing first. You're going to need a text editor such as Notepad. That's right - you don't need an HTML editor, in fact, I'm against them. Sure they do all the work for you, but what if you want to do something not capable in the HTML editor? Then you're going to need to know HTML. So go open Notepad. I'll wait . . .
Okay, you have Notepad open, right? So here goes. This is how you being your web page - type the following command in. Oh, and you don't have to worry abou tthe text being in lowercase or not - HTML is pretty forgiving when it comes to that. Here is the code to begin -
<![CDATA[
<HTML>
]]>
That's right, type it in. That stands for Hyper Text Markup Language. It's what browsers such as Microsoft Internet Explorer and Netscape read. That just started your web page. Everything after that HTML code the browser will read. Now for the head of the document - sort of like the brain of it. Below is the HTML for the head.
<![CDATA[
<head>
<title>The Computer Nrrrrd's Hangout</title>
<meta name="Author" content="A1agent007@aol.com">
<meta name="Description" content="HTML Help, Free Custmoized Graphics, Free javascripts, Free web page design service, and much more!">
<meta name="Keywords" content="HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML,HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML,HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML,HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML,HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML,HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML,HTML, Free, html, free, javascripts, free, graphics, customized, HTML, HTML, HTML">
</head>
]]>
The head began the head of the document. Don't get this confused with headings. Inside the head is the title which puts the title of your page not on the page itself, but on the top bar of the browser. The meta tags are what spider search engines such as AOL's NetFind use to index their site. When their program reads that code, they'll be able to appropriately index it. Oh, by the way, do you notice how the title thing ended with a title anchor tag (the anchor tag has the slash in front of it), that tells the browser when to stop reading the title - and now draw your attention to the head anchor tag. That tells the browser when to stop reading everything inside the head of the page. Be sure to change the title and also change the author in the meta tag along with the content and keywords and adjust them to fit what your page is about. Put your e-mail address in where it says author - some spiders like to use this. Note that meta tags aren't necessary, but they help index your site the way it should be.
Okay, if you've done what I've told you, you currently have a page that appears blank, but don't worry -we're on to the body of your page. Yes, I know - life's not fair - all that code and you have a black page! We've only just begun. Now let's get to the body of the document - this is what the viewer of your page will see. To begin the body you have some options, but here's the best tag to use which tells the browser the background color, link colors, text color, and much more.
<![CDATA[
<body bgcolor="#FFFFFF" text="#000000"
link="FF0000" vlink="0000FF">
]]>
That used hex values (color values) to tell the browser that the body background color will be white, the text will be black, the links will be red and the visited links will be blue. You can adjust this by inserting different color values.
Well, that began the body of the document. Now you have to insert the content, images, et cetera. Let's start off by doing a heading that says the name of your page. This will be displayed on the page.
<![CDATA[
<H1> Name of Your Page </H1>
]]>
Now you can insert a paragraph break or line break to separate the heading from the rest of the body. The two codes below do not need anchor tags.
<![CDATA[
<p> for a paragraph break or
<br> for a line break.
]]>
Now let your imagination run wild. I can't tell you what to put here because there a countless options of whether you could put lists, text, images, tables, and much, much more. But once you're done putting in the content, end it like so -
<![CDATA[
</body>
</html>
]]>
Now save your work - but be sure to follow the below directions to make sure you do it correctly!
- Go to SAVE
- Where it says SAVE AS TYPE go to ALL FILES (*.*)
- Now name your file such as webpage and be sure to end it with .htm or .html
so you would have webpage.htm
- Ta-Da! You're done. Now open it with your browser by opening whatever your browser is, going to FILE -> OPEN -> BROWSER -> then select your file and click OK
Currently, your page is only on your computer and not a server meaning right now only you can see your page. To get it posted on the world wide web, you'll need to find a server such as Angelfire.
You can go to my page about HTML codes to learn how to put links and images in your body. For now, you can just type in text before the
<![CDATA[
</body>
]]>
Check out HTML Goodies. That site will surely help you! Or, you may also want to try keyword On The Net on America Online. Those of you with AOL can click on the below image to get there. Note that the below graphic was done with a screen capture using Paint Shop Pro.
