Hyperlinks

Home » Hyperlinks

Revision for “Hyperlinks” created on January 29, 2015 @ 20:56:24

TitleContentExcerpt
Hyperlinks
<a title="HTML" href="http://code.emrysproductions.com/wiki/html/">HTML</a> links are hyperlinks.

A hyperlink is an <a title="HTML Element" href="http://code.emrysproductions.com/wiki/html-element/">element</a>, a text, or an image that you can click on, and jump to another document.

In HTML, links are defined with the &lt;a&gt; <a title="Tag" href="http://code.emrysproductions.com/wiki/tag/">tag</a>:

<iframe src="http://jsfiddle.net/mapster86/apdeLy57/embedded/html,result" width="100%" height="100" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

The href <a title="HTML Attributes" href="http://code.emrysproductions.com/wiki/html-attributes/">attribute</a> specifies the destination address (http://www.mysite.com)

The link text is the visible part.  Clicking on the link text, will send you to the specified address.

<strong>Insert a Link in Dreamweaver</strong>

<a href="http://code.emrysproductions.com/wp-content/uploads/2015/01/dwtut1lg.png"><img class="alignnone size-medium wp-image-191" src="http://code.emrysproductions.com/wp-content/uploads/2015/01/dwtut1lg-300×161.png" alt="dwtut1lg" width="300" height="161" /></a>

Click on the Hyperlink button on the right in the insert menu, make sure you have ‘common’ selected in the drop down menu at the top of the sidebar.

<a href="http://code.emrysproductions.com/wp-content/uploads/2015/01/dwtut2.png"><img class="alignnone size-medium wp-image-189" src="http://code.emrysproductions.com/wp-content/uploads/2015/01/dwtut2-300×166.png" alt="dwtut2" width="300" height="166" /></a>

This will bring the up this window, in the text box put in what you want to appear on the page and in the Link box type the web address you want the link to go to e.g. http://www.google.com

<a href="http://code.emrysproductions.com/wp-content/uploads/2015/01/dwtut3.png"><img class="alignnone size-medium wp-image-190" src="http://code.emrysproductions.com/wp-content/uploads/2015/01/dwtut3-300×166.png" alt="dwtut3" width="300" height="166" /></a>

the target drop-down menu controls how the link is opened, each option works as follows:
<table class="reference notranslate" style="border-color: #000000;" border="1">
<tbody>
<tr>
<td>_blank</td>
<td>Opens the linked document in a new window or tab</td>
</tr>
<tr>
<td>_self</td>
<td>Opens the linked document in the same frame as it was clicked (Default)</td>
</tr>
<tr>
<td>_parent</td>
<td>Opens the linked document in the parent frame</td>
</tr>
<tr>
<td>_top</td>
<td>Opens the linked document in the full body of the window</td>
</tr>
</tbody>
</table>
&nbsp;

When you’re done, click ‘OK’ and the link will be inserted where the cursor is on either the design or code pane.

&nbsp;



Old New Date Created Author Actions
January 29, 2015 @ 20:56:24 Mr H
January 29, 2015 @ 20:56:06 [Autosave] Mr H
January 29, 2015 @ 20:54:10 Mr H
January 29, 2015 @ 20:51:01 Mr H
January 29, 2015 @ 20:46:15 Mr H
January 29, 2015 @ 20:45:41 Mr H
January 29, 2015 @ 20:40:51 Mr H
January 29, 2015 @ 19:49:15 Mr H
January 29, 2015 @ 19:46:48 Mr H
January 29, 2015 @ 19:43:34 Mr H
January 29, 2015 @ 19:32:07 Mr H