Learn HTML Coding Here.

Source Page: There is a source page behind each web page that you observe on a browser. You can edit the source page. It has some simple coding around the text to tell the computer how to handle it.

With Windows operating system, the source page is on Notepad, or you can save it on Notepad if it isn't. Handling it on Notepad is infinitely easier than using special software, which tends to rip it out of your hands and mangle it in ways no rational person would desire. Modern web pages are being mangled with oceans of unnecessary garbage including repetitious patterns which take up ten times as much data as simple coding requires. This is an ethic. You can defy that ethic with hand coding.

You find the source page by clicking VIEW/SOURCE on the browser (or on right click of mouse); or there might be an edit button going to the source page.

You can synthesize a source page from scratch on Notepad by simply adding the suffix (extension) html in place of txt when doing SAVE/AS or where files are stored.

The Hype

HTML coding is easier to learn and use than software which is designed to do it for you. To use software is like changing oil in an auto using a robot from your living room. It would take a week, while it only takes ten minutes with a wrench.

On top of that, hand coding avails all options at your finger tips, while software will only do what someone predicts you will want to do. The difference shows up in the diversity of tables and colors.

There are only a couple dozen things that have to be learned for hand coding. Most are memorized in minutes. A few details are looked up when needed. A written reference is a must for getting started and checking some details.

The written reference needed is so simple that I decided to put it on this web page, so you wouldn't have to buy a book, at least for the simple basics. The complexities get infinite for scripts and programming, but I would discourage scripts for the common person. Except for a response box, where the scripts can be found prefabricated, scripts do nothing but replace the simple and effective basics with infinite complexity behind the scenes. Those complexities take ten times longer to download and produce problematic results.

Once a page is created, it can be used as a template for new pages by simply making modifications instead of starting a new page from scratch. There is a danger in doing this. If you accidentally hit the "save" button, instead of the "save as" button, after making modifications, the original disappears. I've done that many times. Therefore, it is extremely important to have more than one copy of the original before starting on modifications. An easy way to do this is to copy the page into a separate folder before starting. It could be called the modification folder.

The Hypertext

General Procedure

Web pages are created on Notepad, which is a simple word processor without formatting. Wordpad saved without formatting can be used. Formatting means things like italics and indents. Browsers do not read such formatting, because they want to see all of the information in the visible coding with the text. The purpose is to make sure all browsers get the same information independent of software peculiarities.

You can create a web page on a word processor and then convert it to HTML on Notepad or Wordpad. But I find that there are problems with that, and it's a lot easier to start with Notepad. The only thing missing is a spell checker. To spellcheck, you can type normal text on a word processor and then save to text format. If it ends up on Wordpad instead of Notepad, you can use it on Wordpad without formatting, or change the suffix from doc to txt, which usually moves it from Wordpad to Notepad, but eventually the suffix needs to be html. Once you change it to html, it will read on a browser when clicked.

Another way to convert from a complex format to notepad is copy and paste. Pasting onto Notepad strips away most formatting. Sometimes an invisible line break gets carried along. It will not show up on HTML. Removing it involves deleting an invisible spot at the end of each line, which is not difficult when starting at the bottom of the page and working up.

The easiest way to take material from a preexisting HTML page is not from the source page but from the browser screen. Dragging across the screen while holding down the left click on the mouse will highlight it for copy and paste.

The browser which is easiest to use for this procedure is Microsoft Internet Explorer, because it opens to Notepad when viewing the source. (Hit View/Source to check this page.) Getting from Netscape to Notepad can be more complex.

To observe the result of what you are editing, you simply hit the save button and then refresh the page on the browser.

The thing that makes hand coding fast is that everything is copied and pasted except new material. This means whole page templates, links, embedded tables, etc. This is much faster than going through drop down menus and never finding the right procedure.

Use ctrl+C for copy, ctrl+V for paste. To select, use cursor start left click—shift hold down—cursor end left click.

