Make that Image Clickable - Chapter 8

It’s great that now you know how to add images to a website just like you must have seen on some other websites. But you must have also noticed that those images were clickable. Right?

By Clickable I mean to say that when you click on that image it may take you to new webpage or even a new website.

So how do we achieve that functionality on our website? Below are the details of

• What are Clickable images?
• Why they are important?
• How to use them on our website?

What are Clickable images?
Clickable images are those hyperlink images that contains link to some other webpage / website in it. If you click on it, you will be redirected to somewhere else.

Why they are important?

You can make an image such that on clicking on it will redirect you to new URL. They can basically used on Homepage of a website.  Just like Homepage of Pinterest.com . You can view lots of images on main page and on clicking of any image will take you to its actual article/website.

Eg: Click on this link http://www.pinterest.com/fresherstalent/ you will see lots of images posted by me. On clicking of any image it will redirect you to FreshersTalent.com.

How to use them?

Just like any other HTML tag, to make Hyperlinks / links on a webpage <a> tag is used. It also has it Closing Pair/ Tag. So it goes like this <a> </a>.

 Like <img> tag, <a> tag also has its own attribute that tells the link exactly where to go/redirect.

As we used src for <img> to tell the source URL of that image, we use href in <a> tag to tell where this Hyperlink should refer to. Basically the Hypertext reference for that image. Below is the syntax:

<a href = “URL”> YOUR CONTENT </a>

URL - is any URL/Web address that you want to redirect. Eg. You can type www.FreshersTalent.com instead of that URL.

YOUR CONTENT can be your an image or even a simple text.

You must have seen in many website article that to read more Click Here and on clicking it you are again redirected to new webpage.

So basically you can convert anything into a Hyperlink in HTML.

For Images:

<a href =”URL” >  <img src=”Image URL”/> </a>

Replace URL with any web address. Like www.FreshersTalent.com

And for Image URL you can use any URL. Like

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYskR6impVm93n1AqdTBp8e1T_aF-1eM6dOzcE-7gvt7Sf-yoPBWSvF4J9ux7XJ3pzU3ArbksEGbbpJPfG5b1sjQBOHMUi35hd7kRizutXrlXG1Xo7R0WBKPJCilJhbAKQN80ihEYW0IWg/,10110000ef8dffff/Freshers_Talent.png

Eg : 

For Text Link:

<a href =”URL”> ANY TEXT </a>

Eg: CLICK HERE

For any query related to this topic,please leave comment.

Do not spam as it will be removed.

Different Parts of Body (Headings) - Chapter 5

Chapter 5

(This section also covers the knowledge about types of Heading used in a Website )

You must know, HTML allows us to have more than 1 heading size for our website. There are 6 heading sizes.

But Let's first understand 

• What are Heading
• Why they are important
• How to use them.

What are Heading

For understanding HTML Heading, Let's consider any new paper. For any any news or article there is a Headline of news on top and then rest of news in paragraphs.

The most important news Headline is the biggest and boldest. Same is the logic behind HTML Heading.

Why they are important 

When we create our website we write lots of information / articles on it. In any article we have to give its Title for user readability. This can be achieved by using HTML Headings.

For eg. Let's consider this very on article on HTML Heading that you are reading right now.

The Title for this article is Different parts of Body (Heading). This gives any idea about what this article will contain. This is achieved by HTML Headings.

How to use them

To use HTML Heading, we have Heading Tags. Its very much similar to any other HTML tags.

There is one Opening Tag and one Closing Tag. Eg.<h1> </h1>

See below example for better understanding.

More about HTML Headings

Here <h1> is the Boss and <h6> is a underdog.

For any concern or queries,please leave your comment/message below.

Introduction to Basic HTML - Chapter 1

Chapter 1

(This section will help you understand basics of HTML, language used to create Websites)

(a) Introduction to HTML : Hypertext Markup Language

• Hypertext - Simple meaning of Hypertext is "texts with link in it". Clicking a word that brings you to a new homepage means you have just clicked a HYPERTEXT.
• Markup Language - Its a programming language used to create text to do something more than just sit on a webpage : it can convert text into images, links, lists, tables and much more.

Introduction to HTML

The first thing we should do before making any webpage is to setup the skeleton of the page.

1. Always write <!DOCTYPE html> on the very first line. This notifies the browser what language its reading (in this course,its HTML)
2. Always write <html> on the very next line (this starts the HTML document) and </html> on very last line of your code (this ends the HTML document).

<!DOCTYPE html>
<html>
.
.
// any html code..
.
.
</html>

NOTES :

•  The <!DOCTYPE html> declaration is not an HTML tag; it is an instruction to the web browser about the HTML version used.
• The <!DOCTYPE html> declaration is NOT case sensitive.
• The <!DOCTYPE html> tag does not have an end tag unlike most of the html tags.

Basic Terminology - Chapter 2

Chapter 2

(This section will help you understand basics of HTML, language used to create Websites)

(b) Basic Terminology : 

1) HTML Tags - To understand HTML more,we should know how to talk about HTML. You have already seen we have used < > s a lot.

• Objects inside < >s are called tags.
• Mostly all tags come in pairs : 
  1. Opening Tag- e.g. <html>
  2. Closing Tag- e.g. </html>
• You should treat tags as Parentheses, whenever you open one, you have to close it.
• Tags also have property to nest,so you should close it in right order as you have opened it.

<1st tag> <2nd tag>..Some Text..<2nd tag> <1st tag>

2) HTML Elements - "HTML Tags" and "HTML Elements" are often misunderstood as same thing but both are very different things. "HTML Elements" consists of every thing between an Opening Tag and Closing Tag including the content between these tags.

<opening tag>..text content..</closing tag> - This whole unit together is called HTML Element.

<p> This is an example of HTML Element </p>

Make the Head - Chapter 3

Chapter 3

(This section will help you understand basics of HTML, language used to create Websites)

(c) Make the Head : 

• All content of our HTML file goes in between the opening <html> and closing </html> tags.
• Always remember, there are always two parts of the HTML file : the head & the body. For now let's just focus on head tag.
1. It has an opening tag as well as a closing tag. (i.e. <head> and </head> ).
2. The head only includes important information about the HTML webpage. e.g. title
3. The title of any webpage is the word you see in the web-browser's tab

Make the Body - Chapter 4

Chapter 4

(This section will help you understand basics of HTML, language used to create Websites)

(d) Make the Body : 

• Whenever we put any content between the opening tag and closing tag, the entire bit is called an element.

element = <opening tag> + content + </closing tag>

• The content you type in between <body> .. </body> tags is what will be visible on the actual web page.
• Always remember, the <body> . . </body> tags goes inside the <html> . . </html> tags but not inside the <head> . . </head> tags.

<html>
           <head>  . .  </head>
           <body>  . .  </body>
</html>