TYPEOFCSS

TYPEOFCSS.
html
<html>
<head>
<title>CSS example for internal,External and Embedded styles</title>
</head>
<h3> <center>SELECT THE STYLE TO BE SEEN</CENTER></h3>
<ul>
<li> <a href = "embedded.html" >EMBEDDED STYLES</a>
</li>
<li> <a href = "inline.html" >INLINE STYLES</a>

</li>
<li> <a href = "external.html" >EXTERNAL STYLES</a>

</li>
</ul>
</body>
</html>
THREE.HTML
<html>
<body bgcolor="#ffaacc">
<style type="text/css">
em{"background-color:#ff0000;color:red"}
h1{font-family:Monotype Corsiva}
p{font-size=18pt}
blue{color:blue}
</style>
<body>
<h1 class="blue"> web technologies</h1>
</body>
</html>
SECOND.HTML
<html>
<body bgcolor="#ffaacc">
<table align="center" cellspacing="50">
<tr> <td>
<a href="login.html" target="f3">CSE </a></td></tr>
<tr><td>
<a href="regestration.html" target="f3">ECE</a></td></tr>
<tr><td>
<a href=" " target="f3"> EEE </a></td></tr>
</body>
</html>
REGISTRATION.html
<html>
<head>
<title>REGISTRATION FORM</title>
<script type="text/javascript">
function validate()
{
if(f1.t1.value.length==0)
{
alert("first name cannot be empty");
f1.t1.focus();
return false;
}
{
alert("Last name cannot be empty");
f1.t2.focus();
return false;
}
{
alert("Surname cannot be empty");
f1.t3.focus();
return false;
{
alert("Fathers name cannot be empty");
f1.t4.focus();
return false;
}
{
alert("Username cannot be empty");
f1.t5.focus();
return false;
}
{
alert("password cannot be empty");
f1.t6.focus();
return false;
}
{
alert("class cannot be empty");
f1.t7.focus();
return false;
}
}
</script>
</head>
<body bgcolor= "#cyan">
<form name="f1" method="get" action="entered.html" onsubmit="return
validate()">
<center>
<h1>REGISTRATION FORM</h1>
<table>
<tr><th> First name: </th><td><input type=text name =t1 ></td></tr>
<tr><th> Lastname: </th><td><input type=text name=t2></td></tr>
<tr><th> Surname:</th><td><input type=text name=t3></td></tr>
<tr><th> Fathers name:</th><td><input type=text name=t4></td></tr>
<tr><th> Usersname:</th><td><input type=text name=t5></td></tr>
<tr><th> Password:</th><td><input type=text name=t6></td></tr>
<tr><th> Class:</th><td><input type=text name=t7></td></tr>
<tr><th> Qualification:</th><td><select name=Qualification><option
selected>MTech</option>
<option> BTech</option> <option>
MSc</option><option>MCA</option>
</select> </td></tr>
<tr><th> Address: </th><td><textarea rows=6 cols=30 >
</textarea></td></tr>
<tr><th> Gender: </th><td> <input type = radio name =r1>Male<input type
= radio name =r1 > Female </td> </tr>
<tr><th> DOB: </th> <td> <select name=day><option
selected>1</option><option>13</option><option>15</option><option>18</opt
ion><option>25</option></select></td>
<td><select name=month><option
selected>jan</option><option>april</option><option>may</option><option>A
ug</option><option>sep</option></select></td>
<td><select name=year><option
selected>1980</option><option>1982</option><option>1998</option><option>
2000</option></td>
</tr>
<tr><th> Email id: </th> <td> <input type =text name="t8"></td></tr>
<tr><th> Nationality: </th><td> <input type =text name=t9></td></tr>
<tr><th> Religion: </th><td> <input type =text name =t10></td></tr>
<tr><th> Caste: </th><td> <input type = radio name =r1> OC<input type=
radio name =r1> BC <input type= radio name= r1>SC</td></tr>
<tr><td><input type= submit value="Submit"></td>
<td><input name=clear value="Clear" type="reset"></td></tr>
</table>
</form>
</body>
</html>
LOGIN.HTML
<html>
<head>
<title>Login form</title>
<link rel=stylesheet href=s1.css type="text/css">
<script type="text/javascript">
function init()
{
f1.t1.focus();
}
function validate()
{
if((f1.t1.value.length==0)&&(f1.t2.value.length==0))
{
alert( "User name and pwd missing");
f1.t1.focus();
return false;
}
{
alert("User name missing");
f1.t1.focus();
return false;
}
{
alert("Password missing");
f1.t2.focus();
return false;
}
if(f1.t1.value.length<6)
{
alert("User name must be atleast 6 characters");
f1.t1.focus();
return false;
}
if(f1.t2.value.length>6)
{
alert("Password must not exceed 6 characters");
f1.t2.focus();
return false;
}
var str=f1.t1.value.substr(0,1);
var a=str.search(/[a-z]/);
if(a==0)
{
alert("valid user name");
f1.t1.focus();
return true;
}
else
{
alert("User name must start with small alphabet");
f1.t1.focus();
f1.t1.select();
return false
}
}
</script>
</head>
<body bgcolor="#cyan">
<center>
<h1><br>LOGIN PLEASE </h1>
<form name="f1" method="get" action="regestration.html" onsubmit="return
validate()" >
<h1><br>Dept of IT </h1>
<table>
<tr><th>LOGIN </th><td><input type="text" name="t1" ></td></tr>
<tr><th>PASSWORD </th><td><input type="password" name="t2" ></td></tr>
<tr><td><input type="submit" value="submit"></td>
<td><input type="submit" value="New user"></td>
<td><input name=clear value="clear" type="reset"></td></tr>
</table>
</form>
</body>
</html>
INLINE.HTML
<html>
<head>
<title>Inline Styles</title>
</head>
<body>
<p> Here is some text</p>
<p style="font-size=20pt">
cascading stylesheets</p>
<p style = "font-size:30pt;color:#0000ff">

This is used to apply the inline styles to a paragraph text </p>
</body>
</html>
FRAMESHALIMA.HTML
<html>
<frameset rows="20%,*" frameborder="1">
<frame src="one.html" noresize="noresize">
<frameset cols="20%,*" >
<frame src="second.html" noresize="noresize">

<frame src="three.html" noresize="noresize" name="f3">
</frameset>
</frameset>
</html>
EXTERNAL.HTML
<html>
<head>
<title>External Style Sheet</title>
<link rel = "stylesheet" type = "text/css" href="ssformat.css">
</head>
<body>
<h1>External Style sheets</h1>
<ul>
<li> FIRST</ul>
<a href="typeofcss.html">Go back</a>
</body>
</html>
EMBEDED.html
<html>
<head>
<title>Embedded Styles</title>
</head>
<body>
<style type = "text/css">
em{"background-color: #ff0000;color:red"}
h1 {font-family:arial,sans-script}
p{font-size = 16pt}
blue{color:blue}
</style>
<h: class="blue"> a heading</h1>
<p> here is <em> some text </em>
using Embedded styles</p>
</body>
</html>
PRODUCTS.xml
<?xml version="1.0"?>
<product-catalog xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="products.xsd">
<product sku="123456" name="The Product">
<description locale="en_US">An excellent product.</description>
<description locale="es_MX">Un producto excellente.</description>
<price locale="en_US" unit="USD">99.95</price>
<price locale="es_MX" unit="MXP">9999.95</price>
</product>
</product-catalog>
PRODUCTS.dtd
<!ELEMENT product-catalog (product+)>
<!ELEMENT product (description+, price+)>
<!ATTLIST product
sku ID #REQUIRED
name CDATA #REQUIRED
>
<!ELEMENT description (#PCDATA)>
<!ATTLIST description
locale CDATA #REQUIRED
>
<!ELEMENT price (#PCDATA)>
<!ATTLIST price
locale CDATA #REQUIRED
unit CDATA #REQUIRED
>
Emp_internal.xml
<!DOCTYPE emproot [
<!ELEMENT name (#PCDATA) >
<!ELEMENT dept (#PCDATA) >
]>
<emproot>
<name>Mark</name>
<dept>sales</dept>
</emproot>
Emp_external.xml
<!DOCTYPE emproot SYSTEM "emp.dtd">
<emproot>
<name>Mark</name>
<dept>sales</dept>
</emproot>

TYPEOFCSS

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TYPEOFCSS

Uploaded by

Copyright:

Available Formats

TYPEOFCSS.

<li> <a href = "inline.html" >INLINE STYLES</a>

<li> <a href = "external.html" >EXTERNAL STYLES</a>

<p style = "font-size:30pt;color:#0000ff">

<frame src="second.html" noresize="noresize">

You might also like