Creating text link html

: The Anchor element

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Try it

Attributes

This element’s attributes include the global attributes.

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

  • Without a value, the browser will suggest a filename/extension, generated from various sources:
    • The Content-Disposition HTTP header
    • The final segment in the URL path
    • The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
    • download only works for same-origin URLs, or the blob: and data: schemes.
    • How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
    • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
      • If the header specifies a filename , it takes priority over a filename specified in the download attribute.
      • If the header specifies a disposition of inline , Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.

      The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

      • Sections of a page with document fragments
      • Specific text portions with text fragments
      • Pieces of media files with media fragments
      • Telephone numbers with tel: URLs
      • Email addresses with mailto: URLs
      • While web browsers may not support other URL schemes, websites can with registerProtocolHandler()

      Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

      A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

      How much of the referrer to send when following the link.

      • no-referrer : The Referer header will not be sent.
      • no-referrer-when-downgrade : The Referer header will not be sent to origins without TLS (HTTPS).
      • origin : The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
      • origin-when-cross-origin : The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
      • same-origin : A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
      • strict-origin : Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don’t send it to a less secure destination (HTTPS→HTTP).
      • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
      • unsafe-url : The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

      The relationship of the linked URL as space-separated link types.

      Where to display the linked URL, as the name for a browsing context (a tab, window, or ). The following keywords have special meanings for where to load the URL:

      • _self : the current browsing context. (Default)
      • _blank : usually a new tab, but users can configure browsers to open a new window instead.
      • _parent : the parent browsing context of the current one. If no parent, behaves as _self .
      • _top : the topmost browsing context (the «highest» context that’s an ancestor of the current one). If no ancestors, behaves as _self .

      Note: Setting target=»_blank» on elements implicitly provides the same rel behavior as setting rel=»noopener» which does not set window.opener .

      Hints at the linked URL’s format with a MIME type. No built-in functionality.

      Deprecated attributes

      Hinted at the character encoding of the linked URL.

      Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

      Used with the shape attribute. A comma-separated list of coordinates.

      Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on , as long as they had identical values.

      Note: Use the global attribute id instead.

      Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

      The shape of the hyperlink’s region in an image map.

      Источник

      The «href» attribute names the connection to another web page. Actually is the place where it will be sent, the user that clicks on the link.

      • intern — to specifically places from the page(anchors)>
      • locals — to other pages from the same domain
      • globals — to other domains, outside the site
      htmlInternal - href="#anchorname" Local - href="../img/foto.jpg" Global - href="http://www.tutorialehtml.com/"

      To set the beginning and the end of a anchor it can be used . Choose the type of the attribute that you need then put it inside the tag.

      Demo

      The «target» attribute tells the browser if it needs to open a new page in a new window or in the same window.

      target Opens a new window
      _self» Opens a page in the same window
      _parent» Opens a new page in a superior frame of the link
      _top» Opens a new page in the same browser canceling all the frames

      The next example shows how a new page can be opened in a window of the browser. In this way, we can remain on the tutorial’s page and open a new navigation page.

      Demo

      HTML — Anchor

      Is used to link two sections of the same page. In this way, we need to give a name to those sections, but for this is indicated to take a look at the next example.

      html

      HTML - Hypertext Reference / href

      HTML - Text links

      HTML - E-mail text

      Next, we need to make a code to the link by putting it before the anchor’s name

      htmlGo to top Learn about text links Learn about e-mail addresses 

      Demo

      To make an e-mail link is very simple. If you want someone to write you an email the best thing to do would be to put at its disposition a link with your email and a pre-established subject.

      Demo

      In case the subject is not enough and you want to add something else to the email’s content, you can do it with the help of the next code:

      Demo

      A download link looks like a normal link text. The problem kicks in when we want to add a photograph. The best solution is to use a thumbnail with a link, but we will talk more about this problem in the next lesson.

      When we see a video on a YouTube page, we usually have the button to subscribe right next to it. But what happens when the video is inserted on our own website. Here is how we can simulate a similar link in the same way. Feel free to click to see how it works.

      Demo

      use the tag in the interior of the element to set a base link. This is necessary in case you have somewhere a link that doesn’t work or in case the destination doesn’t exist anymore. The base link sends the user to the specified address. Usually, it sends the user to the upper part of the page but is as well accepted on any other page, eventually, a special page is made for this purpose.

      Источник

      Читайте также:  Php error get line number
Оцените статью