Table of Contents
 Home
 About this Tutor
 Introduction
 HTML Editors
 Basic Code
 Utter Basics
 The Body Tag
 Headings
 The Font Tag
 Images
 Tables
 Tables Part Two
 Tables Part Three
 Nesting Commands
 Some Design Tips
 Meta Tags
 Web Hosts
 Uploading Your Site
 Copyright Issues
 HTML Mail Lists
 Future of HTML
 Marketing
 Style Sheets
 CSS and Text
 CSS and Fonts
 CSS and Cursors
 CSS and Backgrounds
 CGI
 CGI Scripts
 JavaScripts
 Affiliate Programs List
 Browsers
 Dang 404 Errors
 Color Chart One
 Color Safe Chart
 Color Chart Three
 Code Chart
 Arial Character Map
 Times Character Map
 Wing Ding Character Map

 Meta Tag Generator
 BBS Forum
 Contact Us
 Glossary
 SiteMap
This Site Has Been Rated:
Rating = 7.69By 180 Users
Please Vote Here:

Basic HTML Code

HTML is really very simple. Taken step by step you'll be writing web pages in no time. To show the simplicity of HTML look at this one HTML tag, the command to center a line of type, left to right, on the screen or within the block of text. Click on the "V" to see the actual code used here.

You Must Use IE Here ... NOT Firefox!


That's simple isn't it? Looking at the actual code here you see <center> which tells the browser that the following input will be centered on the screen horizontally (left to right). Then you see </center>. The slash tells the browser to stop centering things, return to the default flush left (the start of all lines pushed to the left of the page) on the page. Think start center for <center> and end center for </center>. I also dropped in a line break code <br>, which of course, breaks or ends the line where it's inserted (just like the return on a typewriter huh?). Note however that the Enter or Return key does nothing but send the cursor to the beginning of the next line on your screen as you write the code.

OK, the above was just to demonstrate the actual simplicity of HTML code. Yes, it does get more complicated, but not really all that much, and you can put up a web page without getting complicated. But as you progress you'll begin to understand and learn more and more and, believe me, before you know it, you'll have dozens of web pages on the Internet.

You can view the source code for any web page you visit. Click on the toolbar "View" and then on the dropdown menu click on "Source". You'll see the actual source code that webmaster wrote to make the page do what it does. This is basically how I learned HTML back in 1997. Although I had visited some online tutors, and got some basic information, the actual working knowledge I originally got was from looking at the source code of others work and learning how to manipulate the screen as those sites did. View source every time you see something you like, and see how it was done. It's OK to copy/paste and work with that code, just don't steal it. Make it your own. Make it original in your own ways.

Now that I've said it's OK ... well it isn't always OK. Don't steal scripts from other sites. That is a no-no ... big-time no-no. Most java scripts that you'll see working on sites when you view the source have an attribution line at the top, sometimes with a URL. Either go to the URL and get the code, or search for the authors, or scripts, name at your favorite search engine (like Google.com for instance). Don't just steal it. Most all code is copyrighted and it's against the law to simply copy/paste it. For your educational experience I do recommend doing that, but only when you are either just learning from it, or are simply using it as a base guide to create your own site. There is more to be said later under "Copyright Issues".

One important thing to do when writing HTML is to keep your code readable. Notice above I have put the <center> and </center> commands on lines by themselves. I do this sort of thing to keep commands separated. It makes it easier to read, and later go back and edit or debug. There is no golden rule as to how you keep things orderly. All good code writers separate their code while writing it. It's good habit.

Traditional programmers write code using the tab key to indent certain parts of code, thereby separating it from the rest of the code. Subsections getting indexed another tab space. Personally I use the new line method. With blank lines between sections. Your HTML page will display correctly if the tags are on the same line as your text or on separate lines of their own. As we progress through this tutorial you'll see how I keep the code separated. This is simply my way of keeping things orderly. You'll need to develop your own methods. Anyway you want to do it is fine. You'll see the importance of good clean coding as you progress and rewrite and debug your HTML documents. It also allows for easier changes later, when you update your work.

To demonstrate this point I will show you three different methods of coding. Sample one is where there has been no attempt to keep the code orderly.

<table width="100%"> <tr align="center"> <td width="10%" bgcolor="#ff2400"> Orange Red<br> "#FF2400"</font> </td> <td width="10%" bgcolor="#ff0000"> Red<br> "#FF0000"</font> </td> <td width="10%" bgcolor="#d9d9f3"> Quartz<br> "#D9D9F3"</font> </td> <td width="10%" bgcolor="#d8bfd8"> Thistle<br> "#D8BFD8"</font> </td> <td width="10%" bgcolor="#eaadea"> Plum<br> "#EAADEA"</font> </td> </tr> <tr align="center"> <td width="10%" bgcolor="#bc8f8f"> Pink<br> "#BC8F8F"</font> </td> <td width="10%" bgcolor="#db70db"> Orchid<br> "#DB70DB"</font> </td> <td width="10%" bgcolor="#ff6ec7"> Neon Pink<br> "#FF6EC7"</font> </td> <td width="10%" bgcolor="#ff1cae"> Spicy Pink<br> "#FF1CAE"</font> </td> <td width="10%" bgcolor="#ff00ff"> Magenta<br> "#FF00FF"</font> </td> </tr><tr align="center"> <td width="10%" bgcolor="#9370db"> Medium Orchid<br> "#9370DB"</font> </td> <td width="10%" bgcolor="#9932cd"> Dark Orchid<br> "#9932CD"</font> </td> <td width="10%" bgcolor="#db7093"> Medium Violet Red<br> "#DB7093"</font> </td> <td width="10%" bgcolor="#cc3299"> Violet Red<br> "#CC3299"</font> </td> <td width="10%" bgcolor="#9f5f9f"> <font color="#ffffff"> Violet<br> "#9F5F9F"</font> </td> </tr> </table>

