1. CHAPTER 8: Enhancing a Website Session 1

2. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your website

3. Embed a YouTube Video

4. 1. Go to YouTube and select the video of your choice 2. Share button -> Embed 3. Copy the code and place it where you would like the video to appear in your HTML code. 4. Customize the settings: width and height

5. Practice: Embed a YouTube Video 1. Embed a relevant YouTube video of your choice in your HTML/CSS project website. 2. Customize the settings to make it fit.

6. Use Google Fonts Which font can I use on my website? “Common” fonts Web fonts Google Fonts

7. Use Google Fonts Go to http://www.google.com/fontshttp://www.google.com/fonts Select a font Click on the Quick Use icon corresponding to the selected font 1. Choose the style you want 2. Choose the character set you want 3. Add the link tag to your HTML page 4. Use the font with the font-family property in your CSS

8. Practice: Use Google Fonts 1. Select the Pacifico Google font 2. Use the Pacifico Google font for all your headings: h1, h2, etc. of your HTML/CSS project website.

9. Insert a Slideshow Examples of slideshows in websites.

10. http://classicalamericanhomes.org/millford-plantation-2/

11. http://www.lockerly.org

12. Insert a Slideshow Free Javascript code for slideshow : http://www.dynamicdrive.com http://www.javascriptkit.com/script/script2/jsslide.shtml http://www.jssor.com/download.html Tip: Prior to insert the slideshow, you should resize your images so all have the same width and height.

13. Practice: Insert a Slideshow 1. Find four images related to your HTML/CSS project website. 2. Resize your images in Fireworks so they all have the same width and height. 3. Select the Presentational Slideshow code from http://dynamicdrive.com/dynamicindex14/index.html http://dynamicdrive.com/dynamicindex14/index.html 4. Insert the Presentational Slideshow on one of your HTML/CSS project website 5. Customize the code to display your four images on the slideshow.