~~~~~Enlarge Linked Pictures to Full Size to Read~~~~~

What is a Webpage?

A webpage can be a personal Homesite or a Commercial Site and is constructed of HTML commands that are converted to binary by the computer and downloaded when anyone visits the site. These commands are accompanied by pictures and text that make up the webpage so that it appears on everyone’s computer screen approximately the same as when it was designed. Unfortunatly there are a variety of platforms, screen sizes and settings that cause it to be rendered somewhat differently for some viewers. (More on this later) The HTML commands are encoded in an HTML editor that assembles them as a series of tags and text. Luckily it is the simplest of all coding to learn and you are encouraged to try to get an understanding of the process as well as learning the tags and their idiosyncrasies. HTML stands for Hypertext Markup language and simply instructs the computer using your homepage where to put the pix and text, what colors to use and where to go when a link is clicked. As you read these instructions refer to a list of terms used in these lessons and try to become familiar with their meanings.

The Banner at top shows the basic form of a webpage and you will notice that html, head and body are surrounded by sideways V gizmos that are called left and right tag indicators and have a forward slash in the closing tag. The <BODY> tag indicates that the main part of the page will begin and the </BODY> tag indicates that the body ends. (Notice the slash in the closing tag) This is common with all tags. They must begin and end with this type of bracket, only, and with this exact syntax. Naturally there are exceptions to this rule just to make it more fun. Fortunatly for the beginner there is a way of making webpage’s that don’t require you to learn any tags but it’s a real good idea for you to understand the basic concepts. This secret weapon is called "Templates" and only requires the user to add the pictures, thumbnails, banners, text and links in the appropriate slots. Once you learn to use the templates in their limited form you can then proceed to get fancy with your own layout and other variables as you progress beyond the beginner stage. The templates provided here are the ones used in my pages so you will wind up with a site that looks a lot like my impression of an art page type of site. Remember that even if you do pay someone $50 per hour to build your site, you will still have to be able to do the updates or else hire a webmaster to do them for you at the same rate. These lessons could save you a bundle or you could hire Web Design at $20 per hour which I consider to be quite fair and reasonable. Still, the process can consume a considerable amount of time. These two paragraphs took well over an hour to construct, not to mention the thought that went into planning the approach.

~Read this whole page first then go to "Secondary Links"~

~Make sure you follow these Good Practice Tips~
Homesite HTML Editor

You will need three GUI’s to construct and maintain your Website and these are the software that I recommend. There are many HTML Editors that are available but some are just better than others. Unfortunately Homesite is no longer offered by Nick Bradbury but is included when you buy Macromedia Dreamweaver, which is easily the best editor available but way too large and all inclusive for the average user. Homesite is still the best basic editor and there are ways of getting it, but really any editor with a 4 or 5 star rating will do quite nicely.(Click to Enlarge, full size to view properly)

~Secondary Link.....Using an Html Editor~
Paint Shop Pro or Photoshop

These days Paint Proggy’s are everywhere. I like Jasc Paint Shop Pro myself because it isn’t monstrously large like Photoshop complete with so much mega-overkill that you will never use 95% of it but if your machine can handle the sheer size of it then use it. These instructions will work on any paint program but are specifically for PSP. You need one of these to make thumbnails and I actually use Macromedia Fireworks because of the vast quantity needed, also for resizing the jpgs that come from the camera because it knows how to maintain the integrity while shaving the fat and it does batches. PSP is best for the Banners at the top of each page, also for special thumbs that are one offs.

~Secondary Link.....Using a Paint Program~
File Transfer Protocol Graphic User Interface

Your FTP program has not been mentioned yet but it’s the thing that gets your page, when you’ve finished it, onto the ISP webspace where it will reside waiting patiently for hits. Each of these GUI’s look very similar as they all show the contents of your computer on the left side by default and it is possible to do all three operations with a single GUI such as the HTML editor but a dedicated bit of software for each is much superior. You can try another ftp client such as the one included in the editor but don’t be surprised if it malfunctions. Plus WS FTP Pro has all the bells and whistles. If cost is a problem with the procurement of these programs remember that they give a trial period, for free and P2P or cracks can permanently solve any dollar dilemma but you didn’t hear that here.

