Html link to shared file

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links — Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links — Syntax

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links — The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self — Default. Opens the document in the same window/tab as it was clicked
• _blank — Opens the document in a new window or tab
• _parent — Opens the document in the parent frame
• _top — Opens the document in the full body of the window

Example

Use target=»_blank» to open the linked document in a new browser window or tab:

Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the «https://www» part):

Example

Absolute URLs

W3C

Google

Relative URLs

HTML Images

CSS Tutorial

HTML Links — Use an Image as a Link

To use an image as a link, just put the tag inside the tag:

Example

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

Example

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

Tip: Learn more about JavaScript in our JavaScript Tutorial.

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Источник

Basic Links

Once you have the ability to create HTML pages, you’ll want to learn how to create links between them, so that you can start building a site. Links are the essence of HTML — they are what makes it unique.
While you learn links I’ll also teach you the fundamentals of site organisation and structure.

This page was last updated on 2012-08-21

First Links

Ok, you have a page that you learned how to write in the first lesson. Now, you’re going to need another page. It doesn’t have to be anything great, just a very basic page will do. You can copy the first page and just save it as a different name if you want. Just make sure you know the names of the two files and that they are in the same folder. Don’t forget to call your homepage index.html .

sourcetip: Always use lowercase letters when naming html files, images and folders. Most web servers (the computers you’ll eventually be putting your site onto) are case-sensitive, which means it matters to them whether your files use capital letters or not. When linking to pages or typing in URLs, you don’t want to have to remember the case of each letter, so if everyone uses small letters the problem goes away.

Link Structure

Like all tags, links follow a structure, and have start tags and end tags. Put this line of code on one of your pages.

• a : a stands for Anchor, which means Link. This is the tag that makes it all happen.
• href : Means Hypertext REFerence. The href part is another attribute, with the location of the other page as its value. Just change theotherpage.html to the name of the second file. Don’t forget the quotation marks!

Whatever you put inside the link tags will become a link, coloured blue and underlined. When you rest your mouse on it your cursor will turn into a hand and the URL of the page will appear in your browser’s status bar (at the bottom of the window). If you want to make links to other parts of your page (for example a link to the top of the page), set up some internal links. Changing the default colours of the links is dealt with in body attributes.

Linking to email addresses

If you want to let people email you by clicking a link, you use this code:

to create this — mail me — which will open the users email program with your address in the To: box.

Linking to pictures

Linking to a picture file is practically the same as to a html file. Just include the name of the file, and do not forget the correct suffix — i.e. if it is a gif or a jpg. For a rundown on the file formats for images on the web, read this. If you want to use a picture as a link, read the next tutorial.

Linking to files

You link to a file just like a picture. The only difference is that it won’t open in a browser, but instead will download onto a specified place on the reader’s hard drive. An example:

Embedding a file directly into a page is a different process. We have a page on Internet file formats too.

Absolute and Relative Links

Internet addresses closely follow the established hierarchy structure you’re probably familiar with on your computer’s file system. First comes the Internet domain, like www.example.com. Next comes the directories (folders) that contain the file and finally the file’s name, with the appropriate file type extension. Each segment of an url is separated with a forward slash. Always remember: on the Internet, all slashes go forwards.

There are two different ways to point your links to a file. “Absolute links” include the full website address, including the http:// and www. bits. “Relative links” are much shorter and more manageable, and can only be used to point to other pages on the same website.

For instance, say you have a page called page1.html in the “links” directory of your site. The absolute href to this page is http://www.example.com/links/page1.html. So, you put that link anywhere on any page, on any site and it will always go to that page on the web.

Relative links can only link to a page from the same site. The address is always relative to the position of the second file. If you were linking to that same page from a page in the same directory, the href would be just page1.html. If you were linking from your homepage, i.e., in the root directory, the link would read , as you would have to go down into the directory first, and then get the file.

sourcetip: If you name files index.html in your directories, you can make links to these pages by just linking to the directory name. Your browser will always pick up index as the main page for that folder. This means you can condense href=»folder/index.html» into href=»folder/» . The slash tells the browser it should look for a folder, and not a file. Don’t forget it!

Linkal Gymnastics

If you need to go up a directory, and then back down into another one, you’ll have to understand how your site is laid out. Using HTML Source as an example, we are now in the “myfirstsite” section. Have a look at your address bar to see. If we wanted to link relatively to the “images” section, we’d have to go upwards one directory and then down into the images directory. So the full relative href would be
«../images/index.html»
See the two dots? They mean “go up a directory”, towards your root. So no matter how deep into your site you are, you can always come all the way back with a couple of ../../’s. Just count the directories until you’re at the right level.

sourcetip: If you want to link to a page that is near the top of your site (not deep in directories), you can start the link with a slash. This means “start at the root directory”. So, the href above could just be /images/ . This saves you having to put in loads of ../../s. A link back to your homepage is always href=»/»

Outward Links

On outward links (links to other sites), you must always remember to prefix the address with http://. Otherwise, the link won’t work, the browser will look for a file called www.yourhtmlsource.com in your site. You will be linking to us, right? You’ll be my new best friend if you do, cheeky.

To do this correctly, you’re basically just offering an absolute link, like above. So, the correct address to link to would be http://www.yourhtmlsource.com/. Notice the ending slash? That only goes there for directories (i.e. folders) or domain names, as in this example. Don’t put a slash after a .html link, just for directories like a .com or an address without a suffix.

Site Structure

Without a simple game plan, your site could soon be very hard to find stuff in for you, what with all the files you keep piling into it. Thus, you should group pages of similar theme into folders (directories). Keep all your images in one folder too, away from your html files (call the folder “images” or “media” or something like that).

I would also advise you to work on a template of your design. It may not be important now, as your site may not have a distinctive design, but later having this file will save you hours of time. What you do is save a file with no content, just the layout of your pages as TEMPLATE.html in each directory of your site (capitals so it stands out), with the links all correct. Then when you’re adding a page to a folder, you just open this file and add your content into it, and save under a different name, leaving template.html empty, ready for another use. To see our template for this directory, see this. Check, we have one in each directory.

Say you had a site about the solar system (just say). Keep all the files about mars in a folder called “mars”, with all the pictures of mars in a directory called “images” in the directory called “mars”. And keep the pictures of Uran— . no. I am above that.

Keep Learning // Basic Images → Go! Go!

What’s Related //

Источник