Web Technologies: Introduction to HTML, XML, CSS and programming languages

     HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most of markup (e.g. HTML) languages are human readable. Language uses tags to define what manipulation has to be done on the text.
HTML is a markup language which is used by the browser to manipulate text, images and other content to display it in required format. HTML was created by Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0 which was published in 1999.HTML is the standard markup language for creating Web pages.
HTML 1.01991
HTML 2.01995
HTML 3.21997
HTML 4.011999
HTML 52014

Elements and Tag: HTML uses predefined tags and elements which tells the browser about content display property. If a tag is not closed then browser applies that effect till end of page.

HTML page structure: The Basic structure of HTML page is given below. It contain some elements like head, title, body, … etc. These elements are used to build the blocks of web pages.

<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be used inside the <head> element are:
  • <style>
  • <title>
  • <base>
  • <noscript>
  • <script>
  • <meta>
  • <title>
<body>: Body tag is used to enclosed all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.
Features of HTML:
  • It is easy to learn and easy to use.
  • It is platform independent.
  • Images, video and audio can be added to a web page.
  • Hypertext can be added to text.
  • It is a markup language.
Why learn HTML?
  • It is a simple markup language. Its implementation is easy.
  • It is used to create a website.
  • Helps in developing fundamentals about web programming.
  • Boost professional career.
  • HTML is used to build a websites.
  • It is supported by all browsers.
  • It can be integrated with other languages like CSS, JavaScript etc.



  • HTML can create only static webpages so for dynamic web page other languages have to be used.
  • Large amount of code has to be written to create a simple web page.
  • Security feature is not good.


  • XML stands for eXtensible Markup Language
  • XML is a markup language much like HTML
  • XML was designed to store and transport data
  • XML was designed to be self-descriptive
  • XML is a W3C Recommendation

The Difference Between XML and HTML

XML and HTML were designed with different goals:
  • XML was designed to carry data – with focus on what data is
  • HTML was designed to display data – with focus on how data looks
  • XML tags are not predefined like HTML tags are

XML Does Not Use Predefined Tags

The XML language has no predefined tags.
The tags in the example above (like <to> and <from>) are not defined in anything XML standard. These tags are “invented” by the author of the XML document.
HTML works with predefined tags like <p>, <h1>, <table>, etc.
With XML, the author must define both the tags and the document structure.

XML is Extensible

Most XML applications will work as expected even if new data is added (or removed).
Imagine an application designed to display the original version of note.xml (<to> <from> <heading> <body>).
Then imagine a newer version of note.xml with added <date> and <hour> elements, and a removed <heading>.

XML Simplifies Things

  • It simplifies data sharing
  • It simplifies data transport
  • It simplifies platform changes
  • It simplifies data availability
  Many computer systems contain data in incompatible formats. Exchanging data between incompatible systems (or upgraded systems) is a time-consuming task for web developers. Large amounts of data must be converted, and incompatible data is often lost.
  XML stores data in plain text format. This provides a software- and hardware-independent way of storing, transporting, and sharing data.
  XML also makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.
  With XML, data can be available to all kinds of “reading machines” like people, computers, voice machines, news feeds, etc.


   Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.

   CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pagesto share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

   Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

   CSS is easy to learn and understood but it provides powerful control over the presentation of an HTML document.

  • CSS saves time : You can write CSS once and reuse same sheet in multiple HTML pages.
  • Easy Maintainence : To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
  • Search Engines : CSS is considered as clean coding technique, which means search engines won’t have to struggle to “read” its content.
  • Superior styles to HTML : CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
  • Offline Browsing : CSS can store web applications locally with the help of offline catche.Using of this we can view offline websites.

CSS Syntax

      A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.
      A style rule set consists of a selector and declaration block.
    The selector points to the HTML element you want to style.
    • The declaration block contains one or more declarations separated by semicolons.
    • Each declaration includes a CSS property name and a value, separated by a colon.
      For Example:
      -> color is property and blue is value.
      -> font size is property and 12px is value.
    • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
    • The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.

In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.

Introduction to Programming Languages

   A programming language is a set of rules that provides a way of telling a computer what operations to perform. A programming language is a set of rules for communicating an algorithm It provides a linguistic framework for describing computations. A programming language is a notational system for describing computation in a machine-readable and human-readable form. A programming language is a tool for developing executable models for a class of problem domains.
   English is a natural language. It has words, symbols and grammatical rules. A programming language also has words, symbols and rules of grammar. The grammatical rules are called syntax. Each programming language has a different set of syntax rules.
  Programming languages have evolved over time as better ways have been developed to design them. First programming languages were developed in the 1950s. Since then thousands of languages have been developed. Different programming languages are designed for different types of programs.
  High-level program class Triangle 
       { class Triangle { … … float surface() float surface() return b*h/2; return b*h/2; } }
  Low-level program
       LOAD r1,b LOAD r1,b LOAD r2,h LOAD r2,h MUL r1,r2 MUL r1,r2 DIV r1,#2 DIV r1,#2 RET RET
 Executable Machine code
       0001001001000101 0001001001000101 0010010011101100 0010010011101100 10101101001… 10101101001…
  Generateions of PL
  • First Generation Languages 
  • Second Generation Languages 
  • Third Generation Languages
  • Fourth Generation Languages 
  • Fifth Generation Languages

  First Generation Languages

