Site Structure html file hierarchy - html

I ran into a site structure that I found interesting. It went something like the following:
All pages on the site were index.html, however all the pages(index.html) on the site resided in their own folder and even within some folders there were other folders where an index.html file resided. Does this type of site structure make good sense.
http://www.stpaulsschool.org.uk/ follows this type of structure.
Thanks

Not sure, but it looks like the site is rewriting URLS.
So they are changing
something/php?id=1
to
normal_folder/
The site is probably using a content management system to do this.
If you don't need a CMS, then I would stay away from this.
EDIT
As per the comment below...
Some Web site building systems (Wordpress, etc.) will automatically generate URLs when they create new pages. Often, those URLs are ugly and don't work well for link sharing or for Search Engine Optimization. So, you can rewrite the URL paths so that the URLs are prettier, like what you showed above.
If you are not using a system like that and you are not generating your URLs from a database (where that could also happen), then you should stay away from creating a site with one page in each folder. It is difficult to maintain and not great for user navigation.

It just looks like normal URL rewriting to me. I highly doubt those apparent folder structures exist in their web root.

The site isn't using this at all. Its probably using a rewrite system which lets you decide which page to fetch for which url. the directory structure you think its using is very bad and should not be used.

Related

Do I need an HTML file for every single page on my website?

Say I have a product website, like Amazon (this is not the case, but it will help me explain my point), and I have a URL for every single product (such as with Amazon)...
Do I need to copy-paste and modify an HTML file for every single individual product page, or is there a way to use a "model" on which I can base all my other pages without recopying the whole code and modifying a few things in each?
I've just started learning HTML and web development, so bare with me if I'm asking a stupid question.
It just seems odd to me that a million-page website should host a million+ individual, nearly identical, HTML files.
Thank you very much in advance.
P.S. I'm using Amazon's brand name as an example here, and am not affiliated with anything related to it. Thank you for understanding.
No, you do not need an HTML file for every single page on your website. While you could do that, it is becomes very infeasible to manage the bigger your site becomes. On most websites you would have the following components:
A front end - consists of HTML code and usually some sort of template engine with placeholders for your data
A backend - consists of your data store (usually a database).
There will also usually be some form of API and/or middleware between your front end and backend.
If you go to https://example.com/myproductid in your browser, your computer will send that request to the web server. The web server will then retrieve your data, load it into the correct template, and serve the page to you.
In traditional HTML and PHP only websites, you would have to reload the entire page each time you went to a new product. However, you can instead use a technique called Ajax to only update certain parts of a web page rather than reloading the entire page. That way you can just update the text, images, and links that are specific to the product, and the rest of the page would stay the same. (Note: Ajax originally used XML, modern implementations usually use JSON).
Ultimately, you will want to learn some JavaScript and then start looking into various web frameworks or libraries such as ReactJS.
Not you Can have only one page for all product, but you have to make it Dynamic.
Yes you need an HTML document for your each webpage, like for Home page, contact us page you need different HTML documents

Convert Umbraco site to Plain HTML website

We have a asp.net mvc website which is using umbraco CMS system. Now,we want to convert the CMS system to plain HTML pages. We do not have the complete code of the website.
How can we remove CMS system and convert it into flat HTML files easily without writing the code from the scratch for this website.
Why would you want to move away from a CMS? A CMS is build to make things easier and you are moving going back to the dark ages of the internets where we build websites with notepad by typing HTML by hand.
Discaimer: I am an umbraco dev, and I love the product. So I might be biased
To answer your question, I use http://www.httrack.com/ to backup existing (old) websites before moving to a new platform & hosting.
To answer your question:
For every page, view source and copy the shown Html to a new Html file. Make sure you honour the folder structure too.
You could also use https://www.httrack.com/ that might give you what you need.
To try to persuade you not to:
However I would strongly recommend against doing this. Umbraco has great mechanisms in place that give almost comparable speed to a flat file website. It uses an Xml file that gets updated when database values are changed, and builds pages and content from this.
If you flatten your website to plain Html files all your Urls will invariably change and this is super bad for SEO. You will also have a 'mare of a time trying to update the site with new content or editing the same content found across all pages e.g. the main navigation and footer.

Display JPG based upon URL

I have a JPG in the header section of a responsive HTML page. I want to use the same site content for multiple domains that will point to my single set of files at my hosted URL. Example : mysite.com will host all files. But a second site - example theirsite.com will point in a forward to my hosted files location.
All the content will be the same, EXCEPT FOR the one image file (logo.png) or can be any name, but I would like to see if I can image-substitute 1 file (logo.png) to render so that, when visitors come to mysite.com, they see my file. When visitors come to theirsite.com they will see the logo file for theirsite.com instead of for mysite.com Sorry if I have not explained this professionally.
There are two real ways to do this. The best way is to handle it server-side.
You would need some sort of dynamic site generation, such as PHP. As the site isn't changing on each request, I'd recommend doing this generation ahead of time. Then you can utilize static hosting on CDNs and such. The specifics of how you do this depend on your technology choice. And, it matters little what you pick.
Doing the switch server-side is better, as crawlers will be able to see the right version of the site. Most crawlers don't run client-side code.
The second option is to handle it client-side. In this case, I'd recommend including a site definition file for each domain and writing some JavaScript to check the hostname the site was loaded on, and load the right site definition file. That file could contain elements and attributes to replace. Again, this is less desirable of an option, but still possible.

How to properly link to pages?

I have a sidebar with basic link that should appear on every page:
about
engage
contribute
If I go from main page and click on about link, how to go to engage from that page?
I have created multiple directories with .html files for every page. Right now I am using this method:
href="../../engage/engage.html"
but it gets complicated when making more pages and subdirectories.
Also, bonus question, is that a good way to organize webpages?
Thank you.
Well, I believe your problem is only happening because of your directory structure. I wouldn't use it, as I prefer a more navigational and hierarchical structure.
This may turn out to be a big mess as structure grows, but when it does, you shouldn't be using simple HTML.
If you have a lot of duplicated code in different HTML pages, you may want to use something else, such as PHP, to load your pages.
For example, if you use PHP, you make your index.php page load the duplicated code everytime, like headers, footers, toolbars, and the content page based on a path parameter (e.g. /index.php?page=engage.html). The good thing is: when you load pages that way, using the include('engage.html'), all the links in the pages you load refer to the relative path from index.
Any links to your other pages would look like this: href="index.php?page=about.html". With proper setup, it may even be cleaner: yourwebsite.com/?p=somedir/page.html.

How to edit "Index of/" on website

Recently I have been trying to achieve a navigation for my website that can view files and folders and go up one directory etc...
I have realised that if I make a folder on my website FTP server and then within that folder I put a whole lot of other folders or files it will list them all in an "Index of/ " (as long as there is no "index.html" or similar named file)
Please use this as an example:
http://ysk.co.za/test/
So now I would like to change the CSS of that page that indexes the files and folders, and possibly edit it in other ways.
Is it possible to do so? If not is there an alternative to achieve similar results.
Answers would be much appreciated, thanks in advance
What you're seeing there is just a directory listing on the web server. Since you haven't written a page (using some sort of server-side technology like PHP, JSP, etc.) that actually lists the directory structure, you aren't going to be able to extend the functionality of the page or change the appearance using only CSS.