Absolute beginner's first step into web development

This post is for absolute beginners - those who use the web, but have no idea about how the webpages/websites work. By the end of the post, I hope to get the reader at a position where he/she has an overall idea about what goes into a simple webpage. And hopefully, (if the reader has some programming background) the reader should be able to start coding and enjoying javascript.

In his essay "Hackers and Painters", Paul Graham says :
Empathy is probably the single most important difference between a good hacker and a great one. One way to tell how good people are at empathy is to watch them explain a technical question to someone without a technical background.
I decided to try it myself. Hence this attempt of a "introduction for beginners".

What happens when you type an address into a browser?
Browser is the program which we use for browsing the web. Internet Explorer, Google Chrome, Mozilla Firefox and Opera are some examples of browsers.

When we type, say, http://en.wikipedia.org/wiki/India in our browser, the browser makes a request to another computer (which is called a server). Then the server sends some text as a file to our computer. Once our browser gets the text file, we see the Wikipedia article about India on our screen. We can think of the file to be consisting of the following three major parts.
  1. Content : What we read on the page, the images we see on the page, etc.
  2. Appearance : This is all about how the content should look. For example, what font should be used for showing the article. What color the title should have, etc.
  3. Functionality : This is all about how the page should behave. For example, what should happen when we click on some button on the page, etc.
So, there should be a way to tell our browser about what content to show, how the content should look and how the page should behave. That is where HTML, CSS and JavaScript come in.

HTML (HyperText Markup Language)
Lets continue our example of the India page on Wikipedia. HTML is a way of telling the browser "Hey, look! I have got this information for you : The title of the page is  India - Wikipedia, the free encyclopedia. And the page has got headings like Geography, History, Biodiversity etc. Also, the page contains paragraphs like Beginning in the mid-18th century and over the next..."

To do this, we "tag" the information present in the file. Tags are written as <tagname> blah-blah </tagname>, that is, the information "blah-blah" is tagged with a tag of name "tagname". So the file contains text like <title> India - Wikipedia, the free encyclopedia </title> and <p> Beginning in the mid-18th century and over the next...</p> here the "p" tag tells the browser to interpret the content inside it as a paragraph. Same goes for the "title" tag.

To tell the browser more about tags, HTML provides something called attributes. For example, it is not enough to tell the browser that a piece of text is actually a link. We also have to tell which page the link is referring to. Check this - <a href = "http://en.wikipedia.org/wiki/Maratha_Empire"> Maratha Empire </a> it tells the browser that the text "Maratha Empire" is a link (so that probably, the browser can show it distinctively), and when clicked on it, the file from the address http://en.wikipedia.org /wiki/Maratha_Empire should be fetched and displayed. Here we say that the tag "a" (which stands for "anchor") has an attribute "href" (which stands for Hypertext REFerence) and its value is  http://en.wikipedia.org/wiki/Maratha_Empire.

Similarly, there are tags for headings of various sizes, tables, lists, images, buttons etc. A very good place to start learning about HTML is w3school's html tutorial.

CSS (Cascading Style Sheets)
Every browser has some rudimentary way of displaying the HTML, that is, it has a few basic rules like the headings should look bigger (maybe bold) than the normal text in paragraphs, the paragraphs should be easily separable at a glance, the links should look different from the other text surrounding it (most browsers underline it and make it blue/purple). Here is how the same wikipedia page looks when CSS is removed from it. (Click on the image to enlarge)
The page with CSS (left) and without CSS (right)

CSS is a way of telling the browser how it should show the contents of different different tags on the screen. For example, in the above picture, we can see that by default, the browser  underlines the links, and shows bullets in front of contents of an un-numbered lists. But the Wikipedia guys don't want their page look the way the browser would show it by default. For example, to show all the links in red color and in italics, we can add the following HTML tag into the file.
<style type = "text/css"> 
  a {
    color      : red;
    text-style : italic;
It tells the browser that the content inside the tag is CSS code. And the CSS code, in turn, tells the browser that for all the "a" tags in the file, show their content with red color and make their font style as italic. Here, again, color and text-style are called style attributes and red and italic are called their values. CSS can literally transform a mediocre looking page to a beautiful one.

Different types of tags can support various kinds of style attributes. To get started with CSS and to see some live demos head to w3school's css tutorial.

JavaScript is the programming language in which we give instructions to the browser. For example, what to do when a certain button is clicked? Check the following example.

I am color changing text.
The code which does the color change is as follows.
<script type = "text/javascript">
  function changeColor ()
      var element = document.getElementById ("demo_element");
      if (element.style.color == "blue") {
          element.style.color = "red";
      else {
          element.style.color = "blue";
<button onclick = "changeColor()"> 
  Click me to change color! 
<div id = "demo_element">
  I am color changing text. 

When the browser sees the "script" tag with "type" attribute as "text/javascript", it understands that the contents of the tag are javascript code. As we can see, the code is a function which on execution, alternates the color of the tag whose "id" attribute is "demo_element" between "blue" and "red". Then the html tag "button" tells the browser to show a button which, when clicked on, should execute the changeColor function. Here, this was an example of changing CSS attribute values of tags with javascript. Similarly it can change HTML attribute values of tags also. And these are just dummy examples. With javascript, you can do a lot of cool stuff! To tell you... Gmail is written in javascript! Again, w3school's javascript tutorial is a good place to get started with JavaScript.

Edit (8 July 2011) : When I got started, I thought that w3schools is the best place to start. As more knowledgeable people have pointed out, turns out that it is not. The w3fools site links to one of the best resources to learn css, html and javascript from.

1 comment :

  1. Very informative for a beginner like me...!!!Thanks a lot.

    Reply Delete

Post a Comment

Note: Only a member of this blog may post a comment.