It has been 6 months I have started using Blogger, and during this time I have been facing a common question about “Blog designing” from many of my friends [Even in my college]. Each time, I have to explain them that, there is nothing particular which is known as “Blog Design”. Designing a Blogger or a WordPress blog is all about “Web Designing”. To design your blog, the way you want, you need to MASTER CSS and xHTML web-designing. Both these markup languages are really easy to learn and are must to know for any web/blog designer.
So, I thought of making my own written tutorials [of course simplified] to help understand these two languages better. We shall first start with basic XHTML, then CSS and then extend the tutorial to advance level XHTML to help you learning the modern concepts of Web designing! [i.e., our learning process shall be XHTML[basic]—> CSS –> XHTML[Advance]
In this first part we shall see what the languages are and how they are interconnected and some examples on implementation…
xHTML – Modern Web Development Language- But why not HTML?
At the school level, you might have learned HTML. Now HTML is good, but not best. If you look at this modern web with web2.0 styles on many famous sites, then although all those sites are basically designed on HTML, but it may look almost impossible to attain those effects using the basic HTMLs we have learned in our school level.
The reason is simple => The codes used are too complex to write with small knowledge and concepts in HTML. Now even if we manage to master HTML to make a site design almost similar to the parent site, then also I bet that on first try, it will not be cross browser compatible or even it will throw so much error that you will almost fed up fixing them up!
Basically what happens is, while coding in HTML, we often forgot to close many tags which causes error in our HTML nesting. Although many browsers like Firefox, Chrome can debug these errors at their own, but older browsers throws errors while parsing these badly nested documents.
So, in order to give the web designer a better and neater interface, XHTML [EXtensible Hypertext Markup Language] was introduced. This is stricter than HTML, but believe me, if you start designing in XHTML, you will soon realize that, you will do less errors while maintaining the RULES of XHTML.
XHTML is a stricter and cleaner version of HTML
This line [quoted from w3schools] really means it! Basically, in this Modern Web World you SHOULD NOT write any web document in HTML. XHTML is globally approved and used. The chances of errors are less and the result will be neater and cleaner than HTML. Also it is a W3C recommendation which all web designers should follow. So, in this series of tutorial we shall not concentrate on HTML, but we shall discuss XHTML as our language to write Web Documents.
Now, if you already know some or many syntaxes of HTML 4 then you do not need to worry much, as the syntaxes of HTML and XHTML are same. The thing matters is, the way of writing them and nesting the codes [Opening and closing of XHTML tags].
CSS – Usage and Advantages:
CSS stands for Cascading Style Sheet. Before discussing its usage and functions, let us discuss some styling in HTML [Oops XHTML! Remember? We are not going to discuss HTML, but XHTML]. Take a look at the following piece of codes:
<html>
<head>
<title>Simple Example</title>
</head>
<body>
<b>This text is Bold</b>
<i>This text is Italic</i>
<u>This text is underlined</i>
</body>
</html>
The above example is a simple one and you might be familiar with it! If not, then just
- Open up notepad and copy paste the exact code written above.
- Save the file as something.html, i.e. the extension of the file should be html
- Open it up with your favorite web browser to see the result.
As we know, the <b> tag is responsible for making the text inside the tags <b>…</b> bold. Same for <i> and <u> also.
Now, did you know that the effect can be attained from CSS as well? Just take a look at the following code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample Example 00</title>
<style type="text/css">
p.bold {
font-weight: bold;
}
p.italic {
font-style: italic;
}
p.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="bold">This text is Bold</p>
<p class="italic">This text is Italic</p>
<p class="underline">This text is underlined</p>
</body>
</html>
The part written inside <style> tag is the main CSS portion. It is responsible to style the corresponding HTML tags and included texts. For an Online Demo Click Here
You may wonder, Why to use the CSS when the effect can be achieved by lesser codes in XHTML?
The simple answer is…
- The field of Web designing does not end at simple bold and italics. Modern Web designing is much more complex and complicated to frame.
- If we want to style XHTML tags directly then it will takes thousands [or even more] of lines of code to design a small portion.
- Also, the designing aspects of Basic XHTML tags are pretty much limited. So there is no way we can achieve the effect we want, using generic XHTML tags.
Basically, XHTML is used to display data, where as CSS to design Data. When these two languages are used side by side, then designing a web page becomes really easy! The best things are:
- While formatting the document we write only XHTML tags. We do not actually need to worry about the designing as has to be done later using CSS.
- While designing the document, we do not need to mess with the XHTML tags and need to work only with CSS. In this way, we can reduce the confusions and complexities that has to be encountered.
- Also, the CSS file can be externally attached [Just like JavaScript files] to the document. So it will be cached upon first use and will save loads of bandwidth and coding in order to make a perfect web-page.
A short History behind the Development of CSS:
We have already discussed the advantages of CSS. Now question arises why it was invented/evolved? The answer is:
- HTML/XHTML were never intended to design/format a web page. Rather it was intended to define a web page by wrapping the texts inside proper tags.
- Now for designing purpose, when the <font> tag was first introduced in HTML 3.2, then it really became difficult to design large web sites. As there was no way of repeating a specific style, the font tag has to be used again and again to design a particular page. This caused the document to be large in size as well as confusing to understand. The process of creating a properly designed web-page became hectic as well as expensive.
- In order to reduce the amount of coding, W3C [World Wide Web Consortium] created CSS.
- All the formatting from any HTML/XHTML document can be removed and stored in an external CSS file. In this way, both the core document file and its formatting can be stored and/or modified easily without messing with other codes.
Now, how CSS can be used to format a XHTML document is the thing which you need to know, in order to become a web designer. Like any other computer languages, web designing also depends on your concepts and your own logical thinking.
In the upcoming tutorials, we shall get familiar with these two languages [syntaxes, usage etc…] by discussing many basic implementations along with some advance level examples.
For this tutorial, following is the Online example, You can also download the package if you wish to!
So, how was the explanations of the basic usage and fundamentals of these two languages? I hope you have enjoyed them! Please give your feedback, so that we can improve our tutorials. Also do tell us what else you want us to write about! Keep enjoying…
Pingback: Add background arrow image to external or third party links automatically using jQuery on Website/Blog [Also on Blogger] | InTechgrity
Pingback: Fade In n Out Animation on hover w/ jQuery to make image Buttons | InTechgrity