Article Read. You Can Find All Kind of Articles

Home | Search Article

Search

-- All Categories --Auto and TrucksEducationFamilyFood and DrinkGadgets and GizmosHealthHobbiesHome ImprovementKids and TeensLegal MattersParentingPets and AnimalsRecreation and SportsSite PromotionTravel and LeisureWeb DevelopmentWomenWriting
Advanced Search

• Auto and Trucks
• Education
• Family
• Food and Drink
• Gadgets and Gizmos
• Health
• Hobbies
• Home Improvement
• Kids and Teens
• Legal Matters
• Parenting
• Pets and Animals
• Recreation and Sports
• Site Promotion
• Travel and Leisure
• Web Development
• Women
• Writing

---

Highlight: Below, first we learn how to define individual tags with multiple definitions using the Cascading Style Sheets, and then we learn how to include common components on multiple web pages with minimum effort.We packed up with external Cascading Style Sheets in the previous section, and I had mentioned like a sage that their could be a point in your life when you would like to implement different CSS definitions for different sections of the same HTML page. I understand that as you go through these HTML gospels, youre growing wiser and wiser, and your unquenchable thirst for wisdom is attaining new heights. Good!We use the CLASS attribute to render different CSS definitions to same tags. Ok, before we move ahead, today I read in an article that tags in an HTML file should be used in small caps so that they can be used in sync with the emerging trends like XML etc. So small caps from now on.Supposing, in one section, we want to look purple, and in another, we want to look black. If we do it in the usuala { font-size : 10 pt; font-family : Arial; font-weight : bold; color : Purple; text-decoration : none;} a:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : Purple; text-decoration : underline;}manner, well only have a purple colored tag because the definition is applied universally. So what do we do. We uses "classes" in this manner:a.sec1 { font-size : 10 pt; font-family : Arial; font-weight : bold; color : purple; text-decoration : none;} a.sec1:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : purple; text-decoration : underline;}a.sec2 { font-size : 10 pt; font-family : Arial; font-weight : bold; color : black; text-decoration : none;} a.sec2:hover { font-size : 10 pt; font-family : Arial; font-weight : bold; color : black; text-decoration : underline;}If youre the noticing type, youll notice the use of sec1 and sec2, which we can take as the two sections. We execute these definitions in the HTML page somewhat like this:To see the site of the immortals, click this purple text.To see the site of the dead, click this black text.Lets now life the CSS affairs and move on to the SSI - Server Side Includes.Although in the real world, it depends on the guy/girl managing your server whether you can use the SSIs or not, assuming you can use them, you should know how and why to use them. First, why?The use is somewhat akin to the external CSS. One change, and it is reflected through the entire web site, even if there are thousands of pages. The ideal use is the navigation bar. Of course you know that every web site deserving to be called a web site must have a navigational system so that you can explore it in an amiable manner. On this web site - http://www.Bytesworth.com - if you can see those gray buttons on the right hand side, they help you navigate through hundreds of information pages.To facilitate hurdle-less navigation, these buttons should be on every page, so that you can immediately click to the section of your desire, irrespective of where you are loafing around. This is achieved by including the lineWhere "nav.inc" is some file you deem fit to include. The extension "inc" does not have any technical implication in this case - you can have any extension. Whatever code is there in the included file, gets included in the HTML file. So wherever you want to use the include files content, append the above line where you want the output to appear.There is another way to include file such as , but for the time being, you can do without it.Including a navigation bar is not the only utility of the SSIs. You can come up with complex ASP and CGI codes to include in your page, but that is beyond the scope of this tutorial, at least at the moment.Another thing to keep in my mind while making pages that are destined to have included files in them: there extension should be SHTML rather than HTML or HTM. This extension informs the ignorant server that the file being loaded is going to use the SSIs.In the next section, we are going to deal with a navigation bar, and how to use tables (remember them?) for it. Well also learn how to define bulleted list.

About the Author

Amrit Hallan is a freelance web designer. For all web sitedevelopment and web promotion needs, you can get in touch withhim at http://www.bytesworth.com. For more such articles,visit http://www.bytesworth.com/articles andhttp://www.bytesworth.com/learn You can subscribe to hisnewsletter [BYTESWORTH REACHOUT] on Web Designing Tips & Tricksby sending a blank email at Bytesworth-subscribe@topica.com