Website Design / HTML

wldspirit · Post by **wldspirit** » 10 Sep 2006, 00:12

Clearer than mud........to funny.......I've got it, but I created a cheat sheet using your format!!!!

wldspirit

rfornal · Post by **rfornal** » 11 Sep 2006, 01:10

Cheat sheets are GOOD ... don't be afraid of using someone else's style or code ... why reinvent the wheel, since there are billions of pages out there!

Let's see if we can filter out some of the MUD for you ... water doesn't seem to work well with computers ...

Try this link ... here I am showing several more things that can be done with Tables ...

http://bob.fornal.org/Genealogy/code/Adv_Tables1.htm

In this example, there is an image on the main table, a table (call it subtable) within the main table, a bgcolor and a ling within the main table. I configured it so that you can turn the borders On and Off (really, I used two files ... one turned On and one turned Off) to let you see what is happening a little more clearly.

Within the subtable, I used the background option, rather than bgcolor to provide an image rather than a limited color ...

Let me know how we are doing now ... I can provide as many examples as you need!

wldspirit · Post by **wldspirit** » 11 Sep 2006, 19:48

Great example, and that helps to "wash" away some of the mud!!!
wldspirit

rfornal · Post by **rfornal** » 12 Sep 2006, 01:12

Glad it's clearer ... now we move on ...

Headers and Paragraphs
The bulk of content that people enter into web-pages are in the form of paragraphs.

Header Tags:
<H1> Largest Header </H1>
<H2> Header </H2>
<H3> Header </H3>
<H4> Header </H4>
<H5> Header </H5>
<H6> Smallest Header </H6>

I know that I've covered these, but I just wanted to refresh your memory ...

Paragraph Tags:
<P> Paragraph here ... </P>

Now, if you use this format to enter text into a web-page, it doesn't look much different than text that was simply entered before. The strength behind using Paragraph Tags will come in soon when we examine Style Sheets ...

rfornal · Post by **rfornal** » 12 Sep 2006, 01:16

Bold, Italics, and NOT Underline
Bold Tags: <B> BOLD </B>
Italic Tags: <I> ITALIC </I>
Underline Tags: <U> UNDERLINE </U>

Now, in the title you may have noticed that I stated NOT UNDERLINE ... the Underline Tag still exists and is usable in many browsers, but has been deprecated (removed) from proper code.

The reason for Underline Tags being removed is simple ... they get confused with links.

rfornal · Post by **rfornal** » 12 Sep 2006, 01:26

Next, I want to create a series of web-pages to continue our work and generate a web-site from the pages we are creating that will be functional and easy to maintain ...

Here is a list of pages that I want to create for the example ... any other thoughts will be kept in mind ...

MAIN PAGE (Index.htm)
Citizenship Records (FOLDER:Citizenship FILE: Index.htm)
Special Memories (FOLDER:Memories FILE: Index.htm)
Where Our Ancestors Lived (FOLDER:Locations FILE: Index.htm)
Weddings (FOLDER:Weddings FILE: Index.htm)
Military Service Records (FOLDER:Military FILE: Index.htm)
Oral Family Histories (FOLDER:Histories FILE: Index.htm)
Photographs (FOLDER:Pictures FILE: Index.htm)

Note that there is a title for each (in bold) and a Folder under the main folder ... each of them has its own Index.htm file ...

Give me a day or two to generate the base page for each of these ... Feel free to comment as I work on them ...

wldspirit · Post by **wldspirit** » 12 Sep 2006, 01:51

While your getting that together......I am going to continue to experiment........but I'll be good and try NOT to undo anything I've already done.......

Lisa

rfornal · Post by **rfornal** » 12 Sep 2006, 02:01

Tear it up!

I'm going to start this as a completely new project ...

They say that the best learning comes from making mistakes ... by now I should be as close to perfect as you can get ...

rfornal · Post by **rfornal** » 12 Sep 2006, 02:37

Developing a Site
Create a Folder on your desktop; call it Site.

In the Site Folder, create these folders:
• Citizenship
• Memories
• Locations
• Weddings
• Military
• Histories
• Pictures

Create an Index.htm file in the Site Folder with the following code:
<html>
   <head>
     <title>Genealogy Site</title>
   </head>

   <body>
     <h1>Genealogy Site</h1>
     <a href="Citizenship/Index.htm">Citizenship Records</a><br>
     <a href="Memories/Index.htm">Special Memories</a><br>
     <a href="Locations/Index.htm">Where Our Ancestors Lived</a><br>
     <a href="Weddings/Index.htm">Weddings</a><br>
     <a href="Military/Index.htm">Military Service Records</a><br>
     <a href="Histories/Index.htm">Oral Family History</a><br>
     <a href="Pictures/Index.htm">Photographs</a><br>
   </body>
</html>

... more to come ...

rfornal · Post by **rfornal** » 12 Sep 2006, 02:52

