This guide is for writers who have never used HTML before. It explains how to create a simple web page from scratch, why each part is there, and what you should see when you open it.
index.html.style.css in the same folder as index.html.Why we do this:
index.html will hold your content. This is your page with headings, paragraphs, lists, images, and links.style.css will hold your design. This controls colours, fonts, spacing, and effects.How these text files become a web page:
Both files are plain text. The file endings tell your computer how to treat them.
index.html in a text editor, you see the code.index.html by double-clicking it, it opens in your browser and shows the web page version.style.css is loaded by the HTML page. You usually do not open it directly in the browser.How to open your page in your browser:
index.html in the folder where you saved it.file:///Users/YourName/Desktop/index.html
This means you are viewing the file directly from your computer. When you edit and save index.html or style.css, go back to the browser and press refresh (Ctrl + R or Command + R) to see the change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Name - CV</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="window">
<h1>Your Name</h1>
<p>Horror Writer / Screenwriter / Poet</p>
</div>
</body>
</html>
What this does:
This is the skeleton of your page. It tells the browser what kind of file this is and where the visible content lives.
<!DOCTYPE html> tells the browser this is a web page.<html> ... </html> wraps everything on the page.<head> ... </head> holds setup information, such as the title and the link to your CSS file.<meta charset="UTF-8"> makes sure characters display correctly.<title> sets the text in the browser tab.<link rel="stylesheet" href="style.css"> tells the page to load the styles from your CSS file.<body> ... </body> contains everything the visitor will see.Why we use HTML:
We use HTML to describe the content and structure of the page. It tells the browser what is a heading, what is a paragraph, what is a list, what is a link, and so on.
Live example:
Horror Writer / Screenwriter / Poet
body {
font-family: "MS Sans Serif", sans-serif; /* you can change the font */
background-color: #0a0a0a; /* page background colour */
color: #e0e0e0; /* text colour */
margin: 0;
padding: 20px;
font-size: 16px; /* you can change text size */
}
.window {
background: #1a1a1a; /* box background colour */
border: 2px solid #444;
padding: 20px;
box-shadow: 2px 2px 6px #000000;
}
a {
color: #990000; /* link colour */
text-decoration: none;
}
a:hover {
text-decoration: underline; /* when the mouse moves over the link */
}
What this does:
This CSS controls how things look. The body rules affect the whole page. The .window rules affect only elements with the class name "window". The a rules affect links.
font-family chooses the type of font.background-color sets the page background colour.color sets the text colour.font-size sets how big the text is..window styles the main content box.a styles links, and a:hover styles links when the mouse moves over them.Why we use CSS:
We use CSS to control the visual style of the page. It lets you change the look without touching the HTML content.
Live example:
This paragraph uses the font, colours, border, and shadow from the stylesheet. This is a link that underlines when you hover over it.
These are twenty colour codes you can use in your CSS.
#000000 Black<img src="portrait.jpg" alt="Author portrait" width="200">
What this does:
Shows an image on the page.
src is the file name or web address of the image.alt is a short description of the image.width sets the width in pixels.Important with Neocities:
If you write src="portrait.jpg", you must upload a file called portrait.jpg to Neocities, in the same folder as your HTML file. Otherwise the image will not appear.
Live example:
<a href="https://example.com">Read my story</a>
This makes a link. href holds the address. The text in the middle is what the visitor clicks.
Live example:
Read my story
<table border="1" cellpadding="6">
<tr>
<th>Title</th>
<th>Publication</th>
<th>Year</th>
</tr>
<tr>
<td>"Night Harvest"</td>
<td>Grimlit Quarterly</td>
<td>2024</td>
</tr>
<tr>
<td>"Bone Orchard"</td>
<td>Dark Corners</td>
<td>2025</td>
</tr>
</table>
Live example:
| Title | Publication | Year |
|---|---|---|
| "Night Harvest" | Grimlit Quarterly | 2024 |
| "Bone Orchard" | Dark Corners | 2025 |
.shadow {
text-shadow: 2px 2px 6px #ff0000;
}
This is shadowed text
.blink {
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
This text blinks on and off
.glitch {
position: relative;
color: #ffffff;
font-weight: bold;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
left: 0;
}
.glitch::before {
color: #ff0000;
animation: glitch 1s infinite;
}
.glitch::after {
color: #00ffff;
animation: glitch 1s infinite reverse;
}
@keyframes glitch {
0% { clip: rect(0, 900px, 0, 0); }
10% { clip: rect(10px, 900px, 50px, 0); transform: translate(-2px, -2px); }
20% { clip: rect(85px, 900px, 140px, 0); transform: translate(2px, 2px); }
30% { clip: rect(10px, 900px, 50px, 0); transform: translate(-1px, 0); }
40% { clip: rect(70px, 900px, 100px, 0); transform: translate(1px, 1px); }
50% { clip: rect(0, 900px, 80px, 0); transform: translate(0, -1px); }
60% { clip: rect(50px, 900px, 130px, 0); transform: translate(0, 2px); }
70% { clip: rect(20px, 900px, 90px, 0); transform: translate(1px, 0); }
80% { clip: rect(0, 900px, 100px, 0); transform: translate(-1px, 0); }
90% { clip: rect(0, 900px, 120px, 0); transform: translate(2px, -1px); }
100% { clip: rect(0, 900px, 0, 0); transform: translate(0, 0); }
}
GLITCHED TEXT
<div class="story-window">
<h1>Story Title</h1>
<div id="story-text">
He typed C: and pressed enter.
The prompt waited:
C:\>
He typed dir and watched the screen fill.
</div>
<div id="story-stats"></div>
</div>
<script>
function countWords(text) {
return text.trim().split(/\s+/).filter(Boolean).length;
}
function countChars(text) {
return text.replace(/\s/g, '').length;
}
function readTime(words) {
return Math.ceil(words / 200);
}
const story = document.getElementById('story-text').innerText;
const words = countWords(story);
const chars = countChars(story);
const minutes = readTime(words);
document.getElementById('story-stats').innerText =
words + " words | " + chars + " characters | " + minutes + " min read";
</script>
Hosting is where your files live so other people can see them on the web.
index.html and style.css.portrait.jpg. File names must match exactly.yourname.neocities.org.A domain is your own address, such as yourname.com.
You do not have to use every part of this guide at once. Start with the two files, get one heading and one sentence to show in your browser, and build from there. Add sections when you feel ready.
Below are three example templates showing different design styles. Feel free to use them. You can click any preview to view the full version on its own page, which also contains the copyable code. Each template’s fonts and colours can be customised, see the earlier section of this guide for instructions on changing colour codes and adding your own Google Fonts.
Learn more about fonts here: https://fonts.google.com/
Tip: You can freely swap the colours used in each template
by changing the background-color, border, and color
values in the CSS. For fonts, visit
Google Fonts,
copy a new <link> tag, and replace the font-family name in your stylesheet.
Advanced layouts with layered effects, responsive features, and custom CSS options. Designed for writers and artists comfortable editing HTML and CSS directly.