WEBSITE DESIGN FOR BEGINNERS

CLASS WEBSITE

This Class Was Given At The Los Angeles FamilySearch Library
Formerly The Los Angeles Family History Library.

Revised 14 February 2014.
Instructor -- Jon Schweitzer

HOME    OLD LAFSL HOME    NEW LAFSL HOME

The LAFSL is located at 10741 Santa Monica Blvd., Los Angeles, CA, phone (310) 474-9990. The NEW LAFSL Website is at https://familysearch.org/learn/wiki/en/Los_Angeles_Family_History_Library The OLD LAFSL Website is at http://www.lafhl.org/index.htm and the Research at LAFSL Website is at http://www.encinojon.com/lafhl/

Consult my Webmastering - Free Tests, Tips And Links (Web Site) that is a companion to this class.

Also see Publishing your Family History on the Internet

• CLASS HANDOUTS
Covered in this class
1. Web Site Design for Beginners Class (this Web Site)
2. HTML Document General Format Structure
3. HTML Document Minimal Clear Format
4. Creating An HTML Document
5. Royalgen Web Site and HTML (don't use the HTML for this HTML)
6. Schweitzer Web Site and HTML (don't use the HTML for this HTML)
7. Bruce Clay Web Site - quality criteria pages
8. Webmastering - Free Tests, Tips And Links And Webmastering Summary
Not covered in this class
9. Web Site Design - Intermediate Class
10. Web Site Design - Advanced Class
11. Making Multiple Web Surname Sites
12. Publishing your Family History on the Internet

• MAIN CLASS TOPICS
1. ACCESS TO THE WEB
2. WEB SITE DESIGN - STARTING
3. HTML LANGUAGE - BASICS
4. WRITE HTML LANGUAGE
5. TEST/VALIDATE/CORRECT SITE DESIGN - UNLOADED SITE
6. INSTALL WEB SITE ON THE WEB
7. TEST/VALIDATE/CORRECT SITE DESIGN - LOADED SITE
8. SEO - BEGINNERS SEARCH ENGINE OPTIMIZATION
9. PROMOTE WEB SITE
10. WEBMASTER RESOURCES


flag bar

1. ACCESS TO THE WEB
A. World Wide Web System (The Web) (WWW) (3W)
Most public libraries have computers connected to the Web you may use.

B. Web Page Subject Matter
Examples of Genealogy Web sites
Business: The URL or Web address is http://www.encinojon.com/Royalgen/
Personal: http://www.encinojon.com/schweitzer/
See the many "convert" programs and sites at http://www.cyndislist.com/construc.htm under "Content" in "2. Plan The Layout And Content Of Your Web Site."

C. Internet Service Providers (ISPs)
Most ISPs offer 1 to 10 Megs of free Web Site space as part of their monthly fee.
See my Web site about Finding And Choosing An ISP at http://www.encinojon.com/isp/
These days you should have at least the slowest high speed Internet connection. The ISP should be able to provide the secure SFTP or FTPS to upload to your Web Site. See section 6.

D. Browsers
A browser such as Internet Explorer or Firefox is a computer program that allows you use the HTML language that is in your computer or on the Internet to view the Web Site on your computer monitor.

The most popular browser for the PC is now Chrome and followed by Firefox and Internet Explorer. Internet Explorer still has the greatest amount of securty problems.
You should have at least 2 versions each of Chrome, Firefox and Internet Explorer browsers installed in your computer to test your Web Site.

Or use a free online Cross-Browser Testing Web site such as Browser Sandbox at http://spoon.net/browsers/

E. Search Engines
Use Google, InferenceFind, Dogpile and others from Cyndi's List of Genealogy Sites on the Internet - Search Engines at http://cyndislist.com/search.htm

F. Bookmarks
See more information at http://support.mozilla.org/en-US/kb/use-bookmarks-to-save-and-organize-websites

2. WEB PAGE DESIGN - STARTING
A. Web Page Design Considerations
Some of the features of the each page should be: attractive, simple, well organized, interesting, use dark against light, few graphics and small file size graphics. Avoid "under construction" signs and frames.

B. Look At Other Good Web Sites For Ideas

C. Rough Contents
"Content Is King" and the heavy use of the keywords in the body of the site.
See the Genealogical Standards and Guidelines For Publishing Web Pages On The Internet at http://www.ngsgenealogy.org/cs/guidelines_for_publishing_web_pages

D. Rough Layout
MACs monitors have a narrower and brighter screen display. Design from the right side of the screen. Design for a lighter screen display if using a MAC so it wouldn't be too dark on a PC.

Set your monitor Screen Resolution at 1024768 and make each page look good.

E. Final Layout

F. Web Site Construction - Starting
Choose from the different methods of construction.
Hire a Web site designer.
Use the free "Make your own Webpage" type services at the Web site of the Web site Hosting Co. that you choose.
Use a word processor and convert the text into HTML. The results might be poor. Do it yourself by writing the HTML language and using a HTML editor. See section 4. and Editors below.

G. Helpful Web Site Design Site
The Cyndi's Genealogy Home Page Construction Kit Web site is the most comprehensive self-help Web site for constructing a genealogy Web Page. The URL or Web Address is http://www.cyndislist.com/construc.htm

H. Design Help
Access the hundreds of free Web Site Design help, tutorials and tips pages on the Web. Look at http://davesite.com/webstation/html/

I. Obtain Your URL
Choose a site name for your site.
Obtain the URL with a "root directory" from your ISP.
Do not use any underscores "_" in your URL.
Domain Registration
For free hosting, consult your ISP about the URL and a "root directory" to be used.
http://ISP part/"A" (root directory)/your web site name (i.e. SmithFamily)/
It's best if you obtain your own Domain Name that will cost you about $15 a year and about $4 a month to host. One good place to host your Web site and obtain your use of a Domain Name is GODADDY at http://www.godaddy.com/
There are also free hosting sites for your own Domain Name. See a list of free hosts at http://www.prchecker.info/web-hosting/top-10-free-web-hosting-sites/

J. Special Design Help Sites
The best site for design criteria, promotion and a lot more is at http://www.bruceclay.com/ You should read every word on every page in every section of this wonderful site.
An excellent site for help is http://webtips.dan.info/
A great site to walk you through the steps of making a web page is at
http://www.pagetutor.com/pagetutor/makapage/index.html

K. Printing
Money Saving Hints About Inkjet Printers And Refilling Cartridges http://www.encinojon.com/inkjet/

3. HTML LANGUAGE - BASICS
A. HTML books - References
Buy at least one Visual book on HTML Web Page Design with many examples.
I suggest the book "HTML 4 for the World Wide Web" (Visual QuickStart Guide) by Elizabeth Castro, Peachpit Press, 1999, ISBN 0201354934 and the information about the book is HERE. Order the book at http://www.amazon.com/HTML-World-Wide-Fourth-Edition/dp/0201354934 for a new copy for as little as $1.50 plus $3.99 shipping.
Buy new and used books using Amazon and http://www.addall.com/

B. HTML (HyperText Markup Language) 3.2
HTML language
A list of the common attributes and tags is at http://www.valenciawebstudio.com/articles/web/webintro/tags.html Big lists of the HTML "things" or attributes are at http://www.w3.org/TR/html4/index/attributes.html and http://www.htmlhelp.com/reference/html40/alist.html
Default Settings: Paragraph-Left, Font Color-Black, Font Size="3"
Special Symbols or character entities are mainly not keyboard characters
Don't use &, fractions or special symbols in your text unless you use the "character entities". The "character entity" for & is &
Look at the lists of characters at http://www.ascii.cl/htmlcodes.htm and http://www.degraeve.com/reference/specialcharacters.php
HTML 3.2 Document General Format Structure
HTML 3.2 Document Near Minimal Clear Format
!DOCTYPE tag
Comments - <!-- text -->

• Head
Meta tags
"Title" - use up to 60 characters and 10 words in the title.
"Description" of Web site. Use up to 150 characters and 28 words.
"Keywords" - that describe the Web Page and phases that persons will use in the search engines. Use up to 874 characters and 66 words.
"Copyright" - year and your name
"Addresses"- E-Mail and/or name-postal address
"Author" - your name

• Body
Background and text colors in words and Hex code
Tags and Attributes -- ADDRESS, BODY, BR, CENTER,
COLOR (background and text), DOC, EM, FACE (text), FONT, HEAD, Hn, HR,
HTML, META, P, PRE, SIZE (text), STRONG, TITLE, U (don't use)
Text - fonts, size, colors
Text - breaking tags: <P>, <HR>, <BR> No closing tags are required
Text - formatting tags: use <STRONG> in place of <B>, and use <EM> in place of <I>
E-mail popup
Don't use tags and attributes that will not be recognized by Chrome, Firefox and Microsoft Internet Explorer browsers.
Support of all HTML tags only up to the IE 6 browser and other browsers is viewed http://www.ncdesign.org/html/list.htm

A list of HTML tags is at http://www.quackit.com/html/tags/

4. WRITE HTML LANGUAGE
A. Use Sites, Editors or Word Processors to Write The HTML Language

Sites To Try HTML Code
See QuickStart and steps 1 to 14 at http://www.devx.com/projectcool/Article/20045
Gain access to this Web site http://www.jmarshall.com/easy/html/testbed.html to practice your Web site construction.

Editors
Use HTML editors
Free HTML editors are shown at http://www.techsupportalert.com/best-free-html-editor.htm

Word Processors
Write text in word processor
Construct pages using a word processor program.
Use a spelling checker.
Save as a Word document
Convert text to HTML Web Page language.
"Save" as HTML file.
Look at page in Wordpad or Notepad and Firefox.
Edit page in Wordpad or Notepad.
See my paper "Creating an HTML Document".
Avoid spamming by not using the same words too many times.

B. Document Sources
Look under "View" at the Document Sources/File or Page Source on some good Web sites. T48-49

C. Final Decisions On Layout, Fonts And Colors
The fonts should be used on the web to provide maximum compatibility across different browsers and operating systems.
Here are font-families that should provide adequate cross-browser compatibility.
The Sans-serif family - Arial, Verdana, Geneva, Helvetica, sans-serif
The Serif family - Georgia, Times New Roman, Times, serif

5. TEST/VALIDATE/CORRECT SITE DESIGN - UNLOADED SITE
Review And Corrections
Careful review your Web Page HTML language.
Save the text as HTML and name the file "index.html".
Make your corrections by opening the Web page file in Wordpad or Notepad.
Download the wonderful freeware PC program CSE HTML Validator Lite v2.50 at http://www.htmlvalidator.com/lite/ Open your HTML file in this program in your own computer and validate and much more.
Test, correct and test again.

6. INSTALL WEB SITE ON THE WEB
Uploading the Web site onto the ISP Server.
Domain Registration
Consult your ISP about an URL and a "root directory" to be used.
http:// ISP part/"A" (root directory)/your web site name (i.e. SmithFamily)/ An example is http://members.1stnet.com/A/SmithFamily/
Most ISP's offer free Web Site space as part of their monthly fee.
Have your ISP upload your Web site and then learn one of the many uploading procedures.

You must research the hosting company's site to determine the security FTP protocol(s) that are supported. The 2 most common are SFTP and FTPS.
If you are uploading to or downloading from an external Website hosting server over the Internet, you must choose the correct secure FTP program.
Choose a freeware secure FTP program from the Best Free FTP Client.
The secure program must support the SFTP or FTPS security protocol. The SFTP or FTPS encrypts your password, keeping it secure too. Choose the program that has the same security protocol supported by your Website hosting company.
The top security protocol is FireFTP at https://addons.mozilla.org/en-US/firefox/addon/fireftp/ that uses SFTP only with FireFox and with Windows or Mac OS X. It has a 4GB download limit.
The second security protocol is FileZilla athttp://filezilla-project.org/index.php that uses SFTP or FTPS with Windows or Mac OS X.
Look at the features
You may do a comparison of many FTP client software for all operating systems at http://en.wikipedia.org/wiki/Comparison_of_FTP_client_software
There are several Web sites that offer you Web site space entirely free. See the Cyndi's Genealogy Home Page Construction Kit and the Web Page Hosts at http://www.cyndislist.com/genealogy-website

7. TEST/VALIDATE/CORRECT SITE DESIGN - LOADED SITE
Validations
Check the validation of each Web Page by pasting the URL into the W3C HTML
Validation Service at http://validator.w3.org/
Test the links and HTML of each page at http://watson.addy.com/
Reviewing, testing and correction of the Web Page using Chrome, Firefox and Internet Explorer and other browsers at Webxact Web site at http://browsershots.org/ and http://www.creativetechs.com/iq/test_your_web_design_in_different_browsers.html to check the compatibility of your site with different browsers. Test, correct and test again.

8. SEO - BEGINNERS SEARCH ENGINE OPTIMIZATION
You need to do the SEO Website design work or the Search Engines will not be able to do a good job for you. See this website http://www.bruceclay.com/blog/2012/06/seo-checklist/

9. PROMOTE WEB SITE
A. Extra Email Address
Obtain an extra email address to use when you are submitting your Web pages.

B. Promotion
The best site for design criteria promotion and a lot more is at http://www.bruceclay.com/ You should read every word on every page in every section of this wonderful site.
Use the tools and Web promotion tips at the great site http://www.apromotionguide.com/

C. Submissions
It is not necessary to announce or submit your Website and EACH of your pages in your Website. The major Search Engines will find your Website and index it within a few weeks. If you you must submit your Website, you should submit to at least Google, Yahoo and Bing. This is a good site to do the submissions for you - http://www.submitexpress.com/free-submission.html Look at the "Search Engine Relationship Chart" at the bottom of http://www.bruceclay.com/seo/web_add.htm and print it out to study. The latest Chart will show you the Search Engines that you MUST submit to.

10. WEBMASTER RESOURCES
See http://www.alvit.de/handbook/
See 100s of articles at http://www.sitepronews.com/archives.html

flag bar
TOPICS IN MY INTERMEDIATE AND ADVANCED CLASSES
Check Ranking of Site in the Search Engines
Change Web Site to Improve Ranking
Search Engine optimization Search Engine ranking Recheck Ranking
Validation FTP Advanced Promotion
Lists - ordered (OL) and unordered (UL)
Using graphics Link checkingFree graphics / clipart on the Web
Links - A - internal and external
Databases
Transforming Your GEDCOM Files into Web Pages
Transferring data directly from Genealogy Program to your Web Page
Graphics - IMG
Tables
Web page counters
Free software on the Web
Advanced Webmastering AND MORE

WEB SITE DESIGN - INTERMEDIATE CLASS Web Site

WEB SITE DESIGN - ADVANCED CLASS Web Site

Webmastering - Free Tests, Tips And Links (Web Site)

Publishing your Family History on the Internet
Send comments about this Web site to the webmaster.
Click here to E-mail him.

This site may be freely linked, but not duplicated.
Copyright © 2001-2014 by Jon Schweitzer. All rights reserved.