IT'S FREE REAL WEBSITE!

CODING: THE INDEX

Now that you have all your files uploaded to the right place, I'll show you which parts of the code you can edit to make your website more personal!
I recommend opening the live demo page somewhere, to have a visual idea of what you are modifying.
First, hover and click on the “EDIT” link of your index.html page.
This will lead you to the raw code page of index.html.
"Theme" will change the appearance of your code, not your web page. I'm using "tomorrow night 80s" in this tutorial if you want the same colors to follow along more easily!

Now, let's start changing and explaining things.

<title>MY AWESOME WEBSITE</title>
<meta name="description"
content="MY GALLERY">

<meta name="keywords"
content="art, drawings, MY CONTENT"> This is your website title. it will change the name displayed on the web browser tab! For exemple, this page title is "IT'S FREE REAL WEBSITE!"

These are keywords (separated by commas) you can put on your website so it can easily be found with search engines. I recommend using your alias/nickname/artist name as a keyword.

<style type="text/css">
body {
background-color: #f7dcf2;

background-image:url("LINK TO YOUR BACKGROUND IMAGE");

background-position: center;
background-repeat: repeat;
}
</style>
The background color of your website. This website will help you to get the HEX code for your chosen colors.

This is where you change your background image. (you can upload it here) If you just want a solid color and no background image, delete these lines (background-image, background-position, background-repeat).

"center" will center your background image, and "repeat" will repeat it, useful if you have a pattern background. If you want one single image covering the background, use
background-repeat: no-repeat;

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Varela Round', sans-serif;
font-size: 18px;
color: #b12957;
}
a:link {
color: #ff81cb;
text-decoration: underline;
font-weight: none;
}

a:visited {
color: #ff81cb;
text-decoration: underline;
font-weight: none;
}

a:hover {
color: #ffb5e0;
text-decoration: underline;
font-weight: none;
}

a:active {
color: #ff81cb;
text-decoration: underline;
font-weight: none;
}
.smallerfont {font-size: x-small}
</style>

This is where you change your page font. I used the "Verela" font from Google Fonts. You can choose whatever font you want here.* (more explanation on how to find and use a font below)
Font-size is how big you want your font to be.
And "color" is the color of your font. For example, on this page, it's purple!
Reminder you can get hex color codes here!

The a:link part determines how your links will look. On this page, the links are red and underlined. I recommend using a different color from the regular text.
In the "hover" part, you can make your links change color when you mouseover!
font-weight: none; can also be
font-weight: bold;
if you'd prefer the font in bold, same for italic, and so on.

*Help on how to use Google Fonts:
First go to the Google Fonts page. Choose a font that suits you.
Let's say for example you want "Young Serif", click on the font. Then click on "select regular 400". Then click on the top left of the page on the bag-looking icon "view selected families", it will show you the code for your font. Copy/paste that code and replace the original font code in your page (see above), and change the parts in "font-family" that are different in your font of choice, like the name of the font (or the serif, if it's sans serif or not) (if you don't know what the fuck serif and sans serif are, check this article!)

Now let's get back to the code...

<table width="0" border="0" align="center" bgcolor="#fbeaf8">
<tr>
<td><img src="URL OF YOUR IMAGE" alt="top banner" title="top banner" width="800" height="180"></td>
</tr>
<tr>
<td><table width="800" border="0" align="center" cellspacing="10">
<tr>
<td bgcolor="#FFFFFF"><div align="center">navigation > HOME | <a href="https://YOURWEBSITEHERE.neocities.org/gallery.html">GALLERY</a> | <a href="https://YOURWEBSITEHERE.neocities.org/about.html">ABOUT</a></div></td>
</tr>
The bgcolor here is the background color of the table where all your stuff will go. It's currently light pink.
In "URL OF YOUR IMAGE", put the url of your banner. It should be 180 in height and 800 in width (you can use a different size banner, but if you do, don't forget to change the width and height values in the code) as usual, I recommend uploading files here.

The last step on this part of your website would be to change the urls of your gallery and about page. Just change "YOURWEBSITEHERE" to however you named your website!

<td><div align="center">Hello, welcome to my weird little space!<br>
My name is [WHATEVER] and I draw [THE WORSE THINGS YOU COULD IMAGINE] <br>
Hope you enjoy my stuff!<br>
<br>
<img src="URL TO YOUR IMAGE" alt="home image presenting your website!" title="home image" width="500" height="500"><br>
Be warned! This page contains mature content! (Or not, it's your website!) <br>
<br>
<table width="0" border="0">
<tr>

</tr>
</table>
</div></td>
</tr>
<tr>
<td><div align="center">FRIENDS/FOES:<br>
<table width="0" border="0" bgcolor="#FFFFFF">
<tr>
<td width="231"> <marquee behavior="scroll" direction="left" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()">
<a href="https://jakechirak.com/" target="_blank"><img src="jakechirakbutton.gif" style="padding-bottom: 5px;"></a>
<a href="https://neocities.org/" target="_blank"><img src="neocities-vaporwave-stamp.png" style="padding-bottom: 5px;"></a>
<a href="https://jakechirak.com/howto/makeyourownwebsite/makeyourownhome.html" target="_blank"><img src="makeyourownwebsitebanner.gif" style="padding-bottom: 5px;"></a></marquee></td>
</tr>
</table>
</div></td>

Okay this part is more fun! Between <div align="center"> and <img src= just write a little description of your website. You don't have to align to center as <div align="center"> says, you can also align to left or right. Test around. Add <br> to create a line break.

Like I said before, "URL TO YOUR IMAGE" should lead to the url to your image. Be wary of the size of the image (500x500, it can be changed like any image here.)

I added a warning for mature content, but obviously you don't have to keep it. Same goes for the images, you can put one image, two images, or no images at all.

The FRIEND/FOES part is where I put links to other websites, you can put stamps or funny gifs, or just remove it if you want!
bgcolor="#FFFFFF" is the background color for this section. If you want to add another banner after the other ones, just copy this part of the code and replace the parts in ALL CAPS:
<a href="YOUR LINK " target="_blank"><img src="THE LINK TO YOUR BANNER" style="padding-bottom: 5px;"></a>

You'll notice something called target="_blank" in some links. It means your link will be opened in a new tab. If you don't want this to happen, you can set it to target="_self"

<td><div align="center"><span class="smallerfont">All art on this website is © Copyright [YOUR NAME], 2023. Website design made by <a href="https://jakechirak.com/" target="_blank">Jake Chirak</a>.</span></div></td>
</tr>
</table></td>
</tr>
</table>

<p align="center"><a href="#top">Back to top</a>
</body>
</html>
This is the very bottom of your page, where I added a little link to my website (after all, I helped you?) You can change the sentence if you prefer (and you should replace [YOUR NAME] by your own, but keeping a link to my website is appreciated!)

Keep the "back to top" link, it's very useful when a page is very long. You can change the sentence but don't break the link.

I'm skipping the parts of the code I don't think you have to touch. You're of course allowed to experiment (that's why saving multiple files in Notepad for testing is useful!) but the parts I skipped are either just coding that would take too long to explain, or things that aren't worth changing (it would be too much pain... for you!)

DON'T FORGET TO SAVE YOUR PROGRESS! The "save" button is on the top left of the page. Alt + control + S works as well.

Be mindful that everything you save from the neocities raw code page will go online! If you want to finish everything before going live, save it in Notepad instead and only use the neocities page to have the pretty code colors that make your life easier!

START CODING:
NEXT : the GALLERY page
the LIGHTBOX options
the ABOUT page
TIPS