The index.html file - where it all begins

When building a Web Application with Quanta, the index.html file represents the "skeleton" of all of your web pages. 

It acts as a main wrapper for whatever your web pages will contain, so you need to make it generic enough to not have components. 

Your index.html file could be as simple or complicated, as you wish. You can use it to embed all your data and metadata, external scripts, (stats, widgets, etc. etc.).

quanta-index.png
The index.html file must be located in the root of your site/app folder, and can not be moved elsewhere. 

When you firstly install Quanta, a sample index.html file will be created for you. It's a good idea to use it as a starting point, to be extended as you wish.

Let's start by having a look at the index.html site of the Quanta site (yes, the one you are seeing right now!)

<!DOCTYPE html>
<html lang="[LANGUAGE]">
<!-- Headers -->

<head>
<meta name="google-site-verification" content="ZYUhEnx0HWBqwNEA-meUbDpHyHXZ9zr5y-UgiAjqE8k" /i>
<meta name="google-site-verification" content="oIxywnCPeoi7quK2wwOmBEuLjYV4JUu7OKsuLQdtPkI" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#333">
[META_DATA]
[CSS|runlast]
[CSS|external:https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css]
[AMP_LINK]
[CANONICAL_LINK]

<title>[TITLE]</title>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90634835-3"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'UA-90634835-3');
</script>
</head>

<!-- Body -->
<body class="canonical grid three-rows [BODYCLASSES]">
<!-- Display messages (if any) -->
[MESSAGES]

<!-- Site's header -->
[HEADER|grid_id=header|header_class=text-center:_header]


<!-- Currently viewed node's content -->
[MAIN|grid_id=grid-main]

<!-- Site's footer -->
[FOOTER|grid_id=footer:_footer]

[JS|runlast]
</body>

</html>