In the Citizenship Folder, create an Index.htm file with the following code:
<html>
   <head>
     <title>Genealogy Site: Citizenship</title>
   </head>

   <body>
   <h1>Citizenship</h1>
   <p>Here is a listing of where Our Ancestors came from along with any other information.</p>

   <table width="100%" border=1>
   <tr>
     <td width="20%"><b>Name</b></td>
     <td width="20%"><b>Emigrated From</b></td>
     <td width="20%"><b>Immigrated To</b></td>
     <td width="20%"><b>Ship</b></td>
     <td width="20%"><b>Date Arrived</b></td>
   </tr>
   <tr>
     <td>SAMPLE, Name</td>
     <td>Italy</td>
     <td>America</td>
     <td>Big'Boat</td>
     <td>01 Jan 2006</td>
   </tr>
   </table>

   </body>
</html>

[hr]
Notice, that up to this point, there is no formatting (other than a width and the first line of the table - BOLD) ... there is a way to structure the backgrounds and fonts VERY simply ...

... along with the Style Sheet that was just described, there is a way to make the menus easy to manage (I got tired of changing menus on dozens or hundreds of pages) ...

COMING SOON ...

rfornal · Post by **rfornal** » 12 Sep 2006, 06:22

Create a folder called images under the Site Folder.

Place these two images into this folder ...

... we'll be using them soon ...

wldspirit · Post by **wldspirit** » 12 Sep 2006, 08:23

Done!!

Busy day......a trip to the library to confirm an 1861 marriage, looked at new fifth wheels and created new web page......everything is smooth sailing so far........

Lisa

rfornal · Post by **rfornal** » 12 Sep 2006, 23:22

Style Sheet
Next, let's create the Style Sheet.

Basically, this is a file that determines the font, margins, colors, and backgrounds for a web-page ... but, how is this useful?

The primary use is to define the style of all pages. If you decide to change from Arial to Tahoma font; using Style Sheets, you will only need to change one file ... instead of changing all the files individually.

[hr]
Now, create a file called site.css (cascading style sheet) in the Site Folder, and place the following in it:

   body {background-attachment:fixed;
     background-image:url(images/bg_image.gif);
     margin-top:20px;
     margin-left:60px;
     margin-right:20px;}

   a:link,a:visited,a:active {color:#CC0000;
     font:13px arial;
     font-variant:small-caps;
     font-weight:bold;
     text-decoration:underline;}
   a:hover {color:#006600;
     font:13px arial;
     font-variant:normal;
     font-weight:bold;
     text-decoration:underline overline;
     height:0px;}

   body,p,font {font:13px tahoma;
     color:#5555AA;}
   td {font:12px tahoma;
     color:#AA5555;}
   table {background:#CCCCCC;
     border:1px solid blue;}
   hr {width:85%;}

   .Table001 {background:transparent;
     border:0;}
   .TD001 {font:12px tahoma;
     background:transparent;
     color:#5555AA;}

... read through this information, and ask any questions if you like, but these are the basic components of the Style Sheet that we will be using and I will cover them in the detail necessary for you to make adjustments ... I do not intend to cover Style Sheets in the same depth that we are covering HTML ...

wldspirit · Post by **wldspirit** » 13 Sep 2006, 03:36

Ok, got the file page in my site folder.......ready when you are.
Lisa

rfornal · Post by **rfornal** » 13 Sep 2006, 04:41

Modifying Site Index.htm
Change the code as follows ...

<html>
   <head>
     <title>Genealogy Site</title>
     <link rel="stylesheet" type="text/css" href="site.css">
   </head>

   <body>
     <h1>Genealogy Site</h1>

     <table class="TABLE001" width="100%"><tr>
       <td class="TD001" valign=top width="25%">
         <a href="Citizenship/Index.htm">Citizenship Records</a><br>
         <a href="Memories/Index.htm">Special Memories</a><br>
         <a href="Locations/Index.htm">Where Our Ancestors Lived</a><br>
         <a href="Weddings/Index.htm">Weddings</a><br>
         <a href="Military/Index.htm">Military Service Records</a><br>
         <a href="Histories/Index.htm">Oral Family History</a><br>
         <a href="Pictures/Index.htm">Photographs</a><br>
       </td>
       <td class="TD001" valign=top width="70%">
         <p>On this site, I would like to document some parts of my family's genealogy that is more difficult than
           just documenting names and birth placed. Select one of the pages for more information.</p>

         <p><b>Bob Fornal</b></p>
       </td>
       <td class="TD001" valign=top align=right width="5%">
         <img src="images/rt_image.jpg">
       </td>
     </tr></table>

   </body>
</html>

[hr]
Here is one of the key pieces of code ...

<link rel="stylesheet" type="text/css" href="site.css">

... note the use of site.css ... this allows the page to use what we just created.

[hr]
Also, note that we now have a table that has three TDs across (one 25% with the links, one 70% with the text, and one 5% with an image) ...

<table class="TABLE001" width="100%"><tr>
<td class="TD001" valign=top width="25%">

... here, look at the class= code inside the Tags; these refer to code within the Style Sheet page, making sure that the bgcolor and borders are turned off ...

[hr]
More to come ...

Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML

Re: Website Design / HTML