What a website's source code tells about it

In this post, written specially for non-techie bloggers and website owners, we would discuss the following:
  • What is source code and how to obtain it.
  • What information can we get from source code
  • How to use that information for improving the website's quality

Source code: the real website

All websites are written primarily in a language called HTML. Modern websites and blogs do have large chunks of scripts, widgets, modules etc written in other languages; yet, HTML remains the backbone.

HTML and other web languages of the website or blog are for the browser (IE, Chrome etc) to decipher while you see the content the way you can understand

You can easily find how the HTML code of any webpage looks like. Open a webpage, right-click on a plain area of the page and depending upon the browser, take this action: On IE/ Edge, choose 'View source', on Chrome/ Firefox, choose 'View Page Source'. On Safari, you should have 'Develop mode' enabled through 'Preferences'. A menu item appears and gives option to view source code.

The code looks like the image given here but even for a small page, it might run into hundreds of lines. In addition, there are so many elements on the website that are not part of this code but are linked to codes elsewhere.

A brief appreciation of the source code

Non-techie bloggers and website owners are of course rarely concerned with what is going on in the background but use UI (user interface) provided by the host/ platform. When we create a website or blog, even the most committed coder seldom writes the code word by word. Even big websites, written by techies, depend mostly on content management systems (CMS) or other interfaces than writing each word of the HTML code.

Then why should we bother to learn the code at all? 

Because it helps you understand various elements of the website better; that in turn might help you in SEO, better highlighting elements, doing some small tweaks that might not be given by the host/ platform, and some other simple tasks.

All HTML pages are written according to a strict structure that must be followed. 

You can do an interesting exercise that would take just two minutes but you will know some very basic elements of the source code and HTML.

Select the entire source code of any webpage, and paste it on a word processor such as MS Word. Look for <head>, color it red; look for </head> and color it red too. Similarly find <body and color it blue. Find any one occurrence of these expressions and color them green:  <meta , <script , <img , <a href .

All HTML documents (web pages) start with <html> and end with </html> This type of expressions (closed inside <,>) are called tags. All code is written between these two tags. On blogging platforms, site builders and CMSs, these codes are written by the software based on what you write in a human readable language (e.g. English). If you are working on Blogger platform, you can see blog's code by going to Template>Customize HTML. You can see a post's code by clicking on HTML button at the top left of the post editor.
In the top part of the source code, you will find <head> and after a few lines, </head> tag. Major styling codes are written within this area. When affiliate sites want you to put their code on your website for authentication, you should paste their code just before the closing </head> tag. Major meta tags that are prescribed by SEO experts are also to be put here. Look at various <meta...> tags; one of these might have been colored green by you in the present exercise. When you put 'description' for the blog and the post on Blogger and Wordpress, these land in <meta description> tag.

All that is outside the head portion comes in the body of the document, within the opening <body...> and closing </body> tags.

It might help sometimes to know a few useful tags. Let's see just a few:

You might have read in SEO articles that search engines cannot read pictures, and therefore you should put an alt tag on them to make them searchable and therefore coming on search pages. ALT is in fact not a tag but part of image tag written as <img> and is therefor 'alt attribute of img tag'. it stands for 'ALTernate' and tells browsers what is contained in the image. In the first code below, there is no alt attribute while the second code has this attribute.
1.  <img src="http://abc.jpg">
2.  <img src="http://abc.jpg" alt="bridal-shoes">

Blogger and Wordpress let you give a caption or description of any image that you put on a post and automatically give it a search description. Blogger additionally allows you to give a specific alt expressions when you right click on the image on the post editor, then go to Properties and then to alt.

Putting a relevant alt expression on the image makes it readable for search engines and screen readers (for visually impaired visitors). In the above example, the imaginary blog on women's shoes had this image of bridal shoes.) 

