Highlight Words

Hello,

I am creating a search engine which searches keywords inside SQL
database and displays the results in a web page.

In the results web page I would like to give a grey background to the
words which were used as Keywords for the search.

How can I do this?

Thanks,

Miguel

shapper wrote:

Hello,

I am creating a search engine which searches keywords inside SQL
database and displays the results in a web page.

In the results web page I would like to give a grey background to the
words which were used as Keywords for the search.

How can I do this?

When you generate the result page, wrap the search words in the text
with <span class='search'>theword</span> before serving the result
to the client.

in your css you can then set:

.search {
background-color: #7f7f7f;
}

--
Dag.

"shapper" <mdmoura (AT) gmail (DOT) com> writes:

I am creating a search engine which searches keywords inside SQL
database and displays the results in a web page.

In the results web page I would like to give a grey background to the
words which were used as Keywords for the search.

How can I do this?

On the server, enclose the keywords in <span class="keyword">...</span>
elements. How to do that will vary, and it's off-topic here, so if you're
having trouble with that part, ask in whatever group is appropriate for
the server-side tech you're using.

Then style as appropriate in your stylesheet, for instance:

..keyword {
background-color: #eee;
}

sherm--

--
Web Hosting by West Virginians, for West Virginians: http://wv-www.net
Cocoa programming in Perl: http://camelbones.sourceforge.net

shapper wrote:

Hello,

I am creating a search engine which searches keywords inside SQL
database and displays the results in a web page.

In the results web page I would like to give a grey background to the
words which were used as Keywords for the search.
l

You can enclose the words in a span.:

<span class="searchterm">these words are highlighted</span>

and then use span.searchterm{background-color:grey;} in your CSS.

The usual disclaimers about not being able to guarantee that the user
will see this apply.

Nik

Scripsit shapper:

In the results web page I would like to give a grey background to the
words which were used as Keywords for the search.

Is this a trick question?

At least the three answers you've got are essentially the same, and
essentially wrong.

So maybe it was a genuine question, though it looks _very_ elementary.

Use <strong> markup for the words, optionally with a class attribute if you
use <strong> for other emphasis as well, and something like

strong { background: #ddd;
color: black;
font-weight: normal;
padding: 0 0.1em; }

The reason for font-weight: normal is that <strong> are typically displayed
in bold by default and I assume you don't want that. It is essential to set
color whenever you set background. The usefulness for padding becomes
obvious if you try setting the background color without setting padding.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela wrote:

Scripsit shapper:

In the results web page I would like to give a grey background to the
words which were used as Keywords for the search.

Is this a trick question?

At least the three answers you've got are essentially the same, and
essentially wrong.

So maybe it was a genuine question, though it looks _very_ elementary.

Use <strong> markup for the words, optionally with a class attribute
if you use <strong> for other emphasis as well, and something like

strong { background: #ddd;
color: black;
font-weight: normal;
padding: 0 0.1em; }

The reason for font-weight: normal is that <strong> are typically
displayed in bold by default and I assume you don't want that. It is
essential to set color whenever you set background. The usefulness
for padding becomes obvious if you try setting the background color
without setting padding.

I think you owe your audience an explanation for declaring nearly
identical solutions for "essentially wrong".

I (think I) understand that you are on a semantical crusade, but
it is not easy to guess.

It is especially important to explain if you want to achieve something
with your statements...

:-)

--
Dag.

Scripsit Dag Sunde:

I think you owe your audience an explanation for declaring nearly
identical solutions for "essentially wrong".

No, I don't. But you owe me an explanation for quoting my message in
extenso. Actually, since no fair use justified the pointless fullquote, I
could sue you for copyright infringement.

It is especially important to explain if you want to achieve something
with your statements...

As I wrote, the question was fairly elementary, and the other answers had
elementary mistakes in them. You have the option of comparing them with my
answer and checking the FAQs for explanations, or you can just use the wrong
answers if you like. It'll actually help you more than spoon-feeding would.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Dag Sunde wrote:

I think you owe your audience an explanation for declaring nearly
identical solutions for "essentially wrong".

No he doesn't! Jukka is infallible! Jukka is not to be questioned!
Burn the heretics who disagree with The Word Of Jukka!
Burn the unbelievers who even question The Word Of Jukka!


I can only assume that his "esentially wrong" comment refers to the
fact that all answers described the trivia of marking up the resultant
HTML, but didn't describe the coding needed to embed this within the
string extracted from the database. If this was a programming
newsgroup, then he'd have a point.

As to his dogmatic assertion that <strong> should be used rather than
<span class="foo" >, then that's just pedantry stretched beyond the
boundaries of rationality. HTML's semantics aren't sophisticated
enough, let alone rigid enough, to require any absolute dogma like this.

Andy Dingley wrote:

Dag Sunde wrote:

I think you owe your audience an explanation for declaring nearly
identical solutions for "essentially wrong".

No he doesn't! Jukka is infallible! Jukka is not to be questioned!
Burn the heretics who disagree with The Word Of Jukka!
Burn the unbelievers who even question The Word Of Jukka!

I got that impression, yes...

A real net-nanny... Especially when I didn't mean to be sarcastic at all.
I partly agree with him that a <strong> or <em> is semantically more
correct than <span> in the case of OP's question.
I just wanted him to put forth the rationale behind his thoughts, so
the OP and potentially others could learn/understand.

<snipped />

As to his dogmatic assertion that <strong> should be used rather than
span class="foo" >, then that's just pedantry stretched beyond the
boundaries of rationality. HTML's semantics aren't sophisticated
enough, let alone rigid enough, to require any absolute dogma like
this.

Agreed! :-D

--
Dag.

Scripsit Dag Sunde:

A real net-nanny...

Do you mean you really need a net-nanny to spoon-feed you? Well, I'll just
give you a hint. What do the FAQs say about specifying color whenever you
specify background, and vice versa? (Actually, I explicitly mentioned the
point, but you might have been busy with other affairs, like getting
upset.) - Admittedly, the setting the padding is a more advanced issue, but
as I wrote, it becomes evident if you actually try it.

I partly agree with him that a <strong> or <em> is semantically
more correct than <span> in the case of OP's question.

So you partly think that semantically correct markup is better than
semantically empty markup? That's partly fine.

I just wanted him to put forth the rationale behind his thoughts, so
the OP and potentially others could learn/understand.

I just wanted to help you and potentially others to learn CSS yourself. I
know that using (a variant of) the Socratic method isn't very successful; it
didn't work too well even for Socrates himself.

As to his dogmatic assertion that <strong> should be used rather than
span class="foo" >, then that's just pedantry stretched beyond the
boundaries of rationality. HTML's semantics aren't sophisticated
enough, let alone rigid enough, to require any absolute dogma like
this.

Agreed! :-D

So you now say that you agree with someone who says that there is no point
in using semantically correct markup is better than semantically empty
markup? Vow, that fast! I mean a fast change of opinion.

Hint: Do you the FAQs say something about considering situations where CSS
is "off"? Does the phrase "CSS caveats" ring a bell? No? Then google for it!

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/