Assignments Of Class 5
Working with Links in HTML

Assignments From

Various Types Of Link:

1. external links,

2. internal links,

3. anchor links,

4. email links, and

5. telephone links.

Assignment 1: External Links

Objective: Create external links that navigate to other websites.

Instructions:

1. Create an HTML file named external_links.html.

2. Add links to three different external websites (e.g., Wikipedia, Google, and YouTube) using <a> tags.

3. Each link should open in a new tab when clicked by adding the target="_blank" attribute.

4. Add a title for each link that describes the destination.

Assignment 2: Internal Links

Objective: Link between different pages within the same website.

Instructions:

1. Create a folder called my_website.

2. Inside this folder, create three HTML files: index.html, about.html, and contact.html.

3. In index.html, create internal links to navigate to about.html and contact.html.

4. In about.html and contact.html, create links to navigate back to index.html.

Assignment 3: Anchor Links

Objective: Create anchor links to navigate within the same page.

Instructions:

1. Create an HTML file named anchor_links.html.

2. Add multiple sections with headings like "Introduction," "Services," and "Contact."

3. Assign an id to each section and create a navigation menu with links to each section using anchor links.

Assignment 4: Email Links

Objective: Create email links to allow users to send an email.

Instructions:

1. Create an HTML file named email_link.html.

2. Add a link that, when clicked, opens the default email client with the address info@example.com, the subject set to "Inquiry," and body text as "I would like to know more about your services."

Assignment 5: Telephone Links

Objective: Create a phone link for mobile devices.

Instructions:

1. Create an HTML file named phone_link.html.

2. Add a link that, when clicked, initiates a phone call to the number +1234567890.

3. Test the link on a mobile device (if possible).

Solutions

Assignment 1: External Links

Objective: Create external links that navigate to other websites.

Instructions:

1. Create an HTML file named external_links.html.

2. Add links to three different external websites (e.g., Wikipedia, Google, and YouTube) using <a> tags.

3. Each link should open in a new tab when clicked by adding the target="_blank" attribute.

4. Add a title for each link that describes the destination.

Solution:

<!DOCTYPE html>

<head>

<title>External Links Example</title>

</head>

<body>

<h1>External Links</h1>

<p>Click the links below to visit some popular websites:</p>

<a href="https://www.wikipedia.org" target="_blank" title="Go to Wikipedia">Visit Wikipedia</a><br>

<a href="https://www.google.com" target="_blank" title="Go to Google">Visit Google</a><br>

<a href="https://www.youtube.com" target="_blank" title="Go to YouTube">Visit YouTube</a><br>

</body>

</html>

Assignment 2: Internal Links

Objective: Link between different pages within the same website.

Instructions:

1. Create a folder called my_website.

2. Inside this folder, create three HTML files: index.html, about.html, and contact.html.

3. In index.html, create internal links to navigate to about.html and contact.html.

4. In about.html and contact.html, create links to navigate back to index.html.

Solution:

File Structure:

my_website/

index.html
about.html
contact.html

index.html

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Welcome to Our Website</h1>

<p>Use the links below to navigate:</p>

<a href="about.html">About Us</a><br>

<a href="contact.html">Contact Us</a>

</body>

</html>

about.html

<!DOCTYPE html>

<head>

<title>About Us</title>

</head>

<body>

<h1>About Us</h1>

<p>Learn more about our team and mission here.</p>

</body>

</html>

contact.html

<!DOCTYPE html>

<head>

<title>Contact Us</title>

</head>

<body>

<h1>Contact Us</h1>

<p>Reach out to us through this page.</p>

</body>

</html>

Assignment 3: Anchor Links

Objective: Create anchor links to navigate within the same page.

Instructions:

1. Create an HTML file named anchor_links.html.

2. Add multiple sections with headings like "Introduction," "Services," and "Contact."

3. Assign an id to each section and create a navigation menu with links to each section using anchor links.

Solution:

<!DOCTYPE html>

<head>

<title>Anchor Links Example</title>

</head>

<body>

<h1>Anchor Links</h1>

<nav>

<a href="#introduction">Introduction</a> |

<a href="#services">Services</a> |

<a href="#contact">Contact</a>

</nav>

<h2>Introduction</h2>

<p>Welcome to our website, where we provide a range of services.</p>

</section>

<h2>Services</h2>

<p>We offer various services including web development, consulting, and design.</p>

