Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    Div Tag - Bolt IoT

    Uploaded by

    KESHAV TYAGI
    The document discusses the <div> tag in HTML, which is used to divide a web page into sections. It provides examples of creating three <div> elements with different widths, heights, and background colors. Styling properties like width, height, background-color, position, top, and left are demonstrated for formatting the <div> sections.

    Copyright:

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

    You might also like

    Div Tag - Bolt IoT

    Uploaded by

    KESHAV TYAGI
    7 views5 pages
    The document discusses the <div> tag in HTML, which is used to divide a web page into sections. It provides examples of creating three <div> elements with different widths, heights, and background colors. Styling properties like width, height, background-color, position, top, and left are demonstrated for formatting the <div> sections.

    Original Description:

    Original Title

    Div Tag _ Bolt IoT

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses the <div> tag in HTML, which is used to divide a web page into sections. It provides examples of creating three <div> elements with different widths, heights, and background colors. Styling properties like width, height, background-color, position, top, and left are demonstrated for formatting the <div> sections.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views5 pages

    Div Tag - Bolt IoT

    Uploaded by

    KESHAV TYAGI
    The document discusses the <div> tag in HTML, which is used to divide a web page into sections. It provides examples of creating three <div> elements with different widths, heights, and background colors. Styling properties like width, height, background-color, position, top, and left are demonstrated for formatting the <div> sections.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    4/24/2020 Div Tag | Bolt IoT

    19% COMPLETE
        Previous Lecture Complete and continue 
       Variables in JavaScript

       Creating Your Functions in    Div Tag


    JavaScript

       Manipulating HTML content using


    JS
    In the previous section, we learned how to use hyperlinks. In this section, we shall learn about the div tag in HTML.
       Built-in Javascript functions
    The div tag divides the HTML document into divisions. These divisions can then be positioned and styled using style
       Quiz
    properties.

    Data Visualization and Analytics


    We shall create three div’s first. Create a new HTML file and copy the below code.
       Introduction to Data Visualization
    (3:36) <!DOCTYPE html>
    <html>
       Types of Graphs (3:25) <head>
    <title>Bolt IoT</title>
    </head>
    <body>
    Visualization with Google Library <div >This is DIV1</div>
    <div >This is DIV2</div>
    <div >This is DIV3</div>
       Before we move forward (3:10) </body>
    </html>
       Introduction to Google Charts
    Library on Bolt Cloud (4:47)

       Visualizing Sensor Data With Bar


    Graph (2:02)

       Visualizing with Scatter Graph and


    Area Graph (2:38)

       Customising Charts (3:52)

       Gauge Graph

       Quiz

    APIs

       APIs on Bolt (4:24)

       API19% Key COMPLETE


    https://trainings.boltiot.com/courses/429176/lectures/6654611 1/5
    4/24/2020 Div Tag | Bolt IoT
    19% COMPLETE
      
    Quiz   Previous Lecture Complete and continue 
       Variables in JavaScript

       Creating Your Functions in


    JavaScript

       Manipulating HTML content using


    JS

       Built-in Javascript functions

       Quiz

    Data Visualization and Analytics

       Introduction to Data Visualization


    (3:36)

       Types of Graphs (3:25)

    Visualization with Google Library

       Before we move forward (3:10)

       Introduction to Google Charts


    Library on Bolt Cloud (4:47)
    The divs can be styled using a wide range of properties. Here are few of the most used ones:
       Visualizing Sensor Data With Bar
    Graph (2:02)
    width: Sets width of the div.
    height: Sets height of the div.
       Visualizing with Scatter Graph and background-color: Sets background color of the div.
    Area Graph (2:38) position: Specifies the type of positioning method used for an element.
    top: Sets spacing from top margin.
       Customising Charts (3:52) left: Sets spacing from left margin.

       Gauge Graph Let’s set size for the divs.

       Quiz <!DOCTYPE html>


    <html>
    <head>
    <title>Bolt IoT</title>
    APIs
    </head>
    <body>
       APIs on Bolt (4:24) <div style="width: 200px; height: 50px;">This is DIV1</div>
    <div style="width: 300px; height: 80px;">This is DIV2</div>
    <div style="width: 400px; height: 100px;">This is DIV3</div>
       API19% Key COMPLETE
    https://trainings.boltiot.com/courses/429176/lectures/6654611 2/5
    4/24/2020 Div Tag | Bolt IoT
    19% COMPLETE </body>
      
    Quiz  </html>  Previous Lecture Complete and continue 
       Variables in JavaScript

       Creating Your Functions in


    JavaScript

       Manipulating HTML content using


    JS

       Built-in Javascript functions

       Quiz

    Data Visualization and Analytics

       Introduction to Data Visualization


    (3:36)

       Types of Graphs (3:25)

    Visualization with Google Library

       Before we move forward (3:10)

       Introduction to Google Charts


    Library on Bolt Cloud (4:47)

       Visualizing Sensor Data With Bar


    Graph (2:02)

       Visualizing with Scatter Graph and


    Area Graph (2:38)
    Adding a background color to the divs.
       Customising Charts (3:52)

       Gauge Graph <!DOCTYPE html>


    <html>
    <head>
       Quiz <title>Bolt IoT</title>
    </head>
    <body>
    <div style="width: 200px; height: 50px; background-color:orange;">This is DIV1</div>
    APIs <div style="width: 300px; height: 80px; background-color:green;">This is DIV2</div>
    <div style="width: 400px; height: 100px; background-color:red;">This is DIV3</div>
       APIs on Bolt (4:24) </body>
    </html>

       API19% Key COMPLETE


    https://trainings.boltiot.com/courses/429176/lectures/6654611 3/5
    4/24/2020 Div Tag | Bolt IoT
    19% COMPLETE
      
    Quiz   Previous Lecture Complete and continue 
       Variables in JavaScript

       Creating Your Functions in


    JavaScript

       Manipulating HTML content using


    JS

       Built-in Javascript functions

       Quiz

    Data Visualization and Analytics

       Introduction to Data Visualization


    (3:36)

       Types of Graphs (3:25)

    Visualization with Google Library

       Before we move forward (3:10)

       Introduction to Google Charts


    Library on Bolt Cloud (4:47)
    Let’s change the positioning of the divs using position, top and left tags.
       Visualizing Sensor Data With Bar
    Graph (2:02)
    <!DOCTYPE html>
    <html>
       Visualizing with Scatter Graph and <head>
    Area Graph (2:38) <title>Bolt IoT</title>
    </head>
       Customising Charts (3:52) <body>
    <div style="position: fixed; top: 10px; left: 0px; width: 200px; height: 50px; background-color:orange;">This is DIV1</div>
    <div style="position: fixed; top: 100px; left: 200px; width: 300px; height: 80px; background-color:green;">This is DIV2</div>
       Gauge Graph <div style="position: fixed; top: 200px; left: 500px; width: 400px; height: 100px; background-color:red;">This is DIV3</div>
    </body>
       Quiz </html>

    APIs

       APIs on Bolt (4:24)

       API Key
    https://trainings.boltiot.com/courses/429176/lectures/6654611 4/5
    4/24/2020 Div Tag | Bolt IoT

      
    Quiz   Previous Lecture Complete and continue 
       Variables in JavaScript

       Creating Your Functions in


    JavaScript

       Manipulating HTML content using


    JS

       Built-in Javascript functions

       Quiz

    Data Visualization and Analytics

       Introduction to Data Visualization


    (3:36)

       Types of Graphs (3:25)

    Visualization with Google Library You can change the values of the above parameters to see how the div's alignment changes.
       Before we move forward (3:10)

       Introduction to Google Charts


    Library on Bolt Cloud (4:47)

       Visualizing Sensor Data With Bar


    Graph (2:02)

       Visualizing with Scatter Graph and


    Area Graph (2:38)

       Customising Charts (3:52)

       Gauge Graph

       Quiz

    APIs

       APIs on Bolt (4:24)

       API Key
    https://trainings.boltiot.com/courses/429176/lectures/6654611 5/5

    You might also like