BCS503 · Unit 1

HTML5, CSS and responsive page structure notes — Unit 1

Free unit-wise study notes on html5, css and responsive page structure for Web Technology, Semester 5 of B.Tech — Computer Science & Engineering — key concepts, examples, important questions and a revision checklist for semester exams.

HTML5, CSS and responsive page structure

Notebook — 20 pages

Page 1

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

1. Introduction to the World Wide Web

The World Wide Web (WWW) is an information system where documents and other web resources are identified by Uniform Resource Locators (URLs), which may be interlinked by hypertext, and are accessible over the Internet.

1.1 Client-Server Architecture

The web operates on a client-server architecture. The client (usually a web browser) sends an HTTP request to the server, and the server responds with an HTTP response containing the requested resource (like an HTML document, image, or stylesheet).

1.2 Core Technologies

HTML (HyperText Markup Language): Provides the structural foundation and content of a web page.
CSS (Cascading Style Sheets): Dictates the visual presentation, layout, and styling of the HTML content.
JavaScript: Adds interactivity, logic, and dynamic behavior to the otherwise static HTML/CSS.

Page 2

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

2. HTML Basics & Document Structure

HTML is a markup language, not a programming language. It uses 'tags' to annotate text so that the browser knows how to structure it.

2.1 The Standard HTML5 Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

2.2 Understanding the Tags

`<!DOCTYPE html>`: Tells the browser to render the page in standard HTML5 mode, avoiding 'quirks mode'.
`<head>`: Contains metadata (data about data), stylesheets, and scripts. Nothing here is visible on the page itself (except the `<title>`).
`<body>`: Contains the actual visible content of the page.

Page 3

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

3. HTML5 Semantic Elements

Before HTML5, developers heavily relied on generic `<div>` and `<span>` tags to structure pages. This was difficult for search engines and screen readers to understand. HTML5 introduced semantic tags that clearly describe their meaning to both the browser and the developer.

3.1 Key Semantic Tags

`<header>`: Contains introductory content or navigational links. Typically contains the logo and main menu.
`<nav>`: Specifically wraps the major navigation blocks of the site.
`<main>`: Encapsulates the dominant content of the `<body>`. There should only be one `<main>` per page.
`<article>`: Represents a self-contained composition that could be independently distributed (e.g., a blog post or news article).
`<section>`: A thematic grouping of content, typically with a heading.
`<aside>`: Content loosely related to the main content (e.g., sidebars, call-out boxes).
`<footer>`: Contains copyright data, links to terms of service, and author information.

3.2 Why Semantics Matter

Semantic HTML is crucial for Accessibility (a11y), allowing visually impaired users' screen readers to navigate the page logically. It is also critical for SEO (Search Engine Optimization), helping Google understand which parts of your page are the most important.

Page 4

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

4. Forms and HTML5 Input Types

Forms are the primary method of gathering data from the user and sending it to a server.

4.1 The `<form>` Element

A form requires two critical attributes:

`action`: The URL of the server-side script that will process the data.
`method`: The HTTP method used to send the data (typically `GET` for fetching data or `POST` for sensitive/large data submissions).

4.2 HTML5 Input Enhancements

HTML5 introduced several new `type` attributes for the `<input>` element. These automatically provide built-in validation and trigger specific mobile keyboards.

Input Type	Feature
`type="email"`	Ensures the text contains an '@' and a domain. Triggers email keyboard on mobile.
`type="number"`	Provides up/down arrows (spinners) and restricts input to digits. Triggers number pad.
`type="date"`	Opens a native browser calendar date-picker.
`type="range"`	Renders as a slider control.
`type="color"`	Opens a native color-picker dialog.

Page 5

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

5. HTML5 Media Elements

Before HTML5, playing audio and video required third-party plugins like Adobe Flash. HTML5 introduced native `<audio>` and `<video>` tags.

5.1 The `<video>` Element

<video width="640" height="360" controls autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Providing multiple `<source>` tags allows the browser to choose the format it supports (e.g., MP4 for Safari, WebM for Chrome). The `controls` attribute adds play/pause buttons.

