Background On Text? [Archive]

Click to See Complete Forum and Search --> : Background On Text?

tiberiusjojo

10-21-2006, 08:23 PM

Hey, I'm so new at this that i still have that new car smell... any way, i want to add a background colour to my text e.g. black background with blue text, this is what i wrote.

[bgcolor="000000" font color= "red" font size= "2" font face= "arial">Testing Text background[/font]

I'm using this on piczo, that could be the problem...

Any ideas? Thanks in advance! :)

NogDog

10-21-2006, 09:41 PM

Testing Text background

And of course, you could move all the style information into either a style block in the head section of your page, or into a separate CSS stylesheet, and just use an ID or CLASS attribute for the span tag (or whatever other tag you want to use).

Moridin

10-22-2006, 05:24 AM

If you are using a XHTML 1.0 Strict DTD, I suggest using all hex values instead of color names.

- Moridin

tiberiusjojo

10-22-2006, 09:22 AM

Charles

10-22-2006, 09:24 AM

If you are using a XHTML 1.0 Strict DTD, I suggest using all hex values instead of color names.

- MoridinWhy?

abz

10-22-2006, 10:23 AM

Ok, that worked but i dont unerstand why. I was using style stuff, what does span style mean? What does it Do? Also i was wondering, if you can use it as filler. E.G. Pressing spacebar and making background over nothing. I tried it but it just puts the text at the top. I wrote this..



text

it turns out like this...
http://img.photobucket.com/albums/v222/tiberiusjojo/text.png

But I want the text to be where the red square is below and the rest of the box black as well.
http://img.photobucket.com/albums/v222/tiberiusjojo/text2.png

but it puts the text at the top instead of halfway down. Is it possible to do what im saying?

Thanks in advance! :)

Wellllllll,first you should understand th ebasics of good web page stucture and design. The most basic page shoudl have two elements, the HTML, and the CSS.

The HTML has all your content, and on its own, It shouldnt look too different to a MS Word Document. It is purely structural.

The CSS defines how the page looks. That means, all your colours, backgrounds, positioning, everything.

If you are being strict (good to learn this way, so you get it all right the first time, instead of having to re-learn later), then your HTML should only contain structural tags. This means, things like <div> <ol> <h1> etc. The tags should only tell the browser about how the information is built up. A word should never be italic it shoudl be emphasised
. This is so the browser, instead of thinking 'oh, that text is slanty', it thinks, 'oh, that text is important'.

This helps search engines target your pages also.

now, you asked about the tag. The span tag, as far as i know, is used to target an area of text that should look different, but should be read the same as any other text. so its like a fall-back for when you dont want it to be seen as special text, you just want it to look different.

In your CSS, you can then target the span, and style it however you like. to make ths span text red, you would put this in the CSS:

span{
color:red;
}

if your span had a class of , then you could also style it like this:

.redtext{
color:red;
}

in the code given to you before, the css is embedded into the tag. so the attribute of 'style' is added, and then the css follows:



I always find it is easier tosplit the css from the html, so that you can find it easily if you shoudl want to change it to blue.

If you want to learn more, then www.w3schools.com is a wonderful resource, with loads of tutorials on html and css and anythign else you may want to learn.

I stongly suggest you learn XHTML 1.0 strict.

abi

edit to add:
If you want to have space above the text, you can use the property "margin" or "padding" in your css. I have done a mini-explaination of them here: http://www.webdeveloper.com/forum/showthread.php?p=655078#post655078

Charles

10-22-2006, 10:26 AM

I stongly suggest you learn XHTML 1.0 strict.I, however, would strongly suggest that you stick to HTML 4.01 Strict for web pages. XHTML has some nice features but XHTML isn't compatable with HTML and HTML browsers. And if you're not using those special features there's no point in using XHTML.

WebJoel

10-22-2006, 10:38 AM

Ok, that worked but i dont unerstand why. I was using style stuff, what does span style mean? What does it Do? Also i was wondering, if you can use it as filler. E.G. Pressing spacebar and making background over nothing. I tried it but it just puts the text at the top. I wrote this..



text

it turns out like this...
http://img.photobucket.com/albums/v222/tiberiusjojo/text.png

But I want the text to be where the red square is below and the rest of the box black as well.
http://img.photobucket.com/albums/v222/tiberiusjojo/text2.png

but it puts the text at the top instead of halfway down. Is it possible to do what im saying?

Thanks in advance! :)

A "span" is like a bridge over a river (also called a 'span' ergo 'spaning the banks of the river', the ~ 'spans' the two normal parts of a ) that is, what comes before the opening and what comes after the closing . It is used to change the style of whatever the encompasses.
So:
This sentence has a span in it that changes the color and letter-spacing

