XPDC CINTA

Jumat, 11 Oktober 2013

ayahsaba76.blogspot.com

, you want to make a Web Page!
Lesson 16

Another option that can be used if you want to offer a lot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).

Click on the thumbnail to see a larger image

The first thing you need to do is fire up your image editor and make smaller versions of your images. This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the <img> tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.

Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know). Put the full sized image and the small image in your working folder. Once again... right-click & Save Picture As (or something similar).

Start with an <img> tag using the smaller image.

<body>
<img src="car2-sm.gif" width="90" height="62">
</body>

Add your <a> tags.

<body>
<a><img src="car2-sm.gif" width="90" height="62"></a>
</body>

Then add the URL of the big picture and bingo, you're done!

<body>
<a href="car2.jpg"><img src="car2-sm.gif" width="90" height="62"></a>
</body>

You can, if you'd like, get rid of the blue border. Or, you may wish to keep it so that your viewers know that it is a link. It's up to you.

<body>
<a href="car2.jpg"><img src="car2-sm.gif" width="90" height="62" border="0"></a>
</body>

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 15

Before we go on, we need to go over something. When you include images on your page, remember that they contain a lot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half can result in an image only 1/4 the size in Kb. Also you can reduce the number of colors. For example:


Dimensions 310 x 304 # of colors- 238 Size - 69 Kb

Dimensions 207 x 203 # of colors- 238 Size- 34 Kb	Dimensions 207 x 203 # of colors- 48 Size - 19 Kb

All image editing was done with Paint Shop Pro 3.
(This older, non time limited version is still available. Even though it's older and not as
fancy as the latest version, it's a GREAT graphics editor - PERFECT for new web authors.)

Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if your page takes forever to load, your visitors may leave and they won't see anything.

I suppose that these days, with cheap bandwidth and so many folks hooked up to broadband internet connections, watching your image sizes seems unimportant... but I'd argue it's still a good thing to keep a handle on. All things being equal, you are better off with a trim and quickly loading site rather than one that's needlessly bogged down with a bunch of overly bloated images.

If you like playing with online toys, and just to see how much images can be reduced, try GIFWorks...

GifWorks is a really nifty online GIF editor and optimizer. You don't need to download a thing. You can send it an image and optimization is just one of the many things it can do. While you're there, you can check out their other neat tools or browse their vast image collection. Go ahead and give it a whirl.

FAQ: What should I use for my pages... GIF or JPG?
A: Good question. The short answer is... use a JPG for photographs or images with a lot of blends or gradients, and use a GIF for simple or line drawn type images that contain relatively few colors. A more throrough answer is given in GIF or JPG?

And for a couple more interesting image related pages, have a look at GIF Compression Explained and Image Compression Examples.

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 14

FAQ: How do I link to a _____ file so people can download it?
A: Simple, just link to it. Let's suppose you have a few Microsoft Word documents that you would like to offer. Just link to them...

<a href="myresume.doc">Download my resume</a><br>
<a href="mybio.doc">Download my autobiography</a>

Download my resume
Download my autobiography

You may wonder how to be sure the file gets saved to disk rather than being displayed or loaded or whatever. In short you have little control over what happens when a user downloads a file. Most people know how to right click and Save To Disk. Others may have a plugin to handle the file. Just let people manage that part by themselves. Your job is simply to offer it for download.

FAQ: How do I make a link open in a new browser window?
A: Well, first of all, this can be done easily by your visitor if he wishes. All he has to do is right click on the link and choose "Open In New Window".
If we figure that you want to force this action for whatever reason, you can add target="_blank" to the link...
Go to <a href="http://www.cnn.com/" target="_blank">CNN</a>

There's more on targets in Frames Tutor.

One more note about links... It is perfectly acceptable to link to someone's web page(s) without asking. Links are what makes the Web the Web. Again, because this is a very common newbie misconception... if you want to link to another web page... just link to it. You don't have to ask permission, even if you really really feel like asking would just be the polite thing to do... it's just not necessary. Now, that said, it's NOT a good idea to link to someone else's media... such as images, movies or sounds.

Now that you've learned how to make links, I'm going to tell you about one of my pet peeves. I hate searching for information on widgets and all I get are pages with 14 dozen LINKS to widget sites and nothing else. I follow some of those links and I get MORE LINKS to more widget link sites... but never any friggin widgets!

If you're making a web site, of course include links if you think it adds value, but try to refrain from having a site that consists of nothing more than a bunch of links... especially links that link to even more links!

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 13

An email link works in much the same way. We just use mailto: and an email address instead of a page address.

<body>
Send me <a href="mailto:forrest@bubbagump.com">Mail!</a>
</body>

Send me Mail!

One thing to keep in mind about email links... it's always a fine idea to have your actual email address readable on your page. Some of your visitors may be at computers where emailing through a mailto link may not work so well. Making your email address visible will help.

<body>
Email me at 
<a href="mailto:forrest@bubbagump.com">forrest@bubbagump.com</a>
</body>

Email me at forrest@bubbagump.com

FAQ: How can I specify a Subject for my email message?
A: Very easily, but there's a catch. You can add a subject to the link as follows...
<a href="mailto:forrest@bubbagump.com?subject=Hey Bubba!">
... but, be advised that floating around out there is the occasional email client that doesn't know what to do with that subject. For those people, the email may appear to be sent, but in reality it may simply disappear into oblivion. If this rare glitch is a concern to you, then don't specify a subject.

FAQ: How can I get rid of the underline in my links?
A: Well, technically that can't be done with HTML. But, it can using Style Sheets. If you put the following between the <head> tags of your document, the browser should render all the links on a page without an underline...

<style type="text/css">
a:link, a:visited, a:active {text-decoration:none}
</style>

That's just dandy, but what if I just want to get rid of the underline on only one or two links?
You can use a style suggestion within the link itself...

<a href="mailto:forrest@bubbagump.com"
style="text-decoration:none">Mail!</a>

You'll find much more on Style Sheets (or CSS... Cascading Style Sheets) in CSS Tutor. But that's for another day. Remember, walk before run ;-)

