Web Design Tutorial - Lesson 1, Part 2
Lesson 1, Part 2
What makes XHTML different from programming/scripting languages?
Basically, XHTML is different in that it is read straight through by the browser, and is processed as the browser reads it from top to bottom. Programming languages, on the other hand, need to be checked for errors by the compiler (the program that translates the code into something the machine can understand), and they allow for jumping around between the code based on certain conditions.
XHTML itself does not provide error-checking, nor does it offer decision-making capabilities.
The first half of the above statement means that what you type is what you get. The browser will render any mistakes you make to the best of its ability, but if you do something wrong, it won’t let you know. It will just print out what it’s given, and it couldn’t care less if what comes out is horribly arranged on the page, or completely illegible, or even missing whole sections of content.
The latter part of the statement means that plain (X)HTML documents are static. That is to say, a page written in just HTML cannot change unless the author manually goes in and changes the file. What is written in the file is what will be displayed every time. The opposite is a dynamic page. Dynamic pages can change based on certain conditions, such as a website that always displays the current date and/or time. Among the languages that can make pages dynamic are JavaScript, AJAX, PHP, ASP, and JSP. In addition, SQL is a language that allows you to create and use databases, which play a big role in dynamic web pages.
No error-checking or conditional statements? Then what’s so good about XHTML?
There are two really great things about XHTML (which apply to CSS and JavaScript as well, as you’ll see later on):
- It’s FREE. And I don’t mean free as in “Try it out free, and in 30 days we’ll start charging you for it.” To write HTML all you need is a text editor (something as simple as Notepad will do, though we’ll discuss other options soon) and a web browser. I prefer (and strongly recommend) Mozilla Firefox. Among other reasons, it has some wonderful extensions that can be very useful even to professional web designers.
- You can view other people’s code. What’s so good about that? Well, one great way to build your HTML knowledge and understanding is by looking at other websites’ source code and learning from that. Why not try it out now?
Let’s take a look at the source code for this page. I recommend doing this in Firefox, as it shows source code with syntax highlighting. This means that the commands, or tags as they’re called in HTML, are color-coded to make them easier to read. Take my word for it, it will make recognizing code sections a whole lot simpler. Internet Explorer for Windows simply opens source code in Notepad by default, and that’s something no one should have to deal with. To view source code, go to the “View” menu at the top of the page, and depending on what browser you’re using you’ll see something like “Source” or “Page Source” or “Source Code.” You get the picture. Alternatively, Firefox users can simply press CTRL+U.
How to view source code in Mozilla Firefox. Firefox users can simply press CTRL+U to bring up the source code.
Now that you have this page’s source code in front of you, the first thought that comes to mind is probably “Someone tell me what all these weird words/commands are, and why are there these little triangle things around every word?” If you have syntax highlighting on, you might also be thinking “Oooooh colors!”
A website’s source code. Viewed in Mozilla Firefox.
Take a deep breath, don’t panic. And don’t get too distracted by the colors. It’s all much simpler to understand than you may think. The next section will explain what it is you’re seeing.
Enjoyed the lesson? Keep your eyes open for Part 3.
Subscribe to my RSS feed to get updates in your favorite RSS reader!
<< Go back to Lesson 1, Part 1 Table of Contents Continue on to Lesson 1, Part 3 >>
Great blog you got here…keep up the good work.