HTML Code for Adding Images to Your Website

Sometimes an image is better than 1000 words. Believe it or not, images can make your website looks better. So it is a good idea to add images to your website. Here you will learn what HTML code you need for adding images to your site.

HTML code for adding images to your website

The element you need here is <img>. It is an open HTML element, which means you don’t need to close it.

When adding images to your site, you also need to let the web browser know where to find them, and let the search engines know what the images are about. To make sure the images are displayed in the way you like, you also need to specify their sizes and alignments. These are the reasons why you need to use several attributes with the <img> HTML tag.

The attribute src can help you define the pathway where the image is located.

The alt attribute should be used when you try to describe the image. By using alt text, you can make your image more search engine friendly and vision-impaired people friendly.

If you want your visitors to learn more information about the image, you can use the title attribute. The title text will be shown on the screen when your visitors use mouse to hover over the image.

To specify the size of an image, you should use “height” and “width”. But if you use CSS on your site, you’d better adjust your image size using CSS instead of HTML, because it is more convenient.

When defining how the image should be displayed relative to its surrounding text, you need to use the align attribute. But the align attribute is phased out in HTML5. In HTML5, you need to use CSS to do the task.

Tip:
You can also use <hr /> to add a line in between of two images.

To increase the performance of images on your site, you need to use images in correct format, correct size and at correct resolution. Usually we use jpeg, png and gif image format. You should save the image at the same size as it is shown on your site. To make sure your image shown properly, you have to save it at least at 72 pixels per inch resolution, because it is the resolution for most computer screens. Of course to get better effects on high definition monitors, you need higher resolution. But higher resolution means larger file and longer download time.

HTML Code for Linking to a Specific Part of a Web Page

When designing a website, you should make the navigation on the site easy. When writing a long article for your site, you may start with a brief introduction summarizing what you are going to say in the article. You may list your post subtitles into bulletin points and link them to the corresponding parts of your content correspondingly. Here I am going to show you how to link to a specific part of a web page using HTML code.

HTML code for linking to a specific part of a web page
First, let us see how to link to a specific part of the same webpage.
You need to do two things: identify the part that you want to link to by using the id attribute and link to the part by using the href attribute starting with the symbol #.
Let me show you an example:
<a href=”#sub_title1”>Sub-title 1</a>
<a href=”#sub_title2”>Sub-title 2</a>
<h2 id=”sub_title1”>Sub-title 1</h2>
<p>Here is the content of the first section.</p>
<h2 id=”sub_title2”>Sub-title 2</h2>
<p>Here is the content of the second section.</p>


Second, let us see how to link to a specific part of another webpage.
It is simple. What you need to do is just to identify the part on the webpage that you want to link to using the id attribute, and add the webpage’s url in the href attribute right before the symbol #. For example, you identify a part on yourdomain.com using id=”top”, and when linking to it, you need to use href=”http://yourdomain.com/#top” in the element.

How to Remove Blog Name from Post Title on Blogger Templates

Blogger.com is a website where you can build a website for free. After creating your first blog and publishing your posts, you find there is no much search engine traffic to your blog. There are many reasons for your problem. One of them is that your blog post titles are not displayed in attractive ways on the result page of search engines. Usually you want to show your post title only, but the default blogger templates are set to show both your blog name and your post title. The question is “How can you remove the blog name from your blog post titles?”

How to remove blog name from your post title on blogger templates

Login to your blogger account and view your blog;

Click on the link “design” located on the top right corner of your blog;

On the design page, you will see the link “edit HTML” on the top left and click it;

On the next page, you will see the “edit template” window containing all the XML codes for your blogger template;

Use the search function “Ctrl + F” to find the line: <title><data:blog.title/></title>

And replace it with the following XML codes:
<b:if cond='data:blog.pageType == &quot;index &quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pagename/></title>
</b:if>

Click on the “save template” to save the change you have made.

If the above code doesn't work, use following code please.
My update:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Tip:
Before making the change, you should backup your original template first.
Before saving the change, you may want to use the preview function to see whether you XML codes can be implemented.

To confirm whether your blog name has been removed from your blog post title, you can check the title displayed on the top left corner of your web browser or you can run a quick search in Google or Bing.

Happy blogging!