how to add flair to your site maureen enright, elyse kuriata, nathan boes, hodge
TRANSCRIPT
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.
• 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
• 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 an Image
• By Maureen
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• First you must open your browser, and visit the
Youtube web site, http://www.youtube.com • 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.
•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
Searching For and Selecting A Video
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• 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
• 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• 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
• 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
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
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:
<html>
<body>
<embed>
</body>
</html>
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
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
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
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
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>
</embed>
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…
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
• 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.
