Valid CSS level 2.1 Valid HTML 4.0 Transitional
Ursus Grande Services  —  Custom Software Development
--MONTH-- 20YY        Ursus Grande Services ö
For project estimates, contact Ursus Grande Services.    No project is too large or too small.

   Website  Developer's  Guide  1.0.0109.1239   

This guide is the property of Ursus Grande Services, ©2012.  You are granted full permission to use this information with the sole restriction that if you republish it in any form; electronic, printed, verbal or otherwise; that you may not charge any fee if you distribute it, and that you make clear attribution to Ursus Grande Services.

The goal of this guide is to provide information to assist website developers.  We are not trying to tell anybody what to do nor how to do it, but rather are simply presenting information to help developers make informed decisions.  We make no claim(s) that the information herein is “the best”, and we make no claim(s) regarding the accuracy of information published at any sites linked to.  Use at your own risk.

If you are an advanced developer, you are not likely to need any of the resources listed below.  However, there is much offered to help the inexperienced developer succeed in their endeavor to create a website.

IMPORTANT: There are many links to external websites on this page. Most of those external sites contain reference materials, tutorials and/or other potentially helpful information.  However, please be aware that in many cases those sites may be old and in most cases they do not display a “posted” date.  Some show a “browser workaround”, which in fact may pertain to very old and rarely used versions such as Internet Explorer 5 or 6 for example.  Even so, there is still much good and helpful information there.  Be aware that not everything you read remains accurate today.


FIRST THINGS FIRST:
There are two basic paths to begin creating your own “Do-It-Yourself” website....
 •  Obtain a domain name and a  “pay-for-service”  hosting service for it.
 •  Obtain a domain name and use one of the many free hosting services.

You can read about domains and domain names at Domain Name Basics: An Introduction

Our domain name is ursusgrande.com.  An example of a web site at a free hosting service is the Lower Dover Field Journal.
That site is assigned a "subdomain" (ldfieldjournal) at the domain "wordpress.com".  Control of pages on a free site is limited.

As you may expect, a free hosting service does not provide the robust features and capability of a paid hosting service.  A paid hosting service will offer comprehensive email account services, MySQL database support, PHP, CGI and other scipt support, password-protection where wanted, numerous web applications such as a Calendar, Project Manager, Newsletter Management, Shopping Cart and other eCommerce services, Blogs, RSS Feeds, Content Management Systems, Photo Galleries, additional layers of security, and much more. Those services will generally be included with packages running as little as $5/month.

A free hosting service does not give your site the same potential visibility to Search Engines (Google, Bing, Yahoo, etc) that you will get with a paid hosting service.  If you want people to find your site via Search Engines, you should retain a paid hosting service.

HTML — HyperText Markup Language, is the basis of web pages that comprise a web site.

  You can read about HTML basics at these pages....
   •  HTML Introduction
   •  HTML Introduction

To enhance the capabilities of HTML, there is CSS (Cascading Style Sheets) and JavaScript....
   •  CSS Introduction
   •  Cascading Style Sheets
   •  JavaScript Introduction
   •  JavaScript

To create your web pages, you should know (or learn) the following....
 •  HTML and CSS
 •  JavaScript
 •  How to use a Text Editor
 •  How to use a Spell Checker
 •  How to use a Grammar Checker
 •  How to use an Image Editor
 •  How to use a FTP Client

Depending on the level of complexity of your site, you may not need or want CSS or JavaScript.  Depending on the content of your site, you may not need or want to check spelling or grammar.  You may not need or want to use an Image Editor.  Those are decisions you have to make.

To “quick start” a website you can download templates from numerous sources such as WebPageTemplates.org.
The content of the templates can help you learn and/or improve your knowledge of HTML and CSS.  It's a beginning.

     
NOTE that at this point in time, this page focuses on software for Windows™ users only.  When time permits, we will add a section for Linux software.
Page last updated: --MONTH-- DD, 20YY
 