5.2 The `<canvas>` Element

The `<canvas>` element provides a blank drawing board that can be manipulated using JavaScript. It is used to draw 2D graphics, create animations, and build complex web games directly in the browser without plugins.

Page 6

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

6. Introduction to Cascading Style Sheets (CSS)

CSS handles the visual presentation of HTML. The word 'Cascading' means that styles can fall (cascade) from one stylesheet to another, enabling multiple stylesheets to be used on one HTML document.

6.1 CSS Syntax

A CSS rule consists of a Selector and a Declaration Block.

/* Selector */
h1 {
  /* Declaration Block */
  color: blue;       /* Property: Value; */
  font-size: 24px;
}

6.2 Ways to include CSS

Inline: Using the `style` attribute directly on an HTML tag. (Highly discouraged due to poor maintainability).
Internal: Using a `<style>` tag within the HTML `<head>`. (Useful for single-page templates).
External (Best Practice): Linking to a separate `.css` file using `<link rel="stylesheet" href="styles.css">` in the `<head>`. Allows the stylesheet to be cached and reused across many pages.

Page 7

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

7. CSS Selectors and Specificity

Selectors define which HTML elements the CSS rules apply to.

7.1 Common Selectors

Selector Type	Syntax	Target
Element	`p { ... }`	All `<p>` elements.
Class	`.btn { ... }`	All elements with `class="btn"`.
ID	`#header { ... }`	The single element with `id="header"`.
Descendant	`div p { ... }`	All `<p>` elements that are inside a `<div>`.
Universal	`* { ... }`	Every single element on the page.

7.2 The Cascade and Specificity

When two rules conflict (e.g., one rule says paragraphs are red, another says they are blue), the browser uses a scoring system called Specificity to determine the winner.

Inline styles win over everything.
IDs score higher than Classes.
Classes score higher than Element tags.
If specificity scores are identical, the rule defined last in the stylesheet wins (the cascade).
Using `!important` overrides everything, but is considered bad practice because it makes debugging difficult.

Page 8

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

8. The CSS Box Model

The Box Model is the absolute foundation of CSS layout. Every single element in HTML is considered to be a rectangular box.

8.1 Layers of the Box Model

From the inside out, the box consists of:

Content: The actual text or image.
Padding: Transparent space inside the box, between the content and the border. The background color fills the padding.
Border: A line surrounding the padding (can be visible or invisible).
Margin: Transparent space outside the border, pushing other elements away.

8.2 `box-sizing: border-box`

By default, if you set a width of 100px, and a padding of 20px, the total visual width becomes 140px (100 + 20 left + 20 right). This makes layouts math-heavy. Setting `box-sizing: border-box` forces the padding and border to be absorbed into the declared width, so the box remains exactly 100px wide. This is considered a universal best practice.

Page 9

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

9. Display and Positioning

9.1 The `display` Property

`display: block`: The element takes up the full width available and forces a line break before and after (e.g., `<div>`, `<h1>`, `<p>`).
`display: inline`: The element only takes up as much width as necessary, and does not force line breaks. You cannot set width or height on inline elements (e.g., `<span>`, `<a>`).
`display: inline-block`: Behaves like inline (no line breaks), but respects width and height properties.
`display: none`: completely removes the element from the document flow.

9.2 The `position` Property

`static`: Default flow.
`relative`: Positioned relative to its normal static position. Leaves a 'ghost' space where it used to be.
`absolute`: Removed from normal flow. Positioned relative to its closest positioned ancestor (any parent not static).
`fixed`: Removed from flow. Positioned relative to the browser viewport (stays put when scrolling).
`sticky`: Toggles between relative and fixed depending on scroll position.

Page 10

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

10. Flexbox (Flexible Box Layout)

Before Flexbox, layouts were hacked together using floats and tables. Flexbox (CSS3) is a one-dimensional layout model designed to distribute space dynamically and align items beautifully.

10.1 The Flex Container

To use flexbox, you declare `display: flex` on a parent element. This turns its direct children into 'flex items'.

