HTML, or HyperText Markup Language, is the language that web pages use to display their content. It’s made up of different elements which tell the web browser how to show it’s information. In today’s online world, understanding how websites work is crucial. Here are the only basics you need to know about HTML lists!
Hyperlinks
HTML web pages can include multiple hyperlinks to allow users to navigate between different pages and sites. Every hyperlink is defined with the <a> tag and the link’s destination is called ‘href’.
Text links are embedded within paragraphs using an anchor tag. It always takes the format of ‘<a href = “Document URL” … attribute-list> Link Text </a>’.
<a href = “https://www.rachel.ie/” > This is my website </a>
Target Attributes
Target attributes specify where the linked document should be opened. If you want the page to open in the same tag, use the ‘self’ target. If you want the page to open in a new tab, use the ‘blank’ target. If you want the page to open in a new window, use the ‘parent’ target.
<a href = “https://www.rachel.ie/” target = “_self”> This is my website in the same tab</a>
<a href = “https://www.rachel.ie/” target = “_blank”> This is my website in a new tab</a>
<a href = “https://www.rachel.ie/” target = “_parent”> This is my website in a new window</a>
Base Path
This is used when linking other pages that are on the same web server, for example, both https://www.rachel.ie/technology-categories/ and https://www.rachel.ie/literature-categories/ have https://www.rachel.ie/ in common. The base tag (in this case, https://www.rachel.ie/) is defined in the head of the webpage. Whenever you want to add another link, this initial base tag will be automatically included.
It short-circuits the addressing, making it quicker for the page developer to code. It always takes the format of ‘<base href = “Base URL”> and there can only ever be one base tag defined per document.
<head>
<base href = “https://www.rachel.ie/technology-categories/”>
</head>
<body>
<a href = “programming/” target = “_blank”> Programming </a>
</body>Colour Coding
It can sometimes be useful to colour-code different types of links. Before a link is clicked on, it’s called a ‘link’. When you hover the mouse on top of the link, it’s called an ‘alink’ or ‘active link’. After you click on the link, it’s called a ‘vlink’ or ‘visited link’.
Be default, links are displayed as blue, active links are red, and visited links are magenta. The format used to change these colours is always ‘<body TypeOfLink = “#colour” >’ and you can define all three colours at once if you wish.
<body alink=“#ff0000” link = “#ff1111” vlink = “#ff2222” >Download Links
Hyperlinks can also be used to make files downloadable. It always takes the format of ‘<a href = “/FileName.FileType” Link Text </a>’.
<a href="https://www.rachel.ie/wp-content/uploads/2020/11/HTML-Hyperlinks.jpg" HTML Hyperlinks>Read more about programming here!