RESOURCES:   Related links to reference materials
WEB PAGE DESIGN & DEVELOPMENT
EDITOR:  HTML-Kit http://www.htmlkit.com/
The HTML-Kit is freeware — no ads, no disabled features. It is a free application for editing text files such as HTML, CSS and more.  BUT... to get the full power of a development environment you should purchase the "Tools" version of this application, which current sells for $60(US).  Even without the paid version, HTML-Kit is a very good application.  There are also hundreds of free plug-ins available which make HTML-Kit even more powerful.
HTML-Kit runs as a stand-alone program on your computer.  It offers a development environment that is easy to customize to your likes/needs.  However, it *IS* more for experienced HTML developers, and for a novice may be somewhat difficult to learn.  BUT... there is a very large user-base for community support, so you can always get help if/when you need it.
EDITOR:  NetBeans http://netbeans.org/index.html
NetBeans is open-source freeware. It runs as a stand-alone program on your computer.  It offers a comprehensive development environment that is easy to customize, and is very powerful.  However, it *IS* more for experienced HTML developers, and for a novice may be somewhat difficult to learn.  There is a very large user-base for community support, so you can always get help if/when you need it.
NetBeans offers very good CSS support, and can export inline CSS to an external stylesheet file.  NetBeans works well for C/C++, HTML, Java and PHP development (and more), offers code-text coloring that you can customize, and there is extensive online support, documentation and tutorials... a huge ✚PLUS✚ for NetBeans.
SPELL CHECK:  by Daniel Wood http://dictionarycom.com/speller/
This application has a data entry window into which you can paste whatever text you want to spell-check.  Results are quick, and appear to be very reliable.  But it is free, so no guarantees.
SPELL CHECK:  AnyTypos http://anytypos.com/
This application has a data entry window into which you can paste whatever text you want to spell-check.  Results are quick, and appear to be very reliable.  But it is free, so no guarantees.  This application is automatic — no clicking required after you paste text into the data entry window. And no pop-ups, either.
SPELL CHECK:  Orangoo http://orangoo.com/spellcheck/
This application has a data entry window into which you can paste whatever text you want to spell-check.  Results are returned in a pop-up window, so your browser must be configured to allow pop-ups from this site.
SPELL CHECK:  http://www.spelljax.com/
This application has a data entry window into which you can paste whatever text you want to spell-check.  Results are returned quickly, and appear to be very reliable.  No pop-ups at this site.
GRAMMAR:  Paper Grader http://www.paperrater.com/free_paper_grader
This application has a data entry window into which you can paste whatever text you want to grammar-check.  Some additional information is required, but this appears to be a very helpful application if you need/want to check text for grammatical strength.  No pop-ups required.
GRAMMAR:  Grammar Check http://www.spellcheck.net/grammar/
This application has a data entry window into which you can paste whatever text you want to grammar-check.  It looks like the site was developed from a copy of their own spell-check site, as there are multiple references to "spell check". But it does in fact check for and report grammatical strength.  Pop-ups required.
 

HTML-Kit
  About HTML-Kit
  HTML-Kit Tutorials
  Setting Up HTML Kit
  HTML-Kit Tutorial


NetBeans
  Getting Started With the NetBeans IDE Tutorial
  NetBeans IDE Java Quick Start Tutorial
  NetBeans Tutorials and Articles
  “Hello World!” for the NetBeans IDE
  Tutorial web development (with JSF)
  Creating a CSS Based Fixed Page Layout


General Info, Text Editors
  Comparison of Text Editors


General Info, Grammar Checkers
  About Free Online Grammar Checkers
  Best Free Online Grammar Resources

HTML Validation Tools
  W3C Markup Validation Service
  W3C Quality Assurance Tools
  W3C CSS Validation Service
  WDG HTML Validator
  JSK HTML Validation Tool
  W3Schools Web Page Validation
  Outlook HTML and CSS Validator   (Microsoft Office System Tool)
  JavaScript Code Quality Tool
  JavaScript Form Validation
  JavaScript “Lint”, a code quality tool
  PHP Syntax Validator and Debugger
  PHP source validator and documentator

HTML Color Tools
  HTML True Color Chart
  HTML Color Codes and Names
  W3Schools HTML Color Mixer
  W3Schools HTML Color Names
  Hexadecimal and HTML Named Color Charts

HTML Extended Character Sets
  HTML: Symbol Entities
  HTML: Special Characters
  HTML: Special Character Reference
  HTML: Document Character Set
  Extended HTML Character Set

HTML Font Resources
  Font Tester
  Core fonts for the Web
  List of typefaces
  Free Font Source

