Posts Tagged ‘Style’

Highlighting HTML Web Page Links

Monday, July 14th, 2008

You can display your HTML web page  links in the color of your choice by adding the STYLE attribute to your HTML code.

Copy and paste the following code into the HTML portion of your web page where you would like the link to appear:

<A HREF=”http://www.yourdomain.com/” STYLE=”background:yellow; color:black” TARGET=”blank”>http://www.yourdomain.com/</A>

You can change the colors to whatever you’d like, but keep in mind, the text must be visible through the background color.

Removing an HTML Web Page Link Underline

Monday, July 14th, 2008

You can remove the underline of an individual HTML web page link, also known as a hyperlink, by adding the STYLE tag to your link HTML.

Example Code:

<A HREF=”http://www.yourdomain.com” STYLE=”TEXT-DECORATION: NONE”>Your Link</A>

Highlighting HTML Web Page Text

Monday, July 14th, 2008

You can highlight your HTML web page text in the color of your choice by adding the STYLE attribute to your HTML code.

Example: Example of highlighted text

Copy and paste the following code into the HTML portion of your web page where you would like the text to appear:

<SPAN style=”BACKGROUND-COLOR: #ffff00″>Example of highlighted text</SPAN>

You can change the colors to whatever you’d like, but keep in mind, the text must be visible through the background color.

Displaying HTML Web Page Text in a Specific Font Style

Sunday, July 13th, 2008

The FONT tag is used to display your text in a specific style.

Although you may specify the font style you would like your text to be displayed, please keep in mind, if your visitor doesn’t have the font face you specify on their computer, the text will be displayed in the users default font setting.

To make sure your pages are being viewed as you intended, you should include alternative fonts within your HTML web page font tag.

<FONT face=”Verdana,Helvetica,Arial”>Your Text</FONT>

The code above tells the browser to display your text in Verdana, but if your visitor doesn’t have Verdana to display your text in Helvetica and so on.

By including font alternatives, you can ensure your page will be displayed exactly as you had intended.

PHP:Dealing with Dependencies

Monday, June 30th, 2008

Compositional programming style
In the object oriented programming style, it’s preferable to split functionality out to multiple objects, that can work together to solve a single task. Taken to the extreme, this results in more, but smaller, classes and generally relies less on inheritance and more on composition. In lack of better words, I’ll call this compositional programming style. It’s a style which is usually more prevalent with experienced programmers.

For someone coming from an imperative style of programming, this style can appear abstract and confusing, but the benefits are in the flexibility of the code. If different objects are related through composition, parts can be replaced, without changing the code. This makes it easier to reuse components, and to hook into the code, by providing a wrapper here or there. This is especially useful during testing, since it becomes easier to mock out external dependencies (Such as a database or an smtp server).

There is, however, a dark side to composition — dependencies.

So what is a dependency?
For the sake of this post, I’ll use a rather naïve example. Assume, that we were building an addressbook application. This would feature an entity of type Person. In our code, we might have a class …

HTML:how to double underline text with css style

Monday, June 30th, 2008

<html>
<head>
<title>Double Underlined Text Example</title>
<style type=”text/css”>
.double_underline {
border-bottom: 3px double;
}
</style>
</head>
<body>
<span class=”double_underline”>Double Underlined Text</span>
</body>
</html>

The XHTML Elements: span and div

Tuesday, June 24th, 2008

The <span> and <div> tags are very useful when dealing with Cascading Style Sheets. People tend to use the two tags in a similar fashion, but they serve different purposes.
<div>

The <div> tag defines logical divisions (defined) in your Web page. It acts a lot like a paragraph tag, but it divides the page up into larger sections.

<div> also gives you the chance to define the style of whole sections of HTML. You could define a section of your page as a call out and give that section a different style from the surrounding text.

But that’s not all it does! The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets or Dynamic HTML.

One thing to keep in mind when using the <div> tag is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a <div> you can’t have a <div> inside a paragraph.

The primary attributes of the <div> tag are:

* style
* class
* id