~Secondary Link.....Using an FTP Client~
Cascading Style Sheets Editor

Apart from the above three very necessary webpage tools you might want to get Topstyle’s CSS Editor which is also included in Dreamweaver but in the "Lite" form is free and useful to puzzle you even further. The idea of Cascading Style Sheets is to get away from making a huge number of tags on each page that relate to many of the basic qualities of the pages such as text style, size etc. Also it is recommended in all the latest versions of the HTML language and almost universally supported but a real bug to understand and use when you are first struggling to grasp markup. All my templates have this problem solved but not in the most conventional way but that’s a whole other topic.

~Secondary Link.....Using CSS~
The Fieldset Webpage Block

This is your first coding lesson. Notice that this little block goes all the way across your screen and is surrounded by a line and has a cute "LEGEND", as it is called, in the top left corner. There is a thumbnail on the left, in this case and if you click on it you will see the code for this "FIELDSET" as it is referred to by it’s tag. It is very useful for combining a picture with the appropriate text and keeping it all together so there is no mistake about what the text refers to. You will notice in the Source Code (which is what the code is actually called) that there is a part that says align="left" in red and blue near the top. This is called an "Attribute" of the Fieldset and is an error in HTML 4.0 transitional (mentioned at the very top of the Banner on this page) but will render properly most of the time regardless. HTML is quite forgiving as coding goes because the page will render even if it isn’t strictly proper unlike java which crashes at the slightest syntax problem. Your thumbnail can be a .gif or .jpg for fast loading or a .png if you need better quality. If you use this as a template or part of one, you just need to change the things in blue to suit your content and also the text to whatever is appropriate.

