WEB SITE DESIGN - INTERMEDIATE

CLASS WEB SITE

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

Revised 5 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

• MAIN CLASS TOPICS
1. INTRODUCTION TO THE CLASS
2. BOOK
3. SCANNING GRAPHICS
4. GRAPHICS
5. HTML (HYPERTEXT MARKUP LANGUAGE) 3.2 and 4
6. CSS - CASCADING STYLE SHEETS
7. COUNTERS
8. VALIDATION
9. SEO - INTERMEDIATE SEARCH ENGINE OPTIMIZATION
10. PROMOTlON
11. FTP
12. FREE SOFTWARE ON THE WEB


flag bar

1. INTRODUCTION TO THE CLASS

2. BOOK
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 at 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/

3. SCANNING GRAPHICS
Use your scanner or buy one or go to most Kinko's locations that will scan items for you.

4. GRAPHICS
Image formats - GIF and JPEG
Free clipart on the Web at: http://www.clipart.co.uk/ and http://www.theclipartplace.com//

Right click and "Save image as ...". Write down the file name, file location and description in a log.

5. HTML (HYPERTEXT MARKUP LANGUAGE) 3.2 AND 4
Consult Web Page and HTML Document Source handout pages.
The "Cyndi's Genealogy Home Page Construction Kit" Website is the most comprehensive self-help Website for constructing your genealogy Web Page. The URL or Web Address is: http://www.cyndislist.com/construc.htm

Body
Don't use browser specific (proprietory) HTML tags and features.
See most of the proprietory tags at http://gsgwebs.com/help/browser_compatibility.html
A list of HTML tags is at http://www.w3.org/TR/html4/index/attributes.html Colors for Background - Text - Links - <BODY BGcolor="#xxxxxx" Text="#xxxxxx" Link="#xxxxxx" Vlink="#xxxxxx" Alink="#xxxxxx"> Background color loads faster than background pattern or image. Choose colors from: http://www.computerhope.com/htmcolor.htm or use the site at http://www.htmlcenter.com/tutorials/ and obtain the "Hex" number after you pick a color from the screen.

Background pattern or image - <BODY BACKGROUND="name of file">

Insert image - <IMG Width=x and Height=y SRC="image file name" ALT="Alternative Text" Border=x pixels> For faster viewing, use Width=x and Height=y

E - mail, <A HREF="mailto:email address">text</A>
Tables - Use TR, TH, TD, Border, Width, Height, Cellpadding and Cellspacing. Look at Table Tutor - Introduction and Lessons at: http://www.pagetutor.com/pagetutor/tables/index.html

<TABLE><CAPTION>TEXT</CAPTION>
<TR><TH>text</TH></TR>
<TR><TD>text</TD>
<TD>text</TD></TR>
</TABLE>

  TEXT
   text
text text

Aligning Graphics and Text
Use transparent pixel shims for spacing text and other things from left or right or left and right - learn about the method at http://www.graphic-design.com/Web/PixelSmith/SinglePixel/trick.html - download the pixel shim at: http://www.amphi.com/~cyetman/int_html/pixel1.html
Use the blockquote tag for indenting paragraphs on the left and right - <BLOCKQUOTE>text</BLOCKQUOTE>
Use multiple blockquotes for greater indenting on left and right. <BLOCKQUOTE><BLOCKQUOTE>text</BLOCKQUOTE></BLOCKQUOTE> Use Lists to indent paragraphs on the left. Place the text in a table and specify the width.

Links and Anchors
Link - external <A HREF="URL">text</A>
Internal anchor on same page - <A HREF="#shortened name of section">name of section</A>
Internal anchor to another page - <A HREF="page file name">title of other page</A>

Lists
Ordered (OL)
Number (1), Capital letter (A), Lower Case letter (a) and Roman Numeral (I)
Type=A
Unordered (UL) <UL type=circle>
LI item </UL>
<LI>item<OL>

Preformatted Text <PRE> preformatted text </PRE>

Placing Database on Site
Placing genealogy program data on a Web Page.
Transforming Your GEDCOM Files into Web Pages.

Browser Support
Support of all the HTML tags in some of the older browsers is viewed at http://www.webdevout.net/browser-support-html#html401

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

Search Engines Requirements
No flash, no JavaScript, no frames for main page - See http://www.seoinpractice.com/crawlability-flash.html
Like it or not, Google cannot "see" anything contained in images, JavaScript or Flash. If you use any of them for your main menu system, you are consigning the site to relative oblivion.

6. CSS - CASCADING STYLE SHEETS
Starting with CSS is at http://www.csstutorial.net/css-intro/introductioncss-part1.php

Another CSS Tutorial is at http://www.echoecho.com/css.htm

A CSS cross browser compatibility guide is at http://caniuse.com/ and HERE

A CSS Valaditor is at http://jigsaw.w3.org/css-validator/

7. COUNTERS
I suggest you don't use them unless you have a very good reason such as SEO and if you do, place them at the bottom of the page.

I suggust you use the excellent free Google Analytics at http://www.google.com/analytics/ and/or a very robust counter from the next website below.

See the Top Ten Free Website Hit Counters are at http://www.shoutingblogger.com/2012/10/top-ten-free-website-hit-counter.html SiteMeter is not working.

See CountersGuide.com at: http://counterguide.com/

Select a counter that has many analytics such as keywords and visit lengths and has no ads on your website.

Try to configure the counter so that you can:
1. Set the idle time between visits from the same visitor for one to four hours.
2. Ignore visits from crawlers and bots.
3. Ignore your visits.
4. Exclude counting visits from internal links.

If you must log in, place a link on the bottom of your website page so you can connect to the counter's website.

8. VALIDATION
Test the single page links and HTML at http://watson.addy.com/

This site uses arrows to point to errors http://validator.w3.org/

9. SEO - INTERMEDIATE SEARCH ENGINE OPTIMIZATION
See http://www.sitepronews.com/archives/2012/apr/2.html and http://www.sitepronews.com/archives/2012/apr/11.html

See the SEO Mistakes to Avoid at http://www.sitepronews.com/archives/2011/jun/17.html

10. PROMOTION
The "Cyndi's Genealogy Home Page Construction Kit" is the most comprehensive self-help Web Page for constructing and promoting your genealogy Web Page. The URL or Web Address is: http://www.cyndislist.com/genealogy-website One of the best sites about promoting your web page is at: http://www.vodahost.com/thesecrets.pdf and http://www.computerhope.com/promote.htm
Verify Rank in search engines.
Use a Position Agent to find site rankings at http://www.seo-highrankings.com/seo-web-position-agent.htm

11. SECURE FTP
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 at the program's Website.

Find a tutorial for the setup and using the program on the program's Website.

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. The Cyndi's Genealogy Home Page Construction Kit has free Web site Hosts at http://www.cyndislist.com/construc.htm

See a list of free hosting sites for your Domain Name at http://www.prchecker.info/web-hosting/top-10-free-web-hosting-sites/

12. FREE SOFTWARE ON THE WEB
The best Web site is at http://www.techsupportalert.com/

flag bar

TOPICS IN MY ADVANCED CLASS
Review Web Traffic
Search Engine Optimization
Search Engine Ranking
Redesign for Ranking
Link Checking
Advanced Promotion
Overview of all Tags
Advanced Webmastering

WEB SITE DESIGN FOR BEGINNERS 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.
This site and any internal links are copyrighted.