HTML CSS Java and PHP

Document Sample
HTML CSS Java and PHP Powered By Docstoc
					HTML NOTES
1. FOR HEADING
   <html>
   <body>
   <h1>i am naseer ud din from kasuri city</h1>
   <h1>systems limited lahore</h1>
   </body>
   </html>
2. FOR HTML LINKS
   Open in same window
   <a href="http://www.w3schools.com">
   This is a link</a>
   Open in New window
   <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
   Create an image Link
   <p>Create a link of an image:
   <a href="naseer.jpg">
   <img src="naseer.jpg" alt="HTML tutorial" width="32" height="32" />
   </a></p>
   Image Align in Text
   <p>An image
   <img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />with
   align="bottom".</p>
   Image in start of paragraph
   <p>
   <img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
   A paragraph with an image. The align attribute of the image is set to "left". The image
   will float to the left of this text.
   </p>

   Create Hyperlink with image
   <p>Create a link of an image:
   <a href="default.asp">
   <img border="1" src="smiley.gif" alt="HTML tutorial" width="32" height="32"
   /></a></p>
   3. FOR PARAGRAPH
      <p>This is a paragraph</p>
      <p>This is another paragraph</p>

   4. HTML IMAGES
      1. <img src="w3schools.jpg" width="104" height="142" />
      2. <img border="1" src="/images/pulpit.jpg" alt="Pulpit rock" width="304"
         height="228" />
      3. <img src="baby.gif" alt="Pulpit rock" width="904" height="728" />

   5. HTML LINES
      <p>This is a paragraph</p>
      <hr />
      <p>This is a paragraph</p>
   6. COMMET FOR NOT DISPLAY
      <!--This comment will not be displayed-->
      <p>This is a regular paragraph</p>

   7. HTML LINE BREAKS

<p>This is<br />a para<br />graph with line breaks</p>

   8. HTML TEXT FORMATTING
      <b>This text is bold</b>
      <strong>This text is strong</strong>
      <big>This text is big</big>
      <em>This text is emphasized</em>
      <i>This text is italic</i>
      <small>This text is small</small>
      <tt>This text is teletype</tt>
      This text contains <sub>subscript</sub>
      This text contains <sup>superscript</sup>
      <cite>he is very large no of schools</cite>
      <blockquote>this is a long quotation< <blockquote>
      <q>this is a short quotation</q>

      SPECIAL FORMATTING
   <code>Computer code</code>
   <br />
   <kbd>Keyboard input</kbd>
   <br />
   <tt>Teletype text</tt>
   <br />
   <samp>Sample text</samp>
   <br />
   <var>Computer variable</var>
   <br />
   <p><b>Note:</b> These tags are often used to display computer/programming
   code.</p>


9. HTML FONT SIZE AND COLOR
   <p>
   <font size="5" face="arial" color="red">
   This paragraph is in Arial, size 5, and in red text color.
   </font>
   </p>
   _______________________________________
   <h1 style="color:blue">This is a heading</h1>
   <p style="color:red">This is a paragraph.</p>

10. HTML STYLE TEXT AND BACKGROUND COLOR

    <body style="background-color:yellow;">
    <h2 style="background-color:red;">This is a heading</h2>
    <p style="background-color:green;">This is a paragraph.</p>
11. HTML TEXT ALIGN
    <h1 style="text-align:center;">Center-aligned heading</h1>
    <p>This is a paragraph.</p>
12. HOW TO DEFINE E-MAIL LINK
    <address>
    Written by W3Schools.com<br />
    <a href="mailto:us@example.org">Email us</a><br />
    Address: Box 564, Disneyland<br />
    Phone: +12 34 56 78
    </address>
13. TEXT DIRECTION
   <p>
   If your browser supports bi-directional override (bdo), the next line will be written from the right to the
   left (rtl):
   </p>

    <bdo dir="rtl">
    Here is some Hebrew text
    </bdo>
14. HOW TO MARK DELETED AND INSERTED TEXT
    <p>My favorite color is <del>blue</del> <ins>red</ins>and blue text</p>




15. CELL SPANING or CELL MERG
    COLUMN MERG
     <th colspan="3">Telephone</th>
    <tr>
     <td>Bill Gates</td>
     <td>555 77 854</td>
     <td>555 77 855</td>
    </tr>
    ROW MERG
     <th rowspan="2">Telephone:</th>
