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 (but w3 has a reference library if you're curious). 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- this is just recreating the Example layout) 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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
A decent place to start, but not very aesthetically pleasing. It's important to be able to give your art a complimentary platform to shine on, even if it isn't complex. Let's pretty this up a bit!
There we go- that's a bit more like it. I know this is a bit "how to draw the owl"-esque, but here's the break down:
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 the '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")
Anyway:
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 (margin-left: 50px; margin-right: 50px;) on each side of anything in the body tag 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, and width sets the max width for the relevant image. You can set height as well, but setting width will resize height regardless so it isn't usually necessary to set. I prefer setting this 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.)
h2 has not been edited- h1-h6 have generally agreed upon sizes that might display slightly differently between browsers, so if this is a concern to you, assign some CSS to each heading.
Each image is also now a link:
Each image also now 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. A title tag is text that will show up if the user hovers over the image. (These should not need to be the same.)
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 like so:
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 like many website builders allow: I can't teach you that, but w3 can.)
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:
FIRST |
ARCHIVE |
LATEST |
NEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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
So you know how to get images and text onto your website in a vaguely pleasing manner for now- great! What else?
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. Let's add one to our index page after also adding a font-family (font-family: "Lucida Console", "Courier New", monospace;) to our body tag from earlier:
Here's what the HTML for this looks like:
And here's what the CSS for this looks like:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I've gone and made a CSS class (the text after the period) for the navbar specifically! It's essentially a smartened up version of the h1 bar we had back at the beginning. Inline looks like this:
Again, I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
This is just some styled text links, so it renders quickly and is easily customizable for additional links. You can also add a small image of your signature, icons for specifical social media sites, multiple rows of navbar, and more! The current one on my own website is similar:
Though that one is a little more complicated than the one in this guide.
Now we have a website that, after a little extra tweaking, looks like this:
It's extremely bare-bones, but hey: it works. And it's all yours.
On Being Mobile Friendly And On Accessibility
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. An example would be doing something like this for your navbar:
But then on mobile, it collapses like this and removes the dividing lines:
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 people 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!
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. Not really- you could bulk rename files (Windows guide, Mac guide ) 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.
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.
Some other resources, if you'd like to get deeper into webmastery:
-Sadgrl.online (lots of resources, some premade layouts and layout generators, more fun stuff)
-W3Schools (purely educational resource- definitely recommend going through every lesson from beginning to end if you want to get serious about this)
-MDN (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
-Adding an RSS feed to your website (Dense, but worth it if you have specific things you want people to know have updated. I haven't added one to my own website since I usually redirect people to this blog's feed- WP blogs have RSS feed built in automatically.)
-An extensive guide to robots.txt (if you want to keep search engines from indexing parts of your website)
-A guide from Krad on keeping AI scrapers off your site
-An extensive guide to making your website fully accessible
-Plug your url in to evaluate your website's accessibility
-Crash Override Network
,, 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 (but w3 has a reference library if you're curious). 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- this is just recreating the Example layout) 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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
A decent place to start, but not very aesthetically pleasing. It's important to be able to give your art a complimentary platform to shine on, even if it isn't complex. Let's pretty this up a bit!
There we go- that's a bit more like it. I know this is a bit "how to draw the owl"-esque, but here's the break down:
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 the '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")
Anyway:
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 (margin-left: 50px; margin-right: 50px;) on each side of anything in the body tag 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, and width sets the max width for the relevant image. You can set height as well, but setting width will resize height regardless so it isn't usually necessary to set. I prefer setting this 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.)
h2 has not been edited- h1-h6 have generally agreed upon sizes that might display slightly differently between browsers, so if this is a concern to you, assign some CSS to each heading.
Each image is also now a link:
Each image also now 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. A title tag is text that will show up if the user hovers over the image. (These should not need to be the same.)
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 like so:
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 like many website builders allow: I can't teach you that, but w3 can.)
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:
FIRST |
ARCHIVE |
LATEST |
NEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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
So you know how to get images and text onto your website in a vaguely pleasing manner for now- great! What else?
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. Let's add one to our index page after also adding a font-family (font-family: "Lucida Console", "Courier New", monospace;) to our body tag from earlier:
Here's what the HTML for this looks like:
And here's what the CSS for this looks like:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I've gone and made a CSS class (the text after the period) for the navbar specifically! It's essentially a smartened up version of the h1 bar we had back at the beginning. Inline looks like this:
Again, I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
This is just some styled text links, so it renders quickly and is easily customizable for additional links. You can also add a small image of your signature, icons for specifical social media sites, multiple rows of navbar, and more! The current one on my own website is similar:
Though that one is a little more complicated than the one in this guide.
Now we have a website that, after a little extra tweaking, looks like this:
It's extremely bare-bones, but hey: it works. And it's all yours.
On Being Mobile Friendly And On Accessibility
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. An example would be doing something like this for your navbar:
But then on mobile, it collapses like this and removes the dividing lines:
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 people 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!
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. Not really- you could bulk rename files (Windows guide, Mac guide ) 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.
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.
Some other resources, if you'd like to get deeper into webmastery:
-Sadgrl.online (lots of resources, some premade layouts and layout generators, more fun stuff)
-W3Schools (purely educational resource- definitely recommend going through every lesson from beginning to end if you want to get serious about this)
-MDN (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
-Adding an RSS feed to your website (Dense, but worth it if you have specific things you want people to know have updated. I haven't added one to my own website since I usually redirect people to this blog's feed- WP blogs have RSS feed built in automatically.)
-An extensive guide to robots.txt (if you want to keep search engines from indexing parts of your website)
-A guide from Krad on keeping AI scrapers off your site
-An extensive guide to making your website fully accessible
-Plug your url in to evaluate your website's accessibility
-Crash Override Network
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 (but w3 has a reference library if you're curious). 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- this is just recreating the Example layout) 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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
A decent place to start, but not very aesthetically pleasing. It's important to be able to give your art a complimentary platform to shine on, even if it isn't complex. Let's pretty this up a bit!
There we go- that's a bit more like it. I know this is a bit "how to draw the owl"-esque, but here's the break down:
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 the '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")
Anyway:
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 (margin-left: 50px; margin-right: 50px;) on each side of anything in the body tag 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, and width sets the max width for the relevant image. You can set height as well, but setting width will resize height regardless so it isn't usually necessary to set. I prefer setting this 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.)
h2 has not been edited- h1-h6 have generally agreed upon sizes that might display slightly differently between browsers, so if this is a concern to you, assign some CSS to each heading.
Each image is also now a link:
Each image also now 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. A title tag is text that will show up if the user hovers over the image. (These should not need to be the same.)
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 like so:
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 like many website builders allow: I can't teach you that, but w3 can.)
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:
FIRST |
ARCHIVE |
LATEST |
NEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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
So you know how to get images and text onto your website in a vaguely pleasing manner for now- great! What else?
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. Let's add one to our index page after also adding a font-family (font-family: "Lucida Console", "Courier New", monospace;) to our body tag from earlier:
Here's what the HTML for this looks like:
And here's what the CSS for this looks like:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I've gone and made a CSS class (the text after the period) for the navbar specifically! It's essentially a smartened up version of the h1 bar we had back at the beginning. Inline looks like this:
Again, I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
This is just some styled text links, so it renders quickly and is easily customizable for additional links. You can also add a small image of your signature, icons for specifical social media sites, multiple rows of navbar, and more! The current one on my own website is similar:
Though that one is a little more complicated than the one in this guide.
Now we have a website that, after a little extra tweaking, looks like this:
It's extremely bare-bones, but hey: it works. And it's all yours.
On Being Mobile Friendly And On Accessibility
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. An example would be doing something like this for your navbar:
But then on mobile, it collapses like this and removes the dividing lines:
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 people 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!
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. Not really- you could bulk rename files (Windows guide, Mac guide ) 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.
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.
Some other resources, if you'd like to get deeper into webmastery:
-Sadgrl.online (lots of resources, some premade layouts and layout generators, more fun stuff)
-W3Schools (purely educational resource- definitely recommend going through every lesson from beginning to end if you want to get serious about this)
-MDN (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
-Adding an RSS feed to your website (Dense, but worth it if you have specific things you want people to know have updated. I haven't added one to my own website since I usually redirect people to this blog's feed- WP blogs have RSS feed built in automatically.)
-An extensive guide to robots.txt (if you want to keep search engines from indexing parts of your website)
-A guide from Krad on keeping AI scrapers off your site
-An extensive guide to making your website fully accessible
-Plug your url in to evaluate your website's accessibility
-Crash Override Network
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 (but w3 has a reference library if you're curious). 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- this is just recreating the Example layout) 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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
A decent place to start, but not very aesthetically pleasing. It's important to be able to give your art a complimentary platform to shine on, even if it isn't complex. Let's pretty this up a bit!
There we go- that's a bit more like it. I know this is a bit "how to draw the owl"-esque, but here's the break down:
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 the '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")
Anyway:
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 (margin-left: 50px; margin-right: 50px;) on each side of anything in the body tag 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, and width sets the max width for the relevant image. You can set height as well, but setting width will resize height regardless so it isn't usually necessary to set. I prefer setting this 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.)
h2 has not been edited- h1-h6 have generally agreed upon sizes that might display slightly differently between browsers, so if this is a concern to you, assign some CSS to each heading.
Each image is also now a link:
Each image also now 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. A title tag is text that will show up if the user hovers over the image. (These should not need to be the same.)
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 like so:
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 like many website builders allow: I can't teach you that, but w3 can.)
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:
FIRST |
ARCHIVE |
LATEST |
NEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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
So you know how to get images and text onto your website in a vaguely pleasing manner for now- great! What else?
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. Let's add one to our index page after also adding a font-family (font-family: "Lucida Console", "Courier New", monospace;) to our body tag from earlier:
Here's what the HTML for this looks like:
And here's what the CSS for this looks like:
.navbar {
background-color:white;
color:black;
padding: 10px;
font-size: 36px;
}
I've gone and made a CSS class (the text after the period) for the navbar specifically! It's essentially a smartened up version of the h1 bar we had back at the beginning. Inline looks like this:
Again, I'd advise against inline CSS if you're adding multiple pages to your site, but the option is there if needed.
This is just some styled text links, so it renders quickly and is easily customizable for additional links. You can also add a small image of your signature, icons for specifical social media sites, multiple rows of navbar, and more! The current one on my own website is similar:
Though that one is a little more complicated than the one in this guide.
Now we have a website that, after a little extra tweaking, looks like this:
It's extremely bare-bones, but hey: it works. And it's all yours.
On Being Mobile Friendly And On Accessibility
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. An example would be doing something like this for your navbar:
But then on mobile, it collapses like this and removes the dividing lines:
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 people 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!
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. Not really- you could bulk rename files (Windows guide, Mac guide ) 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.
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.
Some other resources, if you'd like to get deeper into webmastery:
-Sadgrl.online (lots of resources, some premade layouts and layout generators, more fun stuff)
-W3Schools (purely educational resource- definitely recommend going through every lesson from beginning to end if you want to get serious about this)
-MDN (a little more reliable than W3Schools in some respects, but isn't super beginner friendly)
-Adding an RSS feed to your website (Dense, but worth it if you have specific things you want people to know have updated. I haven't added one to my own website since I usually redirect people to this blog's feed- WP blogs have RSS feed built in automatically.)
-An extensive guide to robots.txt (if you want to keep search engines from indexing parts of your website)
-A guide from Krad on keeping AI scrapers off your site
-An extensive guide to making your website fully accessible
-Plug your url in to evaluate your website's accessibility
-Crash Override Network
YOUR NAME HERE
MORE INFO HERE
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
FIRST | ARCHIVE | LATEST | NEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.