HTML links and attributes

Source: Internet
Author: User
Tags mail

Links are also implemented through elements (element). It takes only one element and one attribute to do the link. Here is an example of a link to jinanwangzhanjianshe.com:

Example 1:

<a href= "http://www.jinanwangzhanjianshe.com/" > This is a link to jinanwangzhanjianshe.com </a>

This example appears in the browser as follows:

This is a link to cnzz.cn
Element a represents the link (anchor); The property href represents the hypertext reference (hypertext Reference), which specifies where the link is directed-usually an Internet address or a filename.

In the example above, the value of the attribute href is "http://www.jinanwangzhanjianshe.com", which is the full address of the www.jinanwangzhanjianshe.com Web site, also known as the URL (Uniform Resource Locator). Note that "http://" must be included in the URL. "This is a link to jinanwangzhanjianshe.com" is the text displayed in the browser for this link. Remember to write the </a> at the end of the element.

How do I add links between pages in the same Web site?
If you want to make a link between different pages of the same site, you don't have to spell out the full URL of the page. For example, if you have two pages (such as page1.htm and page2.htm), and they are stored in the same folder, you can write the file name when you are doing the link. Thus, the link to page1.htm to page2.htm will look like the following:

Example 2:

<a href= "Page2.htm" > click here to go to page 2nd </a>

If page2.htm is placed in the next folder (such as "subfolder"), then the link will be:

Example 3:

<a href= "subfolder/page2.htm" > click here to go to page 2nd </a>

Conversely, the link from page2.htm (in a subordinate folder) to Page1.htm will be this:

Example 4:

<a href= ". /page1.htm "> Go to 1th page </a>

“.. /"represents the folder on the current location (the folder where the link is located). Similarly, the upper parent folder at the current location is available. /.. /"indicated.

Do you understand the rules? Of course, it's OK if you give the full URL.

What if you want to do a link within a Web page?
You can also make links within a Web page--for example, at the beginning of a Web page--by providing a list of links to the following chapters. This can be done by using the id attribute and the "#" symbol.

Mark the element to be pointed with the id attribute. For example:


<H1 id= "Heading1" > title 1

Then point to that element by using "#" in the link. "#" must follow the value of an ID attribute, indicating that the link points to where the id attribute is defined. For example:


<a href= "#heading1" > go to Title 1</a>

Take a look at an example to understand:

Example 5:


<body>

<p><a href= "#heading1" > go to Title 1</a></p>
<p><a href= "#heading2" > go to Title 2</a></p>

<H1 id= "Heading1" > title 1<p> some text .... </p>

<H1 id= "Heading2" > title 2<p> some text .... </p>

</body>

This example will appear in the browser as follows (you can try clicking on these two links):

Go to Heading 1

Go to Heading 2

Title 1
Some text ...

Title 2
Some text ...

(Note: id attribute must begin with a letter)

In addition to Web pages, what can links point to?
You can also do a link for the e-mail address, the same way as the link to the Web page:

Example 6:

<a href=mailto:soft@dabaoku> email to 1234@jinanwangzhanjianshe.com </a>

This example appears in the browser as follows:

Send an email to soft@jinanwangzhanjianshe.com

The only difference to a link to a Web page is that the link to the e-mail address must be mailto: start, and then write the e-mail address immediately thereafter. When you click on this link, the default e-mail program will create a new message with the recipient address as the e-mail address specified in the link. Note: This function only works if your computer has an e-mail program installed. Try it!

Are there any other attributes I need to know?
The href attribute is always used to create a link. Alternatively, you can use the title attribute on the link:

Example 7:

<a href= "http://www.jinanwangzhanjianshe.com/" title= "on Web page making Jinan website learning html" >jinanwangzhanjianshe.com</a >

This example appears in the browser as follows:

Jinanwangzhanjianshe.com

The Title property is used to enter a short description for the link. When you hover the mouse cursor over the link (do not click on it), the prompt text "on the web to make Jinan website Construction learning HTML" will appear.
Many elements can set properties.

What is a property?
As you may recall, HTML tells the browser how to display the page via a tag (such as <br/> tells the browser to show a newline). You can attach some information to some elements, which are called attributes.

Example 1:



Attributes should be written on the first label of the element. The specific wording is: The attribute name is followed by an equal sign ("=") followed by an attribute value enclosed in double quotes. For the value of the Style property, you can use a semicolon (";" ) to separate multiple style directives. This will be described later.

What knowledge points are involved here?
There are many properties, we first learn the style property, which is used to set the style of the page, such as setting the background color.

Example 2:



<body style= "Background-color: #ff0000;" >
</body>


This example will display a full red page in the browser-try it yourself. We will explain the principle of color setting in detail later.

Note that some elements and attributes have names that use American spellings, such as color (rather than colour). Note the spelling of the element and attribute names in this tutorial, and never write wrong--otherwise the browser will not be able to understand your code. Also, don't forget to enclose the attribute value in double quotes.

Why is the top page full of red?
In the example above, we set the background color of the Web page to "#ff0000", and this hexadecimal code (HEX) represents red. Each color has its corresponding hexadecimal code. Here are some examples:

White: #ffffff
Black: #000000
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00

The hexadecimal code starts with "#" followed by a six-digit number or letter. Because there are too many hexadecimal codes, it is inconvenient to remember which code corresponds to which particular color. To this end, we produced a table for the most commonly used 216 colors, for everyone to see: 216 Web Page Security Color Table < see article bottom >.

In addition, for some of the most commonly used colors (such as white, black, red, blue, green, and yellow), you can also use their English name.

Example 3:


<body style= "background-color:red;" >


So much for color. Let's continue to learn about attributes.

What elements can use attributes?
Different elements use different attributes.

Some elements (such as body, etc.) are more likely to be added to attributes, while some elements (such as BR) are smaller and are not even added to attributes.

There are many elements in HTML, as well as many attributes. Some properties are used only for individual elements, and some properties are available for many elements. Vice versa: Some elements can only use individual properties, and some elements may use more properties.

This may sound confusing, but once you become familiar with the various attributes, you will feel very simple and find them useful.

This tutorial will describe most of the important properties.

What parts are included in an element?
In general, an element includes a first label (start tag), 0 or more attributes, some content, and a tail tag (end tag). It's as simple as that.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.