{"id":50,"date":"2008-01-28T05:48:28","date_gmt":"2008-01-28T13:48:28","guid":{"rendered":"http:\/\/theedublogger.edublogs.org\/2008\/01\/28\/creating-hyperlinks-using-html\/"},"modified":"2009-02-13T03:15:13","modified_gmt":"2009-02-13T11:15:13","slug":"creating-hyperlinks-using-html","status":"publish","type":"post","link":"https:\/\/www.theedublogger.com\/creating-hyperlinks-using-html\/","title":{"rendered":"Creating Hyperlinks Using HTML"},"content":{"rendered":"<p><a title=\"texthtml.jpg\" href=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/texthtml.jpg\"><img decoding=\"async\" src=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/texthtml.jpg\" alt=\"Image of Photo in Larry's sidebar\" hspace=\"10\" vspace=\"10\" align=\"right\" \/><\/a>Last post on The Edublogger introduced <a href=\"https:\/\/www.theedublogger.com\/2008\/01\/24\/photo\/\">HTML basics and showed readers how to use HTML to add their photo to their blog side bar<\/a>.<\/p>\n<p>As <a href=\"http:\/\/googtweetblog.edublogs.org\/\" target=\"_blank\">Kate Olsen<\/a> highlighted, if you use your photo for your blog avatar, a simple alternative is to add the Avatar Widget to your side bar (<a href=\"https:\/\/www.theedublogger.com\/2008\/01\/19\/getting-more-out-of-widgets\/\">learn more about Widgets<\/a> here!).  However with <a href=\"https:\/\/www.theedublogger.com\/2008\/01\/22\/tips-for-doing-a-blog-makeover\/\">Larry&#8217;s &#8220;blog makeover<\/a>&#8221; I wanted to add words above and below his sidebar photo which is <a href=\"https:\/\/www.theedublogger.com\/2008\/01\/24\/photo\/\">why I used HTML<\/a>.<\/p>\n<p>In this post, we will look at how you can create hyperlinks using HTML (<a href=\"https:\/\/www.theedublogger.com\/2008\/01\/24\/photo\/\">Learn about HTML Basics <\/a>here!)<\/p>\n<h3>What Is A Hyperlink?<\/h3>\n<p>A hyperlink (commonly called links), on a web page, can be an icon, graphic, or word\/sentence that, when clicked with the mouse, takes the user to another location on the web site or to another web site.<\/p>\n<p>People will often use HTML to create  hyperlinks to helpful web sites when writing comments on other people&#8217;s posts.<\/p>\n<h3><strong><span style=\"color: #000000;\">Here the HTML you use to create hyperlinks:<\/span><\/strong><\/h3>\n<p>&lt;a href=&#8221;https:\/\/www.theedublogger.com\/&#8221;&gt;Welcome to the Edublogger&lt;\/a&gt; <strong><span style=\"color: #000080;\">produces<\/span><\/strong> <a href=\"https:\/\/www.theedublogger.com\/\" target=\"_blank\">Welcome to the Edublogger<\/a><\/p>\n<p><a title=\"link.jpg\" href=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/link.jpg\"><img decoding=\"async\" src=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/link.jpg\" alt=\"link.jpg\" \/><\/a><\/p>\n<h3>Here is how I created the Links in Read This Info on Larry&#8217;s Blog<\/h3>\n<p>I used HTML code for hyperlinks to create a text widget that linked to pages on <a href=\"http:\/\/larryferlazzo.edublogs.org\/\">Larry&#8217;s blog<\/a> which allowed me to reduce the number of pages at the top of his blog (refer to <a href=\"https:\/\/www.theedublogger.com\/\">Tips for Blog Makeovers<\/a> for the reasons why).<\/p>\n<p>Each hyperlink was separated with bullet points using HMTL tags<strong> <\/strong>&lt;ul&gt; and &lt;li&gt;<\/p>\n<p>&lt;ul&gt;<br \/>\n&lt;li&gt;potatoes&lt;\/li&gt;<br \/>\n&lt;li&gt;spinach&lt;\/li&gt;<br \/>\n&lt;li&gt;lollipops&lt;\/li&gt;<br \/>\n&lt;\/ul&gt;<\/p>\n<p><strong><span style=\"color: #003366;\">produces<\/span><\/strong><\/p>\n<ul>\n<li>potatoes<\/li>\n<li>spinach<\/li>\n<li>lollipops<\/li>\n<\/ul>\n<p>Notice you must use the &lt; and &gt; symbols around the HTML Tags and the tag is closed using a &#8216;\/&#8217; (slash) in front of the tag keyword e.g. &lt;\/ul&gt;<\/p>\n<p><a title=\"htmlwidget.jpg\" href=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/htmlwidget.jpg\"><img decoding=\"async\" src=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/htmlwidget.jpg\" alt=\"htmlwidget.jpg\" \/><\/a><\/p>\n<p>Here&#8217;s how I created the sub-pages.<\/p>\n<p><a title=\"pages1.jpg\" href=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/pages1.jpg\"><img decoding=\"async\" src=\"https:\/\/www.theedublogger.com\/files\/2008\/01\/pages1.jpg\" alt=\"pages1.jpg\" \/><\/a><\/p>\n<h3>FINAL THOUGHT<\/h3>\n<p>For more experienced widget and HTML users, check out <a href=\"http:\/\/heyjude.wordpress.com\/2008\/01\/26\/playing-with-text-widgets-in-wordpress\/\">Judy O&#8217;Connell&#8217;s text widget for displaying Library Things Book Collection<\/a>.<\/p>\n<p>Another way to add links to your sidebar is using your blogroll<strong> <\/strong>which we will cover in the next post.<\/p>\n<p>Other posts in our &#8220;blog makeover&#8221; series include:<\/p>\n<ul>\n<li><a title=\"Permanent Link to Tips For Doing A Blog Makeover\" rel=\"bookmark\" href=\"..\/2008\/01\/22\/tips-for-doing-a-blog-makeover\/\">Tips For Doing A Blog Makeover<\/a><\/li>\n<li><a title=\"Permanent Link to How To Add Your Photo to Your Blog Side Bar\" rel=\"bookmark\" href=\"..\/2008\/01\/24\/photo\/\">How To Add Your Photo to Your Blog Side Bar<\/a><\/li>\n<li><a title=\"Permanent Link to What To Consider When Choosing Your Blog Theme\" rel=\"bookmark\" href=\"..\/2008\/07\/15\/what-to-consider-when-choosing-your-blog-theme\/\">What To Consider When Choosing Your Blog Theme<\/a><\/li>\n<\/ul>\n<p>If you are enjoying reading this blog, please consider <a title=\"Subscribe to my feed\" rel=\"alternate\" href=\"http:\/\/feeds.feedburner.com\/TheEdublogger\"><img decoding=\"async\" src=\"http:\/\/www.feedburner.com\/fb\/images\/pub\/feed-icon32x32.png\" alt=\"\" \/><\/a><a title=\"Subscribe to my feed\" rel=\"alternate\" href=\"http:\/\/feeds.feedburner.com\/TheEdublogger\">Subscribing For Free!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last post on The Edublogger introduced HTML basics and showed readers how to use HTML to add their photo to their blog side bar. As Kate Olsen highlighted, if you use your photo for your blog avatar, a simple alternative is to add the Avatar Widget to your side bar (learn more about Widgets here!)&#8230;.<\/p>\n","protected":false},"author":42073,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[236850,236334],"tags":[51362,28317,27475,19517],"coauthors":[],"class_list":["post-50","post","type-post","status-publish","format-standard","hentry","category-growing-blog-readership","category-tips-for-better-blogging","tag-blog-makeover","tag-html","tag-hyperlink","tag-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/users\/42073"}],"replies":[{"embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":0,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/tags?post=50"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.theedublogger.com\/wp-json\/wp\/v2\/coauthors?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}