We can make an image a link if we want. Using the "Go to CNN" example, we simply substitute an <img> tag for the word CNN.

<body>
Go to <a href="http://www.cnn.com/"><img src="chef.gif"
width="130" height="101"></a>
</body>

Go to

FAQ: How do you get rid of that ugly blue border around an image link?
A: Simple... add border="0" to the <img> tag. (See below.)

<body>
Go to <a href="http://www.cnn.com/"><img src="chef.gif"
width="130" height="101" border="0"></a>
</body>

Go to

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 12

Let's learn about links.

It's really very simple. We'll make a link to Yahoo. Start with this...

<body>
Go to Yahoo!
</body>

Go to Yahoo!

Then add a pair of anchor tags.

<body>
Go to <a>Yahoo!</a>
</body>

Go to Yahoo!

Add the URL and you're done! URL stands for Uniform Resource Locator. That's a big fancy phrase that the computer people came up with. They tend to do that a lot. A URL is just an address on the web. You specify it like so: href="url". And since Yahoo's URL is http://www.yahoo.com/ our link ends up like so...

<body>
Go to <a href="http://www.yahoo.com/">Yahoo!</a>
</body>

Go to Yahoo!

Let's do one more.

<body>
Go to CNN
</body>

Go to CNN

<body>
Go to <a href="http://www.cnn.com/">CNN</a>
</body>

Go to CNN

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 12

Let's learn about links.

It's really very simple. We'll make a link to Yahoo. Start with this...

<body>
Go to Yahoo!
</body>

Go to Yahoo!

Then add a pair of anchor tags.

<body>
Go to <a>Yahoo!</a>
</body>

Go to Yahoo!

<body>
Go to <a href="http://www.yahoo.com/">Yahoo!</a>
</body>

Go to Yahoo!

Let's do one more.

<body>
Go to CNN
</body>

Go to CNN

<body>
Go to <a href="http://www.cnn.com/">CNN</a>
</body>

Go to CNN

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 11

Another <img> attribute that deserves mention is alt...

<img src="chef.gif" width="130" height="101" alt="My Chef">

