chameleon's html tutorial

If you're going to be making your own website, whether on the tildeverse, neocities, or somewhere else, you're going to need to code it up! That's where html comes in. I've been writing it since I was 10 years old (yes, that long!) and I've picked up a lot of esoteric knowledge in that time. Course, back then, we didn't have no fancy html5, and we barely did CSS or used javascript for much more than annoying buttons, har-har.

So what is html? It stands for "hypertext markup language". So what's "hypertext"? Or for that matter, "markup language"?!

Well hypertext is what it sounds like. It's more-than text. While an html file is plaintext (meaning it's written only in recognizable characters, no binary!) it describes incredible web pages with links, fancy fonts, and cool formatting! A markup language is simply a special computer language to express to the computer (via your web browser) what the page is supposed to say and look like.

So what should you use to write html? You'll need a good programmer's text editor. This isn't something like Microsoft Word; more like a fancy Notepad! Of course you can write html in Notepad itself, but you'll soon wish you hadn't. Here's some editors you can use:

My first HTML page

So, now you've got a text editor, you're read for some coding! Let's start with something simple. Open a textfile called "mypage.html", and put this code inside:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> My First Website </title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Now open it up in your web browser (I use firefox because it's free software!) Wow! You should be able to see a huge lovely "Hello World!" at the top of a blank page! Amazing!

Yeah, that's very cool, I hear you saying, but how does it work!? Well, it's simple. HTML works on the concept of "tags". These are the things in angle brackets, like <title> and <h1>. The angle brackets let the browser know we're starting a tag here, and the word inside tells you what tag it is! Some tags need to have a closing tag - this is the same tag name, but with a / in front of it, like </title> and </h1>. This tells the browser that the tag ends here and we can start a new one!

This method is so flexible, you can nest tags together! Actually, that's what the document is - it's as many tags as you like, wrapped inside the tag <html> </html>.

So let's go through the tags, one by one!

Basic tags

So we have our page, but it's really really boring at the moment. It's nothing but a title! It's high time we added some content. Play around with these tags!

Tag attributes

With what you've learned so far, you can already make very nice pages with lots of information on them. But these pages may be a little boring - no links and no pictures!

The tag for a link is <a></a> and the tag for an image is <img>. But if you put them into your document, nothing interesting will happen. Your links will go nowhere and your images will be empty!

To link to things and to add images, we need to learn about attributes. These are special properties inside a tag that tell the browser about what the tag is or does!

A property is specified by name/value pairs after the tag name but before the closing angle bracket: <tag name="value">. We use double quotes to prevent our html from becoming confusing with all the angle brackets and slashes that might be in the attribute value. We've already seen an example, with the meta tags in our head section!

To specify a link address, we use the href attribute. This html: <a href="http://example.com/">click me!</a> will produce this link: click me!

To specify the location of a picture, we use the src attribute. This html: <img src="https://cdn.pixabay.com/photo/2019/06/25/05/19/waterfall-4297449_960_720.jpg"> will produce this image:

We can also use the alt attribute to specify alt text if an image is broken, or to describe the image to people using screenreaders:

Oh no, I lost my image!

Here are some cool attributes you might want to use in your pages:

There's lots more to learn about html, css, and javascript. I reccomend w3schools for exhaustive documentation of all things web!

Happy hacking! ☺