Overview

Advanced Web Designing is a Std XII chapter of the Maharashtra State Board (MSBSHSE) HSC Information Technology course. In the earlier year you learnt to create simple web pages with basic HTML tags. This chapter takes that further: it teaches you to build web pages that are well structured, attractively styled, interactive, and able to adapt to any screen size — from a wide desktop monitor to a small mobile phone.

A modern web page is built from three co-operating technologies, and it helps to keep their roles clear from the start:

• HTML (HyperText Markup Language) gives the page its structure and content — the headings, paragraphs, images, links, and sections. HTML answers the question "what is on the page?"
• CSS (Cascading Style Sheets) gives the page its appearance — colours, fonts, spacing, borders, and layout. CSS answers "how should it look?"
• JavaScript gives the page its behaviour — it lets the page respond to the user, check what has been typed, and change itself while it is running. JavaScript answers "what should it do?"

Keeping these three concerns separate — structure, presentation, and behaviour — is the guiding principle of good web design, and everything in this chapter builds on it.

We begin with HTML5 semantic tags, which describe the meaning of each part of a page. We then study CSS in depth: how to apply styles, the box model, positioning, and the modern Flexbox layout system. Next we look at HTML forms and form validation, which let a page collect and check information from the user. We then take a first look at JavaScript for interactivity, and finally we study responsive web design, which makes a single page work well on every device.

Maharashtra's HSC Std XII Information Technology syllabus for this topic draws on the same universally accepted, open web standards used by web developers across India and worldwide, even though the Maharashtra State Board's own Balbharati textbook develops and sequences them in its own way. None of the material below reproduces any particular publisher's text; it explains well-established, standard web technologies in our own words, with small examples you can type and try yourself.