Machine language 
  • Operation code – such as addition or subtraction.
  • Operands – that identify the data to be processed.
  • Machine language is machine dependent as it is the only language the computer can understand.
  • Very efficient code but very difficult to write.

Second Generation Languages

Assembly languages
  • Symbolic operation codes replaced binary operation codes.
  • Assembly language programs needed to be “assembled” for execution by the computer.
  • Each assembly language instruction is translated into one machine language instruction.
  • Very efficient code and easier to write.

Third Generation Languages

  • Closer to English but included simple mathematical notation. 
  • Programs written in source code which must be translated into machine language programs called object code.
  • The translation of source code to object code is accomplished by a machine language system program called a compiler.
  •  Alternative to compilation is interpretation which is accomplished by a system program called an interpreter.
  • Common third generation languages:  ◦ FORTRAN ◦ COBOL ◦ C and C++ ◦ Visual Basic

Fourth Generation Languages

  •  A high level language (4GL) that requires fewer instructions to accomplish a task than a third generation language.
  • Used with databases ◦ Query languages ◦ Report generators ◦ Forms designers ◦ Application generators

Fifth Generation Languages

  • Declarative languages
  • Functional(?): Lisp, Scheme, SML ◦ Also called applicative ◦ Everything is a function
  • Logic: Prolog ◦ Based on mathematical logic ◦ Rule- or Constraint-based
Beyond Fifth Generation Languages
   Though no clear definition at present, natural language programs generally can be interpreted and executed by the computer with no other action by the user than stating their question.Limited capabilities at present.

PL have two broad groups

 ◦ Traditional programming languages
  •  Sequences of instructions
  • First, second and some third generation languages
 ◦ Object-oriented languages
  •  Objects are created rather than sequences of instructions 
  • Some third generation, and fourth and fifth generation languages

Traditional Programming Language 

   ◦ FORmula TRANslation. 
   ◦ Developed at IBM in the mid-1950s. 
   ◦ Designed for scientific and mathematical applications by scientists and engineers.
    ◦ Common Business Oriented Language.
     ◦ Developed in 1959.
     ◦ Designed to be common to many different computers.
     ◦ Typically used for business applications.
    ◦ Beginner’s All-purpose Symbolic Instruction Code.
    ◦ Developed at Dartmouth College in mid 1960s
   ◦ Developed as a simple language for students to write programs with which they could interact through terminals.
    ◦ Developed by Bell Laboratories in the early 1970s
   ◦ Provides control and efficiency of assembly language while having third generation language features.
     ◦ Often used for system programs.
     ◦ UNIX is written in C.

 Object Oriented Programming Language 

Simula ◦ First object-oriented language ◦ Developed by Ole Johan Dahl in the 1960s. Smalltalk ◦ First purely object-oriented language. ◦ Developed by Xerox in mid-1970s. ◦ Still in use on some computers.
 C++ ◦ It is C language with additional features. ◦ Widely used for developing system and application software. ◦ Graphical user interfaces can be developed easily with visual programming tools.
JAVA ◦ An object-oriented language similar to C++ that eliminates lots of C++’s problematic features ◦ Allows a web page developer to create programs for applications, called applets that can be used through a browser. ◦ Objective of JAVA developers is that it be machine, platform and operating system independent.

 Special Programming Language

  Scripting Languages:  ◦ JavaScript and VBScript ◦ Php and ASP ◦ Perl and Python
  Command Languages :  ◦ sh, csh, bash
  Text processing Languages:  ◦ LaTex, PostScript
 HTML ◦ HyperText Markup Language. ◦ Used on the Internet and the World Wide Web (WWW). ◦ Web page developer puts brief codes called tags in the page to indicate how the page should be formatted.
XML ◦ Extensible Markup Language. ◦ A language for defining other languages.
    Programming languages comes to mechanics of the task, learning to speak and use a programming language is in many ways like learning to speak a human language. In these languages you have to learn new vocabulary, syntax and semantics (new words, sentence structure and meaning) And both kind of language require considerable practice to make perfect.

Enter Your Institute & Institute Address to get more benefits