How to add flair to your site l.jpg
Advertisement
This presentation is the property of its rightful owner.
1 / 22

How To Add Flair To Your Site PowerPoint PPT Presentation

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 How To Add Flair To Your Site

Download Presentation

How To Add Flair To Your Site

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 an image l.jpg

How to Add an Image

  • By Maureen


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, 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.


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:

<html>

<body>

<embed>

</body>

</html>


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

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 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>

</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 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.


  • Login