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
Lecture Comments (2)

0 answers

Post by Candyce Mairs on February 5, 2015

With the advent of HTML5, the <b> and <i> tags have once again become a part of the language. They had been removed in prior versions of HTML. In order to produce bold text, you now have 2 options depending upon the circumstances.

Screen readers require the <strong> and <em> tags in order to read text on a web page in a stronger way than other text on the page. If you wish to simply make the text appear bold on the page for visual readers, you use the <b> tag.

The same approach is available for italic text, although italics are not used often on the web due to its poor readability. The <em> tag tells a screen reader to add emphasis to the word when it is being read to a user. The <i> tag simply makes the text look italic visually.

Different Dreamweaver versions set the specific tag differently when you choose the B or I in the Properties panel. Newer versions of Dreamweaver are targeting the HTML5 doctype, so the tag that is created using the B icon in the Properties panel can vary.

The Preferences area in Dreamweaver allows you to control which tag is being created by default. Go to Edit-> Preferences (Win) or Dreamweaver -> Preferences (Mac) and choose the General Category in the left column. Within the Editing options area the 5th option down allows you to choose whether you want the <b> or <strong> created by default within Dreamweaver.

If you check that option under Editing options, you always have the <strong> tag created by Dreamweaver so all screen readers will read the text in a stronger way than standard text on the page. Earlier versions of Dreamweaver did not offer this option since HTML had dropped the use of the <b> and <i> tags.

0 answers

Post by James Cocherell on February 4, 2015

When clicking B in the properties, the tag shows as <b> instead of <strong>. Why is this?

Setting Bold & Italics

  • You can make your text bold or italic using the properties panel
  • Click the B or I in the property inspector after selecting the text to create bold & italic
  • There are these commands in both html & css buttons
  • We will remain in the HTML button area of the properties panel
  • Ctrl/Cmd B & Ctrl/Cmd I are useful shortcuts to know
  • The b creates a strong tag
  • The I creates an em tag
  • Show the tag in the code view
  • The strong & em tags tell screen readers to read the text differently from other text on the page
  • It is possible to use the B & I tags, but they are only visual effects for text

Setting Bold & Italics

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
  • Add Bold and Italics to Definition List 0:12
    • The Destinations Page
    • Making Terms Bold
    • Bold Tag Information
    • Making Definition Italic
  • Summary 5:41

Transcription: Setting Bold & Italics

Let's take a look at how to create bold and italics within HTML; and if you are going to use HTML5, you have a couple of other things to consider.0000

But we will take a look at adding bold and italic to our definition list that was created on the Destinations page within our course files.0013

Within the Destinations page, what I have so far is: I have organized all this paragraph content into a nice list for the various destinations, organized by where it is located in the world.0023

I have also added a nice numbered list about items that people have to remember when they travel.0039

Then, we also have this definition list down at the bottom of the page that was just created; and it looks like, within my definition list, I have a little bit of space between the line above and the list itself.0047

And some of those things are things that I fine-tune towards the end: we want to move into working in CSS before we fine-tune too much.0062

But, what I am going to do is: I want these terms in my list to be bold, and I want the definitions themselves to be italic; let me show you how to do that, and then we can decide if we really like it or not.0072

I am going to select Travel VISA down here as my term; I'll move down to the Properties area, and I'll click the <b> tag.0088

Now, you can see, the <b> tag did make it bold; there are a couple different methods for working with the <b> tag, and it has changed over the years, but if I put my cursor inside that code I just created, you will see there is the word "strong" down in the tag selector.0098

What that is going to do is tell a screen reader to read that text that is surrounded by <strong> in a stronger manner; so, it would say, "The following terms will assist you when traveling abroad. Travel VISA."0117

It would put extra-strong verbage on it, so that people know it is a heading-type thing.0135

It is not quite the level of a heading, but it certainly needs to be more important than regular text.0142

That is for a screen reader; it is also possible to use a <b> tag instead, but the <b> tag just makes it visually a little bit stronger, but a screen reader wouldn't read it stronger.0149

We are going back to allowing the <b> tag in HTML5, because it has a little bit different emphasis; if this isn't quite as strong of a b (in other words, the screen reader doesn't need to read it stronger), then we can simply use the <b> tag.0166

But, if it is something that is important (and on this page, this is important for them to understand, because this hooks up with the definition itself), then I want to make sure I am using a <strong> tag.0186

I'll go ahead and do this and click the <b> tag here; and you do have the option to set this preference within Dreamweaver...I'll go ahead and click the <b> tag.0201

I normally just keep it on standard; I don't change the preference--I just want to make you aware that you have a distinction when you are working in HTML5.0213

It is possible to use the <b> and the <i>: those were tags we weren't supposed to use previously, and that is where these originated; but now when I use them, they are creating <strong>.0224

But you may see the <b> in code at some point, and I just want you to understand what that means.0237

Now, I am going to select my definition, and I am going to click the <i> tag for italic.0242

Now, on the Web, we really don't use much italic--it is very hard to read, and it is not something that you really want to be doing; I just wanted to show you how to add italics, should you need to.0249

Now, if I put my cursor inside that italic, it is not the <i> tag like it used to be to make italic; it is the <em> tag, standing for emphasis.0264

What this does is: the screen reader, once again, reads this a little bit differently than if it was the plain <i> tag.0278

We are using <strong> and <em> as our bold and italics within Dreamweaver.0288

Now, I am not really fond of that; so what I can do with my cursor in there is click the <i> tag; but look what happened--I can apply it using that, but I can't get rid of it, because I just have my cursor in it.0295

Let's select the entire text that we want to remove it from and see what happens.0311

If I click the <i> tag now, you can see it removes it.0317

So, the heading tags--you can put your cursor in the line, and it understands and makes the entire line a heading; but when you are working in anything other than a heading tag, usually you want to select exactly what you are going to apply it to before you try and do that in Dreamweaver.0322

What we did was: we just looked at the <strong> and <em> tags, which tell screen readers to read the content within those tags a little bit differently.0341

I get those tags by default by clicking the <b> for bold and the <i> for italic within the Properties area.0352

That is the bold and italic properties and how you can add them to your content on your page, using Dreamweaver.0362