{"id":711,"date":"2012-01-07T15:18:00","date_gmt":"2012-01-07T15:18:00","guid":{"rendered":"http:\/\/ursula-smith.com\/mixed-media\/?p=711"},"modified":"2014-07-04T13:48:57","modified_gmt":"2014-07-04T17:48:57","slug":"how-to-make-an-html-link-in-a-web-page","status":"publish","type":"post","link":"https:\/\/ursula-smith.com\/mixed-media\/how-to-make-an-html-link-in-a-web-page\/","title":{"rendered":"How to Make an HTML Link in a Web Page"},"content":{"rendered":"

As I have mentioned several times, I have a group of friends that are great artists. They, however, aren’t necessarily web programmers. So, in order to help them out for an up-coming blog hop on January 9, 2012, I decided to explain how to make a link using HTML. Hopefully this helps!!<\/p>\n

An HTML link is created using the Anchor <\/span><\/strong>tag. It goes something like this:<\/p>\n

<a href=”URL-to-the-web-page<\/span>” title=”<\/span><\/span><\/strong>Some explanantion of the link, if you like<\/span>“<\/span>><\/span>The Text you want display as the link in the web page<\/span><\/strong><\/a><\/span><\/strong><\/p>\n

In HTML each tag (generally) has an opening and a closing sequence. In the case of Anchor, it is <a><\/span><\/strong> and <\/a><\/span><\/strong> The <><\/span><\/strong> indicates it is a tag. . The a <\/span><\/strong>is the tag name. The \/<\/strong><\/span> in the second sequence, <\/a>, <\/span><\/strong> indicates it is a closing tag for the opening sequemce, <a><\/span><\/strong> .<\/p>\n

An anchor tag has an inner link text, which is the text that will actually show up in your web page document when it is read by the browser. This goes in between the opening anchor tag sequence and the closing tag sequence. In the example above, it is the text- The Text you want display as the link in the web page. <\/span><\/strong>This text can say anything you like. Most often, I actually use the URL to the web page I am trying to link to, so that in the case where the link might not work for some reason, the URL is displayed, and a user can copy the text and paste it into their browser, and they can get to the web page that way.<\/strong><\/p>\n

The actual linking part is handled by the href <\/strong><\/span>attribute. An HTML tag attribute sits inside an opening tag sequence. So the href attribute goes inside the <a> tag sequence, like so <a href=””><\/span><\/strong> . What goes between the quotes is the URL to the web page that you are trying to link to. So, if I was trying to link to this blog, I would use the URL, http:\/\/Ursula-Smith.com\/blog<\/a><\/span><\/strong><\/span> <\/strong>.<\/p>\n

The final piece, which is optional, is the title attribute, but it is a nice thing to have. The title attribute, again goes inside the opening anchor tag sequence, like so- <a <\/strong><\/span> title=””><\/strong><\/span> . <\/span><\/span><\/strong>The title allows a user to hover over the link, and the text within the title will be displayed by the browser (most times). So, in our example, the text Some explanantion of the link, if you like<\/span><\/strong> would be displayed. In the case where I use the URL as the link text, I usually add an explanation of the link in the title attribute.<\/p>\n

So here is the code for an example link to this page:<\/p>\n

<a href=”http:\/\/ursula-smith.com\/how-to-make-an-html-link-in-a-web-page\/<\/span><\/strong>” title=”This is a test”>Link to this page<\/a><\/span><\/strong><\/p>\n

and here is the actual link: Link to this Page<\/a>.<\/p>\n

So, now things get a little bit tricky! Because this post is for a bunch of artists, you KNOW they will want to have their link text be an image rather than just text \"&amp;#59;&amp;#41;\". No worries! Instead of just putting text in between the opening and closing anchor tag seuqences, you can put an image tag instead.<\/p>\n

An image tag looks something like this-<\/p>\n

<img src=”URL-to-the-image-on-a-web-server<\/span>“<\/strong> alt=”Alternate text in case image isn’t displayed”<\/span> <\/strong><\/span>title=”<\/span><\/span><\/strong>Some explanantion of the link, if you like<\/span>“<\/span><\/span><\/strong>\/><\/strong><\/span><\/p>\n

Again, we have an opening tag sequence <img><\/span><\/strong> , but instead of using a closing tag suequence <\/img><\/strong><\/span> , we are using a self closing tag seuqence- <img \/><\/span><\/strong> . This is because there is really nothing that goes inside <\/strong>the opening and closing tag sequences. In the anchor example, we had the link text. In an image tag, there is nothing. The only thing that you need is the src attribute, which goes inside the opening tag sequence. So, we can self close the tag by putting a \/<\/span><\/strong> before the > <\/span>in the opening tag sequence. <\/span><\/span><\/span><\/p>\n

The image that you want to display must exists somewhere on a web server, that is, it can not be sourced from your local computer<\/strong>!! The source attribute, src=””<\/strong><\/span>, will contain the URL that will point to the image on that web server. <\/span><\/span><\/span><\/p>\n

The alternate attribute is not mandatory, but it is really nice thing to have and you really should use it. It is the text that will shown in case there is a problem displaying the image. And the title is the same as in the anchor case.
\n<\/span><\/span><\/span><\/p>\n

So if we put the two tags together, it would look like so:<\/p>\n

\u00a0<a href=”<\/strong><\/span><\/strong>http:\/\/ursula-smith.com\/how-to-make-an-html-link-in-a-web-page\/<\/span><\/span>” ><\/strong><img src=”<\/strong><\/span><\/strong>http:\/\/ursula-smith.com\/mixed-media\/wp-content\/uploads\/2014\/05\/Gelli-Arts-Printed-Hand-Stickers-300×440.jpg<\/span><\/span>“alt=”<\/span><\/strong>Alternate text in case image isn’t displayed<\/span><\/span>“\u00a0<\/strong>title=”<\/strong><\/span><\/strong>This is a test for the image link<\/span><\/span>“\/>\u00a0<\/a><\/span><\/strong><\/p>\n

<\/strong>And here is the example link:<\/p>\n

\"Alternate<\/a>
Gelli Arts Printed Hand Sticker<\/figcaption><\/figure>\n

 <\/p>\n

Hopefully, this is helpful to those of you just starting out with HTML!!<\/p>\n

 <\/p>\n

Adding a quick note on showing the HTML code so the user sees the actual HTML rather than the link. For instance, if you are trying to show a “grab a button” and the button keeps showing up rather than the code. You need to trick the browser into not interpreting the HTML So you would need to write your\u00a0 button code that looks something like<\/span><\/p>\n

<a href=”<\/span><\/strong>http:\/\/ursula-smith.com\/how-to-make-an-html-link-in-a-web-page\/<\/span>” ><\/span><\/strong><img src=”<\/strong>http:\/\/ursula-smith.com\/mixed-media\/wp-content\/uploads\/2014\/05\/Gelli-Arts-Printed-Hand-Stickers-300×440.jpg<\/span><\/span>“<\/span><\/span>alt=”<\/span>Alternate text in case image isn’t displayed“<\/span><\/span> <\/strong><\/span>title=”<\/strong><\/span>This is a test for the image link<\/span>“\/> <\/a><\/span><\/p>\n

in a slightly different manner.\u00a0 Rather than using all the angle bracket symbols, you need to change them to &lt; for the left angle bracket signs and &gt; for the right angle bracket signs. By doing this, the actual HTML code is shown to the user rather than the HTML being interpreted in which case the link would be shown to the user- they would not see the HTML button code. So your “Grab My Button”<\/strong> code would look something like:<\/span><\/p>\n

&lt;a<\/span> href=”<\/span><\/strong>http:\/\/ursula-smith.com\/how-to-make-an-html-link-in-a-web-page<\/span><\/span>“<\/span> &gt; &lt;<\/span>img src=”<\/span><\/strong>http:\/\/ursula-smith.com\/mixed-media\/wp-content\/uploads\/2012\/01\/6635788089_e4ba47e872_m.jpg<\/span>“<\/strong><\/span>alt=”<\/strong><\/span>Alternate text in case image isn’t displayed“<\/span><\/strong><\/span><\/span> title=”<\/span><\/strong>This is a test for the image link<\/span>“<\/span><\/span><\/strong>&gt; <\/strong><\/span>&lt;\/a&gt;<\/span><\/strong><\/p>\n

You are basically tricking the browser into not interpreting the link and image HTML code, but instead the browser will show the HTML as text. The viewer will see the HTML as they would need to type it into their web page code (or blog widget) so that the link will show correctly on their page.<\/span><\/p>\n

Hope this helps!! <\/span><\/p>\n

\n

\u00a0<\/a><\/small><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

As I have mentioned several times, I have a group of friends that are great artists. They, however, aren’t necessarily…<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5],"tags":[],"class_list":["post-711","post","type-post","status-publish","format-standard","hentry","category-digital-posts","category-tech-tips"],"_links":{"self":[{"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/posts\/711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/comments?post=711"}],"version-history":[{"count":4,"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/posts\/711\/revisions"}],"predecessor-version":[{"id":3077,"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/posts\/711\/revisions\/3077"}],"wp:attachment":[{"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/media?parent=711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/categories?post=711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ursula-smith.com\/mixed-media\/wp-json\/wp\/v2\/tags?post=711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}