Very confusing looking isn't it. Sample two shows my method of keeping the code orderly.

<table width="100%">
<tr align="center">
<td width="10%" bgcolor="#ff2400">Orange Red<br>"#FF2400"</font></td>
<td width="10%" bgcolor="#ff0000">Red<br>"#FF0000"</font></td>
<td width="10%" bgcolor="#d9d9f3">Quartz<br>"#D9D9F3"</font></td>
<td width="10%" bgcolor="#d8bfd8">Thistle<br>"#D8BFD8"</font></td>
<td width="10%" bgcolor="#eaadea">Plum<br>"#EAADEA"</font></td>
</tr>

<tr align="center">
<td width="10%" bgcolor="#bc8f8f">Pink<br>"#BC8F8F"</font></td>
<td width="10%" bgcolor="#db70db">Orchid<br>"#DB70DB"</font></td>
<td width="10%" bgcolor="#ff6ec7">Neon Pink<br>"#FF6EC7"</font></td>
<td width="10%" bgcolor="#ff1cae">Spicy Pink<br>"#FF1CAE"</font></td>
<td width="10%" bgcolor="#ff00ff">Magenta<br>"#FF00FF"</font></td>
</tr>

<tr align="center">
<td width="10%" bgcolor="#9370db">Medium Orchid<br>"#9370DB"</font></td>
<td width="10%" bgcolor="#9932cd">Dark Orchid<br>"#9932CD"</font></td>
<td width="10%" bgcolor="#db7093">Medium Violet Red<br>"#DB7093"</font></td>
<td width="10%" bgcolor="#cc3299">Violet Red<br>"#CC3299"</font></td>
<td width="10%" bgcolor="#9f5f9f"><font color="#ffffff">Violet<br>"#9F5F9F"</font></td>
</tr>
</table>

A bit more orderly. Much easier to find a mistake, or something you want to revise later, if things are set up orderly. Sample three shows the method used by most programmers, especially true programmers who write software, which is much more complicated than web pages are. The code is the same in each sample, taken from one of the color charts you'll find later in this book.

<table width="100%">
       <tr align="center">
            <td width="10%" bgcolor="#ff2400">Orange Red<br>"#FF2400"</font></td>
            <td width="10%" bgcolor="#ff0000">Red<br>"#FF0000"</font></td>
            <td width="10%" bgcolor="#d9d9f3">Quartz<br>"#D9D9F3"</font></td>
            <td width="10%" bgcolor="#d8bfd8">Thistle<br>"#D8BFD8"</font></td>
            <td width="10%" bgcolor="#eaadea">Plum<br>"#EAADEA"</font></td>
       </tr>

       <tr align="center">
            <td width="10%" bgcolor="#bc8f8f">Pink<br>"#BC8F8F"</font></td>
            <td width="10%" bgcolor="#db70db">Orchid<br>"#DB70DB"</font></td>
            <td width="10%" bgcolor="#ff6ec7">Neon Pink<br>"#FF6EC7"</font></td>
            <td width="10%" bgcolor="#ff1cae">Spicy Pink<br>"#FF1CAE"</font></td>
            <td width="10%" bgcolor="#ff00ff">Magenta<br>"#FF00FF"</font></td>
       </tr>

       <tr align="center">
            <td width="10%" bgcolor="#9370db">Medium Orchid<br>"#9370DB"</font></td>
            <td width="10%" bgcolor="#9932cd">Dark Orchid<br>"#9932CD"</font></td>
            <td width="10%" bgcolor="#db7093">Medium Violet<br>"#DB7093"</font></td>
            <td width="10%" bgcolor="#cc3299">Violet Red<br>"#CC3299"</font></td>
            <td width="10%" bgcolor="#9f5f9f">Violet<br>"#9F5F9F"</font></td>
       </tr>
</table>


As you begin to write, keep things separated however you wish. You will develop a certain style of your own as you type out the code. You need to decide how you will keep things orderly, so that you will know what has been done with the code (so next year you can still recognize it). If you plan to go on to become a programmer you may wish to use the tab indented methods, so you don't wind up relearning things later on. For myself, my method stems back to the 70s when I began working on computers and coding pages of type for a Grapic Arts company. I stick with it only because I do it without thinking about it. My main beef with the indent system is that things sprawl out all over the screen horizontally, and you need to scroll horizontally. I hate scrolling horizontally, so I don't use that method.

It used to be that you could write your code in all lowercase, all capitals, or even a mix of both. Browsers will still read code written that way thanks to backwards compatibility. For the future of code you will need to write in all lowercase. Consequently all the code you will learn here is lowercase and I suggest you only use lowercase yourself.


< >



Daily SEO Tips eMail
SEO Blog
SEO Training
SEO Basics 101 eBook
Learn All the Basics to SEO





© Copyright Night Train Web Productions Night Train Web Productions — All Rights Reserved
No Part of This Work May be Reproduced by any Means Without Prior Written Authorization
8153 / 051006 / 304084