1.	Make a basic list using a href  property Example <div id="navigation">     <ul>             <li><a href="#">Home</a></li>             <li><a href="#">Countries</a></li>             <li><a href="#">People</a></li>             <li><a href="#">About Us</a></li>             <li><a href="#">Contact</a></li>      </ul> </div>	Output ·         Home ·         Countries ·         People ·         About Us ·         Contact
2.	To remove the HTML bullets set the “ list-style-type” to “none” CSS Code #navigation ul {     list-style-type: none; }	Output Home Countries People About Us Contact
3.	Remove paddings and margins CSS Code #navigation ul {     list-style-type: none;     padding: 0;     margin: 0; }	Output Home Countries People About Us Contact
4.	In order to get the list items in one line we use  “inline” property for “a” element CSS Code #navigation ul {     list-style-type: none;     padding: 0;     margin: 0; } #navigation ul li {     display: inline; }	Output
5.	Remove the text underline. Navigations do not have underlines. For this set the “text-decoration” property of the “a” element as none. CSS Code #navigation ul li {     display: inline; } #navigation ul li a {     text-decoration: none; } Output
6.	Add padding around list items so that it looks like they are inside a box. CSS Code #navigation ul li {     display: inline; } #navigation ul li a {     text-decoration: none;     padding:  .2em 1em; } Output
7.	Add background color  to the list items. Also change the text color to make it readable. CSS Code #navigation ul li a {     text-decoration: none;     padding:  .2em 1em;     color: #fff;     background-color: #036; } Output
8.	Add rollover color to the lists. Use “a:hover” to set a second background color, as a rollover state. CSS Code #navigation ul li a {     text-decoration: none;     padding:  .2em 1em;     color: #fff;     background-color: #036; } #navigation ul li a:hover {       color: #fff;       background-color: #369; } Output

<code><ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">The product</a></li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>

        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>

            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>

    </li>
    <li>
        <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>

            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>

            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>

        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>

        </ul>
    </li>
</ul></code>

The CSS

This is where the magic happens--we use CSS to transform a series of nested <ul>s into a smooth, easy to use, neat and self-contained dropdown menu.
<code><span class="code-comment">/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */</span>
<span class="code-comment">/*------------------------------------*\
    NAV
\*------------------------------------*/</span>
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    <span class="code-comment">/* Clear floats */</span>
    float:left;
    width:100%;
    <span class="code-comment">/* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */</span>
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

<span class="code-comment">/*--- DROPDOWN ---*/</span>
#nav ul{
    background:#fff; <span class="code-comment">/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */</span>
    background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
    list-style:none;
    position:absolute;
    left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
}
#nav ul li{
    padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
    float:none;
}
#nav ul a{
    white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
}
#nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span>
    left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
}
#nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span>
    text-decoration:none;
}
#nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
    background:#333;
}</code>

filetype: comments.html


<html>
<head>
<title>comment box</title>
</head>

<body>
<form action="sabincomment.php" method="post">
name:<input type="text" id="name" name="name"><br>
comment:<textarea id="comment"name="comment" rows=4 cols=60>your text here</textarea>
<input type="submit" id="submit" name="submit" value="comment">
</form>
http://webstufflearning.blogspot.com/
</body>
</html>



filetype:sabincomment.php


<?
$name=$_POST['name'];
$comment=$_POST['comment'];
$con=mysql_connect("localhost","root","");
mysql_select_db("share",$con);
$sql="INSERT INTO comment(name , comment) VALUES ('".$name."','".$comment."')";
$result=mysql_query($sql);
mysql_close();
if($result){
header('location:http://localhost/comments/display.php');
}

?>

http://webstufflearning.blogspot.com/






filetype:display.php

<?php
$text = $_GET['Comments']; 



mysql_connect ("localhost", "user", "password") or die ('Error: ' . mysql_error());
mysql_select_db("databasename") or die ('Data error:' . mysql_error());

$query="INSERT INTO KeepData (player_data)VALUES ('$text')";

mysql_query($query) or die ('Error updating database' . mysql_error());




?> 

 <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <textarea id="Comments" name="Comments">
 example text
 </textarea>
<input type="submit" name="mysubmit" value="Save Post" />
 </form>

Chapter 2. PHP

In this chapter, we introduce the PHP scripting language. PHP is similar to high-level languages such as C, Perl, Pascal, FORTRAN, and Java, and programmers who have experience with any of these languages should have little trouble learning PHP. This chapter serves as an introduction to PHP; it's not a programming guide. We assume you are already familiar with programming in a high-level language.
The topics covered in this chapter include:

• PHP basics, including script structure, variables, supported types, constants, expressions, and type conversions
• Condition and branch statements supported by PHP, including if, if...else, and the switch statements
• Looping statements
• Arrays and array library functions
• Strings and string library functions
• Regular expressions
• Date and time functions
• Integer and float functions
• How to write functions, reuse components, and determine the scope and type of variables
• An introduction to PHP object-oriented programming support
• Common mistakes made by programmers new to PHP, and how to solve them

Programmers new to PHP should read Section 2.1, which describes the basic structure of a PHP script and its relationship to HTML, and includes discussion of how PHP handles variables and types. The two sections that follow, Section 2.2 and Section 2.3, deal with conditional statements and looping structures and should be familiar material. We then present a short example that puts many of the basic PHP concepts together.
The remainder of the chapter expands on the more advanced features of PHP, presents a reference to selected library functions, and discusses some of the common mistakes that programmers make when learning PHP. This material can be examined briefly, and used later as a reference while reading Chapter 4 to 13 and while programming in PHP. However, programmers new to PHP should consider reading the beginning of the Section 2.5 and Section 2.6 sections to understand the way PHP supports these concepts, as there are important differences from other languages.
We don't attempt to cover every function and every library that are supported by PHP. However, we provide brief descriptions of the supported libraries in Appendix E. In later chapters, we discuss more specialized library functions that support the topics and techniques presented here.

---

1.5. Our Case Study		2.2. Conditions and Branches

---

Copyright © 2003 O'Reilly & Associates. All rights reserved.