`flex-direction`: Defines the main axis (`row` (default), `column`, `row-reverse`, `column-reverse`).
`justify-content`: Aligns items along the main axis (`flex-start`, `center`, `flex-end`, `space-between`, `space-around`).
`align-items`: Aligns items along the cross axis (`stretch`, `center`, `flex-start`, `flex-end`).
`flex-wrap`: Allows items to wrap onto multiple lines if they run out of space instead of shrinking.

10.2 Flex Items

Children can be controlled individually using properties like `flex-grow` (how much it can expand), `flex-shrink` (how much it can shrink), and `order` (changing the visual order without touching HTML).

Page 11

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

11. CSS Grid Layout

While Flexbox is one-dimensional (handles rows OR columns), CSS Grid is a two-dimensional layout system (handles rows AND columns simultaneously). It is the most powerful layout system available in CSS.

11.1 Defining a Grid

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 50px auto;
  gap: 20px;
}

The `fr` (fraction) unit is unique to Grid. `1fr` means 'one part of the available remaining space'. In the example above, the second column takes 1/3 of the remaining space, and the third takes 2/3.

11.2 Grid Template Areas

A highly visual way to define layouts by naming grid areas and arranging them like ascii art:

grid-template-areas:
  'header header header'
  'sidebar main main'
  'footer footer footer';

Page 12

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

12. Responsive Web Design (RWD)

RWD is the practice of building a website so that it automatically adapts its layout and content to fit the screen size of any device (desktop, tablet, mobile).

12.1 The Viewport Meta Tag

The foundation of RWD is the viewport tag in the HTML `<head>`:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This prevents mobile browsers from 'faking' a desktop width and zooming way out, making text unreadable.

12.2 Fluid Layouts

Instead of hardcoding widths in pixels (`width: 500px`), RWD relies on relative units like percentages (`width: 50%`) or viewport units (`vw`, `vh`). This allows boxes to stretch and squeeze as the window resizes.

Page 13

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

13. Media Queries

Fluid layouts alone aren't enough. A 3-column layout that looks great on a desktop will be unreadable on a phone, even if it uses percentages. Media Queries allow you to apply completely different CSS rules based on the screen width.

13.1 Syntax

/* Default Desktop styles here */
.sidebar { display: block; }

/* Triggered when screen is 768px wide or less */
@media screen and (max-width: 768px) {
  .sidebar {
    display: none; /* Hide sidebar on mobile */
  }
}

13.2 Mobile-First Approach

Modern best practice dictates writing the default CSS for mobile screens first, and then using `min-width` media queries to add complexity as the screen gets wider. This prevents mobile devices from having to download and override heavy desktop CSS rules.

Page 14

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

14. Responsive Typography and Media

14.1 Responsive Images

Images with a fixed width will overflow their containers on small screens. The golden rule for responsive images is:

img {
  max-width: 100%;
  height: auto;
}

This ensures the image never scales larger than its original size (preventing pixelation), but will shrink dynamically to fit inside any container.

14.2 `rem` vs `em` Typography

`px` (Pixels): Hardcoded. Doesn't scale if the user changes browser default font sizes.
`em`: Relative to the font-size of the direct parent element. Can cause compounding math nightmares if nested deeply.
`rem` (Root em): Relative to the font-size of the root `<html>` element. This is the modern standard for typography. If you change the root font size in a media query, all `rem` based text across the entire site scales perfectly in unison.

Page 15

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

15. CSS Custom Properties (Variables)

Before CSS variables, developers had to use preprocessors like SASS or LESS to store reusable values (like brand colors). CSS3 introduced native variables.

15.1 Declaration and Usage

Variables are usually declared in the `:root` pseudo-class so they are available globally. They must start with two dashes `--`.

:root {
  --primary-color: #3498db;
  --padding-std: 16px;
}

.btn {
  background-color: var(--primary-color);
  padding: var(--padding-std);
}

15.2 Why use variables?

They make maintaining large stylesheets trivial. If the brand color changes, you only update it in one place. Furthermore, unlike SASS variables which compile to static CSS, native CSS variables exist at runtime, allowing them to be dynamically manipulated by JavaScript (essential for Dark Mode toggles).

