Website Design / HTML

[nuccia]

Bob,

I was wondering...does this work on all computers....even Mac? Just curious since some people run different programs on their Macs..

nuccia

[wldspirit]

Wow........I don't know what I did.....but I started the last several steps over again and everything linked perfectly!!!!!!!

Trial and error......

Lisa

[rfornal]

This process will work on Mac computers. HTML files are specific Internet-based files that the browswers were created to read. The folders, filenames, and image types are all the same from PCs to Macs.

The only variation here will be what you use to edit the HTML (.htm or .html) files. On a PC, I use and recommended earler to use Notepad which is included with Windows (oops, almost type Widows ... there's a slip).

I'm sure someone will pop in and provide the equivalent program for a Mac.

[hr]
Congrats Lisa!

I'll move on to the next phase in a couple of hours ...

[wldspirit]

Great!!!!! I can't tell you how much fun I am having here.......and I hope others are learning something from this as well.

Surely I am not the only one who would like a site devoted to my family
genealogy........and to think one day my grandchildren will access it is even better.......

This is a wonderful contribution for all to enjoy!!!

Lisa

[JamesBianco]

I couldn't agree more, this is fun! I think I just may print this thread out.

I just have one question for Bob, you said in an earlier post that Dreamweaver uses WYSIWYG. Is that to say it codes FOR you through some sort of an editor? I have the program (thanks to a friend) and want to revamp my Carini site with it, but honestly it's overwhelming every time I open it.

Thanks a million Bob for this thread, your time and energy is very much appreciated.


Jim

[rfornal]

Two things Jim ...

I am coding a Wikibook to follow this thread. These pages will be less conversational, but follow the same intuitive line that we are here. They will also be easier to read once printed.

Dreamweaver is WYSIWYG, but I use it so infrequently that I will have to take a day or two to get up to speed before helping you. I'll look into it sometime over the next week.

[nuccia]

Two things Jim ...

I am coding a Wikibook to follow this thread. These pages will be less conversational, but follow the same intuitive line that we are here. They will also be easier to read once printed.

Dreamweaver is WYSIWYG, but I use it so infrequently that I will have to take a day or two to get up to speed before helping you. I'll look into it sometime over the next week.

What does this mean???? I want to print it out too because I won't have time to actually try anything until the weekend when I can get up before the kids do and play around a bit..

And everyone's right..this is fun. So nice of you to take the time and patience to go through all this...hope we're good "students"..

nuccia

[wldspirit]

Wish I had known that.....I've used copy/paste to print out all relevant material......as for good students......I'd be the one in class to try ones patience with my never ending curiosity......
Lisa

[rfornal]

You're all great students! I've watched the page hits and know this is a popular topic.

As for the Wikibook - it's a virtual book that anyone can edit (it does notify when changes to my book are made) ... it's a very popular form of information flow. I hadn't decided to create the book until this morning ... I learned all about creating the book pages this afternoon. It is going to take some time ... teaching this material and then transferring it over takes TIME.

Here's the path ...
http://en.wikibooks.org/wiki/Developing ... _Web-Pages

I'll set up permanent links in my site and on this site once I get the majority of the content in ...

[nuccia]

Great..thanks Bob!

I'm really looking forward to it!

nuccia

[rfornal]

Linking to Exernal Pages/Sites

OK, we've talked about placing images onto a page. You should now understand that an image can be referenced from the same folder that the web-page is in, or from another location (either in the same domain or on another web-site all together).

The true strength of the Internet is the ability to reference other pages ... the work that other people have done. This is done with Links.

As we saw with images, there are basically two types of links - internal and external.

Internal Links are connections to pages on your site minimal or no path information is required. ... this was covered yesterday.

External Links, as you've probably figured out, are connections to web-pages on other sites. In this case, you need to include full path information.

[hr]
In both cases, we use the same HTML tag. Here is a simple example of an external link for you to place on either of your practice pages:

Remember: use the <br> to place Line Breaks.

<a href="http://bob.fornal.org/Recipes/">Bob's Recipes</a>

... which becomes ...

Bob's Recipes

Someone let me know when you got this inserted correctly and I'll show you another cool way to utilize the A HREF code ...

[wldspirit]

First cup of coffee, first lesson.........and all is well.........
Ready to move on when you are........

Lisa

[rfornal]

Linking an Image

You should have noticed in the Linking Projects that you have done that the Open/Close Tags for linking are around text (ie. Bob's Recipes).

You can also place these around the <img src= ...> code as well, which will make the image a link (clickable).

Place this code before and after the image you placed earler, as indicated:

Before the image: <a href="http://italiangenealogy.tardio.com/">

After the image: </a>

[wldspirit]

Got that one to with no problem........

By George.....I think I've got it........!!!!!!!

wldspirit

[rfornal]

Tables

Cool - now for a slightly more difficult topic. Tables are important when you are first beginning to develop web-pages. Much later, you will most likely learn about Style Sheets (not difficult to do, but a lot added onto what you are already getting). Until then, tables are one of the easiest methods to tweak/adjust alignment (left, center, right).

Before we talk about the tags, here's the simple part; with most software, when we talk about a table, it has rows (across) and columns (down). For our purposes, we will have Table Rows (across) and Table Data (cells on a row). The number of cells in the first row determines how many columns there are for the rest of the table.

Here are the three Tags that we will use:

1. <TABLE> </TABLE> - Table Open/Close
2. <TR> </TR> - Table Row Open/Close
2. <TD> </TD> - Table Data Open/Close

What I'd like to do now is discuss each of these and some of the options individually to provide some depth of understanding when we get to some examples.