Tuesday 28 March 2023

HTML Links


HTML links, also known as hyperlinks, are used to create clickable text or images that take the user to another webpage, file, or part of the same page.

Here's an example of how to create a hyperlink in HTML:


<a href="https://creative-codz.blogspot.com">Click me to open Blog</a>

In this example, the <a> tag is used to create a hyperlink, and the href attribute specifies the URL that the hyperlink will link to. The text "Click me to open Blog" will be displayed as the hyperlink.

You can also use images as hyperlinks. Here's an example:


<a href="https://creative-codz.blogspot.com"><img src="frozen.jpg" 
            alt="frozen image"></a>

In this example, the <img> tag is used to display the image, and the <a> tag is used to create the hyperlink. The href attribute specifies the URL that the image will link to, and the alt attribute provides alternative text that will be displayed if the image cannot be loaded or read by screen readers.

In addition to using absolute URLs, you can also use relative URLs to link to files or pages within your own website. 

For example:


<a href="headings.html">Click me for headings</a>


The target attribute is used to specify where the linked document should be opened. By default, when a user clicks on a hyperlink, the linked document will open in the same window or tab as the current page. However, you can use the target attribute to open the linked document in a different window or tab.

The target attribute can have the following values:

  • _blank: The linked document will open in a new window or tab.
  • _self: The linked document will open in the same frame as the current page (this is the default behavior).
  • _parent: The linked document will open in the parent frame of the current frame, if it exists.
  • _top: The linked document will open in the full body of the window.

Here's an example:


<a href="https://creative-codz.blogspot.com" target="_blank">
Click here to open in new window</a>

In this example, the href attribute specifies a relative URL that links to the "about.html" file within the same directory as the current page.

You can also add attributes to the <a> tag to control the behavior of the hyperlink, such as opening the linked page in a new window or tab, or linking to a specific part of the same page using an anchor tag.

HTML code for links:


<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<h1>HTML Links </h1>
<p>The below link will open the creative codz blog</p>
<a href="https://creative-codz.blogspot.com">Click me to open Blog</a>
<h2>relative URL</h2>
<p>Relative means we can link the pages on the same 
            forder with file name</p>
<a href="headings.html">Click me for headings</a>
<h2>Image as a link</h2>
<p>Whenever we click on the image it will navigate to the blog</p>
<p>Just click on the image</p>
<a href="https://creative-codz.blogspot.com"><img src="frozen.jpg" 
            alt="frozen image"></a>
    <a href="https://creative-codz.blogspot.com" target="_blank">
            Click here to open in new window</a>
</body>
</html>

Output



Practice Time!
  1. Create a webpage that lists your favorite movies. Use headings to separate the movies into different categories (e.g. "Action", "Comedy", "Drama"). Include a paragraph for each movie that describes why you like it, and include an image of the movie poster. Add a comment at the end of the page thanking the user for visiting.

Tips: Use the <h2> element for each category heading, and use the <p> element for each movie description. Use the <img> element to display the movie poster, and the alt attribute to provide alternative text for users who cannot see the image.

  1. Create a webpage about your favorite hobby. Include a heading that says "My Favorite Hobby" and a paragraph that describes why you love this hobby. Include two images that show different aspects of the hobby, and add links to two related websites or resources.

Tips: Use the <h1> element for the page heading, and the <p> element for the hobby description. Use the <img> element to display the images, and the alt attribute to provide alternative text for users who cannot see the images. Use the <a> element to create the links to related websites or resources.

  1. Create a webpage that introduces your company. Include a heading that says "About Our Company" and a paragraph that describes what your company does. Include an image that represents your company, and add links to your social media profiles.

Tips: Use the <h1> element for the page heading, and the <p> element for the company description. Use the <img> element to display the company image, and the alt attribute to provide alternative text for users who cannot see the image. Use the <a> element to create the links to your social media profiles.

4. Create a webpage with a heading that says "My Favorite Recipes". Below the heading, create three paragraphs that describe your favorite dishes. Include an image of each dish and a link to the recipe for each dish.

5. Create a webpage that lists your favorite books. Use headings to separate the books into different categories (e.g. "Fiction", "Non-Fiction", "Memoirs"). Include a paragraph for each book that describes why you like it, and include an image of the book cover. Add a comment at the end of the page thanking the user for visiting.

6. Create a webpage about your favorite travel destination. Include a heading that says "My Favorite Travel Destination" and a paragraph that describes why you love this place. Include two images that show different parts of the destination, and add links to two popular attractions in the area.


Happy Coding!





No comments:

Post a Comment

HTML Text Formatting

<i> - This tag is used to italicize text, meaning the text enclosed within <i> tags will be rendered in italic font style. How...