Author Topic: Need some html guidance, please  (Read 3531 times)

Offline Thomas S. England

  • Super Duper Poster
  • ****
  • Posts: 615
    • View Profile
    • http://englandphoto.com/portfolio/
Need some html guidance, please
« on: June 10, 2003, 04:34:33 PM »
My website skills are rudimentary at best.

I've been relying a lot on Photoshop & iView's ability to create websites for me out of folders of images.

What I'd like to be able to do is to place some sort of nice looking link from one of those websites to another, maybe more than one.

What sort of html code is needed, and where do I put it? I can edit the existing pages in BB Edit Lite, but I'm not sure where to begin.
Thomas S. England
Decatur GA 30030

Images from Tuscany 2008

Photo Portfolio

Offline kps

  • TS Addict
  • *****
  • Posts: 1693
    • View Profile
    • http://
Need some html guidance, please
« Reply #1 on: June 10, 2003, 05:55:17 PM »
Not exactly sure what you mean by "some sort of nice looking link", unless you mean an image....

To do an image as a link:

<a href="http://apple.com" target="_blank"><img src="Resources/banners/MadewithMacBW.gif" width="114" height="63" border="0" alt="Made on a Mac"></a>

Start with the <a href> tag which equals the URL you're sending to
target=_blank  means it opens a new page for your link. This is optional.
<img src> tag is where the clickable image is located (that would be your server and the path to the image and the image name)
width, height, border are the image attributes
alt is the name of the image if the image can not be found on your server. The browser will display the name instead of a broken image icon.

That's it.

Offline Bill

  • TS Addict
  • *****
  • Posts: 4615
    • View Profile
Need some html guidance, please
« Reply #2 on: June 10, 2003, 06:42:54 PM »
Thomas.
I'm about two stages below a beginner when it comes to html and web pages.
OR to put it another way -Someone please give this guy a TV remote! Because he is killing the internet with his attempt at web pages!!!"- <gr>

GiantMike (TS member) a long time ago gave me a very good link on the in-and-outs of html and how to do pages by hand. Can't find that link/bookmark.
Think he still does his by hand!?! Very Well,I might add!

SOoooooo ... it's been awhile but I gave it a shot.

I created a page with an "image" link and below the image link is a "text" link.

The "image" link takes you to a different server. Your main page.
The "text" link also takes you to a different (same owners) server.
Now you can jazz up the text with colors,make it bold,enlarge etc etc.
I didn't because I had a hard enough time figuring out how the h*ll to do what I did by memory. <gr>

You'll have to look at the source of the page to see how I did it ... cus don't ask me. smile.gif
Oh I'm sure I have some of the code wrong but what the hey. biggrin.gif

Beginners web-101
Two cans and a string powered by a big mouth


Offline Thomas S. England

  • Super Duper Poster
  • ****
  • Posts: 615
    • View Profile
    • http://englandphoto.com/portfolio/
Need some html guidance, please
« Reply #4 on: June 10, 2003, 07:13:26 PM »
I knew help would arrive.

I think I can find/steal/deduce the code that will let me put, let's say an image and the words "Go here for more pix".

My question at this point is where within the existing code for one of my sites, made by Photoshop, for example, would I put these lines. Or does in matter?
Thomas S. England
Decatur GA 30030

Images from Tuscany 2008

Photo Portfolio

Offline Diana

  • Super Poster
  • ***
  • Posts: 410
    • View Profile
Need some html guidance, please
« Reply #5 on: June 10, 2003, 07:21:04 PM »
Hi Thomas,

Unless you use some complicated tables, code generally loads in the order it was typed at the source level. If you will post a link to one of the sites you are working on, we can show you exactly where the code will go.

see ya,
Diana
Sysadmin Rule #14: If it's not on fire, it's a software issue.

Registered Linux user 290473
http://counter.li.org/
http://www.crestcomm.com/diana/gnupg.txt for GnuPG public key  

Offline Thomas S. England

  • Super Duper Poster
  • ****
  • Posts: 615
    • View Profile
    • http://englandphoto.com/portfolio/
Need some html guidance, please
« Reply #6 on: June 10, 2003, 07:41:07 PM »
OK, how about this one:

http://englandphoto.com/dcampus/
Thomas S. England
Decatur GA 30030

Images from Tuscany 2008

Photo Portfolio

Offline Diana

  • Super Poster
  • ***
  • Posts: 410
    • View Profile