Page 16

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

16. CSS Transitions and Animations

CSS allows you to animate property changes smoothly, improving the user experience without requiring JavaScript.

16.1 Transitions

Transitions interpolate a change from one state to another (e.g., changing color on hover).

.btn {
  background: blue;
  transition: background 0.3s ease-in-out;
}
.btn:hover {
  background: red;
}

16.2 Keyframe Animations

For complex, multi-step animations, `@keyframes` are used. They define specific styles at specific percentages of the animation duration.

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.ball { animation: bounce 1s infinite; }

Page 17

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

17. CSS Frameworks and Architecture

Writing raw CSS for large projects can quickly lead to unmaintainable 'spaghetti code'. Frameworks and architectural methodologies help structure CSS.

17.1 Utility-First CSS (Tailwind)

Instead of writing custom classes like `.card`, frameworks like Tailwind CSS provide thousands of single-purpose utility classes (e.g., `flex`, `pt-4`, `text-center`, `text-red-500`). You build components directly in the HTML by composing these classes. It leads to highly maintainable, rapidly built UIs without ever leaving the HTML file.

17.2 Component-Based Frameworks (Bootstrap)

Frameworks like Bootstrap provide pre-designed, ready-to-use components like Modals, Navbars, and Buttons. They are excellent for fast prototyping, but often result in websites that all look generically similar unless heavily customized.

17.3 BEM (Block Element Modifier)

A naming convention for writing pure CSS. It ensures classes are highly specific and don't clash. Syntax: `.block__element--modifier`. (e.g., `.card__title--large`).

Page 18

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

18. Web Accessibility (a11y)

Web accessibility ensures that websites and tools are designed so that people with disabilities (visual, auditory, motor, cognitive) can use them.

18.1 WCAG Guidelines

The Web Content Accessibility Guidelines (WCAG) dictate standards. Key principles (POUR):

Perceivable: Information must be presentable to users in ways they can perceive (e.g., Alt text on all images for screen readers).
Operable: UI components must be operable (e.g., the entire site must be navigable using only the Tab key, with visible focus states).
Understandable: Information and operation must be understandable.
Robust: Content must be robust enough to be interpreted reliably by assistive technologies.

18.2 Color Contrast

Text must have a sufficient contrast ratio against its background to be readable by users with color blindness or low vision (minimum ratio of 4.5:1 for normal text).

Page 19

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

19. CSS Preprocessors (SASS/SCSS)

CSS preprocessors are scripting languages that extend CSS, allowing developers to write code in one language and compile it into standard CSS.

19.1 Features of SASS

SASS (Syntactically Awesome Style Sheets) provides features that standard CSS lacks (or lacked until recently):

Nesting: You can nest CSS selectors inside each other, mirroring the HTML structure. This makes code vastly more readable.
Mixins: Reusable blocks of CSS. You can write a block of code (like vendor prefixes for a specific CSS3 feature) and 'include' it anywhere, even passing variables into it like a function.
Functions & Math: Perform complex math operations (`100px / 3`) directly in the stylesheet.
Partials: Break stylesheets into dozens of tiny, manageable files (e.g., `_buttons.scss`, `_header.scss`) and compile them into a single `main.css` file for production.

Page 20

Wink Notes

B.Tech CSE — 5th Semester

Web Technology

— Unit - 1 —

20. Advanced Layout and Performance

20.1 Subgrid

A relatively new CSS Grid feature. Normally, grid tracks are isolated to the immediate children of the grid container. `subgrid` allows nested elements to participate in the sizing of their parent's grid, allowing for perfect alignment of nested components across different containers.

20.2 CSS Performance: Repaints and Reflows

Animating certain CSS properties forces the browser to recalculate the layout of the entire page (Reflow) or redraw the pixels (Repaint), which tanks performance and causes stuttering.

Bad to Animate: `width`, `height`, `margin`, `top`, `left`. (Triggers Reflows).
Safe to Animate: `transform` (translate, scale, rotate) and `opacity`. These are handed off to the GPU (Hardware Acceleration) and do not trigger layout calculations, resulting in silky smooth 60fps animations.

