Part 04. Learning Web Technologies With Sri – HTML, CSS, Javascript – Getting Started
Note: This post or article are governed by following disclaimer policy.
This is the fourth edition of the series “Learning Web Technologies with Sri”. In First edition or part, we did learn about Networks & in Second edition or part, we did learn about Servers with differences between Application & Web Server. In the Third edition or part, we did learn about the word INTERNET, what is it, etc.. Now let us learn about a topic which makes Internet world beautiful. The web is nothing but an information document which is well formatted and made it available to the world through internet. These documents are beautified, delivered, created, edited, or deleted using many technologies or languages. One of these is HTML, CSS, JAVASCRIPT. They accompany each other generally and work together to make web document more understandable, usable and helpful. If you see one way HTML, CSS, JAVASCRIPT is all about separating content, presentation & model/controlling the web document. As each one of them is quite a big topic to cover, I will start with basics and move till intermediate level in topics and try to cover as much as possible, from there on I guess internet/books, etc.. are resources for you to learn more. With that said, without furthermore delay let’s learn about these things.
HTML
HTML is a language describing web pages. It is nothing more than fancy structured content. HTML is a markup language. HTML stands for Hyper Text Markup Language. Once we say it’s markup language, it means that it’s not a programming language. Then what is the Markup Language? A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the “marking up” of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts. HTML uses markup tags to describe it’s contents. HTML markup tags are usually called HTML Tags. HTML tags are nothing but keywords surrounded by angle brackets like <html>. Generally, they come in pair like <html> and </html> [Note: This is not true in all cases, example br tag does not have ending tag]. HTML document describes web page & are generally the document itself is known as a web page.
After understanding what is HTML in brief, the next question that would arise is who would understand this specially annotated document? How will the user understand this annotated document? etc… The answer to all these questions is a Web Browser. Web Browser is an application on the machine/system [like Firefox, Internet Explorer, Safari, Chrome, etc..], which would understand this markup language and translate the document into well organized, fancily structured format and presents it to the user. The web browser does not display the tags, instead, it interprets the contents of the page/document. HTML elements are displayed in a particular fashion which is defined by styles. Normally these styles are defined in an external file with extension “css”.
CSS
As said earlier, styles define, how the HTML elements are displayed. Styles were added to HTML 4.0 to solve a problem. These styles are stored in an external file with extension “css”. CSS stands for “Cascade Style Sheets“. HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like heading, paragraph etc.. When tags like font and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers [In those days Developers who develop web pages/web document were commonly known as web developers, nowadays term Web Developer has become too complex to define :), will try in later articles]. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. Today all browsers support CSS. The advantage of External style sheets is that it enables developers/users/you to change the appearance and layout of all the pages in a website, just by editing one single file!.
For example, In standard HTML you would use <b> tag to make words bold.
<b>make me bold</b>
This works fine, and there is nothing wrong with it, except that now if you wanted to say change all your text that you initially made bold to underlined, you would have to go to every section in the page and change the tag. Another disadvantage can be found when you want to make the above text bold, make font style to Verdana, and change it’s color to blue, you would need a lot of code wrapped around the text like below
<font color="#0000FF" face="Verdana"> <strong>This is text</strong> </font>
This is verbose and contributes to making HTML document messy & unmanageable. With CSS, you can create a custom style elsewhere and set all its properties, give it a unique name and then use them in your HTML tags/elements to apply these stylistic properties. Now that we know HTML documents, CSS adds style to it then the next question that would arise is how do we make it interactive? The answer to this question is by using Javascript.
Javascript
Javascript is the most popular scripting language on the internet and it works in all major browsers. It was designed to add interactivity to HTML pages. It’s a lightweight programming language. It’s usually embedded directly into HTML pages. Javascript is an interpreted language meaning that scripts execute without preliminary compilation. Everyone can use Javascript without purchasing a license!. Ok, we understood Javascript is a scripting language & it adds interactivity to HTML! what sort of interactivity does it add?
- Javascript gives HTML designers a programming tool – HTML authors are normally not programmers, but Javascript is a scripting language with a very simple syntax!, Almost anyone can put small snippets of code into their HTML pages
- Javascript can react to events – A Javascript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.
- Javascript can read and write HTML elements – A Javascript can read and change the content of an HTML element.
- Javascript can be used to validate data – A Javascript can be used to validate form data before it is submitted to a server. This saves the server from extra processing.
- Javascript can be used to detect the visitor’s browser – A Javascript can be used to detect the visitor’s browser, and depending on the browser, load another page specifically designed for that browser.
- Javascript can be used to create cookies – A Javascript can be used to store and retrieve information on the visitor’s computer.
Javascript adds enormous other abilities, above are few of them. Javascript is an implementation of the ECMAScript language standard. ECMA-262 is the official Javascript standard. It was invented by Brendan Eich at Netscape (with Navigator 2.0) and has appeared in all browsers since 1996. The official standardization was adopted by the ECMA Organization in 1997. The ECMA standard called ECMAScript-262 was approved as an international ISO (ISO/IEC 16262) standard in 1998. The development is still in progress.
With that, I will sign off this getting started the article of HTML, CSS, and Javascript. In the next article, we will actually dive in and get our hands dirty by writing some code and learning the syntaxes of HTML, CSS, and Javascript till then
[signoff]
References