</section>

<h2>Contact</h2>

<p>If you have any questions, please reach out to us.</p>

</section>

</body>

</html>

Assignment 4: Email Links

Objective: Create email links to allow users to send an email.

Instructions:

1. Create an HTML file named email_link.html.

2. Add a link that, when clicked, opens the default email client with the address info@example.com, the subject set to "Inquiry," and body text as "I would like to know more about your services."

Solution:

<!DOCTYPE html>

<head>

<title>Email Link Example</title>

</head>

<body>

<h1>Email Us</h1>

<p>Click the link below to send us an email:</p>

<a href="mailto:info@example.com?subject=Inquiry&body=I would like to know more about your services.">Email Us</a>

</body>

</html>

Assignment 5: Telephone Links

Objective: Create a phone link for mobile devices.

Instructions:

1. Create an HTML file named phone_link.html.

2. Add a link that, when clicked, initiates a phone call to the number +1234567890.

3. Test the link on a mobile device (if possible).

Solution:

<!DOCTYPE html>

<head>

<title>Phone Link Example</title>

</head>

<body>

<h1>Contact Us by Phone</h1>

<p>Click the link below to call us:</p>

</body>

</html>

Assignments Using

Attributes Of Link tag

1. Target Attribute- With value _blank

2. Target Attribute- With value _self

3. Target Attribute- With value _parent

4. Target Attribute- With value _top

Assignment 1: Target Attribute - _blank

Objective: Open a link in a new tab or window.

Instructions:

1. Create an HTML file named target_blank.html.

2. Add a link to an external website (e.g., Google) using the target="_blank" attribute.

3. When clicked, this link should open in a new tab.

Solution:

<!DOCTYPE html>

<head>

<title>Target _blank Example</title>

</head>

<body>

<h1>Target _blank</h1>

<p>Click the link below to open Google in a new tab:</p>

<a href="https://www.google.com" target="_blank">Open Google in New Tab</a>

</body>

</html>

Assignment 2: Target Attribute - _self

Objective: Open a link in the same frame (default behavior).

Instructions:

1. Create an HTML file named target_self.html.

2. Add a link to an external website (e.g., YouTube) using the target="_self" attribute.

3. When clicked, this link should open in the same tab.

Solution:

<!DOCTYPE html>

<head>

<title>Target _self Example</title>

</head>

<body>

<h1>Target _self</h1>

<p>Click the link below to open YouTube in the same tab:</p>

<a href="https://www.youtube.com" target="_self">Open YouTube in Same Tab</a>

</body>

</html>

Assignment 3: Target Attribute - _parent

Objective: Open a link in the parent frame.

Instructions:

1. Create an HTML file named target_parent.html.

2. Add an <iframe> to load an external page (e.g., target_blank.html) within the current page.

3. Inside the iframe, create a link that navigates to a different page, using target="_parent".

4. When clicked, the link should open in the parent frame (replacing the iframe content).

Solution:

target_parent.html

<!DOCTYPE html>

<head>

<title>Target _parent Example</title>

</head>

<body>

<h1>Target _parent</h1>

<p>Click the link within the iframe to load in the parent frame:</p>

</body>

</html>

iframe_content.html

<!DOCTYPE html>

<head>

<title>Iframe Content</title>

</head>

<body>

<h1>Iframe Content</h1>

<p>Click the link below to open in the parent frame:</p>

<a href="https://www.wikipedia.org" target="_parent">Open Wikipedia in Parent Frame</a>

</body>

</html>

In this example, the link inside iframe_content.html uses target="_parent", so when clicked, it will open Wikipedia in the parent frame, replacing the iframe content.

Assignment 4: Target Attribute - _top

Objective: Open a link in the full body of the window, removing any frames or iframes.

Instructions:

1. Create an HTML file named target_top.html.

2. Embed another HTML file (e.g., iframe_content.html) in an <iframe>.

3. Add a link inside the iframe that uses target="_top" to navigate to a new website.

4. When clicked, the link should open in the full window, breaking out of any frame structure.

Solution:

target_top.html

<!DOCTYPE html>

<head>

<title>Target _top Example</title>

</head>

<body>

<h1>Target _top</h1>

<p>Click the link within the iframe to open in the full window:</p>

</body>

</html>

iframe_top_content.html

<!DOCTYPE html>

<head>

<title>Iframe Content for Target _top</title>

</head>

<body>

