How to add flair to your site
1 / 22

Flair Tutorial Powerpoint - PowerPoint PPT Presentation

  • Updated On :

How To Add Flair To Your Site Maureen Enright, Elyse Kuriata, Nathan Boes, Hodge Tutorial Overview Adding images, video, and music to your site can make your site a more exciting, entertaining, and interactive place for users to visit.

Related searches for Flair Tutorial Powerpoint

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Flair Tutorial Powerpoint' - Ava

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
How to add flair to your site l.jpg

How To Add Flair To Your Site

Maureen Enright, Elyse Kuriata, Nathan Boes, Hodge

Tutorial overview l.jpg
Tutorial Overview

  • Adding images, video, and music to your site can make your site a more exciting, entertaining, and interactive place for users to visit.

  • This tutorial is meant for users who have an html site and are familiar with editing the code of the site.

Things you will learn in this tutorial l.jpg
Things you will learn in this tutorial

  • How to add an image to your site

  • How to add a Youtube video to your site

  • How to add background music to your site

How to add a youtube video to your website l.jpg

How to Add a Youtube Video To Your Website

This section of the tutorial will show you how to add (or embed) a video from Youtube onto your already existing web site. You will also learn how to resize, label, and position the video to where you would like to see it on your site.

Beginning your video search l.jpg
Beginning Your Video Search

First you must open your browser, and visit the Youtube web site,

Once you are at the site, type the name of the video you are looking for in the search bar at the top of the page and click on the search button.

Slide7 l.jpg

Searching For and Selecting A Video

  • If you are unsure of what video you want to post, you can type in a subject for the type of video, such as “funny video,” or whatever phrase describes the type of video you want to post to your site.

  • In this case, specifically we are looking for a video called “Da Mae Mae”

  • Once you have searched for your video, click on the highlighted title of it to take you to the video’s page

Embedding the code into your site l.jpg
Embedding the Code Into Your Site

Once you have reached the page for your video, find the embed code and copy it.

Paste it into your html page using Notepad.

Sizing the video l.jpg
Sizing the Video

Once the code is embedded into your page, you can resize the video by adjusting the width and height in the code.

width="720" and height="480“ are both recommended sizes, but you can alter this size to be how big or small you want.

Adding a title to your video l.jpg
Adding A Title To Your Video

To add a title to the video, you must add an <h1> tag that will appear before the embed code. Insert <h1> with the title of the video and close it off with </h1>

To add a description to the video, insert <p> and a description of the video. To close it off add </p> Insert this after </object> in the code

Aligning your video l.jpg
Aligning Your Video

To align the video flush left, center, or flush right, you must insert a <div> tag.

This tag will go before the title (or <h1> tag) and after the </p> tag you just inserted.

To center the video, insert <div align="center"> before the title at the very beginning of the code, and place </div> at the very end of the code. To align the code left or right, delete the word “center” in the code, and insert the word “left” or “right” where the word was.

Conclusion to adding a youtube video to your site l.jpg
Conclusion to Adding A Youtube Video To Your Site

You are now finished adding your Youtube video to your web site.

Don’t forget to save the changes you made in the code of your html site.

Enjoy the added flair of a Youtube video for your page.

A little extra pizzazz l.jpg

A Little Extra Pizzazz

Your audience is looking for excitement. Make this happen on your webpage by adding a song, jingle, or sounds to the background that will enhance their web-browsing experience.

Also, learn how to make your music start automatically, loop any number of times, and hide inside the code of the page.

Embedding the object l.jpg
Embedding The Object

Background music on your page will exist as an object within the body, meaning you have to embed it inside the page. Start like this:






Adding the music l.jpg
Adding The Music

Now, you get to pick the music you want playing behind your page. Add the source of the file like this:

<embed src=“amusicfile.wav”>

Any .mp3 .mid or .wav sound file will work, but keep in mind that larger files will take longer to load. If the sound file is not in the same folder as the page it is on, make sure to put the entire file extension in the html tag.

Autostart l.jpg

You can choose if your music will start as soon as the page is opened with this property:

<embed src=“amusicfile.wav” autostart=“true”>

Putting “false” instead will only allow the music to start when the user clicks the play button on your page.

Looping the sound l.jpg
Looping The Sound

To have your background music loop, add this to the tag:

<embed src=“amusicfile.wav” autostart=“true” loop=“true”>

Putting a number for this value will only allow it to loop that many times, or “false” will only play it once.

Hiding your noise l.jpg
Hiding Your Noise

To make the player invisible on your site, hide it like this:

<embed src=“amusicfile.wav” autostart=“true” loop=“true” height=0 width=0>

If you don’t want the player entirely hidden, adjust the number values to the size (in pixels) you want the player to be.

Finishing the job l.jpg
Finishing The Job

Once you have adjusted the properties of the tag to your liking, finish the embedding of the object like this:

<embed src=“amusicfile.wav” autostart=“true” loop=“true” height=0 width=0>


This object should play amusicfile.wav as soon as the page loads and loop infinitely with no player visible on the screen.

If all else fails l.jpg
If All Else Fails…

Double-check your code if you are having trouble. You may want to try removing the properties from the tag and adding them again one at a time to see which one is giving you problems. To abandon all hope and stick with simpler code, add this instead:

<a href=“amusicfile.wav”>Musical Madness!</a>

When users click on the “Musical Madness!” link, your amusicfile.wav will play, giving your site its daily dose of flair

Conclusion of tutorial l.jpg
Conclusion of Tutorial

  • Adding images, videos, and background music to your site are all ways to improve the look and interactivity of your site.

  • We hope you have found this tutorial helpful in your quest to add flair to your site.