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
Special Offer:

JD 230

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