Small Business Web Site Design - Why separate formatting from content?
Today’s web pages are full of content. What makes the web so appealing is its ability to present content in a rich state combining formatting and graphics with content. Of course, you will come across some sites that will tend to overdo this part. Hopefully, they will learn quick or learn the hard way. But that isn’t the intent of this article. In today’s article I want to focus on why it is important to separate your content from your formatting.
To understand this better, let us take a quick look at how we can actually format a web page with some formatting. Don’t work even though this sounds “technical”, it really isn’t once you understand the concepts.
Let’s assume we want to create a paragraph of text that has the following criteria:
There needs to be a Header so we can identify the paragraph
There have to be a few hyperlinks for redirecting the user to some helpful web sites
The header font needs to be a different color with different font size.
The common way is to insert this formatting right within your text. Like so:
<font face="Arial" color="#336699" size="2">
<span style="line-height:17px;" >
My sample text
</span>
</font>
<font face="Verdana" color="#000000" size="1">
This is my other sentence within the paragraph
</font>
So do you see anything wrong with the above code? Nothing much, right? And to a large extent, you may be right in assuming so.
But consider this scenario. You want to portray a consistent look and feel to your web site by formatting all your headings in one specific color, font and font size. And of course, you would like all your text to be formatted another way. Let’s just keep it this simple and not complicate it by saying you would like to format different types of paragraphs differently.
So how would one generally go about formatting this in some of our favorite HTML editors? Well, simple. You would highlight the text and choose the formatting via the handy buttons, menus and whatever else is available. And how does our leading-edge HTML editor format this text. Yup! You guessed right. It will insert the formatting surrounding your text, as illustrated in the above example.
So now that you learnt how to format your text, you get excited and go about formatting
Now comes the fun part. You (or your boss) suddenly decide you would like to change the formatting just a “little”. Instead of the Arial font for the Headers, you would now like it to be Verdana. And of course, while we are at it, can we change the paragraphs to Times Roman?
Now the realization strikes you. You have to go through every web page on your web site and manually edit these Font tags to reflect the new change? Can you see how tedious this can get when you have a few pages on your web site? What about the situation when you have a dynamic web site that takes it’s values from a database?
This is one of the primary reasons I always recommend separating the formatting from the content. This is easily accomplished with Cascading Style Sheets (CSS). Among other things, CSS is extremely good for separating formatting from content. Using CSS, whenever we would like to change the formatting, we change it in one place. Yes, you heard that right. One place. And the formatting ripples through the entire site instantly.
Now how good is that?
When you think about it, separating formatting from content seems totally logical. Yes you will see most standard HTML editors may not fully support what is discussed in this article. However, with a little bit of careful planning and some circumvention, we can easily accomplish style in our web page formatting using CSS.
Till next time,
Elvin Picardo
Delivering Net Results to Small Business
Author of numerous articles on web development and Internet Marketing for small business
10723 159th St, Surrey, BC V4N 3J1 Canada
NetMedian.com
Contact Elvin
To understand this better, let us take a quick look at how we can actually format a web page with some formatting. Don’t work even though this sounds “technical”, it really isn’t once you understand the concepts.
Let’s assume we want to create a paragraph of text that has the following criteria:
There needs to be a Header so we can identify the paragraph
There have to be a few hyperlinks for redirecting the user to some helpful web sites
The header font needs to be a different color with different font size.
The common way is to insert this formatting right within your text. Like so:
<font face="Arial" color="#336699" size="2">
<span style="line-height:17px;" >
My sample text
</span>
</font>
<font face="Verdana" color="#000000" size="1">
This is my other sentence within the paragraph
</font>
So do you see anything wrong with the above code? Nothing much, right? And to a large extent, you may be right in assuming so.
But consider this scenario. You want to portray a consistent look and feel to your web site by formatting all your headings in one specific color, font and font size. And of course, you would like all your text to be formatted another way. Let’s just keep it this simple and not complicate it by saying you would like to format different types of paragraphs differently.
So how would one generally go about formatting this in some of our favorite HTML editors? Well, simple. You would highlight the text and choose the formatting via the handy buttons, menus and whatever else is available. And how does our leading-edge HTML editor format this text. Yup! You guessed right. It will insert the formatting surrounding your text, as illustrated in the above example.
So now that you learnt how to format your text, you get excited and go about formatting
Now comes the fun part. You (or your boss) suddenly decide you would like to change the formatting just a “little”. Instead of the Arial font for the Headers, you would now like it to be Verdana. And of course, while we are at it, can we change the paragraphs to Times Roman?
Now the realization strikes you. You have to go through every web page on your web site and manually edit these Font tags to reflect the new change? Can you see how tedious this can get when you have a few pages on your web site? What about the situation when you have a dynamic web site that takes it’s values from a database?
This is one of the primary reasons I always recommend separating the formatting from the content. This is easily accomplished with Cascading Style Sheets (CSS). Among other things, CSS is extremely good for separating formatting from content. Using CSS, whenever we would like to change the formatting, we change it in one place. Yes, you heard that right. One place. And the formatting ripples through the entire site instantly.
Now how good is that?
When you think about it, separating formatting from content seems totally logical. Yes you will see most standard HTML editors may not fully support what is discussed in this article. However, with a little bit of careful planning and some circumvention, we can easily accomplish style in our web page formatting using CSS.
Till next time,
Elvin Picardo
Delivering Net Results to Small Business
Author of numerous articles on web development and Internet Marketing for small business
10723 159th St, Surrey, BC V4N 3J1 Canada
NetMedian.com
Contact Elvin
0 Comments:
Post a Comment
<< Home