Tutorial

Back to Tutorials

An introduction to HTML

How you can use HTML inside Frog

Share this page...

Welcome to <HTML>


You can achieve quite a bit with the languages available to you in the HTML editor. The editor in Frog can run:
 

  • HTML (of course)
  • CSS (more on that later)
  • Javascript


This tutorial and the ones that follow isn't designed to teach you how to code, there are far better, in-depth guides to help you with that.  If you're interested in learning HTML etc..., we'd recommend Code Academy and HTMLgoodies (a personal favourite of Graham Quince's).
 

Outcomes


By the end of this tutorial, you should be able to:

  • Use jQuery to change the contents of a DIV
  • Understand how to use the browser's console to view information return by an API
  • Use that API to display a user's name in a DIV

And with that, let's get started...​

 

 

Hello World


By tradition, getting a computer to display Hello World is a great way to start learning any programming language. Using the HTML widget, this is particularly easy.
 

Step 1


Create a site on your VLE and drag in the HTML widget 
 


 

Step 2


Click </> Edit HTML and type "Hello World"
 

Step 3


Save the HTML code and save and close the site editor.

It's not particularly impressive, because all it's doing is displaying the text you've typed.   Let's use jQuery in the HTML editor to do something a bit more interesting.

 

Step 4


Open the HTML editor again and this time create a DIV. Type in the following:
 

<div id="myDiv" class="alert alert-info">Hello World</div>


Frog uses most of the Bootstrap CSS styling, so setting the DIV's class to be alert and alert-info gives us a nice blue box.
 

Bootstrap CSS

 

We're still not doing anything with the contents of the DIV though.   We've added an ID to the DIV to make it easier to find for the next step.
 

Step 5


Re-edit the page and open the editor again.  Update the following code to add the script section:
 

<div id="myDiv" class="alert alert-info">Hello World</div>
 
<script>
$('#myDiv').html('Howdy');
</script>

 

What we've done here is use jQuery to identify the DIV by it's ID (myDiv).   We've then replaced the HTML code inside the DIV to display Howdy instead of Hello World.

We've used the HTML function in jQuery as that would allow us to add HTML tags, like <b></b>, <li></li> or even <a></a>.  There are countless permutations you can use with a range of different jQuery code, but for now, this is a pretty good start.
 

Adding your own style


This isn't going to be a full tutorial on CSS, that would be impossible.  The permutations are close to endless, but what this tutorial can do is introduce the basics.   As we stated in the introduction, the HTML widget can run CSS (cascading style sheets). 

Using CSS in a single HTML widget on a site will continue to be applied to all sites, until you close down the original site.   This is a bit of a double-edge sword in it can be very useful if you wish to change the style of text links throughout your VLE by placing some CSS on your school dashboard, but that can backfire if you don't limit it.

There are two simple ways to style your DIV, id and class.

  • id is very handy for styling individual DIVs
  • class is useful for grouping, then styling DIVs.

When we created the DIV back on Hello World, we used the Bootstrap classes alert and alert info - alert 'drew' the box and alert-info made it blue.

Now, suppose you want to draw your own box, you could try something like:
 

<style>

.myBox {
width:50%;
height:150px;
background:#FF00FF;
border:1px solid #000000;
border-radius:10px;
margin:10px;
padding:10px;
font-size:16pt;
}

</style>

<div id="myDiv" class="myBox">Hello World</div>
Hello World