Need some html guidance, please
« Reply #7 on: June 10, 2003, 09:11:54 PM »
*grin...when I said complicated tables earlier, funny thing was I had included frames and then erased it since I couldn't imagine you would use frames. You've got frames and I don't understand the navigation you are attempting to provide so it's still hard for me to make a suggestion as to where you could put a link to a separate website. I'll stay with ya though until you get something figured out...smile.gif
Diana
Sysadmin Rule #14: If it's not on fire, it's a software issue.

Registered Linux user 290473
http://counter.li.org/
http://www.crestcomm.com/diana/gnupg.txt for GnuPG public key  

Offline danf63

  • TS Addict
  • *****
  • Posts: 1262
    • View Profile
    • http://www.muchospanish.com
Need some html guidance, please
« Reply #8 on: June 11, 2003, 06:00:50 AM »
Thomas, you are using a table on your lefthand frame, but the table doesn't fit in the frame.  Your frame   has a table with 6 columns.  You could reduce it to one column, but then the page on the left would scroll and may not look that nice.

What iView did for you was make a frame, with a site with a page on the left and a page on the right.  If you look inside your folder for the site, you'll see that you have three .html files: one is called dcampus.html and that is the frame.  That page doesn't look like anything, it just tells the other two pages where to load.

The page on the left is called index1.html and the page on the right is called 1.html and it is in a separate folder, the one called source.

This stuff is important to know if you want to add anything to your site, since you have to know which page to add it to.

You might try opening the pages in Netscape and using Composer to edit the pages.  Composer is free so it's nice to start out with, and the newer versions allow you to edit in the WYSIWYG mode and the HTML mode.

Dan
G5 iMac running Tiger 10.4.5, dual-USB iBook 500 mhz running Panther, iBook G3 500 mhz running Panther in my daughters' room-- all connected to wireless Network.  Road Runner cable Internet from Time Warner.

Offline Thomas S. England

  • Super Duper Poster
  • ****
  • Posts: 615
    • View Profile
    • http://englandphoto.com/portfolio/
Need some html guidance, please
« Reply #9 on: June 11, 2003, 07:20:44 AM »
Here's what I hope to add to such a site:

At the upper left hand part of the page (in the thumbnail frame) I would like to have a logo image and the words, "Back to main portfolio". I would also like to have an "email me" button.

It would be fine for me for those items to appear at the top of the main frame, but it seems as those that would be more complex in terms of having it always be available to the viewer.

In general, what code controls placement of such items on the page?
Thomas S. England
Decatur GA 30030

Images from Tuscany 2008

Photo Portfolio

Offline snuffysbluff

  • TS Addict
  • *****
  • Posts: 1374
    • View Profile
    • http://
Need some html guidance, please
« Reply #10 on: June 11, 2003, 08:32:20 AM »
When I did my site, I studied the "View Source" that Netscape or Communicator show you by clicking and holding the mouse button.
I also used Netscape to build my pages...It's a great help and easy to "get".

I used Image Maps for most of my links...You can put 'em where you want 'em.

Giant Mike helped me a bunch also. thanx.gif Mike.

Offline cdub1988

  • TS Addict
  • *****
  • Posts: 1186
    • View Profile
    • http://
Need some html guidance, please
« Reply #11 on: June 11, 2003, 08:57:54 AM »
QUOTE(Thomas S. England @ Jun 10 2003, 7:13 PM)
I knew help would arrive.

I think I can find/steal/deduce the code that will let me put, let's say an image and the words "Go here for more pix".

My question at this point is where within the existing code for one of my sites, made by Photoshop, for example, would I put these lines. Or does in matter?

Thomas -

If you're talking about the code level, it's a pretty much place-it-where-you-want-it kind of situation.

You put the <a href="whatever_path_this_points_to.html"> tag and put it before or after the element that you want it to appear in between.

Say, for instance, you have a table setup in your left-hand pane like you already do and you want to put a link between two of the elements/pics.

Before you start, here's a few tips for noticing what tags mean what:

