HTML Tutorial

by Trainer Riad Thalji

Links

External Links

Internal Links

Bookmarks

Graphic Hyperlinks

Target


Let’s now put everything together in one comprehensive example:

This is our small website structure:


website structure


It consists of a page called index.html which browsers automatically consider as the starting page of a website unless another page is specified for this purpose.


Here is the code of the index.html page based on this structure:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Learning Plan </title>
</head>
<body>
<h1>My Learning Plan for this year </h1>
<p>The complete plan can be viewed <a href="mylearningplan.html">by clicking here </a>
</p>
<p>Click any of the following links to reach a specific section of my learning plan: </p>
<ul>
<li>
<a href="mylearningplan.html#html-plan">HTML 5 Course </a>
</li>
<li>
<a href="mylearningplan.html#javascript-plan">JavaScript Course </a>
</li>
<li>
<a href="mylearningplan.html#jquery-plan">JQuery Course </a>
</li>
</ul>
<h2>I like buying books related to these topics from: </h2>
<a href="amazon.com">www.amazon.com </a>
<h2>Click w3.org icon below to see their comprehensive HTML 5 reference: </h2>
<a href="http://dev.w3.org/html5/html-author/">
<img src="images/w3icon.jpg" />
</a>
<p>The _blank link target is used to open the target page in a separate window: </p>
<a href="mylearningplan.html" target="_blank">
Open the Learning Plan on a blank new window </a>
<p>The _self link target is used to open the target page in the current window replacing the current page </p>
<a href="mylearningplan.html" target="_self">
Open the Learning Plan with the _self target </a>
<p>The _parent link target is used to open the target page in the page we clicked to reach our current page. If no previous page led to the current page then _parent will be equal to the current page. </p>
<a href="mylearningplan.html" target="_parent">
Open the Learning Plan with the _parent target </a>
</body>
</html>

The results will be like the following:


Links example 1


And here is the code for mylearningplan.html page:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Learning Plan Details </title>
</head>
<body>
<h1>My Learning Plan Details </h1>
<p>The plan will focus on front end web development. </p>
<div id="html-plan">
<h2>HTML 5 </h2>
<p>My HTML 5 learning plan will focus on reading tutorials, viewing videos, and attending classroom sessions on specific topics. </p>
<p>I will refere to websites that discuss problems that may face developers to read and participate in the discussions. </p>
</div>
<hr />
<div id="javascript-plan">
<h2>JavaScript </h2>
<p>My JavaScript learning plan will focus on attending classroom courses, and buying some important books related to this field. </p>
<p>I will use an advanced development tool, to help me predict the code elements, which is a good resource training as well. </p>
</div>
<hr />
<div id="jquery-plan">
<h2>JQuery </h2>
<p>I will use the JQuery creators tutorials to start learning and applying JQuery within my learning excersices. </p>
<p>I will practice by converting a number of JavaScript code to JQuery. </p>
</div>
</body>
</html>


And the output will be something like:




Notice how each link is defined, and how much links are important to connect websites and webpages.




Join Our Coming PMP Prep Course

Delivered by Trainer

Riad Thalji



From the Video Library

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1 | Advanced Programming Series | Riad Thalji

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1

How to Quickly Import Data between Excel, Access and SQL Server

Project Management Office - PMO

Project Managemenet Office - PMO Crash Course

Project Management Office - PMO

How to Create Nested Layouts in ASP.Net Core 2.1 | Advanced Programming Series | Riad Thalji

Developed by Thalji.net, © Riad Thalji