Even if you don’t use style sheets or DHTML, you should get into the habit of using the <div> tag. This will give you more flexibility when more XML parsers become available. Also, you can use the id and name attributes to name your sections so that your Web pages are well formed (always use the name attribute with the id attribute and give them the same contents).

Because the <center> tag has been deprecated in HTML 4.0, it is a good idea to start using

<div style=”text-align: center;”>

to center the content inside your div.

More About the <div> Tag
<span>

The <span> tag has very similar properties to the <div> tag, in that it changes the style of the text it encloses. But without any style attributes, the <span> tag won’t change the enclosed items at all.

The primary difference between the <span> and <div> tags is that <span> doesn’t do any formatting of it’s own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>.

The <span> tag has no required attributes, but the three that are the most useful are:

* style
* class
* id

Use <span> when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (<h3>) that you wanted the second word to be red, you could surround that word with

<span style=”color : #f00;”>2ndWord</span>

and it would still be a part of the <h3> tag, just red.

The Elements of Style for Designers

Tuesday, June 24th, 2008

1. Place yourself in the background.
Write in a way that draws the reader’s attention to the sense and substance of the writing, rather than to the mood and temper of the author.

You’re the best designer in your graduating class; you had three job offers the instant you started looking. Now you are designing a bank site, and someone tells you to use blue. What do they know?

Of course you are good, but no one is so good that her whims should override the conventions and constraints of the design. Just because you have a flamboyant style doesn’t mean it is right for every project. If someone can spot a site and know it’s yours, perhaps you are getting in the way of the work.

2. Write in a way that comes naturally.
Write in a way that comes easily and naturally to you, using words and phrases that come readily to mind. But do not assume that because you have acted naturally your product is without flaw.

The seduction of fashion, the desire to impress or stretch your skills are all pitfalls unless you temper them with your natural skills and temperament. Still, talent is not enough.

3. Work from a suitable design.
Before beginning to compose something, gauge the nature and extent of the enterprise and work from a suitable design. … Design informs even the simplest structure, whether of brick and steel or of prose. You raise a pup tent from one sort of vision, a cathedral from another.

It’s worth saying twice, both in the thin book and in this article, because it is so often forgotten. Context is everything.

4. Write with nouns and verbs.
Write with nouns and verbs, not with adjectives and adverbs. The adjective hasn’t been built that can pull a weak or inaccurate noun out of a tight place.

The nouns and verbs of web design are objects and widgets. If you have chosen the wrong widget, no amount of help text or arrows will fix the issue.

5. Revise and rewrite.
Revising is part of writing. Few writers are so expert that they can produce what they are after on the first try.

It’s painful when a client or a boss rejects your first design. Sometimes that initial effort seems perfect. But revision is a way to reach a better design. Or sometimes—and only sometimes—shed light on the perfection of the first. When this odd event occurs, it’s best not to be upset because no one recognized your initial brilliance. Instead, remember that design is as much process as result, and part of your job is to get everyone participating in the design to the end goal.

6. Do not overwrite.
Rich, ornate prose is hard to digest, generally unwholesome, and sometimes nauseating.

Beware of gratuitous use of flash, AJAX, and gradients.

7. Do not overstate.
When you overstate, readers will be instantly on guard, and everything that has preceded your overstatement as well as everything that follows it will be suspect in their minds because they have lost confidence in your judgment or your poise.

How many Verisign and trustE logos do you need in your sidebar? How many awards plaques?

8. Avoid the use of qualifiers.
Rather, very, little, pretty—these are the leeches that infest the pond of prose, sucking the blood of words.

In web design, the “qualifiers” are often styling. Just because you can create your own look and feel for a scroll bar doesn’t mean you should. Many of the browser defaults work quite well; do not overburden your users with your desire to show off your mastery of CSS.

9. Do not affect a breezy manner.
The volume of writing is enormous, these days, and much of it has a sort of windiness about it, almost as though the author were in a state of euphoria. “Spontaneous me,” sang Whitman, and, in his innocence, let loose the hordes of uninspired scribblers who would one day confuse spontaneity with genius.

Here White speaks to fashion. Just because Jeffrey Zeldman did it doesn’t mean you should. Or Jason Freid. Or IDEO. When you see a hyper-simple site, or one with scrolling photos, or one with 64 point type, ask yourself if you can and if you should pull it off.