<h1>Iframe Content</h1>

<p>Click the link below to open in the full window:</p>

<a href="https://www.bbc.com" target="_top">Open BBC in Full Window</a>

</body>

</html>

In this example, the link in iframe_top_content.html uses target="_top", so when clicked, it opens BBC in the full window, breaking out of the iframe.

Assignments Using Attribute :

tittle and rel

Assignments demonstrating the use of the title and rel attributes in HTML links (<a> tags). The title attribute is often used to add a tooltip, while the rel attribute defines the relationship between the current page and the linked page.

Assignment 1: Adding a title Attribute

Objective: Add a tooltip to a link using the title attribute.

Instructions:

1. Create an HTML file named title_attribute_example.html.

2. Add a link to an external website (e.g., OpenAI) and add a title attribute to provide a tooltip.

3. When you hover over the link, a tooltip should appear.

Solution:

<!DOCTYPE html>

<head>

<title>Title Attribute Example</title>

</head>

<body>

<h1>Title Attribute in Links</h1>

<p>Hover over the link below to see the tooltip:</p>

<a href="https://www.openai.com" title="Visit OpenAI's official website">OpenAI Website</a>

</body>

</html>

In this example, hovering over the link will display a tooltip saying "Visit OpenAI's official website."

Assignment 2: Using the rel="noopener noreferrer" Attribute with target="_blank"

Objective: Use the rel attribute to improve security and performance when opening links in a new tab.

Instructions:

1. Create an HTML file named rel_noopener_example.html.

2. Add a link to an external website (e.g., Wikipedia) with target="_blank" and rel="noopener noreferrer".

3. rel="noopener noreferrer" improves security by preventing the new page from accessing the window.opener object.

Solution:

<!DOCTYPE html>

<head>

<title>Rel Noopener Example</title>

</head>

<body>

<h1>Rel Attribute: noopener noreferrer</h1>

<p>Click the link below to open Wikipedia in a new tab with improved security:</p>

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Open Wikipedia in New Tab</a>

</body>

</html>

In this example, using rel="noopener noreferrer" ensures that the linked page doesn't have access to the originating page, which enhances security when links open in new tabs.

Assignment 3: Using title and rel="nofollow" on External Links

Objective: Add a nofollow attribute to inform search engines not to pass authority to an external link, along with a tooltip using title.

Instructions:

1. Create an HTML file named rel_nofollow_example.html.

2. Add a link to an external website (e.g., Stack Overflow) with rel="nofollow" to tell search engines not to follow the link.

3. Add a title attribute to show a tooltip with additional information about the link.

Solution:

<!DOCTYPE html>

<head>

<title>Rel Nofollow Example</title>

</head>

<body>

<h1>Rel Attribute: nofollow</h1>

<p>Click the link below to go to Stack Overflow (note: search engines won’t follow it):</p>

<a href="https://stackoverflow.com" rel="nofollow" title="Go to Stack Overflow's website (nofollow)">Visit Stack Overflow</a>

</body>

</html>

Here, rel="nofollow" tells search engines not to follow this link, and the title attribute displays a tooltip with additional information about the link.

Assignment 4: Using rel="bookmark" and title for Internal Links

Objective: Use rel="bookmark" for an internal link pointing to a specific section on the same page or another page. Add a title attribute to explain the link's purpose.

Instructions:

1. Create an HTML file named rel_bookmark_example.html.

2. Add an internal link with rel="bookmark" to a section within the same page.

3. Add a title attribute to display a tooltip with additional information about the section.

Solution:

<!DOCTYPE html>

<head>

<title>Rel Bookmark Example</title>

</head>

<body>

<h1>Rel Attribute: bookmark</h1>

<p>Use the link below to jump to Section 1 within the same page:</p>

<a href="#section1" rel="bookmark" title="Jump to Section 1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

<p>This is Section 1, where the internal link points.</p>

</body>

</html>

In this example, rel="bookmark" designates the link as a bookmark, and the title attribute displays "Jump to Section 1" when hovered over, enhancing the user experience.

Over All Assignments

1. Create a Personal Webpage with Links

o Create a simple HTML page that includes:

§ A link to an external website (e.g., a news site).

§ An internal link to another page (e.g., an "About" page).

§ An anchor link to a specific section on the same page.

§ An email link.

§ A telephone link.

2. Build a Navigation Menu

