Scribd
Upload
3 views20 pages

Unit 1 Notes

The document provides an overview of web design basics, focusing on HTML, CSS, and JavaScript. It covers the evolution of HTML, its basic structure, and essential tags for text, images, lists, tables, and forms, along with an introduction to CSS for styling and JavaScript for programming. Examples are provided throughout to illustrate the concepts discussed.

Uploaded by

nnacy859
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views20 pages

Unit 1 Notes

The document provides an overview of web design basics, focusing on HTML, CSS, and JavaScript. It covers the evolution of HTML, its basic structure, and essential tags for text, images, lists, tables, and forms, along with an introduction to CSS for styling and JavaScript for programming. Examples are provided throughout to illustrate the concepts discussed.

Uploaded by

nnacy859
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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.

You might also like