How to Add Upload Hyperlink Feature to My Blog Html
Creating hyperlinks
What is a hyperlink?
Hyperlinks are one of the most heady innovations the Web has to offer. They've been a feature of the Web since the beginning, and are what makes the Spider web a spider web. Hyperlinks allow us to link documents to other documents or resources, link to specific parts of documents, or make apps available at a web address. Most any spider web content can be converted to a link so that when clicked or otherwise activated the web browser goes to another web address (URL).
Note: A URL tin point to HTML files, text files, images, text documents, video and sound files, or annihilation else that lives on the Web. If the web browser doesn't know how to display or handle the file, it volition ask you if you lot want to open up the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to bargain with it afterward).
For example, the BBC homepage contains many links that signal not only to multiple news stories, just likewise dissimilar areas of the site (navigation functionality), login/registration pages (user tools), and more.
Anatomy of a link
A basic link is created by wrapping the text or other content, meet Block level links, inside an <a> element and using the href attribute, too known as a Hypertext Reference, or target, that contains the web accost.
<p > I'one thousand creating a link to <a href = "https://www.mozilla.org/en-US/" > the Mozilla homepage </a > . </p > This gives us the post-obit event:
I'one thousand creating a link to the Mozilla homepage.
Adding supporting information with the title attribute
Another attribute you may want to add to your links is title. The title contains additional information about the link, such equally which kind of information the page contains, or things to be aware of on the web site.
<p > I'k creating a link to <a href = "https://www.mozilla.org/en-The states/" championship = "The best identify to find more information well-nigh Mozilla's mission and how to contribute" > the Mozilla homepage </a > . </p > This gives the states the following result and hovering over the link displays the title equally a tooltip:
I'm creating a link to the Mozilla homepage.
Notation: A link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages volition have difficulty accessing title information. If a championship's information is truly of import to the usability of the folio, and then yous should present it in a manner that will be accessible to all users, for case by putting it in the regular text.
Active learning: creating your own example link
Create an HTML document using your local code editor and our getting started template.
- Inside the HTML body, add ane or more paragraphs or other types of content you already know about.
- Change some of the content into links.
- Include title attributes.
Block level links
Equally mentioned earlier, almost whatsoever content can be made into a link, even block-level elements. If you lot have an image you want to make into a link, use the <a> element and reference the prototype file with the <img> element.
<a href = "https://www.mozilla.org/en-US/" > <img src = "mozilla-image.png" alt = "mozilla logo that links to the Mozilla homepage" > </a > Annotation: Yous'll observe out more most using images on the Web in a hereafter article.
A quick primer on URLs and paths
To fully empathize link targets, you need to understand URLs and file paths. This department gives you the information you demand to achieve this.
A URL, or Uniform Resource Locator is a string of text that defines where something is located on the Web. For example, Mozilla'south English homepage is located at https://www.mozilla.org/en-US/.
URLs employ paths to observe files. Paths specify where the file you're interested in is located in the filesystem. Allow's expect at an instance of a directory construction, see the creating-hyperlinks directory.
The root of this directory construction is called creating-hyperlinks. When working locally with a web site, you'll accept ane directory that contains the entire site. Within the root, we accept an index.html file and a contacts.html. In a real website, index.html would be our home page or landing page (a web folio that serves as the entry indicate for a website or a particular section of a website.).
In that location are also two directories inside our root — pdfs and projects. These each take a single file inside them — a PDF (project-brief.pdf) and an index.html file, respectively. Notation that you tin have ii index.html files in one project, as long as they're in unlike filesystem locations. The second alphabetize.html would peradventure exist the master landing page for project-related information.
- Same directory: If you lot wanted to include a hyperlink inside
index.html(the top levelindex.html) pointing tocontacts.html, yous would specify the filename that you desire to link to, because information technology'south in the aforementioned directory every bit the electric current file. The URL you lot would apply iscontacts.html:<p > Want to contact a specific staff member? Find details on our <a href = "contacts.html" > contacts folio </a > . </p > - Moving down into subdirectories: If you wanted to include a hyperlink inside
index.html(the peak levelindex.html) pointing toprojects/index.html, you would need to become downwardly into theprojectsdirectory before indicating the file you want to link to. This is done past specifying the directory'due south name, then a forward slash, and so the name of the file. The URL you would use isprojects/index.html:<p > Visit my <a href = "projects/index.html" > project homepage </a > . </p > - Moving back up into parent directories: If you wanted to include a hyperlink within
projects/index.htmlpointing topdfs/project-brief.pdf, you lot'd have to become up a directory level, then dorsum down into thepdfdirectory. To go up a directory, utilize 2 dots —..— so the URL you would use is../pdfs/project-brief.pdf:<p > A link to my <a href = "../pdfs/projection-brief.pdf" > project cursory </a > . </p >
Note: You lot can combine multiple instances of these features into complex URLs, if needed, for instance: ../../../complex/path/to/my/file.html.
Document fragments
It's possible to link to a specific function of an HTML certificate, known as a document fragment, rather than merely to the top of the certificate. To do this you first have to assign an id attribute to the chemical element yous want to link to. Information technology normally makes sense to link to a specific heading, so this would look something similar the following:
<h2 id = "Mailing_address" > Mailing address </h2 > Then to link to that specific id, you'd include information technology at the finish of the URL, preceded by a hash/pound symbol (#), for example:
<p > Want to write us a letter? Utilize our <a href = "contacts.html#Mailing_address" > mailing address </a > . </p > You can even employ the document fragment reference on its ain to link to another part of the current certificate:
<p > The <a href = "#Mailing_address" > company mailing address </a > can exist institute at the lesser of this page. </p > Absolute versus relative URLs
2 terms you'll meet on the Web are absolute URL and relative URL:
absolute URL: Points to a location defined by its absolute location on the spider web, including protocol and domain name. For instance, if an index.html page is uploaded to a directory called projects that sits within the root of a web server, and the web site'southward domain is https://www.example.com, the page would exist bachelor at https://www.instance.com/projects/index.html (or even just https://www.instance.com/projects/, as most web servers but expect for a landing folio such every bit index.html to load if information technology isn't specified in the URL.)
An absolute URL will ever point to the same location, no affair where it's used.
relative URL: Points to a location that is relative to the file you are linking from, more than similar what nosotros looked at in the previous section. For example, if we wanted to link from our example file at https://www.instance.com/projects/index.html to a PDF file in the same directory, the URL would merely be the filename — projection-brief.pdf — no extra data needed. If the PDF was available in a subdirectory inside projects called pdfs, the relative link would be pdfs/project-brief.pdf (the equivalent accented URL would be https://www.example.com/projects/pdfs/project-brief.pdf.)
A relative URL will point to different places depending on the actual location of the file you refer from — for example if we moved our index.html file out of the projects directory and into the root of the web site (the top level, not in any directories), the pdfs/project-brief.pdf relative URL link inside it would now point to a file located at https://www.example.com/pdfs/project-brief.pdf, non a file located at https://www.case.com/projects/pdfs/project-cursory.pdf.
Of form, the location of the project-cursory.pdf file and pdfs folder won't suddenly change because you moved the index.html file — this would make your link point to the incorrect place, then it wouldn't work if clicked on. Yous need to be conscientious!
Link best practices
There are some best practices to follow when writing links. Permit's look at these now.
Utilise articulate link wording
It's piece of cake to throw links up on your page. That'southward not enough. We need to make our links accessible to all readers, regardless of their electric current context and which tools they adopt. For example:
- Screenreader users like jumping around from link to link on the folio, and reading links out of context.
- Search engines use link text to alphabetize target files, so information technology is a skilful idea to include keywords in your link text to effectively describe what is existence linked to.
- Visual readers skim over the page rather than reading every discussion, and their eyes will be drawn to page features that stand out, similar links. They will find descriptive link text useful.
Permit'southward look at a specific instance:
Good link text: Download Firefox
<p > <a href = "https://firefox.com/" > Download Firefox </a > </p > Bad link text: Click here to download Firefox
<p > <a href = "https://firefox.com/" > Click here </a > to download Firefox </p > Other tips:
- Don't repeat the URL as part of the link text — URLs wait ugly, and sound even uglier when a screen reader reads them out alphabetic character past letter.
- Don't say "link" or "links to" in the link text — it's just noise. Screen readers tell people in that location's a link. Visual users will also know there's a link, because links are mostly styled in a different color and underlined (this convention mostly shouldn't be broken, as users are used to it).
- Go along your link text as short as possible — this is helpful because screen readers demand to interpret the entire link text.
- Minimize instances where multiple copies of the same text are linked to dissimilar places. This can cause bug for screen reader users, if there's a list of links out of context that are labeled "click hither", "click here", "click hither".
Linking to non-HTML resource — leave clear signposts
When linking to a resources that will be downloaded (similar a PDF or Give-and-take document), streamed (like video or audio), or has another potentially unexpected effect (opens a popup window, or loads a Wink film), you should add clear wording to reduce whatever confusion.
For example:
- If you're on a low bandwidth connection, click a link, then a multiple megabyte download starts unexpectedly.
- If yous don't have the Wink player installed, click a link, and and so of a sudden get taken to a page that requires Flash.
Let'southward look at some examples, to see what kind of text can be used hither:
<p > <a href = "https://www.example.com/large-study.pdf" > Download the sales report (PDF, 10MB) </a > </p > <p > <a href = "https://www.instance.com/video-stream/" target = "_blank" > Picket the video (stream opens in carve up tab, HD quality) </a > </p > <p > <a href = "https://www.case.com/car-game" > Play the car game (requires Flash) </a > </p > Utilise the download attribute when linking to a download
When you lot are linking to a resource that'south to be downloaded rather than opened in the browser, you tin use the download attribute to provide a default salve filename. Here's an example with a download link to the latest Windows version of Firefox:
<a href = "https://download.mozilla.org/?product=firefox-latest-ssl&bone=win64&lang=en-US" download = "firefox-latest-64bit-installer.exe" > Download Latest Firefox for Windows (64-bit) (English, US) </a > For this exercise, we'd like y'all to link some pages together with a navigation carte du jour to create a multi-page website. This is one common way in which a website is created — the aforementioned page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and unlike content is existence brought upwardly.
You lot'll demand to make local copies of the post-obit four pages, all in the same directory. For a complete file list, see the navigation-menu-kickoff directory:
- alphabetize.html
- projects.html
- pictures.html
- social.html
You should:
- Add together an unordered list in the indicated place on one page that includes the names of the pages to link to. A navigation menu is commonly just a list of links, so this is semantically OK.
- Change each folio name into a link to that page.
- Copy the navigation menu across to each page.
- On each page, remove merely the link to that same page — information technology's disruptive and unnecessary for a page to include a link to itself. And, the lack of a link acts a good visual reminder of which page you lot are currently on.
The finished instance should look similar to the following page:
Notation: If you lot get stuck, or aren't sure if you accept got it correct, you can check the navigation-carte du jour-marked-up directory to see the correct answer.
E-mail links
It'south possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resources or page. This is done using the <a> chemical element and the mailto: URL scheme.
In its most basic and usually used class, a mailto: link indicates the email address of the intended recipient. For example:
<a href = "mailto:nowhere@mozilla.org" > Send email to nowhere </a > This results in a link that looks similar this: Send electronic mail to nowhere.
In fact, the e-mail address is optional. If yous omit it and your href is "mailto:", a new outgoing email window will be opened by the user'due south email client with no destination accost. This is often useful every bit "Share" links that users can click to send an email to an accost of their choosing.
Specifying details
In addition to the email address, y'all can provide other information. In fact, any standard mail header fields can be added to the mailto URL you provide. The most commonly used of these are "subject area", "cc", and "body" (which is not a true header field, only allows y'all to specify a brusque content message for the new email). Each field and its value is specified as a query term.
Hither'due south an case that includes a cc, bcc, subject and body:
<a href = "mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&torso=The%20body%20of%20the%20email" > Send postal service with cc, bcc, subject and body </a > Notation: The values of each field must be URL-encoded with not-press characters (invisible characters similar tabs, carriage returns, and folio breaks) and spaces percent-escaped. As well, note the use of the question mark (?) to separate the principal URL from the field values, and ampersands (&) to separate each field in the mailto: URL. This is standard URL query annotation. Read The GET method to understand what URL query note is more normally used for.
Here are a few other sample mailto URLs:
- mailto:
- mailto:nowhere@mozilla.org
- mailto:nowhere@mozilla.org,nobody@mozilla.org
- mailto:nowhere@mozilla.org?cc=nobody@mozilla.org
- mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&discipline=This%20is%20the%20subject
Test your skills!
You've reached the end of this commodity, just can you lot recall the most of import information? You lot can find some further tests to verify that y'all've retained this information before you motion on — run across Examination your skills: Links.
Summary
That's it for links, for now anyway! You'll return to links after on in the grade when you kickoff to look at styling them. Next upwards for HTML, nosotros'll return to text semantics and look at some more avant-garde/unusual features that you'll find useful — Advanced text formatting is your next stop.
In this module
- Getting started with HTML
- What's in the head? Metadata in HTML
- HTML text fundamentals
- Creating hyperlinks
- Avant-garde text formatting
- Document and website structure
- Debugging HTML
- Marking upward a letter
- Structuring a page of content
Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
Post a Comment for "How to Add Upload Hyperlink Feature to My Blog Html"