Dynamic Web Page Design with HTML, CSS, and JavaScript

HTML Evolution

• HTML has evolved over the years with the introduction of improved sets of standards and specifications
• Versions of HTML include: • HTML 3.0 • HTML 3.2 • HTML 4.0 • HTML5.0

HTML5 Features

• Basic rules for HTML5 include: • Introduction to new features should be based on HTML, CSS, DOM, and JavaScript • Device independence • More markup to be used to replace scripting • Better error handling capabilities • Need for external plugins to be reduced • Better visibility to the public development process

HTML5 Page Layout

• HTML5 contains a head section containing unseen elements and a body section containing visible elements
• The <div> tag was often used to present data in an organized manner
• HTML5 includes new elements that identify and organize each part of the document body

CSS Basics

• CSS is a rule-based language that specifies formatting instructions for content in an HTML document
• CSS defines the layout and formatting of content in a separate file with a .css extension
• Allows rules from different .css files to be merged or edited

Benefits of CSS

• Device independence
• Code re-usability
• Less HTML code

Working of CSS

• User requests a web page from the browser using a URL
• Server responds with the HTML file and related files
• Browser executes the CSS code using the rendering engine and applies styles to CSS files
• Web page is then displayed to the browser

JavaScript Functionality

• Allows users to create a 2D drawable surface in a page without using plug-ins
• Uses Web Workers to turbo charge JavaScript code to perform advanced computation
• Accesses any web service and brings back data to the application in real-time

New Features of HTML5

• Provides client-side storage and caching functionality
• Provides new features for mobile applications
• Provides new features in CSS such as advanced selectors, drop-shadows, and so on
• Gets rid of plugins and uses native support for audio and video
• Uses the Web worker feature to make JavaScript efficient
• Helps to create rich internet clients using plug-ins
• Provides descriptive semantics</div>

Test your knowledge of dynamic web page design using HTML, CSS, and JavaScript. Learn how to create modernistic websites with dynamic data and transform the look and feel of web pages.