I have a website, norway-yv.epizy.com. I use InfinityFree to host (I just want to use the website for practise and as a fun hobby project). They use filemanager.ai to manage my files. I have a vast system of files and folders (see below), and instead of having to upload every file and every folder I have made it so that everything is in the website folder. This way, I do not need to upload everything every time I change something in my local copy of the website. I want norway-yv.epizy.com to redirect to norway-yv.epizy.com/website/home.html, and have done this trough an index.html file. However, it only gives error 404.
My files
.htaccess
DirectoryIndex index.php index.html index.htm index2.html
ErrorDocument 403 https://infinityfree.net/errors/403/
ErrorDocument 404 https://infinityfree.net/errors/404/
ErrorDocument 500 https://infinityfree.net/errors/500/
I have configured http://norway-yv.epizy.com/website/myerrorpages/[errornum].html as error page path in InfinityFree control panel
htdocs (folder, automatically created)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>norway-yv</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=website/home.html">
</body>
</html>
website (folder, manually created)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>norway-yv</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=home.html">
</body>
</html>
home.html
<html lang="en">
<head>
<title>norway-yv | home</title>
<link rel="icon" type="image/png" href="../files/icons/favicon.png">
<link rel="stylesheet" href="style/normal.css">
</head>
<body>
<header>
<a href="home.html">
<img class="logoTop" src="files/icons/favicon.png" alt="Logo" />
</a>
</header>
<h1>This is the website of norway-yv</h1>
<p>I'm sorry for the horrible look of my website, but it is the best I can do</p>
<h2>About me</h2>
<p>I am a hobby developer who likes programming in Python. I am a student in Norwegian upper secondary school, year 1.<br>
Some of my best projects can be found <a href="projects.html" >here.</a><br>
Feel free to contact me trough GitHub.</p>
<h2>Contact</h2>
<p>
<a href="https://stackoverflow.com/users/17496608/norway-yv" >StackOverflow</a><br>
GitHub (via GitHub e-mail)<br>
</p>
</body>
</html>
projects.html
<html lang="en">
<head>
<title>norway-yv | projects</title>
<link rel="icon" type="image/png" href="../files/icons/favicon.png">
<link rel="stylesheet" href="style/normal.css">
</head>
<body>
<header>
<a href="home.html">
<img class="logoTop" src="files/icons/favicon.png" alt="Logo" />
</a>
</header>
<h1>My projects</h1>
<p>I have made tons more than this, mainly for scientific and mathematic purposes, but these are some of the projects I am most proud of:</p>
<h2>kode24-calculator</h2>
<p>An ongoing project, where I try to calculate expected wage for Norwegian developers using many different parametres.<br>
For more information, see here. </p>
<h2>binary-calculator</h2>
<p>A project that sort of is finished, but still has a long way to go. Currently, it can calculate the sum of two binary numbers up to 32 bit size and output it.<br>
For more information, see here. </p>
</body>
</html>
My comments in the end
I have much more than this in my website, with several other folders. I can add them to the question if that is necessary. But I hope not.The same problems do occur when previewing (using edge showing the local version). So it's more of a problem with my files than InfinityFree.
Maybe it's not working because you are missing the <base> tag in your <head>.
The base tag defines the base URL, from where relative URLS are redirected.
For more
Related
My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.
I'm currently working on a project for school, and I was wondering why my stylesheet isn't linking to my HTML file, I've tried rewriting it, putting it in different places, and still nothing! Here's the code if needed
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<h1>About Me</h1>
<p>Hello everyone and welcome to my little website!</p>
<p>You can just call me Golden Rose<p>
<p>I play/watch and review games, movies, and tv shows (especially horror).</p>
</body>
</html>
body {
font-family: sans-serif;
}
If you can ensure the file location is correct, you may need to do a browser refresh. This can be done in Chrome by pressing control and f5 at the same time. This will clear all cache and force the stylesheet to load.
I am currently at a dead end on one of the projects I am working on.
I'm working on the translation of an application in Xamarin Ios, at the moment
the entire application can be translated and the language of the application can be changed directly via the app.
But this application also has Tutorials pages that explain in a few words what is the purpose of this feature.
These pages are in html and have a relatively simplistic content that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p>Use this page to add a new friend</p>
<p>It could be a good idea to give him a pseudo</p>
</div>
</body>
</html>
These pages should be translated on the fly when the user
decides to change the language of the application.
Currently the entire application could be translated into several languages except these html pages, simply because I have no idea what's the best way to do it.
I didn't find any information or documentation about this (I'm pretty sure that's because I'm using Xamarin Ios).
I am looking for a way to fill my html file with the contents of my resx files in which I would put the content html pages.
1 - I will have to save Html tags in my resx files if I decide to write <strong> this word </ strong>, which does not seem to me very practical and will oblige me to record every sentence and / or word that stands between specific tag ?
2 - How can I do this binding between my html file and my resx file? To get something like this
<!DOCTYPE html>
<html>
<head>
<title>Tutorial 1</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="content-block">
<p> [contentFromMyResxFile] </p>
<p> [AnotherContentFromMyResxFile] </p>
</div>
</body>
</html>
content being loaded directly from my resx file and so could adapt to the language of the application.
I've been struggling for hours to include the Bootstrap CSS file into my file. My code snippet is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css"> <!--Works fine now, but not with local path -->
<title>Welcome</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1> Hello </h1>
<p> world </p>
</div>
</div>
</section>
</body>
</html>
This works perfectly and the Bootstrap shows up just fine. However, I wish to include the localized files. The moment I change the link in the head of the code to <link rel="stylesheet" href="resources/bootstrap.css" type="text/css">, The bootstrap disappears.
Just to make sure and convince you that the bootstrap.css is indeed there at resources/bootstrap.css I included <%# include file="/resources/bootstrap.css"%> at the top of the code and it actually showed me the entire content of the file.
What am I missing? How do I resolve this?
If you have this project structure (I suggest trying this,because resource folder content is not used for static web contentnt ):
|_webapp
|_css
|_bootstrap.css
you can load the css by
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.css" type="text/css">
I've been trying to make a simple static web page with some Bootstrap functionality in it. I set up a LAMP server on an AWS ec2 instance to accomplish this.
To try some things out, I just wanted to use a jumbotron to make sure I was able to connect the bootstap library to my html page. I accomplished this at some point, but I stopped working on this and came back a few weeks later to continue. I picked up where I left off, with the same exact code, but this time, the jumbotron I had working was no longer present. Basically, the html page I made was a typical html page with normal fonts and no jumbotron effect. My code is below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!--meta tag viewport purpose is to scale screen correctly-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link href="custom.css" rel="stylesheet" >
</head>
<body>
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
</div>
</div>
</body>
</html>
I mentioned this is being done in an AWS ec2 instance. So assume that the path to my html file is /var/www/html. the html directory holds my .html file which is my static web page, and also holds the js,fonts,and css directories downloaded from bootstrap. So... once again, html directory contents are:
css custom.css fonts js Will.html
I'm confused as to how I left the code alone and after coming back a couple of weeks later, the jumbotron was no longer working. Initially there was a master bootstrap directory that held the css, fonts, and js directories, but I just got rid of that master directory and put the three directories inside on the same level as the html page. That shouldn't matter though, I just changed the path to those directories. I updated my LAMP server on the aws ec2 instance, so maybe thats causing an issue. Not sure though, any help on how to get this jumbotron working would be great.
Thanks.
try this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<!--meta tag viewport purpose is to scale screen correctly-->
<meta name="viewport" content="width=device-width, initial-cale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link href="custom.css" rel="stylesheet" >
</head>
<body>
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>