This Ink Painting is Beautiful. Can you see it?

And now the moment you've been waiting for. Images and graphics!

Books and tutorials might have given you the impression that placing images is confusing and scary. Never fear - nothing could be easier. As a matter of fact, the <img> tag is very simple.

First you need to remember that <img> tag is one of the few tags which has an opening, but has no closing. It stands on its own. So as soon as you've typed <img>, you've placed an image on your webpage. You need a few more elements before you can see it though, but it's there.

Inside the <img> you need to specify which image file to display and write a short description for the image. This is what a working image tag looks like:

 

<img src="some_image.jpg" alt="this is just a random image">
							

 

img tells the browser to put an image on the page, src tells the browser where to find the actual file which stores the image and alt is where you write whatever you feel like, as long as it describes the image. Technically you don't need to write anything in alt. You can leave it like this: alt="". However the alt tag is very important for people with vision problems - they use software known as screen readers. SInce they can't see the the text or images, the screen reader reads the page for them and when an image is reached, the software looks for the alt and reads it back to the viewer.

Another good reason to fill out the alt property is to allow devices which can read web pages but can't display or read images (certain cellphones, web crawlers, etc), to know what the image represents

Here is an example of what an <img> tag looks like when it's part of the source markup (note: unless you specify a real file in src, you won't see an image on your webpage, but you should still see the alt text):

 

<html>
      <head>
            <title>
                  This Ink Painting is Beautiful
            </title>		
      </head>	
	
      <body>
            <h1>Ninja History</h1>
            <img src="some_image.jpg" alt="this is a ninja">
            <p>
                  As a martial organization, ninja would have had many rules, and
                  keeping secret the ninja's clan and the daimyo who gave them 
                  their orders would have been one of the most important ones.
            </p>				
      </body>
</html>
						

 

That is all there really is to know about images. Calling the image file, however, is a different story.

We will try a simple exercise. Find an image file anywhere on your hard drive (or CD drive) and copy it to the same folder where your index.html is right now.

Rename the file into ninja_training.jpg (or gif, depending what type of image file you are using, ie you can change the name all you want, but leave the extension alone).

Take the html source for the whole page from the example above and replace the image tag line with the following line:

 

<img src="ninja_training.jpg" alt="this is most likely not an ninja">
							

 

By the way, if the image you picked was in fact an image of a ninja, you have just advanced by one rank in my dojo!

So this was easy, right? At this point I have to tell you that it is not how it is usually set up. If you want to maintain your sanity during a project, you need to keep all your files organized. Your images should never be in the same folder with your HTML files. So let's do it the right way.

in the same folder where your index.html file is located, create a new folder and call it images. Move ninja_training.jpg into the new images folder.

Now reload your index.html. Did your image disappear? It should. Do you know why?

I knew you could figure it out! We just moved the ninja_training.jpg file into a different place, so the browser can't find it anymore! How do we make it find it, you ask?

We tell the browser that the file is now sitting in the images folder. All we need to do is specify the new path to the file. We need to replace:

src="ninja_training.jpg" with src="images/ninja_training.jpg"

This is what the new <img> tag should look like:

 

<img src="images/ninja_training.jpg" alt="this is just a random image">
							

 

This should do it. If you still can't see it, check the spelling of the filename and the folder name vs. how you spelled those in your source markup.

 

Spiritual Advice from your Sensei:

As a matter of fact, any time you write markup and it's not doing what it's supposed to, first thing to do is check the spelling: make sure the tags are spelled correctly the < and > are in place, the filenames and folder names match the actual file and folder names you are trying to call. Make sure to remember this - my advice will save from shame and frustration!

 

Kata Practice: Make your page display 4 different images: 3 small and 1 large. Put the large one anywhere you want on the page, but make sure that the 3 small images are at the top of the page. Make it so that each image is a link to one of the pages from the last lesson's kata.

Hint: Making an image work as a link is no different than making text work as a link. All you need to do is wrap your element in the <a>element</a> tags.

Next >>

 

Inside the Web Dojo

the HTML chamber