Creating links in HTML5 is quite simple thanks to the HTML tag <a… ></a> which is called an anchor. This tag allows you to create three types of links. You can create links that will transfer you to other web pages of your site; you can create links that lead to other web pages on the Internet, or you can use the anchor tag to link certain places on the same web page. However, before you start creating links, it would be great to know something about the URL address and understand the difference between absolute and relative paths.
URL – Uniform Resource Locator is a unique resource address. It consists of special characters from the source to the resource so we can say that the URL is also the address of the path to the web page, file, or a specific part of the text. The URL address usually consists of the protocol, domain name or directory; or the name of the file. Of course, the URL address can be longer and more complicated because various parameters can be passed through it. You can type the URL of this blog in the address bar of your browser shortly.
but you can also do it like this:
https://www.manuelradovanovic.com/index.html
however, the URL can look more complicated:
https://www.youtube.com/watch?v=E861VLd3Yeg&t=6s1
When you surf the Internet, you mostly use web addresses that consist of HTTP – Hyper Text Transfer Protocol – a protocol for transferring hypertext that communicates with a server that must support the same protocol and domain; or you will get an HTML error 400 or 404 about an incorrect link.
There are also other protocols such as HTTPS - Hyper Text Transfer Protocol Security, which is the same as HTTP but the communication between the client and the server is encrypted; then FTP – File Transfer Protocol – a protocol for transferring files allows you to download files from the server and other protocols. After the protocol, the next part of the web address is the domain. The domain is the address of the computer where a web page is located. You can also find a domain for free through providers that offer it for free, but we do not recommend that. It is best to find a local provider and lease a domain from them for 2 years.
Your domain can also contain a port number. The default port for the HTTP protocol is 80 and because it is default there is no need to write it. But if you program a web application, for example, in Microsoft Visual Studio, you will see that when you start the web application in the address bar of your browser and the port number that is reserved for your local web applications. After the domain, the URL can consist of a directory path and with the name of the file or to use only the name of the file. Even then, the URL can be continued and contain special characters that are there for a reason.
Understanding Paths: Relative vs Absolute
Relative paths are something you should always use when creating links. With them, you will always be sure that you won’t have complications even if your website is moved to another directory on the server where your website is hosted. You won’t have to modify your web pages afterward. The name of a relative path can indicate a file that is located in the same directory as the website.
href = “index.html”
It can also indicate the path of a file that continues from the website’s directory.
href = “family/album.html”
The name of a relative path can represent one upper part of the website’s directory.
href = “.../album.html”
Or it can represent two upper parts of the directory. It can be more, but it is not recommended to create websites that way.
href = “.../.../album.html”
Absolute paths generally represent files when you want to use their absolute location and directories in the computer system or local network for security reasons. Unlike relative paths, absolute paths move from the highest level of the directory to the file name. They always start with a slash. It is bad practice to first use absolute paths before creating a website and then modify the links for hosting web pages on the Internet. For example, in Linux, the album.html page is used in the home directory, only for use on the local operating system. Then it makes sense to use an absolute path.
href = “home/family/album.html”
However, if the same page were located in the C directory on the Windows operating system, then the absolute path would be written like this:
href = “/c|/family/album.html”
Or if you use a Macintosh computer:
href = “/Macintosh%20Manuel/family/album.html”
Now that you are familiar with URLs and paths, we can move on to the practical level to see how links are made.
Navigating Your Site: Building Anchors and Links in HTML
We have already mentioned that there are three types of links. Anchor links or anchors serve us to jump from one place on a web page to another part of the same page. You can also jump from one page to a specific part of another page using an anchor. The second type of links is when you link to a web page of another site on your website, and the third type of links is when you link to a remote website on the Internet. Look at and code an example that shows how to make all three types of links.
Start Visual Studio Code or the IDE - integrated development environment that you use. Open the project or the html_css_tutorial directory and create a new HTML5 file. Name it lesson3.html.Then open your browser. Type in the web address www.lipsum.com and generate 5 paragraphs of text. This website serves programmers and designers when creating a website to generate and use placeholder text whenever you need it. Just click on the ‘Generate Lorem Ipsum’ button.
Select all 5 paragraphs and press CTRL + C on your keyboard as you copied the text. Then return to your lesson3.html file In the HTML editor, enter the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</html>
Paste with CTRL + V your text between <body> … </body> tags. Separate each paragraph with a <p> … </p> tags.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula eu metus lacinia consequat. Mauris ullamcorper tincidunt massa, eu fringilla orci porttitor eleifend. Maecenas dictum turpis et porta gravida. Nullam dignissim turpis malesuada felis blandit, quis accumsan urna tristique. Praesent faucibus quam ac arcu ultrices egestas. Mauris dictum lorem a sodales iaculis. Fusce volutpat ante quis lorem laoreet feugiat. Nulla venenatis, tellus sollicitudin iaculis sagittis, mi mi vestibulum arcu, a sollicitudin odio ex at leo. Nulla neque nulla, vulputate eu magna id, iaculis dignissim elit. Vestibulum suscipit pretium bibendum. Etiam id commodo justo.
</p>
<p>
Vivamus eu magna sit amet nunc hendrerit maximus. Curabitur posuere finibus gravida. Aenean convallis id velit laoreet tristique. Mauris nunc diam, vehicula auctor nibh ut, consectetur auctor lorem. Cras dui dolor, eleifend vitae accumsan a, lacinia in sem. Sed non est fermentum, lobortis dui id, malesuada dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vitae pretium tellus. Integer hendrerit eget magna aliquam pellentesque. Donec ullamcorper convallis suscipit. Vivamus bibendum, neque in tempor posuere, velit nibh consequat sapien, a consequat enim quam eu ligula.
</p>
<p>
Phasellus non pulvinar diam. Maecenas vestibulum nunc eu tincidunt consectetur. Maecenas malesuada aliquet ligula sit amet tempus. Vivamus quis diam ex. Aliquam porttitor, purus vel posuere consectetur, lorem elit iaculis velit, sed vehicula purus dolor quis nisl. Proin felis nisi, condimentum volutpat suscipit a, auctor sit amet sem. In commodo lacus eu imperdiet dictum. Pellentesque ac bibendum eros. Proin tincidunt pulvinar ex, in dictum diam. Mauris nec porta enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<p>
Nullam id urna purus. Suspendisse sed enim egestas, varius augue ut, interdum nulla. Aenean sit amet neque arcu. Nulla quis tincidunt leo. Pellentesque id augue enim. Maecenas vehicula ligula a urna ullamcorper, ut vestibulum risus vehicula. Donec feugiat, velit at eleifend volutpat, mauris orci vestibulum metus, eu lacinia tellus ipsum convallis ipsum. Sed tortor metus, sollicitudin quis nulla lobortis, viverra volutpat augue. Suspendisse at imperdiet magna. Vivamus at dolor a elit hendrerit cursus ut nec tellus. Etiam libero purus, finibus nec lobortis at, eleifend non velit. Donec mollis lorem lectus, eget tincidunt tellus dictum nec.
</p>
<p>
Donec in nunc nec est condimentum hendrerit. Sed ac nisl eget dolor viverra vestibulum. Proin id risus non diam volutpat venenatis. Quisque fringilla nulla ligula, a porttitor ligula sollicitudin quis. Nam sapien lectus, aliquet ac rhoncus at, blandit et felis. Phasellus non diam velit. Pellentesque ac gravida turpis. In diam ipsum, finibus non tempus quis, vestibulum pretium tellus. Quisque eu ultrices dolor.
</p>
Let's go back to the top of the page and type the following title:
<title>Bookmarks and Links in HTML5</title>
Let's write some text on the web page. Under the <body> tag before our paragraphs:
<h1>Bookmarks and Links in HTML5</h1>
<h3>Bookmarks can be useful if your webpage is very long.</h3>
<h3>To make a bookmark, you must first create the bookmark, and then add a link to it.</h3>
<h3>When the link is clicked, the page will scroll to the location with the bookmark.</h3>
The first type of links we will create are anchors. So, when you click on a link, we want you to jump exactly to a specific paragraph on the same page. We have 5 paragraphs, so we make 5 links for each.
<ul>
<li><a href="#s1">Section 1</a></li>
<li><a href="#s2">Section 2</a></li>
<li><a href="#s3">Section 3</a></li>
<li><a href="#s4">Section 4</a></li>
<li><a href="#s5">Section 5</a></li>
</ul>
HTML tags for an unordered list should not confuse you. If you do not understand HTML lists, read the previous post here. The focus is on the href attribute – short for Hypertext Reference; and the text between the <a> … </a> tags that are nested in an HTML unordered list. So, a link consists of a URL or an ID when we make anchors and text between the <a> … </a> tags. Keep in mind that not only text has to stand between the mentioned tags. There can also be an image or some animation. Once we have made the links and determined where we will jump from, it is necessary to specify where we are jumping to. In front of each paragraph, insert anchors. You have 5 links and you need to create one anchor for each.
<h2 id="s1">Section 1</h2>
Anchors are made simply, you specify the ID attribute and when you click on the website link with the attribute, in this example s1; you will jump to that part of the page. Put an anchor in front of the second paragraph for the second paragraph.
<h2 id="s2">Section 2</h2>
Do the same for all 5. Pay attention that the ID must always be unique and such a name must not be a word that is mentioned somewhere in the text on the website. That’s all you need for the anchors to function.
Now see how another type of link is created; that is, how another website links to a page on the same website. Below the last paragraph, add the following code:
<h3>A local link is the link to the same web site. It is specified with a relative URL.</h3>
<p><em>For more information about links, please click <a href="page2.html"> here</a>.</em></p>
On this page you can see how to create a link that opens a page on the Internet. In this case it is the web address of this blog. Set the URL to the href attribute and insert the text or image that you want the user of your website to click on to go to another website. It's all that simple. The target attribute indicates that the blog will open in a new tab of the user's browser.
No comments:
Post a Comment