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).
