Preparing the HTML file

- [Voiceover] Now, to begin our project, the first thing we're gonna do is hook in the JavaScript files inside of the Assets folder into the html file. So, let's come down here and select the index.html file and let's open this up in your text editor. Now, I've already added a table into this html file. If I scroll down here, you can see the table element here. There's an id of courses attached to the table. And then there's a table heading area and a table body area. Now, the plugin requires that there's a table heading element, and that each of the cells inside of the row are using the th setting. It's these items that will become clickable and then sort all of the elements down in the body area. Now, down here there's also a data-date attribute that I've added to the date. The date is the fourth cell item here in the header, and it's also the fourth item in each one of the individual table rows. And what I've done here is I've set up a data attribute with the actual date written in a format that JavaScript can understand. So, later on in the course, we're going to use labels like this that will be more reader-friendly, however, we will need to supply additional data to sort the dates properly. So, in the short-term, we're gonna be focusing on the title, the subject, and the duration. So, to preview what we're working with, let's go back to the Exercise Files, and let's open index.html up in a browser. So, here we can see that we have a table with every other row highlighted. If we roll our cursor over the table, we'll highlight the individual rows. And if we move our cursor across the top, we'll highlight the individual headings. Now, if you'd like to learn more about styling your own tables, with very similar techniques, I have another episode of Design the Web here in the library called Stying a Table. And so now that we're familiar with the table we're gonna be working with, back in the html file, let's scroll up to the top. What we're gonna do here is hook in three JavaScript files: Our jquery file, the tablesorter plugin, and then our custom JavaScript file that we're gonna write our scripts into. So, up here in the heading area of the html, after the link that that brings in the css, let's hit a return, let's add a script tag. A less than sign, type script, then a space. We're gonna set the type to text/javascript, then a space, then we're gonna set the source. So, src=, we're going to point to the file in the assets folder, then we're going to point to jquery, then we'll end the tag, and then end the script element. So, we need to bring in jQuery first, since tablesorter uses jQuery. Now I'm gonna duplicate this entire line. I'm gonna come in here and select the file name, delete everything up to the word jquery, then I'll type .tablesorter.js. That'll link in the plugin. Let's duplicate this line. Let's come in here and let's replace jquery.tablesorter with design_the_web, then hit save. And now with our JavaScript files hooked in, next we'll start writing our custom script inside of the design_the_web.js file.