Scribd Logo
Carica

Benvenuto in Scribd!

  • Web Development Seminar

    Caricato da

    Kanishkar Bubesh Kumar
    28 visualizzazioni15 pagine

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    28 visualizzazioni15 pagine

    Web Development Seminar

    Caricato da

    Kanishkar Bubesh Kumar

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 15

    10-10-2019

    WEB DEVELOPMENT

    BY
    B.KANISHKAR
    17104057
    III-CSE-A

    CONTENTS
    • Introduction
    • HTML
    • CSS
    • Bootstrap
    • JavaScript

    2
    10-10-2019

    INTRODUCTION
    • A webpage consists of 2 basic components :
    1. HTML
    2. CSS
    3. javaScript
    • For back end or server side we have many options to choose. For example
    1. Node. Js
    2. PHP
    • For database we can use:
    1. Mysql
    2. Mango DB

    HTML TIM BERNERS-LEE

    • Hypertext Markup Language (HTML) is the standard markup


    language for documents designed to be displayed in a web
    browser. It can be assisted by technologies such as Cascading Style
    Sheets(CSS) and programming language such as JavaScript.

    4
    10-10-2019

    STRUCTURE OF HTML
    <!DOCTYPE html>
    <html>
    <head>
    <title>First Web Page</title>
    </head>
    <body> <p>Hello world!</p> </body>
    </html>

    OUTPUT

    6
    10-10-2019

    HEADER TAGS

    Header Tags -- Used for marking sections and subsections in a document.

    <H1>Header 1 -- Giant-sized and bold </H1>


    <H2>Header 2 -- Large and bold </H2>
    <H3>Header 3 -- Normal-sized and bold </H3>
    <H4>Header 4 -- Small and bold </H4>
    <H5>Header 5 -- Very Small and bold </H5>
    <H6>Header 6 -- Tiny and bold </H6>

    H1 = Giant-sized and bold


    H2 = Large and bold
    H3 = Normal-sized and bold
    H4 = Small and bold
    H5 = Very Small and bold

    H6 = Tiny and bold

    8
    10-10-2019

    BREAKING LINES AND PARAGRAPHS


    • <P> text </P>
    • Paragraph tag
    • Most browsers render (process) this with blank lines between each paragraph
    • <BR>
    • Line break tag
    • Used when the webmaster wants a carriage return but doesn't want a blank line to follow

    Example: text a
    <p>text a</p>
    <p>text b</p> text b
    <br>text c
    <br>text d text c
    text d

    Lists -- Unordered Lists

    Unordered lists:
    <UL>
    <LI>Item One •Item One
    <LI>Item Two •Item Two
    <LI>Item Three
    •Item Three
    <LI>Item Four
    •Item Four
    </UL>

    Unordered List Attributes:


    type="disc/circle/square"
    •Disc (default)  Circle  Square

    10
    10-10-2019

    LISTS -- ORDERED LISTS


    Ordered (Numbered) Lists:
    <OL>
    <LI> Item One 1. Item One
    <LI> Item Two 2. Item Two
    <LI> Item Three 3. Item Three
    <LI> Item Four 4. Item Four
    </OL>

    type="i/I/a/A/1" (default)

    i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One
    ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two
    iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
    iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four

    11

    Links
    The anchor tag <A> is used to link one document to another or from one part of a document to another part of the
    same document.
    Basic Links:
    <A HREF="http://www.stanford.edu/">Stanford University</A>

    Inter-document Links:
    <A HREF="#spot">Point to 'spot' in this document</A>

    Defining a point in a document:


    <A NAME="spot">Spot</A>

    Email links:
    <A HREF="mailto:someone@somehost.com">Email someone@somehost.com</A>

    12
    10-10-2019

    CASCADING STYLE SHEETS (CSS)


    • Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in
    a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML
    and JavaScript.
    • Developed by Hakon Wium lie and Bert Bos.

    13

    CSS TAGS

    • Align-content : Specifies the alignment between the line a flexible container when the item do not use
    all available spaces.
    • Background-color : Specifies the background color of an element.
    • Background-image : Specifies one or more background images for an elements.
    • Background-size : Specifies the size of the background images.
    • Font : This is used to set the font-style, font-family etc…
    • Text-align : Specifies the horizontal alignment of a text.

    14
    10-10-2019

    15

    16
    10-10-2019

    BOOTSTRAP

    • Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
    It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation and other
    interface components. Wikipedia
    • Original author(s): Mark Otto, Jacob Thornton
    • License: MIT License (Apache License 2.0 prior to 3.1.0)
    • Stable release: 4.3.1 / February 13, 2019; 6 months ago
    • Initial release date: 19 August 2011
    • Platform: Web platform
    • Written in: HTML, Cascading Style Sheets, Less(v3), Sass(v4), JavaScript

    17

    SETTING UP BOOTSTRAP

    Copy-paste the stylesheets <link> into your <head> before all other stylesheets to load our CSS.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"


    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">

    18
    10-10-2019

    19

    20
    10-10-2019

    21

    JAVASCRIPT

    • JavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript
    specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-
    class functions.
    • First appeared: December 4, 1995; 23 years ago
    • Stable release: ECMAScript 2018 / June 2018; 1 year ago
    • Preview release: ECMAScript 2019
    • Typing discipline: Dynamic, duck
    • Developer: Netscape Communications Corporation, Mozilla Foundation, Ecma International
    • Designed by: Brendan Eich

    22
    10-10-2019

    WHY JAVASCRIPT ?

    JavaScript is one of the 3 languages all web developers must learn:


    1. HTML to define the content of web pages
    2. CSS to specify the layout of web pages
    3. JavaScript to program the behavior of web pages

    23

    JAVASCRIPT CAN CHANGE HTML CONTENT


    One of many JavaScript HTML methods is getElementById().
    This example uses the method to "find" an HTML element (with id="demo") and changes the element content
    (innerHTML) to "Hello JavaScript":

    24
    10-10-2019

    JAVASCRIPT SYNTAX
    JavaScript syntax is the set of rules, how JavaScript programs are constructed:
    var x, y, z; // How to declare variables
    x = 5; y = 6; // How to assign values
    z = x + y; // How to compute values

    <!DOCTYPE html> The var Keyword Creates Variables


    <html> 110
    <body>
    <h2>The var Keyword Creates Variables</h2>
    <p id="demo"></p>
    <script>
    var x, y;
    x = 5 + 6;
    y = x * 10;
    document.getElementById("demo").innerHTML = y;
    </script>

    </body>
    </html>

    25

    SOME OTHER CONCEPTS IN JAVASCRIPT


    1. Array
    2. Class
    3. Objects
    4. Functions
    5. Event handling

    26
    10-10-2019

    27

    28
    10-10-2019

    WHERE TO CODE FOR WEB DEVELOPMENT

    29

    THANK YOU

    30

    Potrebbero piacerti anche