16. FOR IN LINE TEXT MOVING
    <marquee>My First Heading</marquee>

17. FORM CREATING STEPS
       a. First Name Last Name
          <form action="">
          First name: <input type="text" name="firstname" /><br />
          Last name: <input type="text" name="lastname" />
          </form>
       b. Username and Password Field
          <form action="">
          Username: <input type="text" name="user" /><br />
          Password: <input type="password" name="password" />
          </form>
       c. Radio Buttons
          <form>
          <input type="radio" name="sex" value="male" /> Male<br />
          <input type="radio" name="sex" value="female" /> Female
          </form>
       d. Check boxes
           <form>
           <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
           <input type="checkbox" name="vehicle" value="Car" /> I have a car
           </form>
       e. Submit Button
           <form name="input" action="html_form_action.asp" method="get">
           Username: <input type="text" name="user" />
           <input type="submit" value="Submit" />
           </form>
       f. Simple Drip Down List
           <form action="">
           <select name="cars">
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
           <option value="fiat">Fiat</option>
           <option value="audi">Audi</option>
           </select>
           </form>
       g. Create a Button
           <form action="">
           <input type="button" value="Hello world!">
           </form>
       h. Create a border around data
           <form action="">
           <fieldset>
           <legend>Personal information:</legend>
           Name: <input type="text" size="30" /><br />
           E-mail: <input type="text" size="30" /><br />
           Date of birth: <input type="text" size="10" />
           </fieldset>
           </form>
           Definition List Type
           <h4>A Definition List:</h4>
           <dl>
            <dt>Coffee</dt>
            <dd>Black hot drink</dd>
            <dt>Milk</dt>
            <dd>White cold drink</dd>
           </dl>
18. MAIN PAGE LAYOUT
    <html>
    <body>
   <table align="center" width="1250" border="1">
   <tr>
   <td colspan="2" style="background-color:#FFA500;">
   <h1>Main Title of Web Page</h1>
   </td>
   </tr>

   <tr valign="top">
   <td style="background-color:#FFD700;width:100px;text-align:top;">
   <b>Menu</b><br />
   HTML<br />
   CSS<br />
   JavaScript
   </td>
   <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
   Content goes here</td>
   </tr>

   <tr>
   <td colspan="2" style="background-color:#FFA500;text-align:center;">
   Copyright © 2011 W3Schools.com</td>
   </tr>
   </table>

    </body>
    </html>
19. Layers back and front
    LAYER 1 ON TOP:
    <div style="position:relative; font-size:50px; z-index:2;">LAYER 1</div>
    <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">LAYER 2</div>

    LAYER 2 ON TOP:
    <div style="position:relative; font-size:50px; z-index:3;">LAYER 1</div>
    <div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">LAYER 2</div>
20. LAYERS BACK AND FRONT
    <iframe src="demo_iframe.htm" frameborder="1" width="200" height="200"></iframe>
    Use iframe as a Target for a Link
    <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
    <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

   22.ADD AUDIO TO YOUR SITE
   <p><a href="song.mp3">Play Song</a></p>
   <p><a href="liar.wav">Play Text</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

23.
PREFORMATED TEX FOR COMPUTER COD
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
   print i
