You are on page 1of 26

HTML

1. Start
i.
ii.
iii.
iv.

your web page with an <html> tag


Add a heading
Add a title
Start the <body> section
Start a new paragraph
Create hyperlinks-

i.
ii.
iii.

Within the HTML document


To another URL
To a file that can be rendered in the browser.

CODE:
<html>
<head>
<title>Project List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>Computer Science Major Project Topics</h1>
<p>
<font face='garamond'>
Web based Applications for Insurance Services <br>
Cold Boot Attack<br>
Virtual Class Rooms<br>
Electronic Mail Server<br>
SUDOKU<br>
Bluetooth Hotspot<br/>
Result Alert System With E-mail and SMS<br>
Bug Tracking System<br>
Partial Face Recognition Using Core features Of The Face<br>
Face Recognition in e-attendance<br>
Online Examination System<br>
Chat Server<br>
Bluetooth Home Automation<br>
Creepy Crawler System<br>
</font>
</p>
<a href='#top'>Back to Top</a>&nbsp;&nbsp;
For more details visit
<a href=''>http://www.projecttopics.info/</a>&nbsp;&nbsp;
<a href="file:///C:\Users\ph\Pictures\0117001.jpg">Also see this!
</a>
</body>
</html>

OUTPUT:

2. Start your web page with an <html> tag


i.
ii.
iii.

Add a heading
Add a title
Start the <body> section
Create an unordered list; create an ordered list; use various bullet styles,
create nested lists; use the font tag in conjunction with lists; create
definition lists; use graphics as bullets.

CODE:
<html>
<head>
<title>Project List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>LISTS IN HTML</h1>
<ul>
<li><font size=10>T</font>his is the first item in unnumbered
list.</li>
<li>This is the next</li>
<li>The third item is itself a list:
<ul>
<li style="list-style-image:
url('images/sqpurple.gif');">First item in the nested list.</li>
<li style="list-style-image:
url('images/sqpurple.gif');">Second; be sure to end both lists!</li>
</ul>
</li>
</ul>
<ol type='a'>
<li><p>The first item in numbered list</p></li>
<li><p>They are also called ordered list</p></li>
</ol>
<dl>
<dt>HTML
<dd>HyperText Markup Language is a language that defines web
pages.</dd>
<dt>SGML
<dd>
Standarised General Markup Language is a class of markup
languages like HTML
</dd>
</dl>
</body>
</html>

OUTPUT:

3. Start your web page with an <html> tag


i. Add a heading
ii. Add a title
iii. Start the <body> section
a) Create a simple table; create borders and adjust border size; adjust
table cell spacing; change border color; change table background color
b) Align a new table on html page; perform cell text alignment; create
multi column table; display information about your academic qualification
into this table.

a. CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="10" bordercolor="green" bgcolor="yellow"
cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Priyanka Haldar</td>
<td>40000</td>
</tr>
<tr>
<td>Ankita Das</td>
<td>50000</td>
</tr>
</table>
</body>
</html>

OUTPUT:
Name

Salary

Priyanka Haldar

40000

Ankita Das

50000

b. CODE:
a <!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="3" bordercolor="100D96" bgcolor="B2D2DA"
cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>10th %</th>
<th>12th %</th>
<th>Graduation %</th>
</tr>
<tr>
<td>Priyanka Haldar</td>
<td align="right">87.6</td>
<td align="right">70</td>
<td align="right">77</td>
</tr>
</table>
</body>
</html>

OUTPUT:
Name
Priyanka Haldar

10th %

12th %
87.6

Graduation %
70

77

4. Start your web page with an <html> tag


i. Add a heading
ii. Add a title
iii. Add the <body> section
Create a frameset: use frame tags : create vertical(columns) frames;
create horizontal(rows) frames; create complex framesets; use the
hyperlink tag to target displaying an html page to another frame.

CODE:
Frametest.html
<html>
<head>
<title>Frame Samples</title>
</head>
<frameset cols="12%,*,12%">
<frame name="leftframe" src="left.html">
<frameset rows="14%,*,12%">
<frame name="topframe" src="top.html">
<frame name="mainframe" src="center.html">
<frame name="bottomframe" src="bottom.html">
</frameset>
<frame name="rightframe" src="right.html">
</frameset>
</html>

left.html
<html>
<head>
<title>Frames - Left</title>
</head>
<body bgcolor="lightgreen">
<p align=center>Left Frame</p>
</body>
</html>

