Content
Links
The links or hyperlinks allow the user to browse non-sequentially, other external websites spread around the world through hypertext links or parts of the same website
For this we use the element to that is an anchor
In example it has been linked to the home page of this website where the attribute href is the destination of the link (it is advisable to use quotation marks (single or double) so that the browser understands that it is of text type) and the text within the element is the indicative text that will appear on the link screen (with a special color and generally underlined)
Remaining as a result:
Three types of links can be distinguished:
- With absolute address
- With relative address
- Within the same page
- Within our web
- Outside of our website
With absolute address
If we want to link to our page or a page that is outside of ours (i.e. it is on a server other than the one that we have hosted it)
You need to know your full address, or URL (Uniform Resource Locator)
The URL could be, in addition to the address of an Internet page, an ftp address, gopher or other internet service
The destination of the link will in these cases be the initial or default page of that web page, which will normally be by default index.html, index.htm, index.php or index.asp, will depend on the language used when writing the web page
For that reason, we will be able to skip that login page and it depends how your server is configured, you'll get the desired response or a type 404 error wrong direction
In the example it has been linked to the Microsoft home page by using the URL of a secure website HTTPS and you have used the attribute target with the value _blank to instruct the browser to open a new window with the linked page, so that we can see both pages without losing the content that we were previously viewing
It is very important to copy these addresses correctly (respecting the case, because the servers are able to distinguish them and may not recognize the address we have written, returning the aforementioned error 404 of incorrect address)
It has also been used for the attribute rel with the values noopener and noreferrer for that is not stored in the cache of the browser
Remaining as a result:
With relative address
We might have only one page. But most often we have several pages, one initial (or main) and others connected to it, among themselves or with other external ones that in turn are connected to themselves and other external ones
Within the same page
Sometimes, in the case of very large pages, we may be interested in leaping from one position to another
The destination of the link, in this case the site within the page where we want to jump, is replaced by a brand (the word mark can be any word we want, but preceded by the symbol #)
This word (or words, since we can use more than one separated with _) will appear on a colored screen (in the form of hypertext and if we use a CSS style sheet can be modified according to our needs)
In the example, a link has been created at the end of this same page, to which we can jump to the label that we have called end if you click on the link
For it to work properly, there must also be the final link, but the browser will ignore the link because it will not know where to jump
In the example we have the link that we will have to include, in the position that we want to be jump, the attribute has been used for this purpose name, with the chosen value but without using the symbol #
Remaining as a result:
Within our web
We can also go to another page of our website hosted in our server
In the example has been linked to the page within this website that talks about the lists, we have included in the attribute href relative direction and parameters, which are preceded by the symbol ? and have the format of variable='value' and if we have more than one, they separate with the symbol &
Remaining as a result:
The example has been linked to a specific place on the list page, specifically the one that talks about the bulleted list
To this end, the system brands explained above
Remaining as a result:
In the examples above we were assuming that the page on which we write the tag and the page to which you want to make the leap they were in the same directory
It may happen that we have organized the Web site with a main directory and subdirectories auxiliary hanging from the same
If the page to which I want to skip is in the subdirectory subdir, then in the href attribute we should have written /subdir/pagina.html, indicating the full path from the root directory to the page page.html
Conversely, if we want to jump from one page to another that is in a previous directory, in the href attribute we should have written ../page.html
In this case, the colons instruct the browser to go to the previous directory
You must use the symbol / to indicate the subdirectories if you are working with a Unix server, and the symbol \, if you are working with a Windows server, because the directory system is treated differently
If we want to avoid the complications of having both subdirectory, we can save everything in the root directory or in a single directory
However, this practice has the disadvantage that everything is more messy and if in the future we want to make modifications it is more complicated to find the contents, than if we had ordered it by specific subdirectories with a name that is descriptive about its content
Outside of our website
Is applied as explained above for the absolute addresses and within our web, but this time the links will not be hosted on our server, but on an external one
If we want our users to get in touch with us, we can include our email address in a link
In the example has been included within the attribute href the reserved word mailto followed by a two point along with the email address of the administrator of this website
It has also been repeated within the tag so that the user knows that the link belongs to an email, so that it is easily recognized, although a descriptive message or the image of a mailbox (a metaphor that the user might relate to the email) could have been used, for example
Remaining as a result:
By clicking the link we will see that the browser will try to open the program that has associated for the management of the mail, with the address of the recipient already filled in, which is the one that appeared in the link
We can also add other values that will be used by the email manager using reserved words that are preceded by the symbol ? and have the format of variable='value' and if we have more than one, they separate with the symbol &
Among the most outstanding we have:
- subject
is the recipient user of the mail, by default it will be Feedback
- cc
simulates a carbon copy used in case there is more than one recipient, we should indicate them here separating them with the symbol ;
The recipients will be able to see who are the other recipients
- bcc it's similar to copying in carbon copy
In this case the copy is hidden and the recipients will not be able to see who are the other recipients
- body
it's the text of the email itself, the mail manager could ignore it or add something to it, such as a farewell message or a signature, so it won't always be the same as what we've written on the link
This is the end mark (it does not contain an actual link as it is a binding reference, but because it has text, it will be underlined as if it were) for the previous example of the system brands explained above