Scribd Logo
Upload

Welcome to Scribd!

  • RAHMAT TULLA (Ramchandra Khaitan Polytechnic College)

    Uploaded by

    bahubali king
    24 views32 pages

    Original Title

    RAHMAT TULLA( Ramchandra Khaitan Polytechnic College)

    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
    24 views32 pages

    RAHMAT TULLA (Ramchandra Khaitan Polytechnic College)

    Uploaded by

    bahubali king

    Copyright:

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

    GOVT, RAM CHANDRA KHAITAN POLYTECHINC COLLEGE

    JAIPUR

    WEB DESIGNING AND DEVELOPMENT TRAINING


    PRESENTATION
    PRESENTED BY : RAHMAT TULLA
    COMPUTER SCIENCE & ENGINEERING
    THIRD YEAR
    WEB DEVELOPMENT AND DESIGNING
    HTML
    Hyper Text Markup Language
    Versions of HTML

    HTML 1.0 -: It was developed in 1991


    HTML 2.0-: It was developed in 1995

    HTML 3.2-: It was developed in 1997

    HTML 4.01-: It was developed in 1997

    HTML 5-: It was developed in 2014


     WHAT IS HTML

    HTML stands for Hyper Text Markup Language


    HTML is the standard markup language for creating Web pages
    HTML describes the structure of a Web page
    HTML consists of a series of elements
    HTML elements tell the browser how to display the content
    HTML elements label pieces of content such as "this is a heading",
    "this is a paragraph", "this is a link", etc.
     A Simple HTML Document
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>

    </body>
    </html>

    Output
    Html Tags

    Most html tags work in pairs. There is an opening tags


    and closing tags, for example

    <p> some content here.</p>

    The <p>...</p> tags dispaly paragraph


    <p> open the paragraph(opening tag)
    </p> close the paragraph(closing tag)
    “Some content here” will be display on the page
    Required tags

    All HTML documents should have html, head and body tags,
    along with the DOCTYPE identifier.
     !DOCTYPE –-
    Tells the browser which set of standards the page
    adheres to
     <html>…</html> --
    Surrounds the contents of the entire page •
     <title>…</title> --
    Gives the name of the page that appears in the top of
    the browser window •
     <body>…</body> --
    Frames the content of the page to be displayed in
    the browser.
    Some Common HTML Tags an their Meaning

     <p>…</p> -- Creates a paragraph ,


    <br/> -- Adds a line break,
     <h1>…</h1> -- Displays a heading
    <!--…-->-- Inserts a comment ,
     <ol>…</ol> -- Creates an ordered list,
     <ul>…</ul> -- Creates an unordered list,
     <img /> -- Inserts an image into the document
     <a>…</a> -- Inserts a link into the document,
    HTML Attributes

    All HTML elements can have attributes


    Attributes provide additional information about elements
    Attributes are always specified in the start tag
    Attributes usually come in name/value pairs like: name="value"

    Some Attributes

    The href attribute of <a> specifies the URL of the page the link goes to


    The src attribute of <img> specifies the path to the image to be displayed
    The width and height attributes of <img> provide size information for images
    The alt attribute of <img> provides an alternate text for an image
    The style attribute is used to add styles to an element, such as color, font, size,
    and more
    The lang attribute of the <html> tag declares the language of the Web page
    The title attribute defines some extra information about an element
    HTML Text Formatting Elements

    Tag Description

    <b> Defines bold text


    <em> Defines emphasized text
     <i> Defines a part of text in an alternate voice or mood
    <small> Defines smaller text
    <strong> Defines important text
    <sub> Defines subscripted text
    <sup> Defines superscripted text
    <ins> Defines inserted text
    <del> Defines deleted text
    <mark> Defines marked/highlighted text
    HTML Tables

    A table in HTML consists of table cells inside rows and columns

    HTML Table Tags

    Tag Description

    <table> Defines a table


    <th> Defines a header cell in a table
    <tr> Defines a row in a table
    <td> Defines a cell in a table
    <caption> Defines a table caption
    <colgroup> Specifies a group of one or more columns in a table for formatting
    <col> Specifies column properties for each column within a <colgroup> element
    <thead> Groups the header content in a table
    <tbody> Groups the body content in a table
    <tfoot> Groups the footer content in a
    HTML class Attribute

    Using The class Attribute

    The class attribute is often used to point to a class name in a style sheet. It can also be used
    by a JavaScript to access and manipulate elements with the specific class name.
    The Syntax For Class

    To create a class; write a period (.) character, followed by a class name. Then,
    define the CSS properties within curly braces {}:
    Multiple Classes

    HTML elements can belong to more than one class.

    To define multiple classes, separate the class names with a space, e.g. <div
    class="city main">. The element will be styled according to all the classes
    specified.
    Example
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .city {
    background-color: tomato;
    color: white;
    border: 2px solid black;
    margin: 20px;
    padding: 20px;
    }
    </style>
    </head>
    <body>
    <div class="city">
    <h2>London</h2>
    <p>London is the capital of England.</p>
    </div>

    <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    </div>

    </body>
    </html>
    Output
    HTML page structure
    Structure of a Webpage
    Cascading Style Sheets
    What is css ?

    CSS stands for Cascading Style Sheets


    CSS is the language we use to style a Web page.
    CSS describes how HTML elements are to be displayed on
    screen, paper, or in other media
    CSS saves a lot of work. It can control the layout of multiple web
    pages all at once
    External stylesheets are stored in CSS files.
    CSS is used to define styles for your web pages, including the
    design, layout and variations in display for different devices and
    screen sizes.
    SYNTAX OF CSS
    A CSS rule consists of a selector and a declaration block.

    Selector Declaration Declaration

    h1 { color :blue ; fornt-size: 12px;}

    Property value property value

    The selector points to the HTML element you want to style.


    The declaration block contains one or more declarations separated
    by semicolons.
    Each declaration includes a CSS property name and a value,
    separated by a colon.
    Types of CSS

    Inline CSS Internal CSS External CSS

     Inline CSS ;

    An inline CSS is used to apply a unique style to a single


    HTML element.
    An inline CSS uses the style attribute of an HTML element.
    Internal CSS

    An internal CSS is used to define a style for a single HTML page.


    An internal CSS is defined in the <head> section of an HTML page,
    within a <style> element.

    External CSS

    An external style sheet is used to define the style for many


    HTML pages.
    To use an external style sheet, add a link to it in
    the <head> section of each HTML page
    CSS Selectors

    The CSS id Selector

    • THE ID SELECTOR IS USED TO SPECIFY A STYLE FOR A SINGLE UNIQUE ELEMENT.

    • IT USES THE ID ATTRIBUTE OF THE HTML ELEMENT AND DEFINED WITH A “#”.

    • SYNTAX: #SELECTOR-ID { PROPERTY : VALUE ;}

    THE CLASS SELECTOR

    • THE CLASS SELECTOR IS USED TO SPECIFY A STYLE FOR A GROUP OF ELEMENTS.

    • IT USES THE HTML CLASS ATTRIBUTE AND DEFINED WITH A “.”

    • SYNTAX: .SELECTOR – CLASS { PROPERTY : VALUE ; }


    JAVA SCRIPT
    INTRODUCTION
    OF JAVASCRIPT

    JavaScript is a lightweight, cross-


    platform, and interpreted scripting
    language.
     It is well-known for the development of
    web pages, many non-browser
     environments also use it. JavaScript can
    be used for Client-side developments as
    well as Server-side developments.
    Use of Java script
    THE <SCRIPT> TAG
    In HTML, JavaScript code is inserted between <script>and</script>tags

    <script>
    Document. getElementById("demo").innerHTML = "My First JavaScript";
    </script>

    JAVASCRIPT IN <BODY>
    <HTML>
    <BODY>
    <SCRIPT>
    DOCUMENT.WRITE(“<p> THIS IS A PRAGRAPH</p>”);
    </SCRIPT>
    </BODY>
    </HTML>
    JAVA SCRIPT KEY WORDS

    Keyword Description
    var Declares a variable

    let Declares a block variable

    const Declares a block constant

    if Marks a block of statements to be executed on a condition

    switch Marks a block of statements to be executed in different cases

    for Marks a block of statements to be executed in a loop

    function Declares a function

    return Exits a function

    try Implements error handling to a block of statements


    JAVASCRIPT DATA TYPES

    1. Number(22,29,12)

    2.String( C,abc)
    3. Boolean(true/false)
    4. Object(properties & Methods
    5.Undefined(no data type defined
    A simple JavaScript example
    <!DOCTYPE html>
    <html>
    <body>

    <h2>Demo JavaScript in Body</h2>

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

    <button type="button" onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
    }
    </script>

    </body>
    </html>
    Output
    JavaScript HTML DOM
    (document object Model)
    When a web page is loaded, the browser creates a Document Object Model of the page.
    The HTML DOM model is constructed as a tree of Objects:

    The HTML DOM Tree of Objects


    OU
    K Y
    A N
    T H

    You might also like