does some neat stuff to the text 'in the span' of . Copy & paste this and try it out! :)
"" should not be used as a stand-alone tag, such as:

This is a sentence framed by a "span" and nothing else.

as this is semantically incorrect. It probably works, but it uses the tag incorrectly. Generally, a "span" is used in the inline to cause highlights, emphasis or some short duration of alienating effect to occur within the cited text. Like this:
<h1>This is a SPAN header that has several...interesting effects!</h1>
The above could be a fun way to create a magazine-like layout of a header title for an article... Try the above example. s can be a lot of fun. ;)
Also, "font-family:name-of-font;" is the preferred nomenclature for CSS, not "font face="" which is HTML and a bit deprecated. Used either in a stylesheet, or inline style such as style="font-family:verdana, helvetica, 'palatino linotype', pristina, arial, serif;"

re:
But I want the text to be where the red square is below and the rest of the box black as well.....but it puts the text at the top instead of halfway down. Is it possible to do what im saying?
-I do not understand what you are asking for here...

Charles

10-22-2006, 11:12 AM

Just to clarify, HTML isn't about the way a document looks, not since 1997 that is. Before then, looks were one of the options but that turned out to be a very bad idea.

See http://www.w3.org/TR/html401/index/elements.html for the complete list of HTML elements and the meaning of each. Use the P element for paragraphs, EM for emphasis and STRONG for strong emphasis. Elsewhere you use CSS to define how P, EM and STRONG elements might be displayed. The SPAN element is just a generic inline element that doesn't have any meaning. Unless you are going for some kind of random effect it is likely that you are trying to add emphisis to the element, to draw attention. EM or STRONG would be a better choice.

Kravvitz

10-22-2006, 04:47 PM

