HTML Experiments Write-up (Exp 1 to 8)

Experiment 1: Student Registration Form with Text Formatting

Aim
To create a student registration form using HTML and display formatted text using various
HTML tags.

Theory
This experiment helps in understanding how to:
- Use HTML form elements to take user input.
- Use JavaScript to handle form submission.
- Use various text formatting tags.
- Display lists and blockquotes.

Tags Used
Tag / Concept Purpose
<form> Creates a form for user input
<input> Used for text fields, radio buttons, file
upload
<textarea> Multi-line text input
<select> Drop-down list
<option> Items inside a drop-down
<strong>, <em>, <u>, <mark> Text formatting tags
<ul>, <ol>, <li> Lists
<blockquote> Quoted content
<footer> Bottom section of page

Conclusion
This experiment demonstrates the use of form inputs and text formatting. It also uses
JavaScript to control form behavior.
Experiment 2: Department Webpage Design

Aim
To create a webpage for the Computer Science Department showing mission, vision, and
contact info.

Theory
This experiment helps in designing a department webpage using headings, paragraphs, lists,
and image links. CSS is used to style and format the layout.

Tags Used
Tag / Concept Purpose
<h1> to <h3> Headings for sections
<p> Paragraphs
<ul>, <li> Lists
<a> Hyperlinks
<img> Insert image
<style> CSS styling block
<br> Line breaks
class, id Used in CSS

Conclusion
The experiment focuses on creating a structured informational webpage using formatting
and layout tags.
Experiment 3: Regular Calculator Using HTML, CSS, and JavaScript

Aim
To design a regular calculator using HTML, CSS, and JavaScript.

Theory
The layout is made using HTML and styled with CSS. JavaScript handles operations like
addition, subtraction, multiplication, and division.

Tags Used
Tag / Concept Purpose
<input> Displays result
<button> Used for calculator keys
<div> Structure and grouping
<script> JavaScript code
onclick Event to trigger JS

Conclusion
This experiment builds a functional calculator by combining structure, design, and logic.
Experiment 4: Employee Registration with Validation and Animation

Aim
To create an employee registration form with animation and validation.

Theory
The form includes validation for email, mobile number, and salary. Background animations
and styling are done using CSS and a video background.

Tags Used
Tag / Concept Purpose
<video>, <source> Add animated background
<form>, <input> Form input and fields
@keyframes CSS animation
pattern, required Validation attributes
localStorage Store and display employee name
backdrop-filter Glass effect background

Conclusion
Teaches modern form design with client-side validation and stylish animations.
Experiment 5: String & Number Processor Using JS

Aim
To create a tool to find string length and reverse number digits.

Theory
HTML collects input, JavaScript processes it and updates the output dynamically. CSS styles
the card-based layout.

Tags Used
Tag / Concept Purpose
<input> Get user string or number
<button> Run JS functions
innerText Update output dynamically
split(), reverse(), join() JS functions to reverse string
hover (CSS) Interactive effects

Conclusion
Demonstrates basic string/number manipulation and responsive output updates using JS.
Experiment 6: Prime Number Finder Using JS

Aim
To display all prime numbers between a given range.

Theory
User inputs a start and end number. JS logic checks for primes and updates the page with
results. UI is styled with CSS.

Tags Used
Tag / Concept Purpose
<input> Get number range
<button> Trigger prime function
<script> Contains logic to find primes
isPrime() function Checks for prime numbers
id, class Identify and style elements

Conclusion
Helps understand loops, conditions, and JS logic in a real-time display scenario.
Experiment 7: Digital Clock using PHP and JS

Aim
To build a real-time clock using PHP for initial time and JS to update every second.

Theory
PHP is used to fetch server time, while JavaScript updates it live on screen. The interface is
styled with glowing effects and full-screen video.

Tags Used
Tag / Concept Purpose
<?php ?> PHP script block
date() PHP to get time
<script> Updates time per second
<video> Background visual
setInterval() Repeats JS task every 1s

Conclusion
Combines client-server tech to build a real-time, attractive digital clock.
Experiment 8: Login Dashboard with PHP Sessions

Aim
To create a login system with profile image upload and session handling.

Theory
Uses HTML/CSS for layout, PHP for login and image upload, and sessions for personalized
content.

Tags Used
Tag / Concept Purpose
<?php ?> Handles backend login
session_start() Starts session
<form method='post'> Login form
<input type='file'> Upload profile image
file_exists() Check uploaded image
$_SESSION Stores user session

Conclusion
Simulates a real-world login system with personalization, upload, and secure session-based
access.