UNIT 1: Fundamentals of Web Designing
1.1 Introduction to HTML Page Formatting Basics
HTML is the fundamental language used to create and structure web pages. It consists of
elements that define the structure and content of a webpage.
Basic HTML Document Structure:
o Every HTML document begins with a DOCTYPE declaration, followed
by the <html> root element. Inside the <html> tag, we have the
<head> and <body> sections.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
o <head>: Contains metadata, styles, and links to external
resources.
o <body>: Contains the visible content of the page.
1.2 Structure of HTML Documents
HTML uses tags to structure content, and attributes to provide additional information about
elements.
Basic Tags:
o <h1> to <h6>: Headings, with <h1> being the highest level.
o <p>: Paragraph.
o <a href="">: Hyperlink.
o <img src="path">: Image.
Example:
<h1>Welcome to my Website</h1>
<p>This is an introduction paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
Attributes: HTML elements can have attributes like href, src, alt, etc.
o <a>: href is used to link to a different page or resource.
o <img>: src specifies the image path, and alt provides alternative
text for the image.
1.3 Advanced Web Page Formatting
Advanced formatting uses CSS to style HTML elements and make the page visually appealing.
CSS Basics:
o You can include CSS within the HTML using the <style> tag in the
<head> or link to an external .css file.
<style>
body {
font-family: Arial, sans-serif;
background-color: lightblue;
}
h1 {
color: darkblue;
}
</style>
Responsive Web Design: Ensures web pages look good on all screen sizes, achieved
using media queries.
@media screen and (max-width: 600px) {
body {
background-color: lightgreen;
}
}
1.4 Web Graphics Basics
Web images can be included using the <img> tag. Common formats are:
GIF: Supports animation, good for simple graphics.
JPEG: Compressed format for photos with a focus on smaller file size.
PNG: Lossless compression, supports transparent backgrounds.
Example of including an image:
<img src="image.png" alt="Description of image">
1.5 Creating Images
To create images, you can use graphic design software (e.g., Photoshop, GIMP) or tools like
Canvas in HTML5, but HTML itself doesn't create images; it embeds them.
UNIT 2: Web Page Forms
2.1 Creating Web Page Forms
Forms are essential for collecting user input. They are created using the <form> element.
Basic Form:
<form action="submit_form.php" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
Form Elements:
o <input type="text">: Allows users to type text.
o <textarea>: Multiline text input.
o <button>: Can trigger an action, such as submitting the form.
2.2 Form Elements
Here’s how you can use various form input types:
Text Input: For entering single-line text.
<input type="text" name="name">
Password Input: For entering passwords.
<input type="password" name="password">
Radio Buttons: For selecting one option from many.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Checkboxes: For multiple selections.
<input type="checkbox" name="interests" value="coding"> Coding
<input type="checkbox" name="interests" value="design"> Design
2.3 Script and No Script Elements
<script>: Embeds JavaScript in the webpage.
<script>
alert("Welcome to the site!");
</script>
<noscript>: Displays content when scripts are disabled in the browser.
<noscript>
JavaScript is required to view this page.
</noscript>
UNIT 3: Fundamentals of Building HTML Documents
3.1 Building HTML Documents and Forms
Forms allow users to input data, and the data can be processed or
stored when submitted to a server.
<form method="POST" action="process_form.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
3.2 VBScript Basics
VBScript is a lightweight scripting language mainly used for web-
based applications within Internet Explorer.
Example of a simple VBScript alert:
<script type="text/vbscript">
MsgBox "Hello, World!"
</script>
3.3 HTML Tables and Frames
Tables allow displaying data in a structured manner.
Basic Table:
<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
</table>
Frames: Divide a browser window into multiple sections.
<frameset rows="50%, 50%">
<frame src="page1.html">
<frame src="page2.html">
</frameset>
UNIT 4: Web Programming with VBScript
4.1 VBScript Functions
Functions allow us to encapsulate reusable logic in VBScript.
Example:
Function Multiply(a, b)
Multiply = a * b
End Function
4.2 Window Script Components
VBScript uses objects like Window, Document, and Form to interact with the webpage.
Example of manipulating the document:
document.getElementById("myElement").innerHTML = "New Content"
UNIT 5: Scripting in JavaScript
5.1 JavaScript Basics
JavaScript is used to create dynamic and interactive content in web pages. It's mainly used for
form validation, DOM manipulation, and event handling.
Example of a simple script:
<script>
alert("Welcome to JavaScript!");
</script>
5.2 Working with the DOM
The DOM (Document Object Model) represents the page structure, and JavaScript interacts
with it to change elements dynamically.
Accessing an element:
document.getElementById("header").innerHTML = "New Header";
Changing styles:
document.getElementById("myElement").style.color = "blue";
5.3 Window Objects
JavaScript interacts with window objects like alert(), location, and document.
Example of using window.location to redirect:
window.location.href = "https://www.example.com";
