How to Create a Simply Web Page - Part 2
Doing simply Web Pages is both fun and creative and also very very easy.

AND, too be Fair - Be aware, It is very very very Time Consuming.

A Web Page can be created by using a simple Text editor all Windows computer have and that is the program "NotePad"

Basic Coding is simply and to keep this simply, I will not go into the details of WHY and only explain how.

All coding to start a Feature is placed between brackets i.e.   <CODE>

All coding to stop a Feature is placed between brackets with a slash i.e.   </CODE>

Coding is so simply that <b> turns on BOLD print and </b> turns it off.  i  is Italics and  u  is for underline

All Web Pages start off using the following Code:...........


<html>
<head>
<title> What is here is what shows up in Favorites or Bookmarks and not the page </title>
</head>

<body bgcolor="#000000" link="#ff0000" alink="#7f00ff" vlink="#152dbc">

The bgcolor= sets the background color for the page.
The link= is the color of a link before it has ever been clicked on.
The alink= is the color while it is being clicked on.
The vlink= is the color it will be after clicking on it so it will show you that page has been visited. This is why Google links always show a different color after visiting a web site and coming back to Google.

To use an image for a background you change the bgcolor= attribute to background="images/bg-moon.jpg" --- This uses the image named bg-moon which is in the sub-folder named IMAGES. To learn more about background images, Click:...  HERE

To obtain a list if the different color numbers for use with background and fonts, Click:...   HERE

To see the effects of using the different "Font Sizes", Click:...   HERE

<center><font color="#eaeaae" size=+4 face=arial><b> This is the Title Line that Shows up at the Top of the Page </b></font> </center>

The <center> centers the line in the page
font color= uses numbers and letters to set the fonts color
size= sets the size of the characters
face= set the type font
All things turned ON must be turned OFF and thus </b></font> </center>

Code to insert an image is:... <img src="images/img-01.jpg" border=0>
The image code is retrieving the image named IMG-01 from the sub-folder named IMAGES
To center the image put <center> before the code and </center> after the image code.

You can resize an image by adding after border=0 width="50%"> and the image will be half the width of the screen. You can change the height also but, that takes a lengthy explanation that is better done on another page so this one is kept simply.

However, That explanation is available for reading:...   HERE

Link coding to go to another web site from your web site would look like this:......
<a href="http://www.spacewalkoffame.com">U. S. Space Walk of Fame</a>

Link coding to go to a page on you own web site would look like this:......
<a href="ksc/saturn.html">Saturn V - Apollo Moon Rocket</a>
Above coding would retrieve the SATURN.HTML Web Page from the sub-folder named KSC

Code to indent something about 1 inch is <blockquote> Put in 2 <blockquote> and it will indent 2 inches.

The browser doesn't recognize but, one space between words. --- To add extra spaces, put in &nbsp; as many times as it takes and for lots of spaces use a space between the &nbsp;.

<p> is a paragraph but, the browsers will only recognize 1 <p>

<br> is a Line Break and the browser does recognizes all <br> so, if you want to add more spaces down the page put in several <br>

The code <hr> puts a line in across the page using just the code <hr>. To control width and height and location add attributes as shown here:.. <hr width=25% align=right size=8>

Here's one of my tricks --- Some times between stuff (especially images) a <p> is more space then I care for and so I use the code line of:..................
<center><font size=-2> &nbsp; </font><center>
The -2 font size in a line uses less space then does a <p> code and since I use an invisible space nothing shows. I actually put in -6 but, the browsers don't go smaller then -2 but, I use -6 for good measure. :-)

