Cannot insert img mark up

Get Started
1

Hi everybody,
First off, I’m an absolute beginner in html. I actually started yesterday. I found this website and started reading through the tutorials that are extremely helpful. I got everything so far, but when they asked us to add an image, I tried to follow the following markup, using my picture instead but it didn’t display on my webpage.

<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src=“divers-circle.jpg” width=“200” height=“162”
alt=“A circle of divers practice their skills”/></p>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>

It’s the alt attribute that I don’t understand. How can It add it so that my pic display on my web page. I’m using a Mac OS as a system and Firefox as a browser.
Thanks in advance

2

Hey Lila and welcome to SP :slight_smile:
First of all you need to have the pic called divers-circle.jpg in the same folder that has your .html page saved in. The src is what determines which image is going to be displayed (source).

The alt is for alternative text. So it is a sort of description of the content of the image. And you must specify it for every image…
I hope this helps :slight_smile:

3

Thank you so much Dark Tranquility!!! It worked!!!
One more question about the attribute though:confused: If I want to put a jpeg pic on my webpage, do I have to add the attribute? And if so, how can I do it?
For example, I want to add a jpeg image that’s called: Panda.jpeg. I put in my folder and it appeared on my webpage. I didn’t need to add any attribute to it, but if another pic won’t display and needs an attribute for some reason, how could I add the attribute to it? Thanks again so much for the quick reply.:slight_smile:

4

not sure what you’re refering to by attribute, but all that’s absolutely necessary for an image to appear on your web page is the img tag with the src attribute…like this…


<img src="panda.gif" />

That will work without the alt attribute, but it’s good practice to always add it. The alt attribute is used to give a text description to your image as Dark Tranquility mentioned. If you move your cursor over an image on a webpage with an alt tag, you’ll see some text pop up near the cursor…that’s the value of the alt tag for that image. You’ll also see the text if an image doesn’t load for some reason…you get the box with the red X and the text.

not sure if that cleared anything up, but feel free to ask any more questions. :slight_smile:

5

Hi Lila,

One convention that some designers like to follow is the creation of a folder structure to house their stuffz. Here’s how I do it; you can copy it, change it to suit you, or do something else entirely. :slight_smile:

Say I’m doing a site for a client named Amy. (Which it just so happens I’m doing.) I create a folder called amy. In that folder I place all my HTML files: the main index.html file and any subsidiary pages, like about.html, contact.html, or whatever.

Now I create three folders in the amy folder: css, js, and images.

I put my stylesheet(s) in the css folder. Any JavaScripts I might use go in the js folder. And the images, graphics files, and so forth go in the images folder. (I usually have subfolders in the images folder for icons, header graphics, and so forth, but let’s not go there just yet.)

Now, it becomes a standard practice to code your various elements.

In your HTML pages, all the images link to the ones in the images folder:

<img src="images/mypic.jpg" title="my picture" alt="my picture">

Same with my stylesheet(s):

<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">

And with my JavaScripts:

<script type="text/javascript" src="js/resize.js"></script>

The trickiness comes in your stylesheet, when you need to reference an image in that CSS file. You have to tell the stylesheet to go up and then back down into the file structure. Like this:

background: url(../images/background.jpg);

The ../ directs the CSS file to go to the images folder to find the image.

That should keep everything neat and orderly. You spend less time battling your file structure and more time doing cool things with design and code. :smiley:

6

Black Max: I haven’t started just yet with CSS and Javascript, but I find your advice very useful. Thank you so much:)

Agarcia: The thing that confuses me is that it says in the tutorial that in case the picture doesn’t appear we can add an attribute to it. Now thank God the pic I put didn’t need an attribute. Now what if it does? do I add any attribute I want? Do I add it to the picture name or just to the code?
Both your explanations are very clear; it’s just me trying to figure out something that 's obviously very simple. A perfect beginner’s case:)
Again, thank you so much.

7

What website is this tutorial from? It may be that I just need more caffiene in my system, but I’m a little confused as to specifically what attribute the tutorial wants you to add.

If you mean the alt attribute, as mentioned before, that’s just a sort of description for the image in case it doesn’t show up…and the value of the alt attribute can be any text you want that basically describes what the image is.

If you ever have a problem where an image doesn’t show up, most likely it will have something to do with the src attribute.

8

