Links & URLS
Link Diagram
<a href="link">name</a>
Mailto
To create a link that starts up the user's email program and addresses an email to a specified email address • Use the <a> element • However, this time the value of the href attribute starts with mailto: and is followed by the email address you want the email to be sent to
URL
Uniform Resource Locator • The Uniform Resource Locator was created in 1994 by Tim Berners-Lee • When you are linking to other pages within the same site, you do not need to specify the domain name in the URL • You can use a shorthand known as a relative URL • If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file
Links
the defining feature of the web because they allow you to move from one web page to another. Enabling the very idea of browsing or surfing
Relationships
• Each section of a site is placed in a separate folder • The relationship between files and folders on a website is described using the same terminology as a family tree • The "examplearts" folder is a parent of the movies, music and theater folders • The the movies, music and theater folders are children of the "examplearts" folder
Directory Structures
• Good to stay organized • Basically folders • Every page and every image on a website has a URL • The URL is made up of the domain name followed by the path to that page or image
Relative URLs Content
• If all of the files in your site are in one folder, you simply use the file name for that page • If your site is organized into separate folders (or directories), you need to tell the browser how to get from the page it is currently on to the page that you are linking to • If you link to the same page from two different pages you might, therefore, need to write two different relative URLs
Linking in Pages
• Linking to a specific part of the same page • At the top of a long page you might want to add a list of contents that links to the corresponding sections lower down • Before you can link to a specific part of a page, you need to identify the points in the page that the link will go to • You do this using the id attribute (which can be used on every HTML element)
Links...
• Links are created using the <a> element in the <body> section of the web page • Users can click on anything between the opening <a> tag and the closing </a> tag • You specify which page you want to link to using the href attribute • The text between the opening <a> tag and closing </a> tag is known as link text • Where possible, your link text should explain where visitors will be taken if they click on it (rather than just saying "click here")
Links ...
• Links from one website to another • Links from one page to another on the same website • Links from one part of a web page to another part of the same page • Links that open in a new browser window • Links that start up your email program and address a new email to someone
Relative URLs
• Relative URLs can be used when linking to pages within your own website • They provide a shorthand way of telling the browser where to find your files • When you are linking to a page on your own website, you do not need to specify the domain name • Helpful when creating a new website or learning about HTML because you can create links between pages when they are only on your personal computer
Index
• Tells you where everything is • The main homepage of a site written in HTML (and the homepages of each section in a child folder) is called index.html (sort of like the index of the book) • The top-level folder is known as the root folder in every website • The root folder contains all of the other files and folders for a website.
Extras on links
• When a website is live (that is, uploaded to a web server) you may see a couple of other techniques used that do not work when the files are on your local computer • For example, you may see the name of a child folder without the name of a file • In this case the web server will usually try to show the homepage for that section • A forward slash will return the homepage for the entire site / • A forward slash followed by a file name will return that file providing it is in the root directory. /
Opening links in a new tab
• target • If you want a link to open in a new window, you can use the target attribute on the opening <a> tag • The value of this attribute should be _blank
