Combining Three Languages on The Web

Do this on pencilcode.net

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>.

<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.

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

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

<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.

...
<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>