top.html
<html>
<head><title>Frames - Top</title>
</head>
<body bgcolor="yellow">
<p align=center>Top Frame</p>
</body>
</html>

center.html
<html>
<head><title>Frame Samples Center</title>
</head>
<body bgcolor="lightblue">
<p align=center>Center Frame</p>
</body>
</html>

bottom.html
<html>
<head><title>Frames - Bottom</title>
</head>
<body bgcolor="lightyellow">
<p align=center>Bottom Frame</p>
</body>
</html>

OUTPUT:

5. Start your web page with an <html> tag


i. Add a heading
ii. Add a title
iii. Start the <body> section
Create a simple HTML form: use the input tag to create a text box, text
area box, checkbox, listbox, radio button, password field, popup menu,
hidden field. Use submit button. Create an admission form using the
above information.

CODE:
<html>
<head>
<title> ADMISSION FORM </title>
</head>
<body bgcolor="pink" style="text-align: center;">
<form name="input" action="frameset.html" method="get">
<div>
<h1> ADMISSION FORM </h1>
First Name: <input type="text" name="fname"/> <br/>
Last Name: <input type="text" name="lname"/> <br/>
Username: <input type="text" name="uname"/> <br/>
Password: <input type="password" name="pwd" size="10"
maxlength="10"/> <br/>
Address: <br/><textarea rows="3" cols="20">Enter your address
here...</textarea> <br/>
Date of Birth: <input type="text" name="dob"/> <br/>
Phone no.: <input type="text" name="phone"/> <br/>
Gender: <input type="radio" name="sex" value="Male"/>Male
<input type="radio" name="sex" value="Female"/>Female
<br/>
Qualification:
<input type="checkbox" name="sub" value="10th"/>10th
<input type="checkbox" name="sub" value="12th"/>12th
<input type="checkbox" name="sub" value="BTech"/>BTech
<input type="hidden" name="Language" value="English"><br/>
<input type="submit" value="SUBMIT" />
</div>
</form>
</body>
</html>

OUTPUT:

XML

1.

Write a XML program that will create an XML document which contains
your mailing address.

CODE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="email.css" type="text/css"?>
<!DOCTYPE EMAIL[
<!ELEMENT email (label, address)>
<!ELEMENT label (#PCDATA)>
<!ELEMENT address (#PCDATA)>
]>
<email>
<label> My mailing address:</label>
<address>priyankahaldar56@gmail.com</address>
</email>

email.css
label
{
margin-top: 100px;
font-size: 36px;
font-weight: bold;
vertical-align:baseline;
color: #00beeb;
text-align: center;
display: block;
}
address
{
font-size: 28px;
font-family: Georgia;
vertical-align:baseline;
text-align: center;
display: block;
}

OUTPUT:

2.

Write a XML program that will create an XML document which


contains description of three book category.

CODE:

<?xml version="1.0" encoding="UTF-8"?>


<?xml-stylesheet type="text/css" href="BookDetails.css"?>
<bookstore>
<book category="CRIME">
<name>CRIME</name>
<title lang="en">Sad Cypress</title>
<author>Agatha Christie</author>
<year>2001</year>
<price>120.00</price>
</book>
<book category="CHILDREN">
<name>CHILDREN</name>
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>450.00</price>
</book>
<book category="ROMANCE">
<name>ROMANCE</name>
<title lang="en">Other Words for Love</title>
<author>Lorraine Zago Rosenthal </author>
<year>2011</year>
<price>650</price>
</book>
</bookstore>

BookDetails.css
book
{

float: left;

width: 260px;
height: 135px;
padding: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-right: 20px;
background: url(images/templamteo_service_bg.png) right center norepeat;
color: #fff;
font-size: 16px;
text-decoration: none;
}
name
{
text-align: center;
color: #fff;
font-size: 36px;
font-weight: 700;
text-decoration: none;

}
title,author,year,price
{
display: block;
}
title
{
font-family:Book Antiqua;
font-size:20px;
font-weight: bold;
}
author
{
font-style: italic;
}
year
{
font-family: Verdana;
}
price
{
font-family:Garamaond;
}

OUTPUT:

3. Create an XML document that contains the name and price per pound of coffee beans.
i) In your XML document mention all properties of XML declaration.
ii) The root element has name <coffee_bean>
iii) Create nested elements for different types of coffee.
iv) Validate the document and if any parsing error is present, fix them.