Remember, though Blogger allows putting alt expression through a text box as said above, it does not allow this on other images. You can easily put alt=.... attribute to any image by going to the HTML version of a widget or HTML of the blog itself (Template>Customize HTML).
<script> is used for putting a script on the blog. You can install Google Analytics and many third-party scripts, generally in the head portion of the blog's code. However, use scripts only from highly dependable sources such as Google, as some scripts might be harmful, some might steal your data and some might take visitors to their sites through you. In fact, that applies to all types of codes and widgets.

A bit about <a href="...">xyz</a>. This tag is used for hyperlinking. The linked text is placed in place of xyz and the link URL is placed within inverted commas. You can use this tag for putting links where it is otherwise difficult to put a link or the blogging platform does not have a button for that.

Hope, this little knowledge of source code of your blog makes you a bit more comfortable with HTML. You can do some more quick tweaking on your blog using simple HTML as given in this link.

For keen learners and experts, the source code has minefield of information about various elements, how they render, bugs, and so on. This and 'Inspect Element' option when you right click on a webpage, give you all information about each little bit of the webpage. But let's leave that for techies!

How to create a broken link (404) page on Blogger blogs

As a blogger, you must have faced situations when a link given by you on a post went dead and you noticed it when you reviewed your links a few months later. Or when you updated an old post and gave it a new name, and earlier links to that post showed up a 404 error.

Well, if you didn't face such problems and you have not seen a 404 error page, type the URL given here on a new tab on your web browser: www.indiantopblogs.com/ checkbrokenlink.htm. You will be taken to a page that announced that such a page does not exist. 
There are many reasons for a 'Not Found' message, which is called 404 error in web parlance: wrong typing of the URL (as in the example above),
the linked page going dead because the page has been removed or moved, etc.

You as a blogger has no control over people typing your blog's URL wrong. What is embarrassing and  harmful when links given on your blog are broken or dead. You must check your blog's broken links often and correct them. In the linked post, we have discussed the issue of broken and dead links in detail. 

In the present post, we'd discuss how to make the broken link experience less painful for the visitor and therefore less harmful to your blog's reputation.

There is a standard 404 page provided on Wordpress and Blogger free blogging platforms. On Blogger, you can modify the page to your liking; however the free Wordpress.com does not allow that.

How to customize the 404 error page on Blogger

Do enter your blog's URL in a tab on your browser. Now, put something like /broken.htm after the URL as given here (www.indiantopblogs.com/broken.htm) and press ENTER. Now click on the wrong URL www.indiantopblogs.com/broken.htm given above. See the difference between the error pages you get in the two cases. In our case, you find an apology from us, followed by a link that takes the visitor to a page where we have listed all our posts by subject. We feel that the visitor who has by mistake got the 404 error will visit a page he would value.

How do we do that?

a. On your Blogger dashboard, go to the blog in question, go to Settings. Now, go to 'Search preferences'. Click on 'Custom Page Not Found' and you will get a text box that accepts HTML.

b. On a notepad, write down the best that you want to put there: It may be some text followed by a link to a search page, the homepage or a static page. You can also put an image. 

c. Copy-paste all the notepad text into the text box. The total text cab be up to 10,000 characters but do not clutter the box with too much text.

d. Decide which part of the content you'd make bold. Also decide what text you'd like to link to other resources. Choose only one or two such expressions, no more.

e. For giving link to the desired text, which will be the page you want people to visit in case of broken link, put that in the structure as given below:
<h3><a href="http://www.indiantopblogs.com">Best Indian Blogs</a></h3>

In place of Best Indian Blogs, give your blog's title or something else; in place of http://..., give the URL of the page intended to be linked. You can just put <h3> and </h3> at the beginning and end of the text you want to be highlighted. In general, do this around a good keyword or your blog's title. In this example, we have put these tags around the title with link. 
Save. If you do not like the boldness of the text, try <h4>, </h4> tags.

f. In case you want to put an image in addition to text,
put the image link in the following form wherever you want to place the image:

<img src="http://www.https://lh3.googleusercontent.com/k/j42/new.png...abracadabra.png">

Change http://etc... into the correct URL of the required image.  
All images you put on the Blogger blog are stored in Picasaweb albums and have URL something like this:  