<tr> = table row
<td> = table data
<a href> = link to web address or email
<img src> = image source (the path to where it's at)

So you start your code out with:

<table border=0 cellspacing=2 cellpadding=5 width=90%>
<tr>
<td><img src="path_to_image1.jpg"></td></tr>

Now here is where we insert the link between:

<tr>
<td><a href="http://www.apple.com" target="_blank">Apple Computer</a></td></tr>

Then we continue on with the rest of the table data:

<tr>
<td><img src="path_to_image2.jpg"></td></tr>
<tr>
<td><img src="path_to_image3.jpg"></td></tr>
and so on, until we complete the table with:

</table>

SO, that all said, here's a look at the whole thing together:

<table border=0 cellspacing=2 cellpadding=5 width=90%>
<tr>
<td><img src="path_to_image1.jpg"></td></tr>
<tr>
<td><a href="http://www.apple.com" target="_blank">Apple Computer</a></td></tr>
<tr>
<td><img src="path_to_image2.jpg"></td></tr>
<tr>
<td><img src="path_to_image3.jpg"></td></tr>
</table>

Hope that makes it clearer than mud.  wacko.gif

Take care, Thomas.

Chris
Umm, I'm a nerd.

Offline Thomas S. England

  • Super Duper Poster
  • ****
  • Posts: 615
    • View Profile
    • http://englandphoto.com/portfolio/
Need some html guidance, please
« Reply #12 on: June 11, 2003, 09:02:48 AM »
OK, thanks to all.
I have more than enough info to start playing, but I may not have the time for a day or so.

I'll report back.
Thomas S. England
Decatur GA 30030

Images from Tuscany 2008

Photo Portfolio

Offline Paddy

  • Administrator
  • TS Addict
  • *****
  • Posts: 13797
    • View Profile
    • https://www.paddyduncan.com
Need some html guidance, please
« Reply #13 on: June 11, 2003, 09:17:53 AM »
Thomas, I think you need to sit down and map your navigation - add some sort of menu bar (top, bottom, side - whichever you prefer) that appears on ALL your pages. The logical place to put that would be in the main frame - at the top or on the side. However, you also need to solve the problem of the frame on the left hand side - scrolling sideways to see the thumbnails is not intuitive. I would try two columns (one photo, one the name) and eliminate the cell borders (lines) between each. I'd also give the photo a descriptive name which then links, if you desire, to the large photo as well. "Barry000118.jpg" doesn't tell anyone anything and it is a lost opportunity to provide information - whether it is information about the college itself, or your photograph. I'd provide the same information on the page/frame with the large photo.

You might want to divide the sections so that they have names/descriptions, so that instead of navigating to "19-24", with no idea of what is there or whether one wants to go there, you give the visitor a clue as to what he/she might find there.

You also need to consider that if this part of the site (Barry) is to be part of the main englandphoto.com site, you may want to do something with the design that links all the pages visually.

You need to map out exactly what you want people to be able to do, and where they should be able to go (how exact do you want the destination options? Do you want them to be able to go from your main site to just "Barry" and back again, or do you want to be able to go from say, Barry to "Faces") Personally, I find the more specific the navigation options are on a site, the happier I am. I tend to get annoyed if I always have to go back to the starting place (Home) in order to check out another section.

Once you've figured that out, then we should be able to help you out with where to put things. I'm no expert in frames - I never use them because they don't bookmark properly, often have problems printing and I can achieve the same ease of use/updates/page additions using templates - but helping you write the HTML to get the navigation links on there should be pretty straightforward.
"If computers get too powerful, we can organize them into committees. That'll do them in." ~Author unknown •iMac 5K, 27" 3.6Ghz i9 (2019) • 16" M1 MBP(2021) • 9.7" iPad Pro • iPhone 13

Offline Diana

  • Super Poster
  • ***
  • Posts: 410
    • View Profile
Need some html guidance, please
« Reply #14 on: June 11, 2003, 09:32:01 AM »
Hi Thomas,

I thought it might be beneficial to you if you could see what I'm seeing. I've put up two images of your website as seen through my browser. Each is at a common screen resolution. The first is 800 X 600
and the second is 1280 X 1024

Note: I've reduced each image from those actual dimensions, but the ratios are the same. Imagine each is what someone using that screen resolution would see if their browser covered their screen. The images I have are still rather large in file size though, give them a minute to load.

You'll see that even at the largest screen resolution the left frame forces a scroll to the right. At the smaller resolution, both frames require scrolling right.

Before you get to far, consider a new scheme for navigation...one that doesn't use frames. If Photoshop has a way to define preferences, you may be able to tell it to do its thing without frames. You might also define a screen resolution to prevent scrolling on even the 800 x 600 size screen. I don't know that though since I've never used Photoshop for this. I would do as others have suggested and try Composer in WYSIWYG mode to see how far you get. Continuing the learning process will take some time, but you've done the major work already preparing the images. Learning to place them effectively is always worth some effort..smile.gif

Once you get a navigation scheme well defined, it will be really easy to show you with actual code where to place outside links effectively.
Diana
Sysadmin Rule #14: If it's not on fire, it's a software issue.

Registered Linux user 290473
http://counter.li.org/
http://www.crestcomm.com/diana/gnupg.txt for GnuPG public key