Unit 1: Web Design – HTML Basic Tags
1.1 Origins and Evolution of HTML
HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991. It is the
standard markup language used to create web pages. HTML has evolved through various
versions:
- HTML 1.0: The earliest version, basic tags.
- HTML 2.0: Introduced basic structure and tables.
- HTML 3.2: Added scripting support, applets.
- HTML 4.01: Introduced CSS, enhanced multimedia.
- HTML5: Modern version with support for multimedia, semantic elements, and APIs.
**Example:**
```html
<!DOCTYPE html>
<html>
<head><title>My First Page</title></head>
<body><h1>Hello World</h1></body>
</html>
```
1.2 Basic Structure of HTML
An HTML document structure includes:
- `<!DOCTYPE html>`: Declaration.
- `<html>`: Root element.
- `<head>`: Metadata, title, links.
- `<body>`: Visible content.
**Example:**
```html
<!DOCTYPE html>
<html>
<head><title>Example Page</title></head>
<body><p>This is a paragraph.</p></body>
</html>
```
1.3 Basic Text Markup
**Theory:**
Used to structure text in a webpage.
- Headings: `<h1>` to `<h6>`
- Paragraphs: `<p>`
- Line Breaks: `<br>`
- Bold: `<b>` or `<strong>`
- Italics: `<i>` or `<em>`
**Example:**
```html
<h1>Main Heading</h1>
<p>This is <b>bold</b> and <i>italic</i> text.</p>
```
1.4 Images
Images are added using `<img>` tag with `src` and `alt` attributes.
**Example:**
```html
<img src="logo.png" alt="Company Logo" width="200" height="100">
```
1.5 Lists
- Ordered List: `<ol>`
- Unordered List: `<ul>`
- List Items: `<li>`
**Example:**
```html
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<ul>
<li>Bullet Item</li>
</ul>
```
1.6 Tables
Used for tabular data.
- `<table>`, `<tr>`, `<th>`, `<td>`
**Example:**
```html
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>25</td></tr>
</table>
```
1.7 Forms
Used to collect user input.
- `<form>`, `<input>`, `<textarea>`, `<select>`
**Example:**
```html
<form>
Name: <input type="text" name="username"><br>
<input type="submit" value="Submit">
</form>
```
1.8 Frames
Used to divide the browser window into multiple sections, each displaying a different HTML
document. Deprecated in HTML5.
**Example:**
```html
<frameset cols="50%,50%">
<frame src="left.html">
<frame src="right.html">
</frameset>
```
1.9 Overview and Features of HTML5
HTML5 introduces semantic elements and multimedia support:
- Semantic: `<article>`, `<section>`, `<nav>`, `<footer>`
- Media: `<audio>`, `<video>`
- APIs: Canvas, Geolocation, Local Storage
**Example:**
```html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
```
CSS -
1. Introduction to CSS
CSS (Cascading Style Sheets) is used to style HTML elements. It separates content (HTML)
from presentation (CSS), allowing web pages to be styled efficiently.
**Syntax:**
```css
selector {
property: value;
```
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
</body>
</html>
```
2. Levels of Style Sheets
- **Inline CSS:** Within an HTML tag.
- **Internal CSS:** Inside a <style> tag in the <head>.
- **External CSS:** In an external file, linked using <link>.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
p { color: green; }
</style>
</head>
<body>
<p style="color: red;">Inline CSS</p>
<p>Internal CSS</p>
<!-- External CSS assumed linked as style.css -->
</body>
</html>
```
3. Style Specification Formats
CSS allows grouping of selectors and assigning multiple properties.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
color: navy;
p{
font-family: Arial;
font-size: 14px;
line-height: 1.5;
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This is a paragraph.</p>
</body>
</html>
```
4. Selector Forms
Types: universal (*), element, class, id, descendant.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; }
p { color: black; }
.highlight { background-color: yellow; }
#main { width: 100%; }
div p { font-size: 12px; }
</style>
</head>
<body>
<p class="highlight">Highlighted text</p>
<div id="main">
<p>Text inside div</p>
</div>
</body>
</html>
```
---
5. Property Value Forms
Defines the format of CSS property values.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
color: #333;
font-size: 16px;
</style>
</head>
<body>
<p>This text has styled properties.</p>
</body>
</html>
```
6. Font Properties
Controls font appearance: family, size, style, weight.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
p{
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
</style>
</head>
<body>
<p>This is styled text.</p>
</body>
</html>
```
7. List Properties
Used for customizing list markers.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: square; }
ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<ul><li>Item A</li></ul>
<ol><li>Item 1</li></ol>
</body>
</html>
```
8. Color
Applies color to text and backgrounds.
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray;
color: darkblue;
</style>
</head>
<body>
<p>This text is colored.</p>
</body>
</html>
```
9. Alignment of Text
Text alignment (horizontal and vertical).
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align: center; }
td { vertical-align: middle; }
</style>
</head>
<body>
<h1>Centered Heading</h1>
</body>
</html>
```
10. The <span> and <div> Tags
<span>: Inline; <div>: Block-level
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
span { color: red; }
div { border: 1px solid black; padding: 10px; }
</style>
</head>
<body>
<p>This is <span>important</span> text.</p>
<div>This is a block element.</div>
</body>
</html>
```
11. Overview and Features of CSS3
CSS3 adds powerful features:
- Rounded corners
- Shadows
- Animations
- Media Queries
- Flexbox
**Example Program:**
```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border-radius: 10px;
box-shadow: 2px 8px gray;
width: 200px;
height: 100px;
background-color: lightblue;
@media (max-width: 600px) {
.box {
background-color: yellow;
</style>
</head>
<body>
<div class="box">CSS3 Features</div>
</body>
</html>
```
---
JavaScript
1. Object Orientation and JavaScript
JavaScript supports object-oriented programming via **prototypes** and (ES6) **classes**.
Objects are collections of key–value pairs and can have methods (functions attached to
them).
// Constructor Function
function Person(name, age) {
this.name = name;
this.age = age;
Person.prototype.greet = function() {
return `Hello, I'm ${this.name}`;
};
// ES6 Class Equivalent
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
getDetails() {
return `${this.make} ${this.model}`;
```
2. General Syntactic Characteristics
- **Case-sensitive:** `variable` ≠ `Variable`.
- **Statements:** End in semicolons (`;`), though optional in many cases.
- **Blocks:** Group statements with `{ ... }` (e.g., in functions, loops, conditionals).
- **Comments:** Single-line (`//`) and multi-line (`/* ... */`).
- **Variable Declarations:** `var`, `let`, and `const` (block vs function scope).
**Example – Syntax Elements:**
```js
// Variable declarations
let x = 10;
const PI = 3.14;
// Conditional
if (x > 5) {
console.log("x is greater than 5"); // Output
} else {
console.log("x is 5 or less");
// Loop
for (let i = 0; i < 3; i++) {
console.log(i);
```
3. Primitives, Operations, and Expressions
- **Primitive Types:** `String`, `Number`, `Boolean`, `Null`, `Undefined`, `Symbol`.
- **Operations:**
- **Arithmetic:** `+`, `-`, `*`, `/`, `%`.
- **Comparison:** `==`, `===`, `!=`, `!==`, `>`, `<`, `>=`, `<=`.
- **Logical:** `&&`, `||`, `!`.
- **Expressions:** Combinations of values, variables, and operators that produce a value.
**Example – Operations & Expressions:**
```js
let a = 5;
let b = 3;
let sum = a + b; // 8
let isEqual = (sum === 8); // true
let greeting = "Hello" + ", World!"; // "Hello, World!"
let isAdult = (a >= 18) && isEqual; // false
```
4. Screen Output and Keyboard Input
- `alert(message)`: Modal dialog.
- `console.log(value)`: Logs to browser console.
- `document.write(html)`: Writes directly into the HTML document.
- **Input Methods:**
- `prompt(text, default)`: Asks user for input, returns a string.
- `confirm(text)`: Asks for OK/Cancel, returns boolean.
**Example – I/O:**
```js
let name = prompt("Enter your name:", "Guest");
console.log(`User entered: ${name}`);
document.write(`<h2>Welcome, ${name}</h2>`);
if (confirm("Do you want to see an alert?")) {
alert("This is an alert!");
}
```
Combined Program Example
Below is one HTML + JavaScript program that demonstrates **all** of the above topics in a
single script.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Topics Demo</title>
</head>
<body>
<h1>JavaScript Topics Demo</h1>
<script>
/* 1. Object Orientation */
function User(name, age) {
this.name = name;
this.age = age;
User.prototype.greet = function() {
return `Hello, I'm ${this.name}`;
};
/* 2. Syntax & Control Flow */
let name = prompt("Enter your name:", "Guest");
let ageInput = prompt("Enter your age:", "18");
const age = Number(ageInput); // expression + conversion
/* 3. Primitives & Operations */
let isAdult = (age >= 18);
console.log(`Age entered: ${age}, Adult: ${isAdult}`);
/* Create Object */
let user = new User(name, age);
/* 4. Output */
document.write(`<p>${user.greet()}</p>`);
document.write(`<p>You are ${age} years old.</p>`);
if (isAdult) {
document.write("<p>Status: Adult</p>");
} else {
document.write("<p>Status: Minor</p>");
if (confirm("Show greeting in an alert?")) {
alert(user.greet());
</script>
</body>
</html>
```
**Explanation of Combined Program:**
1. **Object Orientation:** Defines a `User` constructor and a `greet` method on its
prototype.
2. **Syntax & Control Flow:** Uses `prompt`, `if...else`, and logs to console.
3. **Primitives & Operations:** Handles number conversion, comparison, and boolean logic.
4. **I/O:** Uses `document.write`, `console.log`, `confirm`, and `alert` to interact with the
user.
