Web Apprentice webapprentice
webapprentice
/ tutorial_1_example_1.html
Last active
December 27, 2015 16:59
Simple example of embedding a Google Map in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=eiffel+tower,+Paris,+France&aq=t&sll=47.613028,-122.342064&sspn=0.367071,0.644073&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=48.858228,2.294388&spn=0.006295,0.006295&output=embed"></iframe> | |
| <br /> | |
| <small> | |
| <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=eiffel+tower,+Paris,+France&aq=t&sll=47.613028,-122.342064&sspn=0.367071,0.644073&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=48.858228,2.294388&spn=0.006295,0.006295" style="color:#0000FF;text-align:left">View Larger Map</a> | |
| </small> |
webapprentice
/ tutorial_2_example_1.html
Created
November 7, 2013 18:24
Example of code to embed a single tweet in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <blockquote class="twitter-tweet"> | |
| <p>Brazil to export low-cost measles & rubella vaccines to developing countries | |
| <a href="http://t.co/moEfOssAqQ">http://t.co/moEfOssAqQ</a> | |
| </p> | |
| — 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> |
webapprentice
/ tutorial_3_example_1.html
Last active
December 27, 2015 16:59
Embed a Weather Forecast from forecast.io in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
webapprentice
/ tutorial_4_example_1.html
Created
November 7, 2013 18:31
Embed a YouTube video in your web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe width="420" height="315" src="//www.youtube.com/embed/vzeBDcmrjjY" frameborder="0" allowfullscreen></iframe> |
webapprentice
/ tutorial_5_example_1.html
Created
November 7, 2013 18:33
Use the <audio> tag to play an audio file in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <audio autoplay="autoplay" controls="controls"> | |
| <source src="/assets/Doctor_Who_theme_excerpt.ogg" /> | |
| <p>Your browser does not support the audio element.</p> | |
| </audio> |
webapprentice
/ tutorial_6_demo_1.html
Last active
December 27, 2015 17:09
Play an audio file using JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| window.AudioContext = (function(){ | |
| return window.webkitAudioContext || window.AudioContext ; | |
| })(); | |
| // Global variables | |
| var audioContext; | |
| var audioBuffer = 0; | |
| var audioUrl = "/assets/Doctor_Who_theme_excerpt.ogg"; |
webapprentice
/ tutorial_7_example_1.html
Created
November 7, 2013 18:39
Embed a live updating Twitter Timeline into a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a class="twitter-timeline" href="https://twitter.com/BBCWorld" data-widget-id="395313647477481472">Tweets by @BBCWorld</a> | |
| <script> | |
| !function(d,s,id){ | |
| var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; | |
| if(!d.getElementById(id)){ | |
| js=d.createElement(s); | |
| js.id=id; | |
| js.src=p+"://platform.twitter.com/widgets.js"; | |
| fjs.parentNode.insertBefore(js,fjs); |
webapprentice
/ tutorial_8_example_1.html
Created
November 7, 2013 18:42
Use Google fonts in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| @import url(http://fonts.googleapis.com/css?family=PT+Sans); | |
| @import url(http://fonts.googleapis.com/css?family=Cinzel); | |
| @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); | |
| @import url(http://fonts.googleapis.com/css?family=Fondamento); | |
| p { | |
| font-size: 18px; | |
| } | |
| .font1 { |
webapprentice
/ tutorial_9_example_1.html
Created
November 7, 2013 18:44
Embed a video from Vimeo in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe src="//player.vimeo.com/video/49643332" width='500' height='281' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> |
webapprentice
/ tutorial_10_example_1.html
Created
November 7, 2013 18:45
Embed a Bing Map in a web page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <iframe width="500" height="400" frameborder="0" | |
| src="http://www.bing.com/maps/embed/viewer.aspx?v=3&cp=48.858601~2.293980&lvl=15&w=500&h=400&sty=r&typ=d&pp=&ps=&dir=0&mkt=en-us&src=SHELL&form=BMEMJS"> | |
| </iframe> | |
| <div style="margin: 12px 0 0 0;"> | |
| <a target="_blank" href="http://www.bing.com/maps/?cp=48.858601~2.293980&sty=r&lvl=15&sp=&mm_embed=map">View Larger Map</a> | | |
| <a target="_blank" href="http://www.bing.com/maps/?cp=48.858601~2.293980&sty=r&lvl=15&rtp=~pos.48.858601_2.293980____&mm_embed=dir">Get Directions</a> | | |
| <a target="_blank" href="http://www.bing.com/maps/?cp=s48sq3h5r1fn&sty=b&lvl=18&sp=&mm_embed=be">View Bird's Eye</a> | |
| </div> |
OlderNewer