10. Use orthodox spelling.
In ordinary composition, use orthodox spelling. Do not write nite for night, thru for through, pleez for please, unless you plan to introduce a complete system of simplified spelling and are prepared to take the consequences.

White goes on to quote Strunk:

The practical objection to unaccepted and oversimplified spellings is the disfavor with which they are received by the reader. They distract his attention and exhaust his patience. He reads the form though automatically, without thought of its needless complexity; he reads the abbreviation tho and mentally supplies the missing letters, at the cost of a fraction of his attention. The writer has defeated his own purpose.

Web standards. Don’t Make Me Think. Pattern language. Enough said.

11. Do not explain too much.
It is seldom advisable to tell all. Be sparing, for instance, in the use of adverbs after “he said,” “she replied,” and the like: “he said consolingly;” “she replied grumblingly.”

A lesson I have learned by working with web search is: if you want people to notice something useful, the worst thing you could do is adorn it with lines, colors, or animation. A light touch actually indicates to users that this is worth paying attention to; blue and underlined is often the most effective. The most usable is often also the most used.

12. Do not construct awkward adverbs.
Adverbs are easy to build. Take an adjective or a participle, add -ly, and behold! You have an adverb. But you’d probably be better off without it. Do not write tangledly.

We can now invent widgets from anything. Anything on the page can open, close, launch, select. Sometimes it is the perfect metaphor for the job—such as clicking a thumbnail to see a larger image—sometimes it just bewilders. Do not design tangledly.

13. Make sure the reader knows who is speaking.
Dialogue is a total loss unless you indicate who the speaker is.

When you read a rapid-fire conversation in a book, often the author drops the “he said” “she said.” But have you ever had to stop and count forward from when quotes stopped being labeled? It is the same with design; it’s better to have a hint unobtrusively available than to ask your audience to memorize and track everything on the site. It’s always a thin line between assuming your audience is a pack of morons and expecting them to remember the shortcut key you offered on the homepage. Try to strike a sensible balance.

14. Avoid fancy words.
Avoid the elaborate, the pretentious, the coy, and the cute. Do not be tempted by a twenty-dollar word when there is a ten-center handy, ready and able.

Yup. Do I need to translate?

15. Do not use dialect unless your ear is good.
Do not attempt to use dialect unless you are a devoted student of the tongue you hope to reproduce. If you use dialect, be consistent.

Are you imitating an established style? Be sure that you understand it, and that you can keep it going throughout. The Onion is the reigning king of this proposition; their adherence to being a respected newspaper goes beyond the content to the design.

16. Be clear.
Clarity is not the prize in writing, nor is it always the principal mark of a good style. There are occasions when obscurity serves a literary yearning, if not a literary purpose, and there are writers whose mien is more overcast than clear. But since writing is communication, clarity can only be a virtue.

Clarity can only be a virtue. Tape that to your monitor.

17. Do not inject opinion.
Unless there is a good reason for its being there, do not inject opinion into a piece of writing. We all have opinions about almost everything, and the temptation to toss them in is great. To air one’s views gratuitously, however, is to imply that the demand for them is brisk, which may not be the case, and which, in any event, may not be relevant to the discussion.

You ought not say anything if you can’t say anything nice. Stick to the minimum to make your point. Just because you don’t want that item on the homepage doesn’t mean you have to make it khaki.

19. Use figures of speech sparingly.
The simile is a common device and a useful one, but similes coming in rapid fire, one right on top of another, are more distracting than illuminating.

Pick your poison: replace the term “similes” with “photos,” “diagrams,” “giant fonts,” “orange,” and so on …

20. Do not take shortcuts at the cost of clarity.
Do not use initials for the names of organizations or movements unless you are certain the initials will be readily understood. Write things out. Not everyone knows that MADD means Mothers Against Drunk Driving, and even if everyone did, there are babies being born every minute who will someday encounter the name for the first time.

How many folks label a button “go” because they haven’t much space, or worse, remove the submit button completely because “everyone” knows you can just hit enter. Bite the bullet and redo the design, and make it clear.

