Categories:

Posted on March 17, 2010 by Jennifer Pointer

 

 

As we discussed earlier this week, in Paragraph Formating and in Text Formatting, "HTML" is "hypertex markup language," and is code commonly used on websites and blogs.  Most blogging software now has a WYSIWYG ("What You See Is What You Get") editor, which means that you don't need to be an expert in HTML code to blog.  However, there are times when knowing the basics can come in very handy - especially when you're trying to fix formatting errors in a post, or adjust something minor in one of your sidebar widgets.

 

Today, let's talk about embedding videos and photos, and how to do that in a way that won't get you in trouble legally, or with the other bloggers in your network.

 

Videos

 

To embed a video in your post, you will first need to upload it to someplace online that has a url.  Your blogging or website software might allow you to upload the video to the servers your blog or website is hosted on.  If not, use a video-sharing site online.  YouTube is the most popular, and is the most widely-accepted by blogging and website software.  Then, once your video is online, find the "embed code,"  (it's usually in a "share menu) and copy and paste that into your blog post in HTML view.  

Note, this will not work in some blogging and website software  If it does not, you will need to use your WYSIWYG view, and follow the instructions for embedding video.

 

Photos

 

Photos are a little more flexible than videos.  To embed a photo in your post, just like with videos, you will first need to upload it to someplace online that has a url.  Your blogging or website software might allow you to upload the photo to the servers your blog or website is hosted on.  If not, there are any number of photo-sharing sites that you can use.  Once you have your photo's url (usually called a "direct link" which will look something like this: http://photobucket.com/myphoto.jpg), you can embed it in your post, using the following code: 

 

HTML Photo Plain

 

Now, let's say you want to align it with your text on the right side.  You would add: class="alignright"  as shown below. (If you want to align in on the left, you would replace "right" with "left," or if you want to center it, you would replace "right" with "center...see how that works?)

 

Maybe it's too large, and you want to resize it from its current dimensions to 150x360.  To this, add: height="360" width="150" as shown below.

 

Maybe it's too close to your text on the right, and you want to give it some space. I usually give mine a 10-pixel space all around.  This is done by adding: hspace="10" vspace="10" as shown below.

 

HTML Photo Formatted

 

Now, let's say you want people to be able to click on your photo, and be taken to another site, or another place on your site.  Turn your photo into a hyperlink by inserting it the way you did your text, in text formatting earlier this week: 

 

HTML Photo Hyperlink

 

Etiquette

 

If you are using photos or videos that you did not create, there are some rules of etiquette to follow, to avoid plagiarism complaints. 

 

  • Always link to the source of your photo or video, if known.  Most video-sharing sites (including YouTube) include these links in the embed code, so this will be done automatically on videos.  For photos, you will need to inlclude a hyperlink to the source of the photo.  If you're not sure of the original source, linking to the site you got the photo from (thanking them by mentioning their name) is an optional courtesy, and can be a good way to build a network.
  • Never not "hotlink," without permission.  Hot linking is copying and pasting the photo directly from one website to another (rather than saving the photo to your own photo-sharing account, then embedding it from there).  If you do this without the permission of the webmaster on the site where the photo is stored, you are stealing that blogger's or site-owner's bandwidth, and this is considered very inappropriate.  In addition to being poor etiquette, you run the risk that the original blog or website might delete or change the photo, which will delete or change the photo on your website.

 

So that's basic HTML for blogging.  Do you have any questions, or additional tips you'd like to share?  We'd love to hear them!

 

Also see:  Setting Yourself Up for Copyright Infringement

 


 

 

Jennifer PointerJennifer Pointer (e-mail) is a trainer and tech writer in Tulsa, OK. She promotes a simple, a low-tech approach to effective online profile management, search engine optimization and social networking. Her weakness is the mocha frappuccino.

Share and Enjoy :
FacebookTwitterLinkedIndel.icio.usDiggReddit

Want to work with us?
Get in touch

817.283.3324 Facebook LinkedIn Twitter