Adding images in HTML

In this post lets see how to add images in HTML Documents.  To add image you need a special tag called as img tag. And its special because you don’t need to use the end tag or closing tag.

That means instead of using this code :

What we will be using is the code given below.
Just by transferring forward slash or f-lash to the end of the opening tag.

Now if we go ahead and add something like this :

It wouldn’t result in anything significant but just a blank page. So to add an image, we need to add attribution to our img tag. The attribute which we are going to add is src. Now src isn’t that difficult. It simply means source. So you can add src just like any other attribute. See the code below:

Now in the above code we have our tag ready. And to add a image you just need to specify the URL of the image between the quotation marks. So if you need to add image of codefap logo then just copy the url of the image. Which is : http://www.codefap.com/wp-content/uploads/2012/10/Web-logo.png

After copying the URL, just paste it between quotation marks. So the final code will be :

And it would look like this :

If you have any doubts, feel free to leave a comment below. I would reply as soon as possible. Or you can watch my video tutorial for adding images to html documents :

Click here to watch How to Add Images to HTML Documents

Thumbnails Not Working When Sharing A Link On Facebook

If you are experiencing problems while sharing a link on facebook which has a image associated with it, then this post can help you out.

If you don’t know what i am talking about then let me explain, For instance lets say you want to share a blog article link which has a thumbnail associated with it. But for some reason when you share this link on facebook, the image or thumbnail just doesn’t show up.

This might happen because facebook using cache to store its information.

Note (definition of cache by Wikipedia) : A web cache is a mechanism for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag.

If you ask me why facebook uses cache, then i guess the definition of cache itself answers the question. And since there are more than 500 million users online, caching is important factor of facebook. Well now getting back to our problem.

Suppose if i want to share the link to my article on facebook. What i will do is copy the URL from the address bar and paste it in facebook status box. Now facebook is supposed to get the image from the link. But it doesn’t. Check the image below :

Now what you can do is just visit https://developers.facebook.com/tools/debug

And just type in the link in the box and hit debug option. Refer image given below : 

When you hit debug, you should get some details on your screen. Don’t bother to read everything over there if you aren’t really interested in understanding the facebook open graph type of stuff. Just find the og:image property on the page.

If your link has a image associated with it, then it will appear in front of the og:image property. If you don’t see any image in front of og:image property, then your link has no image associated with it. If image is associated with your link, then and then only the link will add a image thumbnail while sharing a link on facebook.

In the image above you can see i have two images in front of og:image property. This is because my link has image associated with it. And after debugging my link, i have refreshed the facebook cache. So now facebook will display my image on posting the link.

So as shown in the image above, debugging my link and re-posting it in the status box helped me to get the facebook cache refreshed for my particular link. And this helped me to get my image as the thumbnail of the post, which was not appearing previously.

Note: You can use debugger to debug any links which are showing incorrect information when you paste them in the status box. For example, if your site is in maintenance mode and you paste your link in facebook status box. Then facebook will cache your link description as maintenance mode. And this will stay as it is even when your site is removed from maintenance mode. So in order to fix such a problem, you can use facebook debugger for your link.

Adding Hyperlinks in HTML

In this post lets see how do we add hyperlinks and images to our HTML documents.

You can add hyperlinks simply by using the <a> tag. Consider the example given below:

In the above example, we added “Hey take me to Codefap” text between the a tags. However the text is appearing as a normal text. If we want to convert it into a link. We need to add a HREF attribute to the a tag.

Now attributes might be new concept for you guys. But its very simple. Consider attributes as combination of keyword and values which give additional information about the tag.

So now lets add HREF attribute. I will just show the part of the code to which we are going to make the changes. Everything else remains as it is. Only the a tag changes. So here it is :

So you can see, using HREF attribute we provided additional information to the a tag. Now it converted our simple text to a hyperlink. And for your information, HREF means Hypertext reference. It just provides the reference address, so that when we click on the hyperlink we are directed towards the reference address.

Want a Video Tutorial for this Post? Check this out :

How to shutdown a Windows 8 PC ?