21. Avoid foreign languages.
The writer will occasionally find it convenient or necessary to borrow from other languages. Some writers, however, from sheer exuberance or a desire to show off, sprinkle their work liberally with foreign expressions, with no regard for the reader’s comfort. It is a bad habit. Write in English.

The showy “foreign language” of the web is the language of early adapters. Really, not everyone uses del.icio.us, flickr, Google Earth, and not everyone speaks the language of their interfaces. Be cautious in your adoption of new paradigms.

22. Prefer the standard to the offbeat.
Young writers will be drawn at every turn toward eccentricities in language. They will hear the beat of new vocabularies, the exciting rhythms of special segments of their society, each speaking a language of its own. All of us come under the spell of these unsettling drums; the problem for beginners is to listen to them, learn the words, feel the vibrations, and not be carried away.

The 20 Most Common Mistakes in Website Design

Saturday, June 21st, 2008

These twenty mistakes are the difference between a very poor website and a very good website. You may know some of these mistakes already, but if you have avoided or corrected all of them you are almost certain to keep visitors coming in and coming back.

This list is especially important for new designers, amateurs or the experienced but sloppy who need a list to work from for a website spot check.

1. Bad Layout and Design - Yes, there are some ugly, unbalanced or overloaded webpages out there. Make your page a pleasant viewing experience. If you are not sure about the looks of you design, then let some people see a screenshot of your webpage.

2. Non-Standard Links - Why confuse your visitors with links that are different colors or fonts that vary from page to page. Don’t frustrate your visitors, it shouldn’t be a guessing game.

3. Iffy Navigation - Take it easy on the moving objects, trailing images and other stuff you see on kids websites. It’s just not that entertaining and it can get in the way and distract your visitors. Keep it stable easy to find and read.

4. Slow Pages - Who wants to watch your dumb load meter rack up the percents of loaded kilobytes or megabytes? Keep your pages lean and fast, under 50k if possible. Do not bore your visitors.

5. Wild and Crazy Color Schemes - Some pages look idiotic with overly bright colors, maybe even revolting. Your texts must be easy to read, not a sensational nightmare.

6. Spelling and Grammar - Errors in spelling and grammar make your page look amateurish or childish - always spell check.

7. Page Text - Keep your pages easy to read. Break texts into paragraphs or blocks. People scan pages more than they read them, make it easy on them.

8. Font Style and Size - Choose easy to read fonts and use the right size - not micro reading or headlines on every line.

9. Dumb, Out of Control Music - select background music that fits the subject matter and make sure it can be turned off easily.

10. Under Construction - Avoid having a visitor coming to you closed or not yet opened website. What’s the point? Give them a single page of content with a notice as to when the whole site will be available.

11. Untested Web Site - Always look at your website in multiple browsers and make changes accordingly before uploading your site to the web.

12. Sloppy Texts - Make sure all the right words are in all the right places - “Content is King” for readers and search engines.

13. Old Content - Updating your website is important, visitors need to see something new once in a while.

14. Too Many Clicks - Why should a visitor have to jump through page after page to find anything on your website. Make sure everything is only 3 clicks or less from the homepage.

15. No Contact Information - Keep your contact information easy to find and easy to read.

16. Free Hosting Service - When you see a webpage that has a name so long that it has at least one period in the middle of it you know it’s a free hosting situation. Everyone knows the limitations of free hosts and the limitations that they place on a webpage. Don’t use a free web host if you want to be taken seriously.

17. Advertising - Do not overload you page with ads, especially the big grotesque banners. Well placed, well designed ads are okay if you don’t overload the page.

18. Bad Images - Don’t make a visitor suffer missing graphics file or badly shaped or cropped images. Optimize your images and use the best heights and widths, and keep your files in the best formats - jpeg for Photographs and gif for artwork.

19. Website Best Viewed - Don’t say this on your website, it looks like a beginner’s website.

20. No Prices - If you sell something don’t waste your time hoping you will get email inquiries on your prices - just include a price with the item description.

That should do it. Follow these directions to correct the 20 most common mistakes in website design to make sure your webpage is in good shape.