abz, you make some good points. However, I would like to address a few. In my opinion W3Schools is overrated. I prefer pointing people to HTML Dog (http://www.htmldog.com/guides/).

A word should never be italic it shoudl be emphasised
. This is so the browser, instead of thinking 'oh, that text is slanty', it thinks, 'oh, that text is important'.
 and still have purpose and are not deprecated. For example, it is a typographical convention to italicize the names of magazines, TV shows, and vehicles. (http://www.sitepoint.com/forums/showthread.php?t=294327)

if your span had a class of , then you could also style it like this:

.redtext{
color:red;
}
Name classes and IDs for what they mean, not what they look like the first time you set them.
The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS (http://www.informit.com/articles/article.asp?p=170514&rl=1)
Use class with semantics in mind (http://www.w3.org/QA/Tips/goodclassnames)

abz

10-22-2006, 05:43 PM

I've not seen that site before. I use w3 as a referance and fid it helpful when i have small problems with certain tags or attributes. also it has a huge range of languages on there too. I have bookmarked html dog - thanks for the resource :)

yes, i realise that and are still in use, but what I was trying to say is that if your text is meant to be emphasised, then is the tag you should use rather than .

and yes you are right. I should have used a better example. I was just trying to quickly show how you would reference a class in css.

thanks for the heads up on those. I am open to all criticism. I like to try and give advice but I know im not always 100% right! Im here to learn as much as to try and help ;)

abi

Charles

10-22-2006, 07:25 PM

it is a typographical convention to italicize the names of magazines, TV shows, and vehicles.Back before the dawn of time (1 January 1970) we set down documents on paper using something that we called a "typewriter". These typewriters looked something like a laptop except that a piece of paper was held in place where the screen should be and by means of mechanical linkage, and something else called a "ribbon", with each stroke of a key a character would be immediately imprinted printed upon the piece of paper. Those of you old enough to remember dot matrix printers will know what a ribbon is.

Typewriters were very limited in the number of glyphs that could be reproduced and notably they couldn't reproduce Italics. So when you sent your manuscript to the printer, or the dissertation review committee, you would back up the page and underscore the characters that should be in Italics. It was a fine solution to the problem. Print and typewriter each had different conventions indicating that something was a title or emphasised.

But what if we don't know if user can reproduce Italics or underline? And wouldn't it be nice to be able to distinguish between emphasis and a title? In HTML we solve for this problem by using the EM element and the CITE element, EM for emphasised and CITE for titles. (TITLE was already taken.) This way we don't have to care what convention the user prefers.

Yes, in HTML the I and B elements still exist and their use is perfectly valid. But if EM or CITE or STRONG is what you mean then you should use that latter. I tend to reserve the I element for Latin, since that is close to the original meaning of Italics, but my Goode Wyffe disagrees strongly.

Do note that the U element, unlike I and B, has been depricated. But since the old convention was that underline means Italics, for which we can use the I element, and the new convention is that underline means a link, for which we already have the A element, the thing only led to confusion.

abz

10-23-2006, 02:39 AM

As a side not to this topic - Does anyone know of any links where the depreciated tags are listed? I will have a search around and see if I can come up with any myself.

abi

Kravvitz

10-23-2006, 03:10 AM

http://www.w3.org/TR/html401/index/elements.html :p

Charles

10-23-2006, 04:48 AM

As a side to your side, they are "elements" not "tags". Tags are one, butnot the only, way to generate elements in an HTML document. You can omit the HTML, HEAD, and BODY tags but the browser will generate those elements nonetheless. It's best to think in terms of elements to keep your head straight.

Moridin

10-23-2006, 11:26 AM

Why?

That can be considered bad practice, especially with colors that are not universally supported by its color name. Although most (all) browsers know color:red; you might as well getting the habit of using hex values. Future future XHTML version might completely remove color names.

I, however, would strongly suggest that you stick to HTML 4.01 Strict for web pages. XHTML has some nice features but XHTML isn't compatable with HTML and HTML browsers. And if you're not using those special features there's no point in using XHTML.

I do not agree with that statement. Only a few per cent (if that) of all internet users do not use any of the most popular browsers such as IE 6, FF or Opera, which works very well with XHTML. Also, XHTML has better semantics, so you won't get away with unclosed heading or paragraph tags.

There is really no valid reason to activly develop websites in HTML 4.01.

- Moridin

Charles

10-23-2006, 11:38 AM

The CSS specification references 16 colors that are, and always will be, just fine to use by name.

And do note that the XHTML 1.0 specification has a whole appendix (Appendix C) detailing the incompatability with HTML and describing how you have to alter XHTML to make it work. And no browser that I know of gets it right. No doubt you don't notice because, being ignorant of the nitty-gritty of XHTML, you are already complying with Appendix C. Which is to say that, for the most part, you are using HTML but telling yourself that you are using XHTML.

HTML 4.01 Strict remains the only mark up language that is universally understood. Optional tags might not suit your fancy but browsers figured out how to deal with it a long time ago. For documents on the web there is no better choice thatn HTML 4.01 Strict.

the tree

10-23-2006, 11:41 AM

Also, XHTML has better semanticsNo, it doesn't.
so you won't get away with unclosed heading or paragraph tags.Nothing to do with semantics, and why is that such a problem anyway.Only a few per cent (if that) of all internet users do not use any of the most popular browsers such as IE 6, FF or Opera, which works very well with XHTML.IE can't handle the xHTML MIME type, Firefox looses what little error handling ability it had when it comes across xHTML and of course Opera can manage but no-one uses Opera anyway.
There is really no valid reason to activly develop websites in HTML 4.01.Now that's just CRAP (Compatability, Reliability, Accessability, Practicality).

wamboid

10-27-2006, 11:23 AM

Back to the subject of the , , and tags. I think I may have a valid case where I wish wasn't deprecated.

I'm working on a page that is basically copying a printed page of instructions on how to use a particular program. In several instances, I hav an instruction that says " Click the Next button to continue". The Next is actually in bold text in the actual application and the N is underlined. I'd like to simply present it as:

Next

I think any other way would require more coding, and not really add anything semantically. Any thoughts?

Charles

10-27-2006, 11:35 AM

An image might be the better choice.

wamboid

10-27-2006, 11:56 AM

There is already a screenshot image, the text is there to describe what to do on that screen. Next is just one example. Other examples would be File, Edit, and View menus with the first letter underlined. If you are using Firefox as I am right now, look to the top just under the blue bar at the line with the menus saying:

File Edit Favorites Tools Help

Imagine a letter of each word being underlined. I think a second image with just the word File on it would be a bit much.

the tree

10-27-2006, 12:14 PM

NextPossibly.

wamboid

10-27-2006, 01:38 PM

Like I said, much more coding, and did it really add anything semantically that was necessary? The difference would be using and rather than and , which I think in this case would actually be wrong. To me, that would be saying "Click on the work next, which is an important word, especially important is the letter N". What I really want it to say is "Click on the word Next, which is darker than other words on the screen and it has the letter N underlined.

Note, I'm not saying that I am in any way opposed to using good semantic html for content and css for presentation, I'm just saying that I was surprised to find an actual example from my own job that I think could actually be correctly used, if it weren't deprecated. Just happened to have read this thread a few days ago (I don't post too often, but read nearly every thread as a learning tool) and had this come up.

Kravvitz

10-27-2006, 02:55 PM

Why don't you use :first-letter?

wamboid

10-27-2006, 03:05 PM

It's not always the first letter for one thing. Two words on the same menu that start with the same letter would need different letters underlined ie File and Favorites might be F and V.

Even if that worked, the same premise would still apply...less code with nearly equal or maybe even better meaning.