o Design a navigation menu for a fictional website with links to different sections (Home, About Us, Services, Contact). Use the <nav> element and ensure each link points to an appropriate section or page.

3. Add Link Attributes

o Modify the links from the previous assignments to include:

§ target="_blank" for external links.

§ title attributes to provide additional information.

§ rel="noopener" or rel="noreferrer" where appropriate.

Overall Assignment 1

1. Create a Personal Webpage with Links

<!DOCTYPE html>

<head>

<title>Personal Webpage</title>

</head>

<body>

<h1>Welcome to My Personal Webpage</h1>

<p><a href="https://www.bbc.com" target="_blank" rel="noopener" title="Visit BBC News">Check out BBC News</a></p>

<p><a href="about.html" title="Learn more about us">About Us</a></p>

<p><a href="#section1" title="Jump to Section 1">Go to Section 1</a></p>

<p><a href="mailto:example@example.com" title="Send us an email">Email Us</a></p>

<h2 id="section1">Section 1</h2>

<p>This is Section 1 of the page.</p>

</body>

</html>

2. Build a Navigation Menu

<!DOCTYPE html>

<head>

<title>Website Navigation</title>

</head>

<body>

<nav>

<ul>

<li><a href="about.html" title="About Us Page">About Us</a></li>

<li><a href="services.html" title="Our Services Page">Services</a></li>

<li><a href="contact.html" title="Contact Us Page">Contact</a></li>

</ul>

</nav>

</header>

</body>

</html>

3. Add Link Attributes

To include link attributes, modify the links from the previous assignments as follows:

<!DOCTYPE html>

<head>

<title>Enhanced Personal Webpage</title>

</head>

<body>

<h1>Welcome to My Enhanced Personal Webpage</h1>

<p><a href="https://www.bbc.com" target="_blank" rel="noopener noreferrer" title="Visit BBC News">Check out BBC News</a></p>

<p><a href="about.html" title="Learn more about us">About Us</a></p>

<p><a href="#section1" title="Jump to Section 1">Go to Section 1</a></p>

<p><a href="mailto:example@example.com" title="Send us an email">Email Us</a></p>

<h2 id="section1">Section 1</h2>

<p>This is Section 1 of the page.</p>

</body>

</html>

Notes:

The target="_blank" attribute opens the link in a new tab or window.
The rel="noopener noreferrer" attribute improves security and privacy when opening links in a new tab.
The title attribute provides additional information about the link, which usually appears as a tooltip on hover.

Additional Assignments

1. Create a Portfolio Page with Multiple Links

Objective: Develop a portfolio webpage that showcases various types of links.
Instructions:

Create a webpage with links to different sections such as "Projects," "Skills," "Testimonials," and "Contact."
Include external links to your social media profiles (e.g., LinkedIn, GitHub).
Add internal links to different sections of the same page using anchor links.
Ensure each link has appropriate title attributes and demonstrates correct usage of target and rel attributes where necessary.

Example Code:

<!DOCTYPE html>

<head>

<title>Portfolio</title>

</head>

<body>

<nav>

<ul>

<li><a href="#projects" title="View My Projects">Projects</a></li>

<li><a href="#skills" title="See My Skills">Skills</a></li>

<li><a href="#testimonials" title="Read Testimonials">Testimonials</a></li>

<li><a href="#contact" title="Contact Me">Contact</a></li>

<li><a href="https://www.linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" title="Visit my LinkedIn profile">LinkedIn</a></li>

<li><a href="https://github.com/yourprofile" target="_blank" rel="noopener noreferrer" title="Visit my GitHub profile">GitHub</a></li>

</ul>

</nav>

</header>

<h2>Projects</h2>

<p>Details about my projects...</p>

</section>

<h2>Skills</h2>

<p>Details about my skills...</p>

</section>

<h2>Testimonials</h2>

<p>Feedback from colleagues...</p>

</section>

<h2>Contact</h2>

<p>How to get in touch...</p>

</section>

</body>

</html>

2. Design a Sitemap with Internal and External Links

Objective: Create a sitemap for a fictional website, including various types of links.
Instructions:

Develop a sitemap page that lists all the pages of the website with links to each page.
Include links to both internal pages and external resources related to the site.
Use appropriate title attributes and ensure that external links open in a new tab.

Example Code:

<!DOCTYPE html>

<head>

<title>Sitemap</title>

</head>

<body>

<h1>Sitemap</h1>

