Web design Tutorials Lesson 4.( Part 2)

Inserting images into a web page

 So you have got your image file, either a GIF file or a JPEG. however does one twig into an internet page you are doing therefore with the IMG tag in hypertext markup language. the fundamental IMG tag appears like this:



There are not any closing tags for the IMG tag. therefore you do not do this:



In between a try of angle brackets, you kind the letters IMG (short for image, of course). once an area, you kind SRC. This stands for supply and means that the placement of your image. once AN sign, you kind the name of your image between a try of quotation mark.

It's essential that you just get the SRC half right, though. To do that, you wish to grasp regarding Absolute versus Relative file referencing.


Absolute Referencing

Take a glance at this file reference:

C:\Users\Owner\Documents\HTML\some_image.gif

Starting from the right-hand facet, this says that there's a picture referred to as some_image.gif. This has been saved into a folder referred to as hypertext markup language. The hypertext markup language folder is within the Documents folder. The Documents folder is in an exceedingly folder referred to as Owner. The Owner folder is in an exceedingly folder referred to as Users, that is on the C drive.this is often AN Absolute file reference. It points to a particular location on your C drive.

This would be no sensible on the web, however. though you'll have of these folders on your C drive, someone else viewing your online page will not. however that person's browser can attempt to hunt for of these folders. after all it will not be able to realize them, as a result of all the folders area unit on your pc and not theirs that the image you such as to use in your online page will not be showed anybody else however you.

Another example of AN Absolute References is this:

http://www.homeandlearn.co.uk

That's AN absolute regard to an internet page on the web. utterly OK, and you will see a way to add links to sites later however Absolute References and not really sensible once it involves you own pictures and your own hypertext markup language pages.

Relative References area unit far better.Relative Referencing

With Relative Referencing, the start line isn't your own PC, however the image file or hypertext markup language file itself With Absolute Referencing, the browser starts the seek for the image on the mitt side:

Example of AN absolute file reference

With Relative Referencing, the browser starts the seek for the image on the correct hand side:

Example of AN relative file reference

So with a Relative reference, the browser starts yearning for a file referred to as "some_image.gif," If you simply place this:



the browser can hunt for the get into identical folder wherever you saved your online page. If it's there, no problem; the browser can show the image. you do not ought to add the rest, as a result of the browser can stop looking out once the image has been found. In fact, the sole place the browser can look is within the same folder wherever you saved your online page.

So with Relative Referencing, if you place all of your pictures and sites within the same folder, the browser can recognize wherever to seek out everything And once you are asking the browser to show a picture or another online page you merely want the name of the image or online page. you do not ought to do this:



You can simply do this:



On an expert level, though, merchandising everything into one folder is frowned upon. If you created a folder referred to as "web_site" you'd be expected to make different folders within this one. A folder referred to as "images" to store all of your image files; a folder referred to as "scripts" to store any external code; and a number of different folders similarly.

If you are doing that, Relative Referencing gets a little bit trickier. for instance, suppose you have got an internet page referred to as index.HTML. you've got place this online page inside a folder referred to as data processor. you've got created another folder inside your data processor folder. you've got referred to as this new folder pictures. therefore your file and folder structure appears like this

 Of course, you'll have placed all of your pictures within the pictures folder. Now, if you would like one among those pictures on the index.HTML page, you could not do this:



If you tried that, the image would not show. that is as a result of you haven't told the browser this folder referred to as pictures. you'd need to do this:



The forward slash means that "look for a folder referred to as that's within the same folder because the current file" during this case, hunt for a folder referred to as "images". (The current file is index.HTML, that is wherever you would like the image to seem.)

If you wished to purpose to a picture that was outside the "web_site" folder, then life simply got even trickier still. (You'll see a way to solve this later). however as a beginner, if you retain everything within the same folder - pictures and sites - then this type of relative referencing ought to work:



In case all this file referencing isn't too clear we'll do some sensible add subsequent section.