HTML Forum

**Scoop** · 04-12-2004, 06:34 PM

Can anyone help with the following?.......

I've just recently started learning HTML and I'm having my first stab at a web page for my local football club. All was going well till I hit a snag last night. I can't seem to grasp the right code to source images from internal folders on my PC. I've trawled through various tutorials and have amended the code a few times but to no avail.

I seem to be image sourcing pix from URLs fine, it's just internal images. Here's the code (excuse the amateurish web page) can anyone help & spot what I'm doing wrong?

<html>

<head>

<font face="tahoma"size="1"color="white">

<h1 align=center>Wollaton Football Club</h1>

<h5 align=center><li>The First Team: Notts Alliance Senior Division</li><li>The Reserves: Notts Alliance Division 1</li><li>The Third Team: Midland Amateur Alliance Division 1</li><li>The Fourth Team: Midland Amateur Alliance Division 2</li></h></ul>

<img src="http://www.mhkvision.co.uk/images/hish.jpg"
width="150" height="100">

<title>Title of page</title>

</head>

<body>

<h1><b> Wollaton Secure Championship </h1></b>

</body>

<html>
<body>

<table border="0" width="100%" cellpadding="10">
<tr>

<td width="50%" valign="top">

<font face="tahoma"size="2"color="white">

<p>Wollaton thirds have put the MAA Division One title beyond all reasonable doubt following a 6-1 home win against Woodborough.</p>

<p>With only two games left to play until the end of the season, second placed Southwell Amateurs will not only have to win all their remaining games and hope for Wollaton to lose their last two, but Southwell will also have to score more than 50 goals to better Wollaton's goal difference.</p>

<p>With such a feat highly unlikely, the Championship is now a mere formailty for the team who have led the way as Division One leaders since the third week of the season.</p>

<p>Wollaton now face Brunts at home next Saturday, when they are expected to be presented with the Championship at Ireland Avenue by league officials.</p>.

</td>

<td width="50%" valign="top">

<font face="tahoma"size="2"color="white">

<p>Although the 6-1 win against Woodborough was achieved with a bagful of goals the scoreline somewhat flattered Wollaton.</p>

<p>The performance from the League leaders was, for most parts of the game, disjointed. With Chris Fish still injured and Jules Fish also unavailable, the management team shuffled the pack, dropping Will Olde to centre back alongside veteran Geoff Stanhope.</p>

<p>John Lyndsey continued at left back from where Dylan Lawton pushed up to the left hand side of midfield to add a more attacking bite to the play.</p>

<p>Wollaton got the first break halfway through the first half after a superb ball from the right wing from Andy Creswell was met by the prolific Nick Evans. With his back to goal, the number 10 took a touch to turn, another touch to slip free from his marker and then slammed the ball past the keeper from an acute angle.</p>

</td>

</tr>
</table>

</body>
</html>

<img src="http://www.abc.net.au/worldcup2002/galleries/brazil/ronaldo.jpg"width="300" height="200">

<p><b>Ronaldo is fast but not as fast as Nick Evans</b></p>

<img src="/Desktop/My Documents/My Pictures/Wollaton FC stock/DSCN01414.jpg"width="300" height="200"/>

<body bgcolor="blue">

</html>

**david** · 04-12-2004, 07:40 PM

Firstly, to answer your question, you can't. Basically, this won't work because of a couple of reasons:
1. Your computer would have to be on all the time
2. Web users browsers will not know how to contact your computer to do this.

If you're only planning to do this for testing, I think:

Code:

<img src="C:\Users and Settings\yourusername\My Documents\My Pictures\Wollaton FC stock\DSCN01414.jpg" width="300" height="200"/>

But to get it to work on the internet, you will need to upload the image to your site. Most people use an 'images' folder and then use:

Code:

<img src="images/DSCN01414.jpg" width="300" height="200"/>

If you need more assistance with this:
http://www.freewebmasterhelp.com/tutorials/beginner/
http://www.freewebmasterhelp.com/tutorials/ftp/

Just a few minor points that I should also make about that code:

Code:

<font face="tahoma"size="2"color="white">

should really be written:

Code:

<font face="tahoma" size="2" color="white">

This:

Code:

<body bgcolor="blue">

should come after:

Code:

 <html>

<head>

and this:

Code:

