Hope you guys are with me from the last tutorial. Lets move on and see what are things or terms we will deal with in a regular basis as a web designer/developer. There will be a lot of new words you will come across if you are starting up new to the web technology. In HTML5 there are going to be new APIs! Well, what API means. API in its fullest form is Application Programming Interface. I know. Hang on to understand. If terms like this frighten you from getting into a new technology, do not hesitate to join a local group, online forum or search for it in internet, or even ask me, I will try my best as per my understanding to make you understand. In a very rough term, API means there are some predefined key words, available to do certain things. Like, we have “<body>” in html to define the body section of a webpage. Similarly each programming/scripting language has its own set of APIs to define certain things. If we take another example, “gotoAndStop()” is available in Flash/actionscript. This simply takes the play head to a certain place in a flash movie. Now for any new language, one need to learn its API to get going in it. In coming days we will be learning what are the new APIs available to HTML5. Now CSS is another word. Lets understand how and why. If you have already desinged a couple of sites in HTML, then you must be knowing some of its styling. If you are new to web, just understand that its a way to separate content and its style. Style can be background colour of a webpage, font colour, type, size etc. So CSS, basically allows us to define all these styles in a different file and our web content remains in a different file. There are ways to link the style file with the content file. The advantage is, our content is no more linked to its design. We can take the same CSS file and apply all our styles to another HTML page, which will look and feel like the same site we desinged previously.There are things like “<div>” in an HTML document. These elements define the structural difference of elements. We can put similar type of content in a particular div. If things seems diffficult to understand now, do not worry, just remember the terms we will be using them soon. Each <div> element is associated with an id or class, this is just for us to refer to that particular section of the page. In CSS files we declare styles for these div elements by refereing to their id or class. And once we attach a CSS to an HTML page, the page reads the style and renders itself. Javascsript, is a scripting language for the web. How it can be used?! This is a nice question and must be understood for moving ahead in HTML. Like CSS can be defined in another file, Javascript also can be defined in another file and attached to an HTML page. This again, makes our content to be alone. All we have is an HTML page with desired content in it. All the style elements are in a CSS file and all the behaviours are in an external Javascript file. Behaviours include rollover a button or image or a certain part of a page, to clicking the button. Everything a user does with the page and how the page reacts to the user can be defined in a javascript file. So in a basic web page, we should be having 3 files atleast. An HTML file, a CSS file and a Javascript file. That way, a content editor will change the contents as per his/her requirement, never worrying about the design or behaviour of the page. A pure CSS designer can update the design of the page individually with some dummy content. And a javascript developer can start putting in logics inside a separate file without thinking of breaking the page design or content. When one is designing for the web, one must be aware of all these as to get the best out of everything.
Getting used to the terms
Hope you guys are with me from the last tutorial. Lets move on and see what are things or terms we will deal with in a regular basis as a web designer/developer. There will be a lot of new words you will come across if you are starting up new to the web technology. In HTML5 there are going to be new APIs! Well, what API means. API in its fullest form is Application Programming Interface. I know. Hang on to understand. If terms like this frighten you from getting into a new technology, do not hesitate to join a local group, online forum or search for it in internet, or even ask me, I will try my best as per my understanding to make you understand. In a very rough term, API means there are some predefined key words, available to do certain things. Like, we have “<body>” in html to define the body section of a webpage. Similarly each programming/scripting language has its own set of APIs to define certain things. If we take another example, “gotoAndStop()” is available in Flash/actionscript. This simply takes the play head to a certain place in a flash movie. Now for any new language, one need to learn its API to get going in it. In coming days we will be learning what are the new APIs available to HTML5. Now CSS is another word. Lets understand how and why. If you have already desinged a couple of sites in HTML, then you must be knowing some of its styling. If you are new to web, just understand that its a way to separate content and its style. Style can be background colour of a webpage, font colour, type, size etc. So CSS, basically allows us to define all these styles in a different file and our web content remains in a different file. There are ways to link the style file with the content file. The advantage is, our content is no more linked to its design. We can take the same CSS file and apply all our styles to another HTML page, which will look and feel like the same site we desinged previously.
There are things like “<div>” in an HTML document. These elements define the structural difference of elements. We can put similar type of content in a particular div. If things seems diffficult to understand now, do not worry, just remember the terms we will be using them soon. Each <div> element is associated with an id or class, this is just for us to refer to that particular section of the page. In CSS files we declare styles for these div elements by refereing to their id or class. And once we attach a CSS to an HTML page, the page reads the style and renders itself.
Javascsript, is a scripting language for the web. How it can be used?! This is a nice question and must be understood for moving ahead in HTML. Like CSS can be defined in another file, Javascript also can be defined in another file and attached to an HTML page. This again, makes our content to be alone. All we have is an HTML page with desired content in it. All the style elements are in a CSS file and all the behaviours are in an external Javascript file. Behaviours include rollover a button or image or a certain part of a page, to clicking the button. Everything a user does with the page and how the page reacts to the user can be defined in a javascript file.
So in a basic web page, we should be having 3 files atleast. An HTML file, a CSS file and a Javascript file. That way, a content editor will change the contents as per his/her requirement, never worrying about the design or behaviour of the page. A pure CSS designer can update the design of the page individually with some dummy content. And a javascript developer can start putting in logics inside a separate file without thinking of breaking the page design or content. When one is designing for the web, one must be aware of all these as to get the best out of everything.
Pingback: Getting into web design action | saumya
Pingback: javascript : Making a Library | saumya