CODE:
<?xml version="1.0"?>
<coffee_bean>
<coffee type="plant">
<name>Arbica</name>
<production>75-80%</production>
<caffeine>0.8-1.4%</caffeine>
<price>3</price>
</coffee>
<coffee type="plant">
<name> Robusta </name>
<production>20-25%</production>
<caffeine>1.7-4%</caffeine>
<price>5</price>
</coffee>
</coffee_bean>

4. Create an XML document that contains airline flight information.


i) In your XML document mention all properties of XML declaration.
ii) The root element has name <airlines>
iii) Create three nested <carrier> elements for three separate airlines. Each element should include a
name attribute.

iv) Within each <carrier> nest at least two <flight> ,each of which contains departure_city, destination_
city, fl_no, dept_time.
v) Validate the document and if any parsing error is present fix them.

CODE:
<?xml version="1.0"?>
<Airlines>
<carrier name="Airindia">
<flights>
<flight1>
<departure_city>Delhi</departure_city>
<destination_city>London</destination_city>
<fl_no>AI5788</fl_no>
<departure_time>21:55pm</departure_time>
</flight1>
<flight2>
<departure_city>Chennai</departure_city>
<destination_city>singapore</destination_city>
<fl_no>AI5725</fl_no>
<departure_time>23:15pm</departure_time>
</flight2>
</flights>
</carrier>
<carrier name="Fly Emirates">
<flights>
<flight1>
<departure_city>Dubai</departure_city>
<destination_city>Los Angeles</destination_city>
<fl_no>FE8898</fl_no>
<departure_time>01:05am</departure_time>
</flight1>
<flight2>
<departure_city>Abu dhabi</departure_city>
<destination_city>Lisbon</destination_city>
<fl_no>FE5778</fl_no>
<departure_time>20:45pm</departure_time>
</flight2>
</flights>
</carrier>
<carrier name="Delta Airways">
<flights>
<flight1>
<departure_city>Newyork</departure_city>
<destination_city>London</destination_city>
<fl_no>DA4689</fl_no>
<departure_time>02:30am</departure_time>
</flight1>
<flight2>
<departure_city>washington</departure_city>
<destination_city>Paris</destination_city>
<fl_no>DA7853</fl_no>
<departure_time>17:50pm</departure_time>
</flight2>
</flights>
</carrier>
</Airlines>

5. Create an XML version of your resume. Include elements such as your name and position desired. Nest
each of your former employers within an <employer> element. Also, nest your educational experience
within an <education> element.
Create any other nested elements that you deem appropriate, such as <references> or <spcl_skills>
elements.

CODE:
CODE:<?xml version="1.0"?>
<Resume>
<freshers>
<name><b>Priyanka Haldar</b></name>
<address>51, Station Road, Kolkata-700074</address>
<email>phaldar08@gmail.com</email>
<education>
<percentage_in_12th_std>70%</percentage_in_12th_std>
<percentage_in_10th_std>87.6%%</percentage_in_10th_std>
<percentage_in_BTech>77%</percentage_in_BTech>
</education>

<special_skills>
<professional_skills>
1Comprehensive problem solving abilities.
2.Self motivated, focused and dedicated .
3.Ability to deal with peoplediplomatically.
4.Willingness to learn
</professional_skills>
<Technical_skills>C,JAVA(core),PHP</Technical_skills>
</special_skills>
<Position_Desired>Software Developer</Position_Desired>
</freshers>
<employers>
<name><b>Akash Ghosh</b></name>
<address>Vill+P.O-Begri,P.S-Domjur,Dist-Howrah,state-West
Bengal</address>
<email>with.akash97@gmail.com</email>
<education>
<percentage_in_12th_std>82%</percentage_in_12th_std>
<percentage_in_10th_std>79%</percentage_in_10th_std>
<percentage_in_BTech>82%</percentage_in_BTech>
</education>
<special_skills>
<professional_skills>
1Comprehensive problem solving abilities.
2.Self motivated, focused and dedicated .
3.Ability to deal with peoplediplomatically.
4.Willingness to learn
</professional_skills>
<Technical_skills>C,JAVA(core),C#</Technical_skills>
</special_skills>
<previous_company_name>XYZ Technology</previous_company_name>
<projects>
<No_Of_projects_done>2</No_Of_projects_done>
<genre>software developer</genre>
</projects>
<Position_Desired>software Developer</Position_Desired>
</employers>
</Resume>

APPLETS

1) Create a banner using Applet