<img src="http://www.abc.net.au/worldcup2002/galleries/brazil/ronaldo.jpg"width="300" height="200">

<p><b>Ronaldo is fast but not as fast as Nick Evans</b></p>

<img src="/Desktop/My Documents/My Pictures/Wollaton FC stock/DSCN01414.jpg"width="300" height="200"/>

should come before:

Code:

</body>

One other thing is that you should be careful of linking to images on other sites for threereasons:
1. Many site owners do not appreciate people linking directly to their images. It means that they must pay for the bandwidth to serve the image to your user, but don't get the extra visitor (and advertising revenue) in return. Many will block this, or complain to you for doing it
2. Most images on websites are copyrighted. Unless they are stated as being free for you to use on your site, you should contact the website owner for permission before using them.
3. The URL of images on other sites may change at any time, which would break your page.

Hope that helps your site!

**Scoop** · 04-13-2004, 07:27 AM

You're a star. I've taken all those points on board and with your help the problem I was experiencing is now solved. I knew I was writing wrog code - I just couldn't grasp how to rectify it.

I take those points you made about image use into consideration - the URL links are just test pix, I certainly wouldn't "piggy-back" other sites for image uses as I appreciate there are copyright issues, among other points.

Thanks once again for taking the time to help me with this, it's much appreciated.

May I pose another question? (I guess this is the danger of helping out newbies - they follow up with stacks more questions!) How do I reduce the size of an image for inclusion on a web page? I started building a table to format the site, now I can source images from my folders I imported an image but it filled the whole of the screen and knocked the table out of shape. How do I pre-format the size of the pictures so I know how big or small they will appear on the site?

**kizzybell** · 04-13-2004, 12:10 PM

hi there

you'll need to get hold of a software package like photoshop or fireworks to do it for you. if you look at the image size you should change the dimensions (height and width) to the size you want them.

if you can't get hold of any software, you can set the height and width on the image tag itself, so for instance

<img src="images/mypicture.jpg" height="150" width="25">

that'll squash it for you, but you'll lose some of the quality. also try and make sure you squash it in proportion or it'll look odd!

hope that answers your question.

**AmyD** · 04-14-2004, 12:16 PM

Quote:

also try and make sure you squash it in proportion or it'll look odd!

Actually, just specify the height *or* the width, and the other will fall into place in the proper proportion.

It's a good idea to get your hands on some software that will let you resize the images, as opposed to relying on your html code to do this. This is particularly true if the images are very large, and you only want to display a smaller version of them. What happens is that the server still has to deliver the larger file in order to produce the image, it just displays it smaller. So you're using up more bandwidth and making people wait for a bigger file than you need to. When I first started I didn't know about this, and you should have seen my little images l.....o.....a......d

This is not to suggest that you shouldn't use the height/width attributes at all. Even if you have your images sized just the way you want them and ready to be included in your pages, reiterating one of the dimensions in your img tag is still a good idea. This is because with a dimension specified, the browser will alot the appropriate amount of space for the image even before it loads. That way the text will arrange itself around the images the way you intent for it to, right off the bat. That's as opposed to having the page shift around as the images load. (More of an issue for people with dial-ups, I guess, but many are still out there.)

I once had a page with lots and lots of pics on it, and I wanted to put some internal links to specific places on the page (here's *this* pic, etc.) - without having specified any image dimensions, my links to the spots where I'd put the anchors were useless. The page would start to load, the visitor would be taken to the place on the page where the pic *would* have been if none of the images above it actually took up any room. After everything had fully loaded, that position was completely useless, being halfway up the page from where the image in question was.

Blah blah blah. My point is, it's a good practice to use height or width, sometimes for reasons that might not affect you right away.

About the photo editing software, if you don't have the cash, don't feel like you have to buy the latest version of photoshop for 700.00 or whatever it goes for these days. It's a great program, and I'm hoping one day I can get a copy, but there are lots of simpler programs out there that just do the basic stuff and cost way less. I actually bought a stripped down version of an older photoshop (LE 5) a few years ago for 50.00 on ebay (I was able to liscence it - it wasn't bootleg or anything) and it actually has alot of features. Not cutting edge by a long shot, but there's lots you can do with it. Anyway, I just didn't want to leave you thinking that you can't resize images without selling your first born.

Good luck,
AmyD

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!