Showing posts with label HTML&CSS. Show all posts
Showing posts with label HTML&CSS. Show all posts

Tuesday, 12 March 2019

Learning PHP, MySQL & JavaScript, 5th Edition With jQuery, CSS & HTML5 (Learning PHP, MYSQL, Javascript, CSS & HTML5)

           , ,      7 comments   

Build interactive, data-driven websites with the potent combination of open-source technologies and web standards, even if you have only basic HTML knowledge. With this popular hands-on guide, you'll tackle dynamic web programming with the help of today's core technologies: PHP, MySQL, JavaScript, jQuery, CSS and HTML5.

Explore each technology separately, learn how to use them together and pick up valuable web programming practices along the way. At the end of the book, you'll put everything together to build a fully functional social networking site, using XAMPP or any development stack you choose.

  • Learn PHP in-depth, along with the basics of object-oriented programming
  • Explore MySQL, from database structure to complex queries
  • Use the MySQLi Extension, PHP's improved MySQL interface
  • Create dynamic PHP web pages that tailor themselves to the user
  • Manage cookies and sessions and maintain a high level of security
  • Master the JavaScript language-and enhance it with jQuery
  • Use Ajax calls for background browser/server communication
  • Acquire CSS2 and CSS3 skills for professionally styling your web pages
  • Implement all of the new HTML5 features, including geolocation, audio, video and the canvas
Buy :

Learning PHP, MySQL & JavaScript with j Query, CSS & HTML5 Paperback – 2015 by Robin Nixon  

PDF Download :

Learning PHP, MySQL & JavaScript with j Query, CSS & HTML5 Paperback – 2015 by Robin Nixon 

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

                1 comment   


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?

                1 comment   


—>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

                1 comment   


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

                1 comment   



–> 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

                1 comment   


  • 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

                1 comment   


  • 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

                1 comment   


  • 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

                1 comment   


  • 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

                1 comment   


  • 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>
Codecademy Code Foundations

Popular Posts

Categories

Android (23) AngularJS (1) Assembly Language (2) Books (10) C (75) C# (12) C++ (81) Course (1) Data Strucures (4) Downloads (1) Engineering (13) flutter (1) FPL (17) Hadoop (1) HTML&CSS (38) IS (25) Java (89) Leet Code (4) Pandas (1) PHP (20) Projects (19) Python (397) R (69) Selenium Webdriver (2) Software (14) SQL (27)

365 Days Python Coding Challenge

365 Days Python Coding Challenge

Popular Posts

Registration Form for Classes

Name

Email *

Name *

Message *

Free Courses

Can you guess the output of the second piece of code?🐍

Posted by Python Coding on Tuesday, 16 February 2021

Popular Posts

Join Us
Codecademy Computer Science

Online

Join Us