<ul>

<li><a href="index.html" title="Homepage">Homepage</a></li>

<li><a href="about.html" title="About Us">About Us</a></li>

<li><a href="services.html" title="Our Services">Our Services</a></li>

<li><a href="contact.html" title="Contact Us">Contact Us</a></li>

<li><a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="External Resource">External Resource</a></li>

</ul>

</body>

</html>

3. Create a Link with JavaScript Interaction

Objective: Integrate JavaScript with HTML links for dynamic behavior.
Instructions:

Create a webpage with a link that, when clicked, triggers a JavaScript function.
The JavaScript function should display an alert or modify content on the page.

Example Code:

<!DOCTYPE html>

<head>

<title>JavaScript Links</title>

function showAlert() {

alert("You clicked the link!");

}

</script>

</head>

<body>

<h1>JavaScript Link Example</h1>

<p><a href="#" onclick="showAlert(); return false;" title="Click to trigger JavaScript">Click me</a></p>

</body>

</html>

4. Create a Form with Links

Objective: Combine forms and links in a practical application.
Instructions:

Build a simple contact form with a "Submit" button.
Add a link to the form that redirects users to a thank-you page upon submission.
Ensure that the form and link have appropriate attributes and functionality.

Example Code:

<!DOCTYPE html>

<head>

<title>Contact Form</title>

</head>

<body>

<h1>Contact Us</h1>

<label for="email">Email:</label>

<label for="message">Message:</label><br>

</form>

<p><a href="thankyou.html" title="Thank You Page">Go to Thank You Page</a></p>

</body>

</html>

5. Create a Page with Multiple Link Styles

Objective: Experiment with different styles for links.
Instructions:

Create a webpage with links styled using inline CSS, internal CSS, and external CSS.
Demonstrate different states of links, such as normal, hover, and visited.

Example Code:

<!DOCTYPE html>

<head>

<title>Styled Links</title>

<style>

.external-link {

color: blue;

text-decoration: none;

}

.external-link:hover {

text-decoration: underline;

}

.internal-link {

color: green;

text-decoration: none;

}

.internal-link:visited {

color: purple;

}

</style>

</head>

<body>

<h1>Styled Links Example</h1>

<p><a href="https://www.example.com" style="color: red; text-decoration: none;" target="_blank" rel="noopener noreferrer" title="External Link">External Link with Inline CSS</a></p>

<p><a href="about.html" class="internal-link" title="Internal Link">Internal Link with Internal CSS</a></p>

<p><a href="https://www.example.com" class="external-link" target="_blank" rel="noopener noreferrer" title="External Link">External Link with External CSS</a></p>

</body>

</html>

*************************************

Assignments Of Class 5:Working with Links in HTML

Assignments Of Class 5
Working with Links in HTML

Assignments Using

Attributes Of Link tag

Assignment 1: Target Attribute - _blank

Solution:

Assignment 2: Target Attribute - _self

Solution:

Assignment 3: Target Attribute - _parent

Instructions:

Solution:

Assignment 4: Target Attribute - _top

Instructions:

Solution:

Assignment 1: Adding a title Attribute

Instructions:

Solution:

Assignment 2: Using the rel="noopener noreferrer" Attribute with target="_blank"

Instructions:

Solution:

Assignment 3: Using title and rel="nofollow" on External Links

Instructions:

Assignment 4: Using rel="bookmark" and title for Internal Links

Instructions:

Solution:

Post a Comment

Lecture Notes of Class 1: Introduction to HTML and Web Development

Contact form

Assignments Of Class 5:Working with Links in HTML

Assignments Of Class 5Working with Links in HTML

Assignments Using

Attributes Of Link tag

Assignment 1: Target Attribute - _blank

Solution:

Assignment 2: Target Attribute - _self

Solution:

Assignment 3: Target Attribute - _parent

Instructions:

Solution:

Assignment 4: Target Attribute - _top

Instructions:

Solution:

Assignment 1: Adding a title Attribute

Instructions:

Solution:

Assignment 2: Using the rel="noopener noreferrer" Attribute with target="_blank"

Instructions:

Solution:

Assignment 3: Using title and rel="nofollow" on External Links

Instructions:

Assignment 4: Using rel="bookmark" and title for Internal Links

Instructions:

Solution:

You Might Like

Post a Comment

Contact form

Assignments Of Class 5
Working with Links in HTML