CodeTheMarkupWithHTML.rtf

{\rtf1\ansi\ansicpg1252\cocoartf2513
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue;\f1\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red46\green45\blue42;\red255\green255\blue255;\red162\green70\blue22;
\red13\green100\blue126;\red245\green246\blue249;}
{\*\expandedcolortbl;;\cssrgb\c23529\c23137\c21569;\cssrgb\c100000\c100000\c100000;\cssrgb\c70196\c35294\c10588;
\cssrgb\c0\c46667\c56863;\cssrgb\c96863\c97255\c98039;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{none\}}{\leveltext\leveltemplateid1\'00;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid1}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}}
{\info
{\author Elisabeth Robson}}\margl1440\margr1440\vieww19520\viewh25200\viewkind0
\deftab720
\pard\pardeftab720\sl920\partightenfactor0

\f0\fs72 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 Code the markup with HTML\
\pard\pardeftab720\sa400\partightenfactor0

\fs36 \cf2 The HTML and CSS for the Music Box project is about as simple as it gets. For the HTML, all we really need is the HTML to make a page containing a\'a0
\f1 \cf4 \strokec4 <canvas>
\f0 \cf2 \strokec2 \'a0element. The rest of the interface will all be built inside the canvas---that is, we'll respond to clicks on the canvas, make sounds, and make animated circles, all using JavaScript.\cb1 \
\pard\pardeftab720\sa400\partightenfactor0
{\field{\*\fldinst{HYPERLINK "https://gist.github.com/bethrobson/3030fcab4612bb756691"}}{\fldrslt \cf5 \cb3 \strokec5 Get the code on GitHub}}\cb3 .\cb1 \
\pard\pardeftab720\sa400\partightenfactor0
\cf2 \cb3 Save this as "musicbox.html". Notice that we're linking to "musicbox.css", which we'll get to in a moment. In the body of the HTML, we've got just one element: the\'a0
\f1 \cf4 \strokec4 <canvas>
\f0 \cf2 \strokec2 \'a0element. We'll be adding some\'a0
\f1 \cf4 \strokec4 <script>
\f0 \cf2 \strokec2 \'a0elements below the canvas to link to our JavaScript later on, but this is all we need for HTML structure. The canvas has an id, "canvas", to make it easier to get the canvas from the DOM, and a width and height to size it for the page. Feel free to change the width and height to suit you and your screen.\cb1 \
\cb3 Next up, we'll get the CSS added.\cb1 \
\pard\pardeftab720\partightenfactor0

\fs48 \cf2 \cb3 Resources for this lecture\cb1 \
\pard\tx220\tx720\pardeftab720\li720\fi-720\partightenfactor0
\ls1\ilvl0
\fs40 \cf5 \cb6 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 		{\field{\*\fldinst{HYPERLINK "javascript:void(0)"}}{\fldrslt \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec5 Get the HTML on GitHub}}\cf2 \cb1 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
}