Breaking down what we've done here:
 

  • We opened a style tag, that tell the browser now to display the code, but to run it (<style>).

    Helpful link - W3Schools CSS
     
  • We created a class, denoted by the .  (# is used for ids)
     
  • We set the width of our DIV to be 50% of the available space (width:50%;)
     
  • We made the height 150 pixels high (height:150px;)
     
  • We set the background for our DIV to be purple, using HEX code - (background#FF00FF;

    Helpful link - Colour Picker
     
  • We gave is a black border, set to a solid line, 1 pixel thick, (border:1px solid #000000;)
     
  • We rounded the corners (border-radius:10px;)
     
  • We gave it some some on all four side, by giving it a margin of 10 pixels (margin:10px;)
     
  • We gave the text inside some padding set to 10pixels (padding:10px;)
     
  • We set the font size to be a bit larger, using point size (font-size:16pt;)
     
  • We closed the <style> section (</style>)
    ​
  • We gave our DIV the class we created in the style (class="myBox")

     

Here's a more complex example of styling DIVs, this time using an outer DIV to contain others:
 

<style>
.myOuterDiv {
    width:400px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #000000;
}
.myFirstBox {
    width:70%;
    height:70%;
    float:left;
    background:#6699FF;
    line-height:150px;
    vertical-align:middle;
    text-align:center;
}
.mySecondBox {
    width:30%;
    height:70%;
    float:left;
    background:#99FF66;
}
.myThirdBox {
    width:100%;
    height:30%;
    float:left;
    background:#FFFFFF;
}

</style>

<div class="myOuterDiv">
    <div class="myFirstBox">My First Box</div>
    <div class="mySecondBox">My Second Box</div>
    <div class="myThirdBox">My Third Box</div>
</div>
My First Box
My Second Box
My Third Box

There's a lot more we could cover, including how to style Frog elements, but we'll save that for another tutorial.  Instead, let's learn how the browser can help us to use Frog's APIs.
 

Using the Browser's Console


Let's jump right in and add the following code to a new HTML widget:
 

<div id="myDiv2" class="alert alert-info">Hello World</div>
 
<script>
var user = FrogOS.getUser();
console.log(user);
</script>

 

We've created a new DIV (myDiv2) which we're doing nothing with (yet).  The interesting bit is in the script.

We've created a variable (using var) called user and we've added information to that variable using one of Frog's APIs  - getUser().  

 

Glossary

​In computing, a variable is a value that can be set and changed.  For example, if X = 2, 5 + X = 7, but if a program then changes X = 3, our equation is now 5 + X = 8.  Hopefully you can see how powerful variables are when used well.  You can find out more about variables on BBC Bitesize

An API (Application Programming Interface) can be thought of as a function used to return information.  For our needs, the information returned generally contains mutliple elements of organised information, we need to identify and extract individual elements of this information

​

This API identifies the current user and brings back all the information we have about them. In order to see that information, the script is told to display it in the console using the command log(user).
 

For you to see this information, you'll need to open the developer tools.

Google Chrome, it's currently either:

  • Menu > More tools > Developer Tools
  • Hold CTRL + SHIFT + I

Internet Explorer:

  • Menu > F12 Developer Tools
  • Tap F12
     

Click on the Console tab for either browser.  You'll probably see a page full of returned data.   At this point, the easiest option is to clear it.

Look for this symbol in Chrome...

or this one in IE...

Close your page, clear the console and then reopen it to rerun the script and see the results.

The image above is from my console.  As you can see, it returns some information already.  If you twirl down the triangle next to the start, you'll be able to view all the information provided by getUser().

Next, let's find out how to access it...

 

Hello Me


Using the HTML widget from the previous page and combining it with what we know from Hello World, let's see if we can return your name.

 

<div id="myDiv2" class="alert alert-info"></div>
 
<script>
var user = FrogOS.getUser();
$('#myDiv2').html(user.attr('displayname'));
console.log(user);
</script>

How it looks for me:

If you recall from the console, displayname was one of the terms shown which contained my name.  You can see other terms too, such as:

  • username
  • email
  • pupil_number (for students this is the UPN)

attr is a function which returns the attributes of an object, in this case our variable user.  

We've specified the displayname as the attribute we wanted to use and because we placed that inside the html function, jQuery used that to change the contents of our DIV to show the displayname.

This seems like a good place to stop and let you play around with getUser() and the information you can extract for yourself.

 

Extension activity


Using CSS, HTML, jQuery and the getUser() API, see if you can create a business card for yourself in Frog.   To do this, you'll need to think about:

  • how to style your business card
  • display text in different positions
  • change the text to the attributes available to you using getUser()

Tutorials in this series...

Quicklinks