~Secondary Link.....Html Templates offered here plus How to use them~
Hints for Good HTML and Computer Practice
  • Use Keyboard for Cut, Copy, Paste............Good Practice is to highlight area to be changed, to cut use Ctrl + x, pressing Ctrl first, then x to remove highlighted area and save it in "paste". For "Copy" do the same using Ctrl + c, and to paste that which has been Cut or Copyied press Ctrl + v. Remember that only the last Cut or Copy remains in the Paste waiting to be used on any document in your computer. To Paste multiple copies then just press v again and again while holding Ctrl. With practice you can do this with one hand. Ctrl + another key will do a variety of things....experiment.
  • Use Highlight Properly............If you wish to replace text in an area then just highlight and start typing, no need to delete, that will happen when you begin to type. To delete press delete or backspace.
  • Using Help Files............If you happen to be lucky with help files then go ahead and use them but if they always take too long and never come up with what you want then just pick your keywords and "Google" it. For "Syntax", as an example, use keywords html and syntax otherwise you will wind up with pages that just happen to use the word.
  • Placement of Keybpard and Mouse Pad............If you find that your left hand is doing too little then do as I do and learn to put your Mouse on the left hand.
  • Right and Left Click............On a Mac there is no right mouse click but Windows and Linux offer many advantages for Right clicking.....Learn them.
  • Backspace, Enter and Spacebar............These skills are most necessary for any text editing. When adding text use "Insert" or press same key to "Replace" text.
  • Use Keyboard for Pix............Enter will bring up picture, Backspace will go to previous picture, Spacebar for next one, Backslash for Full size picture, + to enlarge, - to reduce and mouse to enlarge a specific area....learn these.
  • Using the keys F1 to F12............These are very handy and can be programmed to do various operations. For example F5 is set to default as "Refresh" and must be used in a variety of situations. F11 will fullscreen your browser removing all the bars except the scroll.....Learn to use them.
  • Screenshot or Screen Capture............Most paint or filing programs have the ability to get a screenshot, which is just a picture of your computer screen that you can use as a .jpg as it is or edit it by cutting out the part you want. To use the Screenshot feature in ACDSee go to "Tools" and click "Screen capture", click "start now", then go to the screen you want and use Ctrl + Shift + P to capture....Read instructions (set up with "Content only" in Source and "File" in Destination on the popup.) ACDSee is just an example, learn to use the program that will allow screen capture and know how to start it and use it.
  • Most Important is Filing and Backup for your Website............How to set up your computer with a filing system for your Website is located here
  • Backup is Very Important............Regularly backup your entire site onto a folder called "Your Website Backup" or whatever. Also put the whole thing including the original pictures from your camera onto a CD or DVD and send a copy to your nephew just incase your house burns down.
  • Windows ’98 and ’95............I used both of these for several years and found out that it’s very important to hit "Save" very often when writing or doing html. You can write for an hour and then the platform will crash at any time and all your work will be lost.
  • Cetus Wordpad............Even on new Windows platforms there is no spellchecker in Wordpad and that’s where you should be doing all your text and saving the files there in plain text to transfer them to the Html Editor later. Cetus Wordpad is a free download that has a spellchecker.....or get it here .....If you are on a Mac then you have it made.
  • Zips and .Exe’s............Learn Winzip or Winrar and also how to install software.....If you can’t use these then quit right now. Seriously this is totally fundamental. Your computer comes with much software and a lot of it is included in the platform (Windows Vista or XP) but it can’t do things in a professional manner so you need a proper editor, paint program and ftp.
  • Word wrap or Nowrap............Your Html text should be allowed to "wrap" to window when included in your webpage as a paragraph or a sentence that goes all the way across the page or more. It will automatically wrap to the size of the screen that is used by someone viewing your site. On your 1024 pixel screen, for example, it will go to the width of the banner or largest pix or else the full width of the screen but on another viewing on an 800 pixel screen it will size itself. There are exceptions but it’s important to allow wrap in html but make sure you wrap to screen in wordpad or the paragraph will be one really long line....More on this in "Using the Html Editor"
  • Notes and Snippets............When you find out how to do a difficult task, then name it and add it to a wordpad document with a full description of what you have learned. You can refer to it later when your mind is crammed with other nonsense and ease the demand on memory. Also include what is called "Snippets" which are short, discrete portions of Html that work. For example, if you make a Table using a wizard in the editor then save it as a snippet before you begin to mess it all up with your mistakes adding the things that go into the table.
  • The Power of "Save As"............If you are used to saving by just clicking save then learn to use "Save as" in the file menu to change the name of the file, change the location of the file or to place it in multiple locations. In the html editor you can save your page to the proper folder and then copy it to backup by changing the destination name and "save as" in a new folder.
  • "Undo" and "Redo"............Real handy for fixing errors in editor and paint.
  • Print it............One of the best learning tools is to print your lessons and reference and take them to the coffee shop or use for bedtime reading. This does two things. It gets you away from the computer, giving a more pleasant reading medium than the screen and it gives you a reference that is right at hand when you are using the computer. For this purpose I provide a Print and Easyread copy of this page
  • Renaming a File............Slow mouse clicks are another skill needed. Click on any file twice and it will open but if you click twice slowly it will just open the renaming ability, a third click inside the box will locate the cursor or a right click will allow you to copy or paste the name of the file and finally a click outside the box or continuing with another operation will leave it unchanged. This is used for renaming a file that comes from the camera and in the html editor, to get file names from the file panel at left for insertion into the template at right.