alt is sort of a substitute for the image when the user is using a browser that isn't (for whatever reason) displaying images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a screen reader (a browser where the web page is read aloud). In those cases, that alt attribute could be very important to your visitor.

Something really neato you should know about images and their size.

Try this...

<body>
<img src="chef.gif">
</body>

As you can see, the browser figures out how big the image is all by itself. Why bother with dimensions then? Because with dimensions, the browser can simply reserve a space for the image, then load the rest of page. Once the entire page loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. All in all, the browser functions much better with image dimensions.

Well Joe, that's all well and good <yawn>, but what's the neato part??

Check this out...

<body>
<img src="chef.gif" width="300" height="101">
</body>

<body>
<img src="chef.gif" width="40" height="200">
</body>

You can specify whatever dimensions you want and override the proper dimensions. Still foggy on the neato part?

Well, look at this little red dot --> It's a 1x1 square. Look what I can do with it though...

<body>
<p align="center"><img src="red_dot.gif" width="500" height="1">
<p align="center"><img src="red_dot.gif" width="500" height="2">
<p align="center"><img src="red_dot.gif" width="500" height="8">
<p align="center"><img src="red_dot.gif" width="2" height="200">
</body>

Pretty nifty huh?

ayahsaba76.blogspot.com

So, you want to make a Web Page!
Lesson 10

Let's get into putting images into a web page. We're going to use this one. Right click to save it off this page. Save it as chef.gif to the same directory you previously saved page1.html.

You specify an image with the <img> tag...

<body>
<img>
</body>

We must also specify the source and the size.

<body>
<img src="chef.gif" width="130" height="101">
</body>

FAQ: How do I find out the width and height of an image?
A: Well, there are a couple different ways. One way is to load it in a graphics viewer. An outstanding (and free) viewer that I use is Irfan View.
Another very popular graphics editor is Paint Shop Pro. It's is time limited shareware but it is one fine editor. If you goYou'll find there an older version that I VERY highly recommend for beginning web designers.
Another method is to use a text or html editor that imports the size when you insert the image. I use NoteTab, and an image tag of my design is built for me when I simply drag the filename on to the current file. I can insert an image in about 6 tenths of a second

I told you NoteTab was my favorite!

Let me make the point that not only does the source specify what image, it also specifies where is the image. The above source, src="chef.gif", means that the browser will look for the image named chef.gif in the same folder (or directory) as the html document itself. Below are a few diagrams...

	`src="chef.gif"` means that the image is in the same folder as the html document that called for it.
	`src="images/chef.gif"` means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.
	`src="../chef.gif"` means that the image is in one folder up from the html document that called for it.
	`src="../../chef.gif"` means that the image is two folders up from the html document that called for it.
	`src="../images/chef.gif"` means that the image is one folder up and then another folder down in the images directory.
	`src="../../../other/images/chef.gif"` I'm not even going to try and put this into words. I hope you get the drift.

There is another way that this can be done. All references to images can have as their source the complete URL. For example:

http://www.yourdomain.net/LottzaStuff/images/chef.gif

Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to absolute (complete) URLs?? Because you can build your site locally and all the links will work. When your pages are done, you just upload the whole pile to your server and everything will work just fine. In addition, it is easier for the browser to get the images and your page will load faster.

Is there ever a reason to use an absolute URL? Sure, if the image resides on a completely different server.

FAQ: As soon as I upload my stuff to the Web, all my image links are broken. I used relative URLs and I definitely uploaded them because I can see them there with my FTP program. What gives?
A: Sounds like it could be a case problem. To a Windows based system, Chef.gif is the same as CHEF.GIF is the same as chef.gif. Put that image on a (often) UNIX server and they become 3 distinct filenames. You're telling the server to look for Chef.gif, but all it can find is CHEF.GIF.
The fix? Always use lower case filenames. Make this a definite habit and you'll never get bit by the case bug.
Another really good habit is to avoid spaces in your web filenames. Swap an underscore_ for any spaces. Change My Mommy.gif to my_mommy.gif.
Have a look at Where are my images? for more on missing images.