Links: Difference between revisions
(→HTML) |
|||
| (148 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
[[Blog_Writing_for_College_Students|Home]] | |||
No page on the internet stands alone. The connection of sites on the internet is what makes the web interactive. Links play a vital role in maintaining this interactivity. By connecting to other areas of the internet, readers are given access to an unlimited pool of information. An article by Lee Munroe of [http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/ Smashing Magazine] quoted [http://webstandardistas.com/ Web Standardistas] saying "“without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”<ref>Lee Munroe</ref> | |||
==Why Link== | |||
===Credibility=== | |||
Readers come to the internet for information. Even if the content is purely for entertainment purposes, the author is still expected to present accurate, well-supported information. Blog writing is not exempt from this requirement. More and more people go to blogs everyday to find information. According to researchers Thomas J. Johnson and Barbara K. Kaye, blog readers are "seeking out information to support their views and are likely to consider information they receive from blogs as highly credible."<ref>Johnson and Kaye</ref> Providing attribution for evidence and quotes that support your position can easily be accomplished by using hyperlinks. According to [http://webdesign.about.com/od/beginningtutorials/qt/external-links.htm About.com] guide Jennifer Kyrnin, "Don't forget, even eminent scientists provide bibliographies on their papers and journal entries. By linking to sites outside of your own site, you show that you have done the research on the topic and really do know what you're talking about." <ref>Jennifer Kyrnin</ref> Hyperlinks can also be used to provide context for a post.<ref>Brian Carroll 39</ref> These links can give reference to why a post is relevant within the topic, how the author gathers information, and where the authors views originated. | |||
===Interactivity=== | |||
When using hyperlinks, the goal is to reward readers with something extra or another dimension to the story. This is generally referred to as [http://litmuse.maconstate.edu/litwiki/index.php/Scan-ability#Layering_content "layering."]<ref>Brian Carroll 37</ref> By doing this, you allow your reader to move around from story to story, link to other sources, and even explore alternative subjects. No other medium provides for this. According to Carroll, "We should link to related content to allow the reader to pursue the subject rather than simply moving to the next story.<ref>Brian Carroll 38</ref>" By including these links, you give the readers a feeling of control. They are not required to wait until the end of the story. Instead, they can pursue what interest them. | |||
==What are Links== | |||
Links can be addictive. Because of this, writers should be intentional about what content contains links, and where these links lead. According to ''Writing for Digital Media'' by Brian Carroll, "Before linking to another site, ask what the reward for following that link will be for the reader. This consideration will prevent gratuitous linking." <ref>Brian Carroll 39</ref> | |||
===Sources=== | |||
Sources can include supporting documents, empirical data, corroborating accounts, definitions of words, explanations, maps, etc. When referencing a person, link to that person's page. When talking about a movie, link to the trailer. Keep in mind that common knowledge to the author may be foreign to the reader. | |||
=== Embedded links=== | |||
Embedded links are the most common type of link. These link to other web pages outside of your blog. Using external links is useful in giving access to evidence that verifies the information presented in your blog, or provided related reading material. The link is designated by a "hot area" identified by a word or object. According to [http://www.webopedia.com/TERM/H/hot_spot.html Webopedia], a hot area is "an area of a graphics object, or a section of text, that activates a function when selected. Hot spots are particularly common in multimedia applications, where selecting a hot spot can make the application display a picture, run a video, or open a new window of information." | |||
===Inline links=== | |||
Inline links do not take the reader off the page. These links display content that is located somewhere else on the web, but they do not require the user to navigate away from the blog. The most common types of inline links are pictures and videos. The author displays these graphics on his or her page, but acknowledges that they originated elsewhere on the internet. | |||
===Anchors=== | |||
Like inline links, anchors do not send readers elsewhere. Instead, these links connect the reader to other sections of the page. [http://kb.weebly.com/anchor-links.html Weebly support center] says, "Anchor links enable you to link directly from one part of a page to another" One of the most anchor links is a link to the home page. As bloggers, we should keep in mind that not all users access each page through the home page. Providing a link to the homepage gives access to the rest of your content. | |||
==How to Link== | ==How to Link== | ||
=== HTML === | === HTML === | ||
Creating hypertext with HTML can be done with | Creating hypertext with HTML can be done with a simple code. The HTML link syntax looks like this: '''<a href="url">Link text</a>''' | ||
=== | Example: To link to a page about linking, I would use this code '''<nowiki><a href="http://www.w3schools.com/html/html_links.asp#gsc.tab=0">Links</a></nowiki>'''. It would then appear as: [http://www.w3schools.com/html/html_links.asp#gsc.tab=0 Links]. This HTML code will work on websites that support HTML coding. | ||
=== | ====New tab==== | ||
Sometimes it's beneficial to have hyperlinks open a new tab or window. The HTML code for opening the link in another tab looks like this: '''<nowiki><a href="URL of target site" target="_blank">Anchor text</a></nowiki>''' and displays as this: [http://www.w3schools.com/html/html_links.asp Anchor text]. | |||
=== | ====New window==== | ||
The HTML code for opening the link in another window looks like this: '''<nowiki><a href="URL of target site" target="_blank">Anchor Text</a> or <a href="URL of target site" target="new">Anchor Text</a></nowiki>''' and displays as this: [http://dummies.bloggertipsandtricks.com/2006/03/how-to-make-clickable-link.html Anchor Text] | |||
=== | ====Alternative codes==== | ||
It's important to remember that various websites will have their own method of adding a hyperlink to a post. For example, this wiki does not use the HTML code shown above. Instead, hyperlinks are shown by placing a url in standard brackets and then simply typing the word you wish to display. It looks like this: '''<nowiki>[http://www.wikipedia.org Wikipedia]</nowiki>''' and displays as this: [http://www.wikipedia.org Wikipedia]. When working with various websites, take the time to figure out how each site supports hyperlinks. | |||
== | === The Link button === | ||
[[File:Links.jpg|thumb|Link button]] | |||
The graphical user interface is a wonderful thing. Because of this, many blog sites don't require users to write HTML code. These sites offer a method of linking with the click of a button. This button is most often a graphic representation of a chain linked together. | |||
To use this button, simply highlight the text you wish to link, click the link graphic and insert a url. If you want to remove a link from a word or set of words, highlight the text and click the broken chain graphic. This will remove the link. | |||
=== Unambiguous linking === | |||
When incorporating hyperlinks into a blog post, make sure that any linked text leads to an obvious destination. Readers should always have a clear idea of where each link will take them. Ben Hunt from [http://www.webdesignfromscratch.com/usability/clear-hyperlinks/ Web Design from Scratch] said, "To help users browse with confidence, web links should be absolutely clear and explicit." Ambiguous links may lead to a loss of credibility. | |||
=== Contrast === | |||
Many blog sites or themes have a default color for hyperlinks. Blue is no longer the only option, but sometimes customization is impossible within a theme. If customization is possible, be sure to choose a color for hypertext that will stand out. Contrast is important so that users can tell which words are or are not links. According to Gary Swift of [http://www.designmatrix.com/index.html DesignMatriX.com], "Choose hyperlink (anchor) colors that contrast against the normal text color, with unvisited links brighter (hotter) than visited links. Within a set of related hypertext documents, use these link colors consistently. For Web sites this generally means the entire site." <ref>Gary Swift</ref> | |||
=== Menus === | |||
One option for incorporating links is to create a sidebar or menu on the page that leads to supporting information. When using [http://wordpress.com/ Wordpress] adding a menu is relatively simple depending on the theme. To find out if your theme supports menus, go to your blog's dashboard and go to '''Appearance --> Menus.''' Wordpress provides a [http://en.support.wordpress.com/menus/ tutorial] on how to customize the menu in various ways. | |||
==How not to Link== | |||
===Punctuation marks=== | |||
When highlighting a word or phrase to link, make sure to exclude all punctuation marks. | |||
== | ===Headlines=== | ||
Ideally, <i>[[Headers and Sub-headers| headlines and sub-headers]]</i> should stand on their own. It is both distracting and unnecessary to link the title to another page. | |||
== | === Long phrases === | ||
To put it simply, long, hyperlinked phrases do not get read. Whether the phrase is underlined or displayed in a darker color, it is difficult to read a full sentence that contains a hyperlink. Remember that users don't read, [http://litmuse.maconstate.edu/litwiki/index.php/Scan-ability they scan]. Stick with 1-2 words or the title of whatever you're referencing. [http://www.asdfsdfreresdferer.com/ If you're link looks anything like this, there's good change that you're doing it wrong. This link is much too long and leads to nothing.] | |||
===Labels=== | |||
Hyperlinks should not show up as labels that simply point to content. "Click here" or "Additional information" is ambiguous and does not provide any useful information for the reader.[http://jimthatcher.com/news-061607.htm Click here for more information about this common error!] | |||
===Broken links=== | |||
This concept is relatively self-explanatory, but it is nevertheless a common mistake. Be careful to check the destination of each link before publishing a post. Broken links frustrate the readers and can damage the credibility of the writer. | |||
==Notes== | |||
<references/> | |||
==References== | |||
3) | #[http://kb.weebly.com/anchor-links.html Anchor Links]. ''Weebly'' Web. 10 April 2013 | ||
# Carroll, Brian. (2010). ''[http://www.scribd.com/doc/64429015/Writing-for-Digital-Media Writing for Digital Media]''. New York: Routledge. Retrieved 3 April 2013. | |||
# [https://en.wikipedia.org/wiki/Help:Cheatsheet Help: Cheatsheet.] ''Wikipedia.'' 30 March 2013. Web. 3 April 2013 | |||
# [http://www.w3schools.com/html/html_links.asp HTML Links.] ''w3Schools'' Web. 2 April 2013 | |||
# Hunt, Ben. [http://www.webdesignfromscratch.com/usability/clear-hyperlinks/ Clear Web Hyperlinks] ''Web Design from Scratch''. Web. 10 April 2013 | |||
# Johnson, Thomas J. and Kaye, Barbara K. "Cruising is Believing?" Comparing Internet and Traditional Sources on Media Credibility Measures," ''Journalism & Mass Communication Quarterly'', 75,(1998): 325-40 | |||
# Kyrnin, Jennifer. [http://webdesign.about.com/od/beginningtutorials/qt/external-links.htm Why and How to Use External Links.] ''About.com'' Web. 1 April 2013 | |||
# Munroe, Lee. [http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/ The Definitive Guide To Styling Web Links.] ''Smashing Magazine'' 13 February, 2013. Web. 1 April 2013 | |||
# [http://en.support.wordpress.com/menus/ Support: Custom Menus.] ''Wordpress'' Web. 2 April 2013 | |||
# Swift, Gary. [http://www.designmatrix.com/pl/cyberpl/www/clc.html Consistent Link Colors.] ''DesignMatriX'' 22 September, 2012. Web. 2 April 2013 | |||
# Thatcher, James. [http://jimthatcher.com/news-061607.htm Click Here and Other Link Text.] ''Jim Thatcher.'' 2 May 2011. Web. 3 April 2013. | |||
== | ==See Also== | ||
*[[Themes|Themes]] | |||
*[[Categorizing Posts|Categorizing Posts]] | |||
*[[Headers and Sub-headers|Headers and Sub-headers]] | |||
*[[Lists|Lists]] | |||
[[Category:New Media]] | |||
Latest revision as of 08:03, 3 May 2013
No page on the internet stands alone. The connection of sites on the internet is what makes the web interactive. Links play a vital role in maintaining this interactivity. By connecting to other areas of the internet, readers are given access to an unlimited pool of information. An article by Lee Munroe of Smashing Magazine quoted Web Standardistas saying "“without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”[1]
Why Link
Credibility
Readers come to the internet for information. Even if the content is purely for entertainment purposes, the author is still expected to present accurate, well-supported information. Blog writing is not exempt from this requirement. More and more people go to blogs everyday to find information. According to researchers Thomas J. Johnson and Barbara K. Kaye, blog readers are "seeking out information to support their views and are likely to consider information they receive from blogs as highly credible."[2] Providing attribution for evidence and quotes that support your position can easily be accomplished by using hyperlinks. According to About.com guide Jennifer Kyrnin, "Don't forget, even eminent scientists provide bibliographies on their papers and journal entries. By linking to sites outside of your own site, you show that you have done the research on the topic and really do know what you're talking about." [3] Hyperlinks can also be used to provide context for a post.[4] These links can give reference to why a post is relevant within the topic, how the author gathers information, and where the authors views originated.
Interactivity
When using hyperlinks, the goal is to reward readers with something extra or another dimension to the story. This is generally referred to as "layering."[5] By doing this, you allow your reader to move around from story to story, link to other sources, and even explore alternative subjects. No other medium provides for this. According to Carroll, "We should link to related content to allow the reader to pursue the subject rather than simply moving to the next story.[6]" By including these links, you give the readers a feeling of control. They are not required to wait until the end of the story. Instead, they can pursue what interest them.
What are Links
Links can be addictive. Because of this, writers should be intentional about what content contains links, and where these links lead. According to Writing for Digital Media by Brian Carroll, "Before linking to another site, ask what the reward for following that link will be for the reader. This consideration will prevent gratuitous linking." [7]
Sources
Sources can include supporting documents, empirical data, corroborating accounts, definitions of words, explanations, maps, etc. When referencing a person, link to that person's page. When talking about a movie, link to the trailer. Keep in mind that common knowledge to the author may be foreign to the reader.
Embedded links
Embedded links are the most common type of link. These link to other web pages outside of your blog. Using external links is useful in giving access to evidence that verifies the information presented in your blog, or provided related reading material. The link is designated by a "hot area" identified by a word or object. According to Webopedia, a hot area is "an area of a graphics object, or a section of text, that activates a function when selected. Hot spots are particularly common in multimedia applications, where selecting a hot spot can make the application display a picture, run a video, or open a new window of information."
Inline links
Inline links do not take the reader off the page. These links display content that is located somewhere else on the web, but they do not require the user to navigate away from the blog. The most common types of inline links are pictures and videos. The author displays these graphics on his or her page, but acknowledges that they originated elsewhere on the internet.
Anchors
Like inline links, anchors do not send readers elsewhere. Instead, these links connect the reader to other sections of the page. Weebly support center says, "Anchor links enable you to link directly from one part of a page to another" One of the most anchor links is a link to the home page. As bloggers, we should keep in mind that not all users access each page through the home page. Providing a link to the homepage gives access to the rest of your content.
How to Link
HTML
Creating hypertext with HTML can be done with a simple code. The HTML link syntax looks like this: <a href="url">Link text</a>
Example: To link to a page about linking, I would use this code <a href="http://www.w3schools.com/html/html_links.asp#gsc.tab=0">Links</a>. It would then appear as: Links. This HTML code will work on websites that support HTML coding.
New tab
Sometimes it's beneficial to have hyperlinks open a new tab or window. The HTML code for opening the link in another tab looks like this: <a href="URL of target site" target="_blank">Anchor text</a> and displays as this: Anchor text.
New window
The HTML code for opening the link in another window looks like this: <a href="URL of target site" target="_blank">Anchor Text</a> or <a href="URL of target site" target="new">Anchor Text</a> and displays as this: Anchor Text
Alternative codes
It's important to remember that various websites will have their own method of adding a hyperlink to a post. For example, this wiki does not use the HTML code shown above. Instead, hyperlinks are shown by placing a url in standard brackets and then simply typing the word you wish to display. It looks like this: [http://www.wikipedia.org Wikipedia] and displays as this: Wikipedia. When working with various websites, take the time to figure out how each site supports hyperlinks.
The Link button
The graphical user interface is a wonderful thing. Because of this, many blog sites don't require users to write HTML code. These sites offer a method of linking with the click of a button. This button is most often a graphic representation of a chain linked together. To use this button, simply highlight the text you wish to link, click the link graphic and insert a url. If you want to remove a link from a word or set of words, highlight the text and click the broken chain graphic. This will remove the link.
Unambiguous linking
When incorporating hyperlinks into a blog post, make sure that any linked text leads to an obvious destination. Readers should always have a clear idea of where each link will take them. Ben Hunt from Web Design from Scratch said, "To help users browse with confidence, web links should be absolutely clear and explicit." Ambiguous links may lead to a loss of credibility.
Contrast
Many blog sites or themes have a default color for hyperlinks. Blue is no longer the only option, but sometimes customization is impossible within a theme. If customization is possible, be sure to choose a color for hypertext that will stand out. Contrast is important so that users can tell which words are or are not links. According to Gary Swift of DesignMatriX.com, "Choose hyperlink (anchor) colors that contrast against the normal text color, with unvisited links brighter (hotter) than visited links. Within a set of related hypertext documents, use these link colors consistently. For Web sites this generally means the entire site." [8]
Menus
One option for incorporating links is to create a sidebar or menu on the page that leads to supporting information. When using Wordpress adding a menu is relatively simple depending on the theme. To find out if your theme supports menus, go to your blog's dashboard and go to Appearance --> Menus. Wordpress provides a tutorial on how to customize the menu in various ways.
How not to Link
Punctuation marks
When highlighting a word or phrase to link, make sure to exclude all punctuation marks.
Headlines
Ideally, headlines and sub-headers should stand on their own. It is both distracting and unnecessary to link the title to another page.
Long phrases
To put it simply, long, hyperlinked phrases do not get read. Whether the phrase is underlined or displayed in a darker color, it is difficult to read a full sentence that contains a hyperlink. Remember that users don't read, they scan. Stick with 1-2 words or the title of whatever you're referencing. If you're link looks anything like this, there's good change that you're doing it wrong. This link is much too long and leads to nothing.
Labels
Hyperlinks should not show up as labels that simply point to content. "Click here" or "Additional information" is ambiguous and does not provide any useful information for the reader.Click here for more information about this common error!
Broken links
This concept is relatively self-explanatory, but it is nevertheless a common mistake. Be careful to check the destination of each link before publishing a post. Broken links frustrate the readers and can damage the credibility of the writer.
Notes
References
- Anchor Links. Weebly Web. 10 April 2013
- Carroll, Brian. (2010). Writing for Digital Media. New York: Routledge. Retrieved 3 April 2013.
- Help: Cheatsheet. Wikipedia. 30 March 2013. Web. 3 April 2013
- HTML Links. w3Schools Web. 2 April 2013
- Hunt, Ben. Clear Web Hyperlinks Web Design from Scratch. Web. 10 April 2013
- Johnson, Thomas J. and Kaye, Barbara K. "Cruising is Believing?" Comparing Internet and Traditional Sources on Media Credibility Measures," Journalism & Mass Communication Quarterly, 75,(1998): 325-40
- Kyrnin, Jennifer. Why and How to Use External Links. About.com Web. 1 April 2013
- Munroe, Lee. The Definitive Guide To Styling Web Links. Smashing Magazine 13 February, 2013. Web. 1 April 2013
- Support: Custom Menus. Wordpress Web. 2 April 2013
- Swift, Gary. Consistent Link Colors. DesignMatriX 22 September, 2012. Web. 2 April 2013
- Thatcher, James. Click Here and Other Link Text. Jim Thatcher. 2 May 2011. Web. 3 April 2013.