TOOLS for WORKING WITH IMAGES
MULTI:  IrfanView http://www.irfanview.com/
IrfanView™ is a versatile graphic viewer for Windows™ that also has some editing capabilities.  IrfanView™ is freeware, and is a “must have” utility for any Web-page developer's toolbox.
MULTI:  Paint.NET http://www.getpaint.net/
Paint.NET is free image and photo editing software for computers that run Windows™  Paint.NET provides full editing of images, as well as drawing/painting capabilities.  There are many plug-ins available for Paint.NET which help make this a very powerful application.  You can read about them and/or download them here.
EDITOR:  GIMP for Windows http://www.gimp.org/
GIMP is among the most powerful free photo editors available.  GIMP has a very steep learning curve.  However, there is a large user community, hence support is easy to obtain, and there is ample documentation and tutorials available.
MULTI:  PaintShop Pro http://www.corel.com/corel/
PaintShop Pro is very powerful full-featured photo-editing software from Corel™.  It is not free, but it is not very costly.  There are frequent discounts abailable, and the product is generally available for $80 or less (for the Ultimate edition).  If you work with a lot of image files, PaintShop Pro is an excellent choice.
MULTI:  Tiffen Dfx http://www.tiffensoftware.com/products/dfx-standalone
Tiffen Dfx is a complete standalone system offers over 2000 filters and special effects, providing professional quality results.  This product is easy to use, and is well worth the cost.
 

Web Developer Tutorials
  Learn to Create Websites
  Web Developer Tutorials
  Web Developer Tutorials
  Javascript Tutorial
  PHP Acticles & Forums
  Tizag Tutorials   (CSS, HTML, JS, PHP, much more)

IMAGE MAPPING
  Online Image Mapper
  CoffeeCup Image Mapper   (not free, but is excellent)

Photo Editing Tutorials
  Corel™ PaintShop Tutorials
  GIMP Tutorials
  IrfanView Tutorial   (ncsu.edu)
  IrfanView Tutorial   (sticksite.com)
  IrfanView Tutorial   (somewhere-in-time.net)
  Paint.NET Tutorials
  Tiffen Dfx Tutorials

Mathematical Problem Help
  Welcome to Webmath!

FTP SOFTWARE
FTP CLIENT:  FileZilla http://filezilla-project.org/
FileZilla Client is a fast and reliable cross-platform FTP, FTPS and SFTP client with lots of useful features and an intuitive graphical user interface.
FTP CLIENT:  FTP Voyager http://www.ftpvoyager.com/
FTP Voyager is quite possibly the most powerful FTP client program for Windows™.  It is easy to use, completely reliable, and has all the features you will ever need in an FTP client.  Support for this product is excellent.
 

FTP Client Tutorials

  FileZilla Client Tutorial
  Using Passive (PASV) Mode in FTP Voyager
  FTP Tutorial   (siteground.com)
  FTP Tutorial   (mediacollege.com)
  FTP Tutorial   (freewebmasterhelp.com)
