I have a problem with linking images and links from HTML file to another HTML file .
The only way I have to link links or images is this way:
from one html to another:
<a class="navbar-brand" href="/index.html">Logotype</a>
of a photo:
<img src="/photos/mouse.png" class="img-fluid rounded mx-auto d-block mt-5" alt="about us">
My question was how do I not use the forward slash on all the links. I am a student and my teacher is forcing me to remove that slash from all links. And if I remove it, it doesn't work, nor does the link to the CSS work.
Put all the photos in same folder. Then you would not need to give / before the file name.
Like this:
<img src='myphoto.jpg'/>
Related
I am trying to make my logo clickable to go back to the homepage but can't seem to get it to work.
Any help appreciated...
<!-- logo begin -->
<div id="logo">
<a href="index.html">
<img class="logo logo_dark_bg" src="images/logo.png" alt="/">
<img class="logo logo_light_bg" src="images/logo_light.png" alt="/">
</a>
</div>
<!-- logo close -->
Your anchor currently work only from the root so you should update your reference to be from the root as well, so href="/index.html" note the starting "/". The Same applies to your src links:
<div id="logo">
<a href="/index.html">
<img class="logo logo_dark_bg" src="/images/logo.png" alt="logo">
<img class="logo logo_light_bg" src="/images/logo_light.png" alt="logo">
</a>
</div>
Starting an anchor link with a / means it sources from the root so that wherever the above code is based (such as in site.com/currentfolder/file.html) it will always connect with your home page which would typically be found in site.com/index.html.
Currently (without the leading /) the anchor link is looking for site.com/currentfolder/index.html which is almost certainly looking for a file which is not the welcome or home page.
Update
Also you need to ensure that the home page file does actually exist. Typically in your case the home pages may be /index.htm rather than /index.html. Please ensure that the file with the correct filetype HTML reference (.html or .htm) exists and is referenced correctly.
Summary Issues
Anchor href file should be absolute reference starting with /
Anchor href file must exist, with the correct filetype (.html or .htm, etc.).
image src should be absolute reference (starting /).
image alt should be the website name and/or logo description.
I've added a page link to a picture for my website, but it does not load the website because the link goes the directory therefore the webpages do not appear. My code is below:
<a href="www.w3schools.com">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
When I click on the image it says file not found.
If you're linking to a page on an external site, you will need to provide the entire URL of the page in question, which includes the protocol. In this instance, that would be http://www.w3schools.com/.
By linking to www.w3schools.com, you are telling the browser to load that URL relative to the page you're linking from so, if this link were on a page located at http://domain.tld/page.html, clicking on it would attempt to load http://domain.tld/www.w3schools.com.
Add http:// OR https:// for your website link:
<a href="http://www.w3schools.com/">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
<a href="http://www.w3schools.com" target="_blank">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
Without the http:// your link will be something like: youraddress/www.w3schools.com
And pay attention if you image is in the correct folder called Images
Im trying to set up a hyperlink from my current page to another page via my files, however it doesn't work...
My code:
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html"><input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
<!-- Thats in context, the HREF is following-->
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
Once i click the hyperlink it comes up with an error that repeats the directory:
file:///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/file///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/Index/Languages.html
How can i fix this?
First of all, the tag in conjunction with the href attribute work as follows <a href="path/to/file.html">. Noticed the difference (space)?
Secondly, if the file is in the same folder, all you need to do is reference the file that you want to link starting from that path and upwards.
You were on the right track, your href would become: {}
Consider naming files with lowercase letters only. Its not necessary, but a well accepted practice!
The <a> must have a space between the a and href: <a href="">
When you use the href attribute, the path will be based on which file you put the <a> in, e.g. if you put the <a> in the index.html, and you want to reference to languages.html, first make sure that the languages.html is in the same folder as index.html (easier) and then just reference to it with:
<a href="languages.html">
Also, why are you using an input tag? Just use an img tag. I'll fix your code:
<a href="languages.html">
<img id="Languages" style="position: absolute; height:_px; width:_px;" src="CSImages/About.PNG">
</a>
This only works if the folder CSImages is in the same directory as index.html If not, just change the path accordingly.
Hope this helps!
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
</a>
As mentioned in comments, you should put a space between a and href. Additionally, you should close the a tag.
Why are you using an input element for showing an image? Maybe you are better off with an actual image tag:
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img id="Languages" style="position:absolute; height:[insert missing value]px; width:[insert missing value]px;" src="./CSImages/About.PNG">
</a>
You may also have a look at this SO question for more reference on links to local files: How can I create a link to a local file on a locally-run web page?
Add the space in the a href, put the image in an img tag, and don't include height and width unless you are going to include a value. Also position:absolute has to go in a style tag. Finally, close your a tag.
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img src="./CSImages/About.PNG" style="position:absolute">
</a>
http://dev.epicwebdesign.ca/karen/2-4/a/#antartica
Absolutely positioning the continents, for some reason the links don't go to the proper place. Is this a shortfall of absolute positioning, or am I doing something stupid?
The anchors are around the headers as they should be.
Just realized it's going to the top of the image, not the headers underneath. Why?
The <a name="fragment_name" /> method of defining fragments has been deprecated in favor of using ids. So when you go to http://dev.epicwebdesign.ca/karen/2-4/a/#antartica, the browser thinks you want to go to <div id="antarctica"/>, which is at the top of the page, instead of <a name="antarctica" />, which is at the bottom of the page.
Turns out, in chrome at least, that it considers an ID an internal link, not just a name. The ID's of the images conflicted with the names of the headers. Once the ids were suffixed with "img" it works
To add to cimmanon's answer (and in case your referenced page changes).
Note: Kindly paste your code for future reference.
Change your anchors at the top of the page from:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
to:
<div id="continents">
<img src="northamerica.png">
<img src="southamerica.png">
<img src="asia.png">
<img src="europe.png">
<img src="oceania.png">
<img src="antartica.png">
<img src="africa.png">
</div>
Notice that I've changed the href on all links.
And change your heading below from:
<a id="antartica">
<h1>Antartica</h1>
</a>
to:
<h1 id="antarticaSection">Antartica</h1>
Without the anchor (unless you plan on linking it to something else).
I'm using a custom theme based on "Contoso". I've edited the "Branding" file in my custom theme to show my logo:
#{
var homeUrl = Href("~/");
}
<h1 id="branding">
<a href="#homeUrl">
<img src="Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
</a>
</h1>
I can see the logo fine on regular pages. I've got a list of custom content items on one of my pages though, and when I click on the title of one of the content items in the list to show the details of the item, the logo at the top shows as a broken image... What would cause this?
Use
<img src='#Href("~/Themes/myTheme/Content/Images/logo.png")' alt='Our Logo'/>
Your img url path was not defined as relative to the root. More info here: http://brugbart.com/Articles/paths
This should also work: Notice the '/' at the beginning of the url
<img src="/Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
It is better to use
<img src="#Html.Content("~/Themes/myTheme/Content/Images/logo.png")" alt="Our Logo" />
Use ~/ as sugested, #Html.Content("~/...
The compiler tracks the route and makes the URL from the site root, ie, ~/ is replaced by the site's root.