This theme primarily relies on Javascript to construct it, so you'll only be adding windows (like this one) to your page. The desktop, start menu, and taskbar are generated automatically based on your Javascript settings.
If you're completely unfamiliar with HTML, it's recommended to take some basic tutorials before continuing. Check out the Neocities tutorial collection.
When you know the basics, such as using <a> tags, start going through the tabs at the top of this window. You can also copy the code below to set up a basic window with an attached help window.
<!-- A window with all elements -->
<section title="Example Window" id="exampleWindow">
<img src="imgs/icon_program.png">
<nav>
<a class="tab1">First Tab</a><a class="tab2">Second Tab</a>
</nav>
<div class="tab1">Your text goes here!</div>
<div class="tab2"><span class="indentBox">This text is in a box!</span></div>
<footer>
<a onclick="sc_CloseWindow('exampleWindow')">Close</a>
<a href="">Refresh</a>
<a href="https://WEBSITE_NAME.neocities.org">Redirect</a>
</footer>
</section>
<!-- A help window attached to the previous window -->
<section title="Help">
<div>This is a help box</div>
</section>To create a new window, you need to use the <section> tags to contain it, then that section needs an id and a div tag inside it at the bare minimum:
<!-- Minimum required to make a window -->
<section id="exampleWindow">
<div>Your text goes here!</div>
</section>
If the window does not have an id it will become a help window that attaches to the window above it in the HTML file. For example: the 'Welcome' window has an id and appears normally, but the next window in the file has no id. That window becomes a help window for the 'Welcome' window, which comes before it.
You can also add a title to it, which will appear in the header bar:
<!-- A window with a title -->
<section title="Example Window" id="exampleWindow">
<div>Your text goes here!</div>
</section>
To add an image as the window's icon you need to add it directly after the first <section> tag, like so:
<!-- A window with a custom image -->
<section title="Example Window" id="exampleWindow">
<img src="imgs/icon_help.png">
<div>Your text goes here!</div>
</section>
You can also add two types of classes to it: 'noStart' and 'noDesktop'. These control if your window will be visible in the start menu or on the desktop, by default they're both visible. For this example, the window is not visible on the start menu or desktop:
<!-- A window that's only openable by link -->
<section title="Example Window" id="exampleWindow" class="noStart noDesktop">
<img src="imgs/icon_help.png">
<div>Your text goes here!</div>
</section>
To see what that window looks like you'd need to use a link like this one
This link uses an onclick command called 'sc_OpenWindow' which opens a brand new window in the centre of the screen. You can also use 'sc_MinimiseToggle' which will open the window from the taskbar if it exists, or make a new window if it doesn't. Either way, you'll need to give it the id of the window you want to open. For example, the link before looks like this:
<a onclick="sc_OpenWindow('exampleWindow')">this one</a>
If you're not familiar with onclick or using functions then don't feel like you have to use them. The theme already adds your window links to the start menu and desktop for you (as long as you don't give it 'noStart' or 'noDesktop').
The tabs at the top of a window are inside of a <nav> element, and then are made by using <a> tags.
<!-- A window with tabs at the top -->
<section title="Example Window" id="exampleWindow">
<nav>
<a class="exampleTab">Example Tab</a>
</nav>
<div class="exampleTab">Your text goes here!</div>
</section>
Every tab needs a class that is the same as a div's class, in this example the class is 'exampleTab'. The first tab should also always have its connected div first. When a window opens it shows the first tab and the first div, then the other tabs can be in any order.
You can also change your tab links to go to a URL or listen for an event. When you add an 'onclick' or href element, do not add a class and it will automatically format it correctly.
The content of a window is kept in a <div> element that goes inside of the <section> element. Inside that <div> element you can put anything you want to display on your website, and it's minimally affected by the CSS file so you'll be able to customise any HTML you use.
