Combining Three Languages on The Web

1. Make a web page by renaming your untitled document to a name ending with ".html", like "mypage.html". Type the text "My Page" as the code, and press the "play" triangle.

My Page

Once you save it, your page is published on the web. Next we will add code in three languages:

1. A tagged text language that structures the written word: HTML.
2. A declarative language that organizes rules for visual appearance: CSS.
3. A scripting language that expresses general-purpose computation: Coffeescript.

2. Add HTML tags: <h1>My Page</h1> makes a heading, and <p>It is <em>so cool</em></p> makes a paragraph with some emphasis. Notice the matching <p>...</p> and nested <em>...</em>.

• Try other tags: <b>bold</b>, and <u>underline</i>, and <hr> for a horiztonal rule.
• There are more than 100 HTML tags, e.g. <table> and <img>: look up [HTML tags] on Google.

<h1>My Page</h1>
<hr>
<p>It is <em>so cool</em></p>

3. Add a <style>...</style> element, which lets you write in the CSS language on the page.

• CSS is a list of rules. Each rule names a tag, then in curly braces lists visual properties.
• The code h1 { background: pink; } applies a pink background to all <h1>...</h1> elements.
• There are more than 100 CSS properties: look up [CSS reference] on Google.

<style>
h1 { background: pink; }
em { font-size: 250%; color: royalblue; }
</style>
<h1>My Page</h1>
<hr>
<p>It is <em>so cool</em></p>

4. Try adding scripts using two <script> elements.

• Add <script src="/turtlebits.js"></script> to load a turtle and CoffeeScript library from the web, then write <script type="text/coffeescript"> and add the code below.
• The turtle library gives us pen, fd, and rt: the reference is on reference.pencilcode.net.
• The Coffeescript language defines for loops and other things: look up [coffeescript tutorial] on Google.

<style>
h1 { background: pink; }
em { font-size: 250%; color: royalblue; }
</style>
<h1>My Page</h1>
<hr>
<p>It is <em>so cool</em></p>
<script src="/turtlebits.js"></script>
<script type="text/coffeescript">
$.turtle()      # start the turtle
pen 'gold'      # pick a color
for [1..4]      # repeat four times:
  fd 100        # forward 100 pixels
  rt 144        # right turn 144 degrees
</script>

5. Try changing your code to animate text instead.

• The code cool = $('em') defines the variable "cool" to refer to the set of <em> elements.
• The  $  function that scripts HTML is from the jQuery library, which comes with turtlebits.
• There are more than 100 jQuery functions: see learn.jquery.com. There are thousands of other useful web scripting libraries: explore jamjs.org or bower.io or npmjs.org.

...
<script src="/turtlebits.js"></script>
<script type="text/coffeescript">
cool = $('p')   # select the <p> element
cool.width 150  # set its width to 150
cool.speed 1    # set its speed to 1
cool.pen 'gold' # pick a color
for [1..4]      # repeat four times:
  cool.bk 100   # backward 100 pixels
  cool.rt 144   # left turn 144 degrees
</script>