A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.
A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.
This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.
An Introduction to Semantics
This article gives you an introduction to why semantics are important. It doesn't contain much code samples, but it does provide you with an insight in why standards and CSS are important on the modern web.
On Friday, December 14th 2007 at 09:11 PM
By Alex van Herwijnen (View Profile)
(Rated 3.8 with 9 votes)
Nowadays, things are different. There are a lot of browsers (IE, Firefox, Mozilla, Netscape, Opera, Safari, Konqueror, etc.) and they all have different ways of rendering content. Because the most web designers and web site owners want to serve as many visitors as possible, standards were made up. Basically, a standard is an agreement between all parties, for example: render <strong>as bold text</strong>.
In the beginning, there were few browsers. Netscape was world-famous, until Microsoft pushed their Internet Explorer via Windows 95 (and higher). Netscape was pushed out of the market, and Internet Explorer dominated. IE, however, sometimes ignored the standards or just rendered things differently.
Because most webdesigners only tested in IE, other browsers were left out. This was fine, however, as there were practically no other browsers. Various techniques were used: spacer gifs (a transparent pixel stretched to align content), marquee-tags, various other proprietary tags, ActiveX. A lot of these techniques were Microsoft-only and only rendered by IE.
Pages were aligned with tables and formatted with <font size=”7” face=”Comic Sans MS”>. It looked great on screen, the source could look good too, but… other browser came. And search engines. And mobile devices with web browsers. A human can look at text and tell what’s more important and what’s not. Google doesn’t have eyes and needs other techniques. The screen resolution of a PDA is only 320x240 (or in rare cases 640x480), using a normal page on such a tiny window would mean the user would have to scroll a lot, and pay excessive bandwidth bills (when using WAP, GPRS, EDGE, UMTS, …).
Then, the modern day came. People started using the tags for what they where, hX-tags for defining headers (h1 through h7), strong for bold text, em for italic text, tables for tabular data only, etc. All formatting was put into external files called “Cascading Style Sheets”, CSS. Putting the formatting (how big should the menu be? What width and height?) into a separate file has a few advantages: - It means less editing of files when a tiny bit of the layout changes. For example, you build a web site for a customer and give all documents (over 100!) a green background. You don’t work with a CMS or authoring tool, but with Notepad. The customer wants the background to be red instead: you’d have to edit 100 files. - It saves you bandwidth: the CSS-file is cached on the client, meaning the browser won’t ask for it on every page visit. Only on the first visit, and when the cache “expires”. By default (depending on server configuration, of course) such a file is cached for a week.
Suppose you use 200 bytes for aligning your menu, and the visitor browses all 100 pages. It would generate 200 kilobytes of data, just for aligning the menu. Now, replace 200 bytes with 20 bytes, and 400 bytes of CSS. The visitor would request the same 100 pages, it would generate 20 kilobytes for the HTML for the menu, and 400 bytes in CSS.
Now, say you have 50.000 visitors doing exactly the same thing. It would generate rougly 10 gigabytes of data, while the CSS-version only generates about a gigabyte of traffic. It would save you 9 gigabytes of data traffic, reducing costs.
Google benefits from this too: by using header-tags (<h1>) Google can decide what’s the most important part of your page: the title. In an article, <h2>-tags define subtitles. A paragraph (<p>) is meant for the text that goes with a header. How to tell if the code you’re writing adheres to the standards? There is an online validator at http://validator.w3.org, you just give it your HTML (either by giving your URL, uploading your file or by copy/pasting your code) and it will tell you exactly what you are doing wrong. If you make no mistakes, you will get a happy green bar telling you your page is valid. If it’s invalid, fear the red bar of doom!
Bad use of tags:
<font face=”Comic sans ms” size=”5”>My title goes here!</font><br>
Hello, I am your content.
Good use of tags:
<h1>My title goes here!</h1>
<p>Hello, I am your content.</p>
Google (and other search engines), “read” your HTML and determine that “My title goes here!” is the header that applies to “Hello, I am your content.”. The header-tag can be formatted using CSS, for example:
|Digg It! Del.icio.us Reddit StumbleIt Newsvine Furl BlinkList|
Rate this tutorial
Related Source Code
There is no related source code.
HTML Job Search
From the creators of Geekpedia, a revolutionary new coupon website!
BargainEZ has coupons codes, printable coupons, bargains and it is the leading source of Passbook coupons for iPhone and iPod touch devices.