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: 

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.

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: 

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

As we discussed yesterday, in Paragraph Formating, "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 text formating.

Text Formatting

Following is an example of the code that can be used to make your text Bold, Italicized, or Underlined.  This code is courtesy of TXPoet, of Ft. Hard Knox, who inspired this series. This graphic also shows an alternate code for centering text to that we showed yesterday.

Strike, Superscript, Subscript

The following is an example of code that can be used to strike text, or to create ^superscript and _subscript.

Color

To add COLOR to your text, following is an example of code that will work.  To get your color code, just Google HTML Color Codes, and look on one of any number of color charts.

Links

The following is example of code that can be used to insert a simple hyperlink (link embedded in text, rather than displayed as a url), or a hyperlink that opens in a new window (usually preferred, because this keeps your readers on the original page while the 'visit" the link).

Tomorrow, we'll talk about embedded media (photos, videos), and some blogger protocol and etiquette for doing this properly.

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

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

So, for the next few days we're going to discuss some very basic HTML code that every blogger should know.  Today, let's talk about paragraph formatting.  Notice that every example below has a beginning tag, which begins with a "<" and ends with a ">", and an ending tag, which begins with "<", then "/" and ends with ">".

Paragraphs

Following is an example of the code that is placed at the beginning and end of a paragraph.  This code will automatically put a space between paragraphs in most blogging software.

Offset Quotes (Indented Paragraphs)

The following is an example of code that can be used to offset quotes, or indent paragraphs.

Lists

The fist set of code below ("ul") is an example of a bulleted list (the style and format of the bullet point is usually already set in your blogging software), and the second ("ol") is for a numbered list.

Alignment

The following is example of code that can be used to align your paragraphs, text, and photos to the right, left, center, or justified.

Headings

Headings formats are numbered in descending order, from largest to smallest. Therefore, this:

 Would look like this:

Heading 1

Heading 2

Heading 3

That's basic paragraph formatting.  Tomorrow, we'll talk about text formatting.

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