1. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science Wednesday: Part 2 Creating a Mashup Important: read the entire presentation before attempting to do any of it.

2. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science A Mashup: exercise for the afternoon section  Mashup: aggregate content or functionality from existing websites to create a new and more informative page on a certain category of information.  Consolidates data, links, images into a one-stop-shop information portal.  Should be value-added than the original sites from which info is being pulled.  In preparation for the this afternoon’s exercise: Think about what you want your mashup to be … some examples  your passion  something./ some place about which you would like to learn  academic  professional  make some notes, draw a general outline  see my sample mashup and the HTML code in the following slides and use that as a guideline Millersville University Dr. Nazli Hardy

3. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science Have you read through the entire set of slides before starting?

4. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science Creating your Mashup: first steps  You can use the online editor to start  I suggest that you start creating your mashup by copying the code from my sample mashup (see next slides) – and then complete and customize the code for your own mashup (see Figure 2)  Once you are done and want to save, follow the next steps (use the slides at the end for a visual guide)  Open Notepad (from the ‘start’ menu in the Windows environment)  Save it in your EDW 647 folder as LastName_FirstName_Mashup.txt e.g. Hardy_Nazli_Mashup.txt  Then save it again – this time as LastName_FirstName_Mashup.htm  You should be able to open the.htm file using the browser of your choice (double-click to open or right click for more options) Some reminder tips  save the.txt file again (ctrl S) and view the.html file. If you keep your browser running, you only need to reload the page to see the changes.  continue adding a little at a time, checking to see that it displays as expected.  to use an image that is online for your webpage, right-click on an image, click on ‘properties’ and then copy and paste the URL you see, or copy URL directly  You may need to retype quotations on the HTML editor or NotePad

5. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science My Sample Mashup: Figure 1 source: http://herbarium.millersville.edu/liana/help.htmhttp://herbarium.millersville.edu/liana/help.htm

6. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science HTML Code for My Sample Mashup (1/2) Dr. Nazli Hardy - Mashup Back to Dr. Hardy's Homepage Parthenocissus quinquefolia (Virginia creeper; Vitaceae) Distribution Maps Global United States (USDA PLANTS Database) Other Information Wikipedia article USDA PLANTS page Millersville University Dr. Nazli Hardy

7. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science HTML Code for My Sample Mashup (2/2) PA Flora page Google Scholar Articles GenBank search Images Millersville University Dr. Nazli Hardy

8. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science Screenshot on HTML editor

9. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science Creating your Mashup: Figure 2 (partial code part 1) Parthenocissus quinquefolia (Virginia creeper; Vitaceae) Distribution Maps Global (GBIF) United States (USDA PLANTS Database) Replace everything in green with your own topic (remember, your actual code should include the proper HTML tags as seen in my complete code in the previous slides. This is just partial code to allow you to replace my links and wording with yours). source: http://herbarium.millersville.edu/liana/help.htmhttp://herbarium.millersville.edu/liana/help.htm

10. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science Creating your Mashup: Figure 2 (partial code part 2) Other Information Wikipedia article USDA PLANTS page Google Scholar Articles GenBank search Images source: http://herbarium.millersville.edu/liana/help.htmhttp://herbarium.millersville.edu/liana/help.htm

11. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science A Word on Frustration with HTML (and programming)  You are in good company.  There is no expectation for you to become proficient in HTML – just a general understanding of the underlying language of the Web  You do not have to complete this assignment by today or tomorrow. Work on it this week and next.  Email me with specific questions or concerns. I have taught this class for several years, and the students get through this unharmed and unscathed.

12. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science To Save your Mashup …  Use the next slides as your guide

13. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science

14. Introduction to HTML Dr. Nazli Hardy EDW 647Millersville UniversityDepartment of Computer Science