How can I change the Folder's Directory Page in HTML? - xhtml

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>HTML Document</title>
<meta charset="UTF-8" />
</head>
<body>
A Directory
</body>
</html>
By default when I open this link in my internet browser it shows a white page with the items in the directory. Can I change the Directory's Page. For example: http://www.aq.com/gamedesignnotes/ see how the URL points to a directory and not a HTML Document but still shows a page.

Most webhosts will show an index.html if you navigate to a directory. You could just create a new file inside your directory called index.html and put your HTML there.
Then you can go to http://yoursite.com/directory and it will show the index.html file in that directory (http://yoursite.com/directory/index.html).
Here is a link to learn more

It depends on your webserver. Apache HTTPD generates them using mod_autoindex which gives you some control over the apearence via directives such as IndexHeadInsert.

Your question is how to make pretty (seo friendly) urls right?
How to make http://website.com/something show a specific html page?
This can be done using mod rewrite using .htaccess files.
Here's a stack overflow topic on mod rewrite:
Semantic URLs for static HTML files with .htaccess and mod_rewrite
Here are some tutorials on pretty urls:
http://zenverse.net/seo-friendly-urls-with-htaccess/
http://net.tutsplus.com/tutorials/other/using-htaccess-files-for-pretty-urls/

Related

html does not load local css file

I looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.
I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask.
So it has this base.html file which has some code links to a css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RELAX AND WORKOUT</title>
<link rel="stylesheet" href="bulma.css" />
</head>
Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.
They are both at ./project/templates/the_file
This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css
It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all.
I also tried absolute path and relative path. Neither of them worked.
I'm running it on Windows 10. Using Python 3.7 and flask.
So in my case, how do I make the html load this local css file?
Edit:
Ok, I made it work eventually.
I made a new folder called "static" and put the css file inside it. Then I changed the path to this:
<link rel="stylesheet" href="../static/bulma.css" />.
Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?
But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.
From flask docs:
Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:
{{ url_for('static', filename='style.css') }}
You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.
In your html code use:
<head>
<link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Try changing your href="bulma.css" to href="./bulma.css" and see if it works.
Are you sure you don't have to go into the templates folder? "/templates/bulma.css"
Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.
As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:
https://www.w3schools.com/html/html_filepaths.asp

MVC - Serve an index.html + bundle.js created by react

my question may not be related to react directly and maybe related to MVC routes only but i decided to share the bigger picture if anyone thinks i'm on the wrong track.
we have a React / redux application that bundles to an index.html file with css and js resources:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>Booking Engine</title>
<link href="./main.837f1985001f2e603b8755f0f28be780.css" rel="stylesheet">
</head>
<body>
<div id="sb-be"></div>
<script type="text/javascript" src="./main.adb11750acf05df99619.js"></script>
</body>
</html>
the resources are dynamicly hashed as you can see.
I need to serve this index.html from a MVC application, i tried to do that using this post (by using MapPageRoute and RouteExistingFiles in RouteConfig).
I can serve the html as expected, though the resources are not being served correctly.
This is my file structure in my MVC app:
--MVCRoot
----Other MVC related folders
----ReactFolder
--------dist
------------index.html
------------main[hash].js
------------main[hash].css
now using a MapPageRoute like so:
routes.MapPageRoute("index", "SomeName/{*pathInfo}", "~/ReactFolder/dist/index.html");
The resource files of main.js and main.css are being served as the index.html, i mean i literally get the index.html instead of the actual js and css files.
I tried with routes.RouteExistingFiles set to true or false but no help.
EDIT: basically my question is how to serve a html static file with a "pretty" (custom) URL without interrupting the page's resources load with their relative path?

Html not loading

Im quite new to html and i bet i'm missing something but im creating a simple html and css to go along with it. i get 404 whenever i preview my work.
this is the html code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Basic Structure</title>
<!-- !CSS -->
<link rel="stylesheet" href="/fbtab/fbtab.css">
</head>
<body>
<div id="container">
<header>
<div id="logo"><img src="/fbtab/images/logo.png"/></div>
</header><!-- end header -->
</div><!-- end container -->
<!-- !Javascript - at the bottom for fast page loading -->
</body>
</html>
And this is the css:
html,
container,
header,
body {
width:800px;
height:100%;
min-height:100%;
}
Can someone guide me to the proper way of creating new html page?
i just need a 800px width page and want to put logo and icons for it and a background.
Thank you.
That does not have to do anything with your HTML. A 404 error means that a page does not exist. Maybe the file upload (of your HTML) has failed. Your server cannot find the file you have requested. Check via FTP if your files have been properly uploaded.
A 404 error is an HTTP status code that means that the page you were trying to reach on a website couldn't be found on their server. (and has no relation with page layout and design)
Technically, an Error 404 is a client-side error, implying that the error is your mistake, either because you typed the URL in wrong or the page has been moved or removed from the website and you should have known.
But in your case, if you are calling the domain (like google.com) and not a specific page (like google.com/index.html);
Make sure that you have given the name index.html to your web page
Make sure that you have uploaded / created / copied your index.html file in the server root directory (htdocs folder).
Try to add <html> tag before <head>.

