Sunday 15 April 2018

Student Registration Form

                No comments   

Program:-

<html>
<head>
<script type=”text/javascript” src=”validate.js”></script>
</head>
<body>
<form action=”#” name=”StudentRegistration” onsubmit=”return(validate());”>
<table cellpadding=”2″ width=”20%” bgcolor=”99FFFF” align=”center”
cellspacing=”2″>
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id=”textname” size=”30″></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type=”text” name=”fathername” id=”fathername”
size=”30″></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type=”text” name=”paddress” id=”paddress” size=”30″></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type=”text” name=”personaladdress”
id=”personaladdress” size=”30″></td>
</tr>
<tr>
<td>Sex</td>
<td><input type=”radio” name=”sex” value=”male” size=”10″>Male
<input type=”radio” name=”sex” value=”Female” size=”10″>Female</td>
</tr>
<tr>
<td>City</td>
<td><select name=”City”>
<option value=”-1″ selected>select..</option>
<option value=”New Delhi”>NEW DELHI</option>
<option value=”Mumbai”>MUMBAI</option>
<option value=”Goa”>GOA</option>
<option value=”Patna”>PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name=”Course”>
<option value=”-1″ selected>select..</option>
<option value=”B.Tech”>B.TECH</option>
<option value=”MCA”>MCA</option>
<option value=”MBA”>MBA</option>
<option value=”BCA”>BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name=”District”>
<option value=”-1″ selected>select..</option>
<option value=”Nalanda”>NALANDA</option>
<option value=”UP”>UP</option>
<option value=”Goa”>GOA</option>
<option value=”Patna”>PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name=”State”>
<option value=”-1″ selected>select..</option>
<option value=”New Delhi”>NEW DELHI</option>
<option value=”Mumbai”>MUMBAI</option>
<option value=”Goa”>GOA</option>
<option value=”Bihar”>BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type=”text” name=”pincode” id=”pincode” size=”30″></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type=”text” name=”emailid” id=”emailid” size=”30″></td>
</tr>
<tr>
<td>DOB</td>
<td><input type=”text” name=”dob” id=”dob” size=”30″></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type=”text” name=”mobileno” id=”mobileno” size=”30″></td>
</tr>
<tr>
<td><input type=”reset”></td>
<td colspan=”2″><input type=”submit” value=”Submit Form” /></td>
</tr>
</table>
</form>
</body>
</html>

Entry Level Form

                No comments   


Program:-
<html>
<head>
<title>Entry Level Form</title>
</head>
<body>
<form>
<ul class=”form-style-1″>
<li><label>Full Name <span class=”required”>*</span></label><input type=”text” name=”field1″ class=”field-divided” placeholder=”First” />&nbsp;
<input type=”text” name=”field2″ class=”field-divided” placeholder=”Last” /></li>
<br>
<li>
<label>Email <span class=”required”>*</span></label>
<input type=”email” name=”field3″ class=”field-long” />
</br>
</li>
<br>
<li>
<label>Subject</label>
<select name=”field4″ class=”field-select”>
<option value=”Select”>select</option>
<option value=”MatLab”>MatLab</option>
<option value=”Java”>Java</option>
<option value=”HTML”>HTML</option>
<option value=”CSS”>CSS</option>
<option value=”C and C++”>C and C++</option>
<option value=”General Question”>General</option>
</select>
</br>
</li>
<br>
<li>
<label>Your Message <span class=”required”>*</span></label>
<textarea name=”field5″ id=”field5″ class=”field-long field-textarea”></textarea>
</br>
</li>
<br>
<li>
<input type=”submit” value=”Submit” />
</br>
</li>
</ul>
</form>
</body>
</html>

Personal Details Form

                No comments   


Program:-