When html pages are saved, you add the suffix html and send them to a folder, as found on the Windows Explorer. You have to know how to create folders and move files around in them using Windows Explorer. When clicking on a file with the suffix html, it opens with a browser (the one set as default).

The Simple Codes

The top of the page usually starts with an announcement such as this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Then this:

<html>
<head>
<title>Something.</title>
</head>
<body>most everything
</body>
</html>

Caps and noncaps are interchangeable in HTML coding.

The "title" is not seen on the page. It is seen on search lists. The heading seen on the page goes in the "body" with the rest of the text.

Each paragraph starts with <p>, and it ends with </p>. It's not uncommon to use only one, at start or end, because all they do is create a double space, and only once. You can use two forced breaks, which is this <br><br>. If you just use one, you get a single spaced break instead of a double spaced break.

Only one space at a time will show (between words or sentences) unless forced spaces are used (called "nonbreaking space"), which are coded as   (six components). These forced spaces can be repeated any number of times. Indenting can be done that way.

That's about it, except for a few more details.

The Use of Tables

Locations on a page are determined through tables. Tables have rows and columns of cells. Each cell is a location in the table, which might be part or all of a page.

Basically, a table looks like this:

<table><tr><td>something
</td></tr></table>

First a row is specified as <tr>. It must be followed by <td>, which indicates a cell within it. Numerous cells can exist within a row, and numerous rows can exist within a table.

A cell can span more than one row or more than one column. To span three rows, the code is this: <td rowspan=3>. To span three columns, the code is: <td colspan=3>.

Here's an example:

A	B	C
	D

Cell A has a rowspan of 2, and cell D has a colspan of 2. Colors are added to cells by putting "attribute" markings within the "tags." The overall table color is blue, coded as this: <table border=3 bgcolor="#ccddee">. bgcolor specifies it. Notice that a border is also added. The 3 means three pixels wide. Usually, the border is invisible (border=0). Cell D is this: <td colspan=2 bgcolor="#eeddee">.

The entire table code is this:

<table border=3 bgcolor="#ccddee">
<tr><td rowspan=2 height=105> A </td>
<td bgcolor="#ddeebb"> B </td>
<td width=115><center> C </center></td></tr>
<tr><td colspan=2 bgcolor="#eeddee"> D </td>
</tr></table>

Notice that the cell width or height can be specified in pixels as a code within the cell tag. This might look slightly complex, but it would take much longer with software, and probably would not be possible at all.

Notice that C was centered within the cell. Technically, the method of centering is <div align="center">something </div>. But an abbreviated form is usually used as <center>something</center>. This applies outside of tables as well as within them.

To put space around text in a cell, add this within the table marking: <table cellpadding=15>. This puts 15 pixels between the text and edge of the cell. To put space between cells, use this: <table cellspacing=12>. This puts 12 pixels between each cell. The difference between cell spacing and cell padding is only visible when adding colors. The color will stay within the cell, and cell spacing will be the color of the page.

Additional marking details are on a separate page.

Making Links

The basic link marking is this:

<a href="label.html">something</a>

The "something" is what is visible. It can be any description. The page which is contacted is defined by an address, which here is "label.html". This is a page label for links which do not go outside the same folder or directory. For the external ones, a total address must be used. It must start with http:// plus domain, then folder and then page. An example is <a href="http://nov55.com/mr/index.html">Mushroom Home Page</a>.

Links can go to places on a page, but the destination has to be named. To name a spot on a page, the marking is <a name="pointX">word</a>. The "word" can be anything on the page. It will look the same as if it weren't a name. The name "pointX" can be called anything.

When linking to a named location on a page, the name is added to the end of the page address like this: <a href="label.html#pointX">something</a>.

Meta Tags

Meta tags are sometimes placed directly under the title at the top of the html page. Their purpose is to inform search engines.

The two most common meta tags describe the page and list key words. Here's what they look like:

<META name="description" content="Describe the page here with a sentence or two.">

<META name="keywords" content="trees, cars, rocks, and combinations, oceans">

The quotation marks have to be used exactly as shown.

Coding Details