cPanel HTML can't open site: 403 Forbidden - html

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.

Related

Insert a PDF file/Download Link inside a basic HTML page

[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.

How to block access to one page and redirect to another

Ok. Here's what I want to do.
Suppose I have three pages: page1.html, page2.html and page3.html.
I want to restrict access to page2.html to those whose previous page is page1.html. In other words, if visitors try to come to page2.html from any url other than page1.html, I want to redirect them to page3.html immediately.
How would I go about doing that, and where would I put the code? I've tried looking up info online, but I can never find any simple and straight-to-the-point answers.
Can you help me?
You can use <meta http-equiv="refresh"/>
It makes you change your current URL. Try putting this on page2.html :
<!doctype html>
<html>
<head>
<meta http-equiv="refresh" content="0.1; url = page3.html" />
</head>
</html>
In content the first number means how much to wait before redirecting. You can make it like five seconds and add a message saying acces denied, redirecting in five seconds.

Can a Jekyll site be a sub site within an existing website?

I'm managing a site that is generated by Jekyll and hosted on github. The product manager does not like the home page and wants to redesign it and has asked if it could be created separately from the rest of the site (which is Jekyll).
Personally I'd love to pull the whole site out of Jekyll as what we are doing and what Jekyll is made for are two different things. But budget and time are factors and doing a major overhaul is not in the foreseeable future.
Has anyone tried this and if so what are the pain points/best practices?
Thanks
You are in luck. That is not a complex task AT ALL. Just create a folder called _layouts in the root and create a 'customhome.html' file in it.
Then create an 'index.md' file in the root and set this:
---
title: Home
layout: customhome
---
Write your whole (custom) webpage in the 'customhome.html' file, like this:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
As a bonus you can test your customhome.html file directly in your browser without intalling Jekyll (as long as you keep everyting inline).
PS. You can even forget the above and put a simple 'index.html' file in the root... that works too! Make sure you delete the existing 'index.md' file if available.

Polymer - 404 Not Found

so I'm trying to write a simple hello world page using Polymer. The problem I'm having is whenever I run the #polymer serve command and load up my webpage it can't find the webcomponents.min.js and the iron-component-page.html. Any reason as to why this is happening and how can I fix it?
index.html
<!doctype html>
<html>
<head>
<title>polymer-element</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="polymer-element.html"></iron-component-page>
</body>
</html>
I tried some of the answers given here but still can't get it to work.
I haven't quite figured it yet but polymer is using polyserve under the hood, and I think that tries to be clever with url to file directory mapping. I think it assumes a directory structure where you are developing a re-usable component so after complete when your element also sits in bower_components, you go ../web-component/web-component.html to find the import, but your development structure has bower_components within the directory you are actually developing your component in.
When dealing with an app, I just put "bower_components" at the route of my app directory, and my elements in the "src" directory as a subdirectory of that. Then I explicitly use /bower_components/web-component/web-component.html in my html imports.
Running polymer serve from the root of your app then serves that at localhost:8080/
Short answer: Assuming your working dir is "x" and components are in "x/components" , create a soft link thus:
$ ln -s components bower_components
Long answer:
polymer serve does not seem to read/honor .bowerrc.
My components directory is "components" under which all my polymer components are present.
.bowerrc --> { "directory":"components"}
Running "polymer serve" starts the server, but when I navigate to "http://localhost:8000/index.html", I get a blank page.
Upon inspecting the network traffic in the browser, all requests to webcomponentjs* are returning 404s.
So.. polymer serve is not honoring a non-default components directory. It is expecting bower-components dir.

How Do I Connect HTML to CSS?

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" />