Definition of Terms Used
  • Banners, Mini Banners............A Jpg or Png at the top of the page. A mini banner is a small version of a banner used as a link.
  • Batch, Batches............The ability of program such as PSP to do the same change to multiple files such as thumbnail making.
  • Binary............The term for a file used by a computer. The picture in a film-type camera is analog and when put into the computer it becomes binary.
  • Capture, Screenshot, Screencapture............The ability of a program to capture the view on any computer screen as a picture.
  • Code, Coding............The letters, numbers, special characters and whitespace used to write html or script. The computer turns it into binary code automatically or with a compiler.
  • Cracks, Crack, Serial............You didn’t see this here! If you would rather use software without paying the ridiculous prices asked then you search for a crack or serial number to allow you to open it and use it beyond the expiry date.
  • CSS, Cascading Style Sheets............An Html development to reduce repeated commands.
  • Download, Upload............Downloading is how you get stuff from other computers and Upload is sending stuff to your ISP or board or newsgroup.
  • Editor, Html Editor............Software used to write Html.
  • Feature Link Bar............The link bar just below the banner.
  • FTP, File Transfer Protocol............The software used to upload to another computer such as your webspace or ISP.
  • Frames, Noframes............A system of writing Html used in business sites and others in which several pages are on your index page covering partial sections of it.
  • General Link Bar............The General bar is at the bottom or side of the page containing all your links.
  • GUI, Graphic User Interface............The view on your computer of any piece of software or program.
  • Homesite, Page, Homepage............Your personal or business homepage space provided by your ISP or hosting or your own computer used as a server.
  • HTML, Hypertext Markup Language............Code used to make a webpage.
  • Highlight............When you place the cursor (mouse) in a spot and drag it to highlight some text.
  • ISP, Server, Internet Service Provider............The outfit that you pay for connection and space for a page.
  • Jpg, Jpeg, Gif, Png, Bmp............Usually begin with a dot and are called extensions for pictures.
  • Java, Perl, Script............Like Html but always require perfect syntax to function and are used for things like shopping carts and hit counters.
  • Local Computer, Remote Computer............Local is yours and remote is your ISP’s.
  • Markup............See Html.
  • Mpg, Avi, Wmf............Movie files.
  • Nowrap, Wrap............In a text editor such as wordpad you can wrap to the ruler on the top or to the window available. In Html you can wrap to a preset (See the section on writing homepage’s) or use nowrap which allows the text to fit the users space available.
  • Paint Program, PSP, Photoshop............A program used to manipulate text and pictures for making banners, thumbs and sizing pictures.
  • P2P, Peer to Peer............Bitcomet is the best known these days and may be used to purloin digital stuff that you don’t want to pay for. (again ...I didn’t tell you that.)
  • Snippets............Pieces of Code that do not function by themselves but can be added to your Html or script.
  • Table............A way of locating stuff on your page in Html. (See the section on writing homepage’s)
  • Tags............The term used to describe the Html commands located between the V braces.
  • Template............A preformed html page that only requires your choice of data placed in the correct slots and a small amount of html knowledge.
  • Text............Refers to writing that will show up on your webpage.
  • Thumbs, Thumbnails............A small version of a picture that links to the large one or another page.
  • Source, Source Code............See Html. If you want to see the source code of any page in your browser such as a page you found on the web, click "View" at the top of the browser and then click "Source". A new window will open showing the code provided it isn’t in "Frames" and you can copy and save to use as a template.
  • Syntax............Correct syntax means the letters, numbers, special characters and whitespace are all in the proper order. Html will allow a certain amount of error especially with regard to tag order and whitespace.
  • Webspace, Webpage............You pay your provider (ISP) for the ability to connect to the web, email, newsgroups and webspace. If you are connected you already are paying for webspace. Your webpage is what you put there.
  • Whitespace............Is a blank space where one or more letters or numbers could fit.
  • Zips............Both winzip and winrar will package a folder of information into a compacted sending device and give it a .zip extension. You need one of these programs to unzip a zip and some programs come in this form.
 
 ~These Feature Galleries lead to other Sub-galleries~
The Gang  The Institute  Written Articles  Froggy & Cats  Eye Puzzlez  Web Design and Development
Ruby’s Creative Arts  Ruby’s Garden  Ceramics  Decorator~Designs~Vessels  Studio  Kayaks & Trimaran
Norm’s Custom Shop  Digital Photo Gallery  Garage-Studio  Bicycles  Lotus  Motorcycles  Zdravko Z28  
Email is to webmaster nsoar@tbaytel.net

View My Stats

See Full History Hits and Stats

©