HTML INTRODUCTION:
HTML (Hypertext Markup Language) is the standard markup language used to create and
design web pages. It consists of a series of elements, represented by tags, which structure
the content of a webpage. HTML tags are used to define different parts of a document, such
as headings, paragraphs, links, images, and more.
HTML tags typically come in pairs: an opening tag and a closing tag. The opening tag
denotes the beginning of an element, while the closing tag signifies the end.
1. Structuring Content: HTML provides a structured way to organize and present
content on the web. It allows you to define headings, paragraphs, lists, and other
elements, making your content more readable and meaningful.
2. Hyperlinking: HTML enables the creation of hyperlinks, allowing users to navigate
between different pages and resources on the internet.
The <a> (anchor) tag is used for this purpose.
3. Incorporating Media: HTML supports the embedding of various media elements,
such as images (<img>), audio (<audio>), and video (<video> ).
This enhances the multimedia experience on webpages.
4. Forms and User Input: HTML includes form elements ( <form>, <input>, <button>,
etc.) that facilitate the collection of user input.
This is crucial for interactive websites and applications.
5. Semantics and Accessibility: HTML tags carry semantic meaning, which improves
accessibility for users and helps search engines understand the content.
Proper use of tags enhances the overall user experience.
6. Cross-Browser Compatibility: HTML is a standardized language supported by all
major web browsers.
This ensures that web pages display consistently across different platforms and
devices.
7. Responsive Design: HTML, in conjunction with CSS (Cascading Style Sheets) and
JavaScript, allows for the creation of responsive and adaptive web designs that adjust
to different screen sizes and orientations.
1) SIMPLE HTML TAGES:
Document Structure:
<html> : Root element of an HTML document.
<head> : Contains meta-information about the HTML document.
<title>: Sets the title of the HTML document.
<body> : Contains the content of the HTML document.
Text Formatting:
<p>: Paragraph.
<h1> to <h6>: Headings (1 being the largest and 6 being the smallest).
<strong> : Strong importance (bold).
<em> : Emphasis (italic).
Lists:
<ul> : Unordered list.
<ol> : Ordered list.
<li> : List item.
Links:
<a>: Anchor (used for creating hyperlinks).
Media:
<img>: Image.
<audio>: Audio
<video>:Video
Tables:
<table>: Defines a table.
<tr> : Defines a table row.
<th> : Defines a table header cell.
<td> : Defines a table data cell.
Forms:
<form> : Defines an HTML form.
<input>: Input field.
<textarea>: Text area.
<select> : Dropdown list.
<button> : Button.
Semantic Markup:
<div>: Division or section.
<span> : Inline container.
<header> : Defines a header for a document or a section.
<footer> : Defines a footer for a document or a section.
<nav>: Defines a navigation menu.
<article>: Defines an article.
<section>: Defines a section in a document.
<aside>: Defines content aside from the content (like a sidebar).
Others:
<br> : Line break.
<hr> : Horizontal rule.
<meta> : Provides metadata about the HTML document
Basic example
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document with some basic tags.</p>
</body>
</html>
Output
List Example
<!DOCTYPE html>
<html>
<head>
<title>List Example</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</body>
</html>
Output:
Table Example
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<h2>Sample Table</h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Output:
FORM
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br>
<label for="state">State:</label>
<select id="state" name="state">
<option value="AndhraPradesh">AndhraPradesh</option>
<option value="Tamilnadu">Tamilnadu</option>
<option value="Kerala">kerala</option>
</select>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST")
// Retrieve form data
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$gender = isset($_POST["gender"]) ? $_POST["gender"] : "";
$interests = isset($_POST["interests"]) ? implode(", ", $_POST["interests"]) : "";
$country = $_POST["country"];
// Format the data
$data = "Name: $name\nEmail: $email\nMessage: $message\nGender: $gender\nInterests:
$interests\nCountry: $country\n\n";
// Store the data in a text file
$file = fopen("C:\Users\Shanti\Desktop\csmb java lab\html\formdata.txt", "a");
fwrite($file, $data);
fclose($file);
echo "Form submitted successfully!";
else
echo "Invalid request!";
?>
Output:
2) Difference Between Application and Applet
Application" and "applet" are two terms that are often associated with programming
and software development, but they have distinct meanings and use cases. Here's
the difference between the two:
Application:
An application, short for "application software," refers to a standalone
software program designed to perform a specific set of tasks or functions for
end-users.
Applications are typically installed on a user's device (such as a computer or
mobile device) and are executed locally on that device.
Applications can range from simple programs like text editors and calculators
to complex software like word processors, web browsers, and video games.
Examples of applications include Microsoft Word, Adobe Photoshop, Google
Chrome, and mobile apps like Instagram or Twitter.
2. Applet:
An applet is a small application or software component designed to be
embedded within a larger software environment.
Applets are often written in languages like Java or JavaScript and are
commonly used in web development.
Unlike standalone applications, applets run within a host environment, such as
a web browser or an applet viewer.
They are typically used to add specific functionalities to a web page or a larger
application.
Historically, Java applets were commonly used for interactive and dynamic
content on web pages. However, due to security concerns and changes in
technology, their usage has decreased over time.
APPLET INTRODUCTION
Applet is a special type of program that is embedded in the webpage to generate the
dynamic content. It runs inside the browser and works at client side.
Hierarchy of Applet
How to run an Applet?
There are two ways to run an applet
1. By html file.
2. By appletViewer tool (for testing purpose).
Simple example of Applet by html file:
To execute the applet by html file, create an applet and compile it. After that create an
html file and place the applet code in html file. Now click the html file.
1. //First.java
2. import java.applet.Applet;
3. import java.awt.Graphics;
4. public class First extends Applet{
5.
6. public void paint(Graphics g){
7. g.drawString("welcome",150,150);
8. }
9.
10. }
myapplet.html
1. <html>
2. <body>
3. <applet code="First.class" width="300" height="300">
4. </applet>
5. </body>
6. </html>
Simple example of Applet by appletviewer tool:
To execute the applet by appletviewer tool, create an applet that contains applet tag
in comment and compile it. After that run it by: appletviewer First.java.
Now Html file is not required but it is for testing purpose only.
1. //First.java
2. import java.applet.Applet;
3. import java.awt.Graphics;
4. public class First extends Applet{
5.
6. public void paint(Graphics g){
7. g.drawString("welcome to applet",150,150);
8. }
9.
10. }
11. /*
12. <applet code="First.class" width="300" height="300">
13. </applet>
14. */
To execute the applet by appletviewer tool, write in command prompt:
c:\>javac First.java
c:\>appletviewer First.java
3) APPLET CLASS
1. Introduction to Applet Class:
The Applet class is part of the java.applet package in Java.
Applets were historically used for creating dynamic and interactive content on
web pages.
2. Extending Applet Class:
To create an applet, a Java class needs to extend the Applet class.
Example: public class MyCustomApplet extends Applet { ... }
3. Applet Lifecycle:
Applets have a lifecycle with methods such as init() , start(), stop(),
destroy().
init() : Initialization method called when the applet is first loaded.
start(): Method called when the applet is started or resumed.
stop() : Method called when the applet is stopped or paused.
destroy(): Cleanup method called when the applet is about to be unloaded.
4. Graphics and Drawing in Applet:
Applets use the Graphics class for drawing on the applet surface.
Commonly overridden method: paint(Graphics g) for custom drawing.
5. HTML Embedding:
Applets are typically embedded in HTML pages using the <applet> tag.
Example: <applet code="MyCustomApplet.class" width="300"
height="200"></applet>
6. AppletViewer Tool:
Java provides the appletviewer tool for testing and running applets without
a web browser..
7. Example Applet Code:
8. import java.applet.Applet;
9. import java.awt.Graphics;
10.
11. public class MyCustomApplet extends Applet
12. {
13. public void paint(Graphics g)
14. {
15. // Drawing and rendering code goes here
16. }
}g) { // Drawing and rendering code goes here } }
4) APPLET STRUCTURE
The structure of a Java applet:
1. Import Statements:
Include the necessary import statements for the Applet class and other required classes.
; import java.applet.Applet;
import java.awt.Graphics;
2. Applet Class Declaration:
Create a class that extends the Applet class.
public class MyCustomApplet extends Applet {
3. Initialization Method (init()):
Override the init() method to perform initialization tasks when the applet is first loaded.
public void init()
{
// Initialization code goes here
} here }
4. Start Method (start()):
Override the start() method to start or resume the applet when it becomes active.
{ // public void start()
// Start or resume code goes here
}Start or resume code goes here }
5. Paint Method (paint(Graphics g)):
Override the paint() method to define how the applet should be rendered. The Graphics
object is used for drawing.
public void paint(Graphics g)
{
// Drawing and rendering code goes here
} g) { // Drawing and rendering code goes here }
6. Stop Method (stop()):
Override the stop() method to stop or pause the applet when it becomes inactive.
public void stop() {
// Stop or pause code goes here
} { // Stop or pause code goes here }
7. Destroy Method (destroy()):
Override the destroy() method to perform cleanup tasks when the applet is about to be
unloaded.
public void destroy() {
// Cleanup code goes here
} public void destroy() {
}
8. Applet Lifecycle Overview:
The applet goes through a lifecycle: init() (initialization), start() (start or resume),
paint() (rendering), stop() (stop or pause), and destroy() (cleanup).
9. HTML Embedding:
Applets are typically embedded in HTML using the <applet> tag.
<applet code="MyCustomApplet.class" width="300" height="200"></applet>
12. Example Applet Structure:
import java.applet.Applet;
import java.awt.Graphics;
public class MyCustomApplet extends Applet {
public void init() {
// Initialization code goes here
public void start() {
// Start or resume code goes here
public void paint(Graphics g) {
// Drawing and rendering code goes here
}
public void stop() {
// Stop or pause code goes here
public void destroy() {
// Cleanup code goes here
5) AN EXAMPLE APPLET PROGRAM
import java.applet.Applet;
import java.awt.Graphics;
public class HelloApplet extends Applet {
public void paint(Graphics g) {
g.drawString("Hello, Applet!", 20, 20);
<html>
<body>
<applet code="HelloApplet.class" width="300" height="200"></applet>
</body>
</html>
6) APPLET LIFECYCLE
applet>
Applet Life Cycle in Java
In Java, an applet is a special type of program embedded in the web page to generate
dynamic content. Applet is a class in Java.
The applet life cycle can be defined as the process of how the object is created, started,
stopped, and destroyed during the entire execution of its application. It basically has
five core methods namely init(), start(), stop(), paint() and destroy().These methods are
invoked by the browser to execute.
Along with the browser, the applet also works on the client side, thus having less
processing time.
Methods of Applet Life Cycle
There are five methods of an applet life cycle, and they are:
o init(): The init() method is the first method to run that initializes the applet. It can be
invoked only once at the time of initialization. The web browser creates the initialized
objects, i.e., the web browser (after checking the security settings) runs the init()
method within the applet.
o start(): The start() method contains the actual code of the applet and starts the applet.
It is invoked immediately after the init() method is invoked. Every time the browser is
loaded or refreshed, the start() method is invoked. It is also invoked whenever the
applet is maximized, restored, or moving from one tab to another in the browser. It is
in an inactive state until the init() method is invoked.
o stop(): The stop() method stops the execution of the applet. The stop () method is
invoked whenever the applet is stopped, minimized, or moving from one tab to
another in the browser, the stop() method is invoked. When we go back to that page,
the start() method is invoked again.
o destroy(): The destroy() method destroys the applet after its work is done. It is invoked
when the applet window is closed or when the tab containing the webpage is closed.
It removes the applet object from memory and is executed only once. We cannot start
the applet once it is destroyed.
o paint(): The paint() method belongs to the Graphics class in Java. It is used to draw
shapes like circle, square, trapezium, etc., in the applet. It is executed after the start()
method and when the browser or applet windows are resized.
Sequence of method execution when an applet is executed:
1. init()
2. start()
3. paint()
Sequence of method execution when an applet is executed:
1. stop()
2. destroy()
Applet Life Cycle Working
o The Java plug-in software is responsible for managing the life cycle of an applet.
o An applet is a Java application executed in any web browser and works on the client-
side. It doesn't have the main() method because it runs in the browser. It is thus created
to be placed on an HTML page.
o The init(), start(), stop() and destroy() methods belongs to the applet.Applet class.
o The paint() method belongs to the awt.Component class.
o In Java, if we want to make a class an Applet class, we need to extend the Applet
o Whenever we create an applet, we are creating the instance of the existing Applet class.
And thus, we can use all the methods of that class.
Flow of Applet Life Cycle:
These methods are invoked by the browser automatically. There is no need to call them
explicitly.
Syntax of entire Applet Life Cycle in Java
1. class TestAppletLifeCycle extends Applet {
2. public void init() {
3. // initialized objects
4. }
5. public void start() {
6. // code to start the applet
7. }
8. public void paint(Graphics graphics) {
9. // draw the shapes
10. }
11. public void stop() {
12. // code to stop the applet
13. }
14. public void destroy() {
15. // code to destroy the applet
16. }
17. }
7) PAINT() , UPDATE() , REPAINT()
1.paint(Graphics g) Method:
Purpose:
The paint() method is responsible for rendering the graphical content of the
applet.
It is automatically called by the system whenever the applet needs to be displayed or
refreshed.
Parameters:
It takes a Graphics object as a parameter, which is used for drawing graphics on the
applet's surface.
Responsibilities:
Perform drawing operations using the provided Graphics object.
Display graphics, text, or any visual content on the applet.
Example:
public void paint(Graphics g)
{
// Drawing and rendering code goes here
}
2.update(Graphics g) Method:
Purpose:
The update() method is called automatically before the paint() method.
It is responsible for clearing the applet area and preparing it for repainting.
Parameters:
It also takes a Graphics object as a parameter, just like the paint() method.
Responsibilities:
Clear the applet area to prepare it for repainting.
This method is often overridden to avoid flickering during repainting.
Example:
public void update(Graphics g)
{
// Clear the applet area before repainting
clearAppletArea(g);
paint(g);
}
3. repaint() Method:
Purpose:
The repaint() method is used to request a repaint of the applet.
It does not immediately call the paint() method; instead, it schedules a repaint
event.
Usage:
Call repaint() when you want to trigger the repainting of the applet, such as when
the state of the applet has changed.
Example:
// Call repaint to trigger the repainting of the applet
repaint();
// Call repaint to trigger the repainting of the applet repaint();
Note:
The system will eventually call update() and then paint() after a call to
repaint().
import java.applet.Applet;
import java.awt.Color;
import java.awt.Graphics;
public class PaintUpdateRepaintApplet extends Applet
{
private String message = "Hello, Applet!";
private Color textColor = Color.BLACK;
public void init()
{
// Initialization code goes here
}
public void start()
{
// Start or resume code goes here
}
public void paint(Graphics g)
{
// Drawing and rendering code goes here
g.setColor(textColor);
g.drawString(message, 20, 20);
}
public void update(Graphics g)
{
// Clear the applet area before repainting
clearAppletArea(g);
paint(g);
public void stop()
{
// Stop or pause code goes here
}
public void destroy()
{
// Cleanup code goes here
}
private void clearAppletArea(Graphics g)
{
// Clear the applet area with a white background
g.setColor(Color.WHITE);
g.fillRect(0, 0, getWidth(), getHeight());
}
public void changeMessageAndColor(String newMessage, Color newColor)
{
// Method to change the message and text color
message = newMessage;
textColor = newColor;
repaint(); // Request a repaint to reflect the changes
}
}
