Creating Webpages. Today’s Topics Embed video Embed music More text formatting Wordpress.
-
Upload
alexis-blake -
Category
Documents
-
view
236 -
download
0
Transcript of Creating Webpages. Today’s Topics Embed video Embed music More text formatting Wordpress.
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 —
© copyright © or ©
® registered ® or ®
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