/* <applet code="movingBanner" height=50 width=300> </applet> */
import java.awt.*;
import java.applet.*;
publicclass movingBanner extends Applet implements Runnable
{
String msg=" A moving Banner. ";
char ch;
boolean stopFlag= true;
Thread t= null;
publicvoid start(){
t = new Thread(this);
stopFlag=false;
t.start();
}
publicvoid run(){
for(;;){
try{
repaint();
Thread.sleep(250);
ch = msg.charAt(0);
msg = msg.substring(1,msg.length());
msg = msg + ch;
if(stopFlag)
break;
}catch(InterruptedException e) {}
}
}
publicvoid stop(){
stopFlag=true;
t = null;
}
publicvoid paint(Graphics g){
g.drawString(msg,60,30);
}
}

2) Create different shapes using applet


import java.awt.*;
import java.applet.*;
publicclass LineRect extends Applet
{
publicvoid paint(Graphics g)
{
g.drawLine(10,10,50,50);
g.drawRect(10,60,40,30);
g.setColor(Color.blue);
g.fillRect(60,10,30,80);
g.setColor(Color.green);
g.drawRoundRect(10,100,80,50,10,10);
g.setColor(Color.yellow);
g.fillRoundRect(20,110,60,30,5,5);
g.setColor(Color.red);
g.drawLine(100,10,230,140);
g.drawLine(100,140,230,10);
g.drawString("Line Rectangles Demo",65,180);
g.drawOval(230,10,200,150);
g.setColor(Color.blue);
g.fillOval(245,25,100,100);
}
};

3) How to fill colors in shapes using applet?


import java.applet.*;
import java.awt.*;
public class fillColor extends Applet{
public void paint(Graphics g){
g.drawRect(300,150,200,100);
g.setColor(Color.yellow);
g.fillRect( 300,150, 200, 100 );
g.setColor(Color.magenta);
g.drawString("Rectangle",500,150);
}
}

4) How to go to a link using applet?


import
import
import
import

java.applet.*;
java.awt.*;
java.net.*;
java.awt.event.*;

public class testURL_NewWindow extends Applet


implements ActionListener{
public void init(){
String link_Text = "google";
Button b = new Button(link_Text);
b.addActionListener(this);
add(b);
}
public void actionPerformed(ActionEvent ae){
Button source = (Button)ae.getSource();
String link = "http://www."+source.getLabel()+".com";
try {
AppletContext a = getAppletContext();
URL url = new URL(link);
a.showDocument(url,"_blank");
}
catch (MalformedURLException e){
System.out.println(e.getMessage());
}
}
}

5) How to display image using applet?


/*<applet code="SummerApplet.class" width="1000" height="300">
</applet>*/
import
import
import
import
import
import

java.awt.*;
java.io.File;
java.io.IOException;
javax.swing.*;
javax.imageio.ImageIO;
java.io.IOException;

public class SummerApplet extends JApplet


{
Image img;
public void init()

{
String imgSrc"jlaw\\0.gif";
try
{
img = ImageIO.read(new File(imgSrc));
}
catch(IOException ex)
{
ex.printStackTrace();
}
}
public void paint(Graphics g)
{
g.drawImage(img,3,50,null);
}
}

6) How to create an eventlistener using applet?


Following example demonstrates how to create a basic Applet having buttons to
add & subtract two nos. Methods used here are addActionListener() to listen to an
event(click on a button) & Button() constructor to create a button.

import java.applet.*;
import java.awt.event.*;
import java.awt.*;
public class EventListeners extends Applet
implements ActionListener{
TextArea txtArea;
String Add, Subtract;
int i = 10, j = 20, sum =0,Sub=0;
public void init(){
txtArea = new TextArea(10,20);
txtArea.setEditable(false);
add(txtArea,"center");
Button b = new Button("Add");
Button c = new Button("Subtract");
b.addActionListener(this);
c.addActionListener(this);
add(b);
add(c);
}
public void actionPerformed(ActionEvent e){
sum = i + j;
txtArea.setText("");
txtArea.append("i = "+ i + "\t" + "j = " + j + "\n");
Button source = (Button)e.getSource();

if(source.getLabel() == "Add"){
txtArea.append("Sum : " + sum + "\n");
}
if(i >j){
Sub = i - j;
}
else{
Sub = j - i;
}
if(source.getLabel() == "Subtract"){
txtArea.append("Sub : " + Sub + "\n");
}
}
}

You might also like