| NOTE: Many of the definitions are derived wholly or simplified on the recommendation of the W3C Cascading Style Sheets, Level 2 Revision 1 (CSS2.1), and Recommendation of the W3C "HTML 4.01 Specification" that are in the Section HTML / CSS on this website. |
| In this tutorial I will explain the HTML instructions, which allow you to create links or hyperlinks to other websites or other resources. I will not explain all the possibilities of these instructions, because I do not want to dwell on minor use properties. I will explain in detail what mostly is used so there is no doubt, because these instructions are the soul of the Internet and its rapid expansion. |
| I´ll also comment on those rulings CSS that allow formatting visually these links. |
| Before getting into definitions, let's make it clear why it is so important instruction link or hyperlink. |
| A web can not be contained entirely within a single HTML file. If so, it contains very little information. Typically, a web that has a principal page (index page) and from there we can access to other pages that contain new data, new links to internal or external pages, or links to pages already seen before. |
| This form of access to data is the essence of the Internet and is characterized by non-sequential, in others words, their ability to access to the data 'jumping' from one to another in the order you want. |
| The typical example of the sequential access is a book. We started by reading the first page and a must read page after another, in the established order (sequencing) to understand the message of the book. In the webs we do not need this. We can jump to wherever we want, without limitations. |
| To create links or hyperlinks, we must use the HTML tag < A > text-or image-of-link< / A > |
| |
 < A > text or image link < / A > :
|
| Element to create links. States within the BODY. The content of element determines the position of origin or destination of the link. This now seems confusing, but only comes to say that with the tag < A > we can represent a link output (source) or point of entry (destination). It is explained in more detail a little lower. Among the available attributes, the most common are: |
|
 HREF = "uri" |
|
With this attribute we declare the place where a resource is stored on the web. It is the most used, and can link with the current element that is defined in the URI (Uniform Resource Identifier). This URI may indicate an external address or an internal IP addresses (our website). It's a way to use this label as a creator of a hyperlink of origin or departure. You can write the URI of the form mailto: emaildirection, and this opens the e-mail client on the PC that clicks that link and type in the "TO" that e-mail address, to send an email. |
|
NAME = "stringname" |
|
With this attribute we assign a name to the current element to serve as a destination for other types of HREF links. This name must be unique, and is located at the same level as the names of identifier type (those who call with the ID = "identificatorname") and therefore can not have an ID and a NAME with the same value. Used when you want to access with a hyperlink to a specific area of the same website in which we find ourselves, or otherwise not in the beginning, but to a specific height of the content. So we use the < A > to create a destination of other links. So, to define the destination we would type < A NAME = "nombredepuntodedestino" > and on the other side of the paper, the link we want to go to the previous position, will put < A HREF="#nombredepuntodedestino" >link text< /A >. |
|
Let us not forget the # before the name of the identifier, which is indicating that it is an internal document. If the document was located on another page that is different from the call to the link, we would put the name of the document before the #, as shown here:
< A HREF= "documento.html#pointtargetname" > link text< /A >
Below is a detailed example. |
| |
| Apart from attributes that are used with other elements and I've mentioned in other tutorials, such as ID, CLASS and STYLE, there are two that are widely used: |
|
TITLE = "NameTitle" |
|
With this attribute we offer more information about the content of the link. This information is visible when you have some time the cursor over the hyperlink. |
|
TARGET = "nameframe" |
|
With this attribute we specify where we want to open the contents of the link clicked. He may have several values, from which I quote the most important: |
|
 framename: |
