How To? : Display text with highlighted background

Discussion in 'HTML' started by thricipio@gmail.com, Aug 28, 2008.

  1. Guest

    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
     
    , Aug 28, 2008
    #1
    1. Advertising

  2. Neredbojias Guest

    On 28 Aug 2008, wrote:

    > 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!


    <span style="padding:0 2px;background:#f0f000;color:#504030;">Highlighted
    Text</span>

    --
    Neredbojias
    http://www.neredbojias.net/
    Great Sights and Sounds
    http://adult.neredbojias.net/ (adult)
     
    Neredbojias, Aug 28, 2008
    #2
    1. Advertising

  3. Ari Heino Guest

    > 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).


    Use CSS for all styling.

    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>

    Or better, in your css file:

    span.highlight {
    background: #ffff00; /* always declare both background and color */
    color: #000000; /* to avoid problems */
    }

    and then on html:

    <p>Normal text <span class="highlight">black text on yellow
    background</span> normal text again.</p>

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Aug 28, 2008
    #3
  4. Guest

    On Aug 28, 1:45 pm, Neredbojias <> wrote:
    --------------------------------
    > <span style="padding:0 2px;background:#f0f000;color:#504030;">Highlighted
    > Text</span>


    Thanks, Nered... This worked great.

    If you feel like showing me the syntax for including these attributes:
    [face (e.g. verdana)], [size], [itallics], [underscore] and [bold],
    I'm all eyeballs!

    But even if you don't feel like it, I thank you again for the help
    you've already provided.

    All the best,
    —Thri
     
    , Aug 28, 2008
    #4
  5. While the city slept, Ari Heino feverishly typed:

    >> 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).

    >
    > Use CSS for all styling.
    >
    > 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>


    Or... as you say, this is emphasising words, so use the <em> element with a
    class and style that. This has the advantage that the text will be
    emphasised whether or not it is allowed to be highlighted.

    In your head (or - ideally - in a separate css file)

    <style type="text/css">
    body {
    color: #000000;
    background-color: #ffffff;
    }

    em.highlight {
    color: inherit;
    background-color: #00ff00; /* green background */
    font-style: normal; /* <em> is normally italicised, this will make it
    normal */
    }
    </style>

    and in your body

    <p>Normal text <em class="highlight">highlighted text</em> normal text
    again.</p>

    As seen in action (sort of) at
    http://www.nigenet.org.uk/stuff/highlighttext/

    Cheers,
    Nige

    --
    Nigel Moss | http://www.nigenet.org.uk
    Email not valid. - take the dog out!
    "You're mother ate my dog!", "Not all of him..."
     
    nice.guy.nige, Aug 28, 2008
    #5
  6. Ari Heino Guest

    > If you feel like showing me the syntax for including these attributes:
    > [face (e.g. verdana)], [size], [itallics], [underscore] and [bold],
    > I'm all eyeballs!


    You'll find lots of basic css tutorial from the web to teach yourself
    this. Just google css tutorial.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Aug 28, 2008
    #6
  7. Guest

    On Aug 28, 1:52 pm, Ari Heino <> wrote:
    > Use CSS for all styling.
    > :
    > [snip]
    > :
    > <p>Normal text <span style="background: yellow; color: black;">black
    > text on yellow background</span> normal text again.</p>
    >
    > Or better, in your css file:
    >
    > span.highlight {
    >    background: #ffff00; /* always declare both background and color */
    >    color: #000000;      /* to avoid problems */
    > }
    >
    > and then on html:
    >
    > <p>Normal text <span class="highlight">black text on yellow
    > background</span> normal text again.</p>


    Thanks, Ari.

    I've seen references to CSS before... and I think I'm even using it in
    one of my HTML files, but I've always been a little confused about how
    it works. Especially as regards using a separate CSS file.

    Question: is the <span> tag an example of using CSS?

    Thanks again,
    —Thri
     
    , Aug 28, 2008
    #7
  8. Guest

    On Aug 28, 2:13 pm, Ari Heino <> wrote:
    > You'll find lots of basic css tutorial from the web to teach yourself
    > this. Just google css tutorial.


    Thanks, Ari. I'll definitely take your advice.

    All the best,
    —Thri
     
    , Aug 28, 2008
    #8
  9. While the city slept, feverishly typed:


    [...]
    > Question: is the <span> tag an example of using CSS?


    <span> is an HTML element that is used to group inline content (it spans a
    set of content). It doesn't have any actual effect on the rendering of the
    document, and as such is often used with CSS applied to style part of the
    content.

    However, as I mentioned in my earlier post, by highlighting, you are -
    effectively - emphasising a piece of text, so in that case it may be better
    to use the <em> element with style applied to that.

    Cheers,
    Nige

    --
    Nigel Moss | http://www.nigenet.org.uk
    Email not valid. - take the dog out!
    "You're mother ate my dog!", "Not all of him..."
     
    nice.guy.nige, Aug 28, 2008
    #9
  10. Guest

    On Aug 28, 2:29 pm, "nice.guy.nige" <> wrote:
    > <span> is an HTML element that is used to group inline content (it spans a
    > set of content). It doesn't have any actual effect on the rendering of the
    > document, and as such is often used with CSS applied to style part of the
    > content.
    >
    > However, as I mentioned in my earlier post, by highlighting, you are -
    > effectively - emphasising a piece of text, so in that case it may be better
    > to use the <em> element with style applied to that.


    Thanks, Nigel. I'll explore both tags: <span> and <em> along with an
    exploration of CSS.

    All the best,
    —Thri
     
    , Aug 28, 2008
    #10
  11. 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
     
    Jukka K. Korpela, Aug 28, 2008
    #11
  12. Guest

    On Aug 28, 3:31 pm, "Jukka K. Korpela" <> 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
     
    , Aug 28, 2008
    #12
  13. While the city slept, 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. - take the dog out!
    "You're mother ate my dog!", "Not all of him..."
     
    nice.guy.nige, Aug 28, 2008
    #13
  14. Ari Heino Guest

    > 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/
     
    Ari Heino, Aug 28, 2008
    #14
  15. Nico Schuyt Guest

    Nico Schuyt, Aug 28, 2008
    #15
  16. Gazing into my crystal ball I observed writing in
    news::

    > 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
     
    Adrienne Boswell, Aug 28, 2008
    #16
  17. 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
     
    Jukka K. Korpela, Aug 28, 2008
    #17
  18. dorayme Guest

    In article
    <>,
    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
     
    dorayme, Aug 28, 2008
    #18
  19. Guest

    On Aug 28, 5:24 pm, dorayme <> wrote:
    > In article
    > <>,
    >
    >   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
     
    , Aug 28, 2008
    #19
  20. 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
     
    Jukka K. Korpela, Aug 28, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. MARTIN Herve \(EXT\)

    Text editor with keywords highlighted

    MARTIN Herve \(EXT\), Nov 3, 2003, in forum: Java
    Replies:
    2
    Views:
    364
    MARTIN Herve \(EXT\)
    Nov 3, 2003
  2. wcc
    Replies:
    3
    Views:
    354
  3. msngirgi
    Replies:
    1
    Views:
    514
    msngirgi
    Aug 10, 2009
  4. studen771
    Replies:
    3
    Views:
    135
    studen771
    Mar 31, 2005
  5. Bou Dramé
    Replies:
    0
    Views:
    185
    Bou Dramé
    Oct 3, 2008
Loading...

Share This Page