Skip to content

Instantly share code, notes, and snippets.

View webapprentice's full-sized avatar

Web Apprentice webapprentice

View GitHub Profile
@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
<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>
@webapprentice
webapprentice / tutorial_2_example_1.html
Created November 7, 2013 18:24
Example of code to embed a single tweet in a web page
<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>
@webapprentice
webapprentice / tutorial_3_example_1.html
Last active December 27, 2015 16:59
Embed a Weather Forecast from forecast.io in a web page
<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
webapprentice / tutorial_4_example_1.html
Created November 7, 2013 18:31
Embed a YouTube video in your web page
<iframe width="420" height="315" src="//www.youtube.com/embed/vzeBDcmrjjY" frameborder="0" allowfullscreen></iframe>
@webapprentice
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
<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
webapprentice / tutorial_6_demo_1.html
Last active December 27, 2015 17:09
Play an audio file using JavaScript
<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
webapprentice / tutorial_7_example_1.html
Created November 7, 2013 18:39
Embed a live updating Twitter Timeline into a web page
<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
webapprentice / tutorial_8_example_1.html
Created November 7, 2013 18:42
Use Google fonts in a web page
<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
webapprentice / tutorial_9_example_1.html
Created November 7, 2013 18:44
Embed a video from Vimeo in a web page
<iframe src="//player.vimeo.com/video/49643332" width='500' height='281' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
@webapprentice
webapprentice / tutorial_10_example_1.html
Created November 7, 2013 18:45
Embed a Bing Map in a web page
<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>&nbsp; |&nbsp;
<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>&nbsp; |&nbsp;
<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>