Web Apprentice webapprentice

## tutorial_49_example_1.html
<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;
  }

## tutorial_50_example_1.html

<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;

## tutorial_51_example_1.html
  <script>

    $(document).ready(function() {

      // Check whether the browser is capable of speech synthesis
      if (window.speechSynthesis != 'undefined') {

        // Basic demo
        $("#demo_1").on('click', function(e) {
          var u = new SpeechSynthesisUtterance('You have reached your destination');

## tutorial_53_example_1.html
<div style="width: 60%; margin:auto">
<p>Search the Web Apprentice site</p>

<script>
  (function() {
    var cx = '005712830755614811841:qkpmgdedxzy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

## tutorial_54_example_1.html
<div style="width: 50%; margin: auto; text-align: center">
Enter a URL or String and hit Return <br> &nbsp;
<input id="text" type="text" value="" style="width:100%" />
</div>

<br>&nbsp;<br>&nbsp;<br>&nbsp;

<p style="text-align: center">Default is 256px Square in Black and White </p>
<div id="qrcode_1" style="width: 256px; margin: auto"></div>

## tutorial_55_example_1.html
<canvas id='mycanvas' width='500' height='300' style='border: 1px solid black'></canvas>
</div>

<script>
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");

  // Draw horizontal line
  context.strokeStyle = '#f00';
  context.beginPath();

## tutorial_52_example_1.html
<p>This text will be copied when you click the button</p>
<p id='copy_this_text' style="width: 50%; border: 1px solid #888">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod <i>tempor incididunt ut labore</i> et dolore magna
aliqua. <strong>Ut enim ad minim veniam</strong>, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<button id="copy-button">Copy to Clipboard</button>

<br>
<p>Paste into this box with Ctrl/Cmd-V to show that it worked.</p>

## tutorial_1_example_1.html
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=eiffel+tower,+Paris,+France&amp;aq=t&amp;sll=47.613028,-122.342064&amp;sspn=0.367071,0.644073&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=48.858228,2.294388&amp;spn=0.006295,0.006295&amp;output=embed"></iframe>
<br />
<small>
  <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=eiffel+tower,+Paris,+France&amp;aq=t&amp;sll=47.613028,-122.342064&amp;sspn=0.367071,0.644073&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=A&amp;ll=48.858228,2.294388&amp;spn=0.006295,0.006295" style="color:#0000FF;text-align:left">View Larger Map</a>
</small>

## tutorial_3_example_1.html
<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="75%"
src="http://forecast.io/embed/#lat=69.649205&lon=18.955324&name=Tromso, Norway&color=#00aaff&font=Helvetica&units=us">
</iframe>

## tutorial_2_example_1.html
<blockquote class="twitter-tweet">
<p>Brazil to export low-cost measles &amp; rubella vaccines to developing countries
<a href="http://t.co/moEfOssAqQ">http://t.co/moEfOssAqQ</a>
</p>
&mdash; BBC News (World) (@BBCWorld)
<a href="https://twitter.com/BBCWorld/statuses/395287088033447936">October 29, 2013</a>
</blockquote>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>