<html>
<head>
<title>Personal Details Form</title>
</head>
<body>
<div class=”form-style-3″>
<form>
<fieldset><legend>Personal Details</legend>
<label for=”field1″><span> Full Name <span class=”required”>*</span></span>
<input type=”text” class=”input-field” name=”field1″ value=”” /></label>
<label for=”field2″><span>Email <span class=”required”>*</span></span>
<input type=”email” class=”input-field” name=”field2″ value=”” /></label>
<label for=”field3″><span>Phone <span class=”required”>*</span></span>
<input type=”text” class=”input-field” name=”field3″ value=”” /></label>
<label for=”field4″><span>Subject</span><select name=”field4″ class=”select-field”>
<option value=”Select”>Select</option>
<option value=”MatLab”>MatLab</option>
<option value=”JAVA”>Java</option>
<option value=”HTML and CSS”>HTML and CSS</option>
<option value=”C and C++”>C and C++</option>
<option value=”Any Question”>Any Question</option>
</select></label>
</fieldset>
<fieldset><legend>Message</legend>
<label for=”field6″><span>Message <span class=”required”>*</span></span><textarea name=”field6″ class=”textarea-field”></textarea></label>
<label><span>&nbsp;</span><input type=”submit” value=”Submit” /></label>
</fieldset>
</form>
</div>
</body>
</html>

Information Form

                No comments   



Program:-

<html>
<head>
<title>Information Form</title>
</head>
<body>
<form class=“form-style-9”>
<ul>
<li>
<input type=“text” name=“field1” class=“field-style field-split align-left” placeholder=“Name” />
<input type=“email” name=“field2” class=“field-style field-split align-right” placeholder=“Email” />
</li>
<li>
<input type=“text” name=“field3” class=“field-style field-split align-left” placeholder=“Phone” />
<input type=“url” name=“field4” class=“field-style field-split align-right” placeholder=“Website” />
</li>
<li>
<input type=“text” name=“field3” class=“field-style field-full align-none” placeholder=“Subject” />
</li>
<li>
<textarea name=“field5” class=“field-style” placeholder=“Message”></textarea>
</li>
<li>
<input type=“submit” value=“Send Message” />
</li>
</ul>
</form>
</body>
</html>

Website Design in HTML and CSS

                No comments   


<html>
<head>
<title>Castor Classes</title>
<style type=”text/css”>
body{
background-color:gray;
font-family:Arial,Helvetica,sans-serif;
}
*
{
margin:0;
padding:0;
}
#wrapper{
border:1px solid;
width:970px;
padding:2px;
background-color:gray;
}
#header{
border:1px solid;
width:100%;
background-color:white;
}
#header ul{
list-style-type:none;
}
#header ul li{
border:1px solid;
float:left;
color:sky;
background-color:green;
width:190px;
text-align:center;;
height:30px;
line-height:30px;
}
#header ul li a{
text-decoration:none;
}
#header ul li:hover{
background-color:blue;
}
#image{
width:100px;
}
#bodypart{
border:1px solid;
margin-top:10px;
}
#bodyleft{
border:1px solid;
float:left;
width:250px;
}
#bodyleft h2{
background-color:pink;
color:sky;
padding:4px;
}
#bodyleft ul{
list-style-type:none;
}
#bodyleft ul li{
border:1px solid;
padding:5px;
height:30px;
line-height:20px;
}
#bodyleft ul li a{
color:black;
text-decoration:none;
}
#bodyleft ul li:hover{
color:blue;
background-color:yellow;
}
#bodyright{
border:1px solid;
width:1070px;
float:left;
margin-left:2px;
padding-right:10px;
}
#bodyright h2{
background-color:black;
color:red;
padding:2px;
}
#bodyright p{
padding:6px;
padding-right:10px;
font:20px;
text-align:justify;
}
#footer{
border:1px solid;
background-color:pink;
color:blue;
text-decoration:none;
padding:1px;
margin-top:1px;
}
#footerright{
border:0px solid;
width:150px;
margin-left:10px;
float:right;
margin-bottom:3px;
padding:1px;
text-decoration:none;
}

