Understanding Image and Anchor Tag In HTML

Images: Images imply many things. If we read the description it takes too much time and most people don't like to read such a long description so If proper images exist in a webpage then it can say many things about the documents, so images are very useful. Some of the things you should always remember when inserting an image into a HTML document are as in the following.

• Images should be proper and relevant to the document.
  
  
• It should be informative to help visitors become familiar with the document, without reading the document.
  
  
• It should be properly formatted.
  
  
• The image extension should be correct.

 

alt: The alt attribute specifies alternate text for an image, if the images cannot be displayed. If a user cannot view an image then the alt attribute provides an alternate information for an any image. The alt attribute text will be shown when:

• A slow internet connection is used by the visitor.
  
  
• When an error exists in the src attribute.
  
  
• The image is no longer available or is deleted from that specific path.
  
  
• If the user is using screen reader software.
  
  Example

title: To create a tooltip for an image, we can use the title attribute with the image. The title text will be shown only if the mouse hovers over the image.

Example
Output

 

 

Links in HTML Document: Links are a very good feature of an HTML document because links allow you to move from one page to another page or another website or within the same page. Links enable browsing or surfing in websites.

For links we will cover the following topics:

• Link from one website to another website.
• Linking in the pages within the same website.
• Email Link.
• Links that will open new browser window and tab.
• Link one section to another section in the same page.
  

 

Link from one website to another website: To link from one website to another website just use an URL as a value of the href attribute. If you provide the complete URL to the href then this type of linking is called absolute linking. A link from one website to another website will always be absolute linking.

Example

Output

 

 

Linking in the pages within the same website: To link one page to another page of the same website you will just provide the name of the page you want to jump to, you will not provide the complete path of the URL. Linking within the same website pages are called Relative Linking.

Example: I have created 2 pages, page1.html and page2.html. I have written the following code in page1.html and page2.html.

page1.html Code

Page2.html Code

Output: After writing the preceding code in page1.html and page2.html. You will get the following output:

 

Relative Linking Types: As I said, linking within the same website is called relative linking where we do not provide the complete URL of the webpage and it just provides the name of the page. But in a website there might be many pages and those pages can be inside the folders so to link from one folder to another folder's webpage the link will be in various styles. I am showing some styles using the following table:

Relative Linking Type	Example
Same Folder The linking page is in the same folder so use the name of the page directly.	<a href="Home.html">Home</a>
Child Folder If you want to link to a HTML page in a child folder then first provide the name of the folder followed by a forward slash then provide the file name.	<a href="articles/article.html"></a>
Grandchild Folder Use the following rules for a grandchild folder: • First provide the child folder name. • Followed by a forward slash. • Provide the grandchild folder name. • Followed by a forward slash again. • Provide the file name.	<a href="articles/HTML/intro.html">Intro</a>
Parent Folder Use the following rule for a parent folder's page. • Use ../ to indicate the folder above the current one.	<a href="../index.html">Index</a>
Grandparent Folder Use the following for a grandparent folder's page.	<a href="../../index.html"></a>

Email Link: To create a link that starts the user's email program with an address of the email that you specify in the href attribute you must specify the "emailto:" protocol followed by the mail id of where you want to send the mail to.

Example

Output

 

 

Open link in another tab/window of web browser: The target attribute specifies where to open the linked document. By default the browser opens a link in the same frame because the default target value is "_self" but if you want to open it in a new tab or new window then set the value to "_blank"  for the target attribute.

Example

Output

 

 

Link one section to another section in the same page: If your page is too long, then you can link to a corresponding section lower down (or above) and you can specify the link at the following section so we can return to the top. To specify the link in the same page we need to first declare the id of where we will go and then we can only jump from one section to another section.  And the same page we will use a Pound Symbol (#) then followed by the id name of where we want to link to as the value of the href attribute.

Example

Output

 

Summary:

1. An <img> tag is used to add an image.
2. With the <img> element the src attribute is required for specifying the source of the image.
3. Alt is used to describe the image content for when the image does not load for any reason, alt attribute contents shows.
4. The title attribute shows a tooltip for the image.
5. 3 rules are used to create an image for a webpage; they are right format, right size and correct resolution. 
6. An <a> tag is used to create a link in the HTML.
7. The href attribute is used with an <a> tag to specify the address of the webpage. 
8. Two types of links are possible to link to a page, absolute linking and relative linking.
9. emailto is used when you create an email link.
   
10. The id attribute is used when we want to link within the page.