Code n' Social

What this lesson is about?

In this lesson we will learn how we can link to other pages, documents, images or even outside websites. A website generally contains more than one HTML document. Every website’s main page is the index file, and from there you can reach the other pages via links. We will learn to refer to other/outside websites, pictures and downloadable documents.

New tag of this lesson:
<a> </a> - we include between these tags text (or picture), on which we will be able to click.
The <a> tag stands for anchor tag and has the following attributes:
href – this attribute/property is used to give the path of the file we want to open or the website we want to reach, by clicking on the given text.

target – this attribute is used to define how we want to open the given path in the href attribute: in the same browser tab (target=”_self” or either not defining it at all, as the default behavior is the same browser tab), or in a new one (in this case we need to define it as target=”_blank”).

download – this attribute has no values to be given. Including this keyword, we can express that the document marked by the href attribute needs to be downloaded, not opened in the browser.

Example:
The text Read more will appear, on which we can click, because it is written between the <a> tags.

The URL address of the wikipedia.org page is the value given to the href attribute, so if we click on the link, this page will open in a new browser tab, because we gave the target attribute the value _blank.

If we want to open another webpage with a link, we have to write the full web address in the <a> tag (we have to use the protocol too – ex: http:// or https://). The easiest way to be correct is to open the webpage in a browser and copy the address from there.
We can recognize the links on a website, by moving the cursor over them. Usually, the cursor switches his shape to a hand, meaning that there is a clickable element.
We generally open pages belonging to one webpage in the same tab, and pages from other websites in new tabs.
If a browser cannot open a document referred by a link, the file will be automatically downloaded. If we want a file to be downloaded regardless of the browsers settings, we must add the download attribute to the <a> tag.
If we have longer content on a website, we can refer its parts with bookmark, so we can directly jump to that section by clicking on a link.

Example:
Creating a bookmark – we can mark as bookmark any HTML tag, by adding the attribute id and a value to it, as the unique identifier of that element.

Reference to bookmark – the <a> tags href attribute should get the id of the bookmark preceded by a # symbol.

In this example we jump to the bookmark with the id bm, by clicking on the Jump to the browsers link.

Exercises

1. Open the index.html file and add four <a> tags, in which to link on: index.html, toplangs.html, aspects.html, tips.html. Their showing text should be the following: Home, Top, Website making, Tips. Also, set each link on a separate row.

View the result

2. In the aspects.html file there is a table which contains a cell with three webpage addresses. Convert them to links, to link to the appropriate websites. The text appearing in the cell should not change.

View the result

3. Insert in the aspects.html, after the table, two new links on separate rows: My reference work and More about this. The first should open an image in a new tab with the reference work, which is an image from the images folder, called webpage.jpg, and the second link should open in a new page a pdf document from the files folder, called CodersWork.pdf

View the result

4. At the beginning of the aspects.html add two bookmark links #bm1, #bm2, #bm3 called: Website making aspects, My reference work and My timetable. The first should jump below to “The most important aspects to consider, while making a website” heading, the second to the My reference link and the third on tips.html, to “My timetable” Every link should appear in a different row.

View the result