RELATED INFORMATION

 •  Online CSS Editors....
    Free Online CSS Editor
    CSS Stylizer   →  Not free, but is a very powerful product.

 •  Online HTML Editors....
    Online HTML Editor
    Online HTML Editor

 •  Online HTML w/CSS Editors....
    HTML5 Playground
    HTML Instant Editor
    HTML TryIt Editor

 •  Additional helpful references....
    Web Developer’s Guide to Getting a Startup Up and Running
    W3C HTML 5.0 Reference
    Web Design

 •  During development, make incremental backup copies of your work OFTEN.
   This can save hours of work if you need to backtrack.  Below is a partial screen capture showing
   incremental backups made of this web page — a few copies from two different periods today....
      Incremental File Backups of the 
   Website Developer's Guide

 •  Cross-browser Compatibility Testing....
   There are many different browsers and different Operating Systems. Not everybody uses the same
   equipment or the same software.  Website visitors can come from anywhere in the world, and may
   use a browser you have never even heard of.  For general practice, it is good to try to develop web
   pages that look and behave the same with as many browsers as possible. Some typical browsers are....
    » Microsoft Internet Explorer
    » Google Chrome
    » Firefox
    » Safari
    » Opera
   Those browsers hold approximately 54%, 18%, 13%, 14% and 0.5% of market share, respectively.
   The above figures are from Web Browser Market Share Report, December 2011 Update
   TESTING YOUR WEB PAGES WITH SEVERAL DIFFERENT BROWSERS IS VERY IMPORTANT!!
   You can read about various aspects of  “Cross-browser”  on the Wiki Cross–browser page.
   There are a few ways you can choose to handle testing....
    » Load different browsers on your computer(s)
    » Use some of the free online services
    » Use some of the paid online services
    » Utilize the best of any/all of the above
   Free products and/or services (including browsers) for cross–browser testing....
    BROWSER:  Chrome
    BROWSER:  Firefox
    BROWSER:  Internet Explorer
    BROWSER:  Lunascape
    BROWSER:  Opera
    BROWSER:  Safari
     (the ↑↑Browser links↑↑ were valid as of January 19 2012, but can change)
    ONLINE SERVICE:  Adobe BrowserLab
    ONLINE SERVICE:  SauceLabs Visual Scout
    ONLINE SERVICE:  Expression Web SuperPreview
    ONLINE SERVICE:  BrowserShots
    ONLINE SERVICE:  Spoon
     (the ↑↑Online Service links↑↑ were valid as of January 19 2012, but can change)
   Paid products and/or services for cross-browser testing....
    ONLINE SERVICE:  Cross Browser Testing
    ONLINE SERVICE:  Browsera
    ONLINE SERVICE:  Cloud Testing
    ONLINE SERVICE:  Mogotest
    ONLINE SERVICE:  Multi-Browser Viewer
     (the ↑↑Online Service links↑↑ were valid as of January 19 2012, but can change)

 •  After your site is up and running....
    Google Webmaster Tools
    Google Web Toolkit Developer's Guide - SafeHtml

 •  If your site is something you consider important or valuable, Copyright it!
     United States Copyright Office
     Frequently Asked Questions about Copyright
     U.S. Copyright Office Forms
     Registering a Work
     Electronic Copyright Office (eCO) Online System

   You can contact the U.S. Copyright Office at:
     United States Copyright Office
     101 Independence Avenue SE
     Washington, DC 20559-6000
     202-707-3000 or 1-877-476-0778 (toll free)

COMMENTS REGARDING CSS
 •  CSS Code Order....
  CSS stands for "Cascading Style Sheets."  The word "Cascading" is a strong clue — it means that the styles that are applied to a document are applied in a cascade - one after the other, after the other, etc.  As the browser parses through the document (your HTML page, for example), the properties that are defined last are given precedence (with some exceptions).  You should design your CSS script to take advantage of that cascade.... put the most general properties first, and the most specific properties last.

To be clear:
 →  Properties defined last are given greatest precedence.
 →  List general properties first, list specific properties last.
 
“General properties” include things such as fonts, colors, sizes, page background color and/or background image, and page margins.
 Those style properties should be put first in your CSS script to define the intended HTML page(s).
   General styles are applied when there is no other specific information for any given element.
  “Less general properties” include styles that define element positions.
 Declare them after the more general styles. They will have greater precedence.
  “Least general properties” include styles that define specific sections of a page.
 Those styles should be listed in the CSS script after all other entries, and are given greatest precedence.
   Ultimately, you must decide which styles should have greatest precedence to suit your needs.
 
You should write your CSS script in order of  “most-general, least-specific”  to  “most-specific, least-general”.
Doing that, it will be easier to understand and easier to modify in the future.
  You may also want to keep 2 copies of each file — one that is heavily commented, and one that is "lean" for site deployment.
That can be helpful if/when you go back to modify the CSS script after not having looked at it in a long time.
 
Here's a page that provides some good tips about how to organize your CSS script . . . .
  5 Steps to a More Organized Style Sheet
 
Other helpful pages for CSS and/or HTML . . . .
  Comprehensive CSS Guide
  Introduction To Liquid CSS Layout Design
  Fixed Width Layouts Versus Liquid Layouts


If you would like to contact Ursus Grande Services . . .   Ursus Grande Services
click to send message to Ursus Grande
 
  site developer:  Bear-ASP Productions    
We are currently accepting ONLY contracts for remote off-site development.owned and operated by Steve T.        

  This site is   PowWeb: The perfect Hosting Solution™ .   The Perfect Hosting Solution.