I Learned This From a Zine: How to Make Your Own Website (the Website)

Hello! If you're reading this, you probably followed the link in the "How to Make a Website" zine!

This site covers the same topics as in the zine. You can bookmark it and come back later. This means you can give the zine away to a friend!

How do I make headings?

Headings use the <h1>, <h2>, <h3>, <,h4>, <h5>, and <h6> tags. They're in order from largest to smallest. Usually, a website only has one <h1> tag, which is used for the title.

Format headings like this:

<h1>My Page Title</h1>

<h2>An important topic on my page</h2>

<h3>Some stuff that explains the important topic</h3>

<h4>Some stuff that explains the stuff that explains the important topic</h4>

...and so on.

How do I make paragraphs

Use <p> to start a paragraph and </p> to close it, like so:

<p> Hello World!</p>

The <p> tag inserts space between paragraphs automatically. If you don't want space between your lines, use a line break instead.

Put in a line break by placing a <br> tag at the end of a line, where you want it to break. <br> tags are great for writing poetry. Wrap the entire poem in <p> tags. (You do not need a </br> tag.)

<p>This is a little poem<br>
I'm writing on my site<br>
I'm sorry that its rhymes<br>
Don't actually exist.<p>

How do I make lists?

First, decide what kind of list you want. Do you want a numbered list or just bullet points?

A numbered list is also known as an ordered list, or "ol" for short. A bullet point list is an unordered list, or "ul" for short.

Each item on the list is a list item, or "li" for short.

You use "ol" and "ul" to wrap the entire list, so your browser knows it is a list. You use "li" to wrap each list item, so your browser knows it it a separate item ont he list.

This is an ordered list:

<ol>
1. <li>This is the first thing on the list</li>
2. <li>This is the second thing on the list</li>
3. <li>This is the third thing on the list</li>
</ol>

You do not need to type the numbers! The browser will create them for you when you make an ordered list.

To make an unordered list with bullet points, use the same format as an ordered list, but change "ol" to "ul" in all the tags:

<ul>
• <li>This is the first thing on the list</li>
• <li>This is the second thing on the list</li>
• <li>This is the third thing on the list</li>
</ul>

How do I add images?

First, upload your image to your Neocities site.

Second, link to the image like so:

<img src="/download.png">, where "download.png" is the name of your image. You don't need a closing </img> tag.

You'll see the image on your site! Here's what "https://ilearnedthisfromazine.neocities.org/download.png" looks like:

If you only see text, that's because the image didn't load. Look up "adding alt text to images" to add text and help visitors to your site.

A note: Only link to images that you've uploaded to your site. Linking directly to an image on another site is called "hotlinking," and it's a bad idea for two reasons:

• It's considered very bad manners. Bandwidth used to be a lot more expensive. If you hotlinked, you could cost someone else tons of money in server fees. Today bandwidth is cheaper (at least in the US), but hotlinking is still considered rude.
• You don't control what the other person does with their site. If they delete the image, it will mess up your link. Prevent this by putting it in your own files!

How do I add links?

To add a link, you'll need to use an opening <a href> and closing </a> tag:

<a href="https://genrandom.com/cats/>Put the text people will click on here</a>

The result looks like this: Put the text people will click on here

Why does this site look so boring?

You can add colors, fonts, backgrounds, and all kinds of interesting stuff to a Web site. These days, you're limited only by your imagination and your knowledge!

To start, think of your website as consisting of two major categories: the "content" (what you write, photos, videos etc) and the "style" (the colors, fonts, and so on.

Content is handled by HTML - what we've been learning here. Style info can be included in your HTML, but it gets messy fast. It's easier to use CSS.

"CSS" stands for "Cascading Style Sheets." It allows you to put all your style info in one place. Every page on your site can then read this one CSS file.

For example, check out this same page in different CSS styles:

• Primary colors and springlike vibes
• If Barbie made a website
• Feelin' edgy, might delete later
• beep boop, i am a l33t h4xx0r

I have a question that isn't answered here!

Check out these resources to learn more.

• W3Schools HTML Tutorial
• W3Schools CSS Tutorial
• HTML for People
• 32Bit Cafe "Creating Your Own Website" Tutorial

Want to see all the HTML used for this page? Right-click anywhere on the page and select "View Page Source." Learn all my secrets!