</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<ul>
<li><a href=”#”> Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Courses</a></li>
<li><a href=”#”>Contact</a></li>
<li><a href=”#”>Online Video</a></li>
</ul>
<div id=”image”></div>
<img src=”html/image/online.jpg”/></div>
</div>
<div id=”bodypart”>
<div id=”bodyleft”>
<h2>Courses</h2>
<ul>
<li><a href=”http://castorclasses.com/courses/matlab-program-2/”>MatLab </a></li>
<li><a href=”http://castorclasses.com/courses/c-language/”>C Language</a></li>
<li><a href=”http://castorclasses.com/php-programs/”>PhP </a></li>
<li><a href=”http://castorclasses.com/courses/java/”>Java </a></li>
<li><a href=”http://castorclasses.com/html-and-css/”>HTML and CSS </a></li>
<li><a href=”#”> C++</a></li>
</ul>
</div>
<div id=”bodyright”>
<h2>Welcome to our online Courses (Castor Classes)</h2>
<p>This is provide a online classes for all subject.Online courses are revolutionizing formal education,
and have opened a new genre of outreach on cultural and scientific topics. These courses deliver a series of lessons to a web browser or mobile device,
to be conveniently accessed anytime, anyplace.</p>
<p>An online course is designed as a built environment for learning.Deciding to study online can bring up a whole range of emotions –
excitement, pride and maybe a little apprehension –
but don’t worry. With Open Colleges,
you’ll have all the flexibility and support you need to get through your course and create a new future.
Find out more about the benefits of studying online with us below,
discover more about how online learning works, or simply go ahead and get started.</p>
<p>This is provide a online classes for all subject.Online courses are revolutionizing formal education, but don’t worry. With Open Colleges,
you’ll have all the flexibility and support you need to get through your course and create a new future.
Find out more about the benefits of studying online with us below,
and have opened a new genre of outreach on cultural and scientific topics. These courses deliver a series of lessons to a web browser or mobile device,
to be conveniently accessed anytime, anyplace.</p>
</div>
<br clear=”all”/>
</div>
<div id=”footer”>
<h3>About Us</h3>
<li><a href=”http://castorclasses.com/contact-us/about-us/introduction/”>Introduction</li>
<li><a href=”http://castorclasses.com/contact-us/about-us/mission-and-vision/”>Mission and Vision</li>
<li><a href=”http://castorclasses.com/contact-us/about-us/management/”>Managements</li>
<div id=”footerright”>
<h4>Thank You</h4>
<li>Castor Classes</li>
</div>
<br clear=”all”/>
</div>
</div>
</body>
</html>

How to set style of list in CSS?

                No comments   


—>This is use for give some decoration of list.

Syntax:-

ul{
list-style-type:circle OR squre OR upper roman OR upper alpha;
list-style-image:url(‘folder name’);
}
ul li{
line-height:30px;
}
ul li:hover{
margin-left:10px;
}
ul li a{
text-decoration:none;
}

Example:-

<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/CSS”>
ul{
list-style-type:circle OR squre OR upper roman OR upper alpha;
list-style-image:url(‘folder name’);
}
ul li{
line-height:30px;
}
ul li:hover{
margin-left:10px;
}
ul li a{
text-decoration:none;
}
</head>
<body>
<ul>
<li>
<a href=”#”>HOME</a></li>
<a href=”#”>ABOUT US</a></li>
<a href=”#”>SERVICES</a></li>
<a href=”#”>CONTACT US</a></li>
</UL>
</body>
</html>

How to make element floating from CSS?

                No comments   


 Image arrangement

Example:-

<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/CSS”>
.image{border:1px solid;
wedth:30px;
height:100px;
float:left;
margin:left;
}
</head>
<body>
<div class=”image”>
<img src=”flower.jpg” width=”100″ height=”100″/>
</div>
<div class=”image”>
<img src=”flower.jpg” width=”100″ height=”100″/>
</div>
<div class=”image”>
<img src=”flower.jpg” width=”100″ height=”100″/>
</div>
<br clear=”all” // This is use for next line.
</body>
</html>

Show Display Inline function in CSS

                No comments   


Example:-

<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/CSS”>
#div{border:1px solid;
wedth:30px;
background-color:blue;
color:white;
display-inline:block;
</head>
<body>
<div id=”div1> The Contents goes here
</div>
</body>
</html>

Negation in CSS with Display tag

                No comments   



