Lessons 25–26 · 2 lessons · N. I. Taylaqov (general editor), A. B. Akhmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatics and Information Technologies, Grade 11, 1st edition. “Extremum-press”, Tashkent, 2018
25
Ways to link web pages together
Textbook: pp. 87–89
GoalTells the types of hyperlink (relative, absolute, in-page, e-mail) apart, creates menus and links with the <a> element and places links safely.
New words
hyperlink: a part of a page that opens another page, file or place when clicked · giperhavolarelative address: the path to a file counted from the current page · nisbiy manzilanchor: a place in a page marked with id so a link can jump to it · anchor (langar)an attribute for links that open in a new tab; it stops the new page from controlling the old one · rel="noopener"
Explanation
What makes a website one whole out of many pages is the hyperlink. It is written with the <a> (anchor) element, and the address is in the href attribute. An absolute address is written in full (https://example.com/maktab) and leads to another site. A relative address is written from the current page: “fizika.html” is a file in the same folder, “fanlar/fizika.html” is a file in a subfolder, “../index.html” is a file one level up. When you move your site to another server, relative addresses keep working unchanged, so they are convenient for internal pages. To jump inside a page, give the element an id (<h2 id="aloqa">), and the link becomes href="#aloqa". A link starting with “mailto:” opens the e-mail program. target="_blank" opens the link in a new tab; it is safer to write rel="noopener" with it. A menu is usually written as a list of links inside <nav>. Good link text tells what will open: “Physics textbooks” is good, “click here” is bad, because a screen reader reads out the links as a list. Links can “break” (404) over time, so check them regularly. Safety: do not click a shortened or strange link in an unknown message; the address shown in the text and the real href can differ (phishing). Do not put links on your site that deceive visitors.
Worked examples
A page with a menu and links: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎ <meta charset="utf-8"> ⏎ <title>Mening maktabim</title> ⏎ </head> ⏎ <body> ⏎ <nav> ⏎ <a href="index.html">Bosh sahifa</a> | ⏎ <a href="fanlar/fizika.html">Fizika</a> | ⏎ <a href="#aloqa">Aloqa</a> ⏎ </nav> ⏎ <h1 id="tepa">Maktabim haqida</h1> ⏎ <p>Batafsil: <a href="https://example.com/maktab" target="_blank" rel="noopener">tashqi sayt</a>.</p> ⏎ <h2 id="aloqa">Aloqa</h2> ⏎ <p><a href="mailto:info@example.com">Xat yozish</a> · <a href="#tepa">Yuqoriga</a></p> ⏎ </body> ⏎ </html> The “Aloqa” link jumps to the section with id="aloqa" lower on the page, and “Yuqoriga” returns to the top.
Relative address: if the current page is “sayt/fanlar/fizika.html”, the path “../index.html” leads to “sayt/index.html”, while simply “kimyo.html” leads to “sayt/fanlar/kimyo.html”.
Class activity
Make a small three-page site (home, about, contact) with the same menu on every page. A classmate clicks through all the links and finds broken ones or links with poor text.
Practice
1
Write a link to the file rasm1.html in the folder galereya (text: Rasm).
<a href="galereya/rasm1.html">Rasm</a>
2
From the page sayt/fanlar/fizika.html, write the relative address of sayt/bosh.html.
../bosh.html
3
Why is “click here” bad link text?
It does not say what will open; when a screen reader reads the links alone, it becomes meaningless.
4
What should you do before clicking a shortened link in an unknown message?
Do not click; check the sender another way and look at the real address (by hovering over it).