"Exploring the Power of Internal Hyperlinks in HTML

As I embark on my first website building journey, I am faced with a dilemma regarding internal links. While everything runs smoothly locally, none of the internal links seem to work once the site is live. Take for instance this internal link:

<a href ="file:///C:/Users/17249/OneDrive/Dive%20Platform/National%20Popular%20Vote.html">Read More</a>

I am aware of why this particular link doesn't function, but what can I do in place of it if the intended link does not exist yet? How exactly can I go about creating sub pages for my website?

Thank you in advance for your insights!

htmlcss

Answer №1

Here is a straightforward example: On the server, you can't use absolute paths, but you can use relative paths by using .. to go back to the parent directory or . to stay in the current directory when linking to the necessary file.

If you haven't created a page yet, you can leave it as #, like this: 

<a href="#">Click here</a>

Answer №2

If you want to add relative links to your website, you can do so on each individual page. For example, let's say your site structure looks like this:

index.html  

category-a.html  
category-a/page1.html  
category-a/page2.html

category-b.html  
category-b/page1.html
category-b/page2.html

To create a link from index.html to category-a.html, use the following code: 
<a href="./category-a.html">category a</a>

For a link from category-a.html to category-a/page1.html, use this code: 
<a href="./category-a/page1.html">page 1 of category a</a>

And if you want a link from category-a/page1.html back to index.html, you would use:
<a href="../index.html">Home</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to execute Java code (.class) with PHP and showcase on the identical web page

I've been working on running a Java program using a PHP script. Initially, the PHP script presents a form for users to input two values: Price and Sales Tax Rate. Then, it processes these values and sends them to a precompiled Java program (saved as ...

javaphphtml

Enclose a pair of divs within a fresh div wrapper for better organization

Imagine you have the following: <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv" ...

jqueryhtml

Having trouble resolving this technical problem in Express.js and JavaScript programming

try { console.log('11111') const { data: { tasks }, } = await axios.get('/api/v1/tasks') console.log('22222 ' + await axios.get('/api/v1/tasks') ) console.log('33333 ' + tasks) There seems to be an issue ...

javascripthtmlcssnode.jsexpress

Utilizing the power of JQuery and KineticJS in HTML5 for Drawing and Interactive Drag-and-Drop

Creating a page with mouse-drawn lines and drag-and-drop functionality has been challenging. The primary issue I'm facing is the inability to delete more than one item. Additionally, cloning an item on drag does not work as intended, resulting in dup ...

jqueryhtmlcanvasdrag-and-dropkineticjs

Contrast the schedules of two different calendars

Attempting to compare two timetables for a college project in order to identify available time slots in one timetable and concurrently check for events happening in the other. For instance, if a student has an open period from 4-5 on a Tuesday, the code sh ...

pythonhtmlpandasselenium

Is your Jquery validation malfunctioning?

I am currently facing a challenge with required validation on an asp.net page. In order to validate the inputs, I have implemented multiple controls which can be hidden or displayed based on certain conditions. These controls include checkboxlists, dropdow ...

javascriptjqueryhtmlasp.netcss

How can I send a current variable through PHP?

I have a pressing deadline and I need some guidance before moving forward. Can someone please advise if what I'm attempting is feasible or if there's a quicker solution? I encountered some problems with an accordion menu, so as a temporary fix, ...

javascriptphpjqueryhtmlcss

Enhancing images by creating clickable sections in a more organized and efficient manner

Are there any other methods to make parts of an image clickable in a more organized way, aside from using the coordinates method or directly embedding images from Photoshop? <script> new el_teacher = ["candice","john"]; $(".teacher1").mouseenter(fu ...

javascriptjqueryhtmlcssclickable

The website is unresponsive to the media query

Currently, I am working on a project using Windows 10, Codeigniter, jQuery, and Firefox 43.0.4. However, I am facing an issue that is quite baffling to me. My goal is to apply styles specifically for an iPad-sized window, so I have implemented the followin ...

htmlcssmedia-queries

Is the Ajax call being triggered unexpectedly?

I've been working on an Ecommerce website and everything was going smoothly until the update_cart (quantity) code started submitting my form instead of updating it. I've tried making changes and even moving it outside the form, but the issue rema ...

phpjqueryhtmlajaxforms

Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am ...

htmlcssbootstrap-4

The code for styling the borders of links is not functioning as expected

I'm currently in the process of creating a buttoned-link feature. The aim is to incorporate a border around the link with an outset style, while having the border-style change to inset when the link is active using a:active and border-style: inset. A ...

htmlcss

Navigating Up a Directory with JQuery

Is there a way to navigate up one directory level in my jQuery code? The code below is referencing a folder named "uploads" on the C drive, but I can't find any mention of "uploads" in my HTML. How does it know to look there? And how can I go back to ...

jqueryhtmldirectory

what is the process for creating a dynamic display slide in bxslider?

I am trying to create a flexible length display using bxSlider. Here is the code I have so far. JS var duration = $('ul > li > img').data("bekleme"); $(document).ready(function () { $('.bxslider').bxSlider({ ...

javascripthtmlvariablessliderbxslider

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

The API I am working with returns an array of elements, each containing multiple key-value pairs. An example of a similar API response can be seen here: , where an array of poems is returned. [ { "title": "...." "content": "..." "url" : "..." } ...

javascripthtml

How to customize the color of md-radio-button in Angular?

I've been trying to customize the color of my radio buttons, but I haven't had much luck. Here are a couple of examples I attempted: Example 1 HTML <md-radio-button class"radio-button"> yes <md-radio-button> CSS //checked .radio- ...

htmlcssangularradio-buttonbackground-color

Kik Card - Using Synchronous XMLHttpRequest within the Kik.js Script

Getting ready to create a mobile web app powered by Kik! First step, insert the Kik.js script at the bottom of your HTML page... <!-- add this script to your webpage --> <script src="http://cdn.kik.com/kik/2.3.6/kik.js"></script> Excel ...

javascriptajaxhtmlxmlhttprequestkik

Retrieving specific data from an SQL database using PHP

My goal is to create a select form with fields populated from an SQL database containing a table of stores. I used a method to retrieve distinct store names and populate the select tool with them. echo '<select name="StoreName" />'."\ ...

phphtmlmysqlsqlinnodb

Center an absolutely positioned div using CSS

What is the best way to position an absolute div at the center? <div class="photoFrame">minimum width of 600px, positioned absolutely</div> jQuery var screenWidth = $(window).width(); $('.photoFrame').css({'margin-left': ...

jquerycsscenterabsolute

Adjustable background image with no need for a scroll bar

I am looking to create a static webpage that remains fullscreen without any scrolling. My goal is to have a centered form with the background image adjusting to the window size. As a beginner, I apologize if this request seems too simple. .container { ...

htmlcssimagescrollbackground