الدرس 04 · First page

Links and URLs

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

Links are what make the web a web. A link is an a element, and its href attribute holds a URL: an address with a scheme, a host and a path. Click a link in a three-link page and follow the URL up to the address bar, out to the server and back as a new page. Then meet the two shortcuts every page uses: relative URLs and fragments that jump within a page.

9 دقيقة8 خطوات5 أسئلةBeginner

شكل 4 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01In <a href="contact.html">Write to us</a>, which part does the reader click?

The content between the tags, Write to us, is the link text the browser draws and you click. href holds where the link goes; the tags themselves are never drawn.

02In https://example.com/menu.html, which part is the host?

https is the scheme (how to fetch it), example.com is the host (which computer to ask) and /menu.html is the path (which file on that computer).

03You are on https://example.com/index.html and click <a href="about.html">. Which page loads?

about.html is a relative URL. The browser keeps the scheme, host and folder of the current page's URL and swaps in the new file name.

04What happens when you click <a href="#beans">Our beans</a>?

A href that starts with # is a fragment: a spot on the current page. The browser finds the element with that id and scrolls to it, without asking any server.

05Which link text is best?

Good link text says where the link goes, even read on its own. Screen reader users often jump from link to link, and click here or here tells them nothing.

المصطلحات الأساسية

المسرد

Link (hyperlink): Something you click to go to another page or place. In HTML it is an a element with an href.
a element: The anchor element, <a>…</a>. Its content is the clickable text; its href says where to go.
href: The attribute on an a element that holds the URL the link points to.
URL: Uniform Resource Locator: the address of a page or file, such as https://example.com/menu.html.
Scheme, host, path: The main parts of a URL: how to fetch it (https), which computer (example.com) and which file there (/menu.html).
Absolute URL: A full URL with a scheme and a host. It means the same thing on any page.
Relative URL: A shortened URL such as about.html. The browser fills in the missing parts from the current page's URL.
Fragment: The part of a URL after #. It names an element on the page by its id; the browser scrolls to it.

تفاصيل إضافية

الملاحظات والمصادر

example.com is a name reserved for examples, so it never belongs to a real shop. Its menu.html and about.html pages are imagined here.
Before the request, the browser looks up example.com's numeric address (DNS), and with https it sets up encryption first. Other lessons show both.
The browser scrolls the heading to the top of the window when the page is long enough. The figure draws a long page; on a page that already fits, nothing needs to move.
The file on the card is real HTML. Saved as index.html, its links work; the menu and about pages only exist if you write them too.

اختبار يتاح بعد الخطوة الأخيرة.