Continue in this subject

JavaScript, the DOM and client-side validation XML, JSON and AJAX based communication Server-side scripting, sessions and REST APIs Web security, hosting and deployment

HTML5, CSS and responsive page structure notes — Unit 1

Notebook — 20 pages

1. Introduction to the World Wide Web

⇒1.1 Client-Server Architecture

⇒1.2 Core Technologies

2. HTML Basics & Document Structure

⇒2.1 The Standard HTML5 Boilerplate

⇒2.2 Understanding the Tags

3. HTML5 Semantic Elements

⇒3.1 Key Semantic Tags

⇒3.2 Why Semantics Matter

4. Forms and HTML5 Input Types

⇒4.1 The `<form>` Element

⇒4.2 HTML5 Input Enhancements

5. HTML5 Media Elements

⇒5.1 The `<video>` Element

⇒5.2 The `<canvas>` Element

6. Introduction to Cascading Style Sheets (CSS)

⇒6.1 CSS Syntax

⇒6.2 Ways to include CSS

7. CSS Selectors and Specificity

⇒7.1 Common Selectors

⇒7.2 The Cascade and Specificity

8. The CSS Box Model

⇒8.1 Layers of the Box Model

⇒8.2 `box-sizing: border-box`

9. Display and Positioning

⇒9.1 The `display` Property

⇒9.2 The `position` Property

10. Flexbox (Flexible Box Layout)

⇒10.1 The Flex Container

⇒10.2 Flex Items

11. CSS Grid Layout

⇒11.1 Defining a Grid

⇒11.2 Grid Template Areas

12. Responsive Web Design (RWD)

⇒12.1 The Viewport Meta Tag

⇒12.2 Fluid Layouts

13. Media Queries

⇒13.1 Syntax

⇒13.2 Mobile-First Approach

14. Responsive Typography and Media

⇒14.1 Responsive Images

⇒14.2 `rem` vs `em` Typography

15. CSS Custom Properties (Variables)

⇒15.1 Declaration and Usage

⇒15.2 Why use variables?

16. CSS Transitions and Animations

⇒16.1 Transitions

⇒16.2 Keyframe Animations

17. CSS Frameworks and Architecture

⇒17.1 Utility-First CSS (Tailwind)

⇒17.2 Component-Based Frameworks (Bootstrap)

⇒17.3 BEM (Block Element Modifier)

18. Web Accessibility (a11y)

⇒18.1 WCAG Guidelines

⇒18.2 Color Contrast

19. CSS Preprocessors (SASS/SCSS)

⇒19.1 Features of SASS

20. Advanced Layout and Performance

⇒20.1 Subgrid

⇒20.2 CSS Performance: Repaints and Reflows

Continue in this subject

1.1 Client-Server Architecture

1.2 Core Technologies

2.1 The Standard HTML5 Boilerplate

2.2 Understanding the Tags

3.1 Key Semantic Tags

3.2 Why Semantics Matter

4.1 The `<form>` Element

4.2 HTML5 Input Enhancements

5.1 The `<video>` Element

5.2 The `<canvas>` Element

6.1 CSS Syntax

6.2 Ways to include CSS

7.1 Common Selectors

7.2 The Cascade and Specificity

8.1 Layers of the Box Model

8.2 `box-sizing: border-box`

9.1 The `display` Property

9.2 The `position` Property

10.1 The Flex Container

10.2 Flex Items

11.1 Defining a Grid

11.2 Grid Template Areas

12.1 The Viewport Meta Tag

12.2 Fluid Layouts

13.1 Syntax

13.2 Mobile-First Approach

14.1 Responsive Images

14.2 `rem` vs `em` Typography

15.1 Declaration and Usage

15.2 Why use variables?

16.1 Transitions

16.2 Keyframe Animations

17.1 Utility-First CSS (Tailwind)

17.2 Component-Based Frameworks (Bootstrap)

17.3 BEM (Block Element Modifier)

18.1 WCAG Guidelines

18.2 Color Contrast

19.1 Features of SASS

20.1 Subgrid

20.2 CSS Performance: Repaints and Reflows