Designing the more tag in WordPress. How to insert a hyperlink in HTML? Creating and using hyperlinks in HTML
Often this link is not very noticeable. Only those who realize that the article did not end at the second or third paragraph, and that there is something else there, will specifically look for it. To somehow highlight this link, you need to format it accordingly. But how to do this correctly? After all, if you look into the code of the majority WordPress templates, then you can find that the text of this link is, as it were, “hardwired” into the PHP code for displaying the article. For example, like this:
Designing the more tag in WordPress. Method 1
Firstly, at WordPress engine There is already a provision for this in the form of the more-link class. That is, no matter how you distort the template, the engine itself will in any case substitute class="more-link" for this link. And this is a very useful thing. It says that we can easily use this class by simply adding a certain set of rules for it to the sheet css styles our topic. In fact, all we have to do is add something like this to the style.css file of the template:
More-link (
background: #ffc;
}
But! There is a small ambush here. The fact is that we cannot be too free with this link for one simple reason: this link inherits all the rules that are already predefined for links in the post. The background can be changed, the font size can also be changed. But you can’t change the color of the links. In addition, replacing a text link with a picture is also not an easy task. Therefore, we read another way.
Designing the more tag in WordPress. Method 2
Secondly, you can put this link in a separate block, which can be given any display rules you like. How to do it? Lehhhko and at ease! First, in the index.php file, let’s slightly correct the place where it says about displaying the contents of the article. It's still the same part:
Here we will simply remove everything between the single quotes and leave something like this:
If any class of the entry type was responsible for displaying the text, then it’s time to close here this block(put
It is clear that the image should already be in the images folder of your template and have the specified dimensions and name bg-more.gif.
It's simple! If you have other solutions to this problem, I'd be glad to hear.
To control the appearance of various links in CSS, pseudo-classes are used, which are specified after the A selector separated by a colon. In table 1 shows valid pseudo-classes and their descriptions.
Typically, using the link pseudo-class has the same effect as applying a style to the A selector. Therefore, this pseudo-class can be omitted.
Links without underlining
One of the most popular CSS applications- this hides the underlining on links. From a usability standpoint, this is not a completely correct solution, since the user may not immediately realize that the text he sees is a link. Everyone is already used to it - if an underscore is used, it means it is a link. But when correct use The lack of underlining on links can give a certain effect to the site. It is often done that when the cursor is hovered, the link becomes underlined, changes its color, or both effects are used simultaneously (example 1).
Below is the usage this example. When you hover over a link, it becomes underlined and red.
Underlined and overlined links
Another example demonstrates the use of both underscore and overline in links. With this effect, thin lines will appear above and below the link when you hover over it. This is achieved by using the property text-decoration: underline overline in the A:hover selector.
Resizing a link
Example 3 shows how to resize a link when you hover over it.
Change the underline color
With links, with CSS help, can be done interesting feature. The color of the link, when you hover the mouse cursor over it, remains unchanged, but it has an underline of a different color than the link itself (example 4).
Example 4: Create an underline of a different color
Links in different colors
Often there is a need to use links of different colors and sizes on one page. And apply the appropriate type of links for each area of the web page. Some are for menus, others are for text. In this case, we create two or more classes with our own parameters and use them at our discretion. In example 6, it is enough to change the values of the corresponding class, and the colors of the links where this class is used will change automatically.
The result of this example is shown in Fig. 1.
External style sheets
Now imagine that you are creating a website with a dozen pages and each page must have a style sheet that specifies its design. As we said earlier, all pages of one site often look the same, which means that similar style sheets are used to design them. Most often, a site has only one style sheet that describes all its elements. To avoid duplicating this entire table between tags on each Web page, it can be placed in a separate file with the extension .css and connect to the HTML document if necessary. These style sheets are called external style sheets.
Advantage external tables is that, having once downloaded it, the browser caches the information and, when downloading it again, takes it not from the Web server, but from local disk. Thus, when loading the pages of a Web site with one style sheet, we save on the loading time of the external style sheet, i.e. file containing it .css. The second advantage is again the ease of editing such pages. It is enough to correct the element's design style in one place - in the file containing the style sheet, and on all HTML pages that use these styles, appearance elements will change.
As you already know, an empty LINK element is used for these purposes, which is located in the head section. Let's look at an example when we need to connect a style sheet located in a file to an HTML document style.css.
According to the HTML specification, website authors can connect several external tables to one document. They can complement each other, then the cascading principle is used to determine the properties of objects. It comes into effect if several tables have a description for the same element.
Tables can be compiled in such a way that they are mutually exclusive of each other, in which case they are called alternative, i.e. the user can choose which table to use. For example, to display on devices with limited width, you can use smaller fonts. And for people with impaired vision, you can, on the contrary, increase the font sizes and arrange this in the form of a separate style sheet. The author has the opportunity to indicate which of the tables is preferable. The description and purpose of each style sheet are specified in title attribute. This would be convenient: you go to the site, see what style sheets have been written for it, select the most suitable one for yourself and use it. But to do this, browsers must provide the ability to select your preferred style sheet.
Only browsers provide this choice. Netscape version 6.x(And Mozilla respectively), Opera 5 and older. They provide the ability to increase the font size, even if it is set in pixels. So, in fact, alternative style sheets are not needed. Internet Explorer , although the most common browser, does not provide such an opportunity. It allows you to increase the font size only if the font is specified using keywords or using standard sizes HTML language, i.e. numbers from 1 to 7. This is probably why developers do not write several alternative tables.
Now let's return to the LINK element. A
tribute href must be present and contain as a value the URL of the style sheet to be connected.
Attribute rel indicates how the included file relates to this HTML document. To add a main stylesheet, use the stylesheet value, with the description in the attribute title no need to ask. To enable the user to select the user's preferred table from among many alternative tables, specify the attribute rel="stylesheet" and set its description in the attribute title. To specify an alternative style sheet, set the attribute rel="alternate stylesheet" and description in attribute title.
Here are some examples:
This line includes an alternative style sheet with a smaller font size, the table is stored in the file small-font.css.Using this line, an alternative style sheet with the largest font size is connected, the table is stored in a file big-font.css.
Attribute type tells the browser what language the style sheet is written in, and allows it not to be downloaded to the computer if this language is not supported by the browser.
Importing style sheets
There is another way to include a style sheet stored in separate file. This is done using a special directive @import in the following way.In this case, all entries in tables made inside the document are merged with the imported table from the style.css file. Conflict situations are resolved using a cascading mechanism.
It should be noted that the directive @import does not support browser Netscape Navigator 4.0, but it is installed on no more than 0.1% of Internet users, so they can be neglected.
How to hide style information from the browser
To hide styling information from older browsers that don't support the element STYLE(in fairness, it should be noted that there are practically no more of them left), you can use the same thing as when hiding the script code - comments:(You will find more examples bottom of this page)
HTML Hyperlinks (Links)
- To create a link to another document - using the href attribute
- To make a bookmark inside a document - using the name attribute
HTML Syntax Links
Example
| Visit the website |
it will be displayed by the browser like this:
HTML Links - Target Attribute
The target attribute specifies where to open the linked (the one to which the link refers) document.
The example below will open the linked document in a new browser window or tab:
HTML Links - Name Attribute
The name attribute is used to create a bookmark (“anchor”) within an HTML document.
Comment:
The upcoming HTML5 standard suggests using the id attribute instead of the name attribute to specify the name of the link.
Using the id attribute actually works in HTML4 in all modern browsers.
Bookmarks are not showing up in any way in a special way. They are not visible to the reader.
Comment: Always add a trailing slash to subdirectory links. If you create a link like this: href="http://site/html", then two requests are generated to the server, first the server adds a slash to the address, and then creates new request: href="http://site/html/".
Advice: Named links are often used to create a "table of contents" at the beginning of a large document. Each chapter within a document is assigned a named anchor, and links to each of these named anchors are inserted at the beginning of the document.
Advice: If the browser does not find the specified named link, it goes to the beginning of the document. No errors occur.
A hyperlink is a basic, fundamental element of not only any website, but also the Internet as a whole (without links, the Internet would be something different). Hyperlinks surround us everywhere, which is probably why webmasters began to treat the design of links negligently, but a hyperlink is the most important thing that requires attention. In this article, I decided to prepare for you a number of tips and recommendations for designing links (based on the original note about Designing Hyperlinks.
But first, some background information:
Element can take on multiple "states" defined by CSS pseudo-classes:
- a:link- normal state of the link;
- a:visited- the link has been visited previously;
- a:hover- the cursor is hovered over the link (there is an article about);
- a:active- active link (when you click on it);
- a:focus- the user uses the TAB key to navigate.
One of the classic examples:
Common CSS properties for link styling
- color– hyperlink color;
- text-decoration– design technique applied to the text (there is a detailed article in the blog);
- background-color– background color (can, for example, change if the cursor is hovered over the link (a:hover);
- font-weight– a good way to emphasize a link by making it bold Bold.
- border- frame;
Sometimes webmasters use rather exotic styles, which rarely makes life easier for the user. The link must be different from the rest of the text, and this difference must be obvious. It is not necessary to do this in a bright, “screaming” way; sometimes it is enough to highlight the link in a different color. In general, it should be immediately clear to a new user that this is a link.
There is nothing wrong with using traditional stylistic schemes for links. The classic blue color of a hyperlink is widely recognized, but you don’t have to leave the default blue color; you can easily choose a shade that suits your site. If a webmaster makes links, for example, red, not every user will immediately understand what’s what, because such a link can pass for highlighting. In this case, you can, in principle, add an underscore.
By the way, for the same reason, do not use styles intended for hyperlinks to other elements, this will also create confusion. If you deviate greatly from classical schemes, do it wisely (see examples below).
It is mandatory to define all pseudo-classes, although links will work fine if pseudo-class styles are not defined, so webmasters often ignore them. We should also not forget that a large number of people do not use a mouse, so even such a “nonsense” state as a:focus should not be forgotten. Ideally, you would want to define a style for each state. In addition, you should remember that by default, different browsers have different designs for pseudo-classes. For example, in Firefox:active and:focus are highlighted with a gray border, while in Google Chrome, links with:active are unstyled, and:focus has a yellow border.
And finally, some good examples to follow:
G4Tv
It demonstrates a lot of “link” effects; it’s simply interesting to walk around the site!
Сarsonified
Very clear a:hover states. An example to follow!
I hope these few examples have inspired you to get serious about your link design! The main thing in this matter is not to forget about the details (little things). You don’t have to create separate original effects for the link hover state, but just at least change the color. It is not necessary to make the links bright and eye-catching, just “separate them from the text” is enough. And, of course, check the links work in all browsers.
P.S. Guard. For example, just on topic - the Vanilla perfume online store has a very beautiful design and well-thought-out link design.
To ensure that your website pleases your visitors with its design and works stably, order hosting from a reliable hosting company with good prices.
An article on where to buy links in article or link exchanges - automatic or permanently posted - will be extremely useful for webmasters.