–> Here, we are see a navigation of menu.  
Syntax:-
li{display:inline;
padding-left:20px;
padding-right:20px;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/CSS”>
li{display:inline;
padding-left:20px;
padding-right:20px;
}
</head>
<body>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul>
</div>
</body>
</html>

Visibility and Display Text in CSS

                No comments   


  • We are see a visibility of any div and display of div.
Syntax:-
#div2{
border:1px solid;
width:30px;
height:100px;
Visibility:visible;   //This is a use a visibility.
}
#div3{
border:1px solid;
width:30px;
height:100px;
Display:none;     // Here, This is use a display syntax.
}
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css”>
#div1{
border:1px solid;
width:30px;
height:100px;
}
#div2{
border:1px solid;
width:30px;
height:100px;
Visibility:visible;
}
#div3{
border:1px solid;
width:30px;
height:100px;
Display:none;
}
</head>
<body>
<div1 id=”div1″></div>
<div1 id=”div2″></div>
<div1 id=”div3″>
</div>
</body>
</html>

How to use div in Center?

                No comments   


  • Here we are use a any heading on center.
Syntax:-
#div1{border:1px solid;
width:400px;
height:70px;
background-color:blue;
margin:auto;
}
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#div1{border:1px solid;
width:400px;
height:70px;
background-color:blue;
margin:auto;
}
</style>
</head>
<body>
<div id=”div1″>
Hello  Friends!!!!
</div>

</body>
</html>

Padding in CSS

                No comments   


  • Padding is a space between edges of element and the element contents.
Syntax:-
#div1{border:1px solid;
width:400px;
height:70px;
background color:blue;
color:white;
padding-left:10px;
padding-top:10px; OR padding:20px;
}
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#div1{border:1px solid;
width:400px;
height:70px;
background color:blue;
color:white;
padding-left:10px;
padding-top:10px; OR padding:20px;
}
</style>
</head>
<body>
<div id=”div1″>
Hello  Friends!!!!
</div>

</body>
</html>

Margin Property in CSS

                No comments   


  • In this slide we are see a how to arrange  two box in CSS.
Syntax:-
#div1{border:1px solid;
width:400px;
height:70px;
margin-top:100px;
margin-left:100px;
}

Example:-

<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#div1{border:1px solid;
width:400px;
height:70px;
margin-top:100px;
margin-left:100px;
}
#div{border:1px solid;
width:400px;
height:70px;
margin-bottom:100px;
margin-right:100px;
}
</style>
</head>
<body>
<div id=”div1″>
Hello  Friends!!!!
</div>
<div id=”div2″>
Hello  Friends!!!!
</div>
</body>
</html>

Overflow Property in CSS

                No comments   


  • In this slide we are see a overflow property in CSS.
Syntax:-
#test{border:1px solid;
width:400px;
height:70px;
overflow:auto/scroll;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#test{border:1px solid;
width:400px;
height:70px;
overflow:auto/scroll;
}
</style>
</head>
<body>
<div id=”test”>
Hello  Friends!!!!
</div>
</body>
</html>

Width and Height in CSS

                No comments   


  • Here, we are set a width and height of paragraph in CSS.
Syntax:-
#test{
border:1px solid;
width:400px;
height:70px;  OR
Max-height:70px
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
#test{
border:1px solid;
width:400px;
height:70px;  OR
Max-height:70px
}
</style>
</head>
<body>
<p>
Hii My name is Castor Class.I am provide a online Classes.
</p>
</body>
</html

CSS Border Property

                No comments   


  • In this slide we are set a property of border in Heading.
