-1

I was very perplexed that how can a browser run separate files together seeing how every website's front-end files were scattered in different folders. I saw that in "sources" in chrome's developers tools.

But then I found a file named as index.html and it was very big. Then, I built the notion that it may be executed as a single file and may contain all the files that I saw in structured folders. I am doing that but it is very long, even for small websites.

So does the index.html file contain all those small files or call them at some point? And is it executed singly? I thought previously that those subordinate files may be run in order but I was bewildered how it can be.

Also, would, in general too, a computer/IDE environment/browser execute only a single file and not multiple files stored in different folders- although it can refer back to those small secondary files in the system which are linked in the main file?

Although there is a stackoverflow answer there on that but its wording seems too technical. It is:-

Some sites are built up from many actual html files, while other, more dynamic sites usually look like they consist of many html pages, but actually they just have a single entry page (like index.php) that handles all requests and generates output based on the url.

I am new to web developing, so it would be a great help.

EDIT:- It is my fault that I didn't understand you guys because I am new to all this stuff called programming. I thank every person who tolerated my stupidity but now I have got the whole idea behind this issue. Thanks!

0

2 Answers 2

3

Does index.html contain all files seen in structured folders?

I found a file named as index.html and it was very big. Then, I built the notion that it may be executed as a single file and may contain all the files that I saw in structured folders.

No, I doubt more than a vanishingly tiny number of websites use a single script (e.g. index.php) to hold the entire site content. There is no good reason to do that. It is a bizarre notion - though there are probably one or two incredibly arcane situations where it might be useful.

A single index.html would normally host static content for a single page.

If your whole website was in one index.html file, a normal web-server (Apache, IIS etc) would just transmit the whole file to the client and the client end would interpret it and run any embedded executable elements such as Javascript. This would be an incredibly inefficient way to serve up a page of any but the most small and trivial of web sites.


What is special about index.html?

The only special thing about index.html, compared to other html files, is that most web-servers will look for an index.html (and often other similarly named files) when receiving an HTTP request that lacks what can be interpreted as a file name. For example http://example.com/tutorial might result in the web-server looking for a file named index.html in the tutorial subfolder of the directory designated as the document-root of the example.com website.


What is in an html file?

Any html file can contain inline style, either as a block of CSS or attached to individual elements.

An html file can also contain references to external CSS files. This makes the style of a group of pages easy to keep consistent.

I can illustrate this using some simplified HTML. If you cut & paste this into files named example.html and click on them to open them in a browser it will render OK -- but it doesn't meet current specifications (I want to keep the example short)

file example1.html

<html>
  <head>
     <title>Example</title>
     <style>
        h1 { color:red; }
     </style>
  </head>
  <body>
    <h1>Hello</h1>
  </body>      
</html>

looks the same as example2.html

<html>
  <head>
     <title>Example</title>
  </head>
  <body>
    <h1 style="color: red;">Hello</h1>
  </body>      
</html>

and the same as example3.html

<html>
  <head>
     <title>Example</title>
     <link rel="stylesheet" media="screen,print" 
           href="/example.css">
  </head>
  <body>
    <h1>Hello</h1>
  </body>      
</html>

with example.css

h1 { color: red; }

The last of these is arguably the best approach of the three for multipage websites with a consistent visual identity.

An HTML file will usually have some references to separate image files and other content. Therefore to render a page correctly, you need a set of files, not just one HTML file.

You don't need a web-server to play around with this sort of static HTML.


How do a web-browser and web-server work together?

A web-browser will first ask the server for the HTML. The web-server will typically simply send the contents of the HTML file without augmenting, combining, parsing, processing or executing any of the HTML file's contents.

The web-browser will then parse the HTML to find references to external resources and separately download those from the web-server in order to complete the rendering of a web-page. Note that a web-browser will cache CSS files etc so that it doesn't need to ask the web-server again for the same CSS file referenced by a subsequent web-page. This reduces network-usage and thereby speeds up the process.

It is only when the web-site is dynamic, rather than static, that the web-server does anything extra. For example to process server-parsed HTML (example.shtml) or PHP (example.php) or when there is Java or other back-end technology involved - which is very common nowadays but not something you should look into until you have a good in-depth understanding of static HTML and CSS.


Getting started

I am new to web developing

Suggestion:

  • Start with one static HTML file per web-page.
  • Learn about separation of style and content. Semantic markup.
  • Move style into a common CSS file
  • Learn about responsive design using only HTML5 and CSS3
  • Augment the static site with one or two dynamic pages (e.g. PHP)
  • Maybe learn some Javascript. Don't use Javascript for things that can be done in HTML5+CSS3.

Then do some general research into various web technologies

0
1

The index.html is just the file that is opened, if the user doesn't specify any file.

That is, if a user calls https://superuser.com (as contrasted to https://superuser.com/specific-page.html), a file specific-page.html doesn't exist, but an index.html exists in this directory, the webserver returns the content of index.html to the user/browser.

0

Not the answer you're looking for? Browse other questions tagged or ask your own question.