Every windows user has a habit of shutting down their PC by accessing the start menu. But in Windows 8 there’s no start menu. Instead there is a start page. And even in the start page there’s no option to shut down your PC. So how exactly are you supposed to shutdown?

A regular windows user who has upgraded to windows 8 will be definitely confused in this situation. And if you are one of them then this article is for you.

Just follow these steps to get to the shut down option :

  • 1) Move your cursor to top right or bottom right corner of the screen. A menu will appear, which i would like to name as the new start menu of Windows 8. The start menu i am referring to is displayed in the image above on the left hand side.
  • 2) You have to select Settings option from this menu.
  • 3) This will open up blue panel on right side as shown in the image above.
  • 4) You can click on shut down icon to get ‘sleep, shutdown, restart’ options.

So in this way you can shutdown your computer in 4 easy steps. But even these 4 steps are too much for a layman. So i would tell you more about How to shutdown your Windows 8 PC in just 1 single click in my next article.

Floating Social Share Bar for WordPress Blog

If you would like to add a floating social media share icons bar to your wordpress blog then this post will help you out. I have also written a post on how to add floating share bar to your blogger blog.

Click here to see How to add floating share bar to your Blogspot Blog

I have added a floating share bar to my blog, that is on codefap. Its live on my blog while i write this post. But i hope that i haven’t removed it while you are reading this post. If its live, you can see it on the left hand side of my blog.

To add this floating share bar to your posts, you have to edit the single.php file of your wordpress theme. You can access this file by following these steps:

  1. Go to admin dashboard
  2. Click Appearance > Editor > Single Post
  3. Find : <div class=”entry”>
  4. And just below it, paste the code given below.

Save your file, by clicking ‘update’ button at the bottom of the page. And you are done.

Now go and visit any of your ‘post’, and the floating bar will appear on the left hand side of your posts.

How to change position of the Floating Bar ?

To change the position, you will need to edit this part of the code:

If you want to position it properly with respect to your page, then you will need to change the property named margin-leftCurrently it is margin-left: -95px; You can change the value and experiment it on your blog to get your desired result.

If you want to position it to right hand side. Then just change float:left to float: right. And margin-left to margin-right. These are all the CSS rules which define your web page. To be specific, just the floating bar in this case.

So when you change values and experiment with the code given above, you will learn a lot more than just adding a widget. By experimenting you are not just learning how to add a widget, But you are also indirectly learning CSS.

If you have any doubts or questions, feel free to comment below.

Windows 8 Context Menu Problem

In Windows, I have a habit of refreshing my computer by right clicking on my desktop. But in Windows 8, When i tried to right click on my desktop to get the context menu, it just didn’t happen. The context menu didn’t appear. Sometimes it did but it took like 30 seconds or more for it to appear on my screen. And it was very frustrating.

I found a solution for that, which i have shared in a video. I guess i am not much audible in it, so please increase the volume of your computer to understand what am i saying.

If you don’t want to watch the video. You can follow this post to fix the context menu problem.

  • You need to open up the registry editor to fix this problem.
  • To access registry editor. Just open up your Start Page in Windows 8.
  • Type in regedit and press enter.
  • This will open up the registry editor.
  • Now navigate to this directory:
  • HKEY_CLASSES_ROOTDirectorybackgroundshellexContextMenuHandlers
  • Then delete any other folder in that directory except the new folder.

Then close registry editor.

Try right clicking on your desktop now.

If it doesn’t work then wait for a while and try again. And bingo ! your context menu will appear.

Perhaps you would like to read,

1) Whats new in Windows 8 Professional ?

2) The astounding features of Windows 8

Whats new in Windows 8 Professional ?

Recently i have installed Windows 8 Professional on my Computer and i just loved it. I have made a few videos reviewing various new features of windows 8. I would share some of them in this post. Please check them out to know whats so new in windows 8.

The video below will help you to understand the new Metro Interface of Windows 8

The video below explores the new desktop side features of Windows 8

If you like the videos, please subscribe to codefap’s youtube channel : http://www.youtube.com/c0defap

Read the old post: The astounding features of Windows 8

And do you know How to check if windows is activated Permanently?