Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

The Difference between Alternate Text & Title

  • What is the difference between alternate text and the title attribute?
  • The alt text is what is read to a user by a screen reader if they cannot see the image
  • The title text is a tooltip that pops up within a browser to provide additional information about an image
  • Dreamweaver does not offer an interface way to add a title to page, but we can easily add them using code view
  • Preview the specials page in the browser & hover over the images
    • There is nothing that pops up in the browser
    • We will add a title to each of these images and view them once again in the browser so you can see what the title adds to the image
    • Select the first image on the page
    • Click into Code View
    • Insert the cursor before the / at the end of the highlighted code
    • Type title=" & and add the text you wish to add, be sure to add the closing " after the title text
    • Save the page & preview in the browser
    • When you hover over the image in the browser, the title text will display for the user
  • That is the difference between the alternate text attribute & the title attribute

The Difference between Alternate Text & Title

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Image Alternate Text Explanation 0:10
  • Image Title Explanation 0:51
  • Add an Image Title 1:39
  • Preview in Browser 2:46
  • Editing Image Titles 3:06

Transcription: The Difference between Alternate Text & Title

What I want to do in this lesson is explain the difference between an image title and an image alternate text.0000

The alt. text for an image deals with screen readers.0010

So, if I select an image, and I open my Properties area, I can see the alternate text for that image.0015

Dreamweaver prompts you when you insert an image to remind you to always add that alternate text.0024

And there is a spot right here in Dreamweaver to do it.0031

In case the dialog box pops up, and sometimes you can bump your mouse and it disappears (you have actually clicked OK to close it), this is where it is located in the Properties panel.0036

Select the image; you can always modify it here.0047

Now, what about a title for your image?0051

Let me show you: if I put this particular page into Firefox as an example, and I hover over the image, nothing pops up.0055

There isn't any type of a tool tip.0066

Well, long ago, in a galaxy far, far away, browsers used to display the alternate text simply by hovering over it; and even people who could see the image kind of appreciated that little description on an image of what it is.0069

What about trying to recreate that now?--because the browser doesn't use the alternate text; as you can see, I can hover over these forever, and it is not going to happen.0087

What you can do is add a title to the image; and this is not something you can do within the Dreamweaver Properties area, because it is not listed there.0099

So, we are going to move into Split View.0111

Notice: I selected the image, and it has highlighted the code; what I am going to do is add a title.0114

I'll go right before this right angle bracket with my cursor; I'm going to put a space, and I'm going to say t or ti, and you can see my little code hint gives me the information.0121

I'll hit Enter or Return; that way, Dreamweaver finishes off the title--adds the equal and the double quotes for me.0135

Now, I don't want to have to retype my alternate text; so I'll just copy it from here, and I'll paste it between those double quotes in my title: Charles River Bridge in Prague.0144

Let me do a save; so this is the first image on the page I added it to.0160

Let's put it in the browser and see what happens.0167

Notice, when I hover over it, the browser displays the nice title.0171

Now, I think that is kind of nice feature, to add descriptions to your images; like I said, it's not available in the Properties area for your images, but what we can do, now that we have one added--I'll take this space all the way through to the double quote.0176

So, I went to that same image, and this is that title area--the exact area we just added--but I'm going to copy it with a space in front of it.0197

I'll do a copy; and what I can do is: I'll go into Split View, scroll down to my next image...there is my code, and I can simply paste this in and change the title.0207

So now, I'll change this: whatever my alt. text is for that image, I'll copy, and I have the code here, so I will go ahead and paste it right here.0224

There is my second image.0237

And let me do the same thing with my biggest image, down at the bottom of the page: put my cursor after the double quote there, paste it in...0240

Now, the reason I added the...0251

Oops, that one didn't quite paste correctly--guess what: we have Ctrl+Z to the rescue, or Command+Z on the Mac side; so let's see...0254

Oh, I ended up copying something else there; so let me go back here--let's go into Design View, scroll back up, and I'll just recopy it.0265

Move back into Split View; add my title here; scroll down; and I will fix this issue right here.0279

Paste that title in here; there we go.0293

Just remember, you can always Control or Command, Z to get out in any of these situations that can happen.0297

Now, it's a matter of changing this; and I'll just type it out--there we are.0304

Now, let's put it into the browser and see what happened.0312

I should, if I did this correctly, be getting those titles; so let me move into Safari this time.0316

You can see how I'm kind of skipping around the browsers.0324

I hover over it--there is that one; I'll hover over the clock--there is that title; and I'll hover over Vegas, and there is that one.0327

That is how you can add a title within your image code; and the title acts as a little nice tool tip, describing the image, when you go to the browser.0338

You won't be able to see that when you are in Dreamweaver; you have to move into Code View; but that is a nice little feature for your users when you insert images, especially if they are important images that you might want to add a little tool tip for your users.0351

So, that is the difference between the alternate text that you add to an image and the title attribute that we need to manually add to an image in order to give the image a tool tip.0368