Creating Webpages

Today’s Topics

• Embed video

• Embed music

• More text formatting

• Wordpress

Embedding video

• Youtube makes it easy—www.youtube.com– Others – Vimeo, Google Video, etc.

• Upload your own videos to post on your web site or find something you want on your webpage

• Video owner does have option of not providing the code to embed video

• Let’s add a video to your Pictures page – open it in Notepad to get ready to edit it.

Embedding using youtube

• Go to youtube and find a video (i.e. search for funny dog)

Click Embed button

Customize video’s appearance

Make changes:

• Related videos? Maybe not on a sale video

• Aesthetics – border, color, size

Copy and Paste Custom Code

• (Left) click in the Embed field and it will turn blue

• Right click and select “copy”

• Go to Notepad file and Paste

• Save & check in browser window (Use Firefox)

Embedding Music

• Can be obnoxious.

• Go to http://www.midicenter.com/– (On your own: Google free midi download)

• Browse & find a midi file you want to put on your page

Follow instructions here to download. -Consider renaming w/easier filename to retype, i.e. music.mid-Save in your website directory

EmbeddingMusic

• Open notepad, and add the following text to the HTML document you want the song to play on:

<embed src=FILENAME.mid width=144 height=60> – Replace FILENAME with your file name

• Caution: starts a plugin which may or may not work automatically on everyone’s computer.

• Try Firefox if you have problems– Adjust height and width

• Differs in Firefox vs. IE. Experiment.

More text formatting

• <h1>Big heading</h1>

• <h2>Medium heading</h2>

• <h3>Smaller heading</h3>

• … etc on to <h6>

Lists

• <li>Define items to be bulleted.

• <li>2nd bulleted item.

List techniques to try

<ul>

<li>1st bullet

<li>2nd bullet

</ul>

<ol>

<li>1st bullet

<li>2nd bullet

</ol>

• 1st bullet • 2nd bullet

1. 1st bullet

2. 2nd bullet

Also trying nesting lists!

More formatting…

<em>This text is emphasized</em>

<strong>This text is strong</strong>

<code>This is some computer code</code>

Special symbols…

— em-dash &#8212;

© copyright &#169; or &copy;

® registered &#174; or &reg;

More: http://www.ascii.cl/htmlcodes.htm

Wordpress.com

• Primarily a blogger tool – entries by date BUT you can use it as a webpage and eliminate the “Date” part

• Sign up for a blog www.wordpress.com

• Go to your Dashboard

• Open your blog (Your blog name in the upper left hand corner) in a new window or tab by right clicking

• Settings General: Change site title and tagline

Wordpress Pages

• Create a new blog post: Posts Add New

• Pages Add New, i.e. Home

• Parent or Child pages – top level (“parent”) or part of drop down. Use Parent for Home page

• Customize Text and Publish

• Change Wordpress settings to make “Home” be the 1st thing that loads:– Settings Reading A Static page Home

Sidebar Widgets

• Appearance Widgets – Drag and drop existing widgets – i.e. your twitter

feed, a grid of posts, etc. – Text will let you add some personalized info

Appearance

• Change Header: Appearance Header – Can create custom image – Select a stock image to replace

• Themes: Appearance Themes – Change theme

Plug-ins

• Customize additional functionality – not available on free hosted wordpress.com– Anything you can imagine:– Share on Facebook– Translate– Auto signature etc– Spam control on Comments

• Also see: – Wordpress.org– GoDaddy hosting w/Wordpress installed