![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Links-in-HTML.jpg\")
<\/a><\/p>\nLinks are specified using anchor or <a> tag.<\/p>\n
Syntax for HTML Links: Here, href is used to specify the destination of the hyperlink that will be created. Text is the content that will appear on the hyperlink.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Internal links are the hyperlinks whose destination lies within the same website or the domain of the website. Their URL is specified relatively i.e., a full URL like https:\/\/data-flair.training\/<\/strong> is not specified, instead, a relative URL such as headings.html is given.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n As we\u2019ve discussed, a link is a connection between the source and destination, specified using the anchor tags. Generally,<\/p>\n These properties of the link can be easily styled using CSS.<\/p>\n These links are a crucial part of web accessibility. Properly labeled links help users with screen readers understand the context and destination of the links. If the links are visually distinct and properly functional, it improves the user experience, making navigation straightforward.<\/p>\n Links also play a significant role in Search Engine Optimization. Well-placed links can improve a site’s search engine rankings. Thus, thoughtful linking strategy is essential not just for usability but also for achieving better visibility on search engines<\/p>\n CSS properties can be used to style the links in HTML.<\/p>\n Code:<\/strong><\/p>\n HTML target attribute specifies where the document under the anchor tag should be opened. The options available are-<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n The <base> tag within the <head> of an HTML document can be used to provide a default base path for all the links within the web-page. The links contain the relative paths which are concatenated with the base paths to specify the full URL. For example,<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n An image can also be used as a link, i.e., on clicking the image, the control will be redirected.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Button can be used as a link by using a JavaScript code that would specify where the control should be redirected once the button has been clicked.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Link title can be used to display extra information related to a particular link. It is displayed as tooltip text, every time the mouse is hovered over the link.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n <\/p>\n <\/p>\n Links can be provided to download a particular file. For this, mention the name of the file to be downloaded in the href.<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n Paths can be mentioned using the full URL or what is relative to the website. For example,<\/p>\n Code:<\/strong><\/p>\n Output:<\/strong><\/p>\n
\n<a href=\u201dURL of the web-page or HTML document\u201d>Text<\/a><\/strong><\/p>\n<!DOCTYPE html> \r\n<html> \r\n <h3>Example Of a link<\/h3> \r\n <body> \r\n <p>Click on the following link<\/p> \r\n <a href = \"https:\/\/data-flair.training\/\">DataFlair<\/a> \r\n <\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nHTML Internal Links or Local Links<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n <h3>Example Of a link<\/h3> \r\n <body> \r\n <p>Click on the following link<\/p> \r\n <ul>\r\n <li><a href = \"headings.html\">DataFlair Internal Link<\/a> <\/li>\r\n <li><a href = \"https:\/\/data-flair.training\/\">DataFlair External Link<\/a> <\/li>\r\n <\/ul>\r\n <\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nCreating Links in HTML<\/h2>\n
\n
CSS for links<\/h2>\n
\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n\/* unvisited link *\/\r\na:link {\r\n color: red;\r\n}\r\n\r\n\/* visited link *\/\r\na:visited {\r\n color: green;\r\n}\r\n\r\n\/* mouse over link *\/\r\na:hover {\r\n color: hotpink;\r\n}\r\n\r\n\/* selected link *\/\r\na:active {\r\n color: blue;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<ul>\r\n<li><a href=\"headings.html\">LINK1<\/a><\/li>\r\n<li><a href=\"frames.html\">LINK2<\/a><\/li>\r\n<li><a href=\"elements.html\">LINK3<\/a><\/li>\r\n<\/ul>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\n<\/a><\/p>\nTarget Attribute in HTML<\/h2>\n
\n
<!DOCTYPE html> \r\n<html> \r\n<body> \r\n<h2>The Target Attribute<\/h2> \r\n<p>Target attribute set to \"_blank\", \r\nOpens in a new browser window or tab.<\/p> \r\n<a href=\"https:\/\/data-flair.training\/\" target=\"_blank\">DataFlair<\/a> \r\n<p>Target attribute set to \"_self\", \r\nOpens in the same window or tab.<\/p> \r\n<a href=\"https:\/\/data-flair.training\/\" target=\"_self\">DataFlair<\/a> \r\n<p>Target attribute set to \"_top\", \r\nOpens in the full body of the window.<\/p> \r\n<a href=\"https:\/\/data-flair.training\/\" target=\"_blank\">DataFlair<\/a> \r\n<p>Target attribute set to \"_parent\", \r\nOpens in the parent frame.<\/p> \r\n<a href=\"https:\/\/data-flair.training\/\" target=\"_blank\">DataFlair<\/a> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nUse of Base Path in HTML<\/h2>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>DataFlair<\/title>\r\n <base href = \"https:\/\/data-flair.training\/\">\r\n <\/head>\r\n <body>\r\n <p>Click on the following link<\/p>\r\n <a href = \"\/success-stories\/\" target = \"_blank\">Success Stories<\/a>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nHTML Image Link<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n<body> \r\n<h1>Using Image as a link<\/h1> \r\n<p>Click on the image to visit DataFlair.<\/p> \r\n<a href=\"https:\/\/data-flair.training\/\"> \r\n <img src=\"DataFlair.png\" alt=\"DataFlair\" \r\nstyle=\"width:500px;height:500px; border: solid;\"> \r\n<\/a> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nHTML Button Link<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n<head>\r\n<style>\r\nbutton {\r\n background-color: #008CBA;\r\n border: solid;\r\n color: white;\r\n padding: 15px 32px;\r\n text-align: center;\r\n text-decoration: none;\r\n display: inline-block;\r\n font-size: 16px;\r\n width: 500px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body> \r\n<button onclick=\"document.location = 'headings.html'\">DataFlair<\/button>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\nHTML Link Title<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n<head>\r\n<\/head>\r\n<body> \r\n<a href=\"https:\/\/data-flair.training\/\" title=\"Go to DataFlair\">DataFlair E-learning<\/a>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nHTML Download Link<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n<h3>Download link<\/h3> \r\n<body> \r\n<a href = \"0801CS171064_0801CS171080.pdf\">Download PDF File<\/a> \r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
<\/a><\/p>\nHTML External Paths<\/h2>\n
<!DOCTYPE html> \r\n<html> \r\n<body>\r\n<p>Full URL<\/p> \r\n<a href=\"https:\/\/data-flair.training\/\">FULL<\/a>\r\n<p>Same folder within the same website<\/p>\r\n<a href=\"C:\\Users\\shreya\\Desktop\\DATAFLAIR\\frames.html\">Entire location<\/a>\r\n<p>Same folder<\/p>\r\n<a href=\"frames.html\">Same Folder<\/a>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n