Scribd
Upload
14 views4 pages

Web Technologies Notes

The document provides detailed notes on web technologies, covering HTML, forms, images, CSS, XML, DHTML, JavaScript, and AJAX. It explains the structure and elements of HTML, the use of CSS for styling, the basics of JavaScript for interactivity, and the advantages of AJAX for asynchronous web updates. Additionally, it mentions jQuery and AngularJS as tools for enhancing web development.

Uploaded by

ayshmanayshman
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
14 views4 pages

Web Technologies Notes

The document provides detailed notes on web technologies, covering HTML, forms, images, CSS, XML, DHTML, JavaScript, and AJAX. It explains the structure and elements of HTML, the use of CSS for styling, the basics of JavaScript for interactivity, and the advantages of AJAX for asynchronous web updates. Additionally, it mentions jQuery and AngularJS as tools for enhancing web development.

Uploaded by

ayshmanayshman
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/ 4

Web Technologies - Detailed Notes

UNIT I: HTML

HTML (HyperText Markup Language) is the standard language used to create and design webpages. It

consists of a series of elements (tags) that tell the browser how to display content.

- **Introduction**: HTML is the backbone of all websites and is used to structure text, images, links, and other

content.

- **Tag Basics**: Tags are enclosed in angle brackets <>. Most tags come in pairs: <tag>content</tag>.

- **Page Structure**: A basic HTML document has the structure:

<html>

<head>...</head>

<body>...</body>

</html>

- **Adding Comments**: Comments in HTML are added using <!-- comment here -->.

- **Text, Paragraphs & Line Breaks**: <p> for paragraphs, <br> for line breaks.

- **Emphasizing Text**: <b> (bold), <i> (italic), <u> (underline), <strong>, <em>.

- **Headings**: Ranges from <h1> (largest) to <h6> (smallest).

- **Horizontal Rule**: <hr> draws a horizontal line.

- **Lists**:

- Ordered List: <ol><li>Item</li></ol>

- Unordered List: <ul><li>Item</li></ul>

- **Font Size, Face, Color**: Using the <font> tag (deprecated), better done with CSS.

- **Alignment**: Using the align attribute or CSS.

- **Links**: <a href="url">Link text</a>

- **Tables**: <table>, <tr> (row), <td> (cell), <th> (header)


Web Technologies - Detailed Notes

- **Frames**: Used to split the browser window into multiple sections (deprecated in HTML5).

UNIT II: Forms & Images Using HTML

- **Graphics Introduction**: Enhances visual appeal, used for logos, icons, etc.

- **Efficient Use of Images**: Optimize file size and format (JPG, PNG, GIF).

- **Image Maps**: Clickable areas on images using <map> and <area> tags.

- **GIF Animation**: Uses .gif format for simple animations.

- **Adding Multimedia**: Use <audio> and <video> tags.

- **HTML Forms**: Used for collecting data from users.

- <form> encloses the form

- <input type="text">: Text box

- <input type="password">: Password field

- <select>: Drop-down list (combo box)

- <textarea>: Multi-line text input

- <input type="submit">: Submit button

- **FrontPage**: A WYSIWYG tool previously used to design HTML pages without writing code manually.

UNIT III: XML & DHTML

- **CSS (Cascading Style Sheets)**: Used for styling HTML.

- **Why Use CSS**: Separates content from design, easier to maintain.

- **Adding CSS**: Inline (style="..."), Internal (<style>), or External (.css file).

- **Grouping Styles**: Combine selectors for consistent design.

- **XML (Extensible Markup Language)**: Used to store and transport data, not for display.
Web Technologies - Detailed Notes

- Syntax is strict, self-descriptive, and tag-based.

- **DHTML (Dynamic HTML)**: Combines HTML, CSS, JavaScript to create interactive websites.

- **DOM (Document Object Model)**: Represents page elements as objects.

- Allows JavaScript to dynamically change HTML and CSS.

- **Event Bubbling**: When an event starts from the innermost element and propagates out.

- **Data Binding**: Connects UI to data source (limited use in DHTML context).

UNIT IV: JavaScript

- **Client-side Scripting**: JavaScript runs in the browser, not on the server.

- **What is JavaScript**: A scripting language used to create interactive effects.

- **Simple JavaScript**: Written inside <script> tags.

- **Variables**: var, let, const for storing data.

- **Functions**: Blocks of reusable code, e.g., function greet() { ... }

- **Conditions**: if, else, switch statements.

- **Loops**: for, while, do...while for repetition.

- **Advanced Scripting**: Includes arrays, objects, and event handling.

- **JavaScript Objects**: Built-in (Date, Math), and custom objects.

- **DOM**: Allows access to and manipulation of HTML elements.

- **Form Validation**: Ensures correct data before submission.

UNIT V: AJAX

- **Introduction**: AJAX (Asynchronous JavaScript and XML) allows web pages to update asynchronously.

- **Advantages**: Faster performance, no full page reload.


Web Technologies - Detailed Notes

- **Disadvantages**: Complex debugging, SEO issues.

- **Purpose**: Improve user experience by loading data dynamically.

- **AJAX-Based Web Application**: Uses XMLHttpRequest or Fetch API to get data.

- **Alternatives**: Traditional full-page reload, WebSockets for real-time apps.

**JavaScript & AJAX Details**:

- **Arrays**: Collection of items. let arr = [1, 2, 3]

- **Operators**: Arithmetic (+, -, *), logical (&&, ||), comparison (==, ===)

- **Statements**: if, switch, try-catch

- **Date & Time**: new Date(), getDate(), getHours()

- **Math**: Math.round(), Math.random()

- **Strings**: Length, concat, slice, etc.

- **Event Handling**: onclick, onsubmit, onmouseover, etc.

- **Form Properties**: Access using DOM (form.name.value)

**jQuery & AngularJS**:

- **jQuery**: A lightweight JavaScript library that simplifies DOM manipulation.

- **AngularJS**: A JavaScript framework for building single-page applications (SPA).

You might also like