Urls: links and images

We have sầu seen that in an element, the href attribute use used to lớn give sầu the destination of the links. This destination is a URL, but there is more to say about that, & we should have sầu a look now.

Bạn đang xem: Urls: links and images

URLs are also used to lớn refer to images so they can be displayed on the page. The


The src attribute is used to give the URL of the image. The alternative text attribute gives alternate text: text that can be displayed in place of the image if it can"t be loaded (because it can"t be found on the hệ thống, or network problems, or any other reason). Both of these attributes should be specified và the tag is empty, since it just marks the place an image should go, but doesn"t have sầu any content.

Absolute URLs

The URLs that we have sầu seen so far are absolute URLs. Absolute URLs contain a scheme, server, & path as described in the topic The Web và HTTP.. (but the path may be empty).

Absolute URLs can be used lớn locate a piece of content on the website with no other information or context.

Relative URLs

In HTML, you can also refer khổng lồ content by giving its position relative to the page you"re looking at. These relative sầu URLs give information lượt thích “in the same folder, find the page nextpage.html” or “look in the thư mục images for the image selfie.jpg”.

The words thư mục và directory are synonyms for us: we"ll say “folder” but either is acceptable.Lynda.com video: Using relative URLs.

In the same folder

The simplest relative sầu URL is the one that specifies “look in the same folder”. To do that, you simply specify the filename:

next page

The first line creates a liên kết khổng lồ the page nextpage.html in the same folder as the HTML page that contains that link. The second line references an image happy.png in the same folder.

The nice thing about relative URLs is that they will work between pages on your site, no matter where that site is. You can create a link that you want lớn take you back lớn your site"s menu: it will work when you"re editing the files on your computer and it will work after you have uploaded the site to a website VPS.

Inlớn a folder

Referring khổng lồ files in the same thư mục is straightforward enough, but you will often want lớn organize your files inlớn a thư mục structure. Suppose we have sầu organized our HTML và images inlớn folders lượt thích this:

Example folder structure for a website site*

If we want khổng lồ liên kết from menu.html khổng lồ about.html lượt thích the above: about me.

But what if we want to lớn liên kết inlớn a folder: link from menu.html khổng lồ europe.html in the vacations thư mục. We can put code like this in our thực đơn.html:

European vacationWhat this means khổng lồ the website browser is “start where the current file (menu.html) is; move into lớn the vacations thư mục and find europe.html.” lưu ý that the thư mục and file names are separated by a slash (/), not a backslash () or other character. Slash is the only character used to lớn separate folders in URLs.

Xem thêm: Root Điện Thoại Là Gì ? Cùng Tìm Hiểu Nhé! Những Lợi Ích Và Hậu Quả Của Việc Root Máy

We can also move in multiple thư mục levels by giving each thư mục khổng lồ enter. Again, if we were adding code to thực đơn.html, we could links to or include the image eiffel.jpg like this:

us at the Eiffel Tower

These would create a liên kết (first line: user clicks the words “us at the Eiffel Tower” to lớn go to lớn the image itself) and embed the image (second line: image appears on the thực đơn.html page itself).

Rethành viên that relative sầu URLs depover on where the page itself is in the thư mục structure. If we wanted khổng lồ vì the same thing on the europe.html page, the code would be this since we start inside the vacations thư mục.

us at the Eiffel Tower


Up a level

The above sầu lets us descover into lớn folders, but we will also need lớn move up out of them. For example, if we"re working on math.html & want khổng lồ make a links baông chồng to the menu.

What we have sầu khổng lồ express to lớn the browser is “move sầu up out of this folder (courses) & find thực đơn.html.” We can use the special thư mục name “..” khổng lồ vì this: the website browser will understvà it as “move sầu up a level”. A link khổng lồ the thực đơn one cấp độ up is expressed lượt thích this:

baông xã khổng lồ the menuWe can vày the same thing lớn move up two levels. We could put this on geog.html (inside both courses và last-semester):baông chồng to the menuThis liên kết will tell the browser lớn go up a màn chơi (out of last-semester), up again (out of courses), và find the file thực đơn.html.

We can combine these to lớn traverse the thư mục structure. Again, suppose we"re working on geog.html. This would insert the image big-ben.jpg:



The rules of relative URLs may seem complicated at first, but remember that they will save sầu you effort in the long term. All of these relative sầu URLs will work when you"re editing the site on your computer, and they will continue khổng lồ work after you upload everything to lớn a website hệ thống (as long as you keep the folder structure the same).


URLs are case sensitive. That means that the URL page.html is a different URL than Page.html or PAGE.HTML.

That means that the URLs you use must match your files. This can be difficult since both Windows & Mac computer are case insensitive: the tệp tin names page.html và Page.html are considered to lớn be the same.

That means that if you use the HTML to lớn refer khổng lồ a tệp tin you have sầu named Page.html, then it will work on your computer but not on a web server. Make sure your URLs và filenames match (probably by using lowercase everywhere).