[enter image description here][1]I am creating a website and I have a pdf page that I wish to insert into my website for people to download.
This is my link below:
Download the pdf
Harry.pdf is inside my Books folder. I already put the Books folder inside my workspace on VSCode. However, my website saids the file is not there.
I have also tried it with my website name as well before the Books/Harry.pdf and it had the same problem. If anyone knows how to just put a pdf link inside a HTML page and how it is done inside VSCode, I would appreciate it.
Try this code
Download
Or it will default to the filename on the serverside if you leave it empty, like this:
<a href="./Books/Harry.pdf" download>Download the pdf</a>
Should just be this:
Download
It should be the same in VSCode as anywhere else not sure why it isn't working, try setting the href as a URL like from google photos, to see if your file is compatible. Another equivalent is to get the url from the file source. So if you own the domain example.com your html file would be at example.com/index.html and therefore your pdf would be at example.com/Books/Harry.pdf. So you could try that if you have a url. It would look like.
Download
If you want to provide me with the .html file and the .pdf file I could probably set it up, but my guess is that is confidential.
As #Spectric said
Try clearing your cache. It would also be helpful if you showed us the file structure.
That is some good advice.
As per comment you appear to be using relative paths in common parental subfolders e.g. VSyes and Books are both folders together.
With index.html in the former and Harry.pdf in the latter.
Thus your Harry.pdf is a 1st cousin of your index.html in which case you need to use:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- meta http-equiv="X-UA-Compatible" content="IE=Edge" // Should not be needed -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="download">
<!-- if you have other canvas elements on this page
which have been tainted with cross-origin content
they can become dirty and not readable by html2xxx -->
Download Not so Dirty Harry
</div>
</body>
</html>
Beware that since both parental folders are independent of each other that in a production environment although within the same domain (thus not subject to CORS), you may still need to be aware of testing access rights.
if Books is a sub folder in VSyes then remove one dot.
Related
I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means
Preface: I'm not sure if this is the right place to ask, please feel free to direct me somewhere more appropriate or move the question!
I just purchased cPanel web hosting with Namecheap for a URL website I have:
Then after reading some brief tutorials, I logged into cPanel, created a basic index.html to test, put it in the public_html folder, and set all the permissions to what should work:
However when I go to my IP address, http://19X.XX.XXX.XXX I see this:
Nevermind getting anything to show up on my www.websitename.com yet (how will I do that btw?).
I am new to cPanel and setting up websites in general, so please be gentle! =)
Thank you very much in advance for any help, much appreciated.
once you create the public_html folder create a file called index.html and one called .htaccess within the .htaccess file you'll need to set up the following;
Options -Indexes
ErrorDocument 403 /forbidden.html
ErrorDocument 404 /notfound.html
Once these are created your file tree won't be visible to the public and you'll need to create both forbidden.html and notfound.html within the main public html file. I'd also recommend just creating a page called test.html and adding the following:
<html lang="en-GB">
<head>
<meta charset="utf-8"/>
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<h1>Hello</h1>
<h2>This is a test page.</h2>
That way you should be able to navigate to mydomain.com/test.html and see the output of the html page. Add a comment if you have any further questions.
I am relatively new to CSS and HTML, but I just had a tutorial on connecting HTML documents to CSS sheets. It didn't work, and I have searched everywhere for the answer. All the sites had feasible answers, but none worked for mine.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>FlyHighGames|Home</title>
<meta charset="utf-8" /> <!--Bro what does this even mean?-->
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Please help!
use folder name if you saving css in any folder
<link rel="stylesheet" href="foldername/stylesheet.css"/>
As others have said, you need to use the link element:
<link rel="stylesheet" href="pathToCSSFile">
FYI the: type="text/css" part is no longer needed in HTML5
But, to correctly indicate the path to the .css file, follow these
rules:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working.
NOTES:
If you feel that you've referenced the CSS file correctly, you may have a syntax error in that file which is preventing the CSS from being processed. You can run your CSS through a validator (https://jigsaw.w3.org/css-validator/) to see if it's valid.
You can also hit the F12 key with your web page open and click on the Network tab and refresh the page. This will show you all the network requests made by the current page. If you see the CSS file listed and then see a 404 message next to it, you know the file wasn't found.
The link tag is used to link to external style sheets. check your css file path try this code work fine
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
you need to attech style sheet beetween head tag.
As other said, use the link tag, but I sometimes get an error, if I add a slash at the end as required in XHTML as it automatically closes the tag and doesn't allow it to access other parts of the page.
Create a css stylesheet.css file and save in folder where HTML file exits
Provide complete path of your stylesheet file
example
<link href="Content/css/stylesheet.css" rel="stylesheet" />
I am building my first website and I'm trying to attach an external css file...
Both my index.html and test.css are in the exact same folder/directory, but for some reason my test.css file isn't being linked...
Question: Does anyone know why my test.css isn't being linked?
//HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="test.css">
<title>Page Title</title>
</head>
<body>
<h1>header of type 1</h1>
<p>standard paragraph</p>
<hr>
<p>HTML stands for Hyper Text Markup Language</p>
</body>
</html>
No need to worry, there's nothing wrong with your css code.
You just have to make sure that the 'href' part of your stylesheet link contains the name of the file your want to include, which in your case would be:
href="CSS Test.css"
Windows will hide the file extensions by default though, so make sure your file isn't actually called "CSS Test.css.css" after you added the extension a second time. To show all file extensions, do the following:
Open Folder Options by clicking the Start button Picture of the Start button, clicking Control Panel, clicking Appearance and Personalization, and then clicking Folder Options.
Click the View tab, and then, under Advanced settings, clear the Hide extensions for known file types check box, and then click OK.
Ok, thank you for all the quick responses, I have cleaned up my style thanks to both replies and I have kind of found the solution. I think "user5375312" was on the right track with the .css.css idea, that by adding .css I was somehow adding it twice. I don't think that's "exactly" what happened, but by creating a new css file, when I made it .css I also unchecked the "hide extension" box, which revealed a .txt, making my final file "Test.css.txt"
I removed the .txt keeping only the .css, saved the file to the same location, updated my page and the css file loaded in fine.
I'm still not sure what exactly went wrong or where, but I know it was either when I created the file the .txt was somehow still present when with previous files it was overridden or removed (something unique to creating css files maybe) or it was after I made the file, that some other setting caused it, but unchecking the hide extension box and making sure it saved correctly solved the problem, and I hope if anyone else encounters the issue that this helps.
Thanks again for the responses, it probably would have been days before I thought figured this out on my own, it was the mention of the .css.css possibility that drew that checkbox to my attention on my4th attempt at making a css file :D
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.