or 
, depending on if the image is stored on your website or elsewhere. Unlike the previous tag, this one does not need a ender.
- , , , , and are all header tags that need to be ended with their respective . is the largest, and is the smallest.
There's a lot more, of course! But I think these're the most immediately important. They're also referred to as elements.
--- BASIC WEBSITE STRUCTURE ---
My Website
The content of the website goes here.
If you're hosting with Neocities, your homepage will start with this or some variety of this boilerplate code. Knowing what all of these is isn't necessary (w3 has a reference library if you're curious: https://www.w3schools.com/tags/default.asp). Most of what we're going to be doing is going to be concentrated in the section.
If you're not hosting on Neocities: copy and paste the above, if you'd like (or crack open the layouts from the beginning of this guide) and save it to a .html file. Both vanilla notepad and notepad++ will let you save .html files. Call this one 'index.html'- when you upload this to your website, this is the page that shows up first.
Your files/sitemap will probably end up looking something like this. Make liberal use of folders to keep things organized!
--- FOR PORTFOLIOS ---
If you're looking to just get a website up to put art on ASAP, you could build something along the lines of the following:
YOUR NAME HERE
MORE INFO HERE
Lorem ipsum dolor sit amet...
A decent place to start, but not very aesthetically pleasing. Let's pretty this up a bit! In the tags, add a tag- this will allow you to use CSS without linking an external file:
A quick digression: If you want to do anything more complex than this or plan to have multiple pages, I highly recommend making a separate CSS file instead of using style tags:
My Website
Change 'simple.css' to whatever you want to name your file. Don't forget to put a folder name before it if you're not keeping it in the main directory (ex. "css/simple.css").
BODY refers to anything in the tags, H1 refers to anything in the tags, and so on.
BODY has been edited by changing the text color to white (color:#fff), the background color to a grey (background-color: #1f1f1f;), and by adding a margin on each side so the contents aren't flush with the browser page edge. h1 has been given the same treatment, with padding instead of margin (margin controls the space outside, padding controls the space inside), and by changing the background of the space h1 is in to white.
img is referring to any image tag. I prefer setting width in percentages as opposed to px (more mobile friendly), so setting max-width: 30% will resize to display the image in 30% of the div it's contained in or 30% of the entire page. (Note: use max-width as opposed to width when possible on items larger than 300px, as it's more mobile friendly.)
Each image can also be made into a link:
Each image now also has an alt tag and a title tag. An alt tag is text that will display if the image doesn't load or if the user is using a screenreader (more info on that later in the guide). A title tag is text that will show up if the user hovers over the image.
(Note: is technically a deprecated tag in HTML5. CSS options like text-align: center exist as a modern replacement, but that's outside the scope of this guide. still works just fine.)
Currently the link is just to the image itself at full size- you can leave this as is, or create an individual page for each image. This way you can also provide more information and necessary context for each piece. You can also use a cropped or censored version of this image as the thumbnail, and have the uncensored version on this page.
(If you're looking to create a fancy image popup: I can't teach you that, but w3 can: https://www.w3schools.com/howto/howto_js_lightbox.asp)
--- FOR WEBCOMICS ---
You can also add links to navigate through portions of your gallery without backing out to the main page, or very easily set up a webcomic layout:
For ongoing updates to a webcomic you could:
1) Make the most recent comic on home.html into its own page (ex. the image on home.html is moved to 004.html)
2) Update the NEXT link on 003.html to link to 004.html
3) Change the image on home.html from 004.png to 005.png
4) OPTIONAL: Update your RSS feed!
(There are ways to do this automatically as well, but that's something out of my scope of knowledge unfortunately.)
--- MAKING YOUR SITE INTO A HUB ---
Most artists aren't going to have their webpage as their only home online. There's also shops, subscription sites, and more that we want to direct someone towards. I've found that a top or bottom menu or row is the easiest way to link things while staying out of the way of the art and continuing to be mobile friendly.
HTML for a navbar:
CSS for a navbar:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
========================================
ON BEING MOBILE FRIENDLY
========================================
Always test your website on your phone- if you don't have a smart phone or are testing things locally, I recommend using Firefox's Inspect (right click -> inspect) and opening Responsive Design Mode (the two nested phones in the right corner, next to the meatball menu). This will let you preview any webpage in any phone formatting. Super useful!
I didn't go into CSS media queries in this guide since the focus is on getting a site up and running quickly, but if you customize your site more: look into using them for more complex elements such as collapsing your navbar on mobile.
========================================
ON ACCESSIBILITY
========================================
While vision accessibility may seem like an afterthought for a website that is primarily images, it really shouldn't be. Many low-vision visitors or those with sensory processing disorders depend on screenreaders and alt text while using the internet. It takes 30 seconds to make someone's internet experience much more enjoyable! An example: I am not vision impaired outside of needing mild corrective lenses, but I do get migraines that are irritated by bright light, particularly computer and phone screens. I use a screenreader when I need to work but migraines prevent me from seeing.
ALT TEXT, mentioned earlier, is the most important thing you can do. It's the text that appears when an image can't be displayed or is being parsed by assistive technology. Bad alt text: "image1.png". Good alt text: "a black and white ink drawing of a satyr with fat tits". Describe what's actually in the image- you don't need to write an essay, but be specific enough that someone who can't see it gets the gist. For decorative images that don't convey any information, an empty alt tag (alt="") is fine and tells screenreaders to skip it.
Other tips:
- Use actual header tags (, , etc.) in order and don't skip levels- screenreaders use these to navigate a page.
- Don't use color alone to convey information (ex. "click the red link")- colorblindness means this info is unhelpful.
- Make sure your text has enough contrast against your background. Dark grey on black is hard to read for everyone, not just low-vision users. WebAIM's contrast checker is a free tool for this: https://webaim.org/resources/contrastchecker/
- Avoid flashing or rapidly cycling animations if you can- these can trigger seizures in people with photosensitive epilepsy. I also love a good retro website aesthetic, but it's important to keep this in mind when deciding how many dancing babies to put on a page.
If you want to check how your site holds up overall, WAVE will audit any public URL for free and tell you exactly what to fix: https://wave.webaim.org/
========================================
BASIC SECURITY AND PERFORMANCE
========================================
Your host should offer free HTTPS/SSL- enable it. This service encrypts traffic between your site and visitors and is now expected by modern browsers. If your host doesn't offer it, most support free certificates through Let's Encrypt: https://letsencrypt.org/
For images: compress them before uploading. Large uncompressed files will slow your site down noticeably. Squoosh (https://squoosh.app) is a free, easy tool for this if you aren't doing it in your image creation program of choice. Your website doesn't need 300dpi images! 72dpi is fine.
========================================
FAQ
========================================
Q. I have 1,000+ images to upload and don't want to use something like Wordpress- is there a quicker way of doing this?
A. OLD INFO: Not really- you could bulk rename files (Windows guide: https://www.windowscentral.com/how-rename-multiple-files-bulk-windows-10, Mac guide: https://support.apple.com/guide/mac-help/rename-files-folders-and-disks-on-mac-mchlp1144/mac) if you don't have a consistent naming method and then copy and paste layout text over and over while changing one or two numbers. It may also just be easier to link a .zip of images grouped by subject or date.
NEW FOR 2026: There's a tool for this now that I've been using with great success! Bulk Rename Utility (https://www.bulkrenameutility.co.uk/) has been my good buddy in the Windows department for this. I also have been told that it works well in Wine as well, for the Linux people. There's also a list of free GUI ones here: https://www.linuxlinks.com/best-free-open-source-gui-batch-renamers/
Sorry Mac people, I don't know of any good alternatives outside of the guide previously linked. :(
Q. Can I independently host an online shop this way?
A. Potentially, yes, if you have a payment processor lined up and a lot of time to dedicate to this.
Q. Can I independently host a paysite this way?
A. Absolutely, but see above.
========================================
ADDITIONAL RESOURCES FOR FUNSIES
========================================
--- LAYOUTS ---
- https://john-doe.neocities.org/ <- This is the one I use for my own portfolio website!
- https://rarebit.neocities.org/ (intermediate level- you need to be comfortable with code to use this webcomic template)
- https://github.com/codercowboy/mincomixsite (easier than the above)
- https://scottandrew.com/responsive-web-comic-layout/ (probably even easier than the one above)
- https://ribo.zone/free/layouts/ (free layouts)
- https://codepen.io/sadness97/full/XJbLxNj
--- GENERAL WEBMASTER RESOURCES ---
- Sadgrl.online: https://sadgrl.online/webmastery/ (lots of resources, some premade layouts and layout generators, more fun stuff)
- W3Schools: https://www.w3schools.com/ (purely educational- recommend going through every lesson from beginning to end if you want to get serious about this)
- MDN: https://developer.mozilla.org/en-US/ (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
- Adding an RSS feed to your website: https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e
- An extensive guide to robots.txt: https://yoast.com/ultimate-guide-robots-txt/ (if you want to keep search engines from indexing parts of your website)
--- AI SCRAPER DEFENSES ---
- A guide from Krad on keeping AI scrapers off your site: https://kradeelav.dreamwidth.org/202168.html
- Spawning (opt out of AI training datasets): https://spawning.ai
- Dark Visitors (maintain a robots.txt against AI crawlers): https://darkvisitors.com
--- ACCESSIBILITY ---
- An extensive guide to making your website fully accessible: https://theultimatemotherfuckingwebsite.com/
- WAVE accessibility evaluator: https://wave.webaim.org/
- Crash Override Network: http://www.crashoverridenetwork.com/resources.html
--- WEBRING SOFTWARE ---
- http://www.demon-sushi.com/ring/ <- My software of choice- I use this for webring.gay and comicfair.online.
- https://allium.house/garden/onionring/
- https://petrapixel.neocities.org/coding/webringu
- https://mxb.dev/blog/webring-kit/
- https://github.com/k3rs3d/ringfairy
- https://blog.itsnero.com/archives/1545 <- I made this one! This is what Adult Artists Webring (https://www.adultartistswebring.org/) uses.
--- WEBRINGS I LIKE ---
- https://qtbeans.neocities.org/artistsonline (webringu)
- https://webring.gay (rainring)
- https://comicfair.online/ (rainring)
- https://adultartistswebring.org (manual)
- https://transmascring.netlify.app/
- https://hotlinewebring.club/
- https://fujofans.scumsuck.com/
- https://webring.xxiivv.com/
- https://github.com/GusBusDraws/smallweb-subway.js?tab=readme-ov-file#instructions-to-join
- https://smoothsailing.asclaria.org/
- https://darktheme.club/
- https://512kb.club/
- https://250kb.club/
- https://1mb.club/
- https://no-js.club/
- https://webring.dinhe.net/
--- BANNER EXCHANGE SOFTWARE ---
- https://www.phpwebscripts.com/free-scripts/easy_banner.html
--- WEBRING ADJACENT ---
- https://ribo.zone/neighborhood
- https://octothorp.es/
- https://webchain.milkmedicine.net/
- https://nightfall.city/
, , and are all header tags that need to be ended with their respective . is the largest, and is the smallest.
There's a lot more, of course! But I think these're the most immediately important. They're also referred to as elements.
--- BASIC WEBSITE STRUCTURE ---
My Website
The content of the website goes here.
If you're hosting with Neocities, your homepage will start with this or some variety of this boilerplate code. Knowing what all of these is isn't necessary (w3 has a reference library if you're curious: https://www.w3schools.com/tags/default.asp). Most of what we're going to be doing is going to be concentrated in the section.
If you're not hosting on Neocities: copy and paste the above, if you'd like (or crack open the layouts from the beginning of this guide) and save it to a .html file. Both vanilla notepad and notepad++ will let you save .html files. Call this one 'index.html'- when you upload this to your website, this is the page that shows up first.
Your files/sitemap will probably end up looking something like this. Make liberal use of folders to keep things organized!
--- FOR PORTFOLIOS ---
If you're looking to just get a website up to put art on ASAP, you could build something along the lines of the following:
YOUR NAME HERE
MORE INFO HERE
Lorem ipsum dolor sit amet...
A decent place to start, but not very aesthetically pleasing. Let's pretty this up a bit! In the tags, add a tag- this will allow you to use CSS without linking an external file:
A quick digression: If you want to do anything more complex than this or plan to have multiple pages, I highly recommend making a separate CSS file instead of using style tags:
My Website
Change 'simple.css' to whatever you want to name your file. Don't forget to put a folder name before it if you're not keeping it in the main directory (ex. "css/simple.css").
BODY refers to anything in the tags, H1 refers to anything in the tags, and so on.
BODY has been edited by changing the text color to white (color:#fff), the background color to a grey (background-color: #1f1f1f;), and by adding a margin on each side so the contents aren't flush with the browser page edge. h1 has been given the same treatment, with padding instead of margin (margin controls the space outside, padding controls the space inside), and by changing the background of the space h1 is in to white.
img is referring to any image tag. I prefer setting width in percentages as opposed to px (more mobile friendly), so setting max-width: 30% will resize to display the image in 30% of the div it's contained in or 30% of the entire page. (Note: use max-width as opposed to width when possible on items larger than 300px, as it's more mobile friendly.)
Each image can also be made into a link:
Each image now also has an alt tag and a title tag. An alt tag is text that will display if the image doesn't load or if the user is using a screenreader (more info on that later in the guide). A title tag is text that will show up if the user hovers over the image.
(Note: is technically a deprecated tag in HTML5. CSS options like text-align: center exist as a modern replacement, but that's outside the scope of this guide. still works just fine.)
Currently the link is just to the image itself at full size- you can leave this as is, or create an individual page for each image. This way you can also provide more information and necessary context for each piece. You can also use a cropped or censored version of this image as the thumbnail, and have the uncensored version on this page.
(If you're looking to create a fancy image popup: I can't teach you that, but w3 can: https://www.w3schools.com/howto/howto_js_lightbox.asp)
--- FOR WEBCOMICS ---
You can also add links to navigate through portions of your gallery without backing out to the main page, or very easily set up a webcomic layout:
For ongoing updates to a webcomic you could:
1) Make the most recent comic on home.html into its own page (ex. the image on home.html is moved to 004.html)
2) Update the NEXT link on 003.html to link to 004.html
3) Change the image on home.html from 004.png to 005.png
4) OPTIONAL: Update your RSS feed!
(There are ways to do this automatically as well, but that's something out of my scope of knowledge unfortunately.)
--- MAKING YOUR SITE INTO A HUB ---
Most artists aren't going to have their webpage as their only home online. There's also shops, subscription sites, and more that we want to direct someone towards. I've found that a top or bottom menu or row is the easiest way to link things while staying out of the way of the art and continuing to be mobile friendly.
HTML for a navbar:
CSS for a navbar:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
========================================
ON BEING MOBILE FRIENDLY
========================================
Always test your website on your phone- if you don't have a smart phone or are testing things locally, I recommend using Firefox's Inspect (right click -> inspect) and opening Responsive Design Mode (the two nested phones in the right corner, next to the meatball menu). This will let you preview any webpage in any phone formatting. Super useful!
I didn't go into CSS media queries in this guide since the focus is on getting a site up and running quickly, but if you customize your site more: look into using them for more complex elements such as collapsing your navbar on mobile.
========================================
ON ACCESSIBILITY
========================================
While vision accessibility may seem like an afterthought for a website that is primarily images, it really shouldn't be. Many low-vision visitors or those with sensory processing disorders depend on screenreaders and alt text while using the internet. It takes 30 seconds to make someone's internet experience much more enjoyable! An example: I am not vision impaired outside of needing mild corrective lenses, but I do get migraines that are irritated by bright light, particularly computer and phone screens. I use a screenreader when I need to work but migraines prevent me from seeing.
ALT TEXT, mentioned earlier, is the most important thing you can do. It's the text that appears when an image can't be displayed or is being parsed by assistive technology. Bad alt text: "image1.png". Good alt text: "a black and white ink drawing of a satyr with fat tits". Describe what's actually in the image- you don't need to write an essay, but be specific enough that someone who can't see it gets the gist. For decorative images that don't convey any information, an empty alt tag (alt="") is fine and tells screenreaders to skip it.
Other tips:
- Use actual header tags (, , etc.) in order and don't skip levels- screenreaders use these to navigate a page.
- Don't use color alone to convey information (ex. "click the red link")- colorblindness means this info is unhelpful.
- Make sure your text has enough contrast against your background. Dark grey on black is hard to read for everyone, not just low-vision users. WebAIM's contrast checker is a free tool for this: https://webaim.org/resources/contrastchecker/
- Avoid flashing or rapidly cycling animations if you can- these can trigger seizures in people with photosensitive epilepsy. I also love a good retro website aesthetic, but it's important to keep this in mind when deciding how many dancing babies to put on a page.
If you want to check how your site holds up overall, WAVE will audit any public URL for free and tell you exactly what to fix: https://wave.webaim.org/
========================================
BASIC SECURITY AND PERFORMANCE
========================================
Your host should offer free HTTPS/SSL- enable it. This service encrypts traffic between your site and visitors and is now expected by modern browsers. If your host doesn't offer it, most support free certificates through Let's Encrypt: https://letsencrypt.org/
For images: compress them before uploading. Large uncompressed files will slow your site down noticeably. Squoosh (https://squoosh.app) is a free, easy tool for this if you aren't doing it in your image creation program of choice. Your website doesn't need 300dpi images! 72dpi is fine.
========================================
FAQ
========================================
Q. I have 1,000+ images to upload and don't want to use something like Wordpress- is there a quicker way of doing this?
A. OLD INFO: Not really- you could bulk rename files (Windows guide: https://www.windowscentral.com/how-rename-multiple-files-bulk-windows-10, Mac guide: https://support.apple.com/guide/mac-help/rename-files-folders-and-disks-on-mac-mchlp1144/mac) if you don't have a consistent naming method and then copy and paste layout text over and over while changing one or two numbers. It may also just be easier to link a .zip of images grouped by subject or date.
NEW FOR 2026: There's a tool for this now that I've been using with great success! Bulk Rename Utility (https://www.bulkrenameutility.co.uk/) has been my good buddy in the Windows department for this. I also have been told that it works well in Wine as well, for the Linux people. There's also a list of free GUI ones here: https://www.linuxlinks.com/best-free-open-source-gui-batch-renamers/
Sorry Mac people, I don't know of any good alternatives outside of the guide previously linked. :(
Q. Can I independently host an online shop this way?
A. Potentially, yes, if you have a payment processor lined up and a lot of time to dedicate to this.
Q. Can I independently host a paysite this way?
A. Absolutely, but see above.
========================================
ADDITIONAL RESOURCES FOR FUNSIES
========================================
--- LAYOUTS ---
- https://john-doe.neocities.org/ <- This is the one I use for my own portfolio website!
- https://rarebit.neocities.org/ (intermediate level- you need to be comfortable with code to use this webcomic template)
- https://github.com/codercowboy/mincomixsite (easier than the above)
- https://scottandrew.com/responsive-web-comic-layout/ (probably even easier than the one above)
- https://ribo.zone/free/layouts/ (free layouts)
- https://codepen.io/sadness97/full/XJbLxNj
--- GENERAL WEBMASTER RESOURCES ---
- Sadgrl.online: https://sadgrl.online/webmastery/ (lots of resources, some premade layouts and layout generators, more fun stuff)
- W3Schools: https://www.w3schools.com/ (purely educational- recommend going through every lesson from beginning to end if you want to get serious about this)
- MDN: https://developer.mozilla.org/en-US/ (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
- Adding an RSS feed to your website: https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e
- An extensive guide to robots.txt: https://yoast.com/ultimate-guide-robots-txt/ (if you want to keep search engines from indexing parts of your website)
--- AI SCRAPER DEFENSES ---
- A guide from Krad on keeping AI scrapers off your site: https://kradeelav.dreamwidth.org/202168.html
- Spawning (opt out of AI training datasets): https://spawning.ai
- Dark Visitors (maintain a robots.txt against AI crawlers): https://darkvisitors.com
--- ACCESSIBILITY ---
- An extensive guide to making your website fully accessible: https://theultimatemotherfuckingwebsite.com/
- WAVE accessibility evaluator: https://wave.webaim.org/
- Crash Override Network: http://www.crashoverridenetwork.com/resources.html
--- WEBRING SOFTWARE ---
- http://www.demon-sushi.com/ring/ <- My software of choice- I use this for webring.gay and comicfair.online.
- https://allium.house/garden/onionring/
- https://petrapixel.neocities.org/coding/webringu
- https://mxb.dev/blog/webring-kit/
- https://github.com/k3rs3d/ringfairy
- https://blog.itsnero.com/archives/1545 <- I made this one! This is what Adult Artists Webring (https://www.adultartistswebring.org/) uses.
--- WEBRINGS I LIKE ---
- https://qtbeans.neocities.org/artistsonline (webringu)
- https://webring.gay (rainring)
- https://comicfair.online/ (rainring)
- https://adultartistswebring.org (manual)
- https://transmascring.netlify.app/
- https://hotlinewebring.club/
- https://fujofans.scumsuck.com/
- https://webring.xxiivv.com/
- https://github.com/GusBusDraws/smallweb-subway.js?tab=readme-ov-file#instructions-to-join
- https://smoothsailing.asclaria.org/
- https://darktheme.club/
- https://512kb.club/
- https://250kb.club/
- https://1mb.club/
- https://no-js.club/
- https://webring.dinhe.net/
--- BANNER EXCHANGE SOFTWARE ---
- https://www.phpwebscripts.com/free-scripts/easy_banner.html
--- WEBRING ADJACENT ---
- https://ribo.zone/neighborhood
- https://octothorp.es/
- https://webchain.milkmedicine.net/
- https://nightfall.city/
are all header tags that need to be ended with their respective . is the largest, and is the smallest.
There's a lot more, of course! But I think these're the most immediately important. They're also referred to as elements.
--- BASIC WEBSITE STRUCTURE ---
My Website
The content of the website goes here.
If you're hosting with Neocities, your homepage will start with this or some variety of this boilerplate code. Knowing what all of these is isn't necessary (w3 has a reference library if you're curious: https://www.w3schools.com/tags/default.asp). Most of what we're going to be doing is going to be concentrated in the section.
If you're not hosting on Neocities: copy and paste the above, if you'd like (or crack open the layouts from the beginning of this guide) and save it to a .html file. Both vanilla notepad and notepad++ will let you save .html files. Call this one 'index.html'- when you upload this to your website, this is the page that shows up first.
Your files/sitemap will probably end up looking something like this. Make liberal use of folders to keep things organized!
--- FOR PORTFOLIOS ---
If you're looking to just get a website up to put art on ASAP, you could build something along the lines of the following:
YOUR NAME HERE
MORE INFO HERE
Lorem ipsum dolor sit amet...
A decent place to start, but not very aesthetically pleasing. Let's pretty this up a bit! In the tags, add a tag- this will allow you to use CSS without linking an external file:
A quick digression: If you want to do anything more complex than this or plan to have multiple pages, I highly recommend making a separate CSS file instead of using style tags:
My Website
Change 'simple.css' to whatever you want to name your file. Don't forget to put a folder name before it if you're not keeping it in the main directory (ex. "css/simple.css").
BODY refers to anything in the tags, H1 refers to anything in the tags, and so on.
BODY has been edited by changing the text color to white (color:#fff), the background color to a grey (background-color: #1f1f1f;), and by adding a margin on each side so the contents aren't flush with the browser page edge. h1 has been given the same treatment, with padding instead of margin (margin controls the space outside, padding controls the space inside), and by changing the background of the space h1 is in to white.
img is referring to any image tag. I prefer setting width in percentages as opposed to px (more mobile friendly), so setting max-width: 30% will resize to display the image in 30% of the div it's contained in or 30% of the entire page. (Note: use max-width as opposed to width when possible on items larger than 300px, as it's more mobile friendly.)
Each image can also be made into a link:
Each image now also has an alt tag and a title tag. An alt tag is text that will display if the image doesn't load or if the user is using a screenreader (more info on that later in the guide). A title tag is text that will show up if the user hovers over the image.
(Note: is technically a deprecated tag in HTML5. CSS options like text-align: center exist as a modern replacement, but that's outside the scope of this guide. still works just fine.)
Currently the link is just to the image itself at full size- you can leave this as is, or create an individual page for each image. This way you can also provide more information and necessary context for each piece. You can also use a cropped or censored version of this image as the thumbnail, and have the uncensored version on this page.
(If you're looking to create a fancy image popup: I can't teach you that, but w3 can: https://www.w3schools.com/howto/howto_js_lightbox.asp)
--- FOR WEBCOMICS ---
You can also add links to navigate through portions of your gallery without backing out to the main page, or very easily set up a webcomic layout:
For ongoing updates to a webcomic you could:
1) Make the most recent comic on home.html into its own page (ex. the image on home.html is moved to 004.html)
2) Update the NEXT link on 003.html to link to 004.html
3) Change the image on home.html from 004.png to 005.png
4) OPTIONAL: Update your RSS feed!
(There are ways to do this automatically as well, but that's something out of my scope of knowledge unfortunately.)
--- MAKING YOUR SITE INTO A HUB ---
Most artists aren't going to have their webpage as their only home online. There's also shops, subscription sites, and more that we want to direct someone towards. I've found that a top or bottom menu or row is the easiest way to link things while staying out of the way of the art and continuing to be mobile friendly.
HTML for a navbar:
CSS for a navbar:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
========================================
ON BEING MOBILE FRIENDLY
========================================
Always test your website on your phone- if you don't have a smart phone or are testing things locally, I recommend using Firefox's Inspect (right click -> inspect) and opening Responsive Design Mode (the two nested phones in the right corner, next to the meatball menu). This will let you preview any webpage in any phone formatting. Super useful!
I didn't go into CSS media queries in this guide since the focus is on getting a site up and running quickly, but if you customize your site more: look into using them for more complex elements such as collapsing your navbar on mobile.
========================================
ON ACCESSIBILITY
========================================
While vision accessibility may seem like an afterthought for a website that is primarily images, it really shouldn't be. Many low-vision visitors or those with sensory processing disorders depend on screenreaders and alt text while using the internet. It takes 30 seconds to make someone's internet experience much more enjoyable! An example: I am not vision impaired outside of needing mild corrective lenses, but I do get migraines that are irritated by bright light, particularly computer and phone screens. I use a screenreader when I need to work but migraines prevent me from seeing.
ALT TEXT, mentioned earlier, is the most important thing you can do. It's the text that appears when an image can't be displayed or is being parsed by assistive technology. Bad alt text: "image1.png". Good alt text: "a black and white ink drawing of a satyr with fat tits". Describe what's actually in the image- you don't need to write an essay, but be specific enough that someone who can't see it gets the gist. For decorative images that don't convey any information, an empty alt tag (alt="") is fine and tells screenreaders to skip it.
Other tips:
- Use actual header tags (, , etc.) in order and don't skip levels- screenreaders use these to navigate a page.
- Don't use color alone to convey information (ex. "click the red link")- colorblindness means this info is unhelpful.
- Make sure your text has enough contrast against your background. Dark grey on black is hard to read for everyone, not just low-vision users. WebAIM's contrast checker is a free tool for this: https://webaim.org/resources/contrastchecker/
- Avoid flashing or rapidly cycling animations if you can- these can trigger seizures in people with photosensitive epilepsy. I also love a good retro website aesthetic, but it's important to keep this in mind when deciding how many dancing babies to put on a page.
If you want to check how your site holds up overall, WAVE will audit any public URL for free and tell you exactly what to fix: https://wave.webaim.org/
========================================
BASIC SECURITY AND PERFORMANCE
========================================
Your host should offer free HTTPS/SSL- enable it. This service encrypts traffic between your site and visitors and is now expected by modern browsers. If your host doesn't offer it, most support free certificates through Let's Encrypt: https://letsencrypt.org/
For images: compress them before uploading. Large uncompressed files will slow your site down noticeably. Squoosh (https://squoosh.app) is a free, easy tool for this if you aren't doing it in your image creation program of choice. Your website doesn't need 300dpi images! 72dpi is fine.
========================================
FAQ
========================================
Q. I have 1,000+ images to upload and don't want to use something like Wordpress- is there a quicker way of doing this?
A. OLD INFO: Not really- you could bulk rename files (Windows guide: https://www.windowscentral.com/how-rename-multiple-files-bulk-windows-10, Mac guide: https://support.apple.com/guide/mac-help/rename-files-folders-and-disks-on-mac-mchlp1144/mac) if you don't have a consistent naming method and then copy and paste layout text over and over while changing one or two numbers. It may also just be easier to link a .zip of images grouped by subject or date.
NEW FOR 2026: There's a tool for this now that I've been using with great success! Bulk Rename Utility (https://www.bulkrenameutility.co.uk/) has been my good buddy in the Windows department for this. I also have been told that it works well in Wine as well, for the Linux people. There's also a list of free GUI ones here: https://www.linuxlinks.com/best-free-open-source-gui-batch-renamers/
Sorry Mac people, I don't know of any good alternatives outside of the guide previously linked. :(
Q. Can I independently host an online shop this way?
A. Potentially, yes, if you have a payment processor lined up and a lot of time to dedicate to this.
Q. Can I independently host a paysite this way?
A. Absolutely, but see above.
========================================
ADDITIONAL RESOURCES FOR FUNSIES
========================================
--- LAYOUTS ---
- https://john-doe.neocities.org/ <- This is the one I use for my own portfolio website!
- https://rarebit.neocities.org/ (intermediate level- you need to be comfortable with code to use this webcomic template)
- https://github.com/codercowboy/mincomixsite (easier than the above)
- https://scottandrew.com/responsive-web-comic-layout/ (probably even easier than the one above)
- https://ribo.zone/free/layouts/ (free layouts)
- https://codepen.io/sadness97/full/XJbLxNj
--- GENERAL WEBMASTER RESOURCES ---
- Sadgrl.online: https://sadgrl.online/webmastery/ (lots of resources, some premade layouts and layout generators, more fun stuff)
- W3Schools: https://www.w3schools.com/ (purely educational- recommend going through every lesson from beginning to end if you want to get serious about this)
- MDN: https://developer.mozilla.org/en-US/ (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
- Adding an RSS feed to your website: https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e
- An extensive guide to robots.txt: https://yoast.com/ultimate-guide-robots-txt/ (if you want to keep search engines from indexing parts of your website)
--- AI SCRAPER DEFENSES ---
- A guide from Krad on keeping AI scrapers off your site: https://kradeelav.dreamwidth.org/202168.html
- Spawning (opt out of AI training datasets): https://spawning.ai
- Dark Visitors (maintain a robots.txt against AI crawlers): https://darkvisitors.com
--- ACCESSIBILITY ---
- An extensive guide to making your website fully accessible: https://theultimatemotherfuckingwebsite.com/
- WAVE accessibility evaluator: https://wave.webaim.org/
- Crash Override Network: http://www.crashoverridenetwork.com/resources.html
--- WEBRING SOFTWARE ---
- http://www.demon-sushi.com/ring/ <- My software of choice- I use this for webring.gay and comicfair.online.
- https://allium.house/garden/onionring/
- https://petrapixel.neocities.org/coding/webringu
- https://mxb.dev/blog/webring-kit/
- https://github.com/k3rs3d/ringfairy
- https://blog.itsnero.com/archives/1545 <- I made this one! This is what Adult Artists Webring (https://www.adultartistswebring.org/) uses.
--- WEBRINGS I LIKE ---
- https://qtbeans.neocities.org/artistsonline (webringu)
- https://webring.gay (rainring)
- https://comicfair.online/ (rainring)
- https://adultartistswebring.org (manual)
- https://transmascring.netlify.app/
- https://hotlinewebring.club/
- https://fujofans.scumsuck.com/
- https://webring.xxiivv.com/
- https://github.com/GusBusDraws/smallweb-subway.js?tab=readme-ov-file#instructions-to-join
- https://smoothsailing.asclaria.org/
- https://darktheme.club/
- https://512kb.club/
- https://250kb.club/
- https://1mb.club/
- https://no-js.club/
- https://webring.dinhe.net/
--- BANNER EXCHANGE SOFTWARE ---
- https://www.phpwebscripts.com/free-scripts/easy_banner.html
--- WEBRING ADJACENT ---
- https://ribo.zone/neighborhood
- https://octothorp.es/
- https://webchain.milkmedicine.net/
- https://nightfall.city/
is the smallest.
There's a lot more, of course! But I think these're the most immediately important. They're also referred to as elements.
--- BASIC WEBSITE STRUCTURE ---
My Website
The content of the website goes here.
If you're hosting with Neocities, your homepage will start with this or some variety of this boilerplate code. Knowing what all of these is isn't necessary (w3 has a reference library if you're curious: https://www.w3schools.com/tags/default.asp). Most of what we're going to be doing is going to be concentrated in the section.
If you're not hosting on Neocities: copy and paste the above, if you'd like (or crack open the layouts from the beginning of this guide) and save it to a .html file. Both vanilla notepad and notepad++ will let you save .html files. Call this one 'index.html'- when you upload this to your website, this is the page that shows up first.
Your files/sitemap will probably end up looking something like this. Make liberal use of folders to keep things organized!
--- FOR PORTFOLIOS ---
If you're looking to just get a website up to put art on ASAP, you could build something along the lines of the following:
YOUR NAME HERE
MORE INFO HERE
Lorem ipsum dolor sit amet...
A decent place to start, but not very aesthetically pleasing. Let's pretty this up a bit! In the tags, add a tag- this will allow you to use CSS without linking an external file:
A quick digression: If you want to do anything more complex than this or plan to have multiple pages, I highly recommend making a separate CSS file instead of using style tags:
My Website
Change 'simple.css' to whatever you want to name your file. Don't forget to put a folder name before it if you're not keeping it in the main directory (ex. "css/simple.css").
BODY refers to anything in the tags, H1 refers to anything in the tags, and so on.
BODY has been edited by changing the text color to white (color:#fff), the background color to a grey (background-color: #1f1f1f;), and by adding a margin on each side so the contents aren't flush with the browser page edge. h1 has been given the same treatment, with padding instead of margin (margin controls the space outside, padding controls the space inside), and by changing the background of the space h1 is in to white.
img is referring to any image tag. I prefer setting width in percentages as opposed to px (more mobile friendly), so setting max-width: 30% will resize to display the image in 30% of the div it's contained in or 30% of the entire page. (Note: use max-width as opposed to width when possible on items larger than 300px, as it's more mobile friendly.)
Each image can also be made into a link:
Each image now also has an alt tag and a title tag. An alt tag is text that will display if the image doesn't load or if the user is using a screenreader (more info on that later in the guide). A title tag is text that will show up if the user hovers over the image.
(Note: is technically a deprecated tag in HTML5. CSS options like text-align: center exist as a modern replacement, but that's outside the scope of this guide. still works just fine.)
Currently the link is just to the image itself at full size- you can leave this as is, or create an individual page for each image. This way you can also provide more information and necessary context for each piece. You can also use a cropped or censored version of this image as the thumbnail, and have the uncensored version on this page.
(If you're looking to create a fancy image popup: I can't teach you that, but w3 can: https://www.w3schools.com/howto/howto_js_lightbox.asp)
--- FOR WEBCOMICS ---
You can also add links to navigate through portions of your gallery without backing out to the main page, or very easily set up a webcomic layout:
For ongoing updates to a webcomic you could:
1) Make the most recent comic on home.html into its own page (ex. the image on home.html is moved to 004.html)
2) Update the NEXT link on 003.html to link to 004.html
3) Change the image on home.html from 004.png to 005.png
4) OPTIONAL: Update your RSS feed!
(There are ways to do this automatically as well, but that's something out of my scope of knowledge unfortunately.)
--- MAKING YOUR SITE INTO A HUB ---
Most artists aren't going to have their webpage as their only home online. There's also shops, subscription sites, and more that we want to direct someone towards. I've found that a top or bottom menu or row is the easiest way to link things while staying out of the way of the art and continuing to be mobile friendly.
HTML for a navbar:
CSS for a navbar:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
========================================
ON BEING MOBILE FRIENDLY
========================================
Always test your website on your phone- if you don't have a smart phone or are testing things locally, I recommend using Firefox's Inspect (right click -> inspect) and opening Responsive Design Mode (the two nested phones in the right corner, next to the meatball menu). This will let you preview any webpage in any phone formatting. Super useful!
I didn't go into CSS media queries in this guide since the focus is on getting a site up and running quickly, but if you customize your site more: look into using them for more complex elements such as collapsing your navbar on mobile.
========================================
ON ACCESSIBILITY
========================================
While vision accessibility may seem like an afterthought for a website that is primarily images, it really shouldn't be. Many low-vision visitors or those with sensory processing disorders depend on screenreaders and alt text while using the internet. It takes 30 seconds to make someone's internet experience much more enjoyable! An example: I am not vision impaired outside of needing mild corrective lenses, but I do get migraines that are irritated by bright light, particularly computer and phone screens. I use a screenreader when I need to work but migraines prevent me from seeing.
ALT TEXT, mentioned earlier, is the most important thing you can do. It's the text that appears when an image can't be displayed or is being parsed by assistive technology. Bad alt text: "image1.png". Good alt text: "a black and white ink drawing of a satyr with fat tits". Describe what's actually in the image- you don't need to write an essay, but be specific enough that someone who can't see it gets the gist. For decorative images that don't convey any information, an empty alt tag (alt="") is fine and tells screenreaders to skip it.
Other tips:
- Use actual header tags (, , etc.) in order and don't skip levels- screenreaders use these to navigate a page.
- Don't use color alone to convey information (ex. "click the red link")- colorblindness means this info is unhelpful.
- Make sure your text has enough contrast against your background. Dark grey on black is hard to read for everyone, not just low-vision users. WebAIM's contrast checker is a free tool for this: https://webaim.org/resources/contrastchecker/
- Avoid flashing or rapidly cycling animations if you can- these can trigger seizures in people with photosensitive epilepsy. I also love a good retro website aesthetic, but it's important to keep this in mind when deciding how many dancing babies to put on a page.
If you want to check how your site holds up overall, WAVE will audit any public URL for free and tell you exactly what to fix: https://wave.webaim.org/
========================================
BASIC SECURITY AND PERFORMANCE
========================================
Your host should offer free HTTPS/SSL- enable it. This service encrypts traffic between your site and visitors and is now expected by modern browsers. If your host doesn't offer it, most support free certificates through Let's Encrypt: https://letsencrypt.org/
For images: compress them before uploading. Large uncompressed files will slow your site down noticeably. Squoosh (https://squoosh.app) is a free, easy tool for this if you aren't doing it in your image creation program of choice. Your website doesn't need 300dpi images! 72dpi is fine.
========================================
FAQ
========================================
Q. I have 1,000+ images to upload and don't want to use something like Wordpress- is there a quicker way of doing this?
A. OLD INFO: Not really- you could bulk rename files (Windows guide: https://www.windowscentral.com/how-rename-multiple-files-bulk-windows-10, Mac guide: https://support.apple.com/guide/mac-help/rename-files-folders-and-disks-on-mac-mchlp1144/mac) if you don't have a consistent naming method and then copy and paste layout text over and over while changing one or two numbers. It may also just be easier to link a .zip of images grouped by subject or date.
NEW FOR 2026: There's a tool for this now that I've been using with great success! Bulk Rename Utility (https://www.bulkrenameutility.co.uk/) has been my good buddy in the Windows department for this. I also have been told that it works well in Wine as well, for the Linux people. There's also a list of free GUI ones here: https://www.linuxlinks.com/best-free-open-source-gui-batch-renamers/
Sorry Mac people, I don't know of any good alternatives outside of the guide previously linked. :(
Q. Can I independently host an online shop this way?
A. Potentially, yes, if you have a payment processor lined up and a lot of time to dedicate to this.
Q. Can I independently host a paysite this way?
A. Absolutely, but see above.
========================================
ADDITIONAL RESOURCES FOR FUNSIES
========================================
--- LAYOUTS ---
- https://john-doe.neocities.org/ <- This is the one I use for my own portfolio website!
- https://rarebit.neocities.org/ (intermediate level- you need to be comfortable with code to use this webcomic template)
- https://github.com/codercowboy/mincomixsite (easier than the above)
- https://scottandrew.com/responsive-web-comic-layout/ (probably even easier than the one above)
- https://ribo.zone/free/layouts/ (free layouts)
- https://codepen.io/sadness97/full/XJbLxNj
--- GENERAL WEBMASTER RESOURCES ---
- Sadgrl.online: https://sadgrl.online/webmastery/ (lots of resources, some premade layouts and layout generators, more fun stuff)
- W3Schools: https://www.w3schools.com/ (purely educational- recommend going through every lesson from beginning to end if you want to get serious about this)
- MDN: https://developer.mozilla.org/en-US/ (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
- Adding an RSS feed to your website: https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e
- An extensive guide to robots.txt: https://yoast.com/ultimate-guide-robots-txt/ (if you want to keep search engines from indexing parts of your website)
--- AI SCRAPER DEFENSES ---
- A guide from Krad on keeping AI scrapers off your site: https://kradeelav.dreamwidth.org/202168.html
- Spawning (opt out of AI training datasets): https://spawning.ai
- Dark Visitors (maintain a robots.txt against AI crawlers): https://darkvisitors.com
--- ACCESSIBILITY ---
- An extensive guide to making your website fully accessible: https://theultimatemotherfuckingwebsite.com/
- WAVE accessibility evaluator: https://wave.webaim.org/
- Crash Override Network: http://www.crashoverridenetwork.com/resources.html
--- WEBRING SOFTWARE ---
- http://www.demon-sushi.com/ring/ <- My software of choice- I use this for webring.gay and comicfair.online.
- https://allium.house/garden/onionring/
- https://petrapixel.neocities.org/coding/webringu
- https://mxb.dev/blog/webring-kit/
- https://github.com/k3rs3d/ringfairy
- https://blog.itsnero.com/archives/1545 <- I made this one! This is what Adult Artists Webring (https://www.adultartistswebring.org/) uses.
--- WEBRINGS I LIKE ---
- https://qtbeans.neocities.org/artistsonline (webringu)
- https://webring.gay (rainring)
- https://comicfair.online/ (rainring)
- https://adultartistswebring.org (manual)
- https://transmascring.netlify.app/
- https://hotlinewebring.club/
- https://fujofans.scumsuck.com/
- https://webring.xxiivv.com/
- https://github.com/GusBusDraws/smallweb-subway.js?tab=readme-ov-file#instructions-to-join
- https://smoothsailing.asclaria.org/
- https://darktheme.club/
- https://512kb.club/
- https://250kb.club/
- https://1mb.club/
- https://no-js.club/
- https://webring.dinhe.net/
--- BANNER EXCHANGE SOFTWARE ---
- https://www.phpwebscripts.com/free-scripts/easy_banner.html
--- WEBRING ADJACENT ---
- https://ribo.zone/neighborhood
- https://octothorp.es/
- https://webchain.milkmedicine.net/
- https://nightfall.city/
YOUR NAME HERE
MORE INFO HERE
Lorem ipsum dolor sit amet...