Website Design / HTML

[rfornal]

Examining Other Code
I suggest looking at the code others use to generate their pages ... in particular if you like what you see.

BUT (possibly the biggest one I've placed yet), don't let it throw you off when you come across code that looks daunting (it WILL happen) or complex ... your first thought might be, "I can't do all that."

You might not be able to do it all. That's part of the fun ... learning to do it in small steps.

First, remember that HTML, at it's core, is easy ... you don't need to be a programmer to be a successful author. The main reason that the code for many pages looks so complex is that it was likely created with a Visual Design Tool (WYSIWYG - What You See Is What You Get) ... which has a knack for generating things that are very difficult to read; as opposed to being hand-generated (what we are trying to achieve here).

Also keep in mind that apparently large-complex sites and pages were most likely created over time; every web-site is changed and approved, built a piece at a time.

[rfornal]

Do I Need To Be Connected to Create HTML Pages?
No, in fact you don't need to be connected to the Internet at all to create web-pages. If the pages are not ready for publication or the site is not ready ... the pages can be stored on your computer, a ZIP drive, a flash drive, wherever.

I have spent months generating entire web-sites offline prior to "publishing" them online.

[rfornal]

Found this one late last night ...

Using a Macintosh Computer
If you are using TextEdit on a Macintosh computer, the steps for creating a web-page are a little different than when using Windows Notepad.

From the Format Menu, you must first select Make Plain Text and then change the preferences under the Saving header by unchecking the box for Append '.txt' Extension to Plain Text Files.

Also, the default preferences are set to show .html as they would appear in a browser, which will not allow you to edit them. To fix this, check the Ignore Rich Text Commands in HTML Files under the Rich Text Processing header.

[hr]
I am not as familiar with the Macintosh as I would like to be ... if someone tries all this out, please let me know if it needs corrected or adjusted to make more sense.

[rfornal]

Peeking at Other People's Code
Looking at the HTML code that others have created is easier than you think, but remember the prior warning ... some of them can look very complex.

While you've got a web-page open, use the <Right-Click> and select View Source (if View Source does not show up on the list, make sure that the mouse is not hovering over an image).

This method allows you to view the source on any web-page ... there will be a FEW sites that will block the <Right-Click> option, but most allow it ...

[rfornal]

About Text
OK, let's examine the three basic pieces needed to display text.

[hr]
First: Headers
Try these Tags as headers (or titles) in the code you have created previously ...

<h1>This is a Large Header</h1>
<h2>This is the Next Smaller Header</h2>
<h3>This is the Next Smaller Header</h3>
<h4>This is the Next Smaller Header</h4>
<h5>This is the Smallest Header</h5>
There are actually seven headers available ... I've only found five necessary most times ... (unfortunately, I can't show these here)

[hr]
Second: Bold, Italics, Underline
Here, you will not see the Underline Tag (<u>) used; it has been deprecated (removed) from standard HTML code, although it is supported by most browsers still, because it often gets confused with linked items.

<b>This is the BOLD Tag</b>
<i>This is the ITALIC Tag</i>
<b><i>This is the BOLD, ITALIC Tag</i></b>

[hr]
More soon ...

[wldspirit]

Back from a mini vacation......batteries recharged and up for any challenge......

except for one small problem.... ....I've decided I don't like tables and they don't like me either!!!!!!........

Going to go surf the web and read others Html code....

wldspirit

[rfornal]

What's causing problems?

Think of them like boxes. The <TD> ... </TD> is the acutal box itself. The boxes can be placed end-to-end (1,2,3,4, 5 or more <TD> ... </TD> in a row).

Each of these series of boxes are bound into a row: <TR> ... boxes here ... </TR>.

The rows are bound into a table: <TABLE> ... </TABLE>

The rest of it is adjusting the settings to get the correct background, alignment, or whatever ... e-mail as an attachment the code that is causing problems if you still have trouble figuring it out ...

[wldspirit]

Ummmm.........I kinda tried to play around with it......so this is what's left of your version.....

I have this blank box....no data, no color.......

<TABLE width="100%" bgcolor=grey>

<TD width="50%" bgcolor=pink align=center><TD>Name:</TD><TD>Sam Cupi</TD>
</TR><TR>
<TD>Home in 1930:</TD><TD>Peoria Illinois</TD>
</TR><TR>
<TD>Age:</TD><TD>44</TD>
</TR><TR>
<TD>Estimated Birth Year:</TD><TD>abt 1886</TD>
</TR><TR>
<TD>BirthPlace:</TD><TD>Italy</TD>
</TR><TR>
<TD>Relation to Head of House:</TD><TD>Head</TD>
</TR><TR>
<TD>Spouses's Name:</TD><TD>Angela</TD>
</TR></TABLE>


Lisa

[rfornal]

Try this ...

<TABLE width="100%" bgcolor=grey>
<TR>
<TD width="50%" bgcolor=pink align=center>Name:</TD><TD>Sam Cupi</TD>
</TR><TR>
<TD>Home in 1930:</TD><TD>Peoria Illinois</TD>
</TR><TR>
<TD>Age:</TD><TD>44</TD>
</TR><TR>
<TD>Estimated Birth Year:</TD><TD>abt 1886</TD>
</TR><TR>
<TD>BirthPlace:</TD><TD>Italy</TD>
</TR><TR>
<TD>Relation to Head of House:</TD><TD>Head</TD>
</TR><TR>
<TD>Spouses's Name:</TD><TD>Angela</TD>
</TR></TABLE>

Slight adjustments from what you had ... <table> then <tr> around the sets of <td>s

[wldspirit]

I have gone thru all the steps start to finish......I still end up with no color in my first table row listing "name", yet the second column of same row has color.......
Lisa

[rfornal]

Try this ...

I'm going to try an attachment here ...

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

... remember to <right><click> View Source. Copy everything out and paste it into your version ...

[rfornal]

Wound up being a link, but it'll work.

I've been cooking all day ... dinner time ... back in a few hours.

[wldspirit]

Ok.....got it......

Lisa

[rfornal]

OK ... tomorrow morning I will post as few examples that will show you code for several methods ... to fix it in a little better.

[rfornal]

WOW ... tons of things going on at the same time ...

Continuing on where we left off, you stated that you felt you understood the tables. Here's a link to a web-page with three tables using different structures, borders, and colors to give some more concrete examples ...

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

Note the links to my site within the tables ... you can insert <img ... > Tags, too ...

... let me know if this code makes more sense, is making more sense, is becoming clearer than mud ...