Is this possible. From what I understand, absolute paths are most commonly used with links to a website. I am not using a web server, my HTML file is local and needs to be linked to another HTML file using an absolute link. These were my directions and any clarity is much appreciated, as I don't fully understand how I would do this yet. Thanks.
Directions:
Create a navigation (nav) menu pointing to the two HTML pages in the menu directory
-The link to the menu page should be relative and point to the entrees section
-The link to the health-warning page should be absolute.
It all depends on where the html file lives. If you're doing this locally then it'll depend on where the html file you're referencing is on your computer. If you're on windows that could be C:\Users\yourusername\projects\whateverfile.html while on Mac or Linux it would be file:///home/yourusername/projects/whateverfile.html. Those are absolute paths. A relative path is where the file is in relation to the html you're adding the link to. An example for your assignment could look like.
<nav>
<ul>
<li>Menu Page</li>
<li>Health Warning</li>
</ul>
</nav>
Yes this is possible. For a local absolute link, you would expect to see your absolute link start with C:// if you are on a Windows machine.
Related
So i have a simple nav bar that links to other pages on the website.
<ul class="navbar__list">
<li class="navbar__item">About</li>
<li class="navbar__item">Offerings</li>
<li class="navbar__item">Testimonials</li>
<li class="navbar__item">Contact</li>
<div class="navbar__contact">
Book a session
</div>
</ul>
Which all link to html files that also exist in the root directory (the same directory). Every time i try to use the link i am getting a response that says "Cannot GET /???" with ??? being the name of the html file i am trying to access.
I have played around with the paths, tried typing the name of the file explicitly, and have found that links to external sites work just fine, it's just internal pages that are causing problems.
The pages that i'm linking to do have content in them.
I'm hosting this locally using npm live-server, i'm not too experienced in it though and do wonder if there needs to be more configuration if i'm to use it to locally host several pages?
Thanks in advance
you need to write the full path to the file, not just its name
you missed .html after file name
If it is in the same directory, then write
href="about.html"
I seem to be able to find either questions about persistent menus, or using relative paths but not at the same time.
I'm actually not a front end dev, but I know how to use markdown. I wrote some documentation to code I wrote and my boss has me add it to our website. So far so good. But because our site is so small, nothing is in a directory structure (I mean, our images are in an images folder, our layouts are in a _layouts folder, but all of our pages themselves just sit in the top level directory. Now that I have 5 or 6 pages sitting there, my boss asked me to reorganize them into their own sub-directory. Lets just call that directory /myfiles/. So far so good. I refactored all of my files into that directory, and changed the references to them from "fileone.html" "filetwo.html" to "/myfiles/fileone.html" "/myfiles/filetwo.html" etc etc.
However, we have a persistent menu at the top of all of our pages (for the sake of arguing, lets just say they're "home" "docs" "about us" and now "myfiles". So what happens is, everything works fine when navigating from the home page. but when I go to anything inside "myfiles" and then try to click a menu item (for example, "docs") it tries sending me to myfiles/docs/thispage.html. That's obviously not desirable.
I understand the concept of relative and absolute paths. The home page link is always the actual url to the top level website so that always works, but every other page tries to navigate from inside of myfiles now which is wrong.
How can I fix this without changing the code of every single other menu item?
Maybe this is silly, but given my lack of confidence in my front-end skills, I generally don't want to change any code other than my own. I don't want to go around restructuring the entire site, just my files.
Is there a way to accommodate my new directory in our website given our persistent menu without having to change the paths of every other menu item to have a relative path from the root directory?
Again, I found lots of questions with the individual parts included, but not the whole thing together.
I won't give the entire code for the whole website, but the relevant part is in the "page.html" layout that applies to every "page" on the site. Particularly this line:
<a class="menu-item" style="..." href="{{site.baseurl}}/"<img src="https://coolwebsite.gov/content/uploads/2021/10/sitelogo.png" id="SiteLogo" alt=Spashimage" height="40"></a> < class="menu-item" href="aboutus.html">About us</a> <a class="menu-item" href= "docs.html">Docs</a> <a class="menu-item" href="/myfiles/thisfile.html">thisfile</a>
any help would be very appreciated
Easiest solution is probably to include a <base> element in the <head> of your document on every page. Hopefully the <head> is in some template so you only really have one place to update.
That'll allow you to specify the base path that relative URLs will work from.
Probably you would just do <base href="/" />. Then all relative links will act as if the document you're currently looking at in the browser lived in your root directory, even if it doesn't.
I wanted to make a website that would help people study better. It's still pretty basic since I don't actually know enough JavaScript to make it cool. I wanted to link one page to another through buttons, but I have no luck in doing so. I use a Chromebook and I had seen that the same link you'd use on a computer using windows isn't the same.
Here is what I did, but nothing seems to work. It is saved in the folder, Websites and it's named About.html
HTML code
<ul>
<li>Home|</li>
<li>About|</li>
<li>Schools|</li>
<li>Submit Notes|</li>
</ul>
Make sure your index.html page (start page) is located in the same folder as your About.html file. If it is, your code would be a follows:
<ul>
<li>Home|</li>
<li>About|</li>
<li>Schools|</li>
<li>Submit Notes|</li>
</ul>
I'm creating a series of web pages and I want them all to be linked together from a navigation bar, I currently have:
<li>XHTML & HTML</li>
However, if I need to export these files to another computer wouldn't the link be wrong and then not work?
How would I change these links so the file containing the HTML, CSS can be zipped up emailed to someone and it still work for them?
Use relative URLs.
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Something</li>
The path is relative to the current file, home.html, about.html, and contact.html are all in the same folder, while page.html is in a subfolder named 'folder'.
Just use relative links - no need to include the file:///...... This will also mean if you upload it to the web or zip all the files together and send to someone else, it will still work - assuming of course you maintain the same folder structure and relative file locations.
For example I have a root folder with my index.html file which has the navigation links and a folder structure as below with firstpost.html and secondpost.html in the blog folder.
Web Project folder structure
index.html
Creation.html
blog/ (folder)
firstpost.html
secondpost.html
example links in index.html
<ul>
<li>
XHTML & HTML
</li>
<li>
First Post
</li>
<li>
Second Post
</li>
</ul>
check out this post that will give you a basic overview of the idea of absolute vs relative paths.
Using has all of the issues on anchor-tags that were described in this question on base tags making it hard to use on my site.
I have a navigation menu in my site which references different parts of my site
for example
main/
|_index.html
|_section1/
|_1a.html
|_1b.html
and the navigation section on each page looks like
<div id="nav">
<ul>
<li>home</li>
<li>1a</li>
<li>1b</li>
</ul>
</div>
This works fine for all the pages on in the main folder but for pretty obvious reasons fails when I'm viewing a page in the section1 folder. I can't use <base> because I have a large number of anchors in documents (and I'm using markdown so I cant change the reference format easily).
I'm concerned that if I use absolute references on all my pages, when I upload this site to a server it will be a huge amount of work to replace the absolute reference on each page with a different one.
In addition main is a few levels down in my /home/ directory and I would prefer not to have to type a long path-name each time I refer to something if possible
I guess if I was pushed I could use sed to change all instances of the absolute path with something else but I wondered if there was an easier, obvious way of dealing with this in html that I'm missing. thanks
You can make use of htaccess, if you can't use <base> in HTML