|
Is the name of the frame where we will place the content. I will not extend far in explaining the term FRAME. Just say that while it has been widely used, today its use is disapproved. It is based on dividing the web page in separate frames, so that they can be loaded into a new frame in a part of the page without the others being affected. |
|
_blank: |
|
Opens content links in a new window. |
|
_self: |
|
Opens in the same window / frame where there is a link-to-call (if nothing it put its the default) |
|
_top: |
|
Cancels all frames and opens the contents of the link in the main complete window. |
| |
|
| NOTE: The Target property is also disapproved its use. Without going into the reasons (on the Web, there are talks and discussions on this subject from everyone) I do like to add that today almost all the websites use it (especially TARGET = _blank) and I dont't think many developers will no longer use it. In fact, I am the first to admit that I have used it and often, and I realize that I must not use it, something I´m going to do gradually. |
| NOTE 2: Although we have defined our page with a strict DTD, property TARGET will function properly, but the HTML validator will reject us. |
| This example shows all properties of the < A >. The code is extensive and, instead of representing it here, it is preferable that, once loaded into the web browser, the web page of the example, view the source code of the page through "VIEW / SOURCE CODE" in IExplorer or VIEW / SOURCE CODE OF THE PAGE" in Firefox. |
| You can do the same with the local paper wich is called from the fifth link. |
| The examples we have seen are all represented on texts, but as stated in the description of the < A >, you can also use images as hyperlinks. To do so the first thing we do is to define the HTML tag that is used to represent pictures and then we will use it to create any link or hyperlink. |
| |
< IMG > : |
| This HTML tag is used to add to our web graphic elements (images). We have already seen how to do this by placing the image as the background of our website (background-image), but now we´ll use it to place them as content, and even hyperlinks. You can also use the OBJECT tag for this purpose, but I'll not speak about that now. Possibly in a later tutorial I will explain it in detail. |
| IMG consists only of the opening tag, not being possible (because it doesn't exist) put a closing tag. All the properties that you add will go into the same tag. The most representative are: |
|
SRC= "url" |
|
With this property we indicated the path to the image we wish to place on our website. The most commonly used image formats are JPG, GIF and PNG. |
|
ALT= "alternative text" |
|
This property allows us to write a text to be displayed in the event that the browser is not capable of displaying the image, either by their own limitations or because they do not find the file specified in the URL. |
|
HEIGHT y WIDTH measure |
|
These two properties will enable us to elude the dimensions of the image and specify the ones we want. Personally, I try that the images have the right size, because it put an image to a small size than the original just makes it look smaller but occupying the 'weight' of a big one and if I do the reverse, I'll show a poor quality picture (small location in large).
If we don't write HEIGHT or WIDTH, the image is represented by its original size. If only one set, the image will maintain proportionality and the other value will adjust to being in the same ratio height / width. If we specify the two properties, the image will be restricted to these values, deforming as necessary.
The units of measurement are of the same type as those used in other properties (px, pt, ...). |
| |
|
| NOTE: For this tag, you can also add the property TITLE, to visualize a brief description if we keep the mouse cursor over it a few seconds. |
| NOTE 2: Using CSS we can change some features of this tag. Some of the most widely used are those relating to borders, to remove or change the appearance, thickness or color (see the CSS tag, BORDER). |
| NOTE 3: If we use an image as a hyperlink, just have to replace the text that is usually included between the tags < A > and < / A > by the sentence IMG complete. |
| The following code shows some examples with IMG. The first with an image as it is, the second with the same image resized in height (note that the width is also rescale) and ALT and TITLE, and the third changing the border and used as a hyperlink. |
 |
| This EJEMPLO shows its operation. The last hyperlink in the example above, I have shown it to you to see the border around the image, then clicking the link it will be purple when we return to the page. That edge that matches the color that takes the text of the hyperlinks in the first instance, it will serve me for the next paragraph. |
| |
| Trying to CSS, I think you will all understand that I can create a class and assign it to an image or a text, so that we visual format and appearance. But the case of hyperlinks is different, and for visual format, apart from the properties we already know, we can use a pseudo-specific classes for them. |
| |
:link :visited :hover :active |
| These pseudo-classes specify the possible states in which they can find a hyperlink. |
|
:link (or a:link) |
|
Its to specify the properties of the hyperlinks at rest, ie, as found before making anything. |
|
:visited (or a:visited) |
|
It will let us specify any changes we want it to occur when those links have already been visited before. Is exclusive with :link. |
|
:hover (or a:hover) |
|
Here you can change the hyperlink visually when the mouse cursor passes over it. |
|
:active (or a:active) |
|
By the time you're clicking on the link (just as the left mouse button is pressed). |
| |
|
| Before you see the examples, I must warn you that not all browsers behave the same with these pseudo-classes, especially in hover and active. It also happens that, depending on the browser, the time goes by a hyperlink already visited to returns again to its normal situation. |
| With these assumptions, the following code works perfectly in Firefox 3.0 (which is what I am using) and has a different behavior (not the right) on IExplorer 7. |
 |
| In this code I specified three different classes for three types of hyperlinks. I did this for you to see that the order in which they put these pseudo-classes is important. And I tell you :link and :visited have to be first, that hover will go later (if we put it before the browser it skips it), and :active, goes behind :hover, because if not, neither is considered. |
| The EXAMPLE I think it shows very clearly, but preferably execute in Firefox 3.0 or higher. In other browsers or versions I don't know the behavior that it may have the first two classes, but it should work well the last, which is the correct one. |
NOTE: These examples are with text, but you can also use these pseudo-classes, with hyperlinks of type image, but it will not be the color of the text that we change, but for example, borders, or even rendered image. |
| |
| We've talked throughout the tutorial of the elements URI or URL referring to as the full address or relative to get the resources we wish to access. These resources can be external or internal web pages or other documents as images or text document ... |
When the searched item is external (it is not in our server), the thing is easy, put the full address and that's it. But if the documents or web pages that we access to are part of our website, we work with relative directions (it is much more comfortable) and for this, somewhere must specify the absolute path from witch we part, so that browsers can complete relative paths with that information.
For this we use the BASE tag. |
| |
< BASE > |
| It has no end tag. It is used with the HREF tag, and is declared in the < HEAD >. The uri that he puts the HREF specifies the base address from which the relative ties will calculate the complete direction of each route. |
| |
|
| For example, if we declare the BASE tag and use the relative address < A > as the following example: |
 |
The relative direction "../ejemplos/ejemplo5.html" relative direction is completed, with the absolute address specified in the BASE tag to:
http://www.wmasterfacil.com/ejemplos/ejemplo5.html |
The .. would go back one directory and be located in 'www.wmasterfacil.com' and then, we would add the directory 'ejemplos' and inside it the file 'ejemplo5.html'.
|
| And that's it. if you have doubts, the banner below will take you to where you can list them. I will answer as soon as possible. |
| |
Español
English
