***
# Chapter 1 – Advanced Web Designing (HTML5 + CSS3)
***
## Introduction to Web Designing
Web designing is about creating web pages that can be opened in a browser like Chrome or
Edge. Think of it as building a digital book that anyone can read online.
- **HTML** is like the skeleton—it gives structure to the content.
- **CSS** is the outer layer that makes the page look beautiful with colors, fonts, and layouts.
***
## What is HTML5?
HTML5 is the newest language for making web pages. It helps your webpage do more than just
show text—it can show videos, play sounds, and have colorful graphics.
### Important Features of HTML5:
- **Semantic elements:** Tags like `<header>`, `<footer>`, `<nav>` tell the browser exactly what
each part means.
- **Multimedia:** You can add music and videos without needing extra software.
- **Graphics:** Draw shapes with `<canvas>`, or use scalable images with `<svg>`.
- **New form inputs:** For example, email boxes that check if you typed your email correctly.
- **Works on phones and tablets:** Responsive design makes sure your webpage fits all screen
sizes.
***
## Structure of an HTML5 Webpage
Every webpage has a basic skeleton:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, welcome!</h1>
<p>This is a simple page.</p>
</body>
</html>
```
- `<!DOCTYPE html>`: Tells the browser you are using HTML5.
- `<head>`: Information that doesn’t show on the page but helps the browser.
- `<body>`: What the user will actually see.
***
## Basic HTML Tags
| Tag | Use | Example |
|----------------|-----------------------|------------------------------------------------|
| `<h1>` to `<h6>` | Headings | `<h1>This is a big heading</h1>` |
| `<p>` | Paragraph | `<p>This is a paragraph.</p>` |
| `<a href="url">` | Link | `<a href="[Link] here</a>` |
| `<img src="url" alt="desc">` | Image | `<img src="[Link]" alt="Company Logo">` |
| `<ul>, <ol>, <li>` | Lists | `<ul><li>Item 1</li><li>Item 2</li></ul>` |
| `<form>` | User Input Collection | Used to take inputs from users. |
***
## Semantic Tags
These tags help browsers and developers understand your content better:
| Tag | Meaning | Example |
|------------|-------------------------------|-----------------------------------------------|
| `<header>` | The top part of the page | `<header><h1>Welcome</h1></header>` |
| `<nav>` | Navigation links | `<nav><a href="#">Home</a></nav>` |
| `<main>` | Main content of page | `<main><p>This is the main content.</p></main>` |
| `<section>`| Sections or groups of content | `<section><h2>Gallery</h2></section>` |
| `<footer>` | Page bottom | `<footer><p>© 2025 My Website</p></footer>` |
***
## Forms and Input Types
Example form:
```html
<form>
Name: <input type="text" required /><br />
Email: <input type="email" required /><br />
Date of Birth: <input type="date" /><br />
<input type="submit" value="Submit" />
</form>
```
New input types help make forms easier and more accurate:
- **email:** checks that the input is a correctly formatted email.
- **number:** allows only numbers.
- **date:** shows a calendar.
- **color:** shows a color picker.
- **range:** slider to select a number.
- **url:** validates web addresses.
***
## Multimedia Elements
You can add audio and video without plugins:
- **Audio:**
```html
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
</audio>
```
- **Video:**
```html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
</video>
```
***
## Graphics in HTML5
- **Canvas:** Used to draw graphics with JavaScript (like sketches or animations).
- **SVG:** Vector images that don’t lose quality even when resized.
Example SVG:
```html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
```
***
## Introduction to CSS3
CSS adds color and style to webpages.
### CSS Syntax
```css
selector {
property: value;
}
```
Example:
```css
h1 {
color: purple;
text-align: center;
}
```
***
## CSS Types
| Type | Usage | Example |
|-----------|-----------------------------------|-------------------------------------------|
| Inline | Inside HTML tags | `<p style="color: blue;">Hello</p>` |
| Internal | Inside `<style>` tag | `<style>p { color: blue; }</style>` |
| External | Separate CSS file linked to HTML | `<link rel="stylesheet" href="[Link]">`|
***
## Common CSS Properties
| Property | Example | Purpose |
|-----------------|-----------------------|--------------------------|
| color | `color: red;` | Changes text color |
| background-color| `background-color: yellow;` | Changes background color |
| font-family | `font-family: Arial;` | Sets font style |
| font-size | `font-size: 18px;` | Adjusts text size |
| text-align | `text-align: center;` | Centers text |
| margin | `margin: 10px;` | Outside space |
| padding | `padding: 5px;` | Inside space |
***
## Responsive Design
Websites should look good on all devices (mobiles, tablets, desktops).
Use this tag inside `<head>`:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```
Use **media queries** in CSS to apply styles depending on screen size:
```css
@media screen and (max-width: 600px) {
body {
background-color: lightgrey;
}
}
```
***
## Difference Between HTML and HTML5
| Feature | HTML | HTML5 |
|-----------------|------------------|--------------------------|
| Multimedia | Needs plugins | Built-in audio/video tags|
| Semantic Tags | Not available | Many new semantic tags |
| Forms | Basic inputs | Advanced inputs & validation |
| Graphics | No support | Canvas and SVG support |
| Mobile Support | Limited | Responsive support |
***
## Previous Year Questions (PYQ) & Weightage
| Question | Marks | How Often Asked |
|-------------------------------------------|-------|-----------------|
| Define HTML5 and list two features. | 2 | Very frequent |
| Explain any 4 semantic tags with examples.| 3 | Frequent |
| Write the syntax and example of `<video>`. | 2 | Frequent |
| List 4 new input types of HTML5 with uses. | 2 | Regular |
| Explain 3 common CSS properties. | 3 | Regular |
| What is responsive design? | 2 | Frequently asked|
***
## Tips to Score Full Marks
- Write answers neatly and in points for clarity.
- Always include examples with HTML tags and CSS properties.
- Practice drawing the HTML5 structure.
- Revise semantic tags and their uses well.
- Understand the difference between HTML and HTML5 clearly.
***