Unit 3: HTML & DHTML

1. HTML (Contd)

a) URLs (Uniform Resource Locators)

 Definition: URLs are used to locate resources on the web. They consist of several parts:
o Protocol: Specifies the method used to access the resource (e.g., http, https, ftp).
o Domain: The address of the server (e.g., [Link]).
o Path: Location of the resource on the server (e.g., /images/[Link]).
o Query String: Optional parameters for dynamic content (e.g., ?id=123).

 Detailed Examples:

html
<!-- Absolute URL -->
<a href="[Link]

<!-- Relative URL -->

<a href="[Link]">About Us</a>

<!-- URL with Query String -->

<a href="[Link]?q=HTML">Search for HTML</a>
b) Images

 Definition: The <img> tag is used to display images. It does not have a closing tag.
 Attributes:
o src: Specifies the image file path.
o alt: Provides alternative text if the image cannot be displayed.
o width and height: Control the size of the image.
o title: Provides additional information about the image on hover.
 Detailed Example:

html
Copy code
<img src="[Link] alt="A scenic view" width="600"
height="400" title="Scenic View">
c) HTML Tables

 Definition: Tables are used to organize data into rows and columns. They are defined
with <table>, <tr>, <th>, and <td> tags.
 Attributes:
o border: Adds a border to the table.
o cellpadding: Adds space between cell content and borders.
 o cellspacing: Adds space between cells.
o colspan: Defines the number of columns a cell should span.
o rowspan: Defines the number of rows a cell should span.
 Detailed Example:

html
<table border="1" cellpadding="10" cellspacing="0">
<caption>Student Grades</caption>
<tr>
<th>Student</th>
<th>Grade</th>
</tr>
<tr>
<td>John Doe</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>B</td>
</tr>
<tr>
<td>Emily Johnson</td>
<td>C</td>
</tr>
</table>
d) Forms

 Definition: Forms collect user input and can send it to a server for processing.
 Elements:
o <form>: Encloses all form elements.
o <input>: Various types of input fields (text, password, checkbox, radio, etc.).
o <textarea>: Allows for multi-line text input.
o <select>: Creates a dropdown list.
o <button>: Used to create buttons for submitting or resetting the form.
 Detailed Example:

html
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<label for="gender">Gender:</label>
 <input type="radio" id="male" name="gender" value="male"> Male
<input type="radio" id="female" name="gender" value="female"> Female<br><br>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4"
cols="50"></textarea><br><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">
</form>
e) Special Characters

 Definition: Special characters are reserved symbols in HTML that must be encoded to be
displayed correctly.
 Common Entities:
o &amp;: & (ampersand)
o &lt;: < (less than)
o &gt;: > (greater than)
o &quot;: " (double quote)
o &apos;: ' (single quote)
 Detailed Example:

html
<p>The price is &lt; $100 &amp; includes taxes.</p>
f) Meta Tags

 Definition: Meta tags provide metadata about the HTML document, useful for search
engines and browsers.
 Common Meta Tags:
o Charset: Specifies the character encoding.
o Viewport: Controls layout on mobile browsers.
o Description: A brief description of the page.
o Keywords: Keywords for search engine optimization.
o Author: The name of the document author.
 Detailed Example:

html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A comprehensive guide to HTML and DHTML.">
<meta name="keywords" content="HTML, DHTML, Web Development">
<meta name="author" content="John Doe">

2. Interactivity Tools and Multimedia

a) Introduction

 Definition: Interactivity tools and multimedia enhance user experience on the web. They
enable features like animations, interactive forms, and integration of audio and video
elements.

b) DHTML (Dynamic HTML)

 Definition: DHTML uses a combination of HTML, CSS, and JavaScript to create

dynamic and interactive web pages. It allows for real-time changes to the content and
style without requiring a page reload.
 Components:
o HTML: Structure of the content.
o CSS: Styling the content.
o JavaScript: Adding interactivity and dynamic changes.
 Detailed Example: Changing content dynamically.

html
<button onclick="changeContent()">Click to Change Content</button>
<div id="content">Original Content</div>

<script>
function changeContent() {
[Link]('content').innerHTML = 'Content has been changed!';
}
</script>
c) Scripting Languages

 Definition: Scripting languages like JavaScript enable dynamic functionality on web

pages, such as form validation, animations, and asynchronous data loading.
 JavaScript:
o Definition: A high-level, interpreted scripting language used to create interactive
effects within web browsers.
o Features:
 Event Handling: Responding to user actions like clicks or keystrokes.
 DOM Manipulation: Changing the document structure, style, and content
dynamically.
 AJAX: Asynchronous data loading without reloading the page.
 Detailed Example: Form validation using JavaScript.

html
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
 </form>

<script>
function validateForm() {
const email = [Link]('email').value;
if (email === "") {
alert("Email must be filled out");
return false;
}
return true;
}
</script>
d) Java

 Definition: Java is a programming language used for building complex web-based

applications. Java applets, though largely outdated, were used to create interactive
features embedded in web pages.
 Applets:
o Definition: Java applets are small Java programs that run in a web browser.
o Security Concerns: Modern browsers have deprecated applets due to security
risks.
 Detailed Example (Outdated):

java
import [Link];
import [Link];

public class SimpleApplet extends Applet {

public void paint(Graphics g) {
[Link]("Hello, Java Applet!", 20, 20);
}
}

Note: Use of applets is not recommended in modern web development.

e) ASP (Active Server Pages)

 Definition: ASP is a server-side scripting language developed by Microsoft. It allows for

the creation of dynamic and interactive web applications by executing scripts on the
server and sending the results to the client's browser.
 Features:
o Server-Side Processing: ASP scripts are executed on the server, generating
HTML that is sent to the client.
o Integration with Databases: ASP can interact with databases to retrieve and
display data.
  Detailed Example:

asp
<%
Dim currentTime
currentTime = Now
[Link]("<p>The current server time is " & currentTime & "</p>")
%>

Note: ASP has largely been replaced by [Link].

3. JavaScript and DHTML Enhancements

a) JavaScript Basics

 Variables: Used to store data values.

Javascript:
let name = 'Alice';
const age = 25;

 Functions: Blocks of code designed to perform a particular task.

Javascript:
function greet(name) {
return 'Hello, ' + name + '!';
}

 Events: Actions that occur in the browser (e.g., click, load).

Javascript:
[Link]('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
b) CSS for Styling

 Definition: CSS (Cascading Style Sheets) is used to style HTML elements.

 Selectors: Target HTML elements to apply styles.

Css:
p{
color: blue;
}

 Box Model: Defines how elements are rendered on the page.

 Css:
div {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
c) Animations and Transitions

 CSS Animations: Define keyframes for animations.

Css:
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}

.slide-in {
animation: slide 2s ease-in-out;
}

 JavaScript Animations: Control animations dynamically.

javascript
Copy code
[Link]('myElement').[Link] = 'transform 2s ease-in-out';
[Link]('myElement').[Link] = 'translateX(100px)';