Home SlumJuice Action Grandma HTML Tutorial Page History


HTML Tutorial


How to make a site in HTML


Some things to know about html

First of all, HTML stands for HyperText Markup Language. It works in a way that elements are displayed on the screen in the order that they are written in the code. So that means if I put an image here and on the next line some text, it would look like this:




HTML doesn't involve classes, scripts, or millions of semicolons; HTML uses "tags". A tag is basically a certain command surrounded in less than/greater than signs. For example, <h1>text!</h1> would make this:


I added some extra code to make it white, but it's the same idea. You can view the page source to see how I did it. What I did was I made a header tag, which acts like titles for webpages. Headers come in 6 sizes: h1, h2, h3, h4, h5, and h6. I will now show you those tags in action.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Again, I added extra code to make it white, but that's it. There are many other types of text, like paragraphs which is shown by the <p> tag. Again, example


And lists, which aren't used as much, but should be taught just in case. Now, lists are a little tricky. You need a tag inside a tag, which requires said tag go be multiline. So, on your first line, the tag needs to be <ul>, the next line needs to be indented, and it will be <li>(Item 1)</li>. You can repeat that tag for as many list items you want. on your final line, your tag needs to be </ul> and then you are done! This is how it should end up looking.

  • (Item 1)

If you want a background on your website, there is a simple tag to get one. <body background="(image.png)"> I can't show it here, as it would overwrite my prexisting background, but it really doesn't need explaining. Our final tag in this part of the course is the <img> tag. It is pretty self explainatory. It makes an image. The way to use the <img> tag is also a little weird. You need to add attributes to it. An attribute for example is me adding style="color:white" after all the text on this site. So for an image tag, it needs to be <img src="image.jpg"> but you can replace the image with whatever you want, or you can use a url, but they both work generally the same. Now, if we put an image tag on 1 line, and an h3 on the next, we get what we made in the beginning. Line 1: <img src="atomic.gif"> Line 2: <h3>Atoms!</h3>

Line 1: <img src="atomic.gif"> Line 2: <h3>Atoms!</h3>



Making a page

Ok! Here's the fun part. Actually making a site. Now, there are many sites that offer full html web hosting, but my favorite is NeoCities. It's trying to bring back the creativity of 90s and 2000s web hosting sites like GeoCities, and is doing a great job. No ads, no annoying template editor, just plain html. They do have a premium plan, it's $5 a month, and it gives you 50gb of storage, custom domain support, and some other perks that you can see on their website. So once you are in your index.html file, Delete everything. We don't need the stuff it comes prebuilt with; And start your document with:

Now we add content to the website. The next lines you add are:

This is the End of the Tutorial as of Now.