There are other codes like <li> which puts a DOT on the screen to preface a sentence and a Google Search for HTML Coding will produce Gobs of sources that will provide information on all the HTML codes

  • Here is the LI code
  • My intent here is to show Friends and Acquaintance how to do a Simply Web Page so they can build a simply Personal Web Site.

    I urge anyone creating a web site large or small to consider expansion over the years and to organize the site using lots of Sub-Folders so it is easy to remember the structure and organization.

    I keep all my main images in a Folder named "images" and if there is a Sub Folder in my set up I will have a secondary image folder for the specifics of that page. However, the images required for the standard bottom of my pages will be retrieved from the main image Folder.

    It is therefore important to know if you go down a Sub-Folder the code to step up one layer to the Main Image Folder is ../images. In the event the site has two layers of Sub-Folders then the way back to the Main Image Folder is ../../images

    I make lots of comments in my Web Page Coding so that 6 months from now the page is easy to work on when I am trying to find something in the coding.

    The code to keep comments from showing on the Web Page is an explanation mark and HTML rules say comments should be coded like this:... <!-- Comments --> Interestingly enough this old guy has reasons to think he may have been the one who caused the two dashes within the <!-- --> to become part of the W3C compliance standard.

    I will be first to admit all my Web Sites and Web Pages follow the exact same format. I like to think I got it Right the First Time as the Saying Goes.

    I use lots and lots of Tables in my Web Pages because a lot can be done with Tables and I am very fond of placing all my links within Tables.

    Shown Below is how I do what I call my "Link Menus"

    Ray's Web Site Space Walk of Fame Lueders High School

    The Coding which created the Menu Above is Shown Below between the Red Lines

    <!-- Begin Table Menu-1 -->
    <center><table border=4 cellpadding=2 bgcolor="#eaeaae" width="80%">
    <tr align=center>
    <td width="33%"><font size=-1 face=arial><b>
    <a href="http://www.raysmyth.net">Ray's Web Site</a> </b></font> </td>
    <td width="34%"><font size=-1 face=arial><b>
    <a href="http://www.spacewalkoffame.com">Space Walk of Fame</a> </b></font> </td>
    <td width="33%"><font size=-1 face=arial><b>
    <a href="http://www.raysmyth.net/lhs">Lueders High School</a> </b></font> </td>
    </tr></table> </center>
    <!-- End Table Menu-1 -->

    Excluding Colors and Images - My standard Bottom for all Pages
    [  Current Page - TOP  ] [   Menu - Main  ]

    The Coding which created the Above is Shown Below between the Blue Lines
     
    <!-- Begin Bottom -->
    <center><img src="../images/ln-red-1.jpg" width="80%" height=4></center>

    <center><table border=0 cellpadding=0 bgcolor="#eaeaae" width=80%>
    <tr align=center>
    <td width="45%"><font color="#ff0000" size=-1 face=arial> <b> [  
    <a href="#PAGE-TOP">Current Page - TOP</a>  ] </td>
    <td width="10%"><img src="../images/logo-usa.jpg" align=middle> </td>
    <td width="45%"><font color="#ff0000" size=-1 face=arial><b>[  
    <a href="../index.html"> Menu - Main</a>  ] </b></font> </td>
    </tr></table> </center>

    <center><img src="../images/ln-red-1.jpg" width="80%" height=4></center>
    <!-- End Bottom -->

     
     
    Both of the Above was Created using Tables and I have available a Web Page About Tables that can be reviewed:...   HERE
     
     
    If desired a Copyright can be put on the page and this is how I do mine
     
    Copyright © 2010 by E. Ray Smyth

    The Coding which created the Above is Shown Below between the Green Lines
     
    <!-- Begin Copyright -->
    <center><img src="../images/ln-blk-1.jpg" width="40%" height=2></center>
    <center><font color="#eaeaae" size=-1 face=arial><b> Copyright © 2010 by E. Ray Smyth </b></font></center>
    <center><img src="../images/ln-blk-1.jpg" width="35%" height=2></center>
    <!-- End Copyright -->
     

    For the Record:..   All web pages must end with:...  

    </body>
    </html>

    Last word of advice is to type all coding in Lower Case Characters. Page Links must now match verbatim upper and lower case and you will just save yourself lots of time and heart ache by keeping all coding in lower case.

    AND, YES you can go get one of those fancy Page Makers like Front Page or Dream Weaver or Web Author and many many more. Fact is, you can borrow one of my 8 or so automate Page Make Programs because I find them disgusting to use and I find coding it by hand and using cut-copy-paste saves me time and trouble and produces a page more to my liking then any to the Automatic jobs. But, each to his own.

    You will need to learn one more thing and that is how to transfer files because once your web site is created on your own computer you will need to upload the files to a server on the internet.

    I have never known of an ISP not providing free space for a Personal Web Site. So, Anyone on the Internet with an ISP already has a place to install their web site but, you will need to learn how to upload your Web Pages to the ISP and that has been covered:...   HERE

    I hope my explanation of How to Create a Web Page is helpful to both Friends and Scoundrels alike and "GOOD LUCK" to All who jump in to the fun of Creating Web Pages.

     
    Have a Question - Ask The Head Dunce by Clicking:...  HERE
     
    Go To Part 1 Go To Part 3 Go To Part 4
      [   Current Page - TOP  ] [   Menu - Dunce's Corner  ]  
     
    Copyright © 2010 by E. Ray Smyth