Scribd Logo
Upload

Welcome to Scribd!

  • Css

    Uploaded by

    Lovedeep kaur
    10 views33 pages

    Original Title

    css

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views33 pages

    Css

    Uploaded by

    Lovedeep kaur

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 33

    FORMS

     A HTML form is simply a container that consists


    of other form elements such as a text box,radio
    buttons,list boxes and is not a visual element
    itself.it is created using <form> element. An
    opening </form> tag represents the start of the
    form and closing</form> tag represents the end
    of the form.
    ADDING FORM CONTROLS
     A number of controls are available that you can
    add to your form in order to collect data form a
    visitor.these controls inculde:
     Text input controls:-single line text input
    control,password input control,multiple line
    input controls.
     Check box

     Radio button

     Drop down menus

     Submit and reset


    FOR EXAMPLE
    <html>
    <head>
    <title>Text Input Control</title>
    </head>
    <h2 algin="center">Registration Form</h2>
    <Form action="login.asp" method="post">
    User id : <input type="text" name="userid" ><br><br>
    Password: <input type="Password" name="Password"><br><br>
    Name : <input type="text" name="Name" ><br><br>
    Address: <input type="Address" name="Address"><br><br>
    Email: <input type="Email" name="Email"><br><br>
    Pincode: <input type="Pincode" name="Pincode"><br><br>
    Hobbies : <input type="checkbox" name="checkbox"
    value="Reading">Reading
    <input type="checkbox" name="checkbox"
    value="Music">Music
    <input type="checkbox" name="checkbox"
    value="Sports">Sports<br><br>
    Gender: <input type="radio" name="gender" value="M">Male
    <input type="radio" name="gender"
    value="F">Female<br><br>
    Country <select name="Country">
    <option value="chd">Chandigarh
    <option value="ldh">Ludhiana
    <option value="amit">Amritsar
    </select><br><br>
    Course <select name="Course">
    <option value="BCA">BCA
    <option value="B.A">B.A
    <option value="B.COM">B.COM
    </select><br><br>
    <input type=“Button" value =“Submit">
    <input type=“Button" value =“Reset">
    </form>
    </body>
    </html>
    OUTPUT
    CASCADING STYLE SHEETS

    Cascading style sheet(css) is a presentation


    definition language that is used to control the
    layout of HTML documents by attching
    styles.With CSs,you can apply styles such as
    color of the text,set margins,style of
    fonts,backgrouand images and much more.
    CSS RULES
     In order to create a style sheet,we have to specify
    a set of rules known CSS rules or styles. The
    general syntax for specifying the rule is :-

    Selector{ Property :value ;}

    Example:-

    p{ color :Red;}
    INCLUDING CSS IN HTML DOCUMENT

    Inline Style Embedded


    Sheet Style Sheet

    Linking to
    Linking to
    an
    an external
    imported
    Style Sheet
    Style sheet
    INLINE STYLE SHEETS

     Inline style sheet are those which are included


    with a single specific occurrence of an element in
    HTML document.In other words,they are placed
    inline within the element.

    Syntax:-

    <tagname Style= “Declaration1;Declaration2; ……..”>


    ……….
    ………
    </tagname>
    FOR EXAMPLE
    <html>
    <head>
    <title>inline stylesheet</title>
    </head>
    <body>
    <h2>inline style </h2>
    <hr>
    <p>
    we shall be learning how the inline style works. it is very useful part of
    html.
    </p>
    <p style="color:cyan;font-size:16pt">
    we shall be learning how the inline style works.it is very useful part of
    html.
    </p>
    </body>
    </html>
    OUTPUT
    EMBEDED STYLE SHEET
    The inline style is very useful if you want to apply styles
    to a specific occurrence of an element.But if you want to
    apply same style to all the occurrences of specific
    element within the entire webpage then you will have to
    specify style for all the occurrences of the element which
    is very time consuming process.
    The general form is
    <head><title> title information</title>
    <style type=“text/css”>
    <! - -
    CSS rules
    - ->
    </style>
    </head>
    FOR EXAMPLE
    <html>
    <head>
    <title>embeded style sheet</title>
    <style type="text/css">
    <!--
    h1,p{color:blue;}
    -->
    </style>
    </head>
    <body>
    <h2> embeded style sheet</h2>
    <p>
    we shall be learning how the inline style works. it is very useful part of html.
    </p>
    <h1> heading is blue</h1>
    <p>this is the first paragraph of the webpage</p>
    <p>this is the second paragraph of the webpage</p>
    <b>it will be bold but not green</b>
    </body>
    </html>
    OUTPUT
    EXTERNAL STYLE SHEET

     An external style sheet is a template or file that


    consists only of CSS rules and comments but does
    not contain any markups.
     An external style sheet must have an extension
    .css

    Syntax:

    <head>
    <link rel=“stylesheet” type=“text/css” href= “url of css file”>
    </head>
    FOR EXAMPLE
    <html> “Rule.css”
    <head>
    <title>inline stylesheet</title>
    </head>
    <body> p{
    <h2>inline style </h2> color:green;
    <hr> font-size:14pt;
    <p> }
    we shall be learning how the h1 {color:red;}
    inline style works. it is very
    useful part of html.
    </p>
    <p style="color:cyan;font-
    size:16pt">
    we shall be learning how the
    inline style works.it is very
    useful part of html.
    </p>
    </body>
    </html>
    OUTPUT
    IMPORTED STYLE SHEET
     In addition to linking an external style sheet using
    the <link> element,you can also link it using @import
    rule. The @IMPORT rule allows users to import style
    rules from other stylesheets.

    Syntax:
    <head><title> title information</title>
    <style type=“text/css”>
    <! - -
    @import URL(cssfilepath);
    CSS rules
    - ->
    </style>
    </head>
    FOR EXAMPLE
    <html>
    <head>
    <title>import style sheet</title>
    <style type="text/css">
    <!--
    @import(rule.css);
    h1{color:blue;}
    -->
    </style>
    </head>
    <body>
    <h2> import style sheet</h2>
    <p>
    we shall be learning how the inline style works. it is very useful part of html.
    </p>
    <h1> heading is blue</h1>
    <p>this is the first paragraph of the webpage</p>
    <p>this is the second paragraph of the webpage</p>
    <b>it will be bold but not green</b>
    </body>
    </html>
    OUTPUT
    JAVASCRIPT

     Javascript is one of the most popular scripting


    language used in millions of webpage these days.its
    main purpose is to allow web developers to add
    functionality and interactivity to webpages which
    otherwise cannot be possible using CSS and HTML.
    Syntax:-

    <script language=“javascript”>
    <! - -
    // javascript code
    - - ->
    - </script>
    FUNCTIONS

     Function are one of the fundamental building


    blocks in javascript. A function is a self-contained
    block of statements that performs a specific task
    when an event fires or call to that function is
    made.

    Syntax:-

    function fname([part1],[part2]………[partn])
    {
    Statement[s];
    }
    FOR EXAMPLE
    <html>
    <head>
    <title>java1</title>
    <script type="text/javascript">
    function_myfunction()
    {
    alert("display a message box");
    }
    </script>
    </head>
    <body>
    <button type="button" on-click="myfunction()"> click
    me </button>
    </body>
    </html>
    OUTPUT
    RETURN STATEMENT
     The return statement is used to return value
    from the function nto the place where the
    function was called.it is usually used when you
    have to test whether a particular field(s) in the
    from are blank or not.

    Syntax:
    return(value);
    FOR EXAMPLE
    <html>
    <head>
    <title>return</title>
    <script type="text/javascript">
    <!--
    function area(side)
    {
    c=side*side;
    document.write("area of square = " +c);
    }
    -->
    </script>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    area(5);
    -->
    </script>
    </body>
    </html>
    OUTPUT
    SCOPE OF VARIBLES
     The variables can either be a local variable or a
    global variable. A variable that is defined inside
    the functions is known a local variables. It can
    only be used within the function in which they
    are declared.
     The variables that are defined outside the
    function are known as global variables.they can
    be accessed from anywhere within the webpage.
    FOR EXAMPLE
    <html>
    <head>
    <title>scope of variable</title>
    <script type="text/javascript">
    <!--
    num=6;
    function display1()
    {
    var num=4;
    document.write("value of loacal variable = " +num);
    }
    function display2()
    {

    document.write("<br> value of global variable = " +num);


    }
    -->
    </script>
    </head>
    body>
    <script type="text/javascript">
    <!--
    display1();
    display2();
    -->
    </script>
    </body>
    </html>
    OUTPUT

    You might also like