CodeIgniter + CSS

Good Day, I'm learning CodeIgniter with Smarty. My CSS file is stored in
/App01/application/views/css/main.css
To link my CSS I use:
<link rel="stylesheet" type="text/css" href="http://localhost:88/APP1/application/views/css/layout.css" media="screen" />
But CSS is not applied on my page. When I open CSS URL, I get a message:
Forbidden
You don't have permission to access /APP1/application/views/css/layout.css on this server.
Please, what am I doing wrong? I'd like to keep my CSS together with the view because in future I'd like to learn how to create multiple themes and I thing the CSS should be kept within the theme folder.
Can I replace URL path to CSS file with some Smarty variable so that when I move my application I do not need to change CSS URL path in templates manually?
Thank you in advance! Vojtech
Anything in the /application folder of CodeIgniter should be considered out-of-bounds. For the best security, you should actually consider keeping /application above your www or public_html folder in a structure such as this:
– application
– controllers
– models
– views
– ...
– system
– core
– libraries
– ...
– public_html
– index.php
This makes your application code safer.
I’d advise creating your client-side scripts and CSS in a public folder. For example public_html/css and public_html/js. Or, if you wanted to go down the theme route, possibly name each CSS file as the name of the theme, so you’d have css/theme1.css and css/theme2.css.
If your site will always work from the root of a domain, then you can just use:
<link rel="stylesheet" type="text/css" href="/css/layout.css" media="screen" />
But if you feel that you’re going to be moving all sorts of things around, then consider preparing the file location in your controller before sending it to Smarty.
$this->load->helper('url');
$this->smarty->assign('css_file', base_url("css/theme1.css"));
That will return:
http://localhost/app1/css/theme.css
Or whatever your CodeIgniter URL is.
This will help to link css to codeigniter.
The link_tag is used to link resources and you can use helper function.
For example html helper, url helper, email helper, etc.
In your controller you have to create a function something like
<?php
class Home extends CI_Controller{
public function helper(){
$this->load->helper('html');
$this->load->view('index');
}
}
?>
And your index.php in view folder use link_tag keyword.
<html>
<head>
<title></title>
<?php echo link_tag('App01/application/views/css/main.css');?>
</head>
<body>
<?php
.......
?>
</body>
</html>
Try adding a symlink to your servers document root folder. (www/public_html/htdocs)
cd (document root folder)
ln -s (/App01/application/views/css) .
This way you can access your css folder and keep the current structure.

Why the CSS style is not applied in webpages within subdirectories?

In the root of my domain i have the CSS file style.css and the masterpage file site.master.
The link to the CSS file within the site.master is
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
The problem is that webpages contained within subdirectories do not inherit the CSS file.
What am i doing wrong here?
If i copy the style.css file to the subdirectories everything works like a charm...
UPDATE: If i change the path to /style.css or to ~/style.css the style is Not applied also to the webpages within the root folder.
MasterPages use the containing page for the path.
change your css tag to be a server control and use the "~" root symbol.
<link id="lnkStyle" runat="server" href="~/style.css"
rel="stylesheet" type="text/css" />
You need to specify the path as /style.css.
Well the obvious question is, does the other pages inherit the correct masterpage, namely the one with your css link?
ie.
<%# Page Language="C#" MasterPageFile="~/MasterPage.master"...
also perhaps '/' before file name would help
If you're including that link tag in your master page, the HTML being output by the content pages in subdirectories contains a link to "style.css", which the browser looks for in that directory.
If you're developing in ASP.NET, you should be placing your CSS files in themes, which will take care of this problem. If you really don't want to do that for some reason, make the URL to the stylesheet an application-relative path ("~/style.css") and make the link tag executed on the server; I believe that that will resolve the application path and generate an absolute URL.
Try this:
<link href="<%: Url.Content("~/style.css") %> rel="stylesheet" type="text/css" media="screen" />
It will make the path relative to your hostname, giving the correct path to your pages in the subdirectories. Right now, just linking style.css gives it the folder relative path, so its looking inside of the same folder your page is in, instead of where you intended. Hope that helps. You could also re-write your link with a preceding forward slash, like "/style.css" and that should also do the trick.

Resources