CS 100 (Learn) — CS 100 (Web) — Module 07
HTML was created to add hyperlinks to web pages.
To insert a hyperlink, you use the anchor <a> paired tag.
Everything between the opening <a> and the closing </a> tags becomes a hyperlink (for example, clickable).
This is my <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">favourite video</a>.
This is my favourite video.
The most important attribute of the <a> tag is the href (hypertext reference) attribute, which specifies the destination address of the link (what to display if the link is selected or clicked).
If the destination address is another page in the same folder, you can omit the protocol and destination computer and simply specify the file directly.
See my <a href="goodbye.html">goodbye</a> page.
For example, if you create a goodbye.html file in the same folder as your hello.html file, you can link to it from hello.html using the above example.
It is even possible to link to an element within the same web page.
This usually only makes sense for long web pages.
To link to an element in the current page, the element must have an additional id attribute. You can add a unique id attribute to any element (<tagname id="idname">).
To link to the element, the destination (href) is the id preceded by a number sign (or hashtag #). For example, <a href="#idname">.
<body>
...
<h2 id="intro">Introduction</h2>`
...
<a href="#intro">return to the introduction</a>
You can even link to a specific element that appears on another page.
Go to the <a href="https://en.wikipedia.org/wiki/HTML#History">history section</a> of the Wikipedia HTML page.
Go to the history section of the Wikipedia HTML page.
This example will take you directly to the history (#History) section of the Wikipedia page.
If you wish to provide a link to an email address, the destination (href) is simply "mailto:address". For example:
Contact your <a href="mailto:cs100@uwaterloo.ca">ISAs</a> with any questions.
Contact your ISAs with any questions.
If your web browser is configured correctly, clicking on the above link should launch your email app.