Thank so much you agarcia. That’s exactly what I wanted to know. :slight_smile: Let’s just hope that I won’t have to add any attribute in the near future.lol

9

Your very welcome. If you have any other questions, get stuck somewhere…or just need something clarified during your learning, don’t hesitate to post here for help.
Good luck. :slight_smile:

10

Um, let me stir the pot some more. :slight_smile:

Img tags need both ALT and TITLE attributes. They aren’t the same, and shouldn’t be the same, though lazy designers such as [URL=“http://www.sitepoint.com/forums/member.php?u=176748”]this guy often do just that.

ALT attributes are for accessibility purposes, i.e. a very short descriptive phrase for visitors who can’t see the image – i.e. visually impaired users or those whose browsers can’t or won’t display images. If the image is just decorative, use an ALT attribute with empty quotes:

alt=""

but don’t omit it. If you do omit it, screen readers and such will read the image’s file name. Neither should you use it as a “tool tip,” though IE for Windows displays it just that way (Mozilla, Opera, and others do not).

TITLE attributes are for non-essential, additional information – i.e. a tool tip, a longer descriptive phrase (not to be confused with LONGDESC), a snarky comment, and so forth.

Whee!

11

That sentence is misleading: images don’t need titles, and I’d argue most of them shouldn’t have them. (I mean the text in the link to Roger’s site looks like all images should have titles)

Well, with one exception: if you DON’T want IE showing the alt text as a tooltip on mouseover, then you do want both:
alt=“something useful” and then title=“” since the empty title stops IE from being stupid.

TITLE attributes are for non-essential, additional information – i.e. a tool tip, a longer descriptive phrase (not to be confused with LONGDESC), a snarky comment, and so forth.

Snarky comments++… that would be like Dr. McNinja. Titles for each comic are pretty snarky.

In general, alt text should make sense with the content around it. If it looks really weird or stupid when you turn off or block images, you know that you did it wrong.

12

Point taken, Poes, though I’ve read in more places than on Roger’s site that it’s safer to use both ALT and TITLE tags…

God, I hate IE. Is it healthy to have such a powerful hatred for a piece of software?

13

God, I hate IE. Is it healthy to have such a powerful hatred for a piece of software?

No.

That said, I’ve been tempted to make the IE voodoo doll.

Point taken, Poes, though I’ve read in more places than on Roger’s site that it’s safer to use both ALT and TITLE tags…

I didn’t read Roger as saying you should always use both. He stated when you should have a title and the assumption (maybe only on my part) is that otherwise you don’t use one.

An excellent example of when not to use both is if you’ve got images in a dropdown menu. The tooltips appearing can cover other menu items, and simply is a b*tch to get around. You can see examples of those at Jakob Nielsen’s alertbox page about mega dropdown menus (except there it was worse: people using titles on anchors, though you can haz images in dropdowns as well).
Anywhere where the tooltip may cause issues viewing some other part of the page is a good place to rethink using the title, even for images.

Another example is for screen readers who happen to be configured to read both out. This totally depends on the reader, and people who are able to set this up may be doing it because they come across sites who for whatever reason only have titles and no alts… but then when you have both, you may be hearing both, which is annoying.

In any case I try to be very careful with titles and generally do not add them to images because I can make sure pertinent information is elsewhere.

14

Thank you Black Max and Thank you Stomme Poes for the detailed explanation. I tried to validate my markup without the attribute and it didn’t pass the W3C validation test. I guess it is important! Now I have to figure out why I have 6 errors eventhough everything seems OK:confused:

15

You won’t validate without the alt attribute because we want it required.

When the image isn’t content, but only decoration, you’ll need
alt=“”

otherwise, if the image is considered content, alt=“the appropriate text”

However, the lack of a title attribute should never cause you to fail validation.

If you still don’t understand your errors, you could post them here. While the validator does state possible reasons after each error, it doesn’t always seem to make sense, especially to new people.

…why I have 6 errors eventhough everything seems OK

Everything may seem okay because browsers try to fix errors with Error Rendering. But since each browser interprets your errors differently, you’re always safer fixing them.

16

I finally fixed 5 errors and the alt attribute error keeps coming back. This is the code followed with the error.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”/>
</head>
<body>
<div id=“header”>
<div id=“sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=“tagline”>
<p>Diving club for the south-west UK - let’s make
a splash!</p>
</div>
</div> <!-- end of header div –>
<div id=“bodycontent”>
<h2>Welcome to our super-dooper Scuba site</h2>
<[B]p><img src=“panda.jpg” width=“200” height=“162”

       /&gt;[/B]&lt;/p&gt;        
   &lt;p&gt;Glad you could drop in and share some air with us! You've        
       passed your underwater navigation skills and        
       successfully found your way to the start point - or in        
       this case, our home page.&lt;/p&gt; 
   &lt;h3&gt;About Us&lt;/h3&gt;
   &lt;p&gt;Bubble Under is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the &lt;/p&gt;

</div>
</body>
</html>

And this is the error that I highlighted on the code:
Line 24, Column 13: required attribute “alt” not specified

       /&gt;&lt;/p&gt;

:email:

The attribute given above is required for an element that you’ve used, but you have omitted it. For instance, in most HTML and XHTML document types the “type” attribute is required on the “script” element and the “alt” attribute is required for the “img” element.

Typical values for type are type=“text/css” for <style> and type=“text/javascript” for <script>.

I understand it’s the alt attribute that’s missing. In this case if I add it what do I write between the “”?

17

the correct value of the alt attribute, as mentioned above, is a short description of what the image depicts…for users who have images turned off or screen readers.

so for example…

<img src="panda.jpg" width="200" height="162" alt="Panda at the San Deigo Zoo" />

so if someone out there…say…is still on dialup and turns images off to load pages faster, they’ll see a description of what the image is supposed to be instead of just a box with a red X…

560×560 37.9 KB

18

Generally, yes.

Where’s the alt here?
<img src=“panda.jpg” width=“200” height=“162” />

The validator may be listing the wrong line because strangely the image code is broken up across two lines, and the validator is highlighting the closing end of the image tag… keeping all of an inline tag on one line can help make the code more readable and make the validator messages make more sense.

But again, if the Panda actually had little to do with the page, and is purely decoration, then alt=“” could be appropriate.
<img src=“panda.jpg” width=“200” height=“162” alt=“” />

Otherwise, as agarcia stated it:
<img src=“panda.jpg” width=“200” height=“162” alt=“Panda at the San Deigo Zoo” /> (or whatever the image is)

According to the description for the alt attribute, it’s not actually supposed to describe the image but instead “say” whatever the image means… however surveys have shown real humans do seem to appreciate knowing that something is “a photo of x”. When I’m listening to a page, if I hear suddenly “a photo of…” then I can be pretty confident that it’s an image (the reader may or may not announce that it’s a graphic, depending on your settings or type of reader).

The validation rules only say that you must have “alt” in the image, but it does not say what you need to put in there, because that’s a human judgment thing.

I’ll tell ya I’ve seen plenty of sites with weird alt text like
Bottom round border graphic
and
decorative leaf

Those are useless. If I can’t see a leaf, then likely I don’t care that it’s there.

Photographs though are often part of the content. They’re placed there because they’re part of whatever you’re talking about. Those we’d call “content images” and possibly they should either be described or whatever’s important about that image should be listed.

19

I tried first to add the alt attribute alt=" Panda eating" , but it’s still not validated. And according to the book I’m reading, it’s a good thing to validate everytime we write a code.
Agarcia and Stomme Poes, you have no idea how much I’m learning from you.
Thanks a looooooooot!!!

20

You should now have something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Bubble Under - The diving club for the south-west UK
    </title>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=UTF-8" />
  </head>
  <body>
    <div id="header">
      <div id="sitebranding">
        <h1>
          BubbleUnder.com
        </h1>
      </div>
      <div id="tagline">
        <p>
          Diving club for the south-west UK - let's make a
          splash!
        </p>
      </div>
    </div><!-- end of header div -->
    <div id="bodycontent">
      <h2>
        Welcome to our super-dooper Scuba site
      </h2>
      <p>
        <img src="panda.jpg" width="200" height="162" alt=
        "Panda eating" />
      </p>
      <p>
        Glad you could drop in and share some air with us! You've
        passed your underwater navigation skills and successfully
        found your way to the start point - or in this case, our
        home page.
      </p>
      <h3>
        About Us
      </h3>
      <p>
        Bubble Under is a group of diving enthusiasts based in
        the south-west UK who meet up for diving trips in the
        summer months when the weather is good and the
      </p>
    </div>
  </body>
</html>

After adding the ALT attribute.