next i
</pre>
CSS NOTES
<style type="text/css">
<#> (id> and <.> (class)
Text Align=                   text-align:center;
Color=                        color:green;
Background color=             background-color:#b0c4de;
Background image=             body {background-image:url('naseer.jpg');
Background Repeat=            background-repeat:repeat-z;
Image Repeat=                 background-repeat:no-repeat;
Back.G. image position and margin=
                              background-position:right top;
                              margin-right:200px;
Space bt character=           {letter-spacing:2px;}{ word-spacing:30px;}
Text wrapping=                white-space:nowrap;
Line height=                  {line-height:200%;}
Text Indent=                  {text-indent:50px;}
Font Style=                   {font-style:italic;}
Font Size=                    {font-size:14px;}
On hover=                     a:hover {color:red;}
Bk. G. height=                max-height:60px; background-color:yellow;
Max. width of text=           max-width:20%;
Min Ht. of bak. Color=        min-height:20px; min-width:190px;
Border and outline =          border:1px solid red;
style                         outline:green dotted thick;
                              outline-width:5px;
Pading=                       padding-top:35px;
Positioning:                  {position:absolute;(relative,static,fixed
                              left:100px; top:150px;}
Style for selected=           p > i:first-child{color:blue;}
Style for first line=  p:first-line {color:#ff0000; font-variant:small-caps;}
Style for first letter= p:first-letter {color:#ff0000;font-size:xx-large;}
Pic. before para or heading=         h1:before {content:url(abc.gif);}
Pic. After para or heading=          h1:after {content:url(abc.gif);}
Focus selected field =               input:focus{background-color:yellow;}
   <style type="text/css">

1. BACKGROUND IMAGE
   <html>
   <head>
   <style type="text/css">
   body {background-image:url('naseer.jpg');
   </style>
   </head>
   <body>

   </body>
   </html>
2. FONT COLOR STYLE AND TEXT ALIGN
   <html>
   <head>
   <style type="text/css">
   h1 {text-align:center;color:#00ff00;}
   p {text-align:left;color:green;}
   p.date {text-align:right;color:blue;}
   p.main {text-align:left;color:red;}

   </style>
   </head>
   <body>
   <h1>CSS text-align Example</h1>
   <p class="date">May, 2009</p>
   <p class="main">In my younger and more vulnerable years my father gave me some advice that
   I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told
   me,
   'just remember that all the people in this world haven't had the advantages that you've
   had.'</p>
   <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
   </body>

   </html>
3. FOR IMAGE REPEAT AND MARGIN SET
   <html>
   <head>
   <style type="text/css">
   body {background-image:url('naseer.jpg');
   background-repeat:repeat-z;
   background-position:center top;
   margin-right:100px;                     <text margin>
   </style>
   </head>
   <body>
   <p> the easterly 50 feet, measured at right angles to the east line thereof of lot(s) 12 in block 3 of tract
    no</p1>
   </body>
   </html>
4. Registration Form in DIV
   Link: http://ynonperek.com/course/fed/forms.html
5. Table in css
   <html>
   <head>
   <style type="text/css">
   table,td,th
   {
   border:1px solid black;
   }
   table
   {
   width:80%;
   }
   th
   {
   height:80px;
   }
   </style>
   </head>

    <body>
    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
    </tr>
        <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
        </tr>
        <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
        </tr>
        <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
        </tr>
        <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
        </tr>
        </table>
        </body>
        </html>
    6. Decorating of Text Underline, blink and overline
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:blink;}
h4 {text-decoration:blink;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>Naseer ud Din</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
7. POSITIOING
   div.scroll
   {
   background-color:#00FFFF;
   width:100px;
   height:100px;
   overflow:scroll;
   position:absolute;
   left:0px;
   top:100px;
   z-index:-1;
   }
8. BORDER WITH STYLE
   border-top-style:dotted;
   border-right-style:solid;
   border-bottom-style:dotted;
   border-left-style:solid;
   Border And Outline color
   border:1px solid red;
   outline:green dotted thick;
   outline-color:#00ff00;
9. Navigation Bar
   <ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
   </ul>

   <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
JAVA SCRIPT NOTES
 1. PARAGRAPH BY ID
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My Web Page</h1>

    <p id="demo">A Paragraph.</p>

    <script type="text/javascript">
    document.getElementById("demo").innerHTML="My First JavaScript";
    </script>

    </body>
    </html>
 2. PARAGRAPH BY DIRECT
    <h1>My First Web Page</h1>

    <script type="text/javascript">
    document.write("<p>My First JavaScript</p>");
    </script>
 3. JavaScript Functions in <head>
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function myFunction()
    {document.getElementById("demo").innerHTML="My First JavaScript Function";}
    </script>
    </head>
    <body>
    <h1>My Web Page</h1>
    <p id="demo">A Paragraph.</p>
    <button type="button" onclick="myFunction()">Try it</button>
    </body>
    </html>

				
DOCUMENT INFO
Shared By:
Categories:
Tags: HTML, Java
Stats:
views:7
posted:4/16/2013
language:Unknown
pages:15
Description: HTML CSS Java and PHP