4. Links that open a new window
If you want to create links that opens in a new window use the <a> element and a target attribute
The value of the target attribute can be :
- _blank – Opens the linked document in a new window or tab.
- _self – Opens the linked document in the same window/tab as it was clicked (this is default).
- _parent – Opens the linked document in the parent frame.
- _top – Opens the linked document in the full body of the window.
- framename – Opens the linked document in a named frame.
Example
<!DOCTYPE html>
<html>
<head><title>Links</title></head>
<body>
<a href=”jamila.design.blog ” target=”_blank”> Lecture blog</a>
</body>
</html>
Once you run the above program you can click on link and you will see it opening on a new tab.
5. Links that takes a user to a specific part within the same page
This type of links can be used when the web page is very long, in order save the user from scrolling through the page these types of links can be used to take through the user from top to bottom or vice versa or take the user to a specific part of the page.
Before linking to a specific part of a page, Points have to be identified on the page that the link will go to.
This is archieved using the id attribute (which can be used on every HTML element).
The value of the id attribute should start with a letter or an underscore (not a number or any other character) and, on a single page, no two id attributes should have the same value.
To link to an element that uses an id attribute you use the <a> element again, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want to link to.
Example
<!DOCTYPE html>
<html>
<head><title>Links</title></head>
<body>
<h1 id=”top”>How I stay productive throughout my day</h1>
<a href=”#diet”>Diet</a><br />
<a href=”#routines”>Routines</a><br />
<a href=”#inspiration”>Inspiration</a><br /><br />
<h2 id=”diet”>Diet</h2>
<p>You can never feel great if you don’t have the right minerals in your body, I usually have a balanced diet for breakfast, lunch and dinner and supplement with vitamins tablets. Staying healthy will give you the right energy to tackle your to do list and stay productive</p>
<h2 id=”routine”>Routines</h2>
<p> If you are a working mom having a routine is very important, I personally have a structured morning and evening routine which I stick to everyday and all my family members are used to it. </p>
<h2 id=”inspiration”>Inspiration</h2>
<p> Whenever I feel not motivated to do anything I usually inspire myself by listening to my favorite motivational speakers and podcasts </p>
<p><a href=”#top”>Top</a></p>
</body>
</html>
You can try adding more content to the paragraphs so that the page can be long, when you click on the top it will take you to the top of the page.
6. Links that takes a user to a specific part of another page
If you wish to link to a specific part of another page the same technique as above is applied, As long as the page you are linking to has id attributes that identify specific parts of the page, you can simply add the
same syntax to the end of the link for that page.
The href attribute will contain the address for the page (either an absolute URL or a relative URL), followed by the # symbol, followed by the value of the id attribute that is used on the element you are linking to.
Exercise
- Design two web pages and apply links number 5 and 6
Study with Jamila 