This is the first post of the XTHML/CSS tutorial series. By the end of this tutorial series, it is intended that you will be able to code or write websites using XHTML and CSS codes.

This tutorial assumes that you know nothing about how to create website, and so I will start explaining everything from zero. If you are already familiar with XHTML and CSS and are looking for more advanced techniques, you won’t find it here.

Oh, and by the way, since this tutorial assumes you have no knowledge on web development at all, it follows that you don’t have any html editor (possibly don’t even know what that is), therefore this tutorial is designed such that the only software you need to follow this tutorial is Notepad, which every Microsoft Windows computer has.

Having said that, now let’s begin with our introduction πŸ™‚ .

In this first post, I will explain about the core concepts regarding building a website that you must establish soundly to be a good web developer.

How does a web page look like?

We are all familiar with how websites look like when we view them using a web browser. However, that is not what we are interested in. How does a web page look to a web coder?

Take a look at this link: http://www.smash.com.my

That’s how a web page look like to a normal user, visiting the website. This is how it looks like to a web coder: http://www.khairul-syahir.com/files/smash-html-source.txt

It may look daunting, but it is my personal objective that you will be able to read and write all those codes by the end of this tutorial series.

Client-server Architecture (CSA)

The internet works using a Client-server Architecture (CSA). In CSA, the end-user is defined as client and the server on which the website resides is called the server (pretty much because it serves the website to the client). In this architecture, the client initiates the interaction by sending requests for the website to the server. The server then processes these requests and send the appropriate response to the client.

The term client is not only limited to personal computer or laptop, but also includes mobile phones, PDA, Sony PSP, and other devices that can be used to access the internet.

What is an XHTML document?

XHTML is a derivative form of HTML documents. HTML stands for Hypertext Markup Language, and as its name suggests, it’s a web coding language used to mark-up the elements making a website. XHTML, on the other hand, stands for Extensible HTML. It is basically a transition from the old HTML to the newer XML language for web coding. XHTML document is, therefore, the document that contains all the content of your website, which consists of elements that are marked by using the XHTML language.

What is a CSS document?

CSS stands for Cascading Style Sheet. Again, as its name suggests, it is a stylesheet, a document that contains all the style information for the website. XHTML is used together with CSS so that the XHTML document provides all the content and the CSS document provides all the styles for that content.

For more information on CSS, refer to this Wikipedia article.

What is W3C? What do they do?

W3C refers to the World Wide Web Consortium. It is an international consortium where member organizations, full-time staffs, and the public work together to develop Web standards. W3C’s mission is:

To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

What we need to know here is that W3C sets the standards governing how websites should be coded. These standards allow web coders all over the world to write website codes using an internationally-accepted standards. It is a very good practice to always adhere to these standards set by W3C, and for this purpose all codes written during the course of this tutorial are W3C-validated codes that follow these standards.

That concludes the Introduction for this XHTML/CSS Tutorial series. The next post will introduce you with an XHTML document and its basic code structure and syntax.