Syntax:-
h2{border:1px dash/double/dotted/inset/outset green;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h2{border:1px dash/double/dotted/inset/outset green;
}
</style>
</head>
<body>
<h1>CASTORCLASSES</h1>
</body>
</html>

Class Selector

                No comments   


  • Class Selector is use one or more element.
  • Here, we are see a multiple text in different form.
Syntax:-
.para{
color:white;
background color:blue;
}
.services{
color:white;
background:black;
width:140px;
height:30px;
margin:10px;
}

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
.para{
color:white;
background color:blue;
}
</style>
</head>
<body>
<p class=”para”>This is paragraph1</p>
<p class=”para”>This is paragraph2</p>
<p>This is paragraph3</p>
</body>
</html>

Example2:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
.services{
color:white;
background color:black;
width:140;
height:30px;
margin:10px;
</style>
</head>
<body>
<div class=”services”>
Hardware
</div>
<div class=”services”>
Software
</div>
<div class=”services”>
Networking
</div>
</body>
</html>

Saturday 14 April 2018

Id Selector / Use a Header and Footer

                No comments   


  • Id selector is a single element specified.
  • Here, we are see a div command.
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
# p1{color:red;}
#header{
border:1px solid;
}
</style>
</head>
<body>
<div id=”header”>
This is a header
</div>
<p id=”p1″>this is paragraph</div>
</body>
</html>

How to Link Style in CSS?

                No comments   


  • Here, we are see a all Link decoration.
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
a{color:blue;text-transform:uppercase;}
a:visited{color:green;}
a:active{color:white;background-color:black;}
</style>
</head>
<body>
<a href=”#”>This is link 1.</a>
</body>
</html>

Text Decoration / Align / Text indent

                No comments   


  • Here, we are decorate a plain text.
Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
a{
color:red;   //Set Color
text-align:left;     //Set Align
text-decoration:uppercase/lowercase/blink;   //Set text decoration
text-transform:uppercase/lowercase/capitalize;   //Set text transform
text-indent:100px;       //Set text indent
}
</style>
</head>
<body>
<a href=”#”>This is My first Paragraph </a>
</body>
</html>

Background image

                No comments   


  • Set background image.
Example:-
<html>
<head>
<title>CastorClass.com</title>
<style type=”text/css”>
body{background-image:url (‘image/image.jpg’);    ///This is set a image link.
background-repeat:no repeat; //This is use a not repeat image.
background-position:top center;  OR background-position:top right;   //This is set a image position
}
</style>
</head>
<html>

Use background color

                No comments   


  • This is use for background color.

Example:-
<!Doctype html>
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
body{background-color:red;}
h1{bacground-color:red;
color:white;
}
p<background-color:yello;color:pink;}
</style>
</head>
<body>
<h1>hello everyone</h1>
<p>This is very good</p>
</body>
</html>

How to use CSS in HTML?

                No comments   



we are already study in starting CSS.In this slide we will use a CSS is coding is another file.Because we are write same file that is very complicated.

Example:-
<html>
<head>
<title>CastorClasses.com</title>
<style type=”text/css>
h1{color:red; bacground:red;}        //This is write a another File.
</style>
</head>
<body>
<h1>hello everyone</h1>
</body>
</html>

Popular Posts

Categories

AI (27) Android (24) AngularJS (1) Assembly Language (2) aws (17) Azure (7) BI (10) book (4) Books (115) C (77) C# (12) C++ (82) Course (62) Coursera (179) coursewra (1) Cybersecurity (22) data management (11) Data Science (91) Data Strucures (6) Deep Learning (9) Django (6) Downloads (3) edx (2) Engineering (14) Excel (13) Factorial (1) Finance (5) flutter (1) FPL (17) Google (19) Hadoop (3) HTML&CSS (46) IBM (25) IoT (1) IS (25) Java (92) Leet Code (4) Machine Learning (44) Meta (18) MICHIGAN (5) microsoft (3) Pandas (3) PHP (20) Projects (29) Python (747) Python Coding Challenge (208) Questions (2) R (70) React (6) Scripting (1) security (3) Selenium Webdriver (2) Software (17) SQL (40) UX Research (1) web application (8)

Followers

Person climbing a staircase. Learn Data Science from Scratch: online program with 21 courses

Translate

Data Processing Using Python (Free Course)

Data Processing Using Python (Free Course)
Data Processing Using Python

Popular Posts

LAND YOUR FIRST JOB IN TECH

LAND YOUR FIRST JOB IN TECH
Earn a tech salary without coding Land a job or get your money back* Mentorship, Internship and 1:1 Career Coaching

Deep Learning

Free Python Books

Person climbing a staircase. Learn Data Science from Scratch: online program with 21 courses

365 Days Python Coding Challenge

365 Days Python Coding Challenge

Registration Form for Classes

Name

Email *

Name *

Message *

Cybersecurity for Everyone (Free Course)

Cybersecurity for Everyone (Free Course)
Cybersecurity for Everyone (Free Course)

Top 10 Python Data Science book

Free Courses

Blog Archive

Popular Posts

Join Us

Free Web Development using Python

Join Us