A useful tip to put an image on Picasaweb and know its link is given here: (i) Go to http://picasaweb.google.com/, upload image from your computer, right-click on the image and copy image location. (ii) If the image is already on your blog, open that post, right-click on the image and then click 'image location' (Firefox) or 'image address' (Chrome) or 'copy' (IE, Edge).

g. Before you settle the 404 page, test it. On a new browser tab, type the wrong URL as done above and see the resulting page carefully. Correct the problems by again going to 'Settings'.

social media updates- bloggers under threat, Zuckerberg's accounts hacked, social media fatigue

Ethiopia to enact law to punish for defamation on the net

A new cyber law in Ethiopia is worrying bloggers in this country. Ethiopia is popular among people watching use of laws by authorities to silence political dissent. Popular for wrong reasons, of course.

The proposed ‘Computer Crime Proclamation’ is feared to give the government more powers to book individuals and organizations critical of its policies and actions, because this law does not have enough safeguards for protection of the freedom of speech. 

The ministry of justice has clarified that the law will not hurt people expressing their views on the web but will be used against defamation. Clarification notwithstanding, the fears of bloggers and other citizens are not misplaced as a number of activists and bloggers have been booked under severe laws in the past reportedly just for criticism. We earlier reported on jailing of Zone9 bloggers

The experience the world over is that such laws can easily be abused by authorities to fix opponents. Last year, the Indian Supreme Court struck down a controversial Section 66A of the IT Act for violating freedom of speech. This section had become a handy tool with local governments and police for harassing bloggers and writers on flimsy grounds.

Pakistan's proposed cyber law seen as a farce

In Pak, a committee of the National Assembly has approved a law that provides for severe punishment for cyber crimes – actions that can easily be attributed to bloggers and social activists opposing those in  power. 

The proposed law gives wide powers to block content on the net, impose penalties and book people, on the pretext of national security, terrorism etc which are known to be interpreted to the liking of the authorities. 

Pakistan’s leading newspaper Dawn has called the law  ‘a dangerous farce’.

Israeli activist blogger ruffles feathers of the  justice system, once again, and goes to jail

An Israeli blogger (who is also a journalist) was put in prison last week for obstructing justice. She has been freed but feared to be under surveillance.

Lory’s crime: she wrote about a minor’s identity who is supposedly at the risk of being kidnapped by his father who had lost a case against the child’s mother. So, Lory was arrested for fear of ‘obstructing justice’.  

After her friends approached higher authorities, including international human rights organizations, Lory was released but is feared to be under police surveillance.

Lory has been writing against wrong delivery of justice, government officials’ corrupt actions and so on, without bothering for court directions to keep mum. Last week she wrote against arrest of Palestinian journalists and feared that the state would then swoon on its own - a prophesy that has come true too soon.
[This report is an adaptation of a report on redressonline.]

When Facebook's advice on web security is not heeded by it own boss

Mark Zuckerberg’s Twitter and Pinterest accounts were hacked earlier this week.

If you thought, Facebook’s boss cared for Facebook’s advice about having strong passwords and not using the same password over different accounts, you were proved wrong by Mark. He used a simple password ‘dadada’ on Facebook, Twitter and LinkedIn, and once the password came into the hands of hackers through a LinkedIn leak, they could easily break into his other accounts.

Luckily, mark is not very active on these accounts and the hacking has not done much damage to him, except to his reputation as a disciplined net user.

People getting wary of social media?

A recent study by SimilarWeb shows that people are spending less time on social media apps on their mobile phones. 

The study covers a number of countries (the US, Brazil, the UK, France, Germany, Spain, India, South Africa and Australia) and major social networks (Facebook, Snapchat, Instagram, and Twitter) on Android devices for about a year. 

The study found that as compared to the first quarter of 2015, time spent on social media apps has gone down for almost all platforms across all countries.

A safe inference from the study can be that perhaps leaving aside places where people are still in the first stage of adoption of smart devices and social networks, people might be developing social media fatigue. 

You can see the study report here.