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
