 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / HTML / August 2008How To? : Display text with highlighted background
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 > My knowledge of HTML could be fairly described as rudimentary. I've > been using the older (now deprecated) "<font> tag to control font [quoted text clipped - 11 lines] > 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>  SignatureNeredbojias http://www.neredbojias.net/ Great Sights and Sounds http://adult.neredbojias.net/ (adult) -------------------------------- > <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 > 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. SignatureAri http://users.utu.fi/athein/ > 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 > -------------------------------- >> <span style="padding:0 2px;background:#f0f000;color:#504030;">Highlight > ed >> Text</span> > > Thanks, Nered... This worked great. 'Welcome. > 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! Well, as others have hinted, it's often better to put css in the head section or a seperate stylesheet, but here's some inline stuff: <span style="font-family:Verdana,Arial,sans-serif;font-size:100%;font- style:italics;font-weight:bold;text-decoration:underline;">Meet me in St. Louie, Louie.</span> SignatureNeredbojias http://www.neredbojias.net/ Great Sights and Sounds http://adult.neredbojias.net/ (adult) >> -------------------------------- >>> <span style="padding:0 2px;background:#f0f000;color:#504030;">Highlight [quoted text clipped - 13 lines] > style:italics;font-weight:bold;text-decoration:underline;">Meet me in St. > Louie, Louie.</span> Minor correction: "italics" with an "s" is invalid; you'd want "italic". Defined in <http://www.w3.org/TR/CSS21/fonts.html#font-styling>. Also, many of these properties can be combined in a shorthand form, as in: <span style="font:italic bold 100% Verdana,Arial,sans-serif; text-decoration:underline;">Meet me in St. Louis, Louis.</span> Shorthand form described at <http://www.w3.org/TR/CSS21/fonts.html#font-shorthand> OP: See that whole page, and then see the rest of the CSS spec for more such details on usage. And to help check that you haven't mistyped something as "italics" or "itallic", remember to check your code with the W3C's validator at <http://jigsaw.w3.org/css-validator/>. SignatureJohn Possessive "its" has no apostrophe. Even on the Internet. > > Well, as others have hinted, it's often better to put css in the head > > section [quoted text clipped - 4 lines] > Minor correction: "italics" with an "s" is invalid; you'd want "italic". > Defined in <http://www.w3.org/TR/CSS21/fonts.html#font-styling>. Major correction to a minor correction, there is no "italics" without an "s" on or off the earth. Signaturedorayme >> Minor correction: "italics" with an "s" is invalid; you'd want "italic". >> Defined in <http://www.w3.org/TR/CSS21/fonts.html#font-styling>. > > Major correction to a minor correction, there is no "italics" without an > "s" on or off the earth. Ah. How about if I phrase it thusly: Minor correction: "italics", with an "s", is invalid; you'd want "italic". Does that obviate a need for major corrections or minor quibbles? SignatureJohn The possessive pronoun, "its", has no apostrophe. Even on the Internet. > >> Minor correction: "italics" with an "s" is invalid; you'd want "italic". > >> Defined in <http://www.w3.org/TR/CSS21/fonts.html#font-styling>. [quoted text clipped - 7 lines] > > Does that obviate a need for major corrections or minor quibbles? You are trying to shake off something uncomfortable you know is shadowing you in this construction. It is a brave attempt. But you are not quite escaping in spite of doing better. ["italics", with an "s", is invalid; you'd want "italic"] contains a quibbling mistake, namely the bit before the semicolon. The bit after the semicolon does not obviate it. There is a slight implication still that you can have "italics" without an "s". But you can't of course. You see, John, everything is what it is. If this were not so, it would threaten a very grave possibility, namely everything being something else. Please don't make the world edge closer to this nightmare possibility, I have a terrible fear of it and trust me, you would not want it either. The "s" in "italics" is essential to it. Without it, it would be "italic". I offer the foregoing to further our quibbling relationship. <g> Signaturedorayme >>>> Minor correction: "italics" with an "s" is invalid; you'd want "italic". >>>> Defined in <http://www.w3.org/TR/CSS21/fonts.html#font-styling>. [quoted text clipped - 8 lines] > You are trying to shake off something uncomfortable you know is > shadowing you in this construction. "in this construction" or "in this newsgroup?" ;-) > It is a brave attempt. But you are > not quite escaping in spite of doing better. Don't I know it! > [...stuff...] > > The "s" in "italics" is essential to it. Without it, it would be > "italic". > > I offer the foregoing to further our quibbling relationship. <g> Thanks for your offer, but I seem to not be in the mood to accept. Cheers. SignatureJohn >>> Well, as others have hinted, it's often better to put css in the head >>> section [quoted text clipped - 7 lines] > Major correction to a minor correction, there is no "italics" without an > "s" on or off the earth. ?? Italic (î-tàl´îk, ì-tàl´-) adjective 1.Of or relating to ancient Italy or its peoples or cultures. 2.Of or relating to Italic. 3. italic Abbr. ital. Of or being a style of printing type patterned on a Renaissance script with the letters slanting to the right: This sentence is printed in italic type. noun 1.A branch of the Indo-European language family that includes Latin, Faliscan, Oscan, Umbrian, and other languages or dialects. 2.Often italics Abbr. ital. Italic print or typeface. [Latin Italicus, from Greek Italikos, from Italia, Italy, from Latin.] Excerpted from The American Heritage® Dictionary of the English Language, Third Edition © 1996 by Houghton Mifflin Company. Electronic version licensed from INSO Corporation; further reproduction and distribution in accordance with the Copyright Law of the United States. All rights reserved. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > >>> Well, as others have hinted, it's often better to put css in the head > >>> section [quoted text clipped - 29 lines] > distribution in accordance with the Copyright Law of the United States. > All rights reserved. Scholasticism gone mad in the 21st Century! <g> Nowhere in this whole excerpt of yours does it show how "italics" has no "s" You can see the "s" right there before your eyes! Every single "italics" that has ever existed or exists now or will exist, had, has, will have "s". Even God cannot make this untrue, so your American Heritage Dictionary certainly cannot. Signaturedorayme >>>>> Well, as others have hinted, it's often better to put css in the head >>>>> section [quoted text clipped - 38 lines] > "s". Even God cannot make this untrue, so your American Heritage > Dictionary certainly cannot. Huh? You confuse and confound me. "italic" is a legitimate word in its own right. SignatureTake care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com > Huh? You confuse and confound me. "italic" is a legitimate word in its > own right. So? That does not make for the literal possibility that "italics" could have no "s". There are two aspects to this whole question. One is a logical aspect and the other is well... 'of the earth' ... practical ... a matter of real life... I have tried to convey the logical one. Perhaps you will never get to see it. You need a background to understand how everything is what it is and not something else. Let us leave this aside for now with what i have said already. Let me talk here instead about the other aspect which I am sure you will have no difficulty with. Let me give you some background about some of my volunteering work. I manage a refuge for wounded words. So I know a bit about the 'lettering' side of things, the pain and suffering and that sort of thing. Those that have lost their "s"s are some of the saddest of all, they are no longer different to similar words. They weep and cry in remembrance as they wander in to seek help. No one understands them on earth except me. My refuge is a sort of letter bank where I keep a lot of spares and the troubled words, under some circumstances (mainly where therapy fails) can get replacements for their losses. I employ, at a discount rate, a retired English Lit. academic to do the surgery. There are many pommy (that's oz for English, mate) words here that are not at all happy *with* their "s"s and and want their "z"s back. They are very sad sights and I feel ashamed of myself for laughing every time one walks in for help. But at least, I get quite a few spare "s"s this way. Where do I get the "z"s from? Don't be alarmed, it is not via any disturbing means like human trafficking in Europe or Falun Gong organs in China. There is a balance in these things, a sort of conservation of the total number of letters. Without going into the details, I get by. (If you really want to know more about the maths of all this - you call it math - please send for my paper called "The History of the Distribution of the Letters", enclose $US18.50 to cover my costs. Signaturedorayme dorayme posted in alt.html: > I manage a refuge for wounded words. So I know a bit about the > 'lettering' side of things, the pain and suffering and that sort of [quoted text clipped - 4 lines] > as they wander in to seek help. No one understands them on earth except > me. Does it help them to know that some of them are donating their "s"s to words that did not have them previously? For example, mouses? SignatureMark A. Boyd Keep-On-Learnin' :) >> <span style="font-family:Verdana,Arial,sans-serif;font-size:100%;font- >> style:italics;font-weight:bold;text-decoration:underline;">Meet me in >> St. Louie, Louie.</span> > > Minor correction: "italics" with an "s" is invalid; you'd want "italic". > Defined in <http://www.w3.org/TR/CSS21/fonts.html#font-styling>. Yep. Less'n 2 weeks ago I made a mental note to myself to remember the right one. _That_ worked real well... SignatureNeredbojias http://www.neredbojias.net/ Great Sights and Sounds http://adult.neredbojias.net/ (adult) > 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> SignatureAri http://users.utu.fi/athein/ 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 [quoted text clipped - 6 lines] > <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 SignatureNigel Moss | http://www.nigenet.org.uk Email not valid. nigel@dog.nigenet.org.uk - take the dog out! "You're mother ate my dog!", "Not all of him..." > Use CSS for all styling. > : [quoted text clipped - 14 lines] > <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 While the city slept, thricipio@gmail.com 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 SignatureNigel Moss | http://www.nigenet.org.uk Email not valid. nigel@dog.nigenet.org.uk - take the dog out! "You're mother ate my dog!", "Not all of him..." > <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 [quoted text clipped - 4 lines] > 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 On Aug 28, 2:29 pm, "nice.guy.nige" <nigel_m...@deadspam.com> 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 [quoted text clipped - 5 lines] > 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 I've found this site to be most helpful -- http://htmlhelp.com/reference/ > 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 > [snip] > : [quoted text clipped - 10 lines] > 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 While the city slept, thricipio@gmail.com 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 SignatureNigel Moss | http://www.nigenet.org.uk Email not valid. nigel@dog.nigenet.org.uk - take the dog out! "You're mother ate my dog!", "Not all of him..." > While the city slept, thricipio@gmail.com feverishly typed: > [quoted text clipped - 5 lines] > > Have fun! Ok, that was both funny and true. SignatureEd Mullen http://edmullen.net Can you be a closet claustrophobic? >.My next task is to find a good online CSS tutorial, .. http://www.w3schools.com/css/css_examples.asp SignatureNico > 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. SignatureAri http://users.utu.fi/athein/ >> 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 > My knowledge of HTML could be fairly described as rudimentary. I've > been using the older (now deprecated) "<font> tag to control font [quoted text clipped - 14 lines] > 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> SignatureAdrienne Boswell at Home Arbpen Web Site Design Services http://www.cavalcade-of-coding.info Please respond to the group so others can share In article <32a5d125-2a17-4c8a-9741-7a1999dd8b1d@2g2000hsn.googlegroups.com>, > 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/> Signaturedorayme > In article > <32a5d125-2a17-4c8a-9741-7a1999dd8...@2g2000hsn.googlegroups.com>, [quoted text clipped - 14 lines] > -- > 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 > 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 > > 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. ... > Fundamentally bad practices, so don't learn from them. What JK really meant to add, but just could not get himself to do, is: "Yes, follow dorayme's advice (which I snipped because the very sight of this creature's name makes me want to vomit*) to look at the link it gave you. At least most of the stuff there is sound. It is a bit of a pity that that website is not in HTML 4.01, so be careful about this aspect. Ask me more about this if you need to. -------------- * I am right now perfecting some specially designed torture equipment to use when I hunt down and capture it." Signaturedorayme >>> Also... many thanks to Nico for this one: >>> http://www.w3schools.com/css/css_examples.asp [quoted text clipped - 13 lines] > * I am right now perfecting some specially designed torture equipment to > use when I hunt down and capture it." w3schools.com may not be perfect but it is fundamentally useful and accurate. Self-appointed Yukka's opinions notwithstanding. SignatureEd Mullen http://edmullen.net In love the paradox occurs that two beings become one and yet remain two. - Erich Fromm > >>> Also... many thanks to Nico for this one: > >>> http://www.w3schools.com/css/css_examples.asp [quoted text clipped - 16 lines] > w3schools.com may not be perfect but it is fundamentally useful and > accurate. Self-appointed Yukka's opinions notwithstanding. I am not sure if you know Ed, that I recommended htmldog, not the W3schools. I have sort of taken it on trust that this school site has mistakes (never much used it meself...) but I am sure you are also right that it is probably fine for a real big bunch of things. Also, while I am here, in my capacity as Headmartian of this church of ours, I urge all the teachers to go a little easy on our young JK who I have noticed has behaved rather better recently. I am keeping an eye out on him and I am hoping his progress will continue. No, it is not that I am in a particularly good mood - though I am - it is more that I believe firmly that every boy here deserves a chance to improve and must be encouraged in good behaviour. "Well done JK" is destined for his term report this semester. Signaturedorayme >>>>> Also... many thanks to Nico for this one: >>>>> http://www.w3schools.com/css/css_examples.asp [quoted text clipped - 19 lines] > I am not sure if you know Ed, that I recommended htmldog, not the > W3schools. I wasn't reacting, necessarily, to you but to the link to w3schools. > Also, while I am here, in my capacity as Headmartian of this church of > ours, I urge all the teachers to go a little easy on our young JK who I > have noticed has behaved rather better recently. I am keeping an eye out > on him and I am hoping his progress will continue. Good luck with that. If history is any indicator he will continue to be supercilious, condescending, rude, and insulting for no real reason other than to feed his own ego. For such entities I have no time. And, before the argument is made, I frankly don't care if the information he writes is factual and useful: HOW you say something is very much as important as WHAT you say. He's a rude, self-important prick who has done nothing in my recent observation to change that opinion. On the other hand, you are whimsical, pleasant to encounter, difficult (many times) to understand but always worth a grin. Not to mention the useful information you convey. I have learned and laughed. thank you. And good luck with that Yucca project. Yeah, pun intended. SignatureEd Mullen http://edmullen.net A conclusion is the place where you got tired of thinking. > On the other hand, you are whimsical, pleasant to encounter, difficult > (many times) to understand but always worth a grin. Blush! I never mind being challenged to explain (without insinuations about my mental health or pharmacological intakes*) because it helps me clear my own thoughts. I have been much bemused recently about how curious my views about semantic equivalence of ol and some tables must have seemed to folk. Communication is quite a difficult act across folk with quite different backgrounds. ------------------------ * Perhaps I should declare my drug use, like athletes are supposed to at each meet? Let me start now while I am in a special sort of post Olympic mood. It won't last, I think too many of these startling performances are helped along by too much taxpayer money frankly...) Recent Drugs: 28th Aug 2008: 270ML of Penfold's Shiraz Cabernet between 6.30pm and 8PM 1 cup of decaf coffee 2 x 500mg paracetamol at 11.45pm 28th Aug 2008 29th Aug 2008: 6.30am, cup of black tea. 7.45 am: another cup of black tea 9.30am: cup of coffee 12.15 pm: cup of green tea Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.