chapter 8: enhancing a website session 1. objectives embed a youtube video in your website insert a...

CHAPTER 8: Enhancing a

Website

Session 1

Objectives

• Embed a YouTube video in your website

• Insert a slideshow in your website

• Use Google fonts in your website

Embed a YouTube Video

Embed a YouTube Video

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

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.

Use Google Fonts

• Which font can I use on my website?• “Common” fonts

• Web fonts

• Google Fonts

Use Google Fonts

• Go to http://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

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.

Insert a Slideshow

• Examples of slideshows in websites.

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

http://www.lockerly.org

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.

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

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.