Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How To? : Display text with highlighted background

Reply
Thread Tools

How To? : Display text with highlighted background

 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-28-2008
Ari Heino wrote:

> Use CSS for all styling.


Well, at least as far as it is feasible, which means rather far.

> To emphasize some words, you could use
>
> <p>Normal text <span style="background: yellow; color: black;">black
> text on yellow background</span> normal text again.</p>


To emphasize words, you should use <em> or <strong> markup, since that's
their defined meaning and since that makes them highlighted in _some_ manner
even when CSS is disabled.

> Or better, in your css file:
>
> span.highlight {
> background: #ffff00; /* always declare both background and color */
> color: #000000; /* to avoid problems */
> }


Right except that you should use <em> or <strong> and the element name em or
strong as the selector, instead of span.highlight. If desired, you could
still use a class attribute, to distinguish between different types of
emphasis.

In common graphic browsers, <em> elements appear in italics, <strong>
elements in bold. This is the "backup" you get by using such elements. If
you do _not_ want those features when CSS is in use, you can remove them
using
strong { font-weight: bold; }
em { font-style: normal; }
if you rely e.g. on your color suggestions getting thru.

Yucca

 
Reply With Quote
 
 
 
 
thricipio@gmail.com
Guest
Posts: n/a
 
      08-28-2008
On Aug 28, 3:31*pm, "Jukka K. Korpela" <(E-Mail Removed)> wrote:

> :
> [snip]
> :
> To emphasize words, you should use <em> or <strong> markup, since that's
> their defined meaning and since that makes them highlighted in _some_ manner
> even when CSS is disabled.
> :
> [snip]
> :
> In common graphic browsers, <em> elements appear in italics, <strong>
> elements in bold. This is the "backup" you get by using such elements. If
> you do _not_ want those features when CSS is in use, you can remove them
> using
> strong { font-weight: bold; }
> em { font-style: normal; }


Yucca, many thanks for the additional information. You've all been
kind with your time and suggestions. My next task is to find a good
online CSS tutorial, per Ari's earlier suggestion.

Thanks again to one and all.
—Thri

 
Reply With Quote
 
 
 
 
nice.guy.nige
Guest
Posts: n/a
 
      08-28-2008
While the city slept, http://www.velocityreviews.com/forums/(E-Mail Removed) feverishly typed:

[...]
> You've all been kind with your time and suggestions.

[...]

Looks like you got us on a good day

Have fun!

Cheers,
Nige

--
Nigel Moss | http://www.nigenet.org.uk
Email not valid. (E-Mail Removed) - take the dog out!
"You're mother ate my dog!", "Not all of him..."


 
Reply With Quote
 
Ari Heino
Guest
Posts: n/a
 
      08-28-2008
> To emphasize words, you should use <em> or <strong> markup

True. I was hasty and came up with span first for some reason.

> strong { font-weight: bold; }


Typo, you meant font-weight: normal.

--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
Nico Schuyt
Guest
Posts: n/a
 
      08-28-2008
(E-Mail Removed) wrote:

>.My next task is to find a good online CSS tutorial, ..


http://www.w3schools.com/css/css_examples.asp

--
Nico


 
Reply With Quote
 
Adrienne Boswell
Guest
Posts: n/a
 
      08-28-2008
Gazing into my crystal ball I observed (E-Mail Removed) writing in
news:(E-Mail Removed):

> My knowledge of HTML could be fairly described as rudimentary. I've
> been using the older (now deprecated) "<font> tag to control font
> characteristics. I'd like to be able to display a character string
> (word or phrase) with a highlighted background using the color of my
> choice (e.g., yellow).
>
> I don't think this can be done with this older font tag, but suspect
> it can be done with newer tags. Could someone point me to a good
> online reference that might describe a newer tag-set for controlling
> font characteristics?
>
> Or... I suppose someone could just show me how to accomplish my
> specific objective... but I think it would be best to get to a good
> online reference... so I can teach this dog (i.e., myself) some new
> tricks!
>
> Thanks,
> —Thri


As others have said, use CSS, but, I wanted to say this bit as well.
Unless the text to be highlighted really is an emphasis, I would use
span instead of the emphasizing elements, em and strong.

For example, say you were writing a search feature, and you wanted to
highlight the desired keyword in the results. That would not
necessarily need emphasis, especially as some speaking browsers will say
the word differently if you are using em or strong.

<p>You searched for <span class="highlight">acme</span>. We found the
following results:</p>
<ul>
<li><a href="#"><span class="highlight">ACME</span> Roadrunner Bomb</a>
</li>
<li><a href="#">The <span class="highlight">ACME</span> Storage Company
</a></li>
</ul>

On the other hand, if you had a form, you might want to emphasize
something, eg:
<p>The following fields are <strong>required</strong>, <strong
class="highlight">Name and Address</strong>.</p>

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-28-2008
Ari Heino wrote:

>> strong { font-weight: bold; }

>
> Typo, you meant font-weight: normal.


Right, thanks.

That's my usual mistake: I write the exact opposite of what I'm thinking.
Unfortunately, all checking tools appear to be ineffective against it.

Yucca

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      08-28-2008
In article
<(E-Mail Removed)>,
(E-Mail Removed) wrote:

> it would be best to get to a good
> online reference... so I can teach this dog (i.e., myself) some new
> tricks!


Funny you should mention dog, take a look at

<http://htmldog.com/>

and, perhaps, specifically:

<http://htmldog.com/reference/cssproperties/background/>

--
dorayme
 
Reply With Quote
 
thricipio@gmail.com
Guest
Posts: n/a
 
      08-28-2008
On Aug 28, 5:24*pm, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed)>,
>
> *(E-Mail Removed) wrote:
> > it would be best to get to a good
> > online reference... so I can teach this dog (i.e., myself) some new
> > tricks!

>
> Funny you should mention dog, take a look at
>
> <http://htmldog.com/>
>
> and, perhaps, specifically:
>
> <http://htmldog.com/reference/cssproperties/background/>
>
> --
> dorayme


You're funny . . . *AND* helpful. I really appreciate you providing
these links.

Also... many thanks to Nico for this one:
http://www.w3schools.com/css/css_examples.asp

Again... thanks to one and all for your help.
—Thri
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      08-28-2008
(E-Mail Removed) wrote:

> Also... many thanks to Nico for this one:
> http://www.w3schools.com/css/css_examples.asp


Actually, it has often been stated and argumented that w3schools is
unreliable and otherwise questionable. It probably intentionally uses a
domain name that gets confused with the W3C, the World Wide Web Consortium -
at least that's a common confusion. W3schools has nothing to do with the
W3C. More importantly, W3schools is neither very readable nor factually
correct.

Let's see... the first example of CSS that they have sets background-color
without setting text color and lacks a DOCTYPE declaration in the HTML
document. Fundamentally bad practices, so don't learn from them.

Yucca

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
can't see highlighted text pythonwin msngirgi Python 1 08-10-2009 01:19 PM
how to retrive highlighted text in a browser? wcc Python 3 07-04-2005 07:34 AM
Googlebar: can't read white text that's highlighted? GroupFug Firefox 4 03-28-2005 05:32 AM
Text editor with keywords highlighted MARTIN